{"id":14985529,"url":"https://github.com/croz-ltd/tiller","last_synced_at":"2025-04-10T19:10:47.446Z","repository":{"id":65224558,"uuid":"585489168","full_name":"croz-ltd/tiller","owner":"croz-ltd","description":"🔖 Tiller DS is an open-source UI library that provides a range of visual, functional components and patterns that speed up design and development.","archived":false,"fork":false,"pushed_at":"2024-04-22T12:12:35.000Z","size":14229,"stargazers_count":26,"open_issues_count":10,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-22T13:32:57.667Z","etag":null,"topics":["design-system","react","storybook","tiller","tiller-design-system","typescript","ui-library"],"latest_commit_sha":null,"homepage":"https://croz-ltd.github.io/tiller","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/croz-ltd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-01-05T09:52:44.000Z","updated_at":"2024-04-22T13:33:06.432Z","dependencies_parsed_at":"2023-10-30T09:31:52.097Z","dependency_job_id":"54e07a34-1802-4982-acbc-0ce2b26aeb5e","html_url":"https://github.com/croz-ltd/tiller","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croz-ltd%2Ftiller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croz-ltd%2Ftiller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croz-ltd%2Ftiller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/croz-ltd%2Ftiller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/croz-ltd","download_url":"https://codeload.github.com/croz-ltd/tiller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248279605,"owners_count":21077407,"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":["design-system","react","storybook","tiller","tiller-design-system","typescript","ui-library"],"created_at":"2024-09-24T14:11:09.378Z","updated_at":"2025-04-10T19:10:47.420Z","avatar_url":"https://github.com/croz-ltd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Tiller cover image](https://raw.githubusercontent.com/croz-ltd/tiller/master/img/tiller_cover.png)\n\n## \u003ch1 align=\"center\"\u003eTiller Design System\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/croz-ltd/tiller/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-Apache--2.0-blue.svg\" alt=\"Tiller is released under the Apache-2.0 license\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/croz-ltd/tiller/actions/workflows/build.yml\"\u003e\n    \u003cimg src=\"https://github.com/croz-ltd/tiller/actions/workflows/build.yml/badge.svg\" alt=\"CI workflow status\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/croz-ltd/tiller/blob/master/CONTRIBUTING.md\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs welcome\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003e A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.\n\n**Tiller Design System** is open-source UI library which offers a set of visual, functional components and patterns that accelerate design and development. Components are endlessly customizable, accessible, and can integrate into any application with primarily focus on back-office applications. \u003cbr\u003e\nTiller design system is based on **Tailwind CSS, Formik** and **ReachUI**. Besides these, Tiller is made with the help of **[Nx](https://nx.dev/), [Yarn 2](https://yarnpkg.com/)** and **[Storybook](https://storybook.js.org/)**.\n\n| Package Name                                                                     | Version                                                          |\n|----------------------------------------------------------------------------------|------------------------------------------------------------------|\n| [@tiller-ds/core](https://www.npmjs.com/package/@tiller-ds/core)                 | ![](https://img.shields.io/npm/v/@tiller-ds/core/latest)         |\n| [@tiller-ds/cra-template](https://www.npmjs.com/package/@tiller-ds/cra-template) | ![](https://img.shields.io/npm/v/@tiller-ds/cra-template/latest) |\n\n## ✨ Features\n\n- 📦 A set of high-quality React components out of the box\n- 🛡 Written in TypeScript with predictable static types\n- 🌐 Internationalization support\n- 🎨 Powerful theme customization in every detail\n- 🗃️ Storybook (Docs, Controls, Playroom)\n- 📌 Rich Text Editor\n- 📌 Login Pattern\n\n## 🎨 Tiller Design System - Figma UI Kit\n\nTiller DS **UI kit** in **Figma** is a collection of Tiller components that allow you to easily create user interfaces for your **Figma projects**. It includes common components like buttons, input fields, and menus, as well as more specialized components, like Formik components or Login Pattern.\n\n- [Figma UI Kit](https://www.figma.com/file/QVaavJ0ZFn1AOsBnTjr7F1/Tiller-Design-System---UI-KIT?node-id=8627%3A11169\u0026t=F3NI5LM7tIG1qSnq-0)\n\n## 📚 Tiller Docs \u0026 Storybook\n\nFor more information about **Tiller Design System**, please refer to:\n\n- [Storybook](https://croz-ltd.github.io/tiller/?path=/docs/introduction--page) \n  - Usage documentation for each component\n  - Prop documentation for each component\n  - Factories for a number of components to easily visualize and create components\n  - Code preview for each story\n- [GitHub](https://github.com/croz-ltd/tiller)\n- [npm](https://www.npmjs.com/package/@tiller-ds/core)\n\n## 🚀 Getting Started\n\n### Installation with [Create React App](https://reactjs.org/docs/create-a-new-react-app.html)\n\n1. Install node.js\n2. Install yarn\n3. Create project with \n   ```\n   yarn create react-app app-name --template @tiller-ds/cra-template\n   ```\n4. Run `yarn start` command to start your project\n\n### Installation with [Vite](https://vitejs.dev/)\n\n1. Install node.js\n2. Install yarn\n3. Create project with\n   ```\n   npx degit croz-ltd/tiller-starter-vite\n   ```\n4. Then run these commands to start your project\n   ```\n   cd %PROJECT_NAME%\n   yarn install\n   yarn run dev\n   ```\n\n### Installation with custom project setup\n\nIf you use your own starter, basic steps needed for Tiller to work are next:\n\n1. Dependency to `@tiller-ds/theme` and other wanted modules for your app\n2. `tailwind.config.js` with this minimal config:\n\n```\nmodule.exports = {\n  presets: [require('@tiller-ds/theme').preset]\n};\n```\n\n3. Import of tiller styles in your main css file:\n\n```\n@import \"@tiller-ds/theme/styles/tiller.css\";\n```\n\n### Usage\n\nInstall packages you’re interested in using, for example, a @tiller-ds/core:\n```\nnpm i @tiller-ds/core\n```\n\n```\nimport { Button } from \"@tiller-ds/core\";\n\n\u003cButton\u003eHello world!\u003c/Button\u003e\n```\n\n### Styles\n\nTiller DS is bundled with a default theme that you can customize to match the look and feel of your project.\n\nCustomizations on theme level are implemented using design tokens which we call Tiller tokens.\nFor guides on Tiller tokens, head on over to our Storybook - [Theming and Customization](https://croz-ltd.github.io/tiller/?path=/docs/theming-and-customization--page).\n\nTiller Design System is divided into **modules**.\n\nAvailable modules / packages:\n - `@tiller-ds/alert`\n - `@tiller-ds/core`\n - `@tiller-ds/data-display`\n - `@tiller-ds/date`\n - `@tiller-ds/dev`\n - `@tiller-ds/form-elements`\n - `@tiller-ds/form-elements-advanced`\n - `@tiller-ds/formik-elements`\n - `@tiller-ds/icons`\n - `@tiller-ds/intl`\n - `@tiller-ds/menu`\n - `@tiller-ds/patterns`\n - `@tiller-ds/selectors`\n - `@tiller-ds/theme`\n - `@tiller-ds/upload`\n - `@tiller-ds/util`\n\nFor more information about each component, check out our [Storybook](https://croz-ltd.github.io/tiller/?path=/docs/introduction--page).\n\n## Versions\nEvery monday, a new version of the tiller packages will be published.\nWhether is minor or major will depend on the tasks completed the week before. If there is no new version on monday, it means there hasn't been enough changes to update the version.\n\n### Version ranges\nWe stick to the [semantic versioning](https://semver.org/), meaning that every breaking change is published as a new major version of the Tiller packages.\n\n## Frequently asked questions\n\n**What are the major benefits of the Tiller DS?**\n\n- **Better developer experience** Short onboarding process, easier setup, detailed documentation, high-quality React components.\n- **Endlessly customizable** Every detail of Tiller DS is customizable to match your brand. Style with Tiller Tokens or override components with your own.\n- **Functional components** Formik components wrapped in a Field Formik component, as well as implementation of Fetch.\n\n**Where should I file bugs and requests?**\n\n[Bugs and feature requests for Tiller DS](https://github.com/croz-ltd/tiller/issues/new)\n\nYou can also use the above link to report a bug or a feature request for previous version of Tiller Components.\n\nAs we continue to work on the new Tiller we will move UI-related issues in the tiller repository over here to work on them. We will continue to maintain major bug and security fixes for all existing UI packages and versions. New development for UI components will happen in this repository.\n\n## 🙌 Contributing\n\nOne of the goals of the Tiller Design System is to make building applications as easy as possible, while maintaining high quality UI components. The best way to achieve this goal is through a collective effort. We would appreciate contributions from the community, regardless of their size. 😍\n\nIf you're interested, definitely check our [Contributing Guide](https://github.com/croz-ltd/tiller/blob/master/CONTRIBUTING.md).\n\n## 📝 License\n\nLicensed under the [Apache 2.0 License](https://github.com/croz-ltd/tiller/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroz-ltd%2Ftiller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcroz-ltd%2Ftiller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcroz-ltd%2Ftiller/lists"}