# GolemUI Components > Accessible, themeable `gui-*` web components built with Lit. They work in plain HTML and in any framework, with or without the GolemUI Forms engine. Conventions every element follows: - Install `@golemui/gui-components` and `lit`. Import `@golemui/gui-components/index.css` once, and each element's entry point (`@golemui/gui-components/textinput`) to register it. - Multi-word attributes are kebab-case (`locale-id`); properties are camelCase (`localeId`). - Value elements fire `gui-input` while the user edits and `gui-change` on commit, with the value in `event.detail.value`. Every event starts with `gui-`, bubbles and is composed. - With a `name`, an element takes part in a native `
`: it submits, validates (`required`, bounds) and resets like a native control. - React: `@golemui/gui-components/react` exports a component per element (`GuiTextinput`) with an `onGui*` prop per event. Vue: `import type {} from '@golemui/gui-components/vue'`. Angular: `CUSTOM_ELEMENTS_SCHEMA`. - The elements render into the light DOM. Every rule sits in a `golemui.*` cascade layer; restyle with `--gui-*` tokens or plain selectors. - Server rendering: the server-only `@golemui/gui-components/ssr` entry point (needs `@lit-labs/ssr`) renders the elements' content into the server HTML. React/Next.js: import it once in server code. Nuxt: `modules: ['@golemui/gui-components/nuxt']`. Vue: `renderElementsInHtml(html)`. Angular/Analog: `renderElementsInDocument(document)` in `BEFORE_APP_SERIALIZED`. Lit: `renderTemplate`, then `resumeServerRendered()` in the browser. For building forms from a JSON or TypeScript definition, use GolemUI Forms instead: [its index](/llms.txt). Every page below in one file: [llms-full.txt](/components/llms-full.txt). ## Docs - [GolemUI Components](/components/docs.md): Accessible, themeable web components for plain HTML and every framework, with or without GolemUI Forms. - [Button](/components/docs/actions/button.md): gui-button, a button with an optional icon and a loading state, that submits and resets native forms, or a link that looks like a button. - [Alert](/components/docs/display/alert.md): gui-alert, a message box around your own content, in a neutral, info, success, warning or error style, that screen readers announce. - [Markdown text](/components/docs/display/markdown-text.md): gui-markdown-text, which renders Markdown as styled HTML, with the Markdown parser your app provides. - [Installation](/components/docs/getting-started/installation.md): Install @golemui/gui-components, load the stylesheet, register the elements you use and set up your framework, rendered in the browser or on the server. - [Accessibility](/components/docs/guides/accessibility.md): How GolemUI Components name, describe and announce their controls, what you need to provide, and how keyboard, focus and forced colors work. - [i18n](/components/docs/guides/i18n.md): Translate the built-in strings of GolemUI Components with your i18n library, format dates and numbers for a locale, and lay the components out right to left. - [Item renderers](/components/docs/guides/item-renderers.md): How to render the options of gui-list, gui-multi-list, gui-dropdown and gui-multi-dropdown in React, Angular, Vue, Lit or plain JavaScript. - [Native forms](/components/docs/guides/native-forms.md): How GolemUI Components take part in a native HTML form, what they submit, how they validate and how they reset, like built-in controls. - [Server rendering](/components/docs/guides/server-rendering.md): Send GolemUI Components with their content in the server HTML, in React, Next.js, Angular, Analog, Vue, Nuxt, Lit, Astro and plain Node. - [Strict CSP](/components/docs/guides/strict-csp.md): GolemUI Components run under a strict Content Security Policy, with no inline styles, no eval and no data URIs to allow, and with Lit's Trusted Types policy. - [Calendar](/components/docs/inputs/calendar.md): gui-calendar, an always-visible month calendar to pick a date, with bounds, disabled dates and several months side by side, that takes part in native forms. - [Checkbox](/components/docs/inputs/checkbox.md): gui-checkbox, a checkbox with a label, hint and errors whose value is true or false, that takes part in native forms. - [Currency](/components/docs/inputs/currency.md): gui-currency, a money amount field formatted in any currency and locale, that takes part in native forms. - [Date input](/components/docs/inputs/date.md): gui-date, a date field typed part by part (day, month and year) in the order of the locale, that takes part in native forms. - [Date picker](/components/docs/inputs/date-picker.md): gui-date-picker, a date field with a calendar popup, typed part by part or picked from the calendar, that takes part in native forms. - [Date-time input](/components/docs/inputs/date-time.md): gui-date-time, a date and time field typed part by part in the order and clock of the locale, that takes part in native forms. - [Date-time calendar](/components/docs/inputs/date-time-calendar.md): gui-date-time-calendar, an always-visible month calendar with a time picker on top, to pick a date and a time, that takes part in native forms. - [Date-time picker](/components/docs/inputs/date-time-picker.md): gui-date-time-picker, a date and time field with a popup of a calendar and a list of times, that takes part in native forms. - [Dropdown](/components/docs/inputs/dropdown.md): gui-dropdown, a text field that searches a list of items and picks one, with a virtualized popup list, custom options and native form support. - [File upload](/components/docs/inputs/file-upload.md): gui-file-upload, a field that uploads one file through your own upload service as soon as the user picks or drops it, with progress, retry and remove. - [List](/components/docs/inputs/list.md): gui-list, a virtualized listbox to pick one item, with keyboard navigation, that renders the items you give it and takes part in native forms. - [Markdown editor](/components/docs/inputs/markdown.md): gui-markdown, a Markdown editor with a formatting toolbar and an optional preview, that takes part in native forms. - [Multi-select dropdown](/components/docs/inputs/multi-dropdown.md): gui-multi-dropdown, a text field that searches a list of items and picks any number of them, shown as removable pills, with native form support. - [Multiple file upload](/components/docs/inputs/multi-file-upload.md): gui-multi-file-upload, a field that uploads several files, one after another, through your own upload service, and lists them as removable pills. - [Multi-select list](/components/docs/inputs/multi-list.md): gui-multi-list, a virtualized listbox to pick any number of items, with keyboard navigation, that renders the items you give it and takes part in native forms. - [Number](/components/docs/inputs/number.md): gui-number, a number field with bounds and arrow-key steps, that takes part in native forms. - [Password](/components/docs/inputs/password.md): gui-password, a password field with a button that shows or hides the password, that takes part in native forms. - [Radio group](/components/docs/inputs/radiogroup.md): gui-radiogroup, a group of radio buttons to pick one option, with a label, hint and errors, that takes part in native forms. - [Range calendar](/components/docs/inputs/range-calendar.md): gui-range-calendar, an inline calendar to pick one or more date ranges, shown as pills above it, that takes part in native forms. - [Date range](/components/docs/inputs/range-date.md): gui-range-date, a field to type one or more date ranges, each shown as a pill, that takes part in native forms. - [Date range picker](/components/docs/inputs/range-date-picker.md): gui-range-date-picker, a date range field with a calendar popup, for one or more ranges shown as pills, that takes part in native forms. - [Date-time range](/components/docs/inputs/range-date-time.md): gui-range-date-time, a field to type one or more date-time ranges, each shown as a pill, that takes part in native forms. - [Date-time range calendar](/components/docs/inputs/range-date-time-calendar.md): gui-range-date-time-calendar: an inline calendar with start and end times for one or more date-time ranges, shown as pills, that works in native forms. - [Date-time range picker](/components/docs/inputs/range-date-time-picker.md): gui-range-date-time-picker: a date-time range field with a popup calendar and times, for one or more ranges shown as pills, that works in native forms. - [Time range](/components/docs/inputs/range-time.md): gui-range-time, a field to type one or more time ranges, each shown as a pill, that takes part in native forms. - [Time range picker](/components/docs/inputs/range-time-picker.md): gui-range-time-picker, a time range field with start and end time lists in a popup, for one or more ranges shown as pills, that takes part in native forms. - [Select](/components/docs/inputs/select.md): gui-select, a native select to pick one option, with a label, hint, icon and errors, that takes part in native forms. - [Tags](/components/docs/inputs/tags.md): gui-tags, a field that turns typed text into a list of tags, with a label, hint and errors, that takes part in native forms. - [Textarea](/components/docs/inputs/textarea.md): gui-textarea, a multi-line text field with a label, hint, errors and an optional character counter, that takes part in native forms. - [Text input](/components/docs/inputs/textinput.md): gui-textinput, a single-line text field with a label, hint, icon and errors, that takes part in native forms. - [Time input](/components/docs/inputs/time.md): gui-time, a time field typed part by part (hour, minute and AM/PM) on the locale's 12 or 24-hour clock, that takes part in native forms. - [Time picker](/components/docs/inputs/time-picker.md): gui-time-picker, a time field with a list of times in a popup, with a minute step, bounds and disabled times, that takes part in native forms. - [Toggle](/components/docs/inputs/toggle.md): gui-toggle, an on and off switch with a label, hint and errors whose value is true or false, that takes part in native forms. - [Accordion](/components/docs/layout/accordion.md): gui-accordion, which turns your details and summary elements into an accordion that keeps one item open at a time, or several. - [Grid](/components/docs/layout/grid.md): The gui-grid classes of GolemUI Components: rows and columns that line up labels, controls and errors, and adapt to narrow containers with gui-container. - [Tabs](/components/docs/layout/tabs.md): gui-tabs, which turns your tab strip and panels into accessible tabs, with keyboard navigation, one panel showing at a time, and a cancelable change event. - [From 1.x to 2.0](/components/docs/migrating/v1-to-v2.md): Upgrade gui-* elements from GolemUI 1.x to GolemUI Components 2.0: cascade layers, selectors, markup, events, attributes and packages, before and after. - [Errors](/components/docs/parts/errors.md): gui-errors, the error list of a GolemUI Components field as an element of its own, for a control you build yourself. - [Label](/components/docs/parts/label.md): gui-label, the label of a GolemUI Components field as an element of its own, for a control you build yourself. - [Carets](/components/docs/styling/carets.md): The CSS-drawn arrows of the pickers, selects, dropdowns, number spinner, calendar and accordion of GolemUI Components, and the two tokens that change them. - [Icons](/components/docs/styling/icons.md): Show icons in the GolemUI Components with any icon font, icon library or SVG file, through the icon attributes and their CSS hooks. - [Overriding styles](/components/docs/styling/overriding.md): Restyle the GolemUI Components with plain CSS selectors, thanks to cascade layers and public class names, and keep global resets from breaking them. - [Stylesheets](/components/docs/styling/stylesheets.md): The stylesheets of GolemUI Components, what each one holds, and the cascade layers that let your own CSS win. - [Themes and dark mode](/components/docs/styling/themes.md): Switch the GolemUI Components to dark mode, apply the bundled Clay theme, or build a theme of your own with the design tokens. - [Design tokens](/components/docs/styling/tokens.md): The --gui-* CSS variables GolemUI Components read, with their light and dark values, and how to change them.