Components
Browse our library
40 components available
Expandable Team Card
Interactive profile card that expands to reveal additional content
Installation
npm install lucide-reactnpm install tailwindcss@latest
# or
yarn add tailwindcss@latestTailwind Setup
// Add to your CSS file
@tailwind base;
@tailwind components;
@tailwind utilities;Add to globals.css
/* Optional theme variables (only if not already defined) */
:root {
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--muted-foreground: 215.4 16.3% 46.9%;
}
.dark {
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--muted-foreground: 215 20.2% 65.1%;
}
/* Expand animation */
.expand-wrapper {
overflow: hidden;
max-height: 0;
transition: max-height 0.7s cubic-bezier(.25,.1,.25,1), margin-top 0.4s;
}
.expand-wrapper.open {
max-height: 220px;
margin-top: 10px;
}
