Getting Started

Introduction

trink-ui is an open-source React component library built exclusively for landing pages. It provides 40+ production-ready sections, primitives, and animations so you can ship beautiful landing pages in minutes instead of days.

Why trink-ui?

Landing-page focused
Every component exists to serve landing pages: hero sections, features, pricing, testimonials, FAQ, CTA, and more.
Drop-in ready
Import a section, pass your data as props, done. No wiring, no boilerplate.
Dark mode built-in
Light and dark themes via CSS custom properties. Switch with a single prop.
Accessible
Semantic HTML, keyboard navigation, focus-visible rings, and ARIA attributes out of the box.
Animated
Scroll-triggered animations powered by Motion. Respects prefers-reduced-motion automatically.
Fully typed
Written in TypeScript with strict mode. Every prop has JSDoc documentation.

Tech Stack

React 18/19Works with both versions

TypeScript 5Strict mode, full type safety

Tailwind CSS v4Utility-first styling

MotionSmooth scroll-triggered animations

tsupCJS + ESM + DTS build

TurborepoMonorepo build orchestration

Component Hierarchy

trink-ui components follow a 3-layer architecture:

Sections

Full landing page sections (Hero, Features, Pricing, CTA, etc.)

HeroCentered, FeaturesGrid, PricingCards

Layout

Structural wrappers that sections use internally

Section, Container, SectionHeader

Primitives

Atomic UI elements used by sections and available standalone

Button, Badge, Input, Card, Avatar

Next step

Ready to get started? Head to the installation guide.

Installation