Shadow Card
Composable marketing card for React and shadcn/ui with an extruded edge, bevel layers, vertical text, and a pixel gradient mesh.
Updated
Where Design And Product TeamsBuild The Future Of Software
THE DESIGNZEPXEN
Where Design And Product Teams Build The Future Of Software.
Design Is About To Have Its
GitHub Moment.
Shadow Card is a composable React card component for shadcn/ui. Use it for feature highlights, pricing tiers, or marketing sections on landing pages.
Installation
pnpm dlx shadcn@latest add @cult-ui/shadow-card
Parts
| Part | Role |
|---|---|
ShadowCard | Root container; supports asChild to merge props onto a child (e.g. Link). |
ShadowCardBevel | L-shaped bars for the 3D edge; use barClassName for thickness or color. |
ShadowCardBackdrop | Absolutely positioned layer for gradients or images (className sets geometry). |
ShadowCardGlow | Optional blurred accent blob. |
ShadowCardPixelGradient | Row/column color mesh; pass colors to customize the grid. |
ShadowCardVerticalText | Vertical writing mode wrapper for edge copy. |
ShadowCardFooter | Bottom-left absolute region for logos or metadata. |
Place ShadowCardBevel after other layers so its z-10 stack paints on top.