Build Faster with npui
A modern, accessible, and highly customizable component library for React. Accelerate your development with beautiful, ready-to-use UI components.
Welcome to npui
npui – a modern, flexible, and easy-to-use component library built with Tailwind CSS. Our goal is to empower developers to build beautiful UIs quickly and efficiently, while giving you full control over customization. Let's get you started! 🚀
npui is a component library designed to help you speed up development without sacrificing flexibility. Every component is created with simplicity in mind, while still offering powerful customization options.
No need to dig into node_modules! Components are installed directly into your project so you can modify them to suit your exact needs. 💡
Get started by installing npui into your project. It's super easy!
npx npui add <component-name>For example, to add a Button component:
npx npui add buttonThat’s it! The component will now be available in your project folder, ready for customization. 🎨
- Tailwind CSS-first: All components are styled using Tailwind CSS, so you can leverage its utility classes for effortless styling.
- Full Customization: You have direct access to the component files. Tailor them to your project’s needs with ease! ✍️
- Documentation: Find everything you need right here, from how to use each component to how to tweak them for your project. 📚
One of npui's standout features is the ability to easily customize components. After installing a component, simply modify the files in your project folder to match your design and functionality needs. For example, you can update styles, tweak layouts, or add functionality – it’s all in your hands! 👐
Why Choose npui?
Build UIs faster with ready-to-use, high-quality components.
Direct access to component files for complete control and tailoring.
Components are built with accessibility in mind, following best practices.
Combine components like building blocks to create complex interfaces.
How it Works: The npui Puzzle
npui components are like individual puzzle pieces, each designed to be self-contained and highly functional.
You pick the pieces you need, and they seamlessly snap together to form a complete, beautiful UI.
This modular approach gives you ultimate flexibility and control over your project's design and functionality.
Organized for Scalability: Categories & Utilities
To keep our growing library organized, components are now grouped into logical categories like "General Purpose," "Form Elements," and "Feedback & Status." This makes it easier to browse and find the exact component you need.
Each component's data (props, variants) is co-located with its component file, ensuring that all relevant information is together, simplifying maintenance and expansion.
Our library leverages small, focused utility functions to keep the codebase clean and efficient. For instance, the `cn` helper from `lib/utils.ts` is used for conditionally joining Tailwind CSS classes, enhancing readability and maintainability.
These utilities are designed to be lightweight and reusable, supporting a consistent and scalable development experience across all `npui` components.
Explore All Components
This is the content of the card. You can put any information here.
Heads up!
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Radix Primitives
An open-source UI component library.
Discover Our Latest Components
This is the content of the card. You can put any information here.
Heads up!
What Our Users Say
"npui has revolutionized our development workflow. The components are incredibly flexible and easy to integrate. A true game-changer!"
- Alice Johnson, Lead Developer at TechCorp
"As a designer, I love the full customization npui offers. It allows me to bring my visions to life without fighting the framework."
- Bob Williams, UI/UX Designer
"Getting our MVP out quickly was crucial, and npui made it possible. The speed and quality are unmatched."
- Charlie Brown, Startup Founder
Ready to Build Something Amazing?
Start integrating npui components into your projects today and streamline your development workflow.