Widgets Ui

Widgets Ui is a community skill for building reusable UI widget components, covering component architecture, styling patterns, state management, accessibility compliance, and responsive design for creating production-ready interface elements.

What Is This?

Overview

Widgets Ui provides guidance on designing and building reusable user interface widget components for web applications. It covers component architecture that structures widgets with clear prop interfaces and composition patterns for reusability, styling patterns that implement consistent design using CSS modules or utility classes with theming support, state management that handles interactive elements like toggles and accordions with controlled and uncontrolled modes, accessibility compliance that ensures WCAG standards with ARIA attributes and keyboard navigation, and responsive design that adapts layout across screen sizes. The skill helps frontend developers build accessible widget libraries.

Who Should Use This

This skill serves frontend developers building component libraries, design system teams creating standardized UI elements, and application developers assembling interfaces from reusable widget building blocks.

Why Use It?

Problems It Solves

Building UI elements from scratch for each project wastes development time and introduces visual inconsistencies. Widgets without proper accessibility support exclude users who rely on assistive technologies. Managing internal widget state while supporting both controlled and uncontrolled patterns requires careful API design. Styling widgets for consistent appearance across themes and contexts is difficult without structured theming architecture.

Core Highlights

Component architect structures widgets with clear prop interfaces and composition patterns. Style engine implements themeable designs with CSS modules and utility class support. State handler manages interactive elements with controlled and uncontrolled modes. Accessibility layer ensures WCAG compliance with ARIA and keyboard navigation.

How to Use It?

Basic Usage

// Reusable toggle widget
import { useState } from
  'react';

interface ToggleProps {
  label: string;
  checked?: boolean;
  onChange?: (
    val: boolean
  ) => void;
  disabled?: boolean;
}

export function Toggle({
  label,
  checked,
  onChange,
  disabled = false
}: ToggleProps) {
  const [on, setOn] =
    useState(
      checked ?? false);
  const active =
    checked ?? on;

  const toggle = () => {
    if (disabled) return;
    const next = !active;
    setOn(next);
    onChange?.(next);
  };

  return (
    <button
      role="switch"
      aria-checked={
        active}
      aria-label={label}
      disabled={
        disabled}
      onClick={toggle}
      className={
        `toggle ${
          active
            ? 'on'
            : 'off'}`
      }>
      <span
        className=
          "thumb" />
    </button>
  );
}

Real-World Examples

// Accordion widget
import {
  useState, useRef
} from 'react';

interface AccordionItem {
  id: string;
  title: string;
  content: React
    .ReactNode;
}

export function Accordion({
  items
}: {
  items: AccordionItem[]
}) {
  const [open, setOpen] =
    useState<string | null>(
      null);

  return (
    <div role="tablist">
      {items.map(item => {
        const expanded =
          open === item.id;
        return (
          <div key={
            item.id}>
            <button
              role="tab"
              aria-expanded={
                expanded}
              onClick={() =>
                setOpen(
                  expanded
                    ? null
                    : item.id
                )}>
              {item.title}
            </button>
            {expanded && (
              <div
                role=
                  "tabpanel">
                {item
                  .content}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

Advanced Tips

Use compound component patterns to let consumers compose widget parts flexibly while maintaining internal state coordination. Implement forwardRef to allow parent components to access widget DOM elements for focus management and positioning. Add CSS custom properties as the theming interface so consumers can customize appearance without overriding internal styles.

When to Use It?

Use Cases

Build a shared widget library for a design system used across multiple application teams. Create accessible form components including toggles, selects, and date pickers with consistent interaction patterns. Develop a dashboard with configurable widget panels that users can rearrange and customize.

Related Topics

React components, design systems, accessibility, ARIA, CSS modules, component libraries, and responsive design.

Important Notes

Requirements

React or another component framework for building encapsulated widget components with lifecycle management. CSS modules, styled-components, or a utility framework like Tailwind CSS for implementing themeable styling. Testing library such as React Testing Library for verifying widget behavior, accessibility, and keyboard interactions.

Usage Recommendations

Do: expose both controlled and uncontrolled modes through optional value and onChange props for flexible integration. Add ARIA attributes and keyboard event handlers as core functionality rather than optional enhancements. Write unit tests that verify both visual rendering and assistive technology compatibility for each widget.

Don't: hardcode colors, sizes, or spacing values that prevent consumers from applying their own design tokens. Build complex multi-purpose widgets when smaller composable primitives provide better flexibility. Rely solely on mouse interaction without keyboard alternatives since many users navigate with keyboards or assistive devices.

Limitations

Complex widgets like date pickers and rich text editors require extensive accessibility work that exceeds simple ARIA attribute additions. Cross-browser rendering differences can cause subtle visual inconsistencies that require per-browser testing and targeted style adjustments. Server-side rendering compatibility requires careful handling of browser-dependent APIs like window measurements and focus management that are unavailable during initial render.