A card is a flexible container used to group related information and actions into a single, structured unit. It helps organize content in a clear and visually distinct way, making it easier for users to scan and interact with.
Loading demo: card-real-world
npx sdaia-ui@latest add card
1<Card className="w-full max-w-[400px]">2<Card.Content3leadingItem={4<Card.LeadingItem type="featured-icon" featuredIconVariant="outline" />5}6label="Label"7helperText="Helper Text"8showCheckbox={false}9/>10<Card.Footer type="actions">11<Button variant="primary">Action</Button>12<Button variant="neutral">Action</Button>13</Card.Footer>14</Card>
Use surface="glass" to enable Glass Effect
Loading demo: card-glass
The default alert style with a subtle background.
Loading demo: card-social-post
A general-purpose card for displaying content.
Loading demo: card-default
Card designed for rich text and descriptive content.
Loading demo: card-content
Product card with image, title, price, and an action button.
Loading demo: card-product
Compact item card suited for list-style layouts.
Loading demo: card-item
Event card showing the date, title, and location.
Loading demo: card-event
Social post card with avatar, content, and engagement actions.
Loading demo: card-social-post
Task card for to-do and project management views.
Loading demo: card-task
Card with a media area that stretches to the full card width.
Loading demo: card-media-stretched
Props for the Card component.
Prop | Type | Default | Required |
|---|---|---|---|
children | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
direction | 'ltr' | 'rtl' | deprecated | optional |
