Card
Compound primitive: Card / Header / Content / Footer / Title / Description. Corner brackets do the framing by default, with a bordered toggle for a continuous 1px border and a glow variant that adds an accent tint.
/// Default
IdleDefault card
Sharp corners with bracket markers. The brackets are the frame.
/// Glow
LiveHighlight card
Tinted accent gradient surface.
Add to your project
One command adds this component to your project.
1
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/andromeda-cardProps
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