https://github.com/riipandi/twistail
Modular and extensible React UI components powered by Radix UI, Tailwind CSS, and Tailwind Variants.
https://github.com/riipandi/twistail
cli javascript nextjs radix-ui react reactjs remix-run tailwind-variants tailwindcss turborepo typescript ui-components ui-library vite
Last synced: about 1 year ago
JSON representation
Modular and extensible React UI components powered by Radix UI, Tailwind CSS, and Tailwind Variants.
- Host: GitHub
- URL: https://github.com/riipandi/twistail
- Owner: riipandi
- License: apache-2.0
- Created: 2025-03-06T21:25:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-30T12:47:03.000Z (about 1 year ago)
- Last Synced: 2025-04-07T20:04:38.026Z (about 1 year ago)
- Topics: cli, javascript, nextjs, radix-ui, react, reactjs, remix-run, tailwind-variants, tailwindcss, turborepo, typescript, ui-components, ui-library, vite
- Language: TypeScript
- Homepage: https://twistail.com
- Size: 21 MB
- Stars: 20
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-APACHE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 🌀 Twistail
[](./LICENSE-MIT)
[](./LICENSE-APACHE)
[][turborepo]
[][contribution]
[](https://app.netlify.com/sites/twistail/deploys)
[](https://app.netlify.com/sites/twistail-storybook/deploys)
## Introduction
Twistail is an Open Source React UI component library that leverages [Tailwind CSS][tailwindcss]
and [Tailwind Variants][tailwind-variants] for a powerful variant API. It enables advanced
component composition and responsive variants while managing style conflicts efficiently.
Built on [Radix UI Primitives][radix-ui] and implemented with [TypeScript][typescript],
Twistail provides a suite of UI elements, including charts and data visualization components.
Perfect for developers seeking a **customizable design** system that prioritizes accessibility
and performance, Twistail streamlines implementation with a **copy-paste** approach and
deep customization options.
Each component features separated style files, allowing easy adaptation to your brand's visual
identity while maintaining a cohesive look across your web application.
> [!CAUTION]
> 🚨🚨🚨
>
> Twistail is in a _very_ early development preview - expect some bugs and changes along the way.
>
Please do not use it in production yet, use in production at your own discretion!
>
> 🚨🚨🚨
## Getting Started
You can find our documentation at: [twistail.com][twistail-docs]
## Bugs and Feature Requests
If you have a bug or feature request, feel free to open an [issue][twistail-issue],
or [join our discussion][twistail-discussion].
## Community and Contribution
Contributions are welcome! Please open a pull requests for your changes and tickets in case you would like
to discuss something or have a question. Please read our Contributor License Agreement [here][twistail-cla].
Read the [Contributing Guidelines](https://twistail.com/docs/contributing-guidelines) for detailed documentation.
## Acknowledgements
Twistail is a thoughtful blend of design philosophies from two exceptional UI libraries, combining the best of both worlds:
- [Tremor](https://tremor.so/): Many of Twistail's foundational components draw heavy inspiration from Tremor's well-crafted designs. Twistail reimagines these components with its own architectural approach. Tremor is licensed under [Apache 2.0](https://github.com/tremorlabs/tremor/blob/main/LICENSE).
- [shadcn/ui](https://ui.shadcn.com/): Twistail incorporates design patterns and component structures from these projects, adapting them to fit seamlessly with the Twistail ecosystem. shadcn/ui is licensed under [MIT](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
Key differences from Tremor and shadcn/ui include:
- Twistail separates style files for each component, improving organization and customization.
- Twistail uses [Lucide icons](https://lucide.dev/) instead of Remix Icons which are used by Tremor.
- A carefully curated integration of design elements from Tremor and shadcn/ui.
We're grateful to these projects for their contributions to the React and Tailwind ecosystem, and for providing the foundation upon which Twistail builds its unique identity.
## License
Licensed under either of [Apache License 2.0][license-apache] or [MIT license][license-mit] at your option.
To understand the key differences between these two popular open-source licenses, please refer to the
[Apache License 2.0][tldr-apache] and the [MIT License][tldr-mit] on tldrlegal.com.
Copyrights in this project are retained by their contributors.
See the [LICENSE-APACHE](./LICENSE-APACHE) and [LICENSE-MIT](./LICENSE-MIT) files for more information.
---
🤫 Psst! If you like my work you can support me via [GitHub sponsors](https://github.com/sponsors/riipandi).
[biome]: https://biomejs.dev
[contribution]: https://github.com/riipandi/twistail/pulse
[license-apache]: https://choosealicense.com/licenses/apache-2.0
[license-mit]: https://choosealicense.com/licenses/mit
[radix-ui]: https://www.radix-ui.com/primitives
[reactjs]: https://react.dev
[storybook]: https://storybook.js.org
[tailwindcss]: https://tailwindcss.com
[tailwind-variants]: https://www.tailwind-variants.org
[tldr-apache]: https://www.tldrlegal.com/license/apache-license-2-0-apache-2-0
[tldr-mit]: https://www.tldrlegal.com/license/mit-license
[turborepo]: https://turbo.build/repo/docs
[twistail-cla]: https://twistail.com/docs/contributors
[twistail-discussion]: https://github.com/riipandi/twistail/discussions
[twistail-docs]: https://twistail.com/docs
[twistail-issue]: https://github.com/riipandi/twistail/issues/new
[typescript]: https://www.typescriptlang.org
[vite]: https://vite.dev