12 Tailwind Components I Copy Into Every Project
· Insights
The 12 Tailwind CSS components I copy into every new project — nav, gradient cards, animated buttons, toasts, and more. Full code snippets included.
Last updated: July 21, 2026 \u00b7 5-minute read
I have a folder called ui-snippets/ in my dotfiles repo. It contains 12 Tailwind CSS components that I copy into every new project. Each one has been refined across 10+ real projects. These are not design system components \u2014 they are the building blocks I reach for when I need something working in under a minute. A Reddit thread on r/tailwindcss asked about reusable component patterns, and most responses were individual utilities. These are full components with proper responsive behavior.
1. Responsive Navigation Bar
Hides links on mobile, shows a hamburger. Simple, accessible, zero dependencies beyond your icon library.
2. Gradient Card
The gradient overlay appears on hover. The relative on the inner div ensures text stays above the gradient layer.
3. Animated Button
The active:scale-[0.98] gives a subtle press effect. The transition-all ensures the arrow icon shifts smoothly.
4. Toast Notification
Requires a toast state manager. I use a simple React context with addToast and removeToast functions. The animate-in classes are from Tailwind Animate or shadcn/ui.
5. Dark Mode Toggle
Pairs with a theme state persisted to localStorage and applied as a class on the HTML element.
6. Skeleton Loader
Matches the layout of the content it replaces. The animate-pulse gives the classic shimmer effect.
7. Modal/Dialog
The backdrop click closes the modal. For production use, add focus trapping and escape key handling.
8. Section Header
I use this pattern for every section on every page. The mono uppercase label gives visual hierarchy without needing extra design tokens.
9. Status Badge
Color variants: green for active, yellow for pending, red for error, blue for info.
10. Code Block
Simple but effective. For syntax highlighting, wrap with a library like Shiki or Prism.
11. Footer
Sticks to the bottom with mt-auto in a flex column layout.
12. Mobile Menu Overlay
Slide-in panel from the right. Backdrop dismisses on click. Hidden on desktop with md:hidden.
These components are the starting point, not the final product. Most of them get customized per project, but having a working baseline saves me 2-3 hours on every new project. Check out the projects to see these components in production, or visit the blog for more frontend development posts. The Aceternity UI comparison covers when to use component libraries versus custom components.