Card

Preview

Card title A short supporting description. A card groups related content into a single surface. Action

Show code Copy

Installation

The card ships for all three targets. Pick the tab for your project — the CLI detects which you are on and serves the matching implementation.

React

npx @nana-tec/ui add card

Lands as src/components/ui/card/card.tsx, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Svelte

npx @nana-tec/ui add card

Lands in src/lib/components/ui/card/ as Card.svelte, CardHeader.svelte, CardTitle.svelte, CardDescription.svelte, CardContent.svelte and CardFooter.svelte, styled with Tailwind classes that resolve to the design tokens. Requires Tailwind v4.

Web Components

Install the package for a versioned dependency:

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add card

Usage

React

import {
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export function Example() {
  return (
    <Card variant="elevated">
      <CardHeader>
        <CardTitle>Card title</CardTitle>
        <CardDescription>A short supporting description.</CardDescription>
      </CardHeader>
      <CardContent>A card groups related content into a single surface.</CardContent>
      <CardFooter>
        <Button size="sm">Action</Button>
      </CardFooter>
    </Card>
  );
}

Every part is optional and each is a plain div (or h3 / p for the title and description), so you can compose or skip them freely.

Svelte

<script lang="ts">
  import {
    Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
  } from '$lib/components/ui/card';
  import { Button } from '$lib/components/ui/button';
</script>

<Card variant="elevated">
  <CardHeader>
    <CardTitle>Card title</CardTitle>
    <CardDescription>A short supporting description.</CardDescription>
  </CardHeader>
  <CardContent>A card groups related content into a single surface.</CardContent>
  <CardFooter>
    <Button size="sm">Action</Button>
  </CardFooter>
</Card>

Every part is optional and each is a plain element, so you can compose or skip them freely.

Web Components

import "@nana-tec/ui-components/card";

<nana-card style="max-width:22rem">
  <nana-card-header>
    <nana-card-title>Card title</nana-card-title>
    <nana-card-description>A short supporting description.</nana-card-description>
  </nana-card-header>
  <nana-card-content>A card groups related content into a single surface.</nana-card-content>
  <nana-card-footer>
    <nana-button size="sm">Action</nana-button>
  </nana-card-footer>
</nana-card>

Note

The live previews on this page render the Web Components build, because that is what runs in a page without a framework runtime. The variants, sizes and states are identical across all three, so what you see is what you get in React and Svelte too.

Classes you pass to the React and Svelte components are merged with tailwind-merge, so an override wins rather than fighting. See Using Tailwind.

Variants

The variant attribute sets the card’s surface treatment — default, elevated, outlined, filled, or glass.

Default Elevated Outlined Filled Glass

Show code Copy

Interactive

Add the interactive attribute to make the whole card a hoverable, focusable target (e.g. a link card).

Interactive card Hover or focus me Lifts on hover and shows a focus ring.

Show code Copy

API

The React and Svelte props, read from the components’ own types:

React

Card

Prop	Type	Default
variant	CardVariant	'default'

Also accepts HTMLAttributes<HTMLDivElement>.

Svelte

Card

Prop	Type	Default
variant	CardVariant	'default'
children	Snippet	—

Also accepts Omit< HTMLAttributes<HTMLDivElement>, 'class' >.

The attribute names, events and CSS hooks below are the Web Components reference.

Properties

Property	Attribute	Type	Default	Description
interactive	interactive	boolean	false	Adds hover lift, pointer cursor and a focus ring for clickable cards. Composes with any variant.
variant	variant	CardVariant	'default'	Visual style

Slots

Slot	Description
(default)	Card sub-sections (header, content, footer)

CSS custom properties

Property	Description
--nana-card-bg	Background colour
--nana-card-color	Text colour
--nana-card-radius	Corner radius

Slots

Slot	Description
(default)	Card sub-sections (header, content, footer)

CSS Variables

Variable	Description
--nana-card-bg	Background colour
--nana-card-color	Text colour
--nana-card-radius	Corner radius

Related components

• Details
• Divider
• Dialog
• Drawer
• Popup

Storybook

Explore Card interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook