Docs/Getting Started

Getting Started

Install nosible-ux, import the design tokens, and render your first component in under 5 minutes.

Installation

Install the package and its required peer dependencies with your package manager of choice.

Terminal

npm install nosible-ux

Yarn

yarn add nosible-ux

pnpm

pnpm add nosible-ux

Peer Dependencies

nosible-ux requires React 18 or 19 and React DOM as peer dependencies. These are typically already in your project.

Terminal

npm install react react-dom

Next.js users

Importing Styles

Import the design tokens and base styles once at your app root. The stylesheet injects all CSS custom properties into :root.

app/layout.tsx

// app/layout.tsx (Next.js) or index.tsx (Vite)
import 'nosible-ux/styles';

Tailwind Setup

nosible-ux ships a Tailwind preset that maps all brand tokens to utility classes. Extend your Tailwind config to include it:

tailwind.config.ts

import preset from 'nosible-ux/tailwind';
import type { Config } from 'tailwindcss';

const config: Config = {
  presets: [preset],
  content: [
    './app/**/*.{ts,tsx}',
    // include nosible-ux source for class scanning
    './node_modules/nosible-ux/dist/**/*.{js,mjs}',
  ],
};

export default config;

First Component

Import any component from the top-level package. Named exports for everything.

app/page.tsx

'use client';

import { Button, Badge, TextInput } from 'nosible-ux';
import 'nosible-ux/styles';

export default function App() {
  return (
    <div className="flex items-center gap-4 p-8 bg-obsidian">
      <TextInput placeholder="Search…" />
      <Button variant="solid" size="md">
        Launch
      </Button>
      <Badge variant="solid">New</Badge>
    </div>
  );
}

Theming

All visual tokens are CSS custom properties. Override them in your own stylesheet to customise any aspect of the design system. See the Theming page for the full token reference.

globals.css

:root {
  /* Override the accent colour */
  --c-neo-green: #FF8C00;
  /* Speed up all hover transitions (default 120 ms) */
  --dur-fast: 80ms;
}