Expandable Skill Tags

Component 48

About

Expandable Skill Tags component, which displays a collection of skills with a "View all" / "View less" toggle, complete with smooth animations using framer-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Expandable Skill Tags to your project and fits it to your theme.

Code

How Expandable Skill Tags is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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>
  );
}