███████╗██╗   ██╗███╗   ██╗ █████╗ ██████╗ ███████╗███████╗
██╔════╝╚██╗ ██╔╝████╗  ██║██╔══██╗██╔══██╗██╔════╝██╔════╝
███████╗ ╚████╔╝ ██╔██╗ ██║███████║██████╔╝███████╗█████╗
╚════██║  ╚██╔╝  ██║╚██╗██║██╔══██║██╔═══╝ ╚════██║██╔══╝
███████║   ██║   ██║ ╚████║██║  ██║██║     ███████║███████╗
╚══════╝   ╚═╝   ╚═╝  ╚═══╝╚═╝  ╚═╝╚═╝     ╚══════╝╚══════╝

Synapse is the Neurons design system — a shared React component library with design tokens, accessible components, and Storybook documentation.

Browse the components in Storybook.

Install

React 18 is a peer dependency. Tailwind CSS v4 is optional in package.json and required if you want the styles.

npm install @neurons-inc/synapse

Install 1.1.3 or later. That release inlines the Hugeicons Pro glyphs, so the install does not need a Hugeicons token. @hugeicons/react comes from the public npm registry.

Use it

Add the Vite plugins:

import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Put this in the app stylesheet. The @source path assumes that file lives in src/.

@layer theme, base, components, utilities;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities) source('./');
@import '@neurons-inc/synapse/setup.css';
@import '@neurons-inc/synapse/synapse.css';
@source '../node_modules/@neurons-inc/synapse/src';

source('./') scans the app src/ tree. setup.css brings tokens, Inter and Lexend, the theme plugin, and the Synapse component scan. synapse.css is the spinner, skeleton, and tree animation CSS. Tailwind v4 skips node_modules, so the explicit @source path is required.

This stylesheet skips Tailwind Preflight. Preflight resets img, margins, and headings, which breaks PPT and PDF export that reads layout from the live DOM.

import { Button } from '@neurons-inc/synapse';

export function App() {
  return <Button>Hello from Synapse</Button>;
}

Class name helpers are cn and getCssVariable from @neurons-inc/synapse/utils.

The same files work in a Vite React CodeSandbox. Dependencies: react, react-dom, and @neurons-inc/synapse. Dev dependencies: vite, @vitejs/plugin-react, tailwindcss, and @tailwindcss/vite.

Package exports

| Import | What it is | | --- | --- | | @neurons-inc/synapse | Components | | @neurons-inc/synapse/utils | cn and getCssVariable | | @neurons-inc/synapse/setup.css | Tokens, theme plugin, component scan | | @neurons-inc/synapse/synapse.css | Extracted component CSS | | @neurons-inc/synapse/fonts.css | Inter and Lexend. setup.css already loads this | | @neurons-inc/synapse/tokens.css | CSS variables only. Apps that use Tailwind should use setup.css instead |

Tokens

| Category | CSS variable prefix | Tailwind class example | | --- | --- | --- | | Brand colors | --color-secondary, semantic surfaces and text | bg-primary, text-secondary | | Interactive palette | --color-violet-3 through --color-violet-7 | bg-violet-4 | | Semantic text | --color-text-primary, --color-text-secondary | text-text-primary | | Surface | --color-surface-white, --color-surface-primary | bg-surface-white, bg-surface-primary | | Border | --color-border-primary, --color-border-secondary | border-border-primary, border-border-secondary | | Gradients | --gradient-primary, --gradient-fancy, --gradient-fancy-hover | bg-gradient-primary, bg-gradient-fancy | | Border radius | --radius-xsm, --radius-sm, --radius-lg, --radius-fullcircle | rounded-ds-xs, rounded-ds, rounded-ds-full | | Typography | --font-family-title, --font-family-body | font-title, font-body |

bg-primary is the primary call to action surface in Figma (--color-surface-secondary). Use text-brand-primary for violet brand text. The full map is tailwind.config.js.

Compose

Use the components. Do not hand roll flex, spacing, or text styles.

Stack is the layout primitive. Pass direction, gap, alignItems, and justifyContent. Spacing props are p, px, py, m, mx, and my. Values are steps, not pixels. 1 is 4px. Step n is 4n px.

Typography is for text. Set variant and weight on it. Put margin on the parent Stack.

Reach for an existing component (Button, Chip, and the rest of the package) before a styled element. Storybook is the catalog.

import { Stack, Typography } from '@neurons-inc/synapse';

export function Metric({ label, value }: { label: string; value: string }) {
  return (
    <Stack direction="row" alignItems="center" justifyContent="space-between" gap={2}>
      <Typography>{label}</Typography>
      <Typography weight="bold">{value}</Typography>
    </Stack>
  );
}

Deprecations

A deprecated export keeps working until the next major version. Your editor shows it struck through, and the JSDoc @deprecated note names the replacement. The changelog lists each deprecation in the release that added it, and each removal in the major that takes it out. Move off a deprecated export before you upgrade to the next major.

Develop

Component, token, Storybook, and release workflow: CONTRIBUTING.md.