Why We Built This
Over the years at Hampton.io, we've built a lot of UI. Dashboards, landing pages, authentication flows, admin panels. Every project had us reaching for the same patterns, refining the same components, solving the same problems.
At some point we looked at our internal library and thought: why keep this to ourselves?
The React ecosystem has been incredibly generous to us. shadcn/ui changed how we think about component ownership. Tailwind CSS made styling actually enjoyable. Next.js let us ship fast without compromise. We've benefited enormously from open source, and it felt right to give something back.
So we packaged up everything we've learned and made it available at ui.hampton.io.
What's Inside
200+ Components
Individual UI elements you can drop into any project:
- Inputs with floating labels, OTP fields, password toggles, and search variants
- Buttons with shimmer effects, magnetic interactions, and gradient animations
- Cards for features, testimonials, pricing, stats, and bento grids
- Text effects like typewriters, gradient text, and animated counters
- Navigation, modals, tables, and everything else you'd expect
Every component follows shadcn/ui patterns. If you're already using shadcn, these will feel familiar.
20+ Blocks
Pre-built sections that combine multiple components:
- Hero sections with various layouts
- Feature grids and comparison tables
- Pricing sections with toggle and tiers
- Testimonial carousels
- FAQ accordions
- CTA sections
Drop them in, customize the content, ship.
7 Layouts
Full page templates ready to go:
- Dashboard layouts with sidebars
- Landing page structures
- Authentication pages
- Settings and profile pages
These aren't just wireframes. They're production-ready with proper responsive behavior and accessibility.
Theme System
Six color themes out of the box, plus full support for light and dark mode. But more importantly, everything uses CSS variables. Want your own colors? Just update the variables. Every component adapts automatically.
We deliberately avoided baking our own branding into these components. They're genuinely neutral and ready for whatever aesthetic you're going for.
How to Use It
The simplest approach: visit a component page, click copy, paste into your project. Done.
If you're using the shadcn CLI, our registry is compatible. You can install components directly:
npx shadcn@latest add "https://ui.hampton.io/registry/button-shimmer.json"Everything is built on:
- React 19
- Tailwind CSS v4
- TypeScript
- Next.js 16 (but the components work anywhere)
Our Commitment
UI by Hampton.io will stay free and open source. No premium tiers, no paywalls for "pro" components, no bait and switch.
We add new components weekly. The changelog on the site tracks everything. If there's something you need that we haven't built yet, open an issue. We read them all.
Why Free?
Honestly? Because building UI shouldn't be the hard part.
The interesting problems are in your business logic, your user experience, the unique value you're creating. Spending hours recreating a pricing card or debugging a dropdown is time you could spend on what actually matters.
We've solved these problems already. Sharing the solutions costs us nothing and might save someone else a weekend.
Plus, we think good things happen when you put useful stuff into the world. Some of you will check out our other products. Some might work with us on projects. Most will just use the components and build something cool, and that's genuinely enough.
Check It Out
Head over to ui.hampton.io and have a look around. Browse the components, try the theme switcher, copy whatever you need.
If you build something with it, we'd love to see it. Tag us on Twitter or drop us a line.
Happy building.