Client Components

Open in ChatGPT

📄️ <dwc-accordion-panel>

Style the dwc-accordion-panel client component using CSS variables, shadow parts, and slots for header, icon, and content customization.

📄️ <dwc-accordion>

Customize the dwc-accordion client component through CSS variables, shadow parts, and slots to theme expand and collapse panels.

📄️ <dwc-alert-popover>

Style the dwc-alert-popover client component with CSS variables and shadow parts to theme positioning, surface, and animation.

📄️ <dwc-alert>

Customize the dwc-alert client component using CSS variables, shadow parts, and slots to theme banner color, icon, and content.

📄️ <dwc-app-layout>

Style the dwc-app-layout client component via CSS variables and shadow parts to theme header, drawer, footer, and content regions.

📄️ <dwc-app-nav-item>

Customize the dwc-app-nav-item client component with CSS variables and shadow parts to style nav links, icons, and active states.

📄️ <dwc-app-nav>

Style the dwc-app-nav client component through CSS variables and shadow parts to theme navigation containers, spacing, and surfaces.

📄️ <dwc-avatar>

Customize the dwc-avatar client component using CSS variables and shadow parts to style size, background, initials, and image rendering.

📄️ <dwc-backdrop>

Style the dwc-backdrop client component with CSS variables to control overlay color, opacity, blur, and transition timing.

📄️ <dwc-badge>

Customize the dwc-badge client component via CSS variables and shadow parts to theme color, size, radius, and label placement.

📄️ <dwc-button>

Style the dwc-button client component with CSS variables, shadow parts, and slots for color, padding, expanse, and icon placement.

📄️ <dwc-checkbox>

Customize the dwc-checkbox client component using CSS variables and shadow parts to theme box, check icon, label, and focus states.

📄️ <dwc-choicebox>

Style the dwc-choicebox client component with CSS variables and shadow parts to theme the trigger, dropdown panel, and option list.

📄️ <dwc-color-chooser>

Customize the dwc-color-chooser client component using CSS variables and shadow parts to theme swatches, sliders, and preview surfaces.

📄️ <dwc-columns-layout>

Style the dwc-columns-layout client component using CSS variables to control column gaps, breakpoints, and responsive spacing.

📄️ <dwc-combobox>

Customize the dwc-combobox client component via CSS variables and shadow parts to theme the input, dropdown, and option items.

📄️ <dwc-datefield-spinner>

Style the dwc-datefield-spinner client component with CSS variables and shadow parts to theme date input, spinner buttons, and surface.

📄️ <dwc-datefield>

Customize the dwc-datefield client component using CSS variables and shadow parts to theme the date input, calendar trigger, and label.

📄️ <dwc-dialog>

Style the dwc-dialog client component via CSS variables, shadow parts, and slots to theme the modal surface, header, body, and footer.

📄️ <dwc-drawer>

Customize the dwc-drawer client component with CSS variables and shadow parts to theme placement, size, surface, and backdrop overlay.

📄️ <dwc-dropdown>

Style the dwc-dropdown client component using CSS variables and shadow parts to theme trigger, panel surface, and positioning.

📄️ <dwc-field-spinner>

Customize the dwc-field-spinner client component via CSS variables and shadow parts to theme the input field and increment controls.

📄️ <dwc-field>

Style the dwc-field client component using CSS variables, shadow parts, and slots to theme inputs, labels, helper text, and prefixes.

📄️ <dwc-file-chooser>

Customize the dwc-file-chooser client component with CSS variables and shadow parts to theme the picker dialog, breadcrumbs, and list.

📄️ <dwc-file-save>

Style the dwc-file-save client component using CSS variables and shadow parts to theme the save dialog, path input, and action buttons.

📄️ <dwc-font-chooser>

Customize the dwc-font-chooser client component via CSS variables and shadow parts to theme the font list, preview area, and controls.

📄️ <dwc-hotkey>

Style the dwc-hotkey client component with CSS variables and shadow parts to theme key cap surfaces, separators, and typography.

📄️ <dwc-icon-button>

Customize the dwc-icon-button client component using CSS variables and shadow parts to theme color, size, hover, and focus states.

📄️ <dwc-icon>

Style the dwc-icon client component using CSS variables and shadow parts to theme size, color, and stroke for embedded icons.

📄️ <dwc-infinite-scroll>

Customize the dwc-infinite-scroll client component via CSS variables and shadow parts to theme the loader, sentinel, and scroll container.

📄️ <dwc-listbox>

Style the dwc-listbox client component using CSS variables and shadow parts to theme the list surface, items, selection, and scrollbars.

📄️ <dwc-loading>

Customize the dwc-loading client component with CSS variables and shadow parts to theme the spinner, backdrop, and loading message.

📄️ <dwc-login>

Style the dwc-login client component using CSS variables, shadow parts, and slots to theme the form surface, fields, and action buttons.

📄️ <dwc-markdown-viewer>

Style the dwc-markdown-viewer component with CSS variables and shadow parts to theme rendered Markdown content, typography, and code blocks.

📄️ <dwc-menu>

Customize the dwc-menu component appearance through CSS variables and shadow parts for surface, spacing, and item styling.

📄️ <dwc-menubar>

Theme the dwc-menubar component with CSS variables and shadow parts that control background, item spacing, and hover states.

📄️ <dwc-menuitem>

Style the dwc-menuitem component via CSS variables and shadow parts for label, icon, indicator, and selection states.

📄️ <dwc-navigator>

Customize the dwc-navigator component appearance with CSS variables and shadow parts for paging controls and indicators.

📄️ <dwc-numberfield-spinner>

Style the dwc-numberfield-spinner increment and decrement controls with CSS variables and shadow parts for button theming.

📄️ <dwc-numberfield>

Theme the dwc-numberfield component through CSS variables and shadow parts targeting input, label, prefix, and suffix areas.

📄️ <dwc-popover>

Theme dwc-popover placement, surface, arrow visibility, and overlay through component-scoped CSS variables and shadow parts.

📄️ <dwc-popupmenu>

Style the dwc-popupmenu floating surface with CSS variables and shadow parts for elevation, padding, and item appearance.

📄️ <dwc-progressbar>

Customize the dwc-progressbar track, indicator, and label through CSS variables and shadow parts for color and sizing.

📄️ <dwc-radio>

Style the dwc-radio control, dot, and label via CSS variables and shadow parts for checked, hover, and disabled states.

📄️ <dwc-refresher>

Customize the dwc-refresher pull-to-refresh indicator with CSS variables and shadow parts for spinner, icon, and text.

📄️ <dwc-separator>

Style the dwc-separator divider line with CSS variables and shadow parts controlling thickness, color, and orientation.

📄️ <dwc-slider>

Theme the dwc-slider track, thumb, tick marks, and labels through CSS variables and shadow parts for visual customization.

📄️ <dwc-spinner>

Customize the dwc-spinner loading indicator with CSS variables and shadow parts for size, color, and animation speed.

📄️ <dwc-splitter>

Style the dwc-splitter divider and panes through CSS variables and shadow parts for handle color, width, and hover effects.

📄️ <dwc-tab-panel>

Customize the dwc-tab-panel content surface with CSS variables and shadow parts for padding, background, and borders.

📄️ <dwc-tab>

Style the dwc-tab label, icon, and indicator with CSS variables and shadow parts for active, hover, and disabled states.

📄️ <dwc-tabbed-pane>

Theme the dwc-tabbed-pane container, tab strip, and active indicator through CSS variables and shadow parts.

📄️ <dwc-table>

Style the dwc-table grid, header, rows, cells, and selection state with CSS variables and shadow parts for full visual control.

📄️ <dwc-terminal>

Customize the dwc-terminal console appearance with CSS variables and shadow parts for background, text, cursor, and font.

📄️ <dwc-textarea>

Theme the dwc-textarea multiline input with CSS variables and shadow parts for label, border, padding, and resize handle.

📄️ <dwc-textfield-spinner>

Style the dwc-textfield-spinner stepper buttons through CSS variables and shadow parts for size, color, and hover states.

📄️ <dwc-textfield>

Customize the dwc-textfield input with CSS variables and shadow parts targeting label, border, prefix, suffix, and clear button.

📄️ <dwc-timefield-spinner>

Style the dwc-timefield-spinner increment controls with CSS variables and shadow parts for stepper appearance and states.

📄️ <dwc-timefield>

Theme the dwc-timefield input through CSS variables and shadow parts for label, border, segments, and picker affordance.

📄️ <dwc-toast>

Customize dwc-toast appearance via shadow parts, slots, and position-aware CSS variables for surface, theme, and animation.

📄️ <dwc-toolbar>

Style the dwc-toolbar container, slots, and action items with CSS variables and shadow parts for background and spacing.

📄️ <dwc-tree-node>

Style the dwc-tree-node label, icon, and expand toggle with CSS variables and shadow parts for selection and hover states.

📄️ <dwc-tree>

Style the dwc-tree component with CSS variables for indentation, color, and expand-icon theming, plus shadow parts for nodes.

📄️ <dwc-upload>

Customize the dwc-upload drop zone, file list, and progress through CSS variables and shadow parts for visual theming.