@adres/adrec-dls

React components implementing the ADREC Design System, for ADREC admin-panel apps (Tawtheeq and others) to install instead of rebuilding.

Install

npm install @adres/adrec-dls

react and react-dom (^19.0.0) are peer dependencies - install them in your app if they aren't already there.

Set up the design tokens

Components use Tailwind CSS v4 utility classes from the ads-* design tokens. Without importing this package's token sheet, those utilities don't exist and components will render unstyled. Import it once, in your app's Tailwind entry CSS:

@import "@adres/adrec-dls/tokens.css";

Usage

import { Badge } from '@adres/adrec-dls';

function Example() {
  return <Badge text="Active" color="Success green" type="Light" />;
}

Every component supports dir="ltr"/dir="rtl" via its content/language props for EN/AR layouts - see each component's exported props interface for the full API.