Svelte Components for Daisy UI (WIP)

Demos and examples -> DaisySvelte - Storybook

Getting started

Currently only support using with CDN version. Sveltekit: Add those tags below to your app.html

<link href="https://cdn.jsdelivr.net/npm/daisyui@2.18.1/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

npm i daisy-svelte

<script lang="ts">
  import { Navbar, Button } from 'daisy-svelte';

</script>
<Nabvar>
  <Button label="DaisySvelte" />
  ...

References:

[Official] Daisy UI https://daisyui.com/

Status:

[ ] todo [x] done [/] beta

Actions

• Button
• [/] Dropdown
• [/] Modal
• Swap

Datas display

• Alert
• [/] Avatar
• Badge
• Card
• Carousel
• Collapse
• Countdown
• Kbd
• Progress
• Radial progres
• Stat
• Table
• Tooltip

Data input

• Checkbox
• [] Text input
• Radio
• Range
• Rating
• Select
• Textarea
• Toggle

Layout

• Artboard
• Button group
• Divider
• Drawer
• Hero
• Indicator
• Input group
• Mask
• Stack

Navigation

• [/] Breadcrumbs
• Bottom navigation
• Link
• Menu
• Navbar
• Indicator
• Pagination
• Steps
• Tab

Mockup

• Code
• Phone
• Window