@banhaten/design-system

A comprehensive React component library with full RTL (Right-to-Left) support, built with TypeScript and Tailwind CSS. Sourced from a complete RTL-supporting Figma library.

Features

• 🌍 Full RTL Support - Built-in support for Arabic, Hebrew, and other RTL languages
• 🎨 20+ Production-Ready Components - Buttons, Inputs, Forms, Navigation, Data Display, and more
• 📦 Tree-Shakeable - Import only what you need
• 🎯 TypeScript First - Full type safety with comprehensive type definitions
• 🎭 Tailwind CSS - Customizable design tokens via Tailwind preset
• 📐 Figma-Accurate - Matches design specs precisely with visual documentation
• ⚡ Modern Stack - React 18, TypeScript, Vite

Installation

npm install @banhaten/design-system

Peer Dependencies

This library requires the following peer dependencies:

npm install react react-dom tailwindcss

Quick Start

1. Import Styles

Import the base styles in your main entry file:

import '@banhaten/design-system/dist/style.css';

2. Configure Tailwind CSS

Extend your tailwind.config.js with the Banhaten preset:

module.exports = {
  presets: [
    require('@banhaten/design-system/tailwind.preset')
  ],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@banhaten/design-system/dist/**/*.js'
  ],
  // Your custom config...
}

3. Use Components

import { Button, Badge, Alert } from '@banhaten/design-system';

function App() {
  return (
    <div>
      <Button variant="primary" size="md">
        Click Me
      </Button>
      
      <Badge color="blue" style="Solid">
        New
      </Badge>
      
      <Alert 
        variant="info" 
        title="Welcome"
        message="This is a sample alert"
      />
    </div>
  );
}

RTL Support

All components support RTL out of the box. Simply pass the rtl prop:

<Button rtl variant="primary">
  زر
</Button>

<Badge rtl color="green">
  جديد
</Badge>

Available Components

Buttons

• Button - Primary UI button with multiple variants, sizes, and icon support
• SocialButton - Pre-styled buttons for social platforms (Facebook, Google, Apple, etc.)
• ButtonGroup - Grouped button controls

Form Controls

• Checkbox - Accessible checkbox with support text
• CheckboxCard - Card-style checkbox with rich content
• Radio - Radio button input
• RadioCard - Card-style radio button with rich content
• Toggle - Toggle switch component
• Slider - Range slider input
• Input - Text input with various features (icons, addons, validation)
• NumberInput - Specialized numeric input with increment/decrement controls
• CheckmarkCard - Card-style selectable component
• Switcher - Theme/mode switcher component

Display Components

• Badge - Status indicators and labels with multiple styles
• Alert - Contextual feedback messages
• Avatar - User avatar with status indicators
• AvatarGroup - Group multiple avatars with overflow handling
• AvatarProfile - Avatar with user profile information
• AvatarCallToAction - Avatar with action button
• Divider - Visual separators
• ProgressBar - Progress indicators with labels
• CodeBlock - Syntax-highlighted code display

Navigation Components

• Menu - Dropdown menu with rich item types
• MenuItem - Individual menu item component
• Accordion - Collapsible content sections
• Breadcrumbs - Breadcrumb navigation
• Tabs - Tab navigation with multiple variants
• Pagination - Pagination controls for data sets

Component Examples

Button with Icons

import { Button } from '@banhaten/design-system';
import { Search, Settings } from 'lucide-react';

<Button 
  variant="primary" 
  size="md"
  iconLeft={<Search />}
>
  Search
</Button>

<Button 
  variant="outline" 
  icon={<Settings />}
/>

Badge Colors

<Badge color="blue" style="Solid">Info</Badge>
<Badge color="green" style="Light">Success</Badge>
<Badge color="red" style="Outline">Error</Badge>

Accordion

<Accordion
  label="Section Title"
  description="Section content goes here"
  expandable
  style="Boxed"
/>

TypeScript Support

All components are fully typed with exported type definitions:

import type { 
  ButtonProps, 
  ButtonVariant, 
  ButtonSize,
  BadgeProps,
  BadgeColor 
} from '@banhaten/design-system';

const variant: ButtonVariant = 'primary';
const size: ButtonSize = 'md';

Customization

Design Tokens

The Tailwind preset includes:

• Colors: Primary, Critical, Neutral, and semantic colors
• Shadows: 3-layer shadow system matching Figma specs
• Typography: Inter, Noto Sans Arabic, JetBrains Mono, Space Grotesk
• Spacing: Consistent spacing scale
• Border Radius: Control-specific radii

Overriding Defaults

// tailwind.config.js
module.exports = {
  presets: [require('@banhaten/design-system/tailwind.preset')],
  theme: {
    extend: {
      colors: {
        primary: {
          // Override primary colors
          600: '#your-color',
        }
      }
    }
  }
}

Development

Building from Source

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run build:watch

# Type check
npm run typecheck

Development Server

npm run dev

Storybook

npm run storybook

Package Structure

dist/
├── index.js          # ESM bundle
├── index.cjs         # CommonJS bundle  
├── index.d.ts        # TypeScript definitions
└── style.css         # Component styles

tailwind.preset.js    # Tailwind configuration preset

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

ISC

Contributing

Contributions are welcome! Please ensure:

• Components maintain RTL support
• TypeScript types are comprehensive
• Figma design specs are matched
• Tests pass and code is linted

Credits

UI Design by the Banhaten design team. Developed and maintained by Ibrahim SP.

Need Help? Check out our Storybook documentation or open an issue.