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