### Install Dependencies and Start Storybook (Node.js) Source: https://github.com/umbraco/umbraco.ui/blob/main/docs/CONTRIBUTING.md Installs project dependencies using npm and starts the Storybook server for component development and testing. Ensure Node.js and npm are installed and at the recommended versions before running these commands. ```bash npm install npm run storybook ``` -------------------------------- ### Full Example with CDN and Root Styling Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-css/README.md This complete HTML example demonstrates integrating the UUI-CSS bundle via CDN and applying the necessary 'uui-font' and 'uui-text' classes to the body. It also includes an example of using a custom property for styling. ```html

Hello uui-css!

Everything inside my app will now use the font from uui-font and tag styling from uui-text because the root(body) has the uui-font and uui-text classes.

I will have a background color from the custom properties.

``` -------------------------------- ### Install uui-responsive-container Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-responsive-container/README.md Installs the uui-responsive-container component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-responsive-container ``` -------------------------------- ### Install Umbraco UI Library (UUI) Components Source: https://context7.com/umbraco/umbraco.ui/llms.txt Instructions for installing the Umbraco UI Library (UUI) and its individual components using npm. This includes commands for installing the full library or specific components like buttons and inputs. ```bash # Install full library npm install @umbraco-ui/uui # Or install individual components npm install @umbraco-ui/uui-button npm install @umbraco-ui/uui-input ``` -------------------------------- ### Install uui-ref-node-user Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-user/README.md Installs the uui-ref-node-user component using npm. This is the first step to using the component in your project. ```bash npm i @umbraco-ui/uui-ref-node-user ``` -------------------------------- ### Install uui-radio Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-radio/README.md Installs the uui-radio component using npm. This command fetches and installs the necessary package for use in your project. ```zsh npm i @umbraco-ui/uui-radio ``` -------------------------------- ### Install Umbraco UI Project Dependencies Source: https://github.com/umbraco/umbraco.ui/blob/main/README.md This command clones the Umbraco UI repository and installs its Node.js dependencies using npm. It requires Git and Node.js (version 7 or higher) to be installed. ```sh git clone https://github.com/umbraco/Umbraco.UI.git cd .\Umbraco.UI\ npm install ``` -------------------------------- ### Install uui-box Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-box/README.md Installs the uui-box component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-box ``` -------------------------------- ### Install uui-select using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-select/README.md Installs the uui-select component via npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-select ``` -------------------------------- ### Install uui-input-file via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input-file/README.md Installs the uui-input-file package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-input-file ``` -------------------------------- ### Install uui-popover using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-popover/README.md Installs the uui-popover package from npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-popover ``` -------------------------------- ### Install uui-symbol-file-thumbnail via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-file-thumbnail/README.md Installs the uui-symbol-file-thumbnail package from npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-symbol-file-thumbnail ``` -------------------------------- ### Install uui-input via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input/README.md Installs the uui-input package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-input ``` -------------------------------- ### Install uui-card-user Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card-user/README.md Installs the uui-card-user component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-card-user ``` -------------------------------- ### Install uui-action-bar using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-action-bar/README.md Installs the uui-action-bar package from npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-action-bar ``` -------------------------------- ### Install uui-toggle Package Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-toggle/README.md Installs the uui-toggle package using npm. This is the first step to using the toggle component in your project. ```zsh npm i @umbraco-ui/uui-toggle ``` -------------------------------- ### Install uui-symbol-file-dropzone via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-file-dropzone/README.md Installs the uui-symbol-file-dropzone package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-symbol-file-dropzone ``` -------------------------------- ### Install uui-ref-list via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-list/README.md Installs the uui-ref-list component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-ref-list ``` -------------------------------- ### Install uui-ref-node-form using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-form/README.md Installs the uui-ref-node-form package from npm. This is the primary method for adding the component to your project. ```shell npm i @umbraco-ui/uui-ref-node-form ``` -------------------------------- ### Install uui-file-dropzone via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-file-dropzone/README.md Installs the uui-file-dropzone package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-file-dropzone ``` -------------------------------- ### Install UUI-CSS Package Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-css/README.md This command demonstrates how to install the @umbraco-ui/uui-css package using npm. This is the recommended approach for projects using a build system, allowing for fine-grained control over CSS file inclusion. ```bash npm i @umbraco-ui/uui-css ``` -------------------------------- ### Install uui-card-media via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card-media/README.md Installs the uui-card-media package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-card-media ``` -------------------------------- ### Install uui-pagination via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-pagination/README.md Installs the uui-pagination package using npm. This is the first step to using the component in your project. ```bash npm i @umbraco-ui/uui-pagination ``` -------------------------------- ### HTML Example for uui-card-user Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card-user/README.md An example of how to use the `` component in an HTML file. This snippet demonstrates the basic structure and usage of the component. ```html INSERT EXAMPLE ``` -------------------------------- ### Install uui-breadcrumbs Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-breadcrumbs/README.md Installs the uui-breadcrumbs component using npm. This command fetches and installs the necessary package for using the breadcrumbs functionality. ```zsh npm i @umbraco-ui/uui-breadcrumbs ``` -------------------------------- ### Install uui-boolean-input via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-boolean-input/README.md Installs the uui-boolean-input package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-boolean-input ``` -------------------------------- ### Install uui-ref-node-document-type Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-document-type/README.md Installs the uui-ref-node-document-type component using npm. This is the first step to using the component in your project. ```bash npm i @umbraco-ui/uui-ref-node-document-type ``` -------------------------------- ### Usage Example for uui-radio-group Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-radio/README.md Demonstrates the usage of the `` and `` components in HTML. This example shows how to create a radio button group with multiple options. ```html Option 1 Option 2 Option 3 Option 4 ``` -------------------------------- ### Install uui-ref-node via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node/README.md Installs the uui-ref-node package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-ref-node ``` -------------------------------- ### Install uui-symbol-file Package Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-file/README.md Installs the uui-symbol-file package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-symbol-file ``` -------------------------------- ### Install uui-symbol-expand via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-expand/README.md Installs the uui-symbol-expand package from npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-symbol-expand ``` -------------------------------- ### Install uui-toast-notification-layout via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-toast-notification-layout/README.md Installs the uui-toast-notification-layout package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-toast-notification-layout ``` -------------------------------- ### Install uui-menu-item via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-menu-item/README.md Installs the uui-menu-item package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-menu-item ``` -------------------------------- ### Install uui-toast-notification via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-toast-notification/README.md Installs the uui-toast-notification package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-toast-notification ``` -------------------------------- ### Install uui-keyboard-shortcut via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-keyboard-shortcut/README.md Installs the uui-keyboard-shortcut package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-keyboard-shortcut ``` -------------------------------- ### UUI Button Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Demonstrates various ways to use the `uui-button` component, including basic usage, styling with different looks and colors, handling loading states, and using it as an anchor link. It also shows form integration. ```html Click me Save Changes Delete Item Submit Visit Umbraco Disabled Compact
Submit Reset
``` -------------------------------- ### Install uui-input-password via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input-password/README.md Installs the uui-input-password package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-input-password ``` -------------------------------- ### Install uui-color-picker via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-color-picker/README.md Installs the uui-color-picker package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-color-picker ``` -------------------------------- ### Install uui-ref-node-member via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-member/README.md Installs the uui-ref-node-member package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-ref-node-member ``` -------------------------------- ### UUI Input Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Illustrates the usage of the `uui-input` component, showcasing basic text inputs, email validation, number inputs with ranges, character length constraints, and the use of prepend/append slots. It also covers auto-width, date/time inputs, and disabled/readonly states. ```html $ .00 ``` -------------------------------- ### Install uui-ref-node-data-type via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-data-type/README.md Installs the uui-ref-node-data-type package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-ref-node-data-type ``` -------------------------------- ### Install uui-table Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-table/README.md Installs the uui-table component package using npm. This is the first step to using the table component in your project. ```zsh npm i @umbraco-ui/uui-table ``` -------------------------------- ### Install uui-file-preview via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-file-preview/README.md Installs the uui-file-preview component using npm. This is the first step to integrating the component into your project. ```zsh npm i @umbraco-ui/uui-file-preview ``` -------------------------------- ### Install uui-form-layout-item via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-form-layout-item/README.md Installs the uui-form-layout-item package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-form-layout-item ``` -------------------------------- ### Install uui-slider using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-slider/README.md Installs the uui-slider package from npm. This is the first step to using the slider component in your project. ```zsh npm i @umbraco-ui/uui-slider ``` -------------------------------- ### uui-responsive-container with collapse="start" Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-responsive-container/README.md Configures the uui-responsive-container to collapse items from the left side. The 'more' dropdown button will appear on the left. This is useful for layouts where primary actions are on the left. ```html First Second Third ``` -------------------------------- ### Install uui-dialog-layout via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-dialog-layout/README.md Installs the uui-dialog-layout package using npm. This is the first step to using the component in your project. ```shell npm i @umbraco-ui/uui-dialog-layout ``` -------------------------------- ### Install uui-symbol-sort via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-sort/README.md Installs the uui-symbol-sort component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-symbol-sort ``` -------------------------------- ### uui-box Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Demonstrates the uui-box component, a container for grouping content. Examples include basic usage, header actions, custom headline slots, header slots, styling with CSS custom properties, and accessibility variants for headlines. ```html

Your settings content goes here.

 Add User

User list content...

 Documents

Document content...

 Last updated: Today Refresh

Dashboard widgets...

Content with custom padding and border.

This box uses h2 for the headline element.

 ``` -------------------------------- ### Install uui-ref-node-package via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node-package/README.md Installs the uui-ref-node-package using npm. This is the first step to using the component in your project. ```shell npm i @umbraco-ui/uui-ref-node-package ``` -------------------------------- ### Install uui-toast-notification-container via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-toast-notification-container/README.md Installs the uui-toast-notification-container package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-toast-notification-container ``` -------------------------------- ### Install uui-icon Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-icon/README.md Installs the uui-icon component using npm. This is the first step to using the icon component in your project. ```zsh npm i @umbraco-ui/uui-icon ``` -------------------------------- ### Install uui-icon-registry-essential Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-icon-registry-essential/README.md Installs the essential icon registry component using npm. This is the first step to using the component in your project. ```shell npm i @umbraco-ui/uui-icon-registry-essential ``` -------------------------------- ### Install uui-checkbox via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-checkbox/README.md Installs the uui-checkbox component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-checkbox ``` -------------------------------- ### Install uui-loader-bar via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-loader-bar/README.md Installs the uui-loader-bar package using npm. This is the first step to include the component in your project. ```zsh npm i @umbraco-ui/uui-loader-bar ``` -------------------------------- ### Example Usage of Symbol Folder Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-folder/README.md Demonstrates how to use the `` component with different attributes like 'label', 'type', and 'placeholder'. This shows basic instantiation and configuration. ```html ``` -------------------------------- ### Install uui-button-group via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-button-group/README.md Installs the uui-button-group package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-button-group ``` -------------------------------- ### Install uui-form Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-form/README.md Installs the uui-form package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-form ``` -------------------------------- ### Install uui-button via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-button/README.md Installs the uui-button package using npm. This is the first step to using the button component in your project. ```zsh npm i @umbraco-ui/uui-button ``` -------------------------------- ### Install uui-tabs via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-tabs/README.md Installs the @umbraco-ui/uui-tabs package using npm. This is the first step to using the tab component in your project. ```zsh npm i @umbraco-ui/uui-tabs ``` -------------------------------- ### Install UUI Textarea Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-textarea/README.md Installs the UUI Textarea component using npm. This package provides the necessary files for the textarea component. ```zsh npm i @umbraco-ui/uui-textarea ``` -------------------------------- ### uui-toggle Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Illustrates the uui-toggle component, a styled checkbox for on/off states. Examples cover basic usage, checked states, form integration, disabled states, and event handling. ```html
``` -------------------------------- ### Install uui-label Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-label/README.md Installs the uui-label component using npm. This command adds the necessary package to your project's dependencies. ```zsh npm i @umbraco-ui/uui-label ``` -------------------------------- ### Install uui-card using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card/README.md This command installs the uui-card component from npm. It is a prerequisite for using the component in your project. ```zsh npm i @umbraco-ui/uui-card ``` -------------------------------- ### Install uui-loader via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-loader/README.md Installs the uui-loader package using npm. This is the first step to using the loader component in your project. ```zsh npm i @umbraco-ui/uui-loader ``` -------------------------------- ### Install uui-form-validation-message via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-form-validation-message/README.md Installs the uui-form-validation-message component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-form-validation-message ``` -------------------------------- ### Install uui-avatar via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-avatar/README.md Installs the uui-avatar package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-avatar ``` -------------------------------- ### Install uui-color-slider via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-color-slider/README.md Installs the uui-color-slider package using npm. This command fetches and installs the necessary files for the color slider component. ```zsh npm i @umbraco-ui/uui-color-slider ``` -------------------------------- ### Install uui-color-swatch via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-color-swatch/README.md This snippet shows how to install the uui-color-swatch component using npm. It's a prerequisite for using the component in your project. ```zsh npm i @umbraco-ui/uui-color-swatch ``` -------------------------------- ### Install uui-caret via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-caret/README.md Installs the uui-caret component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-caret ``` -------------------------------- ### CSS Custom Properties for UUI Component Theming Source: https://context7.com/umbraco/umbraco.ui/llms.txt Illustrates how to customize the appearance of UUI components using CSS custom properties. This example shows global theme settings and component-specific overrides for colors, spacing, borders, and shadows. ```css /* Global theme customization */ :root { /* Colors */ --uui-color-surface: #ffffff; --uui-color-text: #1b264f; --uui-color-selected: #3544b1; --uui-color-positive: #3db77d; --uui-color-warning: #f3b35d; --uui-color-danger: #d42054; /* Spacing */ --uui-size-1: 3px; --uui-size-2: 6px; --uui-size-space-3: 9px; --uui-size-space-5: 15px; /* Border */ --uui-border-radius: 3px; /* Shadows */ --uui-shadow-depth-1: 0 1px 3px rgba(0,0,0,0.12); } /* Component-specific customization */ uui-button { --uui-button-height: 40px; --uui-button-border-radius: 4px; --uui-button-font-weight: 600; } uui-input { --uui-input-height: 40px; --uui-input-border-color: #ccc; --uui-input-border-color-focus: var(--uui-color-selected); } uui-box { --uui-box-default-padding: var(--uui-size-space-5); --uui-box-box-shadow: var(--uui-shadow-depth-1); } ``` -------------------------------- ### Install uui-button-copy-text via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-button-copy-text/README.md Installs the uui-button-copy-text component using npm. This is the primary method for adding the component to your project. ```zsh npm i @umbraco-ui/uui-button-copy-text ``` -------------------------------- ### UUI Textarea Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Demonstrates the functionality of the `uui-textarea` component, including basic usage, auto-height adjustment, character validation, readonly states, and styling with CSS custom properties for height control. ```html ``` -------------------------------- ### Basic usage of uui-input-file component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input-file/README.md Demonstrates the basic HTML structure for using the `` component. This is the simplest way to render the file input element. ```html ``` -------------------------------- ### Install uui-button-inline-create via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-button-inline-create/README.md Installs the uui-button-inline-create package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-button-inline-create ``` -------------------------------- ### Install uui-combobox via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-combobox/README.md Installs the uui-combobox package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-combobox ``` -------------------------------- ### Install uui-card-content-node via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card-content-node/README.md Installs the uui-card-content-node package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-card-content-node ``` -------------------------------- ### Install uui-avatar-group via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-avatar-group/README.md Installs the uui-avatar-group package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-avatar-group ``` -------------------------------- ### Install uui-progress-bar via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-progress-bar/README.md Installs the uui-progress-bar package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-progress-bar ``` -------------------------------- ### uui-select Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Showcases the uui-select component, a dropdown for selecting options. It supports basic usage, pre-selected values, grouped options, disabled options, and programmatic control via JavaScript. ```html ``` -------------------------------- ### Install uui-ref using npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref/README.md Installs the uui-ref component from npm. This is the primary method for adding the component to your project. No specific dependencies are mentioned beyond the package itself. ```zsh npm i @umbraco-ui/uui-ref ``` -------------------------------- ### Install uui-modal via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-modal/README.md Installs the uui-modal package using npm. This is the first step to using the modal component in your project. ```zsh npm i @umbraco-ui/uui-modal ``` -------------------------------- ### Install uui-input-lock via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input-lock/README.md Installs the uui-input-lock package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-input-lock ``` -------------------------------- ### Basic uui-input usage in HTML Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-input/README.md Demonstrates the basic usage of the `` component in HTML. It shows how to set labels, types, and placeholders for text and password inputs. ```html ``` -------------------------------- ### Install uui-dialog via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-dialog/README.md Installs the uui-dialog package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-dialog ``` -------------------------------- ### Install uui-color-swatches via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-color-swatches/README.md Installs the uui-color-swatches package using npm. This is the primary method for adding the component to your project. No specific inputs or outputs are associated with this command. ```zsh npm i @umbraco-ui/uui-color-swatches ``` -------------------------------- ### HTML Form Integration with UUI Components Source: https://context7.com/umbraco/umbraco.ui/llms.txt Demonstrates how to integrate UUI components with native HTML forms using the ElementInternals API. This example shows a complete registration form with various input types and event handling for form submission. ```html
Full Name Email Bio Role
Reset Register
``` -------------------------------- ### Install uui-badge via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-badge/README.md Installs the uui-badge component using npm. This is the primary method for adding the component to your project. No specific dependencies are mentioned beyond the package itself. ```zsh npm i @umbraco-ui/uui-badge ``` -------------------------------- ### Install uui-popover-container via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-popover-container/README.md Installs the uui-popover-container package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-popover-container ``` -------------------------------- ### Install uui-symbol-more via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-more/README.md Installs the uui-symbol-more package using npm. This is the primary method for adding the component to your project. ```zsh npm i @umbraco-ui/uui-symbol-more ``` -------------------------------- ### Install uui Package via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui/README.md Installs the @umbraco-ui/uui package using npm. This is the standard method for including the library in projects that use a module bundler. ```zsh npm i @umbraco-ui/uui ``` -------------------------------- ### Install Umbraco UI Symbol Folder Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-folder/README.md Installs the symbol-folder component using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/symbol-folder ``` -------------------------------- ### Basic Usage of uui-responsive-container Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-responsive-container/README.md Demonstrates the basic usage of the uui-responsive-container component with several child buttons. The container will automatically handle collapsing items into a dropdown when space is insufficient. ```html Save Edit Delete Share ``` -------------------------------- ### Install uui-combobox-list via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-combobox-list/README.md Installs the uui-combobox-list package using npm. This is the first step to using the component in your project. ```shell npm i @umbraco-ui/uui-combobox-list ``` -------------------------------- ### Install uui-tag via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-tag/README.md Installs the uui-tag component using npm. This is the first step to using the tag component in your project. ```zsh npm i @umbraco-ui/uui-tag ``` -------------------------------- ### Import Umbraco UI Library (UUI) Components Source: https://context7.com/umbraco/umbraco.ui/llms.txt Examples of how to import Umbraco UI Library (UUI) components into your JavaScript project. You can import the entire library or specific components as needed. ```javascript // Import entire library import '@umbraco-ui/uui'; // Or import individual components import '@umbraco-ui/uui-button'; import '@umbraco-ui/uui-input'; ``` -------------------------------- ### Use uui-symbol-file Component in HTML Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-symbol-file/README.md Demonstrates how to use the `` component in HTML. It shows examples for creating text and password input fields with labels and placeholders. ```html ``` -------------------------------- ### Install uui-color-area via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-color-area/README.md Installs the uui-color-area component using npm. This is the primary method for adding the component to your project. No specific inputs or outputs are required beyond executing the command. ```zsh npm i @umbraco-ui/uui-color-area ``` -------------------------------- ### Install uui-scroll-container via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-scroll-container/README.md Installs the uui-scroll-container package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-scroll-container ``` -------------------------------- ### Basic Usage of uui-action-bar Component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-action-bar/README.md Demonstrates the basic HTML structure for using the `uui-action-bar` component. It includes sample buttons within the action bar. ```html Button 1 Button 2 Button 3 ``` -------------------------------- ### uui-checkbox Component Examples Source: https://context7.com/umbraco/umbraco.ui/llms.txt Demonstrates the usage of the uui-checkbox component for boolean selections, including basic, checked, required, indeterminate, disabled, and readonly states. It supports standard HTML form attributes. ```html
Submit
``` -------------------------------- ### HTML Usage of UUI CSS Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-css/lib/uui-css.mdx Demonstrates how to apply UUI CSS classes and custom properties within an HTML structure. This example shows the use of `.uui-text` for typography and CSS variables for background colors, ensuring consistent Umbraco UI styling. ```html

Hello uui-css!

This component will now use the styling from uui-text because the root of the component has the uui-text class.

this paragraph uses a custom property from the uui custom properties to set its background color.

``` -------------------------------- ### Basic uui-button Usage Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-button/README.md Demonstrates the basic usage of the `` component in HTML. It shows how to set a label and a visual style ('look'). ```html Basic button ``` -------------------------------- ### Implement Tab Navigation with uui-tab-group and uui-tab Source: https://context7.com/umbraco/umbraco.ui/llms.txt The uui-tab-group and uui-tab components create tabbed navigation interfaces. They support basic tab setup, event handling for tab selection, and can be used as links for navigation. The group component handles responsive collapsing. ```html Content Info Settings Overview Details History
Home Products About ``` -------------------------------- ### Use uui-file-dropzone component in HTML Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-file-dropzone/README.md Demonstrates the basic usage of the `` component in an HTML file. This is how you render the file dropzone on a webpage. ```html ``` -------------------------------- ### Basic uui-box Usage Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-box/README.md Demonstrates the basic usage of the '' component with a headline. The content inside the tags will be displayed within the box. ```html Content ``` -------------------------------- ### Basic Usage of uui-ref-node Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-node/README.md Demonstrates the basic HTML structure for using the `` component. This is the simplest way to render the component on a page. ```html ``` -------------------------------- ### Use uui-card-media component in HTML Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-card-media/README.md Demonstrates the basic usage of the `` component in an HTML file. This is the standard way to render the component on a page. ```html ``` -------------------------------- ### Basic Usage of uui-file-preview component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-file-preview/README.md Demonstrates the basic HTML structure for using the `` component. This is the simplest way to render the component on a page. ```html ``` -------------------------------- ### Basic usage of uui-boolean-input component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-boolean-input/README.md Demonstrates the basic HTML structure for using the uui-boolean-input component. This will render a default boolean input element. ```html ``` -------------------------------- ### Install uui-visually-hidden via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-visually-hidden/README.md Installs the uui-visually-hidden component using npm. This is the first step to include the component in your project. ```zsh npm i @umbraco-ui/uui-visually-hidden ``` -------------------------------- ### Basic uui-loader usage Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-loader/README.md Demonstrates the basic usage of the '' component in HTML. This will render a default loader element. ```html ``` -------------------------------- ### Basic Usage of uui-ref-list component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-ref-list/README.md Demonstrates the basic HTML structure for using the `` component. This will render the default reference list. ```html ``` -------------------------------- ### Umbraco UI Project Scripts Overview Source: https://github.com/umbraco/umbraco.ui/blob/main/README.md This section provides a summary of common scripts available in the Umbraco UI project's package.json. These scripts facilitate development, testing, and code quality checks. ```sh # storybook: opens storybook for the elements # storybook:analyze: generate or update `custom-elements.json` file # test: runs your test suite with Web Test Runner # format: runs linter and autoformatter ``` -------------------------------- ### Install uui-range-slider via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-range-slider/README.md Installs the uui-range-slider package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-range-slider ``` -------------------------------- ### Basic usage of uui-menu-item component Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-menu-item/README.md Demonstrates the basic HTML structure for using the uui-menu-item component. This is a simple way to render the menu item. ```html ``` -------------------------------- ### Use uui-popover component in HTML Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-popover/README.md Demonstrates the basic usage of the `` component in an HTML template. This is the simplest way to render the popover. ```html ``` -------------------------------- ### Install uui-loader-circle via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-loader-circle/README.md Installs the uui-loader-circle package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-loader-circle ``` -------------------------------- ### Install uui-icon-registry via npm Source: https://github.com/umbraco/umbraco.ui/blob/main/packages/uui-icon-registry/README.md Installs the uui-icon-registry package using npm. This is the first step to using the component in your project. ```zsh npm i @umbraco-ui/uui-icon-registry ```