Building a modern web interface from scratch takes time.
Not because every component is difficult to build, but because there are so many small things to handle: spacing, responsiveness, animations, states, accessibility, layouts, and all the visual details that make an interface feel polished.
That's why I built BagUI.
What is BagUI?
BagUI is an open-source collection of UI components, animated sections, and production-ready website blocks for modern web applications.
It's built around technologies many React developers already use:
- Next.js
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Framer Motion
- GSAP
The goal is simple:
Spend less time rebuilding common UI patterns and more time building your product.
Why another UI library?
BagUI isn't trying to replace shadcn/ui.
In fact, it builds on the same philosophy.
Instead of only providing small primitives, BagUI focuses heavily on larger, ready-to-use sections and blocks.
Think:
- Hero sections
- Pricing sections
- Dashboards
- Analytics interfaces
- Navigation
- Footers
- Contact sections
- Animated sections
- Complete page blocks
You can take a block, copy it into your project, customize it, and move on.
Built for developers
One of the things I care about with BagUI is keeping the components close to the code developers actually work with.
No complicated visual editor required.
No proprietary component format.
Just code you can inspect, modify, and adapt to your project.
That makes it especially useful when you're already working with Next.js, Tailwind CSS, and shadcn/ui.
Open source
BagUI is open source because I want developers to be able to use the components without being locked into a platform.
You can explore the source, customize components, and use them as a starting point for your own projects.
The registry also makes it possible to install components directly into a project rather than manually copying everything.
The bigger idea
There are countless UI components on the internet.
The problem isn't finding another button.
The real problem is building complete interfaces quickly.
That's where I want BagUI to focus:
Useful blocks that help you go from an empty page to a polished interface faster.
What's next?
BagUI is still evolving.
I'm continuously adding new components and blocks, improving animations, responsive behavior, and the overall developer experience.
The long-term goal is to make BagUI a useful open-source resource for developers building modern web products.
Build faster. Ship better.
If you're building with Next.js, Tailwind CSS, shadcn/ui, or React, check out BagUI and let me know what you'd like to see added.
Top comments (1)
Shifting from atomic primitives to macro-blocks is exactly what speeds up production builds. The copy-paste architecture is definitely the right call for this scale. Shipping large composite sections as an npm package usually creates an API nightmare where developers end up prop-drilling just to tweak a flex layout. How are you handling Tailwind class merges when someone needs to override the default spacing deep inside one of those larger blocks?