# Components

Every component `@aweftjs/ui` ships, one page each: the catalogue's example in light and dark, every state and size, and the example's source. The rules every one of them follows are on the [`@aweftjs/ui`](/docs/packages/ui) page.

| component | what it is |
|---|---|
| [`Alert`](/components/Alert) | <div role="alert"> or <div role="status"> on alert |
| [`Avatar`](/components/Avatar) | <span> on avatar, holding an <img> and a <span> |
| [`Badge`](/components/Badge) | <span> on badge |
| [`Breadcrumb`](/components/Breadcrumb) | a <nav> on breadcrumb around an <ol> |
| [`Button`](/components/Button) | <button>, or <a> with an href |
| [`Card`](/components/Card) | <div> on card, with the stack segment when it has parts |
| [`Checkbox`](/components/Checkbox) | <input type="checkbox"> |
| [`ColorPicker`](/components/ColorPicker) | a saturation and brightness square, the hue and the alpha as Sliders, and a swatch |
| [`Country`](/components/Country) | a button that opens a searched grid of every country |
| [`DropDown`](/components/DropDown) | a <details> whose <summary> wears the button theme |
| [`Empty`](/components/Empty) | <div> on empty |
| [`FileDrop`](/components/FileDrop) | a drop zone with a real file input in it |
| [`Form`](/components/Form) |  |
| [`Icon`](/components/Icon) | <svg> |
| [`LoadingDots`](/components/LoadingDots) | three dots |
| [`Markdown`](/components/Markdown) | a <div> on markdown holding one element per block of a markdown string |
| [`Menu`](/components/Menu) | a button and the list of actions it opens |
| [`Modal`](/components/Modal) | a stage template: the act inside a native <dialog> |
| [`Pagination`](/components/Pagination) | a <nav> on pagination of quiet Buttons |
| [`Popup`](/components/Popup) |  |
| [`Progress`](/components/Progress) | <progress max="1"> on progress |
| [`Radio`](/components/Radio) | <input type="radio"> |
| [`Region`](/components/Region) | the same, over one country's subdivisions |
| [`Select`](/components/Select) | a <button role="combobox"> in a <span> with its arrow, over a hidden <select> |
| [`Skeleton`](/components/Skeleton) | <div aria-hidden="true"> on skeleton |
| [`Slider`](/components/Slider) | <input type="range"> |
| [`Table`](/components/Table) | a <table> on table, inside a <div> on table_scroll |
| [`Tabs`](/components/Tabs) | a <div> on tabs around a <div role="tablist"> on tabs_list and the panels |
| [`TextArea`](/components/TextArea) | <textarea> |
| [`TextField`](/components/TextField) | <input>, in a <div> on input_group when it was given an addon |
| [`Toggle`](/components/Toggle) | <input type="checkbox" role="switch"> |
| [`Tooltip`](/components/Tooltip) | Detached plus the hover and focus trigger |
| [`Typography`](/components/Typography) | one run of themed text: one element on the text entry |
| [`Validate`](/components/Validate) | a check around a control, and the message it shows |