Aurora Design System - Components Library

⚠️ Personal Project Notice

This library is designed for my personal projects and is not intended for public use. It is strongly discouraged to download or use this library as-is in your own projects. Feel free to use it as inspiration or reference, but no support or maintenance is guaranteed.

A React component library for the Aurora Design System, built with TypeScript and Storybook.

Installation

yarn add @aurora-ds/components

Peer Dependencies

yarn add @aurora-ds/theme react react-dom

Usage

Wrap your application with the ThemeProvider from @aurora-ds/theme:

import { ThemeProvider } from '@aurora-ds/theme';
import { Button, Text, Card, Stack } from '@aurora-ds/components';

function App() {
  return (
    <ThemeProvider>
      <Card padding={'md'} gap={'sm'}>
        <Text variant={'h2'}>Welcome</Text>
        <Text variant={'p'}>This is a card with Aurora components.</Text>
        <Stack direction={'row'} gap={'sm'}>
          <Button variant={'contained'}>Primary</Button>
          <Button variant={'outlined'}>Secondary</Button>
        </Stack>
      </Card>
    </ThemeProvider>
  );
}

Available Components

| Component | Description | |-----------|-------------| | Accordion | Collapsible container to show/hide content | | Button | Button with variants (contained, outlined, text), icons, and states | | IconButton | Icon-only button component | | Text | Typography component with semantic HTML tags (h1-h6, p, span, label) | | Stack | Flexbox container for horizontal/vertical layouts | | Card | Container with background, border radius, and shadow | | Chip | Compact element for tags, labels, or status indicators | | Icon | Icon wrapper component |

License

MIT