@xcelsior/design-system

A comprehensive design system package for Ausvie applications, built with React, TypeScript, Tailwind CSS, and Flowbite React.

Features

• Reusable Components: Button, Text, TextInput, Select, DatePicker, and more
• TypeScript Support: Full type safety and IntelliSense
• Tailwind CSS: Consistent styling with utility classes
• Flowbite React: Built on top of Flowbite components
• Storybook: Interactive component documentation
• Form Integration: Built-in support for react-hook-form
• Theming: Consistent color palette and design tokens

Installation

npm install @xcelsior/design-system

Usage

import { Button, Text, TextInput } from '@xcelsior/design-system';

function App() {
  return (
    <div>
      <Text type="lg" className="mb-4">
        Welcome to our design system
      </Text>
      <TextInput
        name="email"
        label="Email"
        placeholder="Enter your email"
        required
      />
      <Button 
        title="Submit" 
        color="primary" 
        onClick={() => console.log('Clicked!')}
      />
    </div>
  );
}

Components

Button

Generic button component with multiple variants and states.

Text

Typography component for consistent text styling.

TextInput

Form input component with validation support.

Select

Dropdown selection component.

DatePicker

Date selection component with calendar.

Development

# Start development
npm run dev

# Build package
npm run build

# Run Storybook
npm run storybook

# Type checking
npm run type-check

Storybook

View component documentation and examples:

npm run storybook

Theming

The design system uses CSS custom properties for theming:

:root {
  --color-primary: #0056A8;
  --color-secondary: #4DAAB2;
  --color-tertiary: #FF6B6B;
}

Contributing

1. Follow the existing component patterns
2. Add Storybook stories for new components
3. Include TypeScript types
4. Test components thoroughly
5. Update documentation