Data Display

Card

Container with header / content / footer. The bread-and-butter of admin UIs.

Preview

Pro plan

Everything in Free, plus team features.

$29 / month

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

tsx

<Card>
  <CardHeader><CardTitle>Plan</CardTitle></CardHeader>
  <CardContent>Pro — $29/mo</CardContent>
</Card>

Data Display

Container with header / content / footer. The bread-and-butter of admin UIs.

Pro plan

Everything in Free, plus team features.

$29 / month

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

tsx

<Card>
  <CardHeader><CardTitle>Plan</CardTitle></CardHeader>
  <CardContent>Pro — $29/mo</CardContent>
</Card>