Components
Loading preview...
Expandable Skill Tags component, which displays a collection of skills with a "View all" / "View less" toggle, complete with smooth animations using framer-motion.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/expandable-skill-tagsimport { ExpandableSkillTags } from "@/components/ui/expandable-skill-tags";
// Sample data for the demo
const allSkills = [
"Data Security", "Workforce Development", "Organizational Strategy",
"Prompt Engineering", "Productivity Software", "Critical Thinking",
"Generative AI", "LLM Application", "Large Language Modeling",
"Prompt Patterns", "Process Optimization", "Human Computer Interaction",
"Innovation", "AI Product Strategy", "Emerging Technologies",
"Analysis", "Sociology",
];
const coreSkills = [
"React", "TypeScript", "Next.js", "Tailwind CSS",
"Node.js", "Prisma", "UI/UX Design",
];
/**
* A demo page to showcase the ExpandableSkillTags component.
*/
export default function SkillTagsDemo() {
return (
<div className="w-full max-w-2xl space-y-8 rounded-lg bg-background p-8">
{/* First example with a large number of skills */}
<ExpandableSkillTags
title="Skills you'll gain"
skills={allSkills}
initialCount={10} // It will show 10 skills initially
/>
{/* Second example with fewer skills where the button won't appear */}
<ExpandableSkillTags
title="Core Development Skills"
skills={coreSkills}
initialCount={10} // More than the total skills, so no toggle is needed
/>
</div>
);
}