Give us a star

Introduction

nsdev/ui is a collection of accessible, fully styled components, blocks and page templates built on Base UI and Tailwind CSS. Open code, dark by default, and made to be adapted to your own design system.

Most component libraries are a black box behind an npm import. That works until a button has to behave differently, or you need something the library doesn't ship. Then you wrap components, fight their styles, or mix libraries whose APIs don't agree. nsdev/ui starts from the other end: the code is the documentation, and every piece is built so you can read it, change it and make it fit.

It is built around these principles:

  • Open code: the source of every component is public and readable, with no compiled layer between you and what renders.
  • Built on Base UI: behaviour, focus and keyboard handling come from accessible headless primitives. This library adds the styling.
  • Tokens first: color, type and radius live in one theme. Change a token and every component follows.
  • Composition: components combine into blocks, blocks into pages, pages into full app screens.
  • Real source: the code on a component page is the file that renders its demo, never a copy written on the side.
  • Beautiful defaults: a clean, minimal look with one accent, so things look right before you touch anything.
  • AI-ready: plain, consistently structured source that people and LLMs can both read and extend.

Open code

You get the actual component code, not an abstraction over it. You see exactly how each component is built, and changing one means editing its file. There is no override layer, no wrapper component and no style workaround to maintain. The whole project lives in a public repository on GitHub.

Built on Base UI

The hard parts of an interface, such as focus management, keyboard navigation, ARIA attributes and open and close behaviour, are handled by Base UI, a headless primitive layer. nsdev/ui styles those primitives with Tailwind and nothing else, so you keep the accessibility without inheriting someone else's look.

Tokens

Every component is styled from a small set of design tokens: color, typography and radius. They are declared once in a Tailwind @theme block, and components use the utilities generated from them, never raw values. Swap the tokens and the whole library follows. See Theming for the full set.

Composition

The library is layered, and each layer is built from the one below it:

  • Components: the primitives, such as Button, Input and Dialog.
  • Blocks: sections composed from components, such as a hero, a bento grid or a pricing table.
  • Pages: full templates composed from blocks.
  • Dashboard: complete app screens, kept separate from pages.

Components share a common, composable shape, so once you have learned one you can predict the next, and so can your team.

Real source

Each component page pairs a live demo with its source. The source is not written separately for the docs: it is read from the same file that renders the demo and highlighted when the site is built. What you read can never drift from what you see.

Beautiful defaults

Components are designed to look good on their own and to sit well together. The look is dark and minimal, with a single green accent reserved for what is active, on or successful inside a component. If you want something different, change the tokens or edit the component.

AI-ready

Open code and a consistent structure make the library easy for AI tools to work with. A model can read how a component is built, suggest improvements, or write a new one that matches the ones already there.

Distribution

How nsdev/ui reaches your project is still being decided. For now, the way to use it is to read the source in the repository. Whether it ships as an npm package or as a copy-paste registry with a command-line tool is open, and nothing above depends on that choice. This page will be updated when it is settled.