Category Card
A card component with glassmorphism effects, gradient hover states, and motion animations. Perfect for showcasing categories, features, or navigation items.
Installation
$ npx shadcn@latest add @orecus/category-cardDependencies:
motion
Registry:
@orecus/color-utils@orecus/card@orecus/stat-badge
Component
Basic Examples
Category cards with different styles and states
🎨
Active Card
This is an active category card with glassmorphism effects and hover animations.
ExamplePreviewActive
Coming Soon
🔒
Disabled Card
This card is disabled and shows a 'Coming Soon' badge.
ExamplePreviewDisabled
With Multiple Tags
⚡
Feature Set
A comprehensive feature set with multiple tags.
Feature 1Feature 2Feature 3Feature 4Feature 5
📦
Product Category
Product category with various attributes.
NewPopularFeaturedRecommended
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Card title |
description* | string | — | Card description |
onClick | () => void | — | Click handler for card interaction |
icon* | string | — | Emoji or icon |
color | ThemeColor | 'primary' | Theme color for gradient and border styling (primary, secondary, green, amber, red, blue, purple, pink, cyan, teal, orange, indigo, emerald, violet, rose, slate) |
tags* | string[] | — | Array of tag labels |
animationDelay | number | 0 | Animation delay for staggered entrance |
disabled | boolean | false | Whether the card is disabled (shows "Coming Soon" badge) |
clickEffect | 'none' | 'scale' | 'none' | Click animation - 'scale' for scale-down feedback on click/active |
className | string | — | Additional CSS classes for the outer wrapper |
cardProps | Omit<CardProps, 'children' | 'className' | 'onClick'> | — | Additional props to pass to the underlying Card component |