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
  24. OTP component
  25. Megamenu component
  26. Aura component
  27. Vertical range slider
  28. CSS layers
  29. Icon-only drawer sidebar,
  30. Floating action button / Speed Dial
  31. Styled native HTML <select> options
  32. Hover Gallery
  33. Popover modal
  34. CSS anchor positioning
  35. MCP server

  ---

• ---

  Docs

  1. Add docs for copmonent specific CSS variables
  2. Add docs base styles
  3. New Theme generator
  4. New logo
  5. Add share feautre to Theme Generator
  6. llms.txt
  7. Add OpenProps setup guide
  8. Homepage redesign
  9. Add missing translations
  10. Add component design specs
  11. Add component accessibility guidelines
  12. Add FAQ to the site
  13. Add integrations tutorial for third-party JS packages
  14. Improve the loading of translation files
  15. Agent skill
  16. LLM and editor setup guides

  ---

• ---

  Future

  1. Corner shape
  2. Paged menus
  3. Skins
  4. Avatar in square and triangle layouts
  5. Circular Rotating text
  6. Resizable panels
  7. Reveal component
  8. View transitions API
  9. swap with multiple items
  10. CSS color-contrast()
  11. Bottom sheet
  12. Social proof component
  13. Marquee component
  14. Ribbon component
  15. Text effects
  16. Bento grid
  17. Tooltip with popover API
  18. CSS relative color syntax
  19. CSS animation timeline
  20. HTML invoker API
  21. CSS @scope
  22. Tailwind CSS 5