# What Nasaq is

> Nasaq (نسق, Arabic for "order" or "system") is a design system for product interfaces: 390 React components, a token system, eleven brand themes and full-page templates. It is built on Base UI and Tai

Source: https://docs.nasaqui.com/guides/introduction

Nasaq (نسق, Arabic for "order" or "system") is a design system for product interfaces: 390 React components, a token system, eleven brand themes and full-page templates. It is built on Base UI and Tailwind CSS v4, follows shadcn's anatomy and prop names, and treats Arabic and right-to-left layouts as a first-class case, not an afterthought.

This site is the documentation. Every component has a live story and a manual; the sidebar below the docs is the catalogue.

## Who it is for

- Teams that build application UIs (dashboards, admin tools, stores, settings, editors) and want a coherent set of parts that already work together.
- Products that ship in English and Arabic. Layout uses logical properties only (`ms-*`, `pe-*`, `text-start`), Arabic type metrics are their own token set, and components with built-in text ship Arabic strings.
- People who like shadcn's model of owning the source, and people who would rather take a versioned dependency. Nasaq offers both.

## Two ways to install

| | shadcn registry | npm package |
| --- | --- | --- |
| Command | `npx shadcn@latest add @nasaq/button` | `pnpm add @fadymondy/nasaq` |
| You get | The component's source in your repo | A prebuilt, versioned dependency |
| Best for | Apps that want to edit or restyle the code | Apps that want updates by version bump |
| Tokens and brands | The `nasaq` preset item and one `theme-*` item per brand | CSS files and a `/tokens` and `/brands` entry point |

Start with [Install with the shadcn CLI](https://docs.nasaqui.com/guides/shadcn-cli) or [Install from npm](https://docs.nasaqui.com/guides/npm-package), then read [Project setup](https://docs.nasaqui.com/guides/project-setup) for the Tailwind and provider wiring.

## What is in the box

- **Components.** Forms, tables, charts, overlays, navigation, editors, AI and commerce parts. The [component catalogue](https://docs.nasaqui.com/components) lists all 390 by category.
- **Page templates.** Complete screens built only from Nasaq components: an app shell, settings, billing, admin, analytics and a whole storefront (the commerce kit). See [Page templates](https://docs.nasaqui.com/guides/page-templates).
- **Tokens.** Colour, spacing, type, density and radius as `--nq-*` CSS variables, generated from DTCG JSON. See [The token system](https://docs.nasaqui.com/guides/tokens).
- **Brands.** {{brands}} brand themes that swap the brand and action colours and the mark, without touching components. See [Theming and brands](https://docs.nasaqui.com/guides/theming).
- **Platforms.** A React Native kit (`@fadymondy/nasaq/native`) and Electron window chrome (`@fadymondy/nasaq/electron`) share the same tokens.
- **An MCP server.** Lets Claude, Cursor and other AI tools search components and read their manuals. See [The MCP server](https://docs.nasaqui.com/guides/mcp-server).

## How to read this site

- Use the toolbar above the canvas to switch **brand**, **theme** (light, dark, system), **locale** (English, العربية), **direction**, **density** and **expression** on any story, including these pages.
- Every component has a **Docs** tab with its manual (when to use it, API, accessibility, RTL notes) followed by its stories.
- Snippets have a copy button.

## Status

Nasaq is at version **0.1.0**. The components are in daily use in the author's own products, but the API is not yet frozen: expect changes between 0.x releases, recorded in the [changelog](https://docs.nasaqui.com/guides/changelog-and-versioning). Each component's manual carries a `status` (`stable`, `beta` or `experimental`).

## Licence

MIT, © 2026 Fady Mondy. Fonts and third-party logos are not part of the package; see [Project setup](https://docs.nasaqui.com/guides/project-setup#fonts).