Components

Cards

Composed surfaces for related information.

Content card

Compose a header, content, and footer. Keep the primary action close to the information it belongs to.

A space for your ideas

Keep the important things close.

Start with a note. See where it takes you.

View code

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@repo/ui/components/ui/card"
import { Button } from "@repo/ui/components/ui/button"

<Card>
  <CardHeader>
    <CardTitle>A space for your ideas</CardTitle>
    <CardDescription>Keep the important things close.</CardDescription>
  </CardHeader>
  <CardContent>Start with a note. See where it takes you.</CardContent>
  <CardFooter><Button>Create a note</Button></CardFooter>
</Card>

Back to overview