prisma · beseku · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026 · Mar 23, 2026
diff --git a/apps/eclipse/cli.json b/apps/eclipse/cli.json
diff --git a/apps/eclipse/components.json b/apps/eclipse/components.json
diff --git a/apps/eclipse/content/design-system/index.mdx b/apps/eclipse/content/design-system/index.mdx
@@ -1,19 +1,25 @@
 ---
-title: Introduction
+title: Getting Started
 description: Eclipse is Prisma's design system, providing a consistent visual language across all our documentation and products.
 ---
 
-import { EclipseShowcase } from '@/components/eclipse-showcase';
-
-Built with Tailwind CSS and design tokens imported directly from Figma, it ensures design consistency and makes it easy to build beautiful, accessible interfaces.
+Eclipse is a production-ready component library built on top of shadcn/ui and Tailwind CSS. It extends the shadcn/ui foundation with Prisma's design tokens, stricter accessibility defaults, and full TypeScript coverage — giving teams a consistent, type-safe starting point for building interfaces without reinventing primitives.
 
 ## Features
 
-- **Design Tokens from Figma**: All colors, spacing, typography, and other design tokens are synced from our Figma design files
-- **Dark Mode Support**: Full support for light and dark themes with automatic switching
-- **Tailwind CSS Integration**: Seamless integration with Tailwind CSS for rapid development
-- **Type-Safe**: TypeScript definitions for all components and tokens
-- **Accessible**: Built with accessibility in mind following WCAG guidelines
+- **Built on shadcn/ui** — Takes the unstyled, composable primitives from shadcn/ui and layers on Prisma's visual language, so you get a battle-tested component architecture with an opinionated design out of the box.
+- **Tailwind CSS native** — Every component is styled with Tailwind utility classes and driven by design tokens defined as CSS custom properties. No runtime CSS-in-JS, no style conflicts, just predictable output.
+- **Fully type-safe** — All components, props, and tokens ship with TypeScript definitions. Autocomplete works, invalid props fail at build time, and refactors are safe.
+- **Accessible by default** — Components are built on Radix UI primitives with correct ARIA attributes, keyboard navigation, and focus management baked in. Meets WCAG 2.1 AA as a baseline.
+- **Themeable** — Light and dark modes are supported through semantic token layers. Swap a handful of CSS variables to adapt Eclipse to any brand context.
+
+## Prerequisites
+
+Eclipse requires the following peer dependencies:
+
+- `react` and `react-dom` 18 or 19
+- `tailwindcss` v4
+- `@tailwindcss/postcss` v4
 
 ## Installation
 
@@ -23,7 +29,7 @@ pnpm add @prisma/eclipse
 
 ## Setup
 
-### 1. Configure PostCSS
+### Configure PostCSS
 
 Make sure you have the Tailwind v4 PostCSS plugin installed:
 
@@ -41,7 +47,7 @@ export default {
 };
 ```
 
-### 2. Import styles in your app global CSS
+### Import styles in your app global CSS
 
 Initialize Tailwind once in the consuming app, then import Eclipse styles:
 
@@ -50,7 +56,7 @@ Initialize Tailwind once in the consuming app, then import Eclipse styles:
 @import "@prisma/eclipse/styles/globals.css";
 ```
 
-### 3. Use components
+### Use components
 
 Import components from `@prisma/eclipse` in your app code:
 
@@ -62,217 +68,7 @@ export function App() {
 }
 ```
 
-### Notes
-
-- Keep Tailwind initialization at the app level (import `tailwindcss` once in the app entry stylesheet).
-- `@prisma/eclipse/styles/globals.css` includes Eclipse tokens/utilities and `@source` directives for Eclipse components.
-
-
-## Interactive Showcase
-
-<EclipseShowcase />
-
-## Using Components
-
-### Button Component
-
-```tsx
-import { Button } from "@prisma/eclipse";
-
-export function MyComponent() {
-  return (
-    <div className="space-x-4">
-      <Button variant="default">Default</Button>
-      <Button variant="ppg">Prisma Pulse & Accelerate</Button>
-      <Button variant="orm">Prisma ORM</Button>
-      <Button variant="destructive">Destructive</Button>
-    </div>
-  );
-}
-```
-
-### Button Variants
-
-- `default` - Standard button style
-- `ppg` - Prisma Pulse & Accelerate brand colors (teal/cyan)
-- `orm` - Prisma ORM brand colors (purple/blue)
-- `destructive` - Error/danger actions (red)
-- `outline` - Outlined button style
-- `secondary` - Secondary action style
-- `ghost` - Minimal button style
-- `link` - Link-styled button
-
-### Button Sizes
-
-- `sm` - Small button
-- `default` - Standard button size
-- `lg` - Large button
-
-## Color System
-
-Eclipse uses a semantic color system with support for both light and dark modes.
-
-### Background Colors
-
-```tsx
-<div className="bg-background-default">Default background</div>
-<div className="bg-background-neutral">Neutral background</div>
-<div className="bg-background-ppg">PPG background</div>
-<div className="bg-background-orm">ORM background</div>
-<div className="bg-background-error">Error background</div>
-<div className="bg-background-success">Success background</div>
-<div className="bg-background-warning">Warning background</div>
-```
-
-### Foreground Colors
-
-```tsx
-<span className="text-foreground-neutral">Neutral text</span>
-<span className="text-foreground-ppg">PPG text</span>
-<span className="text-foreground-orm">ORM text</span>
-<span className="text-foreground-error">Error text</span>
-<span className="text-foreground-success">Success text</span>
-<span className="text-foreground-warning">Warning text</span>
-```
-
-### Color Variants
-
-Each color has multiple variants for different use cases:
-
-- `default` - Base color
-- `strong` - Stronger/darker variant
-- `weak` - Lighter/softer variant
-- `reverse` - Contrast color for use on colored backgrounds
-- `reverse-weak` - Lighter reverse color
-
-Example:
-```tsx
-<div className="bg-background-ppg">
-  <span className="text-foreground-ppg-reverse">Text on PPG background</span>
-</div>
-```
-
-## Typography
-
-### Font Sizes
-
-```tsx
-<p className="text-2xs">2XS - 11px</p>
-<p className="text-xs">XS - 12px</p>
-<p className="text-sm">SM - 14px</p>
-<p className="text-md">MD - 16px (Base)</p>
-<p className="text-lg">LG - 18px</p>
-<p className="text-xl">XL - 20px</p>
-<p className="text-2xl">2XL - 24px</p>
-<p className="text-3xl">3XL - 30px</p>
-```
-
-### Font Weights
-
-```tsx
-<p className="font-normal">Normal (400)</p>
-<p className="font-medium">Medium (500)</p>
-<p className="font-semibold">Semibold (600)</p>
-<p className="font-bold">Bold (750)</p>
-<p className="font-ultra-bold">Ultra Bold (900)</p>
-```
-
-## Spacing
-
-Eclipse provides a comprehensive spacing system for margins and padding.
-
-### Margin Scale
-
-```tsx
-<div className="m-margin-4xs">4xs - 4px</div>
-<div className="m-margin-3xs">3xs - 8px</div>
-<div className="m-margin-2xs">2xs - 12px</div>
-<div className="m-margin-xs">xs - 16px</div>
-<div className="m-margin-sm">sm - 20px</div>
-<div className="m-margin-md">md - 24px</div>
-<div className="m-margin-lg">lg - 28px</div>
-<div className="m-margin-xl">xl - 32px</div>
-<div className="m-margin-4xl">4xl - 48px</div>
-```
-
-### Padding Utilities
-
-```tsx
-<div className="p-6">Container padding</div>
-<div className="p-padding-inline-element-lg">Element padding</div>
-```
-
-## Border Radius
-
-```tsx
-<div className="rounded-square-low">Low radius (3px)</div>
-<div className="rounded-square">Square radius (6px)</div>
-<div className="rounded-square-high">High radius (12px)</div>
-<div className="rounded-circle">Circular</div>
-```
-
-## Dark Mode
-
-Eclipse supports manual dark mode toggling. Apply the `dark` class to the `<html>` element:
-
-```tsx
-import { useEffect, useState } from "react";
-
-function App() {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", isDark);
-  }, [isDark]);
-
-  return (
-    <button onClick={() => setIsDark(!isDark)}>
-      Toggle {isDark ? "Light" : "Dark"} Mode
-    </button>
-  );
-}
-```
-
-## Design Tokens
-
-Access design tokens programmatically:
-
-```tsx
-import { tokens } from "@prisma/eclipse/tokens";
-
-console.log(tokens.borderRadius.square); // 6
-console.log(tokens.typography.fontSize.md); // 16
-console.log(tokens.margin.md); // 24
-```
-
-## Utilities
-
-### Class Name Utility
-
-Eclipse includes a `cn` utility for merging class names with Tailwind class deduplication:
-
-```tsx
-import { cn } from "@prisma/eclipse/lib/cn";
-
-function MyComponent({ className, isActive }) {
-  return (
-    <div className={cn(
-      "bg-background-default",
-      isActive && "bg-background-ppg",
-      className
-    )}>
-      Content
-    </div>
-  );
-}
-```
-
-## Resources
-
-- [GitHub Repository](https://github.com/prisma/prisma-docs)
-- [Figma Design Files](https://figma.com) (Internal)
-- [Tailwind CSS Documentation](https://tailwindcss.com)
-
-## Support
+## Notes
 
-For questions or issues with the Eclipse Design System, please reach out to the Prisma design team or open an issue on GitHub.
+- Import `tailwindcss` once in your app's entry stylesheet — don't add it inside Eclipse or in multiple places.
+- `@prisma/eclipse/styles/globals.css` includes Eclipse's design tokens, utility classes, and Tailwind v4 `@source` directives. These `@source` rules tell Tailwind where to scan for class names used by Eclipse components, so they get included in the generated CSS even though they live in `node_modules`.
diff --git a/apps/eclipse/next.config.mjs b/apps/eclipse/next.config.mjs
@@ -202,7 +202,6 @@ const securityHeaders = [
 const config = {
   reactStrictMode: true,
   transpilePackages: ["@prisma/eclipse"],
-  output: "export",
   images: { unoptimized: true },
   async headers() {
     return [

diff --git a/apps/eclipse/package.json b/apps/eclipse/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "prebuild": "rimraf out",
     "build": "next build",
     "dev": "next dev --port 3003",
     "start": "next start --port 3003",
@@ -13,25 +12,19 @@
     "postinstall": "fumadocs-mdx"
   },
   "dependencies": {
-    "@base-ui/react": "catalog:",
     "@fumadocs/base-ui": "catalog:",
-    "@fumadocs/cli": "catalog:",
     "@prisma/eclipse": "workspace:^",
-    "@prisma-docs/ui": "workspace:*",
-    "class-variance-authority": "catalog:",
     "fumadocs-core": "catalog:",
     "fumadocs-mdx": "catalog:",
     "fumadocs-ui": "catalog:",
     "lucide-react": "catalog:",
     "next": "catalog:",
-    "next-themes": "catalog:",
     "npm-to-yarn": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "recharts": "catalog:",
     "remark-directive": "catalog:",
-    "scroll-into-view-if-needed": "catalog:",
-    "zod": "catalog:"
+    "scroll-into-view-if-needed": "catalog:"
   },
   "devDependencies": {
     "@argos-ci/playwright": "catalog:",
@@ -42,9 +35,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "postcss": "catalog:",
-    "rimraf": "catalog:",
     "tailwindcss": "catalog:",
-    "tw-animate-css": "catalog:",
     "typescript": "catalog:"
   }
 }