✅ <Form /> — submit handling + client validation plumbing
✅ <Field /> — text/email/password/number/textarea/select/date/time/file/checkbox/radio/switch
✅ <MultiSelect /> — searchable, checkbox-driven multi select dropdown
✅ <Button /> helpers
🎯 Works with your Tailwind tokens (e.g., bg-primary, text-foreground, border-border)
🧪 Zod integration: pass schemaName to <Form /> and expose a schema as window[schemaName]

Installation

pnpm add @wrnexus/astro
# or
npm i @wrnexus/astro

Install All Required packages

npm install tailwind-merge clsx class-variance-authority  @tailwindcss/forms zod --save-dev

Theme Use

@import "@wrnexus/astro/style.css";

@import "tailwindcss";

@theme {
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-tertiary: hsl(var(--tertiary));
    --color-tertiary-foreground: hsl(var(--tertiary-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-info: hsl(var(--info));
    --color-info-foreground: hsl(var(--info-foreground));
    --color-success: hsl(var(--success));
    --color-success-foreground: hsl(var(--success-foreground));
    --color-warning: hsl(var(--warning));
    --color-warning-foreground: hsl(var(--warning-foreground));
    --color-danger: hsl(var(--danger));
    --color-danger-foreground: hsl(var(--danger-foreground));
    --color-neutral: hsl(var(--neutral));
    --color-neutral-foreground: hsl(var(--neutral-foreground));
}