Component Library
Explore our comprehensive collection of interactive UI components. Each component is fully tested, accessible, and built with Svelte 5 runes for optimal performance.
Component Overview
Quick reference for all available components with their key features and test coverage.
Calculator
Interactive calculator with state management using Svelte 5 runes
Key Features:
- Reactive state
- Mathematical operations
- Clear functionality
Modal
Accessible modal with focus management and keyboard navigation
Key Features:
- Focus management
- Keyboard navigation
- Backdrop click
Card
Flexible card component with multiple variants and slots
Key Features:
- Multiple variants
- Clickable option
- Image support
Login Form
Complex form with validation, password toggle, and accessibility
Key Features:
- Real-time validation
- Password visibility toggle
- Remember me
Calculator
Interactive calculator demonstrating Svelte 5 state management with reactive calculations and keyboard support.
Live Demo
Features
- Reactive state with Svelte 5 runes
- Mathematical operations (+, -, ×, ÷)
- Clear and reset functionality
- Responsive button layout
Usage
1<script>
2 import Calculator from './calculator.svelte';
3
4 let result = 0;
5
6 const handle_calculation = (event) => {
7 result = event.detail.result;
8 };
9</script>
10
11<Calculator on:calculate={handle_calculation} />
12<p>Result: {result}</p>Test Coverage
Comprehensive tests available in calculator.svelte.test.ts
Modal
Accessible modal component with focus management, keyboard navigation, and customizable sizes.
Live Demo
Features
- Focus management and restoration
- Keyboard navigation (ESC to close)
- Backdrop click to close
- Multiple sizes (sm, md, lg, xl)
- Body scroll prevention
Props
1<script>
2 import Modal from './modal.svelte';
3
4 let show_modal = false;
5</script>
6
7<button onclick={() => show_modal = true}>
8 Open Modal
9</button>
10
11<Modal bind:show={show_modal}>
12 <h2 slot="title">Confirmation</h2>
13 <p>Are you sure you want to continue?</p>
14 <div slot="actions">
15 <button onclick={() => show_modal = false}>Cancel</button>
16 <button onclick={() => show_modal = false}>Confirm</button>
17 </div>
18</Modal>Card
Flexible card component with multiple variants, clickable options, and customizable content areas.
Live Demo
Example Card
This is a subtitle
This is the main content of the card. You can customize all the props to see how it changes.
Features
- Multiple visual variants
- Clickable with hover effects
- Image support
- Flexible content areas
- Keyboard accessible
Variants
Usage
1<script>
2 import Card from './card.svelte';
3
4 const handle_click = () => {
5 console.log('Card clicked!');
6 };
7</script>
8
9<Card clickable onclick={handle_click}>
10 <h3>Interactive Card</h3>
11 <p>Click me to see the interaction!</p>
12</Card>Login Form
Complex form component with real-time validation, password visibility toggle, and comprehensive accessibility features.
Live Demo
Demo Configuration
Features
- Real-time email & password validation
- Password visibility toggle
- Remember me functionality
- Forgot password handling
- Loading states
- Accessibility compliant
Validation Rules
Usage
1<script>
2 import LoginForm from './login-form.svelte';
3
4 const handle_submit = (event) => {
5 const { email, password } = event.detail;
6 console.log('Login attempt:', { email, password });
7 };
8</script>
9
10<LoginForm on:submit={handle_submit} />