A lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.
npm install @nex-ui/systemA lightweight and performant styling library based on Emotion, focusing on component architecture and developer experience.
``bash``
npm i @nex-ui/system
Define your own design tokens and apply them seamlessly as CSS values. CSS properties are automatically mapped to token scales, and tokens can even be used within shorthand CSS properties.
Scales map tokens and semantic tokens to CSS properties, allowing CSS properties to directly reference tokens of the appropriate type. This enables the use of tokens as values for CSS properties, ensuring consistency and scalability across the design system.',
Aliases are used to define aliases for CSS properties, which simplifies CSS property names and supports combining CSS properties.
Selectors are designed to combine multiple CSS selectors, aiming to apply style rules to page elements more efficiently and flexibly.
Create multi-variant styles with a type-safe runtime API, heavily inspired by vanilla-extract.
Dark Mode that works out of the box. Additionally, the styles for the Dark Mode can be easily defined in the recipes.
Define custom breakpoints and apply them directly in the recipes to create responsive layouts.
One of our main goals is to provide the best possible developer experience. The system provides a fully-typed API, so when using TypeScript, CSS properties, tokens, and breakpoints etc. will be auto-completed for you.