Project Alpha

Data Display

Components for presenting data, content, and user information.

Card

Container for grouping related content

Create project
Deploy your new project in one-click.

Your project will be deployed on our global edge network with automatic SSL.

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>Content here</CardContent>
  <CardFooter>Footer</CardFooter>
</Card>

Avatar

User profile pictures with fallback

CNJDAB
<Avatar>
  <AvatarImage src="..." />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Badge

Status indicators and labels

DefaultSecondaryErrorOutline
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Error</Badge>
<Badge variant="outline">Outline</Badge>

Table

Display tabular data

A list of recent users.
NameEmailStatusRole
John Doejohn@example.comActiveAdmin
Jane Smithjane@example.comPendingMember
Bob Wilsonbob@example.comInactiveViewer
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>John Doe</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>