MDSV - Svelte 5 Component Library

Modern, type-safe components built with Svelte 5 runes and TypeScript.

What is MDSV?

MDSV is a collection of production-ready Svelte 5 components designed for building modern web applications. Each component is:

  • Type-safe: Full TypeScript support with strict mode
  • Svelte 5 native: Uses runes ($state, $derived, $props) and snippets
  • Well-tested: Comprehensive test coverage with Bun
  • Documented: Detailed docs with live examples
  • Tree-shakeable: Import only what you need

Available Packages

@mdsv/ratio

Locks containers to specific aspect ratios with responsive mode switching.

bun add @mdsv/ratio

Perfect for:

  • Video players that maintain aspect ratio
  • Flashcard/learning apps with consistent sizing
  • Mobile-first responsive layouts
  • Device-agnostic UI components

Quick Start

# Install a package
bun add @mdsv/ratio

# Use in your Svelte component
import Ratio from '@mdsv/ratio'

Philosophy

MDSV components follow these principles:

  1. Svelte 5 First - Built from scratch for Svelte 5, not migrated from Svelte 4
  2. TypeScript Strict - All components use strict TypeScript with full type safety
  3. Minimal Dependencies - Each package has minimal dependencies to reduce bundle size
  4. Test-Driven - Every component has comprehensive tests
  5. Documentation-Driven - Spec-first approach ensures clarity and consistency

Contributing

This is a monorepo using Bun workspaces. To contribute:

# Clone the repository
git clone https://github.com/yourusername/sv.git
cd sv

# Install dependencies
bun install

# Run tests
bun test

# Build all packages
bun run build

License

MIT