Design System Component Library

A beautiful, production-ready React component library with SCSS theme system and Ant Design integration.

Features

• 🎨 Beautiful Design: Apple-level design aesthetics with attention to detail
• 🌙 Dark/Light Mode: Built-in theme switching with CSS variables
• 📱 Responsive: Mobile-first design with proper breakpoints
• ♿ Accessible: ARIA compliant components with keyboard navigation
• 🎯 TypeScript: Full TypeScript support with proper type definitions
• 📚 Storybook: Interactive component documentation
• 🎭 Ant Design: Integrated with Ant Design for advanced components like Tables

Installation

npm install @aistra/design-system

Peer Dependencies

Make sure you have the required peer dependencies installed:

npm install react react-dom

Usage

Basic Setup

import React from 'react';
import { Button, Card, Input } from '@aistra/design-system';
import '@aistra/design-system/styles';

function App() {
  return (
    <Card>
      <Input label="Email" placeholder="Enter your email..." />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Theme Setup

The library uses CSS variables for theming. Include the styles and set up theme switching:

import React, { useState, useEffect } from 'react';
import { ThemeToggle } from '@aistra/design-system';
import '@aistra/design-system/styles';

function App() {
  const [theme, setTheme] = useState<'light' | 'dark'>('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div>
      <ThemeToggle theme={theme} onThemeChange={setTheme} />
      {/* Your app content */}
    </div>
  );
}

Ant Design Integration

For components that use Ant Design (like Table), wrap your app with ConfigProvider:

import React from 'react';
import { ConfigProvider, theme } from 'antd';
import { Table } from '@aistra/design-system';

function App() {
  const antdTheme = {
    token: {
      colorPrimary: '#009a47',
      borderRadius: 6,
      fontFamily: '"Plus Jakarta Sans", sans-serif',
    },
    algorithm: theme.defaultAlgorithm,
  };

  return (
    <ConfigProvider theme={antdTheme}>
      <Table columns={columns} data={data} />
    </ConfigProvider>
  );
}

Components

Basic Components

• Button: Various styles and states with icon support
• Input: Form inputs with validation and icons
• Card: Flexible container with header/footer options
• Badge: Status indicators and labels
• Radio/RadioGroup: Radio button controls

Advanced Components

• Table: Feature-rich data table powered by Ant Design
• StatusBadge: Specialized status indicators with dropdown
• Toast: Notification system with actions
• Typography: Comprehensive text styling system

Utility Components

• ThemeToggle: Dark/light mode switcher

Styling

The library uses SCSS with CSS variables for theming. You can customize the theme by overriding CSS variables:

:root {
  --Colors-PRIMARY-GREEN-500: #your-primary-color;
  --Colors-SECONDARY-BLUE-500: #your-secondary-color;
  /* ... other variables */
}

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Start Storybook
npm run storybook

# Build library
npm run build:lib

# Build demo
npm run build:demo

TypeScript

The library is built with TypeScript and includes full type definitions. All components export their prop types:

import type { ButtonProps, CardProps } from '@aistra/design-system';

Browser Support

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

License

MIT © Your Organization