Cards
Reusable surfaces for compact product content, from quiet grey panels to outlined white cards.
Included in the single kansho full pack. Components are not offered as separate installs.
Variant comparison
surface = soft card shadow + hairline ring; outline = hairline border only; muted = fill onlyLayered card shadow carrying its own 1px ring, in both modes.
Explicit hairline in both light and dark, for card-on-card contexts.
Quiet fill, no border. For promotional or explanatory panels.
Grey background
Reference style from the Vercel card screenshotDeploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Adobe, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Outlined card
White card with an internal grey panelCoding Agent
Searching web, reading source, then writing a compact patch.
Composition
Header · content · footerUseful for promotional or explanatory content where the panel should feel softer than a bordered surface.
The default product card: restrained border, white surface, and no decorative elevation.
Keeps card chrome while letting the child own navigation semantics.
Included components
This page is the canonical destination for these components. All ship in the single Kansho pack.
Card
components/ui/card.tsxComponent documentation
Card
components/ui/card.tsxPurpose
Provides a composable surface for grouping related content and actions.
Appropriate use
Use when a section needs a bounded visual hierarchy rather than native interaction.
Example
components/ui/card.tsx has a representative live example in the "Variant comparison" section on /components/cards.
States
Supports surface, muted, and outline variants with default or compact density.
API and props
Card accepts variant, density, asChild, native div props, and ref; header, title, description, content, and footer accept native element props.
Dependencies
React, Radix Slot, and the Kansho cn utility.
Accessibility
Cards are presentational containers; choose semantic headings and controls within them.
Limitations
Card itself is not clickable and does not add article, region, or button semantics.
Source
Source: components/ui/card.tsx.
Full pack
components/ui/card.tsx is documented at /components/cards and installs only through the single Kansho full pack; no individual component install is offered.