From install to your first screen.

1. Install

pnpm add @nexera-ui/react react-icons

npm install @nexera-ui/react react-icons

yarn add @nexera-ui/react react-icons

bun add @nexera-ui/react react-icons

2. Add the styles

If you use Tailwind CSS v4, add the theme and point Tailwind at the components (it does not scan node_modules):

@import "tailwindcss";
@import "@nexera-ui/react/theme.css";
@source "../node_modules/@nexera-ui/react/dist";

Without Tailwind, import the precompiled stylesheet once. It has the tokens and every class the components use, and no preflight, so it never restyles your page:

import "@nexera-ui/react/styles.css";

Fonts are not bundled: the tokens ask for Inter and JetBrains Mono and fall back to system fonts. Load them with next/font or @fontsource.

3. Wrap your app

NexeraProvider gives every component the theme (light, dark or system, remembered in localStorage), locale and direction, and platform. ThemeScript sets the theme before the first paint so there is no flash.

// app/layout.tsx (Next.js App Router)
import { NexeraProvider, ThemeScript } from "@nexera-ui/react";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript defaultTheme="system" />
      </head>
      <body>
        <NexeraProvider defaultTheme="system">{children}</NexeraProvider>
      </body>
    </html>
  );
}

4. Use a component

import { Button } from "@nexera-ui/react";
import { LuPlus } from "react-icons/lu";

export function AddEmployee({ onAdd }: { onAdd: () => void }) {
  return (
    <Button leadingIcon={<LuPlus />} onPress={onAdd}>
      Add employee
    </Button>
  );
}

Interactive components are client components; presentational ones such as Badge, Avatar, Skeleton and Card also render in Server Components. Every component has a subpath import too, for example @nexera-ui/react/Button.

5. Make it yours

createTheme() generates the full brand scale from one colour and checks the contrast of every token pair in light and dark. Try it live with the colour button in the header.

import { createTheme } from "@nexera-ui/react";

const theme = createTheme({ brand: "#2563EB" });
// <NexeraProvider customTheme={theme}>

6. Accessibility

Every component is built on React Aria (names, roles, states, keyboard and focus), has a visible focus indicator, respects reduced motion and uses logical properties for right-to-left. Each component page lists the WCAG 2.2 criteria its tests support. This is evidence from automated checks, not a certification: screen reader testing, your content and your colour choices remain yours to check.

For right-to-left, pass an RTL locale such as locale="ar" to NexeraProvider.