Components
Loading preview...
Here is Item component
npx shadcn@latest add https://21st.dev/r/shadcn/itemimport { Button } from "@/components/ui/button"
import {
Item,
ItemActions,
ItemContent,
ItemDescription,
ItemTitle,
} from "@/components/ui/item"
export default function ItemVariant() {
return (
<div className="flex flex-col gap-6">
<Item>
<ItemContent>
<ItemTitle>Default Variant</ItemTitle>
<ItemDescription>
Standard styling with subtle background and borders.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Open
</Button>
</ItemActions>
</Item>
<Item variant="outline">
<ItemContent>
<ItemTitle>Outline Variant</ItemTitle>
<ItemDescription>
Outlined style with clear borders and transparent background.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Open
</Button>
</ItemActions>
</Item>
<Item variant="muted">
<ItemContent>
<ItemTitle>Muted Variant</ItemTitle>
<ItemDescription>
Subdued appearance with muted colors for secondary content.
</ItemDescription>
</ItemContent>
<ItemActions>
<Button variant="outline" size="sm">
Open
</Button>
</ItemActions>
</Item>
</div>
)
}