@anyauth/design

Shared design system for AnyAuth Astro projects. Includes shadcn/ui components, Tailwind CSS v4 with OKLCH color tokens, and Cloudflare utilities.

Installation

This package is part of the AnyAuth monorepo and located at anyauth-docs/package-manager/anyauth-design.

Features

• 56+ shadcn/ui React components
• Tailwind CSS v4 with OKLCH color system
• Cloudflare Workers utilities
• Type-safe utilities and helpers
• Brand assets and icons

Usage in Astro

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

<Card client:load>
  <Button client:load>Click me</Button>
  <Badge client:load>New</Badge>
</Card>

Importing Styles

// In your Astro layout or global styles
import '@anyauth/design/styles';

// Or import specific parts
import '@anyauth/design/theme'; // Just theme variables
import '@anyauth/design/base'; // Base styles

Utilities

import { cn } from '@anyauth/design/utils';
import {
  fetchServiceBinding,
  isCloudflareWorker,
} from '@anyauth/design/cloudflare-utils';
import { logger } from '@anyauth/design/logger';

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

// Cloudflare Workers helpers
if (isCloudflareWorker()) {
  const response = await fetchServiceBinding(env.API, '/endpoint');
}

// Structured logging
logger.info('User logged in', { userId: user.id });

Brand Assets

Icons are located in assets/icons/:

• favicon.ico - Multi-size favicon
• apple-touch-icon.png - iOS home screen icon
• PWA icons (192x192 and 512x512)

Development

# Build the package
pnpm build

# Type check
pnpm type-check

License

MIT