tranq-ui Tailwind Templates

Tranq Ui

Tranq-ui is an opinionated, headless UI library for React providing already pre-configured components with simplicity and flexibility in mind. Based on Radix-UI, tailwind, framer-motion, and class-variance-authority.

🚧 in-progress 🚧


Tranq-UI Logo

tranq-ui

Bring tranquility to your UI - An open-source React UI component library for building custom components with simplicity in mind.

Why not just use Radix-UI/ShadCN?

Libraries like Radix-UI or ShadCN provide headless component primitives that work well with any React tech stack.

Tranq-UI aims to provide already pre-configured components based on those libraries that support Tailwind + Framer motion + ClassVarianceAuthority out-of-the-box allowing developers to skip the boilerplate part of the implementation. Additionally, Tranq-UI provides opinionated UI patterns that can be reused across different projects.

Philiosophy

This library is aligned with the philosophy of the Radix-UI library.

See Radix-UI philosophy.

Usage

Each component is self-contained. One can copy and paste a source code of the component into their project with all functionalities*.

*Some heavily re-used definitions are moved to the shared directory. They need to be copied separately.


Sidenote: Currently, Tranq-UI is a personal, experimental UI library that allows author to maintain a library of reusable components they can share across different projects.

Top categories

Loading Svelte Themes