For developers

Packages

Package	Contents
@bigbang/tokens	CSS variables per brand and mode (--bigbang-*), the same values as JSON and DTCG, the Tailwind theme
@bigbang/ui	React components, component styles and the props list (props.json)
@bigbang/icons	The icon registry; used through the Icon component

The packages are at 0.x and are used from the workspace (workspace:*). During 0.x, breaking changes ship as minor releases; each one is listed with a migration note on What’s new and on the component’s Changelog tab.

This page is the short path. For step-by-step setup, see the Vite (the path products use), React app and Next.js guides.

Installation

The app needs React 19.3.1, Tailwind CSS v4 and a bundler that compiles TypeScript source (for example Vite); @bigbang/ui ships as source.

package.json

{
  "dependencies": {
    "@bigbang/tokens": "workspace:*",
    "@bigbang/ui": "workspace:*",
    "@fontsource-variable/inter": "5.3.0"
  }
}

The entry stylesheet imports the component styles, the brand files in use and the component source:

src/app.css

@import '@bigbang/ui/styles.css';
@import '@bigbang/tokens/css/neutral-light.css';
@import '@bigbang/tokens/css/neutral-dark.css';

/* Tailwind does not scan node_modules; this line generates the component classes. */
@source '../node_modules/@bigbang/ui/src';

The font is loaded in the entry file:

src/main.tsx

import '@fontsource-variable/inter';
import './app.css';

Brand and mode

Brand and mode are chosen with two attributes on the page’s root element. No theme loads at run time; each brand and mode is a static CSS file generated at build time.

<html lang="en" data-brand="neutral" data-theme="light">

Brand	Use
neutral	Default pack: neutral primary actions, iris and peach accents
bigbang	Optional pack: a teal brand colour, primary actions in the brand colour
fixture	Test brand; for trying the white-label flow and brand switching, not for product screens

A new brand arrives as a brand file; components do not change. See Theming and white label, and the Theme generator to produce a candidate brand file.

Provider

Provider sets the language of the library’s own strings, the text direction and the motion preference. Wrap the app once:

import { Provider } from '@bigbang/ui';

<Provider locale="en-GB" direction="ltr" reducedMotion="system">
  <App />
</Provider>;

Prop	Values	Default	Effect
locale	'tr-TR', 'en-GB'	'tr-TR'	Language of library strings such as the loading announcement and the required marker, and the content’s lang
direction	'ltr', 'rtl'	'ltr'	dir, and which way arrow keys and popups go in Base UI parts
reducedMotion	'system', 'reduce'	'system'	'reduce' turns motion down as an in-product setting; when the system asks for reduced motion, no value turns it back on

Without a Provider, library strings are in Turkish. To change a string on one component, use its prop, for example loadingLabel on Button.

First component

import { Button, Icon } from '@bigbang/ui';

<Button variant="primary" startIcon={<Icon name="plus" />}>
  Primary button
</Button>;

Each component’s Code tab holds the props table, and its Accessibility tab the keyboard and screen reader behaviour. Icon names are in the Icon gallery; token files and Figma variables are on Downloads.

Running locally

pnpm install
pnpm check          # token build, lint, type check (including astro check), tests
pnpm docs:dev       # guide: http://127.0.0.1:4321
pnpm storybook      # component workshop: http://127.0.0.1:6006
pnpm docs:build     # Storybook and site build, docs check

Before contributing, read the Component checklist.