{"id":23107718,"url":"https://github.com/kleros/ui-components-library","last_synced_at":"2025-08-16T17:31:44.128Z","repository":{"id":40411133,"uuid":"434565165","full_name":"kleros/ui-components-library","owner":"kleros","description":"UI components library which implements the Kleros design system.","archived":false,"fork":false,"pushed_at":"2024-12-16T10:38:24.000Z","size":1705,"stargazers_count":7,"open_issues_count":8,"forks_count":3,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-12-16T11:35:41.315Z","etag":null,"topics":["frontend","kleros","kleros-v2","react-component-library","ui-components"],"latest_commit_sha":null,"homepage":"https://www.figma.com/file/b7DEUKDeHlOl4ocDTMv7UIhZ/Kleros?node-id=7515%3A9807","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kleros.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2021-12-03T11:04:20.000Z","updated_at":"2024-12-09T11:20:08.000Z","dependencies_parsed_at":"2024-05-28T18:44:46.310Z","dependency_job_id":"da0ef346-a83d-4a87-927b-914601ee55ad","html_url":"https://github.com/kleros/ui-components-library","commit_stats":null,"previous_names":["alcercu/frontend-library"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleros%2Fui-components-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleros%2Fui-components-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleros%2Fui-components-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kleros%2Fui-components-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kleros","download_url":"https://codeload.github.com/kleros/ui-components-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229994402,"owners_count":18156622,"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":["frontend","kleros","kleros-v2","react-component-library","ui-components"],"created_at":"2024-12-17T01:15:50.406Z","updated_at":"2025-08-16T17:31:44.119Z","avatar_url":"https://github.com/kleros.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://kleros.io\"\u003e\n    \u003cimg alt=\"Kleros\" src=\"https://github.com/kleros/court/blob/master/public/icon-512.png?raw=true\" width=\"128\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eKleros UI Components Library\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://conventionalcommits.org\"\u003e\u003cimg src=\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\" alt=\"Conventional Commits\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://commitizen.github.io/cz-cli/\"\u003e\u003cimg src=\"https://img.shields.io/badge/commitizen-friendly-brightgreen.svg\" alt=\"Commitizen Friendly\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"Styled with Prettier\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Introduction\n\nThe Kleros UI Components Library is a comprehensive collection of React components that implement the Kleros design system. This library provides a consistent and accessible user interface for Kleros applications, making it easier to build cohesive user experiences across the Kleros ecosystem.\n\nBuilt with React, TypeScript, and Tailwind CSS, this library offers a wide range of components from basic UI elements to complex interactive widgets. Each component is designed with accessibility, customization, and ease of use in mind.\n\n## Features\n\n- **React-based components**: Built with React 18 and TypeScript for type safety\n- **Tailwind CSS integration**: Leverages Tailwind for styling with consistent design tokens\n- **Accessibility**: Components follow WAI-ARIA guidelines for maximum accessibility\n- **Responsive design**: Components adapt to different screen sizes\n- **Customizable**: Easily theme and extend components to match your application's design\n- **Storybook documentation**: Interactive documentation with usage examples\n\n## Components\n\nThe library includes a wide variety of components, including but not limited to:\n\n- **Layout**: Box, Card, Modal\n- **Navigation**: Breadcrumb, Pagination, Tabs\n- **Form Elements**: TextField, TextArea, NumberField, Checkbox, RadioGroup, Switch, DatePicker, FileUploader\n- **Data Display**: DisplaySmall, DisplayLarge, DisplayIcon, Tag, Tooltip\n- **Feedback**: Alert, Push Notifications\n- **Progress**: LinearProgress, CircularProgress, Steps, Timeline\n- **Interactive Elements**: Button, Accordion, Dropdown, Cascader\n\n## Usage\n\n### Installation\n\nInstall the package using your preferred package manager:\n\n```bash\n# Using yarn\nyarn add @kleros/ui-components-library\n\n# Using npm\nnpm install @kleros/ui-components-library\n```\n\n### Setup\n\n1. Import the CSS:\n\n   a. For Non-tailwind apps, import the CSS at top level of your app.\n\n   ```javascript\n   import \"@kleros/ui-components-library/style.css\";\n   ```\n\n   b. For Tailwind apps, import the theme and mark the library as a source in your global.css file.\n\n   ```css\n   @import \"../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css\";\n   @source \"../../../node_modules/@kleros/ui-components-library\";\n   ```\n\n2. Import and use components in your application:\n\n```jsx\nimport { Button, TextField, Alert } from \"@kleros/ui-components-library\";\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cTextField label=\"Username\" placeholder=\"Enter your username\" /\u003e\n      \u003cButton\u003eSubmit\u003c/Button\u003e\n      \u003cAlert type=\"success\"\u003eOperation completed successfully!\u003c/Alert\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Theme usage\n\nIf you wish the use the library's tailwind theme variables in your tailwind app. You can utilize it by importing the theme file in your `global.css` file.\n\n```css\n@import tailwindcss;\n@import \"../../../node_modules/@kleros/ui-components-library/dist/assets/theme.css\";\n```\n\nYou can find the available theme variables [here](src/styles/theme.css).\nIf want to override or edit the defined theme variables, you can do so like this:\n\n```css\n:root {\n  --klerosUIComponentsWhiteBackground: #832323;\n}\n:root[class=\"dark\"] {\n  --klerosUIComponentsWhiteBackground: #832323;\n}\n```\n\n### Peer Dependencies\n\nThis library requires the following peer dependencies:\n\n- React 18+\n- React DOM 18+\n- Tailwind CSS 4+\n\nMake sure these are installed in your project.\n\n## Development\n\n### Local Setup\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/kleros/ui-components-library.git\n   cd ui-components-library\n   ```\n\n2. Install dependencies:\n\n   ```bash\n   yarn install\n   ```\n\n3. Start the Storybook development server:\n\n   ```bash\n   yarn start\n   ```\n\n4. Build the library:\n   ```bash\n   yarn build\n   ```\n\n### Code Quality\n\nThis project uses:\n\n- TypeScript for type checking\n- ESLint for code linting\n- Prettier for code formatting\n- Husky for Git hooks\n- Conventional Commits for commit messages\n\nRun checks with:\n\n```bash\nyarn check-types    # Type checking\nyarn check-style    # Linting\n```\n\n## Package Publication\n\n### Tagging\n\n1. Bump the version in `package.json`\n2. Run a clean build: `yarn clean \u0026\u0026 yarn build`\n3. Commit the change to git: `git add -u ; git commit -m \"chore: release\"`\n4. Tag this version: `version=v$(cat package.json | jq -r .version) \u0026\u0026 git tag -m $version $version`\n5. Push both commit and tag: `git push \u0026\u0026 git push --tags`\n\n### Publish to NPM\n\n1. Export your NPM token: `export YARN_NPM_AUTH_TOKEN=\u003cnpm_xxxxxxxxxxxx\u003e`\n2. Publish: `yarn publish`\n\n### Publish to GitHub\n\n1. Login:\n\n   ```bash\n   npm login --registry https://npm.pkg.github.com --auth-type legacy\n   \u003e Username: YOUR_GITHUB_USERNAME\n   \u003e Password: YOUR_GITHUB_PERSONAL_ACCESS_TOKEN\n   ```\n\n2. Publish: `npm publish --registry https://npm.pkg.github.com`\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes using conventional commits (`git commit -m 'feat: add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkleros%2Fui-components-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkleros%2Fui-components-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkleros%2Fui-components-library/lists"}