Skip to content
UI Kit
Accent color

Card components for React and Tailwind

One surface for ten jobs, from a plain card to profile, plan, stat, image, link, glass and a light beam.

10 variants
Switch category

One surface for ten jobs

Cards group content that belongs together, a person, a product, a number or a link. The Card component is one surface with ten variants, so a grid of mixed cards still shares radius, border, shadow and spacing.

Default holds any content, Interactive makes the whole card a link with a clear focus ring. Feature carries an icon, a title and a sentence, Profile a person with portrait and role. Plan is a compact price card, Stat a key number with change, Image a picture with a caption. Link previews an external page, Glass sits over pictures, and Beam sends a light along the border of the one card that matters most.

Make only one element inside a card clickable, or the whole card, never both. Keep cards in a grid at the same height so the rows line up. One Beam per page is plenty, it draws the eye only when it is rare.

Card

Default

Header with an action, content and a footer whose hairline runs to the edges.

Interactive

A light follows the pointer, the card lifts and tilts a touch, a line of light runs along the top. For cards that are links.

Feature

Icon tile, title, text and a link that covers the whole card. Optional visual on top.

Profile

Photo or initials, name, role, a few numbers, links and two actions.

Plan

Compact plans for side panels and upsells. The recommended one carries the beam.

Stat

Value, change in the locale format and a small trend. Lower can be better.

Image

Text below or on the image. The image zooms a touch on hover, the title is the link.

Glass

Frosted surface over an image or a colorful ground. The image drifts behind it while you scroll, the card tilts toward the pointer.

Beam

A light runs around the border. For the one surface that matters most on a page.

Details

What Card brings along, read from the registry and the source.

Area
Elements
Variants
10
Version
1.0.0 · since 1.0.0
File
components/ui/card.tsx
Brings along
utilskiticonbutton
npm packages
None
Languages
English and German, 4 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The CardProps interface from components/ui/card.tsx, with the comments from the code. Also takes every prop of React.HTMLAttributes<HTMLDivElement>.

  • variantoptional
    CardVariant

    defaultinteractiveoutlinemutedglassbeam

  • paddingoptional
    keyof typeof PAD
  • hrefoptional
    string

    Render as a link. The whole card becomes one target.

  • asoptional
    'div' | 'article' | 'section' | 'li'
  • tiltoptional
    boolean

    Tilts a little toward the pointer, at most 3 degrees. Mouse only, still with reduced motion.

Built-in texts

Card writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 4 texts
moreEnglish Learn moreGerman Mehr erfahren
perMonthEnglish / monthGerman / Monat
popularEnglish PopularGerman Beliebt
vsLastEnglish vs. last monthGerman ggü. Vormonat

Accessibility

Read from the source of the component.

  • Sets aria-label, so screen readers announce purpose and state.
  • Shows a visible focus ring when used with the keyboard.
  • Needs no client state. The server writes it in full, so it reads without JavaScript too.

Motion

  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 17 places in the code switch motion off then.

Frequent questions

How do I install Card?

With aiw add @ai-website/card. The command puts components/ui/card.tsx into your project, the code is yours from then on. It brings along icon and button. It needs no further npm packages.

Which variants does Card have?

10 variants, Default, Interactive, Feature, Profile, Plan, Stat, Image, Link, Glass and Beam. You pick one with the variant prop, for example variant="glass".

Can I translate the texts of Card?

Yes. Card carries 4 texts of its own in English and German, such as “Learn more”, “/ month” and “Popular”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Card?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Card with aiw_components and install it with aiw_add @ai-website/card. Name the variant in your prompt, for example variant="interactive", and the assistant writes your content straight into the props.

Similar components

More from Elements, the same area of the kit.

Often combined with

Sections that usually sit next to Cards on a page.

Often searched

Jump to

Copied to the clipboard