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 FAQ to the site
    12. Add 'integrations' pages with tutorials about using third-party JS packages
    13. Add internal CSS variables in class name tables
    14. Improve the loading of translation files

  • Upcoming

    1. rewrite 'label' component to work best with 'join'
    2. New component: Banner
    3. New component: Calendar
    4. New component: Tag
    5. Support the upcoming Tailwind CSS v4
    6. Pre-built grid layouts
    7. New themes
    8. Animate tab background using CSS grid
    9. Use popover API when browsers support it
    10. Use CSS color-contrast() when browsers support it
    11. Use CSS relative colors when browsers support them
    12. Use Container queries for responsive components
    13. Add dotted variants for button, card and badge
daisyUI store

New template: SaaS Landing page

Available on daisyUI store

More details
Please upgrade your browser