Introduction

Hex-UI is a growing collection of modern, reusable UI components built with React, Tailwind CSS, and shadcn/ui. Each component is designed to be copy-paste ready and can be easily installed using the Shadcn CLI.

Our goal is simple: help developers build polished interfaces faster with minimal setup. No complex configurations, no vendor lock-in — just clean, functional components you can drop into your project and customize as needed.

Features

• Copy-paste ready — Download and use components immediately
• Shadcn CLI compatible — Install with a single command
• Tailwind CSS powered — Easy to customize and extend
• React + TypeScript — Type-safe components with modern React patterns
• Mobile responsive — Works seamlessly across all devices
• Accessible by default — Built with ARIA guidelines in mind
• Animation support — Smooth interactions with Framer Motion

Getting Started

You can use Hex-UI components in two ways:

Install with Shadcn CLI (Recommended)

Install components directly into your project:

npx shadcn@latest add https://hex-ui.com/r/component-name

Copy and Paste

Browse our component library, copy the code, and paste it into your project. All components are self-contained and include their dependencies.

Tip: The CLI method automatically handles dependencies and file placement, making it the fastest way to get started.

Usage Example

Once installed, importing and using components is straightforward:

import { StackedTabs } from "@/components/ui/stacked-tabs";
import { FloatingNavbar } from "@/components/ui/floating-navbar";

export default function HomePage() {
  return (
    <div>
      <FloatingNavbar />
      <main className="container mx-auto px-4">
        <StackedTabs />
      </main>
    </div>
  );
}

All components work out of the box with sensible defaults, but can be fully customized through props and Tailwind classes.

Customization

Hex-UI components are built with customization in mind:

• Tailwind CSS — Modify colors, spacing, and styling using utility classes
• Component props — Configure behavior through TypeScript-safe props
• CSS variables — Override theme values for consistent design systems
• Shadcn compatibility — Integrates seamlessly with existing shadcn/ui projects

// Example: Customizing a component
<StackedTabs
  className="w-full max-w-4xl"
  buttonWidth={120}
  springConfig={{ stiffness: 300, damping: 20 }}
/>