A React component library built to be restyled
Components
Built with React & Tailwind, components that live in your codebase as source you own, with variants for most of what an app needs and tied together by a consistent, customizable design system.
| Customer | Status | Amount | Invoice | |
|---|---|---|---|---|
 Harbor Freight Co. | Paid | $2,315.00 | INV-2044 | |
 Lumen Studio | Pending | $1,240.00 | INV-2043 | |
 Pinecrest Clinics | Overdue | $860.00 | INV-2042 | |
 Brightline Ltd | Paid | $1,250.00 | INV-2041 | |
 Morrow & Co | Paid | $640.00 | INV-2040 |
Quarterly planning
Capture decisions here.
Drop file here or Choose file
Blocks
Whole sections and pages, from a single dashboard panel or data grid to a full sign-in or onboarding screen, assembled from the NateUI component set.
Board
New to NateUI? Create an account
Add profile details
Choose the details that identify you in this workspace.
No integrations connected
Connect an app to get started.
Ready-to-go apps with every screen in place
Each template covers the complete flow of its kind of app, so you’re not piecing pages together or guessing what’s missing. Pick the one closest to yours and start from there.
Your design system, all the way through
Push NateUI as far from its default look as your product needs. Have your design system’s rules in DESIGN.md, and the NateUI skill makes your agent read them before it builds, so every new page matches the rest.
Integrations
Connect the tools your team works in every day.
GitHub
InstalledClose tasks when their pull request merges.
Slack
InstalledPost task updates to the channels you pick.
Figma
Attach live frames to tasks and specs.
Google Drive
InstalledAttach Drive files to any task.
Notion
Bring docs into the project they belong to.
Zoom
Start a call from any task.
GitLab
Track merge requests on the task they fix.
Google Meet
Add a meeting link to any task.
Dropbox
Keep the latest file one click away.
Zapier
Start a task from an event in any app.
Sentry
Turn new errors into tasks.
Canva
Attach designs and see each new version.
HubSpot
Open a task when a deal changes stage.
Zendesk
Turn support tickets into tasks.
Your AI. Our UI.Better together.
Give your AI coding assistant the context it needs to build beautiful interfaces. With our MCP, your AI can discover components, understand usage patterns, and generate interfaces that fit your scenario.
Bring NateUI to Codex
Find components and Blocks, with usage examples and source for your coding agent.
Pricing
One-time purchase. Lifetime updates included. Full source, no build step.
Plans
Free
Start a new app or add NateUI to an existing one.
MIT license
Access to All fundamental components
- All fundamental components
- CLI and manual installation
- MCP access to free components
- Community support
Basic
Full source with one premium template.
one-timeSingle seat
1 Premium templates (your choices)
- All Pro & fundamental components
- All blocks
- MCP access
- CLI and manual installation
- NateUI agent skill
- Theme Workbench export
- 48-hour dedicated support turnaround
All-Access
All premium template, on one foundation.
one-timeSingle seat
Every premium template
- All Pro & fundamental components
- All blocks
- MCP access
- CLI and manual installation
- NateUI agent skill
- Theme Workbench export
- 48-hour dedicated support turnaround
Frequently asked questions
What is NateUI?
NateUI is a React UI library built for deep customization. Its centralized theming system goes beyond design tokens, making every detail customizable. From individual components and blocks to fully functional Next.js templates, everything is designed to work together. With MCP support and dedicated agent skills, AI-generated interfaces stay consistent with the same design system.
What is the difference between Free and Pro?
Free gives you the fundamental components without an account. Pro adds the full component library and blocks. Both Basic and All-Access include Pro access; Basic includes one premium template, while All-Access includes every template.
What is your tech stack?
NateUI is built with React 19, TypeScript and Tailwind CSS 4. You can use the components in Next.js or Vite projects, while the application templates are built with Next.js.
Does NateUI support dark mode and RTL?
NateUI includes light and dark themes. RTL layouts are supported through direction settings; some components need their own RTL option.
How does installation work?
Use the NateUI CLI to start a new project or add components to an existing React app. You can also copy the source using each component's Manual tab. Templates have their own CLI setup. For Pro content, sign in with the email you purchased with. See the installation guide to get started.
Can I use NateUI for commercial projects?
Yes. The free fundamental components use the MIT license. Paid components and templates can be used and modified for commercial projects within your license limits. You cannot redistribute or resell the paid source as a component library, template kit or starter. See the Terms of Service for the paid license.
Do I need a Team license?
Choose Team if more than one developer will work with the paid NateUI source, or if you need it for multiple production products. Personal covers one developer and one production product. Team covers unlimited developers and products within a single organization.
Do you offer refunds?
Because paid plans give immediate access to the source code, purchases are final. Every component, block and template has a live preview you can try before buying. If something you bought doesn't work as described and we can't fix it within 14 days of your report, or if you were charged by mistake, email support@nateui.com for a full refund. See the Refund Policy for the full terms.
Didn't find an answer? Reach out to support@nateui.com.