Introduction

Welcome to the Nexus Design System documentation!

What is Nexus Design System?

Nexus Design System is a UI library for React that helps you build beautiful and accessible user interfaces. Created on top of Tailwind CSS and React Aria.

Nexus Design System's primary goal is to streamline the development process, offering a beautiful and adaptable system design for an enhanced user experience.

FAQ

No, Nexus Design System is an independent community project and is not related to Vercel.

How is Nexus Design System different from TailwindCSS?

TailwindCSS:

Tailwind CSS is a CSS Framework that provides atomic CSS classes to help you style components, leaving you to handle lots of other things like accessibility, component composition, keyboard navigation, style overrides, etc.
Nexus Design System:

Nexus Design System is a UI library for React that combines the power of TailwindCSS with React Aria to provide a complete components (logic and styles) for building accessible and customizable user interfaces. Since Nexus Design System uses TailwindCSS as its style engine, you can use all TailwindCSS classes within your Nexus Design System components, ensuring optimal compiled CSS size.

How is Nexus Design System different from TailwindCSS components libraries?

TailwindCSS components libraries such as TailwindUI , Flowbite, or Preline, just to name a few, only offer a curated selection of TailwindCSS classes to style your components. They don't provide any React specific components, logic, props, composition, or accessibility features.

In contrast to these libraries, Nexus Design System is a complete UI library that provides a set of accessible and customizable components, hooks, and utilities.

How Nexus Design System deals with TailwindCSS classes conflicts?

We created a TailwindCSS utility library called tailwind-variants that automatically handle TailwindCSS class conflicts. This ensures your custom classes will consistently override the default ones, eliminating any duplication.

Does Nexus Design System use runtime CSS?

No, As Nexus Design System uses TailwindCSS as its style engine, it generates CSS at build time, eliminating the need for runtime CSS. This means that Nexus Design System is fully compatible with the latest React and Next.js versions.

Does Nexus Design System support TypeScript?

Yes, Nexus Design System is written in TypeScript and has full support for it.

Can I use Nexus Design System with other front-end frameworks or libraries, such as Vue or Angular?

No, Nexus Design System is specifically designed for React as it is built on top of React Aria. However, you can still use the Nexus Design System components styling part with other frameworks or libraries.

Why Nexus Design System uses Framer Motion?

We use Framer Motion to animate some components due to the complexity of the animations and their physics-based nature. Framer Motion allows us to handle these animations in a more straightforward and performant way in addition it is well tested and production ready.

Community

We're excited to see the community adopt Nexus Design System, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!