Klarhimmel UI
Klarhimmel ↗

Card

Stable

A surface that groups related content: flat, raised or sunken.

npx shadcn add @klarhimmel/card

When to use

  • Use for

    One thing people scan as a unit.

  • Not for

    Layout alone. Do not nest cards.

  • Pairs with

    Badge, Button, Text link.

Preview

New

Weekly summary

What shipped, what slipped and what is next, every Monday.

card.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Card } from '@/components/klarhimmel/ui/card';

export default function Example() {
  return (
    <Theme theme="brand">
      <Card className="p-6">…</Card>
    </Theme>
  );
}

Install

Import

import { Card } from '@/components/klarhimmel/ui/card';
Lands in
components/klarhimmel/ui/card.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

PropTypeDefaultDescription
variant'flat' | 'raised' | 'sunken''flat'Border only, a soft shadow, or a recessed surface.
...divHTMLAttributes<HTMLDivElement>-Native attributes are passed through.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabSkips the card itself; moves to buttons and links inside

A card is a plain container. Make one thing in it the link or button, not the whole card.

Accessibility