@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

``bash
npm install @xcelsior/design-system
`

Usage

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

function App() {
return (



);
}
`

Components

$3

Generic button component with multiple variants and states.

$3

Typography component for consistent text styling.

$3

Form input component with validation support.

$3

Dropdown selection component.

$3

Date selection component with calendar.

Development

`bash


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:

`bash
npm run storybook
`

Theming

The design system uses CSS custom properties for theming:

`css
: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