Eclipse Design System

Eclipse is Prisma's comprehensive design system built with Tailwind CSS and design tokens from Figma.

Documentation

For complete documentation, examples, and interactive demos, visit:

Eclipse Design System Documentation

Quick Start

pnpm add @prisma/eclipse

1) Configure PostCSS in the consuming app

Use Tailwind v4 PostCSS plugin in the app (or re-export a shared config):

// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

2) Import styles in your app global CSS

Initialize Tailwind once in the consuming app, then import Eclipse styles:

/* app global.css */
@import "tailwindcss";
@import "@prisma/eclipse/styles/globals.css";

3) Use components

import { Button } from "@prisma/eclipse";

export function App() {
  return <Button variant="ppg">Click me</Button>;
}

Tailwind Setup Model

Eclipse uses an app-owned Tailwind setup:

• The consuming app imports tailwindcss once.
• The Eclipse stylesheet (@prisma/eclipse/styles/globals.css) provides tokens, utilities, and @source directives.
• Eclipse does not initialize Tailwind itself.

This avoids duplicate base/utilities output and keeps CSS generation in one place.

Avoid Duplicate Imports

Do not import tailwindcss from multiple library stylesheets. Only import it from the app entry stylesheet.

Recommended pattern:

@import "tailwindcss";
@import "@prisma/eclipse/styles/globals.css";
/* other library/theme css */

What's Included

• 🎨 Design Tokens - Colors, typography, spacing, and more from Figma
• 🧩 Components - Pre-built, accessible React components
• 🌗 Dark Mode - Full light/dark theme support
• 🎯 Tailwind CSS - Utility-first styling
• 📦 TypeScript - Full type safety

Project Structure

eclipse/
├── src/
│   ├── components/       # React components
│   ├── lib/             # Utilities (cn, etc.)
│   ├── styles/          # Global CSS
│   ├── tokens/          # Design tokens
│   └── index.ts         # Main entry
├── .templates/          # Component templates
├── ARCHITECTURE.md      # Architecture overview
├── GETTING_STARTED.md   # Setup guide
├── TOKENS.md           # Token documentation
└── TROUBLESHOOTING.md  # Common issues

Development

For maintainers working on Eclipse itself:

• See GETTING_STARTED.md for setup
• See ARCHITECTURE.md for design decisions
• See TOKENS.md for token management
• See TROUBLESHOOTING.md for common issues

Contributing

When adding new components or tokens, please refer to the documentation files above and ensure changes are reflected in the main documentation site.

Support

For questions or issues, please reach out to the Prisma design team or open an issue on GitHub.