Bridge the gap
between design and development.
TrinkUI delivers accessible, fast, and stunning components for your React projects. Built on Tailwind CSS, written in TypeScript, production-ready in minutes.
import { HeroCentered, FeaturesGrid, PricingCards } from "@trinkui/react"
export default function LandingPage() {
return (
<>
<HeroCentered title="Ship faster" />
<FeaturesGrid features={features} />
<PricingCards plans={plans} />
</>
)
}Components
A component for every need.
From form elements to data tables, navigation to feedback widgets — it's all here.
Form & Input
Collecting user data has never looked this good. Validation, error messages, and accessibility come built-in.
Why trink-ui?
Redefine your development experience.
Zero Configuration
Tailwind setup, theme config, color tokens... hours of boilerplate.
One command. Everything is ready.
Type Safety
Constantly opening docs just to remember a prop name.
Every prop is fully typed. Your IDE is your documentation.
Featherweight
200 unused components sitting in your bundle.
Tree-shakeable. Average component size <4KB gzip.
Accessibility by Default
Manually adding ARIA labels, testing keyboard navigation...
WAI-ARIA, keyboard support, and screen reader compatibility out of the box.
Day and Night, Effortlessly
Writing separate classNames for dark mode in every component.
Add 'dark' to your HTML. That's it.
Instant Theming
Changing your brand color = find-and-replace across 47 files.
One config file. All components adapt instantly.
Comparison
Less code. More product.
<div className="fixed inset-0 bg-black/50 z-50
flex items-center justify-center">
<div className="bg-white rounded-lg shadow-xl
max-w-md w-full p-6 relative">
<button className="absolute top-4 right-4
text-gray-400 hover:text-gray-600"
onClick={onClose}>X</button>
<h2 className="text-lg font-semibold mb-4">
Title</h2>
<p className="text-gray-600 mb-6">Content</p>
...
</div>
</div><Modal isOpen={isOpen} onClose={onClose}>
<ModalHeader>Title</ModalHeader>
<ModalBody>Content</ModalBody>
<ModalFooter>
<Button onPress={onClose}>Close</Button>
</ModalFooter>
</Modal>47 lines → 6 lines. Same result. Plus accessibility, animation, and keyboard support for free.
Features
What's in the box?
React Server Components
Includes the "use client" directive. Works seamlessly in RSC projects.
WAI-ARIA Compliant
Keyboard, focus, and screen reader support included.
Tree-Shakeable
Only the components you use end up in your bundle.
TypeScript Native
Fully typed API. Autocomplete and compile-time error catching.
Polymorphic "as" Prop
Change the HTML tag of any component.
Zero Runtime Styles
Built on Tailwind CSS. No runtime performance overhead.
Automatic Dark Mode
Add "dark" to your HTML and all components adapt automatically.
Tailwind Variants
Slot-based customization. No class conflicts.
Smart Focus Ring
Focus ring only appears during keyboard navigation.
Modular Packages
Each component can be imported separately. Take only what you need.
Fully Responsive
All components adapt to mobile, tablet, and desktop.
Figma Kit
Coming SoonSeamless design-to-code handoff.
Quick Start
Get started in 3 steps.
Install
The CLI configures everything for you.
Import
Single package or per-component import.
Use
That's it. You're production-ready.
Testimonials
What developers are saying.
“We shipped our new product's frontend in 4 days instead of 3 weeks thanks to trink-ui.”
“I've never seen another library that thinks this deeply about accessibility.”
“The TypeScript support is outstanding. You can do everything without leaving your IDE.”
Compatibility
In harmony with your favorite framework.
App Router, Pages Router, SSR, SSG, SPA — whatever architecture you use, trink-ui works seamlessly.
Every great product starts with a single line of code.
Build your first component with trink-ui today. Free, open source, forever.