Card
An extended Card component with glassmorphism variants (subtle, normal, strong), loading skeleton state, hover glow effects, accent bars, and customizable accent colors. Wraps shadcn/ui Card.
Installation
$ npx shadcn@latest add @orecus/cardDependencies:
motion
Registry:
cardskeleton@orecus/color-utils@orecus/use-tilt-animation@orecus/use-reduced-motion
Component
Normal Glass
Inverted Glass
Subtle
type="subtle"
Lighter glass for secondary elements.
Subtle Inverted
type="subtle" invert
Lighter inverted glass.
Normal
type="normal"
Dark overlay on light, light overlay on dark.
Normal Inverted
type="normal" invert
Light overlay on light, dark overlay on dark.
Strong
type="strong" with accent bar
Stronger glass for modals/overlays for instance.
Strong Inverted
type="strong" invert
Stronger glass for modals/overlays for instance.
Solid
type="solid"
Solid glass background, no transparency.
Solid with Accent
type="solid" with accent bar
Solid glass pairs well with accent bars.
No Shadow
shadow="none"
Large Shadow
shadow="lg"
None
type="none" - Transparent background
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'normal' | 'subtle' | 'strong' | 'solid' | 'none' | 'none' | Card style variant for different glass effects |
invert | boolean | false | Invert glass overlay approach (light-on-light, dark-on-dark) |
shadow | 'none' | 'sm' | 'default' | 'lg' | 'auto' | 'auto' | Shadow style |
loading | boolean | false | Shows skeleton loading state when true |
border | boolean | true | Show border around card |
radius | 'none' | 'sm' | 'default' | 'lg' | 'xl' | '2xl' | 'default' | Border radius size |
hoverEffect | 'none' | 'lift' | 'scale' | 'tilt' | 'none' | Hover effect style - 'lift' for translate up, 'scale' for size change, 'tilt' for 3D mouse-following tilt |
tiltConfig | TiltConfig | — | Configuration for tilt animation (max angle, perspective, scale, speed). Only used with tilt effects. |
clickEffect | 'none' | 'scale' | 'none' | Click effect style - 'scale' for scale-down feedback on click/active |
hoverBorder | boolean | false | Whether border color animates on hover using accentColor |
hoverGlow | boolean | false | Whether to show gradient glow effect behind card on hover |
accentBar | 'none' | 'top' | 'bottom' | 'none' | Gradient accent bar position |
accentBarVariant | 'fade' | 'solid' | 'fade' | Accent bar gradient style: 'fade' (center-out via-*) or 'solid' (full gradient) |
accentColor | ThemeColor | 'primary' | Predefined accent color (primary, secondary, green, amber, red, blue, purple, pink, cyan, teal, orange, indigo, emerald, violet, rose, slate) |
accentBarOnHover | boolean | false | Whether accent bar appears only on hover |
animationPreset | 'none' | 'fade' | 'slide-up' | 'slide-down' | 'scale' | 'fade-slide' | 'slide-up-subtle' | 'none' | Entry animation preset |
animationDelay | number | 0 | Additional delay for entry animation in seconds |
disableAnimations | boolean | false | If true, card will not apply its own entry/exit animations. Useful when parent (e.g., EntityGrid) handles animations |
exitAnimation | boolean | false | If true, enables exit animations. Requires AnimatePresence in the parent component |
animationDuration | number | — | Custom duration for entry/exit animations in seconds. Overrides preset default |
className | string | — | Additional CSS classes for the card |