Introduction

Welcome to Hex UI—a modern component library built with React, Next.js, and Tailwind CSS. Get started in minutes and build beautiful, accessible interfaces.

What is Hex UI?

Hex UI is a collection of beautifully designed, accessible React components with smooth animations and interactions. Built on top of industry-standard tools, it helps you create consistent, professional interfaces without starting from scratch.

Key Features

  • Copy & Paste Components — No package installations, just copy the code you need
  • Fully Customizable — Built with Tailwind CSS for complete design control
  • TypeScript First — Full type safety and IntelliSense support
  • Accessible — ARIA patterns and keyboard navigation built-in
  • Dark Mode — Beautiful themes for light and dark modes
  • Animated — Smooth, performant animations using Framer Motion

Philosophy

Hex UI follows a copy-paste approach rather than an npm package. This gives you complete ownership and control over the components. Modify them to fit your needs, remove what you don't use, and keep your bundle size optimal.

Getting Started

Follow these steps to get up and running:

  1. Install Next.js — Set up a new Next.js project
  2. Install Tailwind CSS — Configure Tailwind in your project
  3. Browse Components — Copy and paste the components you need

Tech Stack

Hex UI is built with modern, battle-tested technologies:

  • React 19 — Latest React features and improvements
  • Next.js 15 — App Router, Server Components, and more
  • Tailwind CSS v4 — Utility-first CSS framework
  • Framer Motion — Production-ready animation library
  • TypeScript — Type safety and better DX

Community & Support

Join our growing community of developers building with Hex UI. Get help, share your projects, and contribute to the library.