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 redesign
    15. collapse support for details/summary element
    16. New tool: npm init daisyui


  • Docs

    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

    1. daisyUI Resources
    2. daisyUI store
    3. Document utility 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


  • daisyUI 5

    1. Tailwind CSS 4 compatibility
    2. Migrate project to Bun workspaces
    3. Use ESM
    4. Use native CSS nesting
    5. Remove all JavaScript dependencies
    6. Reduce package size by 61%
    7. Reduce CDN file size by 75%
    8. Use Tailwind CSS 4 CSS variables format for color names
    9. Make each component and each theme available as pure CSS files
    10. New components: List, Status, Fieldset, Label, Filter, Calendar, Validator, Dock
    11. New component: Tag
    12. New themes: Caramelllatte, Abyss, Silk
    13. Add popover API support for dropdowns
    14. Config option to include or exclude parts of the library
    15. Add dash and soft styles
    16. Effects: optional depth and noise effects for themes
    17. Refactor size scale
    18. Customizable size scale
    19. Customizable border size
    20. Make all modifier class names responsive
    21. Accessibility improvements
    22. Design imporovements
    23. Adjust theme colors to the new Tailwind CSS 4 color palette


  • Docs

    1. Add docs for copmonent specific CSS variables
    2. Add docs base styles
    3. New Theme generator
    4. Homepage redesign
    5. Add missing translations
    6. Add component design specs
    7. Add component accessibility guidelines
    8. Add FAQ to the site
    9. Add integrations tutorial for third-party JS packages
    10. Improve the loading of translation files


  • Future

    1. Pre-built CSS grid layouts
    2. micro animations
    3. More theme effects
    4. CSS anchor positioning
    5. View transitions API
    6. CSS color-contrast()
    7. CSS relative color syntax
    8. CSS animation timeline
    9. Collapsible floating action button
    10. HTML invoker API
    11. CSS @scope
Do you have a question? Ask on GitHub or Discord server
Do you like daisyUI? Post about it!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details