UI Components

{
  "$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 Primitive (accessibility, keyboard nav, ARIA)
    |
    v
CVA Variants (variant="default" | "destructive" | "outline", size="sm" | "default" | "lg")
    |
    v
Tailwind Classes (bg-primary, text-sm, h-10, px-6, ...)
    |
    v
cn() merge (className prop overrides + tailwind-merge conflict resolution)

/**
 * @nextsaas/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 './input'
export * from './label'
export * from './select'
export * from './textarea'

// Layout Components
export * from './card'
export * from './sheet'

// Feedback Components
export * from './badge'
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'

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

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

// 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 '@nextsaas/utils'

const buttonVariants = cva(
  'inline-flex items-center justify-center whitespace-nowrap rounded 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-4 [&_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 '@nextsaas/ui/boilerplate'

// Primary action
<Button>Save Changes</Button>

// Destructive with size
<Button variant="destructive" size="sm">Delete Account</Button>

// As a link (renders <a> instead of <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-xl border bg-card text-card-foreground shadow',
      className
    )}
    {...props}
  />
))
Card.displayName = 'Card'

import { Card, CardHeader, CardTitle, CardContent } from '@nextsaas/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 page sections (hero, team, values, timeline)
├── ai/             # AI chat interface (chat, messages, input, RAG/LLM)
├── auth/           # Authentication (login forms, user button)
├── blog/           # Blog UI (sidebar, tags, like/share buttons)
├── contact/        # Contact page (hero, info, form)
├── credits/        # Credit system (low balance banner, usage counter)
├── dashboard/      # Dashboard UI (sidebar, header, analytics, subscriptions)
├── demo/           # Demo mode (nav item, demo provider)
├── forms/          # Form components (contact form)
├── home/           # Landing page (hero, features, newsletter)
├── layout/         # App layout (navbar, footer)
├── modals/         # Modal dialogs (credits exhausted)
├── payments/       # Payment UI (plan change dialog, pricing error)
├── shared/         # Cross-cutting (hero background)
├── test/           # Test utilities (no-clerk script, config error)
└── upload/         # File upload (drop zone, preview, hooks)