Railbase
GPTClaude

Card

A surface that groups related content and actions.

Updated

With header & footer
<Card class="w-full max-w-sm">
  <CardHeader>
    <CardTitle>Create project</CardTitle>
    <CardDescription>Deploy your new project in one click.</CardDescription>
  </CardHeader>
  <CardContent>
    <Input placeholder="Project name" />
  </CardContent>
  <CardFooter class="justify-end gap-2">
    <Button variant="ghost">Cancel</Button>
    <Button>Deploy</Button>
  </CardFooter>
</Card>

A surface that groups related content and actions.

Installation

railbase ui add card

Usage

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

<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Deploy in one click.</CardDescription>
  </CardHeader>
  <CardContent>Card body.</CardContent>
  <CardFooter>Footer.</CardFooter>
</Card>

Anatomy

Exported parts: Card · CardHeader · CardTitle · CardDescription · CardContent · CardFooter

← PreviousCalendarNext →Carousel