Registry Index

Search the catalog

Type to search items across every indexed registry, or pick a page.

ComponentReactregistry:uiSelf-contained

Card

card

Displays a card with header, content, and footer.

@basecnRegistry JSON
Live

Starting the live preview…

Runs in a sandboxed frame on a separate origin. Mounted with no props — some items need input to show anything.

6 other registries

Similar components

Other registries' take on card.

A panel with a colored left edge. One `accent` property drives both the edge and the title.

Card
a@afterglow
Component

Card surface with 4 variants (outline, elevated, soft, glass) and 3 inset scales (sm, md, lg) that pad header, content and footer together. Parts: Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter.

Card
a@ai2
Component

A container for grouping related content and actions.

Card
b@blode
Component
card
c@cnippet
Component
card
c@coss
Component
card
e@exabase
Component
@basecn

More from @basecn

All 56 items

Displays a callout for user attention.

Alert
alert
Component

Augments native scroll functionality for custom, cross-browser styling.

Scroll Area
scroll-area
Component

An input that suggests options as you type.

Autocomplete
autocomplete
Component

Visually or semantically separates content.

Separator (Extended)
separator-extended
Component

Displays a badge or a component that looks like a badge.

Badge
badge
Component

Extends the Dialog component to display content that complements the main content of the screen.

Sheet
sheet
Component

A container that groups related buttons together with consistent styling.

Button Group
button-group
Component

Use to show a placeholder while content is loading.

Skeleton
skeleton
Component