Aleph Design System

A unified React component library built with TypeScript and Tailwind CSS.

Installation

npm install @aleph/design-system
# or
yarn add @aleph/design-system
# or
pnpm add @aleph/design-system

Configuration

Tailwind CSS

Add the content path to your tailwind.config.js:

module.exports = {
  content: [
    // ...
    "./node_modules/@aleph/design-system/dist/**/*.{js,mjs}",
  ],
  // ...
}

You also need to add the CSS variables to your global CSS file. See src/index.css (if provided) or copy the variables from the design system documentation.

Usage

import { Button, Input } from "@aleph/design-system";

function App() {
  return (
    <div className="p-4">
      <Button variant="default">Click me</Button>
      <Input placeholder="Type something..." className="mt-2" />
    </div>
  );
}

Components

• Accordion
• Alert
• Avatar
• Badge
• Button
• Card
• Checkbox
• Dialog
• DropdownMenu
• Input
• Label
• LoadingSpinner
• Progress
• RadioGroup
• Select
• Separator
• Sheet
• Sidebar
• Skeleton
• Slider
• Switch
• Table
• Tabs
• Textarea
• Toast