Dig: the Persian RTL design system with an MCP server

123 accessible right-to-left components and 226 ready-made pages for React and Tailwind CSS, with Persian digits, the Jalali calendar and Iranian form patterns. A public MCP server lets AI coding agents build Persian interfaces with Dig instead of guessing LTR defaults.

The full documentation is in Persian. نسخهٔ فارسی

What you get

RTL from the ground up

Every component is built for right-to-left layout with logical properties and Persian typography (IRANSansX, Vazirmatn, IRANYekan). Not an LTR kit with a dir flip.

Persian locale built in

Jalali (Shamsi) calendar and date pickers, Persian digits, Toman/Rial formatting, relative time, Iranian national ID and mobile validation, bank logos and license plates.

Accessible

Keyboard navigation, focus management and ARIA roles are implemented in-house with no external primitive dependency. Generated brand themes are contrast-checked.

You own the code

The digdesign CLI copies each component and its dependencies into your project, React, Vue, Svelte or Angular, so you can read and change everything.

Tokens and themes

Color, type, spacing, radius and shadow tokens with light and dark themes. A single brand color generates a full, contrast-safe theme.

Ready-made pages

Full page blocks such as sign-in, dashboards, checkout, money transfer and order tracking, built only from Dig components and type-checked.

MCP server for AI coding agents

One public endpoint over Streamable HTTP, no account or token. Add it to Claude Code with a single command, or to any MCP client config:

claude mcp add --transport http dig https://docs.digdesign.ir/api/mcp
mcp.json
{
  "mcpServers": {
    "dig": { "url": "https://docs.digdesign.ir/api/mcp" }
  }
}
  • search_components / list_components: find the right component, even from a whole-page request like a login page
  • get_component_demo / get_component_api: real usage snippets plus the allowed props and values
  • list_blocks / get_block: start a page from a ready-made block with an adaptation checklist
  • get_page_patterns: layout, spacing and RTL rules so generated pages stay consistent
  • get_tokens / customize_theme / get_design_md: design tokens, a brand theme and a DESIGN.md for your repo
  • check_contrast / review_code: WCAG contrast checks and an RTL and accessibility review of generated code

Agents without MCP can read /llms.txt.

Install

npx digdesign@latest init
npx digdesign@latest add button input date-picker

FAQ

Is there a Persian design system with MCP support?
Yes. Dig ships a public MCP server at https://docs.digdesign.ir/api/mcp (Streamable HTTP, no API key). Coding agents can search Dig's Persian RTL components, fetch their source and demos, start from page blocks, and review the result.
Which AI coding tools work with the Dig MCP server?
It is tested with Claude Code and OpenAI Codex. Any MCP client that supports remote HTTP servers, such as Cursor, Gemini CLI, VS Code, Windsurf and Cline, should work with its own config key.
Does Dig support the Jalali (Shamsi) calendar?
Yes. The calendar, date field and date picker work with both the Jalali and Gregorian calendars, and formatting helpers output Persian digits.
Which frameworks are supported?
React with Tailwind CSS is the primary target, with ports for Vue, Svelte and Angular installed through the same CLI.