Shadcn-style Card
LayoutShadcn-style card for React. Composable card with header, title, description, content, and footer slots.
CardLayout · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Card from @otfdashkit/ui.
Code
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@otfdashkit/ui'
export function ProfileCard({ user }) {
return (
<Card>
<CardHeader>
<CardTitle>{user.name}</CardTitle>
<CardDescription>{user.role}</CardDescription>
</CardHeader>
<CardContent>
<p>{user.bio}</p>
</CardContent>
<CardFooter>
<Button>Follow</Button>
</CardFooter>
</Card>
)
}