Svelisy 1.0

daisyUI components built with Svelte & Typescript

༼ つ ◕_◕ ༽つ Please share

• Official daisyUI website →
• Svelisy docs is in progress (I'm also confused with my own library xD)

🙋‍♂️ Issues? Go to here

⚡️ Quick Start

Import svelisy component to your Svelte Component

<script lang="ts">
 import { Button } from 'svelisy';
</script>

<Button color="primary">Click Here</Button>

🌼 Components

• Actions

  • [x] Button
  • [x] Dropdown
  • [x] Modal
  • [x] Swap

• Data display

  • [x] Alert
  • [x] Avatar
  • [x] Badge
  • [x] Card
  • [x] Carousel
  • [x] Chat bubble
  • [x] Collapse
  • [x] Countdown
  • [x] Kbd
  • [x] Progress
  • [x] Radial progress
  • [x] Stat
  • [x] Table
  • [x] Toast
  • [x] Tooltip

• Data input

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

• Layout

  • [x] Artboard
  • [x] Button group
  • [x] Divider
  • [x] Drawer
  • [x] Footer
  • [x] Hero
  • [x] Indicator
  • [x] Input group
  • [x] Mask
  • [x] Stack

• Navigation

  • [x] Bottom Navigation
  • [x] Breadcrumbs
  • [x] Link
  • [x] Menu
  • [x] Navbar
  • [x] Pagination
  • [x] Steps
  • [x] Tab

• Mockup

  • [x] Code
  • [x] Phone
  • [x] Window

🌈 Themes

To apply / select theme use SvelisyProvider & ThemeChanger

<script lang="ts">
 import { SvelisyProvider, SvelisyThemeChanger } from 'svelisy/provider';
</script>

<SvelisyProvider>
 <SvelisyThemeChanger />
 <slot />
</SvelisyProvider>

Use tools like the official daisyUI Theme Generator or daisyUI Theme Builder to easily create your own themes.

⚙️ Configuration

Configure tailwindcss to not purging component class

// tailwind.config.cjs
module.exports = {
content: [
  './src/**/*.{html,js,svelte,ts}',
  'node_modules/daisyui/dist/**/*.js',
  'node_modules/svelisy/**/*.svelte'
 ],
 ...
};

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

༼ つ ◕_◕ ༽つ Please share