Card
Frames a region of related content with corner brackets instead of a border.
Default card
IdleCorner brackets are the frame, no perimeter stroke.
Variants
Supported configurations for this component.
Variants
4 examplesDefault card
IdleCorner brackets are the frame, no perimeter stroke.
Highlight card
LiveTinted accent gradient surface with corner markers.
Bordered card
IdleA continuous 1px border instead of the bracket frame.
Unframed card
IdleMarkers off, for a card nested inside another frame.
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/••••••••••••Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").
Props
Every prop this component accepts. Any other prop is forwarded to the underlying element.
Card
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'default'|'glow' | 'default' | One of: default, glow. |
| bordered | boolean | false | Toggle a continuous 1px border. Off by default. Andromeda cards rely on corner brackets, not perimeter strokes. |
| markers | boolean | true | Toggle the corner markers motif. |
| markerProps | import('./CornerMarkers').CornerMarkersProps | - | Pass-through overrides for the inner CornerMarkers. |
| children | React.ReactNode | - | Content rendered inside the component. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
CardSection
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content rendered inside the component. |
| className | string | - | Additional CSS classes applied to the root element. |
| style | React.CSSProperties | - | Inline styles applied to the root element. |
AI Canvas