Skip to main content
Nexus Design System
GitHub

Your design system starts here.

Get startedView components

Create a project

Try it. Everything stays in this preview.

Notifications

When someone needs your attention.

Progress, milestones and shared work.

A weekly summary of your workspace.

65%

Inbox

Sam Rivera

10:42

A fresh direction

The first pass is ready. I’ve kept the navigation quiet and given the work more room. Let me know what you think.

Workspace activity

1,284+12.8%

Design review

Sam Rivera
The new direction is ready for a look.
Love the quieter navigation. Let’s ship it.
You · 10:42

Team notes

Only visible in this demo.

New message

Nothing is sent from this demo.

Team access

Alex Morgan

Design lead

Sam Rivera

Product designer

Jordan Lee

Engineer

Project checklist

2 / 4In progress
Alex Morgan

Due November 12

Contact details

Jamie Park

Head of design

Customize every detail.

Change one setting. See your system respond.

Open Playground

Button

Input

We only use it for sign-in.

Chart

Badge

NewDraftIn reviewLivePausedFailed

Switch

Keep files up to date.

Ask for a code on new devices.

Table

InvoiceStatusAmount
#1042Paid$1,250
#1043Due$840
#1044Late$2,300

Button group

Select

Date picker

June 2026

Toggle group

Tabs

Three issues are due this week.

Choice card

Alert

New version available.
Update to get the latest fixes.
Payment failed.
Check your card details.

Combobox

Item

AL
Alex Lee

Designer

SR
Sam Rivera

Engineer

Slider

64%

Accordion

Yes. It follows the WAI-ARIA pattern.

Multi-select

Checkbox

Progress

Storage64%
Monthly uploads30%

Message

Sam Rivera
The new theme is ready for review.
Looks great. Let’s ship it.

Input OTP

Empty state

No projects yet

Create a project to start your work.

Radio group

Filter chip

Description list

Plan
Pro
Seats
12 of 20
Renews
November 1

Breadcrumb

Textarea

Pagination

Carousel

1
2
3
4

Menubar

Kbd

Search⌘K
Save⌘S
New issueC

Navigation menu

Avatar

ALSRJKMP

Spinner

Uploading 3 files
Saving changes

Skeleton

Your next component shouldn’t change the rest.

Nexus components bring their own styles, so you can add what you need while keeping the look and feel you’ve already built.

Explore integrations

Your shadcn/ui app

Add react-bootstrap Dropdown

bootstrap.min.css

Your app changedSpecificity clash

Add Nexus Select

nxds.css

Your app stays the same

One foundation. Many frameworks.

Explore the engine
Design tokens
Nexus core
Frameworks

Stories are the tests.

The example you explore is the example we check.

Open Storybook

Live example

Ready to run

Product updates, on your terms.

State offCallback —

Starts off
Not run
Click turns on
Not run
Reports true
Not run
Click turns off
Not run
Reports false
Not run

Switch.stories.tsx

ClickInteraction
export const ClickInteraction: Story = {
  args: {
    'aria-label': 'Toggle switch',
  },
  play: async ({ canvasElement, args }) => {
    const canvas = within(canvasElement);
    const switchEl = canvas.getByRole('switch');

    // Initially unchecked
    await expect(switchEl).toHaveAttribute('data-state', 'unchecked');

    // Click to toggle on
    await userEvent.click(switchEl);
    await expect(switchEl).toHaveAttribute('data-state', 'checked');
    await expect(args.onCheckedChange).toHaveBeenCalledWith(true);

    // Click to toggle off
    await userEvent.click(switchEl);
    await expect(switchEl).toHaveAttribute('data-state', 'unchecked');
    await expect(args.onCheckedChange).toHaveBeenCalledWith(false);
  },
};

Read the action. See its effect. Inspect the result. Interactive prototype · local checks, not the Nexus CI suite.

Build Nexus with us.

Join the community. Ask, share and help shape what comes next.