Card

A surface for grouping related content, composed of header, content, and footer.

sivir-ui

Next.js

vercel.com/aidan-neel/sivir-ui

Ready

Production Deployed 2h ago

main feat(studio): restore original styling aidan-neel

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add card

Usage

Import Card and compose it with sub-components:

import * as Card from '$lib/sivir/components/card';

<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
  </Card.Header>
  <Card.Content>Content here</Card.Content>
  <Card.Footer>
    <Button>Action</Button>
  </Card.Footer>
</Card.Root>

Examples

Card with different structures and compositions.

Full composition

Account settings

Manage your workspace settings.

Currently on the Team plan. 12 of 25 seats used.

Content only

Minimal card with just content.

Header and footer

Settings

Panel frame

Inset surface

Concentric double-line frame for denser UI chrome.

Use variant="panel" when a card should sit inside a framed surface instead of a flat border.