# Honest UI Documentation

> Honest UI provides copied React components and package-based charts, icons, logos, vectors, and shaders. The documentation explains what you own, what remains a dependency, and what your application still needs to verify.

## Developer Resources
- [Developer resource index](https://www.honestui.com/developers) - Choose the Honest UI CLI, npm package, REST API, OpenAPI specification, or agent documentation.
- [Developer guide, authentication, and REST API policy](https://www.honestui.com/docs/developers.md) - Confirm the public API's access model, integrate with its resources, parse errors, and plan for version changes.
- [REST API v1](https://www.honestui.com/api/v1) - Discover current public API resources.
- [OpenAPI 3.1 specification](https://www.honestui.com/openapi.json) - Read the machine-readable HTTP contract.
- [MCP Streamable HTTP server](https://www.honestui.com/mcp) - Discover exact registry names and retrieve component source with typed, read-only tools.
- [MCP Server Card (SEP-2127)](https://www.honestui.com/mcp/server-card) - Auto-configure an MCP client from the published connection metadata.
- [AI Catalog](https://www.honestui.com/.well-known/ai-catalog.json) - Discover Honest UI MCP servers at the domain level.
- [Official honestui package](https://www.npmjs.com/package/honestui) - Run the published CLI or import package-backed collections.

## When to use Honest UI
- Use the Honest UI CLI when a React project needs editable UI or animated component source under its own version control.
- Use the `honestui` package when a project needs maintained charts, icons, logos, vectors, or shaders.
- Use the REST API or OpenAPI document when software needs to discover registry items or initialization presets without running the CLI.
- Use the MCP server when an agent can call tools directly and needs to list exact registry names or retrieve component source.
- Use the Markdown guides and Honest UI skill when an agent needs installation, customization, accessibility, fallback, or verification guidance.

## How to use Honest UI
1. Read the getting-started guide before choosing a delivery model.
2. Run `npx honestui@latest init` for copied components, or install `honestui` for a package-backed collection.
3. Inspect a CLI change with `--dry-run` before writing files when the project already contains related configuration.
4. Verify the final application behavior, accessibility, styling, fallbacks, and tests; copied source does not transfer those product decisions back to Honest UI.

For MCP clients, connect to `https://www.honestui.com/mcp` over Streamable HTTP. Call `list_registry_items` first when the name is unknown, then call `get_registry_item` with an exact returned name. Both tools are public, read-only, and idempotent; no credential is required.

## Start Here
- [Accessibility](https://www.honestui.com/docs/accessibility.md) - Understand Honest UI's accessibility foundation and the checks your application still needs.
- [React UI Components](https://www.honestui.com/docs/component-guide.md) - Browse open-source React UI components for forms, navigation, overlays, feedback, and data display. Copy the source into your project and adapt it.
- [Contributing Guide](https://www.honestui.com/docs/contributing.md) - How to make focused, useful contributions to Honest UI.
- [Developer Resources](https://www.honestui.com/docs/developers.md) - Choose the Honest UI CLI, REST API, MCP server, and agent documentation for your development task.
- [Get Started](https://www.honestui.com/docs/get-started.md) - Set up Honest UI, add a component, and verify the files in your project.
- [Introduction](https://www.honestui.com/docs.md) - Understand what Honest UI provides, how the code is distributed, and where to begin.
- [Styling](https://www.honestui.com/docs/styling.md) - Customize Honest UI's semantic CSS tokens, themes, and copied component classes.

## Components
- [Accordion](https://www.honestui.com/docs/components/accordion.md) - Show related sections that people can expand and collapse as needed.
- [Alert Dialog](https://www.honestui.com/docs/components/alert-dialog.md) - Interrupt work with a modal decision that must be answered before anything else can continue.
- [Alert](https://www.honestui.com/docs/components/alert.md) - Present important page-level information or require a decision before work continues.
- [Autocomplete](https://www.honestui.com/docs/components/autocomplete.md) - Help people complete typed input with relevant suggestions.
- [Avatar](https://www.honestui.com/docs/components/avatar.md) - Represent a person, team, account, or organization with an image and fallback.
- [Badge](https://www.honestui.com/docs/components/badge.md) - Show a compact status, count, category, or piece of metadata.
- [Breadcrumb](https://www.honestui.com/docs/components/breadcrumb.md) - Show the current page's position and provide links to its parent levels.
- [Button](https://www.honestui.com/docs/components/button.md) - Trigger an action, submit a form, or open another control.
- [Card](https://www.honestui.com/docs/components/card.md) - Group related information and actions in a distinct surface.
- [Checkbox](https://www.honestui.com/docs/components/checkbox.md) - Let people turn independent options on or off or select several related choices.
- [Collapsible](https://www.honestui.com/docs/components/collapsible.md) - Let people show or hide one optional section of content.
- [Color Picker](https://www.honestui.com/docs/components/color-picker.md) - Choose a precise color, opacity, and output format.
- [Combobox](https://www.honestui.com/docs/components/combobox.md) - Search and select one or more values from a predefined list.
- [Command](https://www.honestui.com/docs/components/command.md) - Search and run actions from an inline list or command palette.
- [Context Menu](https://www.honestui.com/docs/components/context-menu.md) - Show actions at a pointer location with keyboard and touch access.
- [Dialog](https://www.honestui.com/docs/components/dialog.md) - Focus attention on a short task or decision without leaving the current page.
- [Empty](https://www.honestui.com/docs/components/empty.md) - Explain why a section is empty and help people take the next useful action.
- [Field](https://www.honestui.com/docs/components/field.md) - Connect a form control with its label, instructions, and validation message.
- [Fieldset](https://www.honestui.com/docs/components/fieldset.md) - Group related form controls under one visible question or label.
- [Form](https://www.honestui.com/docs/components/form.md) - Apply consistent structure to a native HTML form without hiding submission or validation logic.
- [Frame](https://www.honestui.com/docs/components/frame.md) - Place related content inside a bounded media or interface frame.
- [Group](https://www.honestui.com/docs/components/group.md) - Join related controls into one visually connected set.
- [Input Group](https://www.honestui.com/docs/components/input-group.md) - Add visible context or actions around an input without separating them from the control.
- [Input](https://www.honestui.com/docs/components/input.md) - Collect a short, single-line value such as a name, email address, or search term.
- [Kanban List](https://www.honestui.com/docs/components/kanban-list.md) - Reorder items within and between keyboard- and pointer-operable lists.
- [Label](https://www.honestui.com/docs/components/label.md) - Give a form control a visible name and a larger activation target.
- [Menu](https://www.honestui.com/docs/components/menu.md) - Present a compact list of actions with keyboard navigation.
- [Meter](https://www.honestui.com/docs/components/meter.md) - Show a known measurement within a fixed range, such as storage or a score.
- [Number Field](https://www.honestui.com/docs/components/number-field.md) - Enter or adjust a number with typing, step buttons, or a scrub control.
- [Pagination](https://www.honestui.com/docs/components/pagination.md) - Move through a collection that is split into numbered pages.
- [Popover](https://www.honestui.com/docs/components/popover.md) - Show supporting information or controls in a non-modal popup.
- [Preview Card](https://www.honestui.com/docs/components/preview-card.md) - Preview a linked destination on hover or focus without changing the link's behavior.
- [Progress](https://www.honestui.com/docs/components/progress.md) - Show how much of a task is complete or that work is still in progress.
- [Radio Group](https://www.honestui.com/docs/components/radio-group.md) - Let people choose one option from a visible set of mutually exclusive choices.
- [Scroll Area](https://www.honestui.com/docs/components/scroll-area.md) - Keep overflowing content scrollable while applying consistent scrollbar styling.
- [Select](https://www.honestui.com/docs/components/select.md) - Choose one value from a known list in a compact popup.
- [Separator](https://www.honestui.com/docs/components/separator.md) - Divide related sections visually or semantically.
- [Sheet](https://www.honestui.com/docs/components/sheet.md) - Open a side panel for details, settings, or a secondary workflow.
- [Skeleton](https://www.honestui.com/docs/components/skeleton.md) - Reserve layout space while content is loading.
- [Slider](https://www.honestui.com/docs/components/slider.md) - Choose one value or a range along a bounded scale.
- [Switch](https://www.honestui.com/docs/components/switch.md) - Turn a setting on or off and show its current state.
- [Table](https://www.honestui.com/docs/components/table.md) - Present data whose rows and columns have meaningful relationships.
- [Tabs](https://www.honestui.com/docs/components/tabs.md) - Switch between related panels while keeping the same page context.
- [Textarea](https://www.honestui.com/docs/components/textarea.md) - Collect text that may span more than one line.
- [Toast](https://www.honestui.com/docs/components/toast.md) - Show brief, noncritical feedback after an action or background event.
- [Toggle](https://www.honestui.com/docs/components/toggle.md) - Turn a pressed state on or off, alone or within a related group.
- [Toolbar](https://www.honestui.com/docs/components/toolbar.md) - Group compact controls that act on the same surface or object.
- [Tooltip](https://www.honestui.com/docs/components/tooltip.md) - Show a brief, nonessential hint when a control receives hover or keyboard focus.

## Charts
- [Chart Config](https://www.honestui.com/docs/charts/chart-config.md) - Define labels, theme colors, and icons for each chart series.
- [React Charts](https://www.honestui.com/docs/charts.md) - Browse composable React chart components built on Apache ECharts, including line, bar, area, pie, scatter, and heatmap charts.
- [Installation](https://www.honestui.com/docs/charts/installation.md) - Install Honest UI charts and render a verified first chart.
- [Area Chart Examples](https://www.honestui.com/docs/charts/area-chart/blocks.md) - Complete area chart layouts with realistic structure and sample data.
- [Area Chart](https://www.honestui.com/docs/charts/area-chart/static.md) - Show trends where magnitude or contribution to a total matters.
- [Bar Chart Examples](https://www.honestui.com/docs/charts/bar-chart/blocks.md) - Complete bar chart layouts for category comparison and ranked values.
- [Bar Chart](https://www.honestui.com/docs/charts/bar-chart/static.md) - Compare values across categories with grouped, stacked, or horizontal bars.
- [Heatmap](https://www.honestui.com/docs/charts/heatmap/static.md) - A composable heatmap for finding patterns across two categorical dimensions.
- [Pie Chart Examples](https://www.honestui.com/docs/charts/pie-chart/blocks.md) - Complete pie and donut layouts for simple part-to-whole relationships.
- [Pie Chart](https://www.honestui.com/docs/charts/pie-chart/static.md) - Show a simple part-to-whole relationship with a small number of categories.
- [Line Chart Examples](https://www.honestui.com/docs/charts/line-chart/blocks.md) - Complete line chart layouts for trends, forecasts, and comparison.
- [Line Chart](https://www.honestui.com/docs/charts/line-chart/static.md) - Show trends and rates of change across an ordered dimension.
- [Scatter Chart Examples](https://www.honestui.com/docs/charts/scatter-chart/blocks.md) - Complete scatter and bubble layouts for relationships, clusters, and prioritization.
- [Scatter Chart](https://www.honestui.com/docs/charts/scatter-chart/static.md) - A composable scatter chart for relationships, clusters, bubbles, and quadrant analysis.
- [Brush](https://www.honestui.com/docs/charts/ui/brush.md) - Filter a Cartesian chart to a selected data range.
- [Dots](https://www.honestui.com/docs/charts/ui/dots.md) - Mark resting and pointer-active data points in line and area charts.
- [Legend](https://www.honestui.com/docs/charts/ui/legend.md) - Identify each chart series and optionally control pointer selection.
- [Tooltip](https://www.honestui.com/docs/charts/ui/tooltip.md) - Show values for the chart point or category under the pointer.

## Icons
- [Accessibility](https://www.honestui.com/docs/icons/accessibility.md) - Use Honest UI icons, logos, and vectors without hiding meaning from assistive technology.
- [Icons](https://www.honestui.com/docs/icons.md) - Choose and use React icons, logos, and vectors from dedicated package entry points.
- [Installation](https://www.honestui.com/docs/icons/installation.md) - Add Honest UI icons, logos, and vectors to your React project.
- [Logos](https://www.honestui.com/docs/icons/logos.md) - Browse and use brand marks, flags, payment symbols, and technology logos as React components.
- [Usage](https://www.honestui.com/docs/icons/usage.md) - Choose, style, and compose Honest UI icons, logos, and vectors in React.
- [Vectors](https://www.honestui.com/docs/icons/vectors.md) - Browse and use decorative shapes, illustrations, patterns, and hand-drawn accents as React components.

## Animated Components
- [Action Swap](https://www.honestui.com/docs/animated/action-swap.md) - Cycle an action's label and icon with blur, roll, or letter-cascade transitions.
- [Bouncy Accordion](https://www.honestui.com/docs/animated/bouncy-accordion.md) - A connected accordion whose rows separate and settle around expanded content.
- [Chromatic Text Reveal](https://www.honestui.com/docs/animated/chromatic-text-reveal.md) - Reveal rotating words with a moving multicolor edge.
- [Dock](https://www.honestui.com/docs/animated/dock.md) - A compact action dock with a shared animated active indicator.
- [Animated Components](https://www.honestui.com/docs/animated.md) - Copied React components that use motion to clarify state and spatial change.
- [Installation](https://www.honestui.com/docs/animated/installation.md) - Copy an animated component into your project and verify its fallback behavior.
- [Magnetic](https://www.honestui.com/docs/animated/magnetic.md) - Add subtle pointer attraction to a child element.
- [Marquee](https://www.honestui.com/docs/animated/marquee.md) - Loop a row or column of content with optional fade and hover pause.
- [Number Ticker](https://www.honestui.com/docs/animated/number-ticker.md) - Roll changing digits independently while preserving place value.
- [Shared Layout Background](https://www.honestui.com/docs/animated/shared-layout-bg.md) - Move one hover background between related rows.
- [Text Reveal](https://www.honestui.com/docs/animated/text-reveal.md) - Reveal text by word or character with stagger, blur, and spring motion.
- [Text Shimmer](https://www.honestui.com/docs/animated/text-shimmer.md) - Sweep a theme-aware highlight through a short text label.
- [Tilt Card](https://www.honestui.com/docs/animated/tilt-card.md) - Add pointer-responsive perspective and optional glare to a card.

## Shaders
- [Gradient Blinds](https://www.honestui.com/docs/shaders/blinds.md) - Render a pointer-lit gradient through adjustable bands of color and distortion.
- [Chromatic Image](https://www.honestui.com/docs/shaders/chromatic-image.md) - Warp an image toward the pointer with chromatic RGB separation.
- [Dither](https://www.honestui.com/docs/shaders/dither.md) - Dither images or animated procedural waves with configurable color and pattern controls.
- [Grainient](https://www.honestui.com/docs/shaders/grainient.md) - Blend three colors into a warped, animated gradient with controllable film grain.
- [Shaders](https://www.honestui.com/docs/shaders.md) - Add optional WebGL backgrounds and media effects through a dedicated package entry point.
- [Installation](https://www.honestui.com/docs/shaders/installation.md) - Install Honest UI shaders and provide sizing, motion, and WebGL fallbacks.
- [Light Rays](https://www.honestui.com/docs/shaders/light-rays.md) - Cast soft animated rays from any edge or corner.

## Agent Resources
- [Developer Resources](https://www.honestui.com/docs/developers.md)
- [OpenAPI specification](https://www.honestui.com/openapi.json)
- [MCP Streamable HTTP server](https://www.honestui.com/mcp)
- [MCP Server Card (SEP-2127)](https://www.honestui.com/mcp/server-card)
- [AI Catalog](https://www.honestui.com/.well-known/ai-catalog.json)
- [Agent Skills discovery index](https://www.honestui.com/.well-known/agent-skills/index.json)
- [Full documentation snapshot](https://www.honestui.com/llms-full.txt)
- [Agent skill](https://www.honestui.com/skill.md)