Svelte Daisyui Components

Svelte components for the daisyUI component library.

Svelte daisyUI Components

Svelte components for the daisyUI component library. Written in Svelte and Typescript.


  • Full Typescript support
  • Almost all components fully implemented


Install tailwindcss and daisyui with npm

Install svelte-daisyui-components with npm

  npm i svelte-daisyui-components


For some very basic examples you can take a look at the provided routes, located in the routes directory of this repository.

<script lang="ts">
    import { Button } from 'svelte-daisyui-components'



Missing features on components.

Actions: All features are implemented.

Data Display:

  • Avatar: not possible to apply mask and add counter.
  • Card: not possible to add action on top.
  • Carousel: navigation buttons not working properly.
  • Collapse: colors on focus not working properly.

Data Input:

  • Radio: not possible to add labels.
  • Checkbox: not possible to add labels.
  • Toggle: not possible to add labels.
  • Range: steps and measure not always accurate.


  • Drawer: navbar on desktop and drawer on mobile option not implemented.
  • Hero: figure not implemented.
  • Indicator: multiple indicators not implemented.


  • BottomNavigation: rendering buttons through buttons prop not working properly.
  • Steps: user needs to provide data himself if steps are added through slot.

Mockup: All features are implemented.


  • Add Storybook.
  • Extract string values from enums instead of hardcoding them.
  • Fix/add missing features on components.
  • Write tests for components.
  • Figure out on which element we want to apply $$props.class, sometimes you want to apply styles to multiple elements.
  • Apply $$restProps to relevant components.


Contributions are always welcome! If you encounter a bug or missing feature, feel free to open a pull request or issue!



Top categories

Loading Svelte Themes