---
title: Introduction
description: Base UI + StyleX components you own.
sidebar:
  order: 0
---

An open-source UI library following the shadcn code-ownership model — components
are copied into your project as editable source — built on Base UI (headless
behavior and accessibility) and StyleX (compile-time atomic CSS).

## Install

```bash
npx @madeui/cli init
npx @madeui/cli add button
```

`init` wires the StyleX build into your Next.js or Vite app and copies the
design tokens; `add` copies components into `components/ui/`. Once the build
is set up, the shadcn CLI works too (`npx shadcn@latest add @madeui/button`) —
see [Installation](/docs/installation).

## Guides

- [Installation](/docs/installation) — StyleX build setup for Next.js and Vite,
  first components.
- [Customization](/docs/customization) — tokens, themes, the `style` prop, and
  editing component source.
- [Dark mode](/docs/dark-mode) — apply the dark theme without a flash.
- [CLI](/docs/cli) — `madeui init`, `add`, `list`.
- [For AI agents](/docs/agents) — the conventions agents rely on.

## Components

- [Accordion](/docs/components/accordion)
- [Alert](/docs/components/alert)
- [Alert Dialog](/docs/components/alert-dialog)
- [Aspect Ratio](/docs/components/aspect-ratio)
- [Autocomplete](/docs/components/autocomplete)
- [Avatar](/docs/components/avatar)
- [Badge](/docs/components/badge)
- [Breadcrumb](/docs/components/breadcrumb)
- [Button](/docs/components/button)
- [Button Group](/docs/components/button-group)
- [Card](/docs/components/card)
- [Checkbox](/docs/components/checkbox)
- [Checkbox Group](/docs/components/checkbox-group)
- [Collapsible](/docs/components/collapsible)
- [Combobox](/docs/components/combobox)
- [Command](/docs/components/command)
- [Context Menu](/docs/components/context-menu)
- [Dialog](/docs/components/dialog)
- [Drawer](/docs/components/drawer)
- [Dropdown Menu](/docs/components/dropdown-menu)
- [Empty](/docs/components/empty)
- [Field](/docs/components/field)
- [Form](/docs/components/form)
- [Hover Card](/docs/components/hover-card)
- [Input](/docs/components/input)
- [Input Group](/docs/components/input-group)
- [Input OTP](/docs/components/input-otp)
- [Item](/docs/components/item)
- [Kbd](/docs/components/kbd)
- [Label](/docs/components/label)
- [Menubar](/docs/components/menubar)
- [Meter](/docs/components/meter)
- [Navigation Menu](/docs/components/navigation-menu)
- [Number Field](/docs/components/number-field)
- [Pagination](/docs/components/pagination)
- [Popover](/docs/components/popover)
- [Progress](/docs/components/progress)
- [Radio Group](/docs/components/radio-group)
- [Scroll Area](/docs/components/scroll-area)
- [Select](/docs/components/select)
- [Separator](/docs/components/separator)
- [Sheet](/docs/components/sheet)
- [Skeleton](/docs/components/skeleton)
- [Slider](/docs/components/slider)
- [Spinner](/docs/components/spinner)
- [Switch](/docs/components/switch)
- [Table](/docs/components/table)
- [Tabs](/docs/components/tabs)
- [Textarea](/docs/components/textarea)
- [Toast](/docs/components/toast)
- [Toggle](/docs/components/toggle)
- [Toggle Group](/docs/components/toggle-group)
- [Toolbar](/docs/components/toolbar)
- [Tooltip](/docs/components/tooltip)