@anyauth/design-system

Shared design system for all AnyAuth projects. This package contains theme tokens, CSS variables, and shadcn/ui components used across:

• anyauth-docs (Fumadocs documentation site)
• anyauth-homepage (Hono worker)
• anyauth-dashboard (Astro dashboard)
• anyauth (API monorepo)

Installation

npm install @anyauth/design-system

Usage

Import Styles

// Import the complete design system
import '@anyauth/design-system/styles';

// Or import specific parts
import '@anyauth/design-system/theme';  // Just theme variables

Use Components

import { Button, Card, Badge } from '@anyauth/design-system';

function MyComponent() {
  return (
    <Card>
      <Button>Click me</Button>
      <Badge>New</Badge>
    </Card>
  );
}

Use Utilities

import { cn } from '@anyauth/design-system';

// Combine className with conditional classes
const className = cn('base-class', condition && 'conditional-class');

Theme Variables

The design system provides CSS custom properties for theming:

/* Light mode */
--background: 0 0% 96%;
--foreground: 0 0% 3.9%;
--primary: 0 0% 9%;
/* ... and more */

/* Dark mode (automatically applied with .dark class) */
--background: 0 0% 7.04%;
--foreground: 0 0% 92%;
--primary: 0 0% 98%;
/* ... and more */

Typography

Inter font is the standard font family across all projects:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Development

This package is automatically built and published from the anyauth-docs repository, which serves as the source of truth for all design decisions.

Building Locally

npm run build

Publishing

Handled automatically via GitHub Actions when anyauth-docs is updated.

License

MIT