---
title: Official Click UI documentation
description: The ClickHouse design system and component library
---

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

# Click UI

The design system and component library for ClickHouse

This site is the canonical documentation for Click UI, covering principles, tokens, component intent, usage guidelines, and system architecture.
Click UI provides an accessible, theme-able, modern, and attractive interface to experience the speed and power of ClickHouse.
Current version is .

### Key features

**Open source** — While primarily designed for ClickHouse, we're excited to share our design system with the broader community. [View on GitHub](https://github.com/clickhouse/click-ui)

**Modern & accessible** — Built with accessibility in mind, ensuring everyone can use ClickHouse effectively. [Read the docs](/click-ui/accessibility)

**Themeable** — Customize the look and feel to match your brand or preferences. [Read the docs](/click-ui/tokens)

### Getting started

**Storybook** — View all components and their props in action over on our Storybook. [https://click-ui.vercel.app/](https://click-ui.vercel.app/)

**Buttons** — Find out about our range of buttons and icon buttons. [/click-ui/buttons](/click-ui/buttons)

**Icon library** — View our full icon library and learn how to use them. [/click-ui/iconLibrary](/click-ui/iconLibrary)

**Logo library** — View our full logo library and learn how to use them. [/click-ui/logoLibrary](/click-ui/logoLibrary)

**Table** — View our full table library and learn how to use them. [/click-ui/table](/click-ui/table)

**Alerts** — View our full alerts library and learn how to use them. [/click-ui/alerts](/click-ui/alerts)

**Confirmation dialog** — View our full confirmation dialog library and learn how to use them. [/click-ui/confirmationDialog](/click-ui/confirmationDialog)

**Badges** — View our full badges library and learn how to use them. [/click-ui/badges](/click-ui/badges)