Introduction

Nooxit is a design system for Next.js applications. It takes every component from shadcn/ui, rebuilds it on Radix primitives and Tailwind CSS v4, and restyles it to the Nooxit Figma UI kit.

It ships as one npm package, nooxit-design-system, containing 61 components, the design tokens they are built from, and the stylesheet that defines them.

What makes it NooxitCopy Anchor Link

The components share shadcn/ui's API, so anything you know from there still applies. What changes is the styling, and the changes are systematic:

• Buttons are pills. Every button is rounded-full; only inputs, cards and surfaces carry the 4/6/8px radii.
• Focus. Text-entry fields turn their 1px border primary (destructive when invalid) with no ring. Every other control uses ring-2 ring-primary ring-offset-2 ring-offset-background, swapping to ring-destructive on destructive and invalid controls. No component uses the stock 3px translucent ring.
• Tailwind's palette is removed. --color-*: initial clears it, so bg-blue-500 does not exist. Only the Nooxit primitives and semantic tokens resolve.
• Cards have no shadow. They are defined by a 1px border alone.
• Tooltips are popovers, not inverted chips.
• Aspekta only. There is no brand monospace; code uses the system monospace.

Where to startCopy Anchor Link

Source of truthCopy Anchor Link

The Nooxit Figma UI kit defines the tokens and the component styling. Every page here links back to the node it was built from, and the Colors page marks the handful of tokens that were added or adjusted rather than read from Figma.