# Mako UI

**Mako UI** is Rubix's React component library: 55 accessible, composable components for your React apps, shipped as the `mako-ui` npm package.

## Overview

- [Introduction](https://mako-ui.rubix.com/docs/index.md): What Mako UI is, what the package contains, and what it requires.
- [Get Started](https://mako-ui.rubix.com/docs/get-started.md): Installation, theme and font setup, entry points, portal isolation.
- [Styling](https://mako-ui.rubix.com/docs/styling.md): Token layers, the semantic color system, the Tailwind ramp override, overriding tokens, type scale.
- [Colors](https://mako-ui.rubix.com/docs/colors.md): The Rubix palette, the semantic tokens built on top of it, and which Tailwind ramp names it rebinds.
- [Typography](https://mako-ui.rubix.com/docs/typography.md): The Mako typeface, the three font variables components read, and the type scale — including the 2px bump.
- [Icons](https://mako-ui.rubix.com/docs/icons.md): The Rubix icon set — 228 icons, one module per icon, and the conventions for sizing, colouring and labelling them.
- [AI Agents](https://mako-ui.rubix.com/docs/ai-agents.md): Version-matched docs bundled in the package, and how to point coding agents at them.
- [Changelog](https://mako-ui.rubix.com/docs/changelog.md): Releases, breaking changes, and upgrade notes.

## Components

- [Accordion](https://mako-ui.rubix.com/docs/components/accordion.md): A set of collapsible panels with headings.
- [Alert](https://mako-ui.rubix.com/docs/components/alert.md): A callout for displaying important information.
- [Alert Dialog](https://mako-ui.rubix.com/docs/components/alert-dialog.md): A modal dialog that interrupts the user workflow for critical confirmations.
- [Autocomplete](https://mako-ui.rubix.com/docs/components/autocomplete.md): An input that suggests options as you type.
- [Avatar](https://mako-ui.rubix.com/docs/components/avatar.md): A visual representation of a user or entity.
- [Badge](https://mako-ui.rubix.com/docs/components/badge.md): A small status indicator or label component.
- [Breadcrumb](https://mako-ui.rubix.com/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://mako-ui.rubix.com/docs/components/button.md): A button or a component that looks like a button.
- [Calendar](https://mako-ui.rubix.com/docs/components/calendar.md): A date picker for selecting single dates, ranges, or multiple dates.
- [Card](https://mako-ui.rubix.com/docs/components/card.md): A content container for grouping related information.
- [Checkbox](https://mako-ui.rubix.com/docs/components/checkbox.md): A binary toggle input for selecting one or multiple options.
- [Checkbox Group](https://mako-ui.rubix.com/docs/components/checkbox-group.md): A collection of related checkboxes with group-level control.
- [Collapsible](https://mako-ui.rubix.com/docs/components/collapsible.md): A component that toggles visibility of content sections.
- [Combobox](https://mako-ui.rubix.com/docs/components/combobox.md): An input combined with a list of predefined items to select.
- [Command](https://mako-ui.rubix.com/docs/components/command.md): A command palette component built with Dialog and Autocomplete for searching and executing commands.
- [Context Menu](https://mako-ui.rubix.com/docs/components/context-menu.md): A menu that appears at the pointer on right click or long press.
- [Date Picker](https://mako-ui.rubix.com/docs/components/date-picker.md): A date selection component, often combined with a calendar in a popover or input.
- [Dialog](https://mako-ui.rubix.com/docs/components/dialog.md): A modal overlay for displaying content that requires user interaction.
- [Drawer](https://mako-ui.rubix.com/docs/components/drawer.md): A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
- [Empty](https://mako-ui.rubix.com/docs/components/empty.md): A container for displaying empty state information.
- [Field](https://mako-ui.rubix.com/docs/components/field.md): A wrapper component for form inputs with labels and validation.
- [Fieldset](https://mako-ui.rubix.com/docs/components/fieldset.md): A group of related form fields with a common label.
- [Form](https://mako-ui.rubix.com/docs/components/form.md): A complete form implementation with validation and submission handling.
- [Frame](https://mako-ui.rubix.com/docs/components/frame.md): A container component for displaying content in a frame.
- [Group](https://mako-ui.rubix.com/docs/components/group.md): A container component for grouping related content with consistent styling.
- [Input](https://mako-ui.rubix.com/docs/components/input.md): A native input element.
- [Input Group](https://mako-ui.rubix.com/docs/components/input-group.md): A flexible component for grouping inputs with addons, buttons, and other elements.
- [Kbd](https://mako-ui.rubix.com/docs/components/kbd.md): A component for displaying keyboard keys and shortcuts.
- [Label](https://mako-ui.rubix.com/docs/components/label.md): Renders an accessible label associated with controls.
- [Menu](https://mako-ui.rubix.com/docs/components/menu.md): A list of actions or options revealed on demand.
- [Meter](https://mako-ui.rubix.com/docs/components/meter.md): A visual representation of a value within a known range.
- [Number Field](https://mako-ui.rubix.com/docs/components/number-field.md): A specialized input for numeric values with increment/decrement controls.
- [OTP Field](https://mako-ui.rubix.com/docs/components/otp-field.md): A segmented input for one-time passwords and verification codes.
- [Pagination](https://mako-ui.rubix.com/docs/components/pagination.md): A pagination with page navigation, next and previous links.
- [Popover](https://mako-ui.rubix.com/docs/components/popover.md): A floating container that appears near a trigger element.
- [Preview Card](https://mako-ui.rubix.com/docs/components/preview-card.md): A rich preview component for displaying linked content.
- [Progress](https://mako-ui.rubix.com/docs/components/progress.md): A visual indicator showing the completion status of a task.
- [Radio Group](https://mako-ui.rubix.com/docs/components/radio-group.md): A set of mutually exclusive options presented as radio buttons.
- [Scroll Area](https://mako-ui.rubix.com/docs/components/scroll-area.md): A container with custom scrollbars for overflow content.
- [Select](https://mako-ui.rubix.com/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu.
- [Separator](https://mako-ui.rubix.com/docs/components/separator.md): A visual divider for separating content sections.
- [Sheet](https://mako-ui.rubix.com/docs/components/sheet.md): A flyout that opens from the side of the screen, based on the dialog component.
- [Skeleton](https://mako-ui.rubix.com/docs/components/skeleton.md): A placeholder for loading content.
- [Slider](https://mako-ui.rubix.com/docs/components/slider.md): A draggable control for selecting values from a continuous range.
- [Spinner](https://mako-ui.rubix.com/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Stepper](https://mako-ui.rubix.com/docs/components/stepper.md): A sequence of steps that shows where the user is in a multi-stage flow.
- [Switch](https://mako-ui.rubix.com/docs/components/switch.md): A toggle control for binary on/off states.
- [Table](https://mako-ui.rubix.com/docs/components/table.md): A structured data display component with rows and columns.
- [Tabs](https://mako-ui.rubix.com/docs/components/tabs.md): A navigation component for switching between different views or content panels.
- [Textarea](https://mako-ui.rubix.com/docs/components/textarea.md): A multi-line text input for longer content.
- [Toast](https://mako-ui.rubix.com/docs/components/toast.md): A temporary notification message that appears and disappears automatically.
- [Toggle](https://mako-ui.rubix.com/docs/components/toggle.md): A button that switches between two states.
- [Toggle Group](https://mako-ui.rubix.com/docs/components/toggle-group.md): A group of toggle buttons where one or multiple can be selected.
- [Toolbar](https://mako-ui.rubix.com/docs/components/toolbar.md): A container for grouping related actions or controls.
- [Tooltip](https://mako-ui.rubix.com/docs/components/tooltip.md): A small overlay that provides contextual information on hover or focus.

## Notes

- Every page above is served as raw Markdown at the `.md` URL shown; drop the `.md` for the rendered page.
- Components are imported one module at a time: `import { Button } from "mako-ui/components/button"`. There is no barrel export.