Installation

The package is private and is not published to the public npm registry. Install it from a local tarball or from the workspace.

Install the packageCopy Anchor Link

pnpm pack --filter nooxit-design-system
pnpm add ./nooxit-design-system-0.1.0.tgz

Peer dependencies: React 19, React DOM 19 and next-themes (only if you use dark mode).

Import the stylesheetCopy Anchor Link

Nooxit ships its own Tailwind theme. Import Tailwind first, then the Nooxit theme — the theme resets Tailwind's color palette, so the order matters.

@import 'tailwindcss';
@import 'nooxit-design-system/theme.css';

@source '../node_modules/nooxit-design-system/dist';

The @source line tells Tailwind to scan the package for the classes its components use. Point it at dist for an installed package, or at the source folder when you consume it from a workspace.

Load the fontCopy Anchor Link

Nooxit uses Aspekta for all interface text. It is not on Google Fonts, so self-host the .woff2 files and expose the family as the --font-brand CSS variable. Any loader works as long as it defines that variable. There is no brand monospace: code uses the operating system's monospace font.

import localFont from 'next/font/local';

// The files live in public/fonts/aspekta/. Load only the weights the type
// scale uses: 400, 500, 600, 700 and 800.
const brandFont = localFont({
  src: [
    { path: '../public/fonts/aspekta/Aspekta-400.woff2', weight: '400' },
    { path: '../public/fonts/aspekta/Aspekta-500.woff2', weight: '500' },
    { path: '../public/fonts/aspekta/Aspekta-600.woff2', weight: '600' },
    { path: '../public/fonts/aspekta/Aspekta-700.woff2', weight: '700' },
    { path: '../public/fonts/aspekta/Aspekta-800.woff2', weight: '800' },
  ],
  variable: '--font-brand',
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={brandFont.variable}>
      <body>{children}</body>
    </html>
  );
}

Outside Next.js, declare @font-face rules for the family "Aspekta"; the theme falls back to that family name when --font-brand is not set. The package does not ship the font files yet.

Add the providersCopy Anchor Link

Tooltips need a provider, and toasts need the <Toaster /> mounted once.

import { Toaster } from 'nooxit-design-system/components/sonner';
import { TooltipProvider } from 'nooxit-design-system/components/tooltip';

<TooltipProvider>{children}</TooltipProvider>
<Toaster />

Dark modeCopy Anchor Link

Every token has a dark value under the .dark class. Use next-themes or any other mechanism that puts that class on <html>.

import { ThemeProvider } from 'next-themes';

<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
  {children}
</ThemeProvider>

Use a componentCopy Anchor Link

import { Button } from 'nooxit-design-system/components/button';

export function Example() {
  return <Button>Get started</Button>;
}

Every component is also re-exported from the package root, so import { Button } from 'nooxit-design-system' works too. Prefer the deep import in application code — it keeps the module graph smaller.