uix-uiQuote
Blockquote & pull quote. 3 styles.
The Sylhet green is the first tea my mother asks about when I visit.
import { Avatar } from "@/components/ui/avatar";
import { Quote } from "@/components/ui/quote";
export default function Example() {
return (
<div style={{ width: 420, maxWidth: "100%" }}>
<Quote author="Sadia Rahman" role="Regular customer, Gulshan" avatar={<Avatar initials="SR" />}>
The Sylhet green is the first tea my mother asks about when I visit.
</Quote>
</div>
);
}
Installation
$ npx uix-ui@latest add quoteThis copies the file into components/ui/quote.tsx in your project. npx shadcn@latest add @uix/quote works too.
Usage
import { Quote } from "@/components/ui/quote";
<div style={{ width: 420, maxWidth: "100%" }}>
<Quote author="Sadia Rahman" role="Regular customer, Gulshan" avatar={<Avatar initials="SR" />}>
The Sylhet green is the first tea my mother asks about when I visit.
</Quote>
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | default | accent | large | "default" | |
author | React.ReactNode | – | |
role | React.ReactNode | – | |
avatar | React.ReactNode | – | Avatar beside the author (for example <Avatar initials="RS" />). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx