Sivir UI
73

Card

A bordered surface built from Header, Title, Description, Content, and Footer. The panel and inset variants add a frame around it; inset also moves the footer into a bar below it.

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

Card.Root takes a variant of default (a bordered surface), panel, or inset. Every other part is optional.

import { Button } from '@sivir-ui/svelte/components/button';
import * as Card from '@sivir-ui/svelte/components/card';

<Card.Root>
  <Card.Header>
    <Card.Title>Delete project?</Card.Title>
    <Card.Description>This removes all deployments and logs.</Card.Description>
  </Card.Header>
  <Card.Footer>
    <Button variant="outline">Cancel</Button>
    <Button variant="destructive">Delete</Button>
  </Card.Footer>
</Card.Root>

Examples

Full composition

Workspace seats

Billed monthly for each active member.

Team plan. 12 of 25 seats used.

Content only

No deployments in the last 30 days.

Panel frame

Build minutes

Resets on the first of each month.

1,284 of 5,000 minutes used. Builds queue when you reach the limit.

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 - Renders the surface and sets its variant.

Card.Header - Groups the title and description.

Card.Title - Renders the card heading.

Card.Description - Renders muted text under the title.

Card.Content - Renders the card body.

Card.Footer - Aligns actions to the end; in the inset variant, renders below the surface.