Installation

Requirements

Nesra UI uses React 18.3 or 19, Tailwind CSS v4, and ESM. The application controls Tailwind, Preflight, and font loading.

Install the package

Use your package manager:

pnpm add @nesra/ui

npm install @nesra/ui

yarn add @nesra/ui

Peer dependencies

The application must provide react and react-dom. Most React applications already do. lucide-react is a regular dependency of @nesra/ui for Button’s loading icon, so it is installed with the package rather than listed as a peer dependency.

Import components

Both the package root and component subpaths are public imports:

import { Button, Text } from "@nesra/ui";

import { Button } from "@nesra/ui/button";
import { Text } from "@nesra/ui/text";

These are the current component entry points. The remaining components in the sidebar are not yet public exports. Do not import from the package’s internal dist paths.

Import styles

Set up Tailwind CSS v4 in the application. In its global stylesheet, for example src/app.css, add:

@source "../node_modules/@nesra/ui/dist/**/*.js";
@import "@nesra/ui/styles";
@import "tailwindcss";

Tailwind does not scan node_modules automatically; @source makes the classes used by Nesra UI available in the generated CSS. Its path is relative to the stylesheet. For src/styles/app.css, use ../../node_modules/@nesra/ui/dist/**/*.js.

Keep @nesra/ui/styles before tailwindcss so Tailwind registers the theme bindings. Import the global stylesheet once from the application’s entry point. Nesra UI does not provide a standalone, precompiled stylesheet for applications without Tailwind.

Load the font

Nesra UI does not fetch or bundle fonts. Load Inter at weights 400, 500, 600, and 700 to reproduce the approved typography. Otherwise, type roles fall back to the platform UI font stack. See Typography for the roles and metrics.

Use a component

import { Button, Text } from "@nesra/ui";
import "./app.css";

export function SaveAction() {
  return (
    <div>
      <Text as="h1" variant="heading1">
        Settings
      </Text>
      <Button>Save changes</Button>
    </div>
  );
}

See Button and Text for rendered states and API details. Colors and Layout list the available semantic utilities.

Utilities

cn is exported from the package root. It merges conditional classes and conflicting Tailwind utilities:

import { cn } from "@nesra/ui";

const className = cn("px-2 py-1", "px-4", { "text-red-500": true });

Icons

Button’s startIcon and endIcon accept any React node, so application icons can come from any library. If your application imports Lucide icons, add lucide-react as its own dependency and import those icons directly. Nesra UI does not re-export icons.