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/svelte 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.

Anatomy

Card.Root - Provides the card container.

Card.Title - Renders the card heading.

Card.Header - Groups card heading content.

Card.Footer - Groups card actions or metadata.

Card.Description - Renders the card description.

Card.Content - Renders the card body.