A React component library built with Tailwind CSS, Class Variance Authority, and TypeScript. Provides accessible, themeable components with a powerful variant system and full type safety.

• Variant System — Type-safe variants powered by CVA (Class Variance Authority)
• Themeable — Context-based theme and variant providers for global customization
• Polymorphic Components — Render as any HTML element with the as prop
• Accessible — ARIA compliant with keyboard navigation hooks
• TypeScript First — Full type coverage with IntelliSense support
• Tree Shakeable — ESM and CJS builds, import only what you need
• Tested — Unit tests with Vitest, accessibility tests with jest-axe

npm install @astra-ui-lib/core
# or
pnpm add @astra-ui-lib/core

import { Badge, Text, Spinner } from '@astra-ui-lib/core';

function App() {
  return (
    <div>
      <Text variant="h1" size="2xl" weight="bold">
        Hello Astra UI
      </Text>
      <Badge color="purple" tone="solid" size="md">
        New
      </Badge>
      <Spinner size="md" color="gray" />
    </div>
  );
}

Wrap your app with ThemeProvider to customize component styles globally:

import { ThemeProvider } from '@astra-ui-lib/core';

const theme = {
  components: {
    Badge: { /* override base styles */ },
    Text: { /* override base styles */ },
  },
};

function App() {
  return (
    <ThemeProvider value={theme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

• React 18 — Component architecture with hooks and forwardRef
• Tailwind CSS — Utility-first styling with design tokens
• CVA — Class Variance Authority for type-safe variant management
• Turborepo — Monorepo build orchestration
• Rollup — Library bundling (CJS + ESM output)
• Vitest — Unit and accessibility testing
• Changesets — Automated versioning and npm publishing

astra-ui/
├── packages/core/
│   └── src/
│       ├── components/    # Badge, Text, Spinner
│       ├── hooks/         # Focus trap, keyboard navigation, context utilities
│       ├── animations/    # useFade hook
│       ├── theme/         # Theme/variant contexts, CVA styles
│       ├── types/         # Polymorphic component types
│       ├── utils/         # ID generation, slug, layout effects
│       └── helpers/       # Arrow positioning, text normalization
├── .changeset/            # Version management
└── .github/workflows/     # CI/CD release pipeline

git clone https://github.com/mrwick1/astra-ui.git
cd astra-ui
pnpm install
pnpm build          # Build all packages
pnpm test           # Run tests
pnpm dev            # Watch mode

See CONTRIBUTING.md for guidelines on adding new components.

MIT