Eidetic

Getting Started

Welcome to Eidetic, a modern AI-ready SaaS design system. Get up and running in minutes with our comprehensive component library.

169+ 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

Add Eidetic components to your project. You own the code — copy what you need, customize freely.

1. Initialize your project

Run the init command to set up your project with Eidetic's design tokens, utilities, and configuration:

npx @vidorra/eidetic init

This will create your eidetic.json config, add the cn() utility, and set up your CSS tokens.

2. Add components

Add the components you need. Each component is copied into your project — you own the code:

npx @vidorra/eidetic add button card badge input

Dependencies are resolved automatically. If a component needs another Eidetic component, it will be added too.

3. Install dependencies

The CLI will tell you which packages to install. For example:

npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge lucide-react

Or add components manually

Prefer to copy-paste? Browse any component page, copy the source, and drop it into your project. You'll need:

  • The component files from src/components/ui/
  • The cn() utility from src/lib/utils.ts
  • CSS tokens from src/styles/globals.css

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 v4

Eidetic uses Tailwind CSS v4 with the new CSS-based configuration. Your postcss.config.mjs should include:

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

All design tokens are defined in globals.css using the @theme block — no tailwind.config.ts needed.

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

After adding components, use them like any React component.

npx @vidorra/eidetic add button card
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 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: 34+ 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