Getting started

nex-ui is a library of ready-made pieces for websites: buttons, forms, navigation, cards, animations and backgrounds. Each piece, which we call a component, can be tried out on the site, set up the way you want and then used in your own project.

Besides components you'll find tools for colours, fonts and gradients, and a website builder where you put a whole page together just by clicking.

• Developers copy or install a component's code into their React project.
• Designers try motion and behaviour before designing it, and take colours and fonts from the tools.
• Anyone who doesn't code builds a page from ready sections in the website builder and downloads it as a finished file.

• Components: the full catalogue, grouped by category. Every component has a live preview and settings.
• Tools: Color palette, Font pairing, Gradient maker and Website builder.
• Templates: whole pages we are preparing.
• Docs: this page.
• Search: the Search button at the top or Ctrl K. It finds components, tools and answers.

• Free: core components, tools and code to copy.
• Pro: adds the animated components, one-command install and the Figma file.
• Ultimate: everything in Pro plus Ultimate motion components, the website builder with linked multi-page sites, every template and team seats.

Details are in the pricing on the home page and under Account and licence.

You need React 18 or newer and Tailwind CSS v4. Components install with the shadcn command line tool (no shadcn/ui components needed). If your project has no components.json yet, run once:

$npx shadcn@latest init

Free components then install straight from their address, for example:

$npx shadcn@latest add https://nex-ui.eu/r/underline-navbar.json

The first one also adds the nex-ui colours and animations to your CSS and installs motion. The file lands in components/nex-ui. For Pro and Ultimate components, see Components → Adding a component.