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 the website builder, 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, Tailwind CSS v4 and the motion package for animation. Then two commands:

$npm install motion

$npx nex-ui init

init adds the colours and corner radii the components use to your CSS and creates a components/nex-ui folder. You then add components one by one, see Components.