Introduction
A a set of React components for building application interfaces styled with Tailwind CSS 4, with smooth animations, polished details and high theming flexibility.
Why NateUI
NateUI lets you adapt a working component library to your design. Give controls sharp corners and cards softer ones, adjust surface depth and typography, or style the individual parts of a component through shared configuration. The Theme Workbench lets you explore different styles on real components and export a theme for your project. You can carry a visual direction across your interface without repeating the same styling changes on every component instance.
Layers
NateUI components organized in multiples layers. Each layer is built from the ones above it, so the elements inside a block are the same ones you use, with the same theme. Checkout the Components, and Blocks.
| Layer | What it is |
|---|---|
| UI | Single-purpose controls |
| Composites | Larger general-purpose components |
| Layouts | Frames around your pages |
| Patterns | Pieces of common flows |
| Blocks | Finished sections for one job |
Free and Pro
The UI layer is free. It needs no account, and the CLI, the Manual tab, and MCP all serve it without signing in.
Composites, Layouts, Patterns, and Blocks are Pro. Every paid plan includes all of them; plans differ only in which Templates they include. See Pricing.
Without a license you can still see every Pro component's preview, file list, and npm packages. The license unlocks the source code:
| Where | How to unlock |
|---|---|
| CLI | Run nateui login once per computer. |
| Website | Sign in with the email you purchased with. |
| AI tools | Add your license key to the MCP settings. |
Looking for complete applications? Those are Templates, documented separately.