UI Components
HTML + CSS
Component libraries
| Material UI | 99K | 10M | 9.3.0 | 4 years | React |
| Chakra UI | 41K | 1.7M | 3.36.0 | 5 years | React |
| Radix UI | 19K | 12M | 1.6.0 | 4 years | React |
| shadcn | 121K | 7.8M | 4.18.0 | 2 years | React |
| Bootstrap | 175K | 6.3M | 5.3.0 | 14 years | React |
| Headless UI | 29K | 7.2M | 2.2.0 | 5 years | |
| Ark UI | 5.3K | 937K | 5.38.0 | 3 years | |
| Zag.js | 5.2K | 1.3M | 1.43.0 | 4 years | |
| React Spectrum | 16K | 1M | 3.47.0 | 6 years | React |
| Ariakit | 8.6K | 1.3M | 0.4.0 | 3 years | React |
| Ant Design | 99K | 3.6M | 6.6.0 | 11 years | React |
| Hero UI | 30K | 504K | 3.2.0 | 1 years | React |
| Fluent UI | 20K | 416K | 9.74.0 | 5 years | React |
| Bits UI | 3.5K | 936K | 2.18.0 | 2 years | Svelte |
| Melt UI | 4.2K | 192K | 0.86.0 | 3 years | Svelte |
| Carbon | 9.4K | 155K | 1.114.0 | 5 years | |
| Park UI | 2.4K | 14K | 0.43.0 | 2 years |
Components
Icons
| Iconify | 6.3K | 15M | 2.0.0 | 6 years |
Icon Packs
| IntelliJ Platform Icons |
| LLM Model Icons |
Codeblock
| Expressive Code | 957 | 764K | 0.44.0 | 3 years | Modern |
| Code Hike | 5.4K | 25K | 1.1.0 | 2 years | React |
Syntax Highlighter
| Shiki | 14K | 19M | 4.4.0 | 12 years | Modern |
starry-night | 1.8K | 44K | 2.2.0 | 3 years | Modern |
| Prism.js | 13K | 27M | 1.30.0 | 11 years | Legacy |
refractor | 868 | 9.7M | 5.0.0 | 9 years | Compat Prism.js |
| Highlight.js | 25K | 30M | 11.12.0 | 15 years | Legacy |
lowlight | 920 | 12M | 3.3.0 | 10 years | Compat Highlight.js |
Markdown
rehype-expressive-code | 957 | 760K | 0.44.0 | 2 years | shiki |
rehype-pretty-code | 1.3K | 689K | 0.14.0 | 4 years | shiki |
@shikijs/rehype | 14K | 720K | 4.4.0 | 2 years | shiki |
rehype-starry-night | 28 | 44K | 2.2.0 | 3 years | starry-night |
rehype-prism-plus | 201 | 1.4M | 2.0.0 | 5 years | refactor |
rehype-highlight | 330 | 1.9M | 7.0.0 | 10 years | lowlight |
rehype-prism | 13 | 34K | 2.3.0 | 7 years | prism |
Code Editor
| Monaco Editor | 47K | 8.4M | 0.56.0 | 10 years | Modern |
| Sandpack | 6.2K | 1.3M | 2.19.0 | 5 years | Modern |
| CodeMirror | 27K | 10M | 6.0.0 | 13 years | Legacy |
| Ace | 27K | 1.4M | 1.44.0 | 10 years | Legacy |
| CodeJar | 2K | 29K | 4.3.0 | 8 years | Legacy |
Tooltip
Table
table { border-collapse: collapse;
th, td { border: 1px solid; }}Tabs
index.html
<Tabs> <Tab label='Kotlin DSL' icon='' color=''></Tab> <Tab label='Gradle DSL' icon='' color=''></Tab></Tabs><details> Tabs
Tab 1
Woah
Tab 2
Cool
Tab 3
Epic
Tab 4
Awesome
index.html
<div class='tabs' style='--tabs: 4;'> <details style='--n:1' name='test' open> <summary>Tab 1</summary> Woah </details> <details style='--n:2' name='test'> <summary>Tab 2</summary> Cool </details> <details style='--n:3' name='test'> <summary>Tab 3</summary> Epic </details> <details style='--n:4' name='test'> <summary>Tab 4</summary> Awesome </details></div>- Cannot share state between tab lists
- Cannot embed tabs inside tabpanel
radio Tabs
Tab 1
Tab 2
Tab 3
index.html
<!-- states --><input type='radio' id='tab-state-1' name='tab-group'><input type='radio' id='tab-state-2' name='tab-group'><input type='radio' id='tab-state-3' name='tab-group'>
<div class='tabs'> <div role='tablist'> <label role='tab' id='tab-1' aria-controls='tabpanel-1' for='tab-state-1'>Tab One</label> <label role='tab' id='tab-2' aria-controls='tabpanel-2' for='tab-state-2'>Tab Two</label> <label role='tab' id='tab-3' aria-controls='tabpanel-3' for='tab-state-3'>Tab Three</label> </div>
<div role='tabpanel' id='tabpanel-1' aria-labelledby='tab-1'></div> <div role='tabpanel' id='tabpanel-2' aria-labelledby='tab-2'></div> <div role='tabpanel' id='tabpanel-3' aria-labelledby='tab-3'></div></div>- Can share state between tab lists
- Can embed tabs inside tabpanel
:target Tabs
- Cannot share state between tab lists
- Can embed tabs inside tabpanel
<div class='tabs'> <div role='tablist'> <a role='tab' id='tab-1' aria-controls='tabpanel-1' href='#tabpanel-1'>Tab One</a> <a role='tab' id='tab-1' aria-controls='tabpanel-1' href='#tabpanel-1'>Tab Two</a> <a role='tab' id='tab-1' aria-controls='tabpanel-1' href='#tabpanel-1'>Tab Three</a> </div>
<div role='tabpanel' id='tabpanel-1' aria-labelledby='tab-1'></div> <div role='tabpanel' id='tabpanel-2' aria-labelledby='tab-2'></div> <div role='tabpanel' id='tabpanel-3' aria-labelledby='tab-3'></div></div>Reference
CSS Tricks — CSS Tabs
W3 — Tabs
Web.dev — Tabs Component
Master.dev — CSS Round-Out Tabs
MDN Web Docs — tab role
MDN Web Docs — tablist role
MDN Web Docs — tabpanel role
MDN Web Docs — <details name>