Open design system for Rahhal

Build mini-apps that feel like one product.

A complete design system for the Rahhal product family — typed tokens, accessible Radix components, bilingual EN + AR with full RTL, and a single phone-OTP sign-in. All shared. All consistent.

Browse componentsWhy we built this
Colors & radiusTypographyIcons & brand marksRahhalIconButtonBackButtonPasteButtonToggle · ToggleGroupInput & TextareaSearchBarFilterChipFileDropzoneSwitch · Checkbox · RadioSliderComboboxCalendar & DatePickerForm (react-hook-form)SectionCardListPlaceCardTableKanban boardMapCountry factsCarouselCollapsibleLayout primitivesBadgeAvatar · Skeleton · ProgressAlertCalloutToaster (sonner)SpinnerRatingEmptyStateJsonViewerTabs · AccordionDialog · SheetAlertDialogDrawerPopoverHoverCardCommand paletteDropdown · Select · TooltipNavBarSidebarBreadcrumbPaginationStepperWizardHeaderEmbedded modeFooterPhoneInputInputOTPLoginScreen (demo)RequireRoleAccessDeniedScreenColors & radiusTypographyIcons & brand marksRahhalIconButtonBackButtonPasteButtonToggle · ToggleGroupInput & TextareaSearchBarFilterChipFileDropzoneSwitch · Checkbox · RadioSliderComboboxCalendar & DatePickerForm (react-hook-form)SectionCardListPlaceCardTableKanban boardMapCountry factsCarouselCollapsibleLayout primitivesBadgeAvatar · Skeleton · ProgressAlertCalloutToaster (sonner)SpinnerRatingEmptyStateJsonViewerTabs · AccordionDialog · SheetAlertDialogDrawerPopoverHoverCardCommand paletteDropdown · Select · TooltipNavBarSidebarBreadcrumbPaginationStepperWizardHeaderEmbedded modeFooterPhoneInputInputOTPLoginScreen (demo)RequireRoleAccessDeniedScreen
Why it works

Everything a mini-app needs, already wired.

Stop re-deriving the basics for every new app. Compose, theme, localize, and ship.

TS-typed tokens

Color, typography, and radius defined in TypeScript and emitted as CSS variables. One source of truth — no drift between apps.

Bilingual + RTL by default

EN and AR ship together. Logical Tailwind utilities flip layouts automatically — no separate RTL stylesheets.

Phone-OTP, once

@rahhal/auth implements the iOS → web session handover and standalone OTP flow exactly once. Apps just install and wrap.

Built for AI agents

Every page is served as Markdown. Agents fetch /skill.md and /components/<slug>.md to read the same source of truth humans browse.

Cross-platform tokens

Web hex + iOS / Android equivalents emitted alongside CSS so designers and native engineers stay in sync.

Independent deploys

Each mini-app owns its own deploy config and lives on its own subdomain. The design system keeps the family coherent.

Five-minute integration

Compose, don't reinvent.

Install @rahhal/ui, import what you need, ship. No theme overrides, no RTL retrofits, no auth scaffolding.

  • Per-component subpath imports keep your bundle tight.
  • Every component is themed via design tokens — no hardcoded colors.
  • Logical Tailwind utilities mirror layouts under RTL automatically.
App.tsx
It's all here

Try it before you build it.

58+ components across 9 categories — all themed, all RTL-safe, all yours.

Buttons

Six variants, four sizes, full-rounded by default.

SearchBar

Capsule input with leading magnifier and clear affordance.

FilterChip

Toggleable pills for multi-select category filters.

Switch

Native-feeling on/off control with full keyboard support.

Push notifications

Badge

Inline labels for status, counts, and tags.

Default
Secondary
Outline
Destructive

Color tokens

Primary, secondary, accent, muted — themed light + dark.

See all components
AI agents welcome

Built for the next generation of tooling.

Every catalog page has a Markdown twin. Agents fetch /skill.md to discover everything, then /components/<slug>.md for prop-level detail. The same source of truth humans read here.

Paste this into your AI tool
Use the Rahhal design system at https://marsam.rahhal.app to build a mini-app for me.

First, fetch https://marsam.rahhal.app/skill.md for the full component inventory and conventions. For any component you use, fetch https://marsam.rahhal.app/components/<slug>.md for its props and usage. Always compose UI from @rahhal/ui first. Support both EN and AR with full RTL by default.

What I want to build: <describe your mini-app idea>
Rahhal icons and brand assetsllms-full.txtskill.md
/llms.txtRead the guidelines

Start building today.

Open-source, batteries-included, and growing with every Rahhal mini-app that ships.

Get startedRead the FAQ