{"id":17570626,"url":"https://github.com/ClickHouse/click-ui","last_synced_at":"2025-03-07T21:30:45.200Z","repository":{"id":157435957,"uuid":"615461459","full_name":"ClickHouse/click-ui","owner":"ClickHouse","description":"The home of the ClickHouse design system and component library.","archived":false,"fork":false,"pushed_at":"2025-03-03T14:06:04.000Z","size":8616,"stargazers_count":87,"open_issues_count":42,"forks_count":10,"subscribers_count":28,"default_branch":"main","last_synced_at":"2025-03-06T06:52:59.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://click-ui.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ClickHouse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-17T18:47:19.000Z","updated_at":"2025-03-03T18:28:05.000Z","dependencies_parsed_at":"2023-09-26T00:05:33.730Z","dependency_job_id":"be62770e-4a0f-4bcc-b108-2272358559fe","html_url":"https://github.com/ClickHouse/click-ui","commit_stats":null,"previous_names":[],"tags_count":180,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClickHouse%2Fclick-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClickHouse%2Fclick-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClickHouse%2Fclick-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ClickHouse%2Fclick-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ClickHouse","download_url":"https://codeload.github.com/ClickHouse/click-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242467161,"owners_count":20133105,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-21T18:01:15.693Z","updated_at":"2025-03-07T21:30:44.626Z","avatar_url":"https://github.com/ClickHouse.png","language":"TypeScript","readme":"# Click UI\n\nThe home of the ClickHouse design system and component library. Click UI is in very early development and subject to change, we do not recommend using it for production purposes.\n\n### Using Click UI in an external app\n\nClick 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.\n1. Navigate to your app's route and run\n   `npm i @clickhouse/click-ui`\n   or\n   `yarn add @clickhouse/click-ui`\n2. Make sure to wrap your application in the Click UI `ClickUIProvider`, 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 an `App.tsx` in NextJS.\n\n```ts\nimport { ClickUIProvider, Text, ThemeName, Title, Switch } from '@clickhouse/click-ui'\n\nfunction App() {\n  const [theme, setTheme] = useState\u003cThemeName\u003e('dark')\n\n  const toggleTheme = () =\u003e {\n    theme === 'dark' ? setTheme('light') : setTheme('dark')\n  }\n\n  return (\n    \u003cClickUIProvider theme={theme} config={{tooltip:{ delayDuration: 0 }}}\u003e\n      \u003cSwitch checked={theme === 'dark'} onClick={() =\u003e toggleTheme() } /\u003e\n\n      \u003cTitle type='h1'\u003eClick UI Example\u003c/Title\u003e\n      \u003cText\u003eWelcome to Click UI. Get started here.\u003c/Text\u003e\n    \u003c/ClickUIProvider\u003e\n  )\n}\n\nexport default App\n```\n\n### To develop this library locally 🚀\n\n1. Clone this repo, cd into the `click-ui` directory\n2. To install dependencies, run `npm i`\n3. To build the latest styles, run `npm run generate-tokens`\n4. To run ClickUI locally, run `npm run dev` and navigate to http://localhost:5173\n5. To run Storybook locally, run `npm run storybook` and navigate to https://localhost:6006\n\nEnjoy!\n","funding_links":[],"categories":["UIs"],"sub_categories":["GUI"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClickHouse%2Fclick-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FClickHouse%2Fclick-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClickHouse%2Fclick-ui/lists"}