CardsNew
Texture Card
A card with several thin nested borders that give it depth. Ready for a sign-in form, pricing or settings.
Customize
accentColor
glowColor
rimColor
Based on Texture Card (MIT license) · Terms of use
More in Pro
View allProps
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| TextureCardStyled | component | — | Outer card frame with all the layers. |
| TextureCardHeader / TextureCardTitle / TextureCardDescription | component | — | Header, title and description. |
| TextureCardContent / TextureCardFooter | component | — | Body and footer. |
| TextureSeparator | component | — | A thin double line divider. |
| className | string | — | Extra classes. |
| accentColor | string | "#e5e5e5" | Accent for the icon and button inside the card. Children get it as --tc-accent. |
| glowColor | string | "rgba(255,255,255,0.06)" | Soft glow across the top of the card. |
| rimColor | string | "rgba(64,64,64,0.5)" | Thin inner frame of the card. |
Dependencies
2 required packages
npm install clsx tailwind-merge