Web Component Design

Build reusable, maintainable UI components using modern frameworks with clean composition patterns and styling approaches.

When to Use This Skill

• Designing reusable component libraries or design systems

• Implementing complex component composition patterns

• Choosing and applying CSS-in-JS solutions

• Building accessible, responsive UI components

• Creating consistent component APIs across a codebase

• Refactoring legacy components into modern patterns

• Implementing compound components or render props

Core Concepts

1. Component Composition Patterns

Compound Components: Related components that work together

// Usage

<Select value={value} onChange={setValue}>

  <Select.Trigger>Choose option</Select.Trigger>

  <Select.Options>

    <Select.Option value="a">Option A</Select.Option>

    <Select.Option value="b">Option B</Select.Option>

  </Select.Options>

</Select>

Render Props: Delegate rendering to parent

<DataFetcher url="/api/users">

  {({ data, loading, error }) =>

    loading ? <Spinner /> : <UserList users={data} />

  }

</DataFetcher>

Slots (Vue/Svelte): Named content injection points

<template>

  <Card>

    <template #header>Title</template>

    <template #content>Body text</template>

    <template #footer><Button>Action</Button></template>

  </Card>

</template>

2. CSS-in-JS Approaches

Solution

Approach

Best For

Tailwind CSS

Utility classes

Rapid prototyping, design systems

CSS Modules

Scoped CSS files

Existing CSS, gradual adoption

styled-components

Template literals

React, dynamic styling

Emotion

Object/template styles

Flexible, SSR-friendly

Vanilla Extract

Zero-runtime

Performance-critical apps

3. Component API Design

interface ButtonProps {

  variant?: "primary" | "secondary" | "ghost";

  size?: "sm" | "md" | "lg";

  isLoading?: boolean;

  isDisabled?: boolean;

  leftIcon?: React.ReactNode;

  rightIcon?: React.ReactNode;

  children: React.ReactNode;

  onClick?: () => void;

}

Principles:

• Use semantic prop names (isLoading vs loading)

• Provide sensible defaults

• Support composition via children

• Allow style overrides via className or style

Quick Start: React Component with Tailwind

import { forwardRef, type ComponentPropsWithoutRef } from "react";

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "@/lib/utils";

const buttonVariants = cva(

  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50",

  {

    variants: {

      variant: {

        primary: "bg-blue-600 text-white hover:bg-blue-700",

        secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",

        ghost: "hover:bg-gray-100 hover:text-gray-900",

      },

      size: {

        sm: "h-8 px-3 text-sm",

        md: "h-10 px-4 text-sm",

        lg: "h-12 px-6 text-base",

      },

    },

    defaultVariants: {

      variant: "primary",

      size: "md",

    },

  },

);

interface ButtonProps

  extends

    ComponentPropsWithoutRef<"button">,

    VariantProps<typeof buttonVariants> {

  isLoading?: boolean;

}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(

  ({ className, variant, size, isLoading, children, ...props }, ref) => (

    <button

      ref={ref}

      className={cn(buttonVariants({ variant, size }), className)}

      disabled={isLoading || props.disabled}

      {...props}

    >

      {isLoading &#x26;&#x26; <Spinner className="mr-2 h-4 w-4" />}

      {children}

    </button>

  ),

);

Button.displayName = "Button";

Framework Patterns

React: Compound Components

import { createContext, useContext, useState, type ReactNode } from "react";

interface AccordionContextValue {

  openItems: Set<string>;

  toggle: (id: string) => void;

}

const AccordionContext = createContext<AccordionContextValue | null>(null);

function useAccordion() {

  const context = useContext(AccordionContext);

  if (!context) throw new Error("Must be used within Accordion");

  return context;

}

export function Accordion({ children }: { children: ReactNode }) {

  const [openItems, setOpenItems] = useState<Set<string>>(new Set());

  const toggle = (id: string) => {

    setOpenItems((prev) => {

      const next = new Set(prev);

      next.has(id) ? next.delete(id) : next.add(id);

      return next;

    });

  };

  return (

    <AccordionContext.Provider value={{ openItems, toggle }}>

      <div className="divide-y">{children}</div>

    </AccordionContext.Provider>

  );

}

Accordion.Item = function AccordionItem({

  id,

  title,

  children,

}: {

  id: string;

  title: string;

  children: ReactNode;

}) {

  const { openItems, toggle } = useAccordion();

  const isOpen = openItems.has(id);

  return (

    <div>

      <button onClick={() => toggle(id)} className="w-full text-left py-3">

        {title}

      </button>

      {isOpen &#x26;&#x26; <div className="pb-3">{children}</div>}

    </div>

  );

};

Vue 3: Composables

<script setup lang="ts">

import { ref, computed, provide, inject, type InjectionKey } from "vue";

interface TabsContext {

  activeTab: Ref<string>;

  setActive: (id: string) => void;

}

const TabsKey: InjectionKey<TabsContext> = Symbol("tabs");

// Parent component

const activeTab = ref("tab-1");

provide(TabsKey, {

  activeTab,

  setActive: (id: string) => {

    activeTab.value = id;

  },

});

// Child component usage

const tabs = inject(TabsKey);

const isActive = computed(() => tabs?.activeTab.value === props.id);

</script>

Svelte 5: Runes

<script lang="ts">

  interface Props {

    variant?: 'primary' | 'secondary';

    size?: 'sm' | 'md' | 'lg';

    onclick?: () => void;

    children: import('svelte').Snippet;

  }

  let { variant = 'primary', size = 'md', onclick, children }: Props = $props();

  const classes = $derived(

    `btn btn-${variant} btn-${size}`

  );

</script>

<button class={classes} {onclick}>

  {@render children()}

</button>

Best Practices

• Single Responsibility: Each component does one thing well

• Prop Drilling Prevention: Use context for deeply nested data

• Accessible by Default: Include ARIA attributes, keyboard support

• Controlled vs Uncontrolled: Support both patterns when appropriate

• Forward Refs: Allow parent access to DOM nodes

• Memoization: Use React.memo, useMemo for expensive renders

• Error Boundaries: Wrap components that may fail

Common Issues

• Prop Explosion: Too many props - consider composition instead

• Style Conflicts: Use scoped styles or CSS Modules

• Re-render Cascades: Profile with React DevTools, memo appropriately

• Accessibility Gaps: Test with screen readers and keyboard navigation

• Bundle Size: Tree-shake unused component variants