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 Buttondu-btn-neutral - DaisyUI Neutral Buttondu-btn-primary - DaisyUI Primary Buttondu-btn-secondary - DaisyUI Secondary Buttondu-btn-accent - DaisyUI Accent Buttondu-btn-success - DaisyUI Success Buttondu-btn-link - DaisyUI Link Buttondu-btn-info - DaisyUI Info Buttondu-btn-small - DaisyUI Small Buttondu-btn-xs - DaisyUI Extra Small Buttondu-btn-lg - DaisyUI Large Buttondu-btn-glass - DaisyUI Glass Buttondu-btn-disabled - DaisyUI Disabled Buttondu-btn-square - DaisyUI Square Buttondu-btn-square-outline - DaisyUI Square Outline Buttondu-btn-circle - DaisyUI Circle Buttondu-btn-circle-outline - DaisyUI Circle Outline Buttondu-btn-loading - DaisyUI Loading Button
Dropdown Menu: | Demo
du-dropdown-menu - DaisyUI Dropdown Menudu-dropdown-end - DaisyUI Dropdown Align to Enddu-dropdown-top - DaisyUI Dropdown Topdu-dropdown-top-end - DaisyUI Dropdown Top Align to Enddu-dropdown-bottom - DaisyUI Dropdown Bottomdu-dropdown-bottom-end - DaisyUI Dropdown Bottom Align to Enddu-dropdown-left - DaisyUI Dropdown Leftdu-dropdown-left-end - DaisyUI Dropdown Left Align to Enddu-dropdown-right - DaisyUI Dropdown Rightdu-dropdown-right-end - DaisyUI Dropdown Right Align to Enddu-dropdown-hover - DaisyUI Dropdown Hoverdu-dropdown-force-open - DaisyUI Dropdown Force Opendu-dropdown-as-card - DaisyUI Dropdown as Carddu-dropdown-in-navbar - DaisyUI Dropdown in Navbardu-dropdown-helper- - DaisyUI Helper Dropdown
Modal: | Demo
du-modal-dialog - DaisyUI Dialog Modaldu-modal-dialog-outside-close - DaisyUI Dialog Modal Closes When Clicked Outsidedu-modal-dialog-corner-close - DaisyUI Dialog Modal with Close Button at Cornerdu-modal-dialog-custom-width - DaisyUI Dialog Modal with Custom Widthdu-modal-dialog-responsive - DaisyUI Dialog Modal Responsivedu-modal-checkbox - DaisyUI Dialog Modal Using Label + Hidden Checkboxdu-modal-checkbox-outside-close - DaisyUI Dialog Modal Closes When Clicked Outside Using Label + Hidden Checkboxdu-modal-anchor-link - DaisyUI Dialog Modal Using Anchor Link
Swap: | Demo
du-swap-text - DaisyUI Swap Textdu-swap-volume-icons - Swap Volume Iconsdu-swap-icons-rotate - DaisyUI Swap Icons with Rotate Effectdu-swap-hamburger-button - DaisyUI Hamburger Buttondu-swap-icons-flip - DaisyUI Swap Icons with Flip Effectdu-swap-class-name - DaisyUI Activate using class name instead of checkbox
Theme Controller: | Demo
du-theme-toggle - DaisyUI Theme Controller using a toggledu-theme-checkbox - DaisyUI Theme Controller using a checkboxdu-theme-swap - DaisyUI Theme Controller using a swapdu-theme-toggle-text - DaisyUI Theme Controller using a toggle with textdu-theme-toggle-icons - DaisyUI Theme Controller using a toggle with iconsdu-theme-toggle-icons-inside - DaisyUI Theme Controller using a toggle with icons insidedu-theme-toggle-custom-colors - DaisyUI Theme Controller using a toggle with custom colorsdu-theme-radio-input - DaisyUI Theme Controller using a radio inputdu-theme-radio-button - DaisyUI Theme Controller using a radio button
Accordion: | Demo
du-accordion-radio - DaisyUI Accordion using radio inputsdu-accordion-arrow - DaisyUI Accordion with arrow icondu-accordion-plus-minus - DaisyUI Accordion with plus/minus icondu-accordion-join - DaisyUI Using Accordion and Join together
Avatar: | Demo
du-avatar - DaisyUI Avatardu-avatar-custom-sizes - DaisyUI Avatar in custom sizesdu-avatar-rounded - DaisyUI Avatar roundeddu-avatar-mask - DaisyUI Avatar with maskdu-avatar-group - DaisyUI Avatar groupdu-avatar-group-counter - DaisyUI Avatar group with counterdu-avatar-ring - DaisyUI Avatar with ringdu-avatar-presence - DaisyUI Avatar with presence indicatordu-avatar-placeholder - DaisyUI Avatar placeholder
Badge: | Demo
du-badge-default - DaisyUI Badge Defaultdu-badge-neutral - DaisyUI Badge Neutraldu-badge-primary - DaisyUI Badge Primarydu-badge-secondary - DaisyUI Badge Secondarydu-badge-accent - DaisyUI Badge Accentdu-badge-ghost - DaisyUI Badge Ghostdu-badge-outline-default - DaisyUI Badge Outline Defaultdu-badge-outline-primary - DaisyUI Badge Outline Primarydu-badge-outline-secondary - DaisyUI Badge Outline Secondarydu-badge-outline-accent - DaisyUI Badge Outline Accentdu-badge-lg - DaisyUI Badge Size Largedu-badge-md - DaisyUI Badge Size Mediumdu-badge-sm - DaisyUI Badge Size Smalldu-badge-xs - DaisyUI Badge Size Extra Smalldu-empty-badge-lg - DaisyUI Empty Badge Size Largedu-empty-badge-md - DaisyUI Empty Badge Size Mediumdu-empty-badge-sm - DaisyUI Empty Badge Size Smalldu-empty-badge-xs - DaisyUI Empty Badge Size Extra Smalldu-badge-info - DaisyUI Badge Infodu-badge-success - DaisyUI Badge Successdu-badge-warning - DaisyUI Badge Warningdu-badge-error - DaisyUI Badge Errordu-badge-text-xl - DaisyUI Badge Text XLdu-badge-text-lg - DaisyUI Badge Text LGdu-badge-text-base - DaisyUI Badge Text Basedu-badge-text-sm - DaisyUI Badge Text SMdu-badge-button - DaisyUI Badge Buttondu-badge-button-secondary - DaisyUI Badge Button Secondary
Card: | Demo
du-card - DaisyUI Carddu-card-compact - DaisyUI Compact Carddu-card-with-badge - DaisyUI Card with Badgedu-card-with-bottom-image - DaisyUI Card with Bottom Imagedu-card-centered-content - DaisyUI Card with Centered Contentdu-card-image-overlay - DaisyUI Card with Image Overlaydu-card-no-image - DaisyUI Card with No Imagedu-card-custom-color - DaisyUI Card with Custom Colordu-card-centered-neutral - DaisyUI Centered Card with Neutral Colordu-card-action-on-top - DaisyUI Card with Action on Topdu-card-glass - DaisyUI Card Glassdu-card-side - DaisyUI Card Sidedu-card-responsive - DaisyUI Responsive Card
Carousel: | Demo
du-carousel-snap-default - DaisyUI Carousel Snap Defaultdu-carousel-snap-center - DaisyUI Carousel Snap Centerdu-carousel-snap-end - DaisyUI Carousel Snap to enddu-carousel-full-width - DaisyUI Carousel Full Width Itemsdu-carousel-vertical - DaisyUI Carousel Vertical Itemsdu-carousel-half-width - DaisyUI Carousel Half Width Itemsdu-carousel-full-bleed - DaisyUI Carousel Full Bleed Itemsdu-carousel-indicators - DaisyUI Carousel with Indicatorsdu-carousel-next-prev - DaisyUI Carousel with Next/Prev Buttons
Chat bubble: | Demo
du-chat-bubble - DaisyUI Chat Bubbledu-chat-image - DaisyUI Chat Bubble with Imagedu-chat-img-head-foot - DaisyUI Chat with image, header and footerdu-chat-head-foot - DaisyUI Chat with header and footerdu-chat-colors - DaisyUI Chat Bubble with colors
Collapse: | Demo
du-collapse - DaisyUI Collapsedu-collapse-arrow - DaisyUI Collapse with Arrow
Countdown: | Demo
du-countdown - DaisyUI Countdowndu-countdown-clock - DaisyUI Countdown Clock
Diff | Demo
du-diff-image - DaisyUI Diff Imagedu-diff-text - DaisyUI Diff Text
Keyboard Input: | Demo
du-kbd - DaisyUI Keyboard Inputdu-key-combinations - DaisyUI Keyboard Input with Key Combinations
Stat: | Demo
du-stat - DaisyUI Statdu-stat-icons-image - DaisyUI Stat with Icons and Image
Table: | Demo
Timeline: | Demo
du-timeline - DaisyUI Timeline
Breadcrumbs: | Demo
du-breadcrumbs - DaisyUI Breadcrumbs
Bottom Navigation: | Demo
du-bottom-nav - DaisyUI Bottom Navigation
Link: | Demo
Menu: | Demo
du-menu - DaisyUI Menudu-menu-horizontal - DaisyUI Horizontal Menu
Navbar: | Demo
du-navbar - DaisyUI Navbardu-navbar-icon-end - DaisyUI Navbar with Icon at Enddu-navbar-icons-start-end - DaisyUI Navbar with Icons at Start and Enddu-navbar-menu - DaisyUI Navbar with Menudu-navbar-menu-button - DaisyUI Navbar with Menu Button
Pagination: | Demo
du-pagination - DaisyUI Paginationdu-pagination-nextprev - DaisyUI Pagination with Next/Prev Buttons
Steps: | Demo
du-steps - DaisyUI Stepsdu-steps-vertical - DaisyUI Vertical Steps
Tabs: | Demo
du-tabs - DaisyUI Tabsdu-tabs-boxed - DaisyUI Boxed Tabs
Alert: | Demo
du-alert - DaisyUI Alertdu-alert-info - DaisyUI Alert Infodu-alert-success - DaisyUI Alert Successdu-alert-warning - DaisyUI Alert Warningdu-alert-error - DaisyUI Alert Error
Loading: | Demo
du-loading-spinner - DaisyUI Loadingdu-loading-ring - DaisyUI Loading Ring
Progress: | Demo
du-progress-bar - DaisyUI Progressdu-progress-radial - DaisyUI Radial Progress
Skeleton: | Demo
du-skeleton - DaisyUI Skeletondu-skeleton-circle - DaisyUI Skeleton Circledu-skeleton-rectangle - DaisyUI Skeleton Rectangle
Tooltip: | Demo
du-tooltip - DaisyUI Tooltip
Toast: | Demo
Checkbox Input: | Demo
du-input-checkbox - DaisyUI Checkboxdu-input-checkbox-label - DaisyUI Checkbox with Labeldu-input-checkbox-primary - DaisyUI Checkbox Primarydu-input-checkbox-secondary - DaisyUI Checkbox Secondarydu-input-checkbox-accent - DaisyUI Checkbox Accentdu-input-checkbox-success - DaisyUI Checkbox Successdu-input-checkbox-warning - DaisyUI Checkbox Warningdu-input-checkbox-info - DaisyUI Checkbox Infodu-input-checkbox-error - DaisyUI Checkbox Errordu-input-checkbox-disabled - DaisyUI Checkbox Disableddu-input-checkbox-xs - DaisyUI Checkbox Extra Smalldu-input-checkbox-sm - DaisyUI Checkbox Smalldu-input-checkbox-md - DaisyUI Checkbox Mediumdu-input-checkbox-lg - DaisyUI Checkbox Largedu-input-checkbox-indeterminate - DaisyUI Checkbox Indeterminate
File Input: | Demo
du-input-file - DaisyUI Input Filedu-input-file-bordered - DaisyUI Input File Bordereddu-input-file-ghost - DaisyUI Input File Ghostdu-input-file-label - DaisyUI Input File with Labeldu-input-file-primary - DaisyUI Input File Primarydu-input-file-secondary - DaisyUI Input File Secondarydu-input-file-accent - DaisyUI Input File Accentdu-input-file-success - DaisyUI Input File Successdu-input-file-warning - DaisyUI Input File Warningdu-input-file-info - DaisyUI Input File Infodu-input-file-error - DaisyUI Input File Errordu-input-file-disabled - DaisyUI Input File Disableddu-input-file-xs - DaisyUI Input File Extra Smalldu-input-file-sm - DaisyUI Input File Smalldu-input-file-md - DaisyUI Input File Mediumdu-input-file-lg - DaisyUI Input File Large
Input Radio: | Demo
du-input-radio - DaisyUI RInput-adiodu-input-radio-primary - DaisyUI Radio Input Primarydu-input-radio-secondary - DaisyUI Radio Input Secondarydu-input-radio-accent - DaisyUI Radio Input Accentdu-input-radio-success - DaisyUI Radio Input Successdu-input-radio-warning - DaisyUI Radio Input Warningdu-input-radio-info - DaisyUI Radio Input Infodu-input-radio-error - DaisyUI Radio Input Errordu-input-radio-disabled - DaisyUI Radio Input Disableddu-input-radio-custom-color - DaisyUI Radio Input Custom Color
Text Input: | Demo
du-input-text - DaisyUI Text Inputdu-input-text-border - DaisyUI Text Input with Borderdu-input-text-ghost - DaisyUI Text Input Ghostdu-input-text-label - DaisyUI Text Input with Labeldu-input-text-primary - DaisyUI Text Input Primarydu-input-text-secondary - DaisyUI Text Input Secondarydu-input-text-accent - DaisyUI Text Input Accentdu-input-text-success - DaisyUI Text Input Successdu-input-text-warning - DaisyUI Text Input Warningdu-input-text-info - DaisyUI Text Input Infodu-input-text-error - DaisyUI Text Input Errordu-input-text-disabled - DaisyUI Text Input Disableddu-input-text-xs - DaisyUI Text Input Extra Smalldu-input-text-sm - DaisyUI Text Input Smalldu-input-text-md - DaisyUI Text Input Mediumdu-input-text-lg - DaisyUI Text Input Large
Input Rating | Demo
du-input-rating - DaisyUI Input Rating
Input Select | Demo
du-input-select - DaisyUI Select Inputdu-input-select-bordered- DaisyUI Input Select Input with Border
Input Textarea | Demo
du-input-textarea - DaisyUI Textareadu-input-textarea-bordered- DaisyUI Input- Bordered Textarea
Toggle Input | Demo
du-input-toggle - DaisyUI Input Toggledu-input-toggle-label- DaisyUI Input Toggle with Label
Artboard: | Demo
du-artboard - DaisyUI Artboarddu-artboard-horizontal - DaisyUI Horizontal Artboard
Divider: | Demo
du-divider - DaisyUI Dividerdu-divider-neutral - DaisyUI Neutral Divider
Drawer: | Demo
du-drawer - DaisyUI Drawer
Footer: | Demo
du-footer - DaisyUI Footerdu-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
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
- Open Visual Studio Code.
- 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.
- Search for "DaisyUI Snippet" and click the Install button for the extension authored by emranweb.
Usage
To use a DaisyUI snippet, follow these steps:
- Open a file in Visual Studio Code.
- Start typing the prefix for the desired DaisyUI snippet.
- 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
