Official daisyUI Figma Library is now available for designers!

daisyUI Roadmap

daisyUI Roadmap, milestones and upcoming features

  • daisyUI 2

    1. New component: Chat
    2. New component: toast
    3. New component: radial-progress
    4. New component: swap
    5. New component: input-group
    6. New component: bottom-navigation
    7. New color names: info-content, success-content, warning-content, error-content
    8. Add support for RGB, HSL, etc. color formats for daisyUI themes in tailwind.config.js
    9. New responsive modifier classes for modal
    10. New responsive modifiers for stats
    11. New responsive modifiers for divider
    12. New rating-half modifier for rating component to show half stars
    13. New modifiers for mask component: mask-half-1, mask-half-2
    14. Empty li tag in a menu now shows a separator line
    15. New themes: night, cafe, winter, autumn, business, acid, lemonade
    16. New 'prefix' config
    17. New 'darkTheme' config

  • daisyUI 3

    1. New component: Loading
    2. New component: Accordion
    3. New component: Join
    4. New component: browser mockup
    5. Drawer support for responsive prefixes
    6. Drawer accessibility for keyboard navigation
    7. Modal component using dialog element
    8. Dropdown component using details/summary element
    9. Tooltip accessibility for keyboard navigation
    10. New component: btn-neutral variant for button
    11. menu support for details/summary element
    12. menu size variants: menu-xs, menu-sm, menu-md, menu-lg
    13. table size variants: table-xs, table-sm, table-md, table-lg
    14. table redesing
    15. collapse support for details/summary element
    16. New tool: npm init daisyui

  • Docs updates

    1. add Ukrainian translation
    2. daisyUI blog
    3. daisyUI newsletter
    4. Update example repos

  • daisyUI 4

    1. daisyUI uses OKLCH colors now. Unlocking access to 30% more colors than RGB/HSL
    2. New component: Timeline
    3. New component: Skeleton
    4. New component: Diff
    5. New component: Theme Controller – change the page theme without JS
    6. 3 new themes: dim, nord, sunset
    7. New 'tab-content' class: switch tab content without JS
    8. Replace all directional styles with CSS logical properties
    9. RTL support without any extra config or dependencies, using CSS logical properties
    10. 92% less NPM module dependencies
    11. 70% smaller node_modules footprint and install size
    12. 15% smaller CSS file size (CDN)
    13. Removed RTLCSS, PostCSS, Tailwind CSS dependencies
    14. Removed all *-focus color names. Darker colors are now generated using CSS color-mix() under the hood
    15. btn-info, btn-success, btn-warning, btn-error now have hover color change just like other buttons
    16. Reduce tab class name repetition. Removed tab-lifted, tab-bordered, tab-lg, tab-md, tab-sm, tab-xs modifier classes for 'tab' item. Added tabs-lifted, tabs-bordered, tabs-lg, tabs-md, tabs-sm, tabs-xs classes for the parent 'tabs' class instead.
    17. Improve improve compatibility with @tailwindcss/forms plugin
    18. Use Culori package instead of Colord which supports P3 colors
    19. Add divider color modifiers
    20. Add divider color position modifiers

  • Docs updates

    1. daisyUI Resources
    2. daisyUI store
    3. Document utiltiy classes
    4. Document CSS variables
    5. Docs: add Farsi translation
    6. Docs: add Arabic translation
    7. Docs: add Malay translation
    8. Docs: add Vietnamese translation
    9. Docs: add Italian translation
    10. Docs: add German translation
    11. Docs: add Bengali translation
    12. Docs: add Polish translation
    13. Docs: Update to Svelte 5
    14. Docs: add component design specs
    15. Docs: add component accessibility guidelines
    16. Docs: add FAQ to the site
    17. Add 'integrations' pages with tutorials about using third-party JS packages
    18. Add internal CSS variables in class name tables
    19. Improve the loading of translation files
    20. refactor theme generator

  • daisyUI 5 (comes after Tailwind CSS 4)

    1. Replace Prettier with Biome
    2. Use native CSS nesting for all components
    3. Remove all JavaScript dependencies, make every source file pure CSS
    4. Make all components available as pure CSS files instead of CSS-in-JS because Tailwind CSS 4 will support importing CSS files as plugins
    5. Make each theme available as pure CSS files
    6. Remove color value fallbacks for old browsers. OKLCH colors are supported in all browsers now
    7. Reduce build step to minimum
    8. New component: Banner
    9. New component: Tag
    10. New themes
    11. Use popover API for dropdowns
    12. Use Container queries for responsive components
    13. Add dotted variants for button, card and badge
    14. Use CSS @starting-style
    15. Refactor `diff` component

  • Future

    1. Pre-built grid layouts
    2. Use CSS color-contrast() when browsers support it
    3. Use CSS relative colors when browsers support them
    4. rewrite 'label' component to work best with 'join'
    5. Animate tab background using CSS grid
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details
Please upgrade your browser