---
title: "UI Component Usage Statistics 2026: 49 Blocks Analyzed"
description: "Which UI components the 49 HextaUI Pro React blocks import: Button in 46 (94%), Badge in 27, a median of 9 per block. Counted from source on October 22, 2026."
canonical: "https://hextaui.com/research/ui-component-usage"
last-updated: "2026-10-22"
---

# UI Component Usage Statistics 2026: 49 Blocks Analyzed

> Which UI components product screens are built from, counted from the source of 49 HextaUI Pro blocks (23 e-commerce, 16 AI and 10 settings) on October 22, 2026.

Canonical: https://hextaui.com/research/ui-component-usage
Last updated: 2026-10-22

Updated October 22, 2026. Sample: 49 blocks. Source: HextaUI Pro blocks (https://hextaui.com/blocks).

## Key findings

- Button is the most used UI component: 46 of the 49 HextaUI Pro blocks (94%) import it, followed by Badge (27) and Input (20). Denominator: all 49 blocks. [Link](https://hextaui.com/research/ui-component-usage#finding-most-used)
- The median HextaUI Pro block imports 9 different UI components, from 2 in Price, Product Gallery, Streaming and Variant Picker to 23 in Order Detail. Denominator: all 49 blocks. Each component counts once per block. [Link](https://hextaui.com/research/ui-component-usage#finding-components-per-block)
- The 49 blocks use 56 of the 65 HextaUI components (86%); 9 are never imported directly by a block: Aspect ratio, Carousel, Data table, Item, Menubar, Navigation menu, Pagination, Scroll area and Video player. Denominator: all 65 components in the HextaUI library. [Link](https://hextaui.com/research/ui-component-usage#finding-library-coverage)
- Apart from buttons, data display components are the most common kind of component: 39 of the 49 blocks (80%) use at least one. Chat components are the least common, in 4 (8%). Denominator: all 49 blocks. Kinds follow the categories in the HextaUI docs, leaving out kinds with fewer than 3 components; a block counts once per kind. [Link](https://hextaui.com/research/ui-component-usage#finding-component-kinds)
- E-commerce blocks import more components than the rest: a median of 10 for the 23 e-commerce blocks, against 7.5 for the other 26. Two groups: 23 e-commerce blocks and 26 others. Differences under 10% are reported as about the same. [Link](https://hextaui.com/research/ui-component-usage#finding-category-comparison)

Not reported because the sample is too small:

- Findings for single categories with fewer than 20 blocks: AI (16) and Settings (10). They appear in the tables only.

## Breakdowns

### Every component, ranked by use

How many of the 49 blocks import each HextaUI component. Ties are listed A to Z.

| Rank | Component | Blocks | Share |
| ---: | --- | ---: | ---: |
| 1 | Button | 46 | 94% |
| 2 | Badge | 27 | 55% |
| 3 | Input | 20 | 41% |
| 4 | Collapsible | 18 | 37% |
| 5 | Input group | 18 | 37% |
| 6 | Spinner | 18 | 37% |
| 7 | Field | 17 | 35% |
| 8 | Tooltip | 17 | 35% |
| 9 | Dropdown menu | 15 | 31% |
| 10 | Kbd | 15 | 31% |
| 11 | Number flow | 15 | 31% |
| 12 | Skeleton | 14 | 29% |
| 13 | Checkbox | 13 | 27% |
| 14 | Empty | 13 | 27% |
| 15 | Popover | 13 | 27% |
| 16 | Dialog | 12 | 24% |
| 17 | Select | 12 | 24% |
| 18 | Switch | 12 | 24% |
| 19 | Toast | 12 | 24% |
| 20 | Toggle group | 12 | 24% |
| 21 | Alert dialog | 9 | 18% |
| 22 | Avatar | 9 | 18% |
| 23 | Card | 9 | 18% |
| 24 | Sheet | 8 | 16% |
| 25 | Separator | 7 | 14% |
| 26 | Textarea | 7 | 14% |
| 27 | Progress | 6 | 12% |
| 28 | Radio group | 6 | 12% |
| 29 | Alert | 5 | 10% |
| 30 | Table | 5 | 10% |
| 31 | Slider | 4 | 8% |
| 32 | Breadcrumb | 3 | 6% |
| 33 | Bubble | 3 | 6% |
| 34 | Combobox | 3 | 6% |
| 35 | Message | 3 | 6% |
| 36 | Sidebar | 3 | 6% |
| 37 | Toggle | 3 | 6% |
| 38 | Attachment | 2 | 4% |
| 39 | Button group | 2 | 4% |
| 40 | Chart | 2 | 4% |
| 41 | Command | 2 | 4% |
| 42 | Date picker | 2 | 4% |
| 43 | Drawer | 2 | 4% |
| 44 | Hover card | 2 | 4% |
| 45 | Input OTP | 2 | 4% |
| 46 | Tabs | 2 | 4% |
| 47 | Tree | 2 | 4% |
| 48 | Accordion | 1 | 2% |
| 49 | Calendar | 1 | 2% |
| 50 | Context menu | 1 | 2% |
| 51 | Label | 1 | 2% |
| 52 | Marker | 1 | 2% |
| 53 | Message scroller | 1 | 2% |
| 54 | Native select | 1 | 2% |
| 55 | Questionnaire | 1 | 2% |
| 56 | Resizable | 1 | 2% |
| 57 | Aspect ratio | 0 | 0% |
| 58 | Carousel | 0 | 0% |
| 59 | Data table | 0 | 0% |
| 60 | Item | 0 | 0% |
| 61 | Menubar | 0 | 0% |
| 62 | Navigation menu | 0 | 0% |
| 63 | Pagination | 0 | 0% |
| 64 | Scroll area | 0 | 0% |
| 65 | Video player | 0 | 0% |

### Blocks by kind of component

Share of all 49 blocks that use at least one component of each kind.

| Kind of component | Components of this kind | Blocks | Share |
| --- | ---: | ---: | ---: |
| Buttons and actions | 4 | 46 | 94% |
| Data display components | 10 | 39 | 80% |
| Feedback components | 6 | 39 | 80% |
| Overlays | 11 | 37 | 76% |
| Form controls | 16 | 31 | 63% |
| Layout components | 7 | 22 | 45% |
| Navigation components | 5 | 7 | 14% |
| Chat components | 5 | 4 | 8% |

### Blocks by category

Categories with fewer than 20 blocks are shown here but get no findings of their own.

| Block category | Blocks | Median components per block |
| --- | ---: | ---: |
| E-commerce | 23 | 10 |
| AI | 16 | 6.5 |
| Settings | 10 | 10.5 |

### Blocks by number of components

Share of all 49 blocks.

| Components imported | Blocks | Share |
| --- | ---: | ---: |
| 1–4 components | 9 | 18% |
| 5–9 components | 17 | 35% |
| 10–14 components | 16 | 33% |
| 15 components or more | 7 | 14% |

### Every block

Ordered by the number of components imported, most first.

| Block | Category | Components | Imports |
| --- | --- | ---: | --- |
| Order Detail | E-commerce | 23 | Alert, Alert dialog, Avatar, Badge, Button, Button group, Card, Collapsible, Dropdown menu, Field, Input, Input group, Kbd, Select, Separator, Sheet, Skeleton, Spinner, Switch, Textarea, Toast, Toggle group, Tooltip |
| Discount Builder | E-commerce | 22 | Avatar, Badge, Button, Card, Checkbox, Collapsible, Combobox, Date picker, Dialog, Dropdown menu, Field, Input, Input group, Kbd, Number flow, Popover, Progress, Separator, Spinner, Switch, Toggle group, Tooltip |
| Product Editor | E-commerce | 20 | Alert dialog, Badge, Breadcrumb, Button, Card, Checkbox, Collapsible, Combobox, Dialog, Dropdown menu, Field, Input, Input group, Number flow, Popover, Progress, Select, Switch, Textarea, Toast |
| Orders Table | E-commerce | 19 | Alert dialog, Badge, Button, Button group, Checkbox, Dropdown menu, Empty, Input, Input group, Kbd, Number flow, Popover, Radio group, Select, Skeleton, Table, Tabs, Toast, Tooltip |
| Commerce Dashboard | E-commerce | 17 | Avatar, Badge, Breadcrumb, Button, Command, Dialog, Dropdown menu, Empty, Input group, Kbd, Number flow, Popover, Progress, Select, Sidebar, Table, Toast |
| API keys | Settings | 16 | Alert dialog, Badge, Button, Checkbox, Collapsible, Date picker, Dialog, Dropdown menu, Empty, Field, Input, Select, Skeleton, Toast, Toggle group, Tooltip |
| Refund | E-commerce | 15 | Alert, Alert dialog, Badge, Button, Checkbox, Collapsible, Empty, Field, Input group, Number flow, Select, Separator, Sheet, Switch, Textarea |
| Billing | Settings | 14 | Alert, Alert dialog, Badge, Button, Chart, Collapsible, Dialog, Field, Input, Input group, Skeleton, Slider, Switch, Table |
| Inventory | E-commerce | 14 | Badge, Button, Checkbox, Drawer, Empty, Input group, Kbd, Number flow, Popover, Select, Sheet, Skeleton, Table, Toggle group |
| Product Filters | E-commerce | 14 | Badge, Button, Checkbox, Collapsible, Empty, Input group, Number flow, Progress, Radio group, Select, Sheet, Slider, Switch, Toggle group |
| Diff Review | AI | 13 | Avatar, Button, Card, Dropdown menu, Empty, Input group, Kbd, Number flow, Popover, Spinner, Toggle group, Tooltip, Tree |
| Sales Overview | E-commerce | 13 | Avatar, Badge, Button, Calendar, Card, Chart, Number flow, Popover, Select, Skeleton, Table, Toggle group, Tooltip |
| Team | Settings | 13 | Alert dialog, Avatar, Badge, Button, Collapsible, Dropdown menu, Empty, Input, Input group, Label, Switch, Textarea, Toast |
| Artifact | AI | 12 | Button, Drawer, Dropdown menu, Kbd, Number flow, Resizable, Skeleton, Spinner, Tabs, Toast, Toggle, Tooltip |
| Chat Sidebar | AI | 12 | Avatar, Button, Collapsible, Command, Context menu, Dropdown menu, Hover card, Kbd, Sidebar, Spinner, Toast, Tooltip |
| Reviews | E-commerce | 12 | Badge, Button, Dialog, Empty, Field, Input, Input group, Number flow, Select, Textarea, Toggle, Toggle group |
| Models | Settings | 11 | Badge, Button, Collapsible, Dialog, Dropdown menu, Field, Input, Input group, Switch, Toggle group, Tooltip |
| Order Status | E-commerce | 11 | Badge, Button, Card, Checkbox, Collapsible, Field, Input, Radio group, Select, Separator, Textarea |
| Profile | Settings | 11 | Avatar, Badge, Button, Dialog, Field, Input, Input group, Input OTP, Slider, Spinner, Switch |
| Chat Thread | AI | 10 | Attachment, Bubble, Button, Kbd, Marker, Message, Message scroller, Popover, Toast, Tooltip |
| Notifications | Settings | 10 | Alert dialog, Badge, Button, Checkbox, Dialog, Field, Input, Select, Switch, Toggle group |
| Payment | E-commerce | 10 | Alert, Button, Checkbox, Dialog, Field, Input, Input group, Radio group, Separator, Spinner |
| Security | Settings | 10 | Alert dialog, Badge, Button, Checkbox, Dialog, Field, Input, Input group, Input OTP, Skeleton |
| Address Form | E-commerce | 9 | Badge, Button, Combobox, Field, Input, Input group, Native select, Radio group, Spinner |
| Prompt Input | AI | 9 | Attachment, Button, Dialog, Dropdown menu, Kbd, Number flow, Popover, Switch, Tooltip |
| Shipping Methods | E-commerce | 9 | Badge, Button, Empty, Field, Input, Popover, Radio group, Skeleton, Toggle group |
| Storefront | E-commerce | 8 | Accordion, Breadcrumb, Button, Empty, Input, Separator, Sheet, Toast |
| Tool Calls | AI | 8 | Button, Card, Collapsible, Kbd, Questionnaire, Spinner, Textarea, Tree |
| Code Block | AI | 7 | Badge, Button, Card, Kbd, Spinner, Toggle, Tooltip |
| Settings | Settings | 7 | Button, Collapsible, Dropdown menu, Empty, Field, Input group, Skeleton |
| Thinking | AI | 7 | Avatar, Badge, Bubble, Collapsible, Hover card, Message, Spinner |
| Cart | E-commerce | 6 | Badge, Button, Empty, Number flow, Sheet, Spinner |
| Checkout | E-commerce | 6 | Badge, Button, Checkbox, Field, Input, Spinner |
| Product Card | E-commerce | 6 | Badge, Button, Sheet, Skeleton, Spinner, Toast |
| Subagents | AI | 6 | Badge, Button, Collapsible, Progress, Spinner, Tooltip |
| Test Results | AI | 6 | Button, Collapsible, Number flow, Progress, Spinner, Toggle group |
| Agent Todos | AI | 5 | Button, Collapsible, Kbd, Popover, Tooltip |
| HextaAI | AI | 5 | Button, Dropdown menu, Sidebar, Toast, Tooltip |
| Order Summary | E-commerce | 5 | Badge, Button, Input, Separator, Skeleton |
| Product Search | E-commerce | 5 | Button, Kbd, Popover, Sheet, Spinner |
| Markdown | AI | 4 | Alert, Button, Checkbox, Dropdown menu |
| Stack Trace | AI | 4 | Button, Card, Collapsible, Tooltip |
| Appearance | Settings | 3 | Button, Slider, Switch |
| Save Bar | Settings | 3 | Button, Kbd, Spinner |
| Voice Mode | AI | 3 | Button, Popover, Tooltip |
| Price | E-commerce | 2 | Number flow, Skeleton |
| Product Gallery | E-commerce | 2 | Button, Skeleton |
| Streaming | AI | 2 | Bubble, Message |
| Variant Picker | E-commerce | 2 | Button, Input |

## Methodology

- Source: the 49 HextaUI Pro blocks in the block catalog on October 22, 2026. The catalog is generated from each block's source code at build time.
- Included: 49 blocks. Excluded: none.
- A block uses a component when one of its own source files imports it from components/ui. Demo files, usage examples and tests are not counted. A block whose other files import no component (an app assembled from other blocks, such as HextaAI) counts its entry file instead. A component reached only through another block counts for that other block.
- The library is the 65 components in the HextaUI docs. Hooks and utilities are not counted.
- These are blocks written by one author for HextaUI Pro, not a sample of apps on the web. Read them as how one production block library is built.
- Every value is computed from code; none is entered by hand or by users.
- Refreshed on every site build. The date on this page is the last change to the Pro block sources.
- Percentages are rounded to the nearest whole number, so a table can add up to 99% or 101%. A median of an even count is the mean of the middle two values.
- A finding about a group of blocks needs at least 20 blocks in each group.

## Frequently asked questions

### What is the most used UI component in HextaUI Pro blocks?

Button. 46 of the 49 HextaUI Pro blocks (94%) import it, counted on October 22, 2026. Badge is second with 27 blocks. [Link](https://hextaui.com/research/ui-component-usage#faq-most-used-component)

### How many UI components does a typical HextaUI Pro block use?

The median HextaUI Pro block imports 9 different UI components, counted across 49 blocks on October 22, 2026. The range is 2 to 23. [Link](https://hextaui.com/research/ui-component-usage#faq-components-per-block)

### Which HextaUI components are not used in any Pro block?

Aspect ratio, Carousel, Data table, Item, Menubar, Navigation menu, Pagination, Scroll area and Video player. These 9 of the 65 HextaUI components are not imported directly by any of the 49 Pro blocks, counted on October 22, 2026. [Link](https://hextaui.com/research/ui-component-usage#faq-unused-components)

### How is a component counted as used by a block?

A block uses a component when one of its own source files imports it from components/ui. Demo files, usage examples and tests are not counted, and a component reached only through another block counts for that other block. An app assembled from other blocks counts the components in its own entry file. [Link](https://hextaui.com/research/ui-component-usage#faq-how-usage-is-counted)

## Cite this research

HextaUI. “UI Component Usage Statistics 2026: 49 Blocks Analyzed.” https://hextaui.com/research/ui-component-usage. Updated October 2026.

## Related

- [All research](https://hextaui.com/research)
- [HextaUI Pro blocks](https://hextaui.com/blocks)
- [HextaUI components](https://hextaui.com/components)