Sivir UI
Studio 64

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.

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.

Inset frame

sivir-ui

Next.js

vercel.com/aidan-neel/sivir-ui

Ready
Production Deployed 2h ago
main feat(studio): restore original styling aidan-neel

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.