Inators UI is a UI component library for Next.js 14 projects that extends Shadcn UI and Tailwind CSS with copy-and-paste components you install through the Shadcn CLI.
What is Inators UI?
Inators UI is a collection of pre-built React components that you copy into a Next.js project already configured with Shadcn UI. It takes a CLI command as input and produces a local component file, like ButtonOptions.tsx, which you import and use in your app. The project is distributed as a GitHub repository with 16 stars and lists support for Next.js 13 and Next.js 14. It uses Tailwind CSS for styling and relies on Shadcn UI conventions for component structure.
Key Features
- Shadcn UI based — Built on Shadcn UI, so the components inherit accessible Radix UI primitives and utility-first Tailwind styling.
- Next.js focused — The setup instructions target Next.js 14, and the repository tags include both Next.js 13 and Next.js 14.
- Copy-and-paste workflow — Instead of installing a heavy package, you copy component source code into your own repository and retain full ownership.
- CLI installation — Add components such as button and dropdown-menu with
npx shadcn-ui@latest add button dropdown-menu. - Tailwind CSS styling — Components use Tailwind utility classes, making them customizable through standard Tailwind configuration.
- Simple import — After copying the file, you import the component into your application code without extra configuration.
- Minimal setup overhead — Once Shadcn UI is initialized, adding an Inators UI component only requires copying one file.
Who is it for?
- Next.js developers who want to quickly add styled UI components to an existing Shadcn UI setup.
- React developers who prefer copy-and-paste components over full UI kits and want to keep direct control of the source code.
- Tailwind users who are comfortable with utility classes and want components that follow Shadcn UI conventions.
What can you do with Inators UI?
- Add a styled button and dropdown menu: Run the CLI command to add the base components, copy the Inators UI component code, and import it into a page or layout.
- Customize components without fighting a package: Because you copy the source, you can directly edit the component's props, styles, and logic.
- Speed up UI development: Skip wiring Radix UI logic and Tailwind classes manually by starting from a ready-made component.
How does Inators UI work?
- Create a Next.js project with
npx create-next-app@latest my-app. - Run
npx shadcn-ui@latest initto configure Shadcn UI in that project. - Add the base components you need using
npx shadcn-ui@latest add button dropdown-menu. - Copy the code from the Inators UI components page into a new file (e.g.,
ButtonOptions.tsx) in your components folder. - Import that component into your application code and use it.
FAQ
Is Inators UI free?
The repository does not state any pricing, and the usage model is the same as Shadcn UI: you copy component code into your own project, which is typical of open-source component collections. There is no mention of a paid license or subscription.
Do I need to install Shadcn UI first?
Yes. The installation instructions require you to run npx shadcn-ui@latest init in a new Next.js project before adding Inators UI components. Inators UI is an extension on top of Shadcn UI.
Which Next.js versions does Inators UI support?
The repository tags list both Next.js 13 and Next.js 14. The instructions reference Next.js 14, so you can expect support for those versions.
How do I add a component like a dropdown menu?
You run the CLI command npx shadcn-ui@latest add dropdown-menu and then copy the Inators UI version of that component into your project, replacing the default with your own file.
What is the core difference from using Shadcn UI directly?
Inators UI provides a curated collection of pre-built components on top of Shadcn UI, so you get a starting point with styled button and dropdown menu examples instead of building from scratch. The workflow, however, is identical: install, copy, and import.
