Documentation

Getting Started

Install the packages, configure your theme, and render your first component in minutes.

Install the packages

Add both the tokens and the UI component library to your project.

npm

npm install @ghiberti85/tokens @ghiberti85/ui

pnpm

pnpm add @ghiberti85/tokens @ghiberti85/ui

yarn

yarn add @ghiberti85/tokens @ghiberti85/ui

Import the design system CSS

Import one design system stylesheet at the root of your app (e.g. layout.tsx or _app.tsx). This injects all CSS custom properties into the page.

// Import the design system CSS (pick one)
import '@ghiberti85/tokens/ds-editorial'
// import '@ghiberti85/tokens/ds-brutalist'
// import '@ghiberti85/tokens/ds-velvet'
// import '@ghiberti85/tokens/ds-clean'
// import '@ghiberti85/tokens/ds-onyx'

💡

Each design system ships its own CSS file. You can load multiple systems and switch between them at runtime using the data-theme attribute.

Apply a theme to your HTML element

Add data-theme to your <html> tag. All components read tokens from that scope automatically.

<!-- Apply a theme and optional dark mode -->
<html data-theme="ds-editorial">
  <!-- for dark mode: data-theme="ds-editorial" data-mode="dark" -->
</html>

<!-- Available themes: ds-editorial, ds-brutalist,
     ds-velvet, ds-clean, ds-onyx -->

Clean

Velvet

Brutalist

Editorial

Onyx

Use your first component

Import any component from @ghiberti85/ui and drop it into your JSX. No extra configuration needed.

import { Button } from '@ghiberti85/ui'

export default function App() {
  return <Button variant="primary">Hello, world!</Button>
}

Switch themes and dark mode

Themes and dark mode are pure CSS — flip a data attribute at runtime and every component updates instantly.

// Switch theme at runtime — no re-render needed
document.documentElement.setAttribute('data-theme', 'ds-editorial')
// All available themes:
// 'ds-editorial' | 'ds-brutalist'
// 'ds-velvet' | 'ds-clean' | 'ds-onyx'

// Toggle dark mode
document.documentElement.setAttribute('data-mode', 'dark')
// Remove for light mode
document.documentElement.removeAttribute('data-mode')

What's next?

🧩Browse Components→🎨Explore Tokens→📦View on GitHub→