HextaUIResearch
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.
- Updated
- Sample
- 49 blocks
- Source
- HextaUI Pro blocks
- Data
- Markdown
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 to this finding
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 to this finding
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 to this finding
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 to this finding
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 to this finding
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. Link to this table
| 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. Link to this table
| 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. Link to this table
| 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. Link to this table
| 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. Link to this table
| 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 to this answerHow 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 to this answerWhich 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 to this answerHow 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 to this answerCite this research
Quote any finding with a link to its anchor, or cite the whole study:
HextaUI. “UI Component Usage Statistics 2026: 49 Blocks Analyzed.” https://hextaui.com/research/ui-component-usage. Updated October 2026.
The same findings and tables are at https://hextaui.com/research/ui-component-usage.md.