Repository files navigation

The home of the ClickHouse design system and component library.

Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.

1. Navigate to your app's route and runnpm i @clickhouse/click-uioryarn add @clickhouse/click-ui
2. Make sure to wrap your application in the Click UIClickUIProvider, without doing this, you may run into issues with styled-components. Once thats done, you'll be able to import the individual components that you want to use on each page. Here's an example anApp.tsx in NextJS.

import{ClickUIProvider,Text,ThemeName,Title,Switch}from'@clickhouse/click-ui'functionApp(){const[theme,setTheme]=useState<ThemeName>('dark')consttoggleTheme=()=>{theme==='dark' ?setTheme('light') :setTheme('dark')}return(<ClickUIProvidertheme={theme}config={{tooltip:{delayDuration:0}}}><Switchchecked={theme==='dark'}onClick={()=>toggleTheme()}/><Titletype='h1'>ClickUIExample</Title><Text>WelcometoClickUI.Getstartedhere.</Text></ClickUIProvider>)}exportdefaultApp

1. Clone this repo, cd into theclick-ui directory
2. To install dependencies, runnpm i
3. To build the latest styles, runnpm run generate-tokens
4. To run ClickUI locally, runnpm run dev and navigate tohttp://localhost:5173
5. To run Storybook locally, runnpm run storybook and navigate tohttps://localhost:6006

Enjoy!

New versions and release notes are available atGitHub Releases.

To create a new release and publish a new version, follow the instructions inpublish.md.