Getting Started

Get up and running with Dotti in minutes. This guide covers installation, basic usage, and core concepts.

Installation

Install Dotti via your preferred package manager:

# Using npm
npm install dotti

# Using yarn
yarn add dotti

# Using pnpm
pnpm add dotti

Basic Usage

Wrap your app with ThemeProvider and import the CSS file:

import { Button, ThemeProvider } from 'dotti'
import 'dotti/styles.css'

function App() {
  return (
    <ThemeProvider>
      <div className="p-8">
        <Button variant="primary" accent>
          Hello World
        </Button>
      </div>
    </ThemeProvider>
  )
}

CSS Import Required

Don't forget to import 'dotti/styles.css' in your main CSS file or at the root of your app.

Tree Shaking

Dotti supports tree shaking out of the box. Import only the components you need:

// Import only what you need for optimal bundle size
import { Button } from 'dotti'
import { Input } from 'dotti'
import { Card } from 'dotti'

// Or import multiple components
import { Button, Input, Card, ThemeProvider } from 'dotti'

Theming

Dotti includes built-in dark mode and theme switching capabilities:

import { ThemeProvider, useTheme, Button } from 'dotti'
import 'dotti/styles.css'

function ThemeExample() {
  const { theme, toggleTheme } = useTheme()
  
  return (
    <div>
      <p>Current theme: {theme}</p>
      <Button onClick={toggleTheme}>
        Toggle Theme
      </Button>
    </div>
  )
}

function App() {
  return (
    <ThemeProvider>
      <ThemeExample />
    </ThemeProvider>
  )
}

Custom Themes

Create custom themes by extending the base theme:

import { ThemeProvider, createCustomTheme } from 'dotti'

const customTheme = createCustomTheme({
  colors: {
    accent: '#00FF88', // Custom accent color
    background: '#0A0A0A',
    foreground: '#FFFFFF'
  }
})

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app */}
    </ThemeProvider>
  )
}

Next Steps

Explore Components

Browse our collection of 30+ components with live examples and code snippets.

Learn Theming

Discover how to customize colors, create themes, and implement dark mode.

View Source

Check out the GitHub repository for examples, issues, and contributions.