@trycompai/design-system 1.0.0

package/README.md

@@ -0,0 +1,110 @@
+# @trycompai/design-system
+
+A shadcn-style design system with Tailwind CSS v4. Ships raw TypeScript/TSX source files that your app compiles directly.
+
+## Installation
+
+```bash
+npm install @trycompai/design-system
+# or
+bun add @trycompai/design-system
+```
+
+## Setup in Next.js
+
+### 1. Configure Tailwind CSS
+
+Add the design system to your `tailwind.config.ts` content paths:
+
+```ts
+// tailwind.config.ts
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    // Include the design system components
+    './node_modules/@trycompai/design-system/src/**/*.{js,ts,jsx,tsx}',
+  ],
+  // ... rest of your config
+};
+
+export default config;
+```
+
+### 2. Import Global Styles
+
+Import the design system's CSS in your root layout:
+
+```tsx
+// app/layout.tsx
+import '@trycompai/design-system/globals.css';
+// or import alongside your own globals
+import './globals.css';
+```
+
+### 3. Configure Next.js to Transpile
+
+Add the package to `transpilePackages` in your `next.config.ts`:
+
+```ts
+// next.config.ts
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@trycompai/design-system'],
+};
+
+export default nextConfig;
+```
+
+## Usage
+
+Import components directly:
+
+```tsx
+import { Button, Card, CardHeader, CardContent } from '@trycompai/design-system';
+
+export function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>Hello</CardHeader>
+      <CardContent>
+        <Button variant="outline">Click me</Button>
+      </CardContent>
+    </Card>
+  );
+}
+```
+
+## Available Exports
+
+| Export                                     | Description                        |
+| ------------------------------------------ | ---------------------------------- |
+| `@trycompai/design-system`                 | All components                     |
+| `@trycompai/design-system/cn`              | `cn()` utility for merging classes |
+| `@trycompai/design-system/globals.css`     | Global CSS with theme variables    |
+| `@trycompai/design-system/tailwind.config` | Tailwind configuration             |
+
+## Components
+
+The design system includes:
+
+- **Layout**: `Container`, `Stack`, `Grid`, `PageLayout`, `Section`
+- **Typography**: `Heading`, `Text`
+- **Forms**: `Button`, `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroup`, `Switch`, `Label`, `Field`
+- **Data Display**: `Card`, `Badge`, `Avatar`, `Table`, `Progress`
+- **Feedback**: `Alert`, `AlertDialog`, `Dialog`, `Sheet`, `Drawer`, `Tooltip`, `Popover`
+- **Navigation**: `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `DropdownMenu`
+- **Utility**: `Separator`, `Skeleton`, `Spinner`, `ScrollArea`, `Collapsible`
+
+## Design Principles
+
+- **No className prop**: Components use variants and props, not className overrides
+- **Semantic tokens**: Uses CSS variables for consistent theming
+- **Dark mode**: Full dark mode support via `next-themes`
+- **Accessible**: Built on Radix UI primitives
+
+## License
+
+MIT

package/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-vega",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "@trycompai/design-system",
+  "version": "1.0.0",
+  "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
+  "type": "module",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./components/*": {
+      "types": "./src/components/ui/*.tsx",
+      "import": "./src/components/ui/*.tsx",
+      "default": "./src/components/ui/*.tsx"
+    },
+    "./cn": {
+      "types": "./lib/utils.ts",
+      "import": "./lib/utils.ts",
+      "default": "./lib/utils.ts"
+    },
+    "./globals.css": "./src/styles/globals.css",
+    "./tailwind.config": {
+      "types": "./tailwind.config.ts",
+      "import": "./tailwind.config.ts",
+      "default": "./tailwind.config.ts"
+    },
+    "./postcss.config": "./postcss.config.mjs"
+  },
+  "files": [
+    "src",
+    "lib",
+    "hooks",
+    "tailwind.config.ts",
+    "postcss.config.mjs",
+    "components.json",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/trycompai/comp.git",
+    "directory": "packages/ui-shadcn"
+  },
+  "license": "MIT",
+  "keywords": [
+    "design-system",
+    "components",
+    "react",
+    "tailwindcss",
+    "shadcn",
+    "ui"
+  ],
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.562.0",
+    "next-themes": "^0.4.6",
+    "react-day-picker": "^9.13.0",
+    "react-resizable-panels": "^4.2.0",
+    "recharts": "2.15.4",
+    "shadcn": "^3.6.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.10",
+    "@types/node": "^22.18.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "postcss": "^8.5.4",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.8",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/src/components/ui/accordion.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+
+function Accordion({ ...props }: Omit<AccordionPrimitive.Root.Props, 'className'>) {
+  return (
+    <AccordionPrimitive.Root data-slot="accordion" className="flex w-full flex-col" {...props} />
+  );
+}
+
+function AccordionItem({ ...props }: Omit<AccordionPrimitive.Item.Props, 'className'>) {
+  return (
+    <AccordionPrimitive.Item data-slot="accordion-item" className="not-last:border-b" {...props} />
+  );
+}
+
+function AccordionTrigger({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.Trigger.Props, 'className'>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className="focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  children,
+  ...props
+}: Omit<AccordionPrimitive.Panel.Props, 'className'>) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden"
+      {...props}
+    >
+      <div className="pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4">
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,161 @@
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './button';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  variant = 'default',
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, 'className'>) {
+  return <Button data-slot="alert-dialog-action" variant={variant} {...props} />;
+}
+
+function AlertDialogCancel({
+  variant = 'secondary',
+  size = 'default',
+  ...props
+}: Omit<AlertDialogPrimitive.Close.Props, 'className'> &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

package/src/components/ui/alert.tsx

@@ -0,0 +1,109 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import * as React from 'react';
+
+const alertVariants = cva(
+  'grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*="size-"])]:size-4 w-full relative group/alert',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        info: 'border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-800 dark:bg-blue-950/50 dark:text-blue-200 *:data-[slot=alert-description]:text-blue-700 dark:*:data-[slot=alert-description]:text-blue-300',
+        success:
+          'border-green-200 bg-green-50 text-green-800 dark:border-green-800 dark:bg-green-950/50 dark:text-green-200 *:data-[slot=alert-description]:text-green-700 dark:*:data-[slot=alert-description]:text-green-300',
+        warning:
+          'border-yellow-200 bg-yellow-50 text-yellow-800 dark:border-yellow-800 dark:bg-yellow-950/50 dark:text-yellow-200 *:data-[slot=alert-description]:text-yellow-700 dark:*:data-[slot=alert-description]:text-yellow-300',
+        destructive:
+          'border-red-200 bg-red-50 text-red-800 dark:border-red-800 dark:bg-red-950/50 dark:text-red-200 *:data-[slot=alert-description]:text-red-700 dark:*:data-[slot=alert-description]:text-red-300',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const variantIcons = {
+  default: null,
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  destructive: AlertCircle,
+} as const;
+
+type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
+
+interface AlertProps
+  extends
+    Omit<React.ComponentProps<'div'>, 'className' | 'title'>,
+    VariantProps<typeof alertVariants> {
+  /** Alert title - renders AlertTitle component */
+  title?: React.ReactNode;
+  /** Alert description - renders AlertDescription component */
+  description?: React.ReactNode;
+  /** Custom icon - if not provided, uses default icon for the variant */
+  icon?: React.ReactNode;
+  /** Hide the default variant icon */
+  hideIcon?: boolean;
+}
+
+function Alert({
+  variant = 'default',
+  title,
+  description,
+  icon,
+  hideIcon,
+  children,
+  ...props
+}: AlertProps) {
+  // Determine the icon to show
+  const showIcon = !hideIcon && (icon !== undefined || variant !== 'default');
+  const IconComponent = variantIcons[variant as AlertVariant];
+  const renderedIcon = icon ?? (IconComponent ? <IconComponent /> : null);
+
+  // If title/description are provided, render the simple API
+  if (title || description) {
+    return (
+      <div data-slot="alert" role="alert" className={alertVariants({ variant })} {...props}>
+        {showIcon && renderedIcon}
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {description && <AlertDescription>{description}</AlertDescription>}
+        {children}
+      </div>
+    );
+  }
+
+  // Otherwise, render children (compound component pattern)
+  return (
+    <div data-slot="alert" role="alert" className={alertVariants({ variant })} {...props}>
+      {showIcon && renderedIcon}
+      {children}
+    </div>
+  );
+}
+
+function AlertTitle({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className="font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3"
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className="text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3"
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
+  return <div data-slot="alert-action" className="absolute top-2.5 right-3" {...props} />;
+}
+
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function AspectRatio({
+  ratio,
+  ...props
+}: Omit<React.ComponentProps<'div'>, 'className'> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          '--ratio': ratio,
+        } as React.CSSProperties
+      }
+      className="relative aspect-(--ratio)"
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };