UI-Komponenten

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {}
}

Radix-UI-Primitiv (Barrierefreiheit, Tastaturnavigation, ARIA)
    |
    v
CVA-Varianten (variant="default" | "destructive" | "outline", size="sm" | "default" | "lg")
    |
    v
Tailwind-Klassen (bg-primary, text-sm, h-10, px-6, ...)
    |
    v
cn()-Merge (className-Prop-Überschreibungen + tailwind-merge-Konfliktauflösung)

/**
 * @nextsaasai/ui - Shared Components
 *
 * Components available to ALL applications in the monorepo.
 * These are foundational UI elements used across both boilerplate and marketing apps.
 *
 * @scope shared
 */

// Core Form Components
export * from './button'
export * from './checkbox'
export * from './input'
export * from './label'
export * from './radio-group'
export * from './select'
export * from './slider'
export * from './switch'
export * from './textarea'
export * from './toggle'
export * from './toggle-group'

// Layout Components
export * from './accordion'
export * from './aspect-ratio'
export * from './card'
export * from './collapsible'
export * from './separator'
export * from './sheet'
export * from './tabs'
export * from './table'

// Navigation Components
export * from './breadcrumb'
export * from './pagination'
export * from './scroll-area'

// Data Display Components
export * from './avatar'
export * from './badge'
export * from './typography'

// Overlay Components
export * from './popover'
export * from './tooltip'

// Feedback Components
export * from './sonner'

// Theme Components
export * from './theme-toggle'

// Internationalization Components
export * from './flag-icon'

// ============================================================================

// Alert Components (error messages, notifications in app)
export * from './alert'
export * from './alert-dialog'

// Form Utilities (react-hook-form integration)
export * from './form'

// Modal Components (app modals, confirmations)
export * from './dialog'
export * from './drawer'

// Navigation Components (user menu in dashboard)
export * from './dropdown-menu'
export * from './context-menu'
export * from './menubar'
export * from './command'

// Progress & Loading Components
export * from './progress'
export * from './skeleton'

// Overlay Components (popovers, tooltips)
export * from './popover'

// Data Display Components
export * from './calendar'
export * from './carousel'
export * from './hover-card'
export * from './resizable'

// Input Components
export * from './input-otp'

// Toast Notifications (in-app feedback)
export * from './toast'
export * from './use-toast'
// Note: toaster.tsx available but not exported to avoid conflict with sonner

import * as React from 'react'
import { Slot } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@nextsaasai/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        default: 'bg-primary text-background dark:text-foreground/90 hover:text-white',
        destructive: 'bg-red-600 text-white hover:bg-red-700 dark:bg-red-600 dark:hover:bg-red-700',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/90',
        accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
        uncolored: 'bg-card text-card-muted-foreground hover:text-card-foreground',
        outline: 'border hover:border-foreground/75',
        ghost: 'border border-transparent bg-primary bg-clip-text text-transparent hover:border-foreground/75 hover:text-foreground',
        link: 'bg-primary bg-clip-text text-transparent underline-offset-8 hover:text-foreground inline flex-none !px-0 !h-auto !w-auto',
      },
      size: {
        sm: 'h-9 px-5 text-xs',
        default: 'h-10 px-6 text-sm',
        md: 'h-11 px-7 text-base',
        lg: 'h-12 px-8 text-base',
        xl: 'h-14 px-11 text-lg',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'button'

    // Ensure data-testid is passed through properly
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = 'Button'

export { Button, buttonVariants }

import { Button } from '@nextsaasai/ui/boilerplate'

// Primäre Aktion
<Button>Save Changes</Button>

// Destructive mit Größe
<Button variant="destructive" size="sm">Delete Account</Button>

// Als Link (rendert <a> statt <button>)
<Button asChild variant="link">
  <a href="/docs">Read the Docs</a>
</Button>

// Icon-Button
<Button variant="ghost" size="icon">
  <SearchIcon />
</Button>

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      'rounded-md border border-border bg-card text-card-foreground',
      className
    )}
    {...props}
  />
))
Card.displayName = 'Card'

import { Card, CardHeader, CardTitle, CardContent } from '@nextsaasai/ui/boilerplate'

<Card>
  <CardHeader>
    <CardTitle>Monthly Usage</CardTitle>
  </CardHeader>
  <CardContent>
    <p>You have used 1,234 of 5,000 credits this month.</p>
  </CardContent>
</Card>

src/components/
├── about/          # About-Seite (Hero, Team, Werte, Timeline)
├── ai/             # KI-Chat-Interface (Chat, Nachrichten, Eingabe, RAG/LLM)
├── auth/           # Authentifizierung (Login-Formulare, Benutzer-Button)
├── blog/           # Blog-UI (Seitenleiste, Tags, Like/Share-Buttons)
├── contact/        # Kontaktseite (Hero, Info, Formular)
├── credits/        # Credit-System (Niedrigstand-Banner, Nutzungszähler)
├── dashboard/      # Dashboard-UI (Seitenleiste, Header, Analytics, Abonnements)
├── demo/           # Demo-Modus (Nav-Item, Demo-Provider)
├── forms/          # Formular-Komponenten (Kontaktformular)
├── home/           # Landingpage (Hero, Features, Newsletter)
├── layout/         # App-Layout (Navbar, Footer)
├── modals/         # Modale Dialoge (Credits erschöpft)
├── payments/       # Zahlungs-UI (Plan-Wechsel-Dialog, Zahlungsfehler)
├── shared/         # Übergreifendes (Hero-Hintergrund)
├── test/           # Test-Utilities (No-Clerk-Script, Konfigurationsfehler)
└── upload/         # Datei-Upload (Drop-Zone, Vorschau, Hooks)