---
title: Getting started
description: Learn how to install and set up Click UI in your application
category: Guide
related: [Container, Button, Text, Title]
---

Source: https://clickhouse.design/click-ui/getting-started

# Getting started

Get up and running with Click UI in your React application. This guide covers installation, setup, and your first component.

## Installation

Install Click UI using npm or yarn:

```bash
npm install @clickhouse/click-ui
# or
yarn add @clickhouse/click-ui
```

## Setup

### 1. Import CSS

Import the Click UI CSS file in your application entry point (e.g., `_app.tsx` in Next.js or `main.tsx` in Vite):

```tsx
import '@clickhouse/click-ui/cui.css'
```

### 2. Wrap your app with ClickUIProvider

All Click UI components must be wrapped in the `ClickUIProvider`. This provides theme context and required providers for tooltips and toasts.

```tsx
import { ClickUIProvider, ThemeName } from '@clickhouse/click-ui'
import { useState } from 'react'

function App() {
const [theme, setTheme] = useState<ThemeName>('dark')

return (
  <ClickUIProvider theme={theme}>
    {/* Your app content */}
  </ClickUIProvider>
)
}
```

## Your first component

Here's a complete example showing how to use Click UI components:

### Complete example code

```tsx
import { ClickUIProvider, Container, Title, Text, Button, Switch, ThemeName } from '@clickhouse/click-ui'
import '@clickhouse/click-ui/cui.css'
import { useState } from 'react'

function App() {
const [theme, setTheme] = useState<ThemeName>('dark')
const [count, setCount] = useState(0)

return (
  <ClickUIProvider theme={theme}>
    <Container orientation='vertical' gap='md' padding='lg'>
      <Title type='h1' size='lg'>Welcome to Click UI</Title>
      <Text>This is your first Click UI component!</Text>
      
      <Container orientation='horizontal' gap='sm' alignItems='center'>
        <Switch
          checked={theme === 'dark'}
          onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
          label='Dark mode'
        />
      </Container>

      <Button 
        type='primary' 
        label={`Clicked ${count} times`}
        onClick={() => setCount(count + 1)}
      />
    </Container>
  </ClickUIProvider>
)
}

export default App
```

## Framework-specific setup

### Next.js

In Next.js, wrap your app in `pages/_app.tsx` or `app/layout.tsx`:

```tsx
// pages/_app.tsx
import { ClickUIProvider, ThemeName } from '@clickhouse/click-ui'
import '@clickhouse/click-ui/cui.css'
import { useState } from 'react'
import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
const [theme, setTheme] = useState<ThemeName>('dark')

return (
  <ClickUIProvider theme={theme}>
    <Component {...pageProps} />
  </ClickUIProvider>
)
}
```

### Vite / Create React App

In Vite or CRA, wrap your app in `main.tsx` or `index.tsx`:

```tsx
// main.tsx
import { ClickUIProvider, ThemeName } from '@clickhouse/click-ui'
import '@clickhouse/click-ui/cui.css'
import { useState } from 'react'
import React from 'react'
import ReactDOM from 'react-dom/client'

function App() {
const [theme, setTheme] = useState<ThemeName>('dark')

return (
  <ClickUIProvider theme={theme}>
    <YourApp />
  </ClickUIProvider>
)
}

ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
  <App />
</React.StrictMode>
)
```

## Provider configuration

The `ClickUIProvider` accepts an optional `config` prop to customize tooltip and toast behavior:

```tsx
<ClickUIProvider 
theme={theme}
config={{
  tooltip: { delayDuration: 0 },
  toast: { align: 'start' }
}}
>
{/* Your app */}
</ClickUIProvider>
```

## Important notes

- **Provider Required**: All Click UI components must be wrapped in `ClickUIProvider`
- **CSS Import**: Don't forget to import `@clickhouse/click-ui/cui.css`
- **Controlled Components**: Most form components are controlled - manage state externally
- **Button Labels**: Use the `label` prop, not children: `<Button label="Click me" />`
- **Table Structure**: Tables use `headers` (array) and `rows` (array with `id` and `items`)
- **Form Handlers**: Form inputs use `onChange` with value parameter: `onChange={(value) => setValue(value)}`

## Next steps

- Browse Components to see all available components
- Check out Common Patterns for real-world examples
- Explore Page Templates for full-page layouts
- View Icon Library for available icons
- Read about Design Tokens for theming

## Need help?

- Check the GitHub repository
- View Storybook for interactive examples
- Create an issue if you encounter problems