๐ŸŽจ Svelte UI Toolkit

A comprehensive collection of modern, accessible, and customizable UI components built with SvelteKit and Tailwind CSS.

Made with โค๏ธ by Reckless98

๐Ÿš€ Features

  • Modern Design: Clean, contemporary components following current design trends
  • Accessibility First: WCAG compliant with proper ARIA labels and keyboard navigation
  • Responsive: Mobile-first design that works on all screen sizes
  • Customizable: Highly configurable with extensive theming support
  • TypeScript Ready: Full TypeScript support for better development experience
  • Performance Optimized: Lightweight components with minimal bundle impact
  • Dark Mode: Built-in dark mode support across all components
  • Enhanced Animations: Beautiful, creative animations and micro-interactions
  • Particle Effects: Interactive particle backgrounds and visual effects
  • Glass Morphism: Modern frosted glass effects and transparency

๐Ÿ“ฆ Components

Form Components

  • Button - Versatile button component with multiple variants, sizes, and animations
  • Input - Feature-rich input component with validation, icons, and multiple variants
  • Header - Responsive header with navigation, search, and sticky behavior
  • Footer - Comprehensive footer with links, social media, and newsletter signup
  • Navigation - Flexible navigation component with horizontal, vertical, breadcrumb, and tab variants

Display Components

  • Card - Flexible card component with multiple variants and interactive features
  • Modal - Accessible modal dialogs with animations and custom content

Layout Components

Animation Components

  • ScrollReveal - Animate elements when they enter the viewport
  • Parallax - Create depth with parallax scrolling effects

๐Ÿ›  Installation

npm install svelte-ui-toolkit

๐ŸŽฏ Quick Start

<script>
    import { Button, Card, Input, Modal } from 'svelte-ui-toolkit';

    let showModal = false;
    let formData = { name: '', email: '' };
</script>

<Card title="Contact Form" variant="elevated">
    <form class="space-y-4">
        <Input label="Name" bind:value={formData.name} placeholder="Enter your name" required />
        <Input
            type="email"
            label="Email"
            bind:value={formData.email}
            placeholder="Enter your email"
            required
        />
        <Button variant="primary" on:click={() => (showModal = true)}>Submit</Button>
    </form>
</Card>

<Modal bind:show={showModal} title="Thank You!">
    <p>Your form has been submitted successfully.</p>
</Modal>

๐ŸŽจ Theming

CSS Custom Properties

The toolkit uses CSS custom properties for easy theming:

:root {
    /* Primary Colors */
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-accent: #10b981;

    /* Neutral Colors */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-900: #111827;

    /* Component Specific */
    --button-border-radius: 0.5rem;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --modal-backdrop: rgba(0, 0, 0, 0.5);
}

Dark Mode

All components automatically support dark mode through CSS classes:

<div class="dark">
    <!-- All components will use dark theme -->
    <Button variant="primary">Dark Mode Button</Button>
</div>

๐Ÿ”ง Configuration

Tailwind CSS Setup

Add the following to your tailwind.config.js:

module.exports = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/svelte-ui-toolkit/**/*.{html,js,svelte,ts}',
    ],
    darkMode: 'class',
    theme: {
        extend: {
            colors: {
                accent: {
                    50: '#f0fdf4',
                    500: '#10b981',
                    600: '#059669',
                    700: '#047857',
                },
            },
        },
    },
};

๐Ÿ“ฑ Component Explorer

This project includes a comprehensive component explorer accessible at /explorer. The explorer provides:

  • Live Examples: Interactive examples of all components
  • Code Snippets: Copy-ready code for each component variant
  • Props Documentation: Detailed prop descriptions and types
  • Accessibility Testing: Screen reader and keyboard navigation testing
  • Theme Toggle: Test components in light and dark modes

To access the explorer:

npm run dev
# Navigate to http://localhost:5173/explorer

๐Ÿงช Testing

The components are thoroughly tested with:

  • Unit Tests: Component logic and prop handling
  • Integration Tests: Component interactions and data flow
  • Accessibility Tests: WCAG compliance and screen reader compatibility
  • Visual Regression Tests: UI consistency across browsers

Run tests:

npm run test
npm run test:accessibility
npm run test:visual

๐Ÿ— Development

Project Structure

src/
โ”œโ”€โ”€ lib/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ Button/
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ Button.svelte
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ index.js
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ README.md
โ”‚   โ”‚   โ””โ”€โ”€ [other components]/
โ”‚   โ”œโ”€โ”€ layouts/
โ”‚   โ”‚   โ”œโ”€โ”€ HeroLayout.svelte
โ”‚   โ”‚   โ””โ”€โ”€ ParallaxLayout.svelte
โ”‚   โ””โ”€โ”€ animations/
โ”‚       โ”œโ”€โ”€ ScrollReveal.svelte
โ”‚       โ””โ”€โ”€ Parallax.svelte
โ””โ”€โ”€ routes/
    โ””โ”€โ”€ explorer/
        โ”œโ”€โ”€ +page.svelte
        โ”œโ”€โ”€ Sidebar.svelte
        โ””โ”€โ”€ components/
            โ””โ”€โ”€ [component explorers]/

Contributing

  1. Fork the repository
  2. Create a feature branch: git checkout -b feature/new-component
  3. Follow conventions: Use the existing component structure
  4. Add documentation: Include README.md and JSDoc comments
  5. Add tests: Write comprehensive tests for new features
  6. Submit a pull request: Include a detailed description

Component Creation Guidelines

When creating new components:

  1. Use TypeScript: Provide proper type definitions
  2. Follow naming conventions: PascalCase for components, kebab-case for files
  3. Include README: Document props, examples, and accessibility features
  4. Add to explorer: Create an explorer component for testing
  5. Implement accessibility: Include ARIA labels, keyboard navigation, and focus management
  6. Support dark mode: Use CSS custom properties and dark mode classes

๐Ÿ“– Documentation

๐Ÿค Community

  • GitHub Issues: Report bugs and request features
  • Discussions: Community questions and showcase
  • Discord: Real-time community support
  • Twitter: Follow @svelte-ui-toolkit for updates

๐Ÿ“„ License

MIT License - see LICENSE file for details.

๐Ÿ™ Acknowledgments

  • Svelte Team: For the amazing framework
  • Tailwind CSS: For the utility-first CSS framework
  • Community Contributors: For feedback, bug reports, and contributions
  • Design Inspiration: From leading design systems and UI libraries

๐Ÿ”„ Changelog

v1.0.0 (Current)

  • Initial release with core components
  • Component explorer interface
  • Comprehensive documentation
  • Accessibility compliance
  • Dark mode support

Roadmap

  • Additional form components (Select, Checkbox, Radio)
  • Data display components (Table, List, Badge)
  • Feedback components (Toast, Alert, Progress)
  • Advanced layout components (Grid, Flex utilities)
  • Chart and visualization components
  • Animation library expansion

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes