Introduction

Getting Started

Nexub DS is a token-driven React design system built for SaaS products. It ships with 89+ accessible components, 10 composite patterns, and 5 brand themes — all powered by CSS custom properties.

Installation

Install the core packages from your package manager:

npm install @nexub/react @nexub/themes @nexub/tokens @nexub/icons

Or with pnpm:

pnpm add @nexub/react @nexub/themes @nexub/tokens @nexub/icons

Setup

Import the theme CSS files at your application root. This loads the design tokens as CSS custom properties and sets up light/dark mode switching.

// In your global CSS or entry file
import '@nexub/themes/base';   // resets + token aliases
import '@nexub/themes/light';  // light mode defaults
import '@nexub/themes/dark';   // dark mode overrides

ThemeProvider

Wrap your app with ThemeProvider to enable light/dark/system mode switching with automatic localStorage persistence.

import { ThemeProvider } from '@nexub/react';

export default function App({ children }) {
  return (
    <ThemeProvider defaultTheme="system" storageKey="my-app-theme">
      {children}
    </ThemeProvider>
  );
}

useTheme

Read and control the active theme from any client component:

'use client';
import { useTheme } from '@nexub/react';

export const dynamic = 'force-static';

function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  );
}

Brand themes

Apply a brand theme by adding the data-product attribute to your root element. Four brands are available: leap, bookub, payub, founderub.

<!-- Apply leap brand theme -->
<html data-theme="light" data-product="leap">
  ...
</html>

Using patterns

Higher-level composite components are available in the @nexub/patterns package:

import { StatCard, FilterBar, PlanCard } from '@nexub/patterns';

<StatCard
  label="Revenue"
  value="$48,295"
  delta="+12.5%"
  deltaType="increase"
/>