Installation

Wire the ePassLive design system into a Next.js 15 + Tailwind v4 project.

Requirements

Node.js 20+ (LTS)
Next.js 15 with App Router
Tailwind CSS v4 (CSS-first config)
TypeScript 5.4+ in strict mode

1. Install the package

# Using pnpm (recommended)
pnpm add @epasslive/design-system

# Or npm
npm install @epasslive/design-system

2. Configure Tailwind

Import the design system preset into your :tailwind.config.ts:

import type { Config } from 'tailwindcss'
import epasslivePreset from '@epasslive/design-system/tailwind.config'

export default {
  presets: [epasslivePreset],
  content: [
    './app/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './node_modules/@epasslive/design-system/**/*.{ts,tsx}',
  ],
} satisfies Config

3. Import global styles

Add the design system CSS to your root :app/layout.tsx:

// app/layout.tsx
import '@epasslive/design-system/globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

4. Install icons (optional)

The design system uses Lucide icons. Install them for icon components:

pnpm add lucide-react

5. Verify the install

Drop a Button into :app/page.tsx:

import { Button } from '@epasslive/design-system'

export default function Home() {
  return <Button aria-label="Test button">Hello ePassLive</Button>
}

You should see a teal primary button. If you see the default browser button, check that:

The CSS import is at the root of your layout
The Tailwind preset is loaded
The content array includes the design system path

Internal distribution

The package is currently distributed via the internal ePassLive registry. Public npm publish is scheduled for v3.2.0.