emranweb / daisyui-snippet

The DaisyUI Snippet extension for Visual Studio Code offers a rich collection of DaisyUI Components snippets.

Support My Work 🚀 ☕

DaisyUI Snippet Extension for Visual Studio Code

Overview

The DaisyUI Snippet extension for Visual Studio Code provides a collection of handy snippets for working with DaisyUI, a set of components and utilities for Tailwind CSS.

With this extension, you can quickly insert DaisyUI components and styles into your HTML, JavaScript, TypeScript, JSX, and TSX files, making your development process with Tailwind CSS and DaisyUI more efficient.

Features

DaisyUI Snippets: Easily insert DaisyUI components with various styles and configurations into your code.

Snippets

Buttons: | Demo

• du-btn - DaisyUI Basic Button
• du-btn-neutral - DaisyUI Neutral Button
• du-btn-primary - DaisyUI Primary Button
• du-btn-secondary - DaisyUI Secondary Button
• du-btn-accent - DaisyUI Accent Button
• du-btn-success - DaisyUI Success Button
• du-btn-link - DaisyUI Link Button
• du-btn-info - DaisyUI Info Button
• du-btn-small - DaisyUI Small Button
• du-btn-xs - DaisyUI Extra Small Button
• du-btn-lg - DaisyUI Large Button
• du-btn-glass - DaisyUI Glass Button
• du-btn-disabled - DaisyUI Disabled Button
• du-btn-square - DaisyUI Square Button
• du-btn-square-outline - DaisyUI Square Outline Button
• du-btn-circle - DaisyUI Circle Button
• du-btn-circle-outline - DaisyUI Circle Outline Button
• du-btn-loading - DaisyUI Loading Button

Dropdown Menu: | Demo

• du-dropdown-menu - DaisyUI Dropdown Menu
• du-dropdown-end - DaisyUI Dropdown Align to End
• du-dropdown-top - DaisyUI Dropdown Top
• du-dropdown-top-end - DaisyUI Dropdown Top Align to End
• du-dropdown-bottom - DaisyUI Dropdown Bottom
• du-dropdown-bottom-end - DaisyUI Dropdown Bottom Align to End
• du-dropdown-left - DaisyUI Dropdown Left
• du-dropdown-left-end - DaisyUI Dropdown Left Align to End
• du-dropdown-right - DaisyUI Dropdown Right
• du-dropdown-right-end - DaisyUI Dropdown Right Align to End
• du-dropdown-hover - DaisyUI Dropdown Hover
• du-dropdown-force-open - DaisyUI Dropdown Force Open
• du-dropdown-as-card - DaisyUI Dropdown as Card
• du-dropdown-in-navbar - DaisyUI Dropdown in Navbar
• du-dropdown-helper- - DaisyUI Helper Dropdown

Modal: | Demo

• du-modal-dialog - DaisyUI Dialog Modal
• du-modal-dialog-outside-close - DaisyUI Dialog Modal Closes When Clicked Outside
• du-modal-dialog-corner-close - DaisyUI Dialog Modal with Close Button at Corner
• du-modal-dialog-custom-width - DaisyUI Dialog Modal with Custom Width
• du-modal-dialog-responsive - DaisyUI Dialog Modal Responsive
• du-modal-checkbox - DaisyUI Dialog Modal Using Label + Hidden Checkbox
• du-modal-checkbox-outside-close - DaisyUI Dialog Modal Closes When Clicked Outside Using Label + Hidden Checkbox
• du-modal-anchor-link - DaisyUI Dialog Modal Using Anchor Link

Swap: | Demo

• du-swap-text - DaisyUI Swap Text
• du-swap-volume-icons - Swap Volume Icons
• du-swap-icons-rotate - DaisyUI Swap Icons with Rotate Effect
• du-swap-hamburger-button - DaisyUI Hamburger Button
• du-swap-icons-flip - DaisyUI Swap Icons with Flip Effect
• du-swap-class-name - DaisyUI Activate using class name instead of checkbox

Theme Controller: | Demo

• du-theme-toggle - DaisyUI Theme Controller using a toggle
• du-theme-checkbox - DaisyUI Theme Controller using a checkbox
• du-theme-swap - DaisyUI Theme Controller using a swap
• du-theme-toggle-text - DaisyUI Theme Controller using a toggle with text
• du-theme-toggle-icons - DaisyUI Theme Controller using a toggle with icons
• du-theme-toggle-icons-inside - DaisyUI Theme Controller using a toggle with icons inside
• du-theme-toggle-custom-colors - DaisyUI Theme Controller using a toggle with custom colors
• du-theme-radio-input - DaisyUI Theme Controller using a radio input
• du-theme-radio-button - DaisyUI Theme Controller using a radio button

Accordion: | Demo

• du-accordion-radio - DaisyUI Accordion using radio inputs
• du-accordion-arrow - DaisyUI Accordion with arrow icon
• du-accordion-plus-minus - DaisyUI Accordion with plus/minus icon
• du-accordion-join - DaisyUI Using Accordion and Join together

Avatar: | Demo

• du-avatar - DaisyUI Avatar
• du-avatar-custom-sizes - DaisyUI Avatar in custom sizes
• du-avatar-rounded - DaisyUI Avatar rounded
• du-avatar-mask - DaisyUI Avatar with mask
• du-avatar-group - DaisyUI Avatar group
• du-avatar-group-counter - DaisyUI Avatar group with counter
• du-avatar-ring - DaisyUI Avatar with ring
• du-avatar-presence - DaisyUI Avatar with presence indicator
• du-avatar-placeholder - DaisyUI Avatar placeholder

Badge: | Demo

• du-badge-default - DaisyUI Badge Default
• du-badge-neutral - DaisyUI Badge Neutral
• du-badge-primary - DaisyUI Badge Primary
• du-badge-secondary - DaisyUI Badge Secondary
• du-badge-accent - DaisyUI Badge Accent
• du-badge-ghost - DaisyUI Badge Ghost
• du-badge-outline-default - DaisyUI Badge Outline Default
• du-badge-outline-primary - DaisyUI Badge Outline Primary
• du-badge-outline-secondary - DaisyUI Badge Outline Secondary
• du-badge-outline-accent - DaisyUI Badge Outline Accent
• du-badge-lg - DaisyUI Badge Size Large
• du-badge-md - DaisyUI Badge Size Medium
• du-badge-sm - DaisyUI Badge Size Small
• du-badge-xs - DaisyUI Badge Size Extra Small
• du-empty-badge-lg - DaisyUI Empty Badge Size Large
• du-empty-badge-md - DaisyUI Empty Badge Size Medium
• du-empty-badge-sm - DaisyUI Empty Badge Size Small
• du-empty-badge-xs - DaisyUI Empty Badge Size Extra Small
• du-badge-info - DaisyUI Badge Info
• du-badge-success - DaisyUI Badge Success
• du-badge-warning - DaisyUI Badge Warning
• du-badge-error - DaisyUI Badge Error
• du-badge-text-xl - DaisyUI Badge Text XL
• du-badge-text-lg - DaisyUI Badge Text LG
• du-badge-text-base - DaisyUI Badge Text Base
• du-badge-text-sm - DaisyUI Badge Text SM
• du-badge-button - DaisyUI Badge Button
• du-badge-button-secondary - DaisyUI Badge Button Secondary

Card: | Demo

• du-card - DaisyUI Card
• du-card-compact - DaisyUI Compact Card
• du-card-with-badge - DaisyUI Card with Badge
• du-card-with-bottom-image - DaisyUI Card with Bottom Image
• du-card-centered-content - DaisyUI Card with Centered Content
• du-card-image-overlay - DaisyUI Card with Image Overlay
• du-card-no-image - DaisyUI Card with No Image
• du-card-custom-color - DaisyUI Card with Custom Color
• du-card-centered-neutral - DaisyUI Centered Card with Neutral Color
• du-card-action-on-top - DaisyUI Card with Action on Top
• du-card-glass - DaisyUI Card Glass
• du-card-side - DaisyUI Card Side
• du-card-responsive - DaisyUI Responsive Card

Carousel: | Demo

• du-carousel-snap-default - DaisyUI Carousel Snap Default
• du-carousel-snap-center - DaisyUI Carousel Snap Center
• du-carousel-snap-end - DaisyUI Carousel Snap to end
• du-carousel-full-width - DaisyUI Carousel Full Width Items
• du-carousel-vertical - DaisyUI Carousel Vertical Items
• du-carousel-half-width - DaisyUI Carousel Half Width Items
• du-carousel-full-bleed - DaisyUI Carousel Full Bleed Items
• du-carousel-indicators - DaisyUI Carousel with Indicators
• du-carousel-next-prev - DaisyUI Carousel with Next/Prev Buttons

Chat bubble: | Demo

• du-chat-bubble - DaisyUI Chat Bubble
• du-chat-image - DaisyUI Chat Bubble with Image
• du-chat-img-head-foot - DaisyUI Chat with image, header and footer
• du-chat-head-foot - DaisyUI Chat with header and footer
• du-chat-colors - DaisyUI Chat Bubble with colors

Collapse: | Demo

• du-collapse - DaisyUI Collapse
• du-collapse-arrow - DaisyUI Collapse with Arrow

Countdown: | Demo

• du-countdown - DaisyUI Countdown
• du-countdown-clock - DaisyUI Countdown Clock

Diff | Demo

• du-diff-image - DaisyUI Diff Image
• du-diff-text - DaisyUI Diff Text

Keyboard Input: | Demo

• du-kbd - DaisyUI Keyboard Input
• du-key-combinations - DaisyUI Keyboard Input with Key Combinations

Stat: | Demo

• du-stat - DaisyUI Stat
• du-stat-icons-image - DaisyUI Stat with Icons and Image

Table: | Demo

• du-table - DaisyUI Table

Timeline: | Demo

• du-timeline - DaisyUI Timeline

Breadcrumbs: | Demo

• du-breadcrumbs - DaisyUI Breadcrumbs

Bottom Navigation: | Demo

• du-bottom-nav - DaisyUI Bottom Navigation

Link: | Demo

• du-link - DaisyUI Link

Menu: | Demo

• du-menu - DaisyUI Menu
• du-menu-horizontal - DaisyUI Horizontal Menu

Navbar: | Demo

• du-navbar - DaisyUI Navbar
• du-navbar-icon-end - DaisyUI Navbar with Icon at End
• du-navbar-icons-start-end - DaisyUI Navbar with Icons at Start and End
• du-navbar-menu - DaisyUI Navbar with Menu
• du-navbar-menu-button - DaisyUI Navbar with Menu Button

Pagination: | Demo

• du-pagination - DaisyUI Pagination
• du-pagination-nextprev - DaisyUI Pagination with Next/Prev Buttons

Steps: | Demo

• du-steps - DaisyUI Steps
• du-steps-vertical - DaisyUI Vertical Steps

Tabs: | Demo

• du-tabs - DaisyUI Tabs
• du-tabs-boxed - DaisyUI Boxed Tabs

Alert: | Demo

• du-alert - DaisyUI Alert
• du-alert-info - DaisyUI Alert Info
• du-alert-success - DaisyUI Alert Success
• du-alert-warning - DaisyUI Alert Warning
• du-alert-error - DaisyUI Alert Error

Loading: | Demo

• du-loading-spinner - DaisyUI Loading
• du-loading-ring - DaisyUI Loading Ring

Progress: | Demo

• du-progress-bar - DaisyUI Progress
• du-progress-radial - DaisyUI Radial Progress

Skeleton: | Demo

• du-skeleton - DaisyUI Skeleton
• du-skeleton-circle - DaisyUI Skeleton Circle
• du-skeleton-rectangle - DaisyUI Skeleton Rectangle

Tooltip: | Demo

• du-tooltip - DaisyUI Tooltip

Toast: | Demo

• du-toast - DaisyUI Toast

Checkbox Input: | Demo

• du-input-checkbox - DaisyUI Checkbox
• du-input-checkbox-label - DaisyUI Checkbox with Label
• du-input-checkbox-primary - DaisyUI Checkbox Primary
• du-input-checkbox-secondary - DaisyUI Checkbox Secondary
• du-input-checkbox-accent - DaisyUI Checkbox Accent
• du-input-checkbox-success - DaisyUI Checkbox Success
• du-input-checkbox-warning - DaisyUI Checkbox Warning
• du-input-checkbox-info - DaisyUI Checkbox Info
• du-input-checkbox-error - DaisyUI Checkbox Error
• du-input-checkbox-disabled - DaisyUI Checkbox Disabled
• du-input-checkbox-xs - DaisyUI Checkbox Extra Small
• du-input-checkbox-sm - DaisyUI Checkbox Small
• du-input-checkbox-md - DaisyUI Checkbox Medium
• du-input-checkbox-lg - DaisyUI Checkbox Large
• du-input-checkbox-indeterminate - DaisyUI Checkbox Indeterminate

File Input: | Demo

• du-input-file - DaisyUI Input File
• du-input-file-bordered - DaisyUI Input File Bordered
• du-input-file-ghost - DaisyUI Input File Ghost
• du-input-file-label - DaisyUI Input File with Label
• du-input-file-primary - DaisyUI Input File Primary
• du-input-file-secondary - DaisyUI Input File Secondary
• du-input-file-accent - DaisyUI Input File Accent
• du-input-file-success - DaisyUI Input File Success
• du-input-file-warning - DaisyUI Input File Warning
• du-input-file-info - DaisyUI Input File Info
• du-input-file-error - DaisyUI Input File Error
• du-input-file-disabled - DaisyUI Input File Disabled
• du-input-file-xs - DaisyUI Input File Extra Small
• du-input-file-sm - DaisyUI Input File Small
• du-input-file-md - DaisyUI Input File Medium
• du-input-file-lg - DaisyUI Input File Large

Input Radio: | Demo

• du-input-radio - DaisyUI RInput-adio
• du-input-radio-primary - DaisyUI Radio Input Primary
• du-input-radio-secondary - DaisyUI Radio Input Secondary
• du-input-radio-accent - DaisyUI Radio Input Accent
• du-input-radio-success - DaisyUI Radio Input Success
• du-input-radio-warning - DaisyUI Radio Input Warning
• du-input-radio-info - DaisyUI Radio Input Info
• du-input-radio-error - DaisyUI Radio Input Error
• du-input-radio-disabled - DaisyUI Radio Input Disabled
• du-input-radio-custom-color - DaisyUI Radio Input Custom Color

Text Input: | Demo

• du-input-text - DaisyUI Text Input
• du-input-text-border - DaisyUI Text Input with Border
• du-input-text-ghost - DaisyUI Text Input Ghost
• du-input-text-label - DaisyUI Text Input with Label
• du-input-text-primary - DaisyUI Text Input Primary
• du-input-text-secondary - DaisyUI Text Input Secondary
• du-input-text-accent - DaisyUI Text Input Accent
• du-input-text-success - DaisyUI Text Input Success
• du-input-text-warning - DaisyUI Text Input Warning
• du-input-text-info - DaisyUI Text Input Info
• du-input-text-error - DaisyUI Text Input Error
• du-input-text-disabled - DaisyUI Text Input Disabled
• du-input-text-xs - DaisyUI Text Input Extra Small
• du-input-text-sm - DaisyUI Text Input Small
• du-input-text-md - DaisyUI Text Input Medium
• du-input-text-lg - DaisyUI Text Input Large

Input Rating | Demo

• du-input-rating - DaisyUI Input Rating

Input Select | Demo

• du-input-select - DaisyUI Select Input
• du-input-select-bordered- DaisyUI Input Select Input with Border

Input Textarea | Demo

• du-input-textarea - DaisyUI Textarea
• du-input-textarea-bordered- DaisyUI Input- Bordered Textarea

Toggle Input | Demo

• du-input-toggle - DaisyUI Input Toggle
• du-input-toggle-label- DaisyUI Input Toggle with Label

Artboard: | Demo

• du-artboard - DaisyUI Artboard
• du-artboard-horizontal - DaisyUI Horizontal Artboard

Divider: | Demo

• du-divider - DaisyUI Divider
• du-divider-neutral - DaisyUI Neutral Divider

Drawer: | Demo

• du-drawer - DaisyUI Drawer

Footer: | Demo

• du-footer - DaisyUI Footer
• du-footer-logo - DaisyUI Footer with Logo

Hero: | Demo

• du-hero-center - DaisyUI Hero

Indicator: | Demo

• du-indicator - DaisyUI Indicator

Mask: | Demo

• du-mask-squircle - DaisyUI Mask Squircle

Stack: | Demo

• du-stack - DaisyUI Stack

Browser Mockup: | Demo

• du-mockup-browser - DaisyUI Browser Mockup

Code Mockup: | Demo

• du-mockup-code - DaisyUI Code Mockup

Phone Mockup: | Demo

• du-mockup-phone - DaisyUI Phone Mockup

Installation

1. Open Visual Studio Code.
2. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or press Ctrl+Shift+X.
3. Search for "DaisyUI Snippet" and click the Install button for the extension authored by emranweb.

Usage

To use a DaisyUI snippet, follow these steps:

1. Open a file in Visual Studio Code.
2. Start typing the prefix for the desired DaisyUI snippet.
3. IntelliSense will suggest the snippet. Press Tab to insert it.

For example, if you want to insert a DaisyUI Button, start typing db and select the snippet from the suggestions.

<!-- Example: Using DaisyUI Button -->
<template>
  <div>
    <du-btn>Click me</du-btn>
  </div>
</template>

License

This extension is released under the MIT License.

Issues and Contributions

If you encounter any issues or have suggestions for improvements, please report them on GitHub. Contributions in the form of pull requests are welcome!

About DaisyUI

DaisyUI is a UI framework built on top of Tailwind CSS, designed to improve your development workflow by providing a set of customizable components and utilities.

Learn more about DaisyUI on Website.

Enjoy!

Enjoy coding with DaisyUI and Tailwind CSS!

Developed by

emranweb

daisyui-snippet's Issues

Create Snippets Extension

Diff

[Feature Request] Add autocomplete support for .astro

Astro is another framework known for its Islands architecture. The file extension is .astro, and the template code is written similar to HTML.

Update the changelog

Table Timeline

modal-dialog-anchor

All the snippet start with -du- prefix but the modal-dialog-anchor start with -du--

Add snippet variants with 'class' instead of 'className'

Hi! First of all, thank you for the effort you've put into this extension! It's great.
Second, is there an easy way for you to also add a way to choose class instead of className? SolidJS, for example, uses class.

Publish the extension

Countdown

Support .html extension

Collapse

Stat

KBD

Create Buttons Snippet

Home

Chat Bubble

• - Chat-start and chat-end ✅
• - Chat with image ✅
• - Chat with image, header and footer 👷
• - Chat with header and footer 👷
• - Chat Bubble with colors 👷

DaisyUI Snippet not working properly (Snippets not showing up)

Hello! I have already enabled the extension globally. However, the snippet is not working.

I have also tried restarting VSCode, but it is still not working properly.

What might have caused this issue? Thank you in advance!