Installation

Install the packages

npm install @bindshq/stance-tokens @bindshq/stance-react

react and react-dom (18.2 or later) are peer dependencies. Stance has no other runtime dependencies.

Import the styles once

Import the token variables, then the component styles, at the root of your application.

import '@bindshq/stance-tokens/css';
import '@bindshq/stance-react/styles.css';
// Optional: base body styles for apps adopting Stance fully
import '@bindshq/stance-react/global.css';

styles.css only targets .st-* classes, so it never restyles your existing markup. global.css is opt-in and sets the page background, text colour, font and focus ring.

Load DM Sans

Stance’s typeface is DM Sans. The token --st-font-sans picks up the --font-dm-sans variable created by next/font:

import { DM_Sans } from 'next/font/google';
const dmSans = DM_Sans({ subsets: ['latin'], variable: '--font-dm-sans', display: 'swap' });

export default function RootLayout({ children }) {
  return <html lang="en" className={dmSans.variable}>…</html>;
}

Using Tailwind

Stance does not require Tailwind, but ships presets so utility classes use real Stance tokens.

import stance from '@bindshq/stance-tokens/tailwind';

export default {
  presets: [stance],
  content: ['./src/**/*.{ts,tsx}'],
};
// <div className="bg-stance-bg-surface text-stance-fg-muted rounded-stance-lg" />

@import 'tailwindcss';
@import '@bindshq/stance-tokens/tailwind-v4.css';

Requirements

• React 18.2+ or 19, any bundler with ESM support (Next.js 14+, Vite, Remix).
• Modern evergreen browsers. CSS uses custom properties, color-mix() in presets, and :focus-visible.
• Components marked 'use client' work in Next.js server component trees without wrappers.