Card | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/card.json

Usage

<script lang="ts">
  import * as Card from "$lib/components/ui/card/index.js";
</script>

<Card.Root>
  <Card.Header>
    <Card.Title>Title</Card.Title>
    <Card.Description>Description</Card.Description>
  </Card.Header>
  <Card.Panel>Content</Card.Panel>
  <Card.Footer>Footer</Card.Footer>
</Card.Root>

Card.Frame with header action

Use Card.Frame when you need a framed layout with an action button in the header, such as “Add” or “Connect”:

<script lang="ts">
  import Add01Icon from "@hugeicons/core-free-icons/Add01Icon";
  import HugeiconsIcon from "$lib/hugeicons-icon.svelte";
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
</script>

<Card.Frame>
  <Card.FrameHeader>
    <Card.FrameTitle>Project</Card.FrameTitle>
    <Card.FrameDescription>Manage your project settings and configuration</Card.FrameDescription>
    <Card.FrameAction>
      <Button variant="outline">
        <HugeiconsIcon aria-hidden="true" icon={Add01Icon} strokeWidth={2} />
        Add
      </Button>
    </Card.FrameAction>
  </Card.FrameHeader>
  <Card.Root>
    <Card.Panel>Content</Card.Panel>
  </Card.Root>
</Card.Frame>

For lists or data grids, render a Table with variant="card" inside Card.Frame so the grid matches the frame’s border and radius. See the Card.Frame example in the Table docs. Add the table registry item if it is not already in the project.

API Reference

This is a custom component using a polymorphic Svelte as prop, not a direct Shards UI wrapper.

Card.Root

Root container for the card. Supports the as prop.

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`"div"`	Render as a different element

Card.Header

Header section container. Supports the as prop.

Card.Title

Title text for the card. Supports the as prop.

Card.Description

Description text for the card. Supports the as prop.

Card.Action

Container for action buttons in the header. Automatically positions to the right. Supports the as prop.

Card.Panel

Main content area of the card. Also exported as Card.Content. Supports the as prop.

Card.Footer

Footer section for the card. Supports the as prop.

Card.Frame API Reference

Card.Frame is an alternative layout for cards that groups a header, content, and footer with consistent styling and clipping. Use it when you need a framed card with optional header actions.

Card.Frame

Root container for the framed card layout. Supports the as prop.

Card.FrameHeader

Header section for the frame. Contains title, description, and optionally Card.FrameAction. Supports the as prop.

Card.FrameTitle

Title text for the frame. Supports the as prop.

Card.FrameDescription

Description text for the frame. Supports the as prop.

Card.FrameAction

Container for action buttons (e.g. “Add”, “Edit”) in the header. Place it as a sibling of Card.FrameTitle and Card.FrameDescription inside Card.FrameHeader. It is positioned in the top-right via CSS grid (col-start-2, row-span-2, self-center, justify-self-end). Use it for primary actions that apply to the entire frame. Supports the as prop.

Card.FrameFooter

Footer section for the frame. Supports the as prop.