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:

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):

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.

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:

Welcome to Click UI

This is your first Click UI component!

Dark mode

dark theme

Complete Example Code

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:

// 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:

// 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:

<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

Introduction Accessibility