Aurora Design System - Components Library

⚠️ Personal Project Notice

This library is designed for my personal projects and is not intended for public use. Feel free to use it as inspiration or reference, but no support or maintenance is guaranteed.

A React component library built on top of @aurora-ds/theme v4, shipping ready-to-use light and dark themes.

🚧 Reset in progress — The component catalog has been wiped and is being rebuilt from scratch. Currently only the themes are exported. Components will be added back progressively.

Installation

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

Quick Start

import { ThemeProvider } from '@aurora-ds/theme'
import { lightTheme } from '@aurora-ds/components'

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      {/* your app */}
    </ThemeProvider>
  )
}

A darkTheme is also exported and ready to use:

import { darkTheme } from '@aurora-ds/components'

🎨 Custom Theme

You can build your own theme by reusing the exported palettes/values or by composing a brand new one with createTheme from @aurora-ds/theme. See src/theme/themes/lightTheme.ts for a reference.

import { createTheme } from '@aurora-ds/theme'
import { lightTheme, type Theme } from '@aurora-ds/components'

const myTheme: Theme = createTheme({
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primaryMain: '#ff5722',
  },
})

📦 Available Tokens

The themes include the following token categories:

• colors — full palette (surface, text, primary, secondary, success, warning, error, info, border, link, skeleton, …)
• spacing, radius, shadows
• fontSize, fontWeight, lineHeight
• transition, opacity, zIndex, breakpoints

See the source under src/theme/ for the exact values.

🧩 Available Components

Actions

| Component | Description | |-----------|-------------| | Button | Clickable button with variants (contained, outlined, text, …), semantic colors, sizes, loading state and optional start/end icons | | IconButton | Square icon-only button — requires ariaLabel since there is no visible text | | Link | Accessible anchor with underline control, external (new tab) and disabled modes, and optional start/end icons |

Data Display

| Component | Description | |-----------|-------------| | Badge | Compact label/indicator with filled, outlined, subtle variants, semantic colors, sizes, icons and a dot mode | | InfoBubble | Read-only info icon that reveals a tooltip on hover/focus | | Table | Accessible compound data table (Table.Head, Table.Body, Table.Row, Table.HeaderCell, Table.Cell) with <colgroup>-driven column widths, striping, hover, sticky header, loading skeletons and empty state |

Forms

| Component | Description | |-----------|-------------| | Form | Thin <form> wrapper with accessible aria-label / aria-labelledby support | | TextField | Text input with label, helper text, status (default / error / success), size, start icon and end action slot | | Select | Accessible combobox (controlled & uncontrolled) with label, helper text, status and size | | DatePicker | Accessible date field with a text input trigger and a focus-trapped calendar popover (WAI-ARIA date grid) — minDate/maxDate, locale, controlled & uncontrolled | | Checkbox | Checkbox input with label, helper text, status and indeterminate state | | Switch | Toggle switch input with label, size and color |

Foundation

| Component | Description | |-----------|-------------| | Text | Polymorphic text element — renders h1–h6, p, span, label, etc. with full theme token support (color, size, weight, truncation, …) | | Icon | Renders any SVG component at a theme fontSize size with optional stroke color, fill and background | | Skeleton | Block-level loading placeholder — four shapes (text, circular, rectangular, rounded) with shimmer animation | | SvgImage | Renders an SVG image component with accessible aria-label / aria-labelledby / aria-describedby | | LoaderScreen | Full-screen centered loading indicator with an accessible label | | ErrorBoundary | React error boundary with a customisable fallback render prop and an onError monitoring hook |

Layout

| Component | Description | |-----------|-------------| | Box | General-purpose <div> with a comprehensive set of style props (spacing, flexbox, grid, color, radius, shadow, …) | | Stack | Alias of Box pre-set for flex column/row stacking — all Box props apply | | Grid | CSS Grid container extending Box with columns, rows, autoFlow, placeItems and related shorthand props | | Card | Elevated or outlined surface extending Box with variant (elevated / outlined) and default padding | | Separator | Horizontal or vertical divider with optional centered label, color, thickness and spacing | | Article | Semantic <article> with all Box style props | | Aside | Semantic <aside> with all Box style props | | Footer | Semantic <footer> with all Box style props | | Header | Semantic <header> with all Box style props | | Main | Semantic <main> with all Box style props | | Nav | Semantic <nav> with all Box style props | | Section | Semantic <section> with all Box style props |

Navigation

| Component | Description | |-----------|-------------| | Breadcrumb | WAI-ARIA breadcrumb (Breadcrumb.Item) with configurable separator and ariaLabel | | Tabs | WAI-ARIA tab interface (Tabs.List, Tabs.Tab, Tabs.Panel) — controlled & uncontrolled, full keyboard navigation | | Drawer | Collapsible side-navigation panel — permanent (inline, pushes content) or temporary (portal overlay with backdrop) | | Pagination | Accessible controlled pagination — collapses long ranges with ellipses (siblingCount, boundaryCount), optional prev/next & first/last controls, aria-current on the active page |

Overlay

| Component | Description | |-----------|-------------| | Alert | Feedback banner with semantic variants (default, info, success, warning, error) and live-region ARIA roles | | Dialog | Modal dialog (Dialog.Header, Dialog.Body, Dialog.Footer) with focus trap, Escape-to-close and optional backdrop click | | Menu | Floating role="menu" (Menu.Group, Menu.Item) anchored to a reference element — supports checkbox (menuitemcheckbox) & radio (menuitemradio) items, nested submenus (hover/click/ArrowRight), optional group titles, configurable closeOnClick, and a background scroll lock that keeps it anchored while open | | Tooltip | Hover/focus tooltip with placement, arrow and mobile-aware behaviour | | Backdrop | Semi-transparent overlay used internally by Dialog and Drawer — can also be used standalone |

📁 Component Self-Contained Structure (target)

Each component folder contains all its utils locally, making copy-paste to another project straightforward:

src/components/<category>/<component>/
├── utils/                  # Component-specific utilities (co-located)
│   └── myUtil.utils.ts
├── Component.tsx
├── Component.props.ts
├── Component.styles.ts
└── index.ts

Commands

• yarn start — Start Storybook dev server
• yarn build — Build the library
• yarn build-storybook — Build Storybook for deployment
• yarn lint — Run ESLint
• yarn test — Run tests (Vitest)

License

MIT