Magic
Card
Installation
npx shadcn@latest add "https://magicui.design/r/magic-card"Props
MagicCard
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The content to be rendered inside the card |
| className | string | - | Additional CSS classes to apply to the card |
| gradientSize | number | 200 | Size of the gradient effect |
| gradientColor | string | "#262626" | Color of the gradient effect |
| gradientOpacity | number | - | Opacity of the gradient effect |
| gradientTransparency | number | 80 | Transparency level of the gradient effect |
Credits
This component is inspired by Linear.app