---
title: "Components"
description: "Every component and block of @arbol-ai/ui, by category, each with live examples and the code to paste."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

Each page shows a component's live examples, in the library's own theme, and the code for each one,
importing from the package entry that publishes it. The same examples run in the library's tests.

## Actions

- [Button](https://epidermis.getarbol.com/components/actions/button/)
- [CopyButton](https://epidermis.getarbol.com/components/actions/copy-button/)
- [IconButton](https://epidermis.getarbol.com/components/actions/icon-button/)

## Forms

- [Checkbox](https://epidermis.getarbol.com/components/forms/checkbox/)
- [Combo box](https://epidermis.getarbol.com/components/forms/combo-box/)
- [Field](https://epidermis.getarbol.com/components/forms/field/)
- [Form](https://epidermis.getarbol.com/components/forms/form/)
- [Form save bar](https://epidermis.getarbol.com/components/forms/form-save-bar/)
- [Number field](https://epidermis.getarbol.com/components/forms/number-field/)
- [Radio group](https://epidermis.getarbol.com/components/forms/radio-group/)
- [Search field](https://epidermis.getarbol.com/components/forms/search-field/)
- [Segmented control](https://epidermis.getarbol.com/components/forms/segmented-control/)
- [Select](https://epidermis.getarbol.com/components/forms/select/)
- [Slider](https://epidermis.getarbol.com/components/forms/slider/)
- [Switch](https://epidermis.getarbol.com/components/forms/switch/)
- [TanStack Form](https://epidermis.getarbol.com/components/forms/app-form/)
- [Text field](https://epidermis.getarbol.com/components/forms/text-field/)

## Pickers

- [Calendar](https://epidermis.getarbol.com/components/pickers/calendar/)
- [ColorSwatchPicker](https://epidermis.getarbol.com/components/pickers/color-swatch-picker/)
- [DateField](https://epidermis.getarbol.com/components/pickers/date-field/)
- [DatePicker](https://epidermis.getarbol.com/components/pickers/date-picker/)
- [DateRangeFilter](https://epidermis.getarbol.com/components/pickers/date-range-filter/)
- [FileUploadButton](https://epidermis.getarbol.com/components/pickers/file-trigger/)
- [PhoneField](https://epidermis.getarbol.com/components/pickers/phone-field/)

## Overlays

- [CommandPalette](https://epidermis.getarbol.com/components/overlays/command-palette/)
- [ConfirmDialog](https://epidermis.getarbol.com/components/overlays/confirm-dialog/)
- [InfoTip](https://epidermis.getarbol.com/components/overlays/info-tip/)
- [Menu](https://epidermis.getarbol.com/components/overlays/menu/)
- [Overlay](https://epidermis.getarbol.com/components/overlays/overlay/)
- [Popover](https://epidermis.getarbol.com/components/overlays/popover/)
- [RowMenu](https://epidermis.getarbol.com/components/overlays/row-menu/)
- [Tooltip](https://epidermis.getarbol.com/components/overlays/tooltip/)

## Navigation

- [Breadcrumbs](https://epidermis.getarbol.com/components/navigation/breadcrumbs/)
- [Link](https://epidermis.getarbol.com/components/navigation/link/)
- [Pagination](https://epidermis.getarbol.com/components/navigation/pagination/)
- [Tabs](https://epidermis.getarbol.com/components/navigation/tabs/)

## Collections

- [Filter chips](https://epidermis.getarbol.com/components/collections/filter-chips/)
- [Pick list](https://epidermis.getarbol.com/components/collections/pick-list/)
- [Tag group](https://epidermis.getarbol.com/components/collections/tag-group/)

## Data

- [Avatar](https://epidermis.getarbol.com/components/data/avatar/)
- [Badge](https://epidermis.getarbol.com/components/data/badge/)
- [ColumnPicker](https://epidermis.getarbol.com/components/data/column-picker/)
- [CountBadge](https://epidermis.getarbol.com/components/data/count-badge/)
- [DataTable](https://epidermis.getarbol.com/components/data/data-table/)
- [FilterSelect](https://epidermis.getarbol.com/components/data/filter-select/)
- [FoldingFilters](https://epidermis.getarbol.com/components/data/folding-filters/)
- [Kbd](https://epidermis.getarbol.com/components/data/kbd/)
- [Stat](https://epidermis.getarbol.com/components/data/stat/)
- [StatusDot](https://epidermis.getarbol.com/components/data/status-dot/)
- [Table](https://epidermis.getarbol.com/components/data/table/)
- [TanStack Query](https://epidermis.getarbol.com/components/data/query-view/)

## Feedback

- [EmptyState](https://epidermis.getarbol.com/components/feedback/empty-state/)
- [Notice](https://epidermis.getarbol.com/components/feedback/notice/)
- [ProgressBar](https://epidermis.getarbol.com/components/feedback/progress-bar/)
- [Skeleton](https://epidermis.getarbol.com/components/feedback/skeleton/)
- [Spinner](https://epidermis.getarbol.com/components/feedback/spinner/)
- [State screens](https://epidermis.getarbol.com/components/feedback/state-screen/)
- [TableSkeleton](https://epidermis.getarbol.com/components/feedback/table-skeleton/)
- [Toast](https://epidermis.getarbol.com/components/feedback/toast/)

## Layout

- [App shell](https://epidermis.getarbol.com/components/layout/app-shell/)
- [Card](https://epidermis.getarbol.com/components/layout/card/)
- [Disclosure](https://epidermis.getarbol.com/components/layout/disclosure/)
- [Page](https://epidermis.getarbol.com/components/layout/page/)
- [Save bar](https://epidermis.getarbol.com/components/layout/save-bar/)
- [Section header](https://epidermis.getarbol.com/components/layout/section-header/)
- [Separator](https://epidermis.getarbol.com/components/layout/separator/)
- [Settings](https://epidermis.getarbol.com/components/layout/settings/)
- [TanStack Router](https://epidermis.getarbol.com/components/layout/router/)

## Charts

- [BarChart](https://epidermis.getarbol.com/components/charts/bar-chart/)
- [CalendarHeatmap](https://epidermis.getarbol.com/components/charts/calendar-heatmap/)
- [Chart](https://epidermis.getarbol.com/components/charts/chart/)
- [ChartPanel](https://epidermis.getarbol.com/components/charts/chart-panel/)
- [DonutChart](https://epidermis.getarbol.com/components/charts/donut-chart/)
- [FunnelChart](https://epidermis.getarbol.com/components/charts/funnel-chart/)
- [GaugeChart](https://epidermis.getarbol.com/components/charts/gauge-chart/)
- [Sparkline](https://epidermis.getarbol.com/components/charts/sparkline/)
- [TrendChart](https://epidermis.getarbol.com/components/charts/trend-chart/)

## Blocks

- [Account menu](https://epidermis.getarbol.com/components/blocks/account-menu/)
- [BreakdownList](https://epidermis.getarbol.com/components/blocks/breakdown-list/)
- [ChartCard](https://epidermis.getarbol.com/components/blocks/chart-card/)
- [Collapsible card](https://epidermis.getarbol.com/components/blocks/collapsible-card/)
- [DeleteDialog](https://epidermis.getarbol.com/components/blocks/delete-dialog/)
- [Editable title](https://epidermis.getarbol.com/components/blocks/editable-title/)
- [FormDialog and FormSheet](https://epidermis.getarbol.com/components/blocks/form-dialog/)
- [KpiGrid](https://epidermis.getarbol.com/components/blocks/kpi-grid/)
- [ListPage](https://epidermis.getarbol.com/components/blocks/list-page/)
- [ListTable](https://epidermis.getarbol.com/components/blocks/list-table/)
- [ListToolbar](https://epidermis.getarbol.com/components/blocks/list-toolbar/)
- [Logo tile](https://epidermis.getarbol.com/components/blocks/logo-tile/)
- [Organization menu](https://epidermis.getarbol.com/components/blocks/organization-menu/)
- [OverlayActions](https://epidermis.getarbol.com/components/blocks/overlay-actions/)
- [OverlayLayout](https://epidermis.getarbol.com/components/blocks/overlay-layout/)
- [PeriodPicker](https://epidermis.getarbol.com/components/blocks/period-picker/)
- [Product mark](https://epidermis.getarbol.com/components/blocks/product-mark/)
- [Property list](https://epidermis.getarbol.com/components/blocks/property-list/)
- [Record header](https://epidermis.getarbol.com/components/blocks/record-header/)
- [Record layout](https://epidermis.getarbol.com/components/blocks/record-layout/)
- [Record page](https://epidermis.getarbol.com/components/blocks/record-page/)
- [Record pager](https://epidermis.getarbol.com/components/blocks/record-pager/)
- [ReportHeader](https://epidermis.getarbol.com/components/blocks/report/)
- [ReportPage](https://epidermis.getarbol.com/components/blocks/report-page/)
- [Route states](https://epidermis.getarbol.com/components/blocks/route-states/)
- [Section nav](https://epidermis.getarbol.com/components/blocks/section-nav/)
- [SelectionBar](https://epidermis.getarbol.com/components/blocks/selection-bar/)
- [Settings card](https://epidermis.getarbol.com/components/blocks/settings-card/)
- [Settings links](https://epidermis.getarbol.com/components/blocks/settings-links/)
- [Settings page](https://epidermis.getarbol.com/components/blocks/settings-page/)

Source: https://epidermis.getarbol.com/components/index.mdx