Skip to content
All 6 kits from $99 · Everything Bundle $149

Card

LayoutWeb + NativeMIT
View in Storybook

Composable card with header, title, description, content, and footer slots.

bun add @otfdashkit/ui

Preview

Card
Loading Storybook preview…

Code

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Button } from '@otfdashkit/ui'

export function Example() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-[hsl(var(--muted-foreground))]">Requires a connected GitHub repository.</p>
      </CardContent>
      <CardFooter className="gap-2">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

Kit for this component

Arcade Kit$99

Lay out a grid of cards for a catalog, store or feed.

See the kit