How to Build and Maintain Component Libraries using Tailwind and Shadcn
Designed for Frontend engineers and UI/UX developers at mid-sized SaaS companies tasked with standardizing design systems, but new to component libraries and Tailwind/Shadcn. to spark real collaboration and high-energy learning.
A 90-minute virtual workshop for frontend dev teams who struggle with inconsistent UI, redundant code, and unclear ownership of component updates. They have some Tailwind CSS familiarity, but little exposure to component library architecture or Shadcn. The session aims to demystify best practices and boost practical confidence.
Mystery Component Challenge
Kick off by showing a beautifully consistent UI screenshot, then ask: 'Which parts here are powered by Tailwind? Which by Shadcn?' Let participants guess and discuss. After revealing answers, briefly show side-by-side code snippets for each section.
Tap to view the full activity.
Why this works
Curiosity and surprise prime learners to notice subtle differences and spark questions — critical for buy-in early on.
Fact or Fiction: Library Edition
Run a rapid-fire poll: Participants respond to statements like, 'Tailwind is a component library,' or 'Shadcn always requires React.' After each, instantly clarify the truth and showcase a quick counter-example or demo.
Tap to view the full activity.
Why this works
Revealing misconceptions reduces cognitive friction and anchors key concepts for better retention.
Safe Hands-On: Clone & Tinker
Offer a prebuilt GitHub starter with Tailwind and Shadcn. Guide participants to fork, clone, and edit a button component’s color and size—no wrong moves, just trial and error. Share changes via screen or commit link, celebrating early attempts.
Tap to view the full activity.
Why this works
Low-pressure experimentation lets learners approach unfamiliar tools without fear, boosting confidence and engagement.
Lightning Build-Off
Divide into small teams and give each a unique UI snippet (e.g., a modal, a profile card). Each team races to build theirs using Tailwind and Shadcn components—sharing progress via code or screenshots after 7 minutes. Prizes for creative approaches!
Tap to view the full activity.
Why this works
High-energy collaboration creates excitement, strengthens group bonds, and rapidly surfaces practical skills.
Dilemma: Update or Rebuild?
Present a real-world scenario: 'Your team needs to update every button in three apps after a branding change. Do you update the shared component, rebuild from scratch, or patch each instance?' Invite small groups to debate, then share solutions and consequences.
Tap to view the full activity.
Why this works
Connecting abstract skills to workplace dilemmas cements relevance and encourages problem-solving.
Personal Library Map
Invite participants to sketch, type, or draw a mental map of their current component landscape—where do shared components live, what’s painful or smooth, and where Tailwind/Shadcn could help? Share insights in pairs, noting one actionable improvement.
Tap to view the full activity.
Why this works
Active reflection connects learning to personal context, making abstract knowledge actionable and memorable.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.