# Nasaq UI: an Arabic RTL design system your AI agent can read

> 390 registry components for React, Vue, Laravel Blade and plain HTML, with right-to-left built in rather than patched on, and a free MCP server so Claude, Cursor and Codex read the real manuals instead of guessing props.

*2026-10-19T12:49:01Z*

# Nasaq UI: an Arabic RTL design system your AI agent can read

I build products for Arabic and English users at the same time. For years the routine was the same: pick a good Western UI kit, then spend a week fixing it for right-to-left. Margins on the wrong side, arrows pointing backwards, a date picker that only speaks English, a price that always says USD.

Nasaq (نسق, Arabic for *order* or *pattern*) is the Arabic design system I built instead. It started as the shared UI for my own products and grew into a full system. Today it's open source under MIT, and this is the first time I'm writing about it properly. The story behind it is in [Why I built Nasaq](https://fadymondy.com/en/blog/why-i-built-nasaq-arabic-rtl-design-system).

![Nasaq UI: 390 components, React, Vue, Blade, Alpine, real RTL and a free MCP server](/uploads/sites/13d0db6a-b13a-4039-8823-6029d9eaf306/media/nasaq-hero-en.png)

## 1. Right-to-left is a rule, not a patch

- `NasaqProvider` sets the locale, and the locale sets the direction: `en` is left-to-right, `ar` is right-to-left. It wraps Base UI's direction provider, so menus, popovers and sliders flip correctly.
- **The build fails on physical classes.** A lint rule rejects `ml-`, `text-right`, `border-l` and friends, plus raw hex colours. Every component uses logical properties, so RTL can't quietly break later.
- Components ship English and Arabic strings. `useT()` handles Arabic plurals. Icons that mean a direction flip; the brand mark never does.
- Prices default to USD, and to SAR in Arabic.
- Fonts: Inter for Latin text and IBM Plex Sans Arabic for Arabic. No font files ship in the package; your app loads them.

## 2. One look, four stacks

Most kits are React-only. Nasaq has the same components and tokens in:

- **React 19** on Base UI + Tailwind v4: `npm i @fadymondy/nasaq`, or copy the source with shadcn: `npx shadcn@latest add @nasaq/button`.
- **Vue 3**: `Nq*` components with `v-model`.
- **Laravel**: Blade components `<x-nq::button>`, Livewire `wire:model`, and a FilamentPHP plugin (`composer require fadymondy/nasaq-php`).
- **Plain HTML + Alpine**: two `<script>` tags.

There are 390 items in the component registry: forms, data tables, dashboards, an AI chat view, a store and checkout, a POS register, docs shells and marketing sections. Tokens are DTCG JSON compiled to `--nq-*` CSS variables, with light/dark, density and 17 brand themes (or bring your own colours).

## 3. Your agent reads the manual

This is the part I use every day. Nasaq has a free, public MCP server. No sign-in, no key:

```bash
claude mcp add --transport http nasaq https://mcp.nasaqui.com/mcp
```

It has six read-only tools: `list_components`, `search_components`, `get_component` (the manual and source for each stack), `get_foundation`, `list_tokens` and `get_setup`. Cursor, VS Code, Windsurf and Claude Desktop work too, and there's an offline stdio version: `npx -y @fadymondy/nasaq-mcp`.

The difference is simple. Without it, the agent guesses props from memory. With it, the agent looks up `get_component` first and writes code that matches the real API, in the right stack, with logical properties.

There's also a Claude Code / Codex plugin with skills and commands like `/nasaq:new-site` and `/nasaq:audit-ui`:

```bash
/plugin marketplace add fadymondy/nasaq-plugin
```

## 4. Nasaq Studio: a bilingual CMS your agent can run

Nasaq Studio (studio.nasaqui.com) is the hosted side: manage a site's content in Arabic and English in one place, with themes, a page builder, menus, redirects, SEO and scheduled publishing.

It has its own MCP server, and the **Connect your agent** panel gives you an API key for it. Keys are scoped (`cms:read`, `cms:write`, `cms:admin`, with admin off by default), expire after 30, 90 or 365 days if you want, and are shown once. The part I care about most: **a key can never do more than its creator's role allows right now.** It's re-checked on every call, so if someone is moved from admin to editor, their keys lose admin power immediately. Only owners and admins can create keys.

## Getting started

```bash
# once: the Nasaq preset (tokens, theme, provider)
npx shadcn@latest add https://docs.nasaqui.com/r/nasaq.json

# then any component
npx shadcn@latest add https://docs.nasaqui.com/r/button.json
```

Or install the package:

```bash
pnpm add @fadymondy/nasaq
```

```tsx
import { Button, NasaqProvider } from "@fadymondy/nasaq/web";
import "@fadymondy/nasaq/web/styles.css";
```

## Honest limits

- **Most components are still beta.** 49 are stable and follow semver; the rest may gain props.
- It's new. There's no community yet and one maintainer (me). Issues and PRs are very welcome.
- There's no Nasaq CLI. You install through npm, shadcn or Composer.
- Studio is hosted and not open source.

## FAQ

### Is Nasaq free and open source?
The component library, tokens and MCP server are MIT licensed. The code is on [GitHub](https://github.com/fadymondy/nasaq).

### Does it work with plain shadcn/ui projects?
Yes. It's a shadcn registry, so `npx shadcn@latest add @nasaq/button` copies the source into your project and you own it. Add the `@nasaq` namespace to `components.json` first.

### How does Nasaq handle right-to-left?
Every component uses logical properties, and a lint rule fails the build on physical classes such as `ml-` or `text-right`. `NasaqProvider` sets the direction from the locale.

### Which stacks does it support?
React 19, Vue 3, Laravel (Blade, Livewire and a FilamentPHP plugin) and plain HTML with Alpine.

### What does the MCP server give my AI agent?
Six read-only tools to list and search components, read each component's manual and source for your stack, and read tokens and setup guides. It's public, with no sign-in.

### Is it production ready?
I use it in my own products. 49 components are stable and the rest are beta, so check a component's status before you depend on it.

## Next steps

- Site and docs: [nasaqui.com](https://nasaqui.com) · [docs.nasaqui.com](https://docs.nasaqui.com)
- Code: [github.com/fadymondy/nasaq](https://github.com/fadymondy/nasaq)
- MCP: [mcp.nasaqui.com](https://mcp.nasaqui.com)
- Studio: [studio.nasaqui.com](https://studio.nasaqui.com)
- Product Hunt: [Nasaq on Product Hunt](https://www.producthunt.com/products/nasaq)
- Founder post: [Why I built Nasaq](https://fadymondy.com/en/blog/why-i-built-nasaq-arabic-rtl-design-system)

If your team ships an Arabic + English product and wants help with the UI, RTL or putting AI agents to work on it, [I take on that kind of project](https://fadymondy.com/en/services?utm_source=nasaqui&utm_medium=blog&utm_campaign=nasaq-launch-oct20).

---

Source: https://nasaqui.com/en/blog/nasaq-arabic-rtl-design-system-mcp