@hilal-ds/react

React 19 components for the Hilal design system. Thin wrappers over @hilal-ds/core CSS — same DOM as the Angular and Blade packages.

Install

pnpm add @hilal-ds/react @hilal-ds/core @hilal-ds/tokens

Use

import '@hilal-ds/tokens/css';
import '@hilal-ds/core';
import { Button } from '@hilal-ds/react';

export function App() {
  return <Button variant="primary" size="md">Click me</Button>;
}

RTL

Wrap any subtree in dir="rtl" and lang="ar". The components use logical CSS properties so they mirror automatically.

<div dir="rtl" lang="ar">
  <Button variant="primary">انقر هنا</Button>
</div>

Available components

• Button ✅
• More to come — see the roadmap.