Getting Started

Welcome to Eidetic, a modern B2C SaaS design system built for 2025. Get up and running in minutes with our comprehensive component library.

167+ Components

Comprehensive library including AI-ready, form, layout, and data display components.

4 Theme Presets

Choose from curated color themes or customize with CSS variables.

AI-Ready

Purpose-built components for AI interfaces, chat, and streaming content.

Installation

Install Eidetic using your preferred package manager.

Using pnpm (recommended)

pnpm add @eidetic/design-system

Using npm

npm install @eidetic/design-system

Using yarn

yarn add @eidetic/design-system

Setup with Next.js

Configure Eidetic in your Next.js 14+ application.

1. Import global styles

Add the Eidetic styles to your root layout or global CSS file:

app/layout.tsx
import '@/styles/globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

2. Configure Tailwind CSS

Eidetic uses Tailwind CSS v4 with CSS custom properties. Ensure your tailwind.config.ts includes:

tailwind.config.ts
import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './src/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      // Eidetic theme extensions are applied via CSS variables
    },
  },
  plugins: [],
}

export default config

3. Add the Theme Provider (optional)

For theme switching and preset support, wrap your app with the ThemeProvider:

app/layout.tsx
import { ThemeProvider } from '@/contexts/ThemeContext'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Your First Component

Start using Eidetic components in your application.

app/page.tsx
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'

export default function HomePage() {
  return (
    <Card className="max-w-md mx-auto mt-8">
      <CardHeader>
        <CardTitle>Welcome to Eidetic</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-slate-600 dark:text-slate-400 mb-4">
          Your design system is ready to use!
        </p>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  )
}

Preview:

Welcome to Eidetic

Your design system is ready to use!

Theme Customization

Customize colors, spacing, and more using CSS variables or theme presets.

Eidetic supports runtime theming through CSS custom properties. Choose from built-in presets or create your own:

Default

Aurora

Mocha Earth

Midnight

Configure themes in Settings → Variables.

Dark Mode

Eidetic includes full dark mode support out of the box.

  • Class-based: Uses Tailwind's class strategy with .dark on <html>
  • System preference: Automatically detects prefers-color-scheme
  • Persistent: User preference saved to localStorage
  • No flash: Script in <head> prevents flash of wrong theme
// Toggle dark mode programmatically
document.documentElement.classList.toggle('dark')

// Or use the ThemeContext
import { useTheme } from '@/contexts/ThemeContext'

function ThemeToggle() {
  const { isDark, toggleDarkMode } = useTheme()
  return (
    <button onClick={toggleDarkMode}>
      {isDark ? 'Light Mode' : 'Dark Mode'}
    </button>
  )
}

TypeScript Support

Eidetic is built with TypeScript and includes full type definitions.

All components export their prop types for full TypeScript integration:

import { Button, type ButtonProps } from '@/components/ui/button'
import { Card, type CardProps } from '@/components/ui/card'

// Full type safety and autocomplete
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button variant="primary" size="lg" {...props} />
}

Key Features

  • AI Components: 15+ components designed for AI interfaces, chat, and streaming content
  • Accessibility: WCAG 2.1 AA compliant with full ARIA support and keyboard navigation
  • Responsive: Mobile-first design that works on all screen sizes
  • Customizable: CSS variables for runtime theming without rebuilding
  • Modern Stack: Built for Next.js 14+, React 18+, and Tailwind CSS v4
  • Dark Mode: Complete dark mode support with system preference detection

Next Steps

Browse ComponentsColor SystemCustomize Theme