# Introduction

> Ready-to-use foundation components/blocks built on top of shadcn/ui.

Docs: https://hextaui.com/docs
Markdown: https://hextaui.com/docs.md

## What is HextaUI

HextaUI is a collection of 65 components, 9 hooks and 5 utilities for React. You add them with the shadcn CLI, the source lands in your project, and from then on it's your code to read and change.

Every component keeps the shadcn/ui API you already know. What's different is the work you would otherwise do yourself: the states, the edge cases and the small details that make an interface feel finished.

## Quick start

In a project set up with shadcn/ui, add a component:

```bash
npx shadcn@latest add https://hextaui.com/r/button.json
```

Then import it from `@/components/ui`.

```tsx
import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}
```

Requirements, adding everything at once and the `@hextaui` namespace are covered in [Installation](https://hextaui.com/docs/installation).

## What you get

These hold for every component, so you don't have to check each one.

### Motion

Animations use the theme's easing curves and can be interrupted and reversed mid-way. When reduced motion is on, movement turns into a simple fade.

### Keyboard and screen readers

Everything works with the keyboard alone, and focus goes where you expect when popups open and close. Changes are announced too: toasts, loading and saved states, selections and slide changes.

### Touch and small screens

Tap targets grow on touch screens, text inputs stay at 16px so iOS doesn't zoom in, and popups stay on screen down to 320px wide. Layouts mirror for right-to-left languages.

### High contrast

Focus rings, control edges and selected states stay visible in Windows high contrast mode, and the default theme meets WCAG AA contrast in light and dark.

## Built on

- shadcn/ui with the `base-vega` style
- Base UI primitives for behavior and accessibility
- Tailwind CSS v4, with theme tokens for color, radius and easing
- Tabler icons

## AI assistants

Every page has a Markdown version, and `/llms.txt` lists them all. Assistants that support MCP can connect to the [HextaUI MCP server](https://hextaui.com/docs/mcp) to search the docs, read component APIs and get install commands.

## License

HextaUI is open source under the [MIT license](https://github.com/preetsuthar17/hextaui/blob/main/LICENSE), free for personal and commercial projects.