daisy-ui-svelte-components Svelte Themes

Daisy Ui Svelte Components

DaisyUI Basic component collectoin for Svelte (AI Generated)

Download

DaisyUI-Svelte

A comprehensive collection of DaisyUI 5 components for Svelte 5, providing native Svelte components with full TypeScript support and modern Runes-based reactivity.

⚠️ Disclaimer: AI-Generated Project

This entire component library was generated by AI and is provided as-is.

This project aims to be a functional implementation of DaisyUI components for Svelte 5, but it has not been extensively tested by human developers. While it follows DaisyUI's official patterns and component structures, expect potential bugs, inconsistencies, or deviations from best practices.

Use with caution, especially in production environments. We encourage you to review the source code and contribute fixes or improvements!

🚀 Quick Start

Prerequisites

This library is designed for Tailwind 4 and requires DaisyUI to be configured in your project.

Installation

  1. Download and Extract

    • Download the ZIP file from the GitHub repository
    • Extract to your desired location (e.g., ./lib/daisyui-svelte/)

  2. Install Dependencies

    # Install Tailwind CSS 4 and DaisyUI
npm install tailwindcss@next @tailwindcss/vite daisyui@latest

  3. Configure Vite (Recommended)

    Update your vite.config.js:

    import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
  ],
})

    Alternative: PostCSS Configuration

    If you prefer PostCSS, create postcss.config.mjs:

    export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}

  4. Configure Tailwind CSS and DaisyUI

    Create/update your main CSS file (e.g., src/app.css):

    @import "tailwindcss";
@plugin "daisyui";

  5. Import and Use

    <script>
  import { Button, Card, Alert } from './lib/daisyui-svelte';
</script>

<Card class="w-96 bg-base-100 shadow-xl">
  <div class="card-body">
    <h2 class="card-title">Hello DaisyUI!</h2>
    <p>Ready to build beautiful UIs with Svelte 5 and DaisyUI.</p>
    <div class="card-actions justify-end">
      <Button variant="primary">Get Started</Button>
    </div>
  </div>
</Card>

🎨 Available Components

This library includes 80+ components organized by category:

📝 Actions

  • Button - Interactive buttons with variants, sizes, and states
  • Dropdown - Contextual menus and dropdowns
  • Modal - Dialog overlays and popups
  • Swap - Toggle between two states with animations
  • Link - Styled links with hover effects

📊 Data Display

  • Avatar - User profile images with online/offline indicators
  • Badge - Labels and tags for categorization
  • Card - Content containers with headers, body, and actions
  • Carousel - Image and content sliders
  • Chat Bubble - Conversation-style message bubbles
  • Collapse - Expandable content sections
  • Countdown - Animated countdown timers
  • Diff - Side-by-side comparison views
  • Kbd - Keyboard key representations
  • List - Structured data presentation
  • Stat - Statistical data displays
  • Table - Data tables with sorting and styling
  • Timeline - Chronological event displays

📋 Data Input

  • Checkbox - Checkboxes with multiple states
  • File Input - Styled file upload controls
  • Input - Text inputs with validation states
  • Radio - Radio button groups
  • Range - Slider controls for numeric input
  • Rating - Star and icon-based rating systems
  • Select - Dropdown selection menus
  • Textarea - Multi-line text input
  • Toggle - Switch-style boolean inputs

💬 Feedback

  • Alert - Notification messages with icons
  • Loading - Various loading indicators and spinners
  • Progress - Progress bars and completion indicators
  • Skeleton - Loading placeholders for content
  • Toast - Temporary notification popups
  • Tooltip - Contextual help and information

🧩 Layout

  • Artboard - Design mockup containers
  • Container - Content width management
  • Divider - Visual content separators
  • Drawer - Sliding sidebar navigation
  • Footer - Page footer sections
  • Hero - Large promotional sections
  • Join - Grouped component layouts
  • Stack - Layered content positioning

🧭 Navigation

  • Bottom Navigation - Mobile-style bottom nav bars
  • Breadcrumbs - Hierarchical navigation paths
  • Menu - Vertical and horizontal menu systems
  • Navbar - Header navigation bars
  • Pagination - Page navigation controls
  • Steps - Multi-step process indicators
  • Tabs - Content section switching

📱 Mockups

  • Mockup Browser - Browser window simulations
  • Mockup Code - Code editor representations
  • Mockup Phone - Mobile device frames
  • Mockup Window - Desktop window frames

🎭 Additional Components

  • Indicator - Corner notification badges
  • Mask - Shaped image containers
  • Text - Enhanced typography component
  • Theme Controller - Theme switching controls

🛠️ Component Features

Basic Usage

All components support standard HTML attributes and accept a class prop for custom styling:

<Button 
  variant="primary" 
  size="lg"
  disabled={false}
  onclick={() => console.log('clicked')}
  class="my-custom-class"
>
  Click Me
</Button>

Reactive State

Components use Svelte 5's runes for reactive state management:

<script>
  import { Checkbox, Toggle } from './lib/daisyui-svelte';
  
  let isChecked = $state(false);
  let isToggled = $state(true);
</script>

<Checkbox bind:checked={isChecked}>Subscribe to newsletter</Checkbox>
<Toggle bind:checked={isToggled} />

Variant System

Most components support DaisyUI's color variants:

  • neutral (default)
  • primary
  • secondary
  • accent
  • info
  • success
  • warning
  • error
  • ghost

Size System

Components typically support these sizes:

  • xs - Extra small
  • sm - Small
  • md - Medium (default)
  • lg - Large
  • xl - Extra large

⚡ Current Status

✅ What's Working

  • Basic Functionality - All components render and function as expected
  • Props & Variants - Color variants, sizes, and style modifiers work
  • TypeScript Support - Full type definitions for all components
  • Svelte 5 Runes - Modern reactivity with $state, $derived, and $bindable
  • Event Handling - Standard event handlers (onclick, onchange, etc.)

⚠️ Limitations

  • Quick & Dirty Implementation - Generated rapidly, may need refinement
  • Limited Customization - Basic prop sets, not fully customizable yet
  • No Advanced Features - Missing some complex behaviors from full UI libraries
  • Minimal Testing - Components have not been thoroughly tested

🎯 Ideal Use Cases

This library is perfect for:

  • Rapid Prototyping - Quick UI mockups and demos
  • Learning Projects - Understanding DaisyUI + Svelte patterns
  • Starting Points - Base components to build upon
  • Design Systems - Foundation for custom component libraries

🤝 Contributing

Since this is an AI-generated project, contributions are especially welcome! Areas that need attention:

  • Bug Fixes - Report and fix component issues
  • Testing - Add comprehensive test suites
  • Documentation - Improve component documentation
  • Examples - Create usage examples and demos
  • Accessibility - Enhance a11y compliance
  • Performance - Optimize component implementations

📝 License

MIT License - Feel free to use, modify, and distribute as needed.

Ready to build beautiful UIs with Svelte 5 and DaisyUI? Download, extract, and start creating! 🎨

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes