Component Library Design Training

Design and build production-quality component libraries with this advanced 3-day training. Learn to create reusable, accessible, and well-documented Svelte components that your team can share across projects and publish to npm.

Training Details

Duration	3 days (24 hours)
Level	Advanced
Delivery	In-person, Live online, Hybrid
Certification	N/A

Who Is This For?

• Senior frontend developers building shared component systems
• Design system engineers creating organizational UI libraries
• Open-source maintainers packaging Svelte components
• Team leads establishing component standards and patterns
• Developers with accessibility and design system experience

Learning Outcomes

After completing this training, participants will be able to:

• Architect a Svelte component library with consistent API patterns
• Build accessible components following WAI-ARIA guidelines
• Implement flexible theming with CSS custom properties and design tokens
• Package and publish components to npm with proper TypeScript definitions
• Create interactive documentation with Storybook or Histoire
• Establish testing strategies for visual regression and accessibility compliance

Detailed Agenda

Day 1: Component Architecture

Module 1: Library Architecture

• Component library project structure
• Monorepo vs single-package strategies
• Build tooling: svelte-package and Vite library mode
• TypeScript integration and type exports
• Hands-on: Scaffold a component library project

Module 2: Component API Design

• Consistent prop naming conventions
• Event forwarding and custom events
• Slot-based composition patterns
• `$$restProps` for HTML attribute passthrough
• Action-based behavior composition
• Hands-on: Design a button component family

Module 3: Accessibility Foundations

• WAI-ARIA roles, states, and properties
• Keyboard navigation and focus management
• Screen reader testing and NVDA/VoiceOver
• Color contrast and motion preferences
• Hands-on: Build accessible form controls

Day 2: Theming and Advanced Patterns

Module 4: Theming System

• CSS custom properties for component theming
• Design tokens: naming, organization, and tooling
• Light/dark mode and system preference detection
• Runtime theme switching and persistence
• Hands-on: Implement a complete theming system

Module 5: Advanced Component Patterns

• Compound components (Tabs, Accordion, Menu)
• Polymorphic components with `as` prop
• Headless components for maximum flexibility
• Portal and overlay patterns
• Hands-on: Build a compound dropdown menu

Module 6: Transitions and Animation

• Coordinated transitions across component groups
• Animation tokens and consistent motion
• Reduced motion support
• Spring-based physics animations
• Hands-on: Create an animated toast notification system

Day 3: Packaging, Testing, and Documentation

Module 7: Packaging and Distribution

• `svelte-package` configuration and output
• Package.json exports and entry points
• Peer dependencies and version management
• CSS bundling strategies for consumers
• Hands-on: Package and publish to npm registry

Module 8: Testing Strategy

• Component testing with Svelte Testing Library
• Visual regression testing with Playwright
• Accessibility testing with axe-core
• Snapshot testing and change detection
• Hands-on: Build a comprehensive test suite

Module 9: Documentation

• Interactive documentation with Histoire
• Component playground and live examples
• API documentation generation from TypeScript
• Changelog and versioning practices
• Hands-on: Create a documentation site for your library

Prerequisites

• Strong Svelte experience (components, stores, lifecycle)
• Understanding of CSS architecture and custom properties
• Familiarity with npm package management
• Basic accessibility knowledge helpful

Delivery Formats

Format	Description
In-Person	On-site at your company's location, hands-on with direct interaction
Live Online	Interactive virtual sessions with screen sharing and real-time labs
Hybrid	Combination of on-site and remote sessions, flexible scheduling

All formats include hands-on labs, course materials, library starter templates, and post-training support.