Develop

beautiful

websites effortlessly.

The ultimate modern design system.

Get Started Github

Nanami Kento

@nanamikento

Efficiency-driven Jujutsu Sorcerer, lover of precision @getNexus ⚔️💼

Following

97.1K

Followers

Depths of Cyan.

Themeable

Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.

Fast

Built on top of Tailwind CSS, which means no runtime styles, and no unnecessary classes in your bundle.

Light & Dark UI

Automatic dark mode recognition, Nexus Design System automatically changes the theme when detects HTML theme prop changes.

Unique DX

Nexus Design System is fully-typed to minimize the learning curve, and provide the best possible developer experience.

Apply custom

Themes

Nexus Design System provides a custom TailwindCSS plugin that allows you to customize the default themes or create your own.


tailwind.config.js
const { nexusui } = require("@nexus-ds/react");

module.exports = {
  // ...
  plugins: [
    nexusui({
      themes: {
        light: {
          colors: {
            primary: "#0072f5",
          }
        },
        dark: {
          colors: {
            primary: "#0072f5",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nexusui({
      themes: {
        light: {
          colors: {
            primary: "#7828c8",
          }
        },
        dark: {
          colors: {
            primary: "#9353d3",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nexusui({
      themes: {
        light: {
          colors: {
            primary: "#FFFFFF",
          }
        },
        dark: {
          colors: {
            primary: "#000000",
          }
        },
      },
    }),
  ],
};

module.exports = {
  // ...
  plugins: [
    nexusui({
      themes: {
        light: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background:"#F4E8D1"
          }
        },
        dark: {
          colors: {
            primary: "#FFD34E",
            secondary: "#EE457E",
            background: "#E1CA9E"
          }
        },
      },
    }),
  ],
};

Ease of

Access

Nexus Design System components are built on top of React Aria ensuring exceptional accessibility support as a top priority.

Keyboard navigation

Managed focus

Collision aware

Alignment control

Screen reader support

Typehead support

Learn more

Seemless

Dark Mode

Nexus Design System comes with a fully well-scaled default dark theme that you can apply to your application with just adding the dark attribute to your html.

Daily Mix

12 Tracks

Jai Mata Di Bol

1:23

4:32


_app.tsx
import React from "react";
import {NexusUIProvider} from "@nexus-ds/react";

const Application = ({Component, pageProps}) => {
  return (
    <NexusUIProvider>
      <main className={isDark ? "dark" : "light"}>
        <Component {...pageProps} />
      </main>
    </NexusUIProvider>
  );
};

export default Application;

Learn more

Easy to

Customize.

Nexus Design System is based on Tailwind Variants, it simplifies component slots customization while avoiding Tailwind class conflicts.


custom-button.tsx
import React from 'react';
import {Button} from '@nexus-ds/react';
import confetti from 'canvas-confetti';

const CustomButton = () => {
  const handleConfetti = () => {
    confetti({...});
  };

  return (
    <Button
      ref={buttonRef}
      disableRipple
      className="relative overflow-visible rounded-full hover:-translate-y-1 px-12 shadow-xl bg-background/30 after:content-[''] after:absolute after:rounded-full after:inset-0 after:bg-background/40 after:z-[-1] after:transition after:!duration-500 hover:after:scale-150 hover:after:opacity-0"
      size="lg"
      onPress={handleConfetti}
    >
      Confetti Time
    </Button>
  );
};

export default CustomButton;

Learn more

Last

but

not

least.

A fully-featured React UI library.

React server components

All Nexus Design System components already include the "use client" directive, which means you can import and use them directly in your RSC.

Accessible components

Nexus Design System components follow the WAI-ARIA guidelines, provide keyboard support and sensible focus management.

Focus interactions

Focus ring will appear only when user navigates with keyboard or screen reader.

Multiple packages

Nexus Design System is divided into multiple packages, so you can install only the components you need.

TypeScript based

Build type safe applications, Nexus Design System has a fully-typed API to minimize the learning curve, and help you build applications.

Override components tags

A polymorphic `as` prop is included in all Nexus Design System components.

No runtime styles

Nexus Design System is based on Tailwind CSS, it means that there are no runtime styles, and no unnecessary classes in your bundle.

Beautifully designed

Nexus Design System components are unique and are not tied to any visual trend or design rule, which makes us unique and of course your projects as well.

Let's make the

Web

Prettier

Experience it firsthand and show us your creations!

Get Started Github

Community

Get involved in our community. Everyone is welcome!

Develop

beautiful

websites effortlessly.

The ultimate modern design system.

Nanami Kento

@nanamikento

Apply custom

Themes

Sataru Gojo Wallpaper

Ease of

Access

Seemless

Dark Mode

Easy to

Customize.

Last

but

not

least.

Let's make the

Web

Prettier

Community