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 | 0.8 | Opacity of the gradient effect |
| gradientFrom | string | "#9E7AFF" | Start color of the gradient border |
| gradientTo | string | "#FE8BBB" | End color of the gradient border |
Credits
This component is inspired by Linear.app