@mpmg/svelte-essentials

A comprehensive Svelte 5 design system built on top of DaisyUI, providing a collection of accessible and customizable components.

Installation

npm install @mpmg/svelte-essentials

Usage

// In your Svelte file
import { Button, Alert, Modal } from '@mpmg/svelte-essentials';

Features

• 🎨 Built on top of DaisyUI's theme system
• ⚡ Svelte 5 powered components
• 📚 Comprehensive Storybook documentation
• 🎯 TypeScript support
• 🔄 SSR compatible
• 🎭 Fully customizable themes

Available Components

Actions

• Button
• Dropdown
• Modal
• Swap
• Theme Controller

Data Display

• Accordion
• Avatar
• Badge
• Card
• Carousel
• Chat Bubble
• Collapse
• Countdown
• Diff
• Kbd
• List
• Stat
• Status
• Table
• Timeline

Navigation

• Breadcrumbs
• Dock
• Link
• Menu
• Navbar
• Pagination
• Steps
• Tab

Feedback

• Alert
• Loading
• Progress
• Radial Progress
• Skeleton
• Toast
• Tooltip

Data Input

• Calendar
• Checkbox
• Fieldset
• File Input
• Filter
• Label
• Radio
• Range
• Rating
• Select
• Input Field
• Textarea
• Toggle
• Validator

Layout

• Divider
• Drawer
• Footer
• Hero
• Indicator
• Join (Group Items)
• Mask
• Stack

Development

Prerequisites

node >= 18
npm >= 9

Setup

1. Clone the repository

   git clone [repository-url]
   cd svelte-essentials
   

2. Install dependencies

   npm install
   

3. Run Storybook

   npm run storybook
   

4. Run tests

   npm test
   

Documentation

Full documentation is available in our Storybook. Run it locally or visit [documentation-url].

Contributing

We welcome contributions! Please read our contributing guidelines before submitting pull requests.

License

MIT

Support

For support, please open an issue in the GitHub repository or contact the maintainers.

Acknowledgments

This design system is built on top of DaisyUI, a wonderful Tailwind CSS component library.