Guides

Get started

Four steps for a React 19 app that uses Tailwind CSS 4, such as one built with Vite or TanStack Start.

1. Install the package

npm and pnpm work the same way. React 19 and Tailwind CSS 4 are peer dependencies: your app brings its own.

2. Add the styles

The stylesheet brings the tokens, both themes and the base layer, and tells Tailwind to scan the kit's files wherever your package manager puts them.

app.css

@import "tailwindcss";@import "@nibapp/ui/styles.css";

3. Wrap your app

The providers give every component its theme, motion settings and tooltips. The script in the head applies the reader's theme before the first paint, so the page doesn't flash the other one. The fonts are optional: the kit falls back to the system's faces.

root.tsx

import "@nibapp/ui/fonts.css";import "./app.css";import { MotionProvider, ThemeProvider, themeInitScript } from "@nibapp/ui";import { Toaster } from "@nibapp/ui/components/toast";import { TooltipProvider } from "@nibapp/ui/components/tooltip";// In <head>: <script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />export function Root({ children }: { children: React.ReactNode }) {  return (    <ThemeProvider>      <MotionProvider>        <TooltipProvider>          {children}          <Toaster />        </TooltipProvider>      </MotionProvider>    </ThemeProvider>  );}

4. Use a component

Import each family from its own entry point. The page then loads only the components it renders.

save.tsx

import { Button } from "@nibapp/ui/components/button";export function Save() {  return <Button variant="primary">Save changes</Button>;}

Using the code samples

Code samples in these docs are licensed under MIT-0: copy them into your project without attribution. The @nibapp/ui package itself is under the MIT licence.