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.

Components

100%

Test Coverage

A11y

Accessible

TypeScript

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

<script>
  import Calculator from './calculator.svelte';
  
  let result = 0;
  
  const handle_calculation = (event) => {
    result = event.detail.result;
  };
</script>

<Calculator on:calculate={handle_calculation} />
<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

Size

Title

Content

Features

Focus management and restoration
Keyboard navigation (ESC to close)
Backdrop click to close
Multiple sizes (sm, md, lg, xl)
Body scroll prevention

Props

<script>
  import Modal from './modal.svelte';
  
  let show_modal = false;
</script>

<button on:click={() => show_modal = true}>
  Open Modal
</button>

<Modal bind:show={show_modal}>
  <h2 slot="title">Confirmation</h2>
  <p>Are you sure you want to continue?</p>
  <div slot="actions">
    <button on:click={() => show_modal = false}>Cancel</button>
    <button on:click={() => show_modal = false}>Confirm</button>
  </div>
</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.

Variant

Clickable

Title

Subtitle

Features

Multiple visual variants
Clickable with hover effects
Image support
Flexible content areas
Keyboard accessible

Variants

Default

Elevated

Outlined

Filled

Usage

<script>
  import Card from './card.svelte';
  
  const handle_click = () => {
    console.log('Card clicked!');
  };
</script>

<Card clickable on:click={handle_click}>
  <h3>Interactive Card</h3>
  <p>Click me to see the interaction!</p>
</Card>

Login Form

Complex form component with real-time validation, password visibility toggle, and comprehensive accessibility features.

Live Demo

Demo Configuration

Enable Remember Me Option

Enable Forgot Password Link

Features

Real-time email & password validation
Password visibility toggle
Remember me functionality
Forgot password handling
Loading states
Accessibility compliant

Validation Rules

Email: Valid email format required

Password: Minimum 8 characters, uppercase, lowercase, number

Usage

<script>
  import LoginForm from './login-form.svelte';
  
  const handle_submit = (event) => {
    const { email, password } = event.detail;
    console.log('Login attempt:', { email, password });
  };
</script>

<LoginForm on:submit={handle_submit} />