daisyUI Roadmap
daisyUI Roadmap, milestones and upcoming features
-
daisyUI 2
- New component: Chat
- New component: toast
- New component: radial-progress
- New component: swap
- New component: input-group
- New component: bottom-navigation
- New color names: info-content, success-content, warning-content, error-content
- Add support for RGB, HSL, etc. color formats for daisyUI themes in tailwind.config.js
- New responsive modifier classes for modal
- New responsive modifiers for stats
- New responsive modifiers for divider
- New rating-half modifier for rating component to show half stars
- New modifiers for mask component: mask-half-1, mask-half-2
- Empty li tag in a menu now shows a separator line
- New themes: night, cafe, winter, autumn, business, acid, lemonade
- New 'prefix' config
- New 'darkTheme' config
daisyUI 3
- New component: Loading
- New component: Accordion
- New component: Join
- New component: browser mockup
- Drawer support for responsive prefixes
- Drawer accessibility for keyboard navigation
- Modal component using dialog element
- Dropdown component using details/summary element
- Tooltip accessibility for keyboard navigation
- New component: btn-neutral variant for button
- menu support for details/summary element
- menu size variants: menu-xs, menu-sm, menu-md, menu-lg
- table size variants: table-xs, table-sm, table-md, table-lg
- table redesign
- collapse support for details/summary element
- New tool: npm init daisyui
Docs
- add Ukrainian translation
- daisyUI blog
- daisyUI newsletter
- Update example repos
daisyUI 4
- daisyUI uses OKLCH colors now. Unlocking access to 30% more colors than RGB/HSL
- New component: Timeline
- New component: Skeleton
- New component: Diff
- New component: Theme Controller – change the page theme without JS
- 3 new themes: dim, nord, sunset
- New 'tab-content' class: switch tab content without JS
- Replace all directional styles with CSS logical properties
- RTL support without any extra config or dependencies, using CSS logical properties
- 92% less NPM module dependencies
- 70% smaller node_modules footprint and install size
- 15% smaller CSS file size (CDN)
- Removed RTLCSS, PostCSS, Tailwind CSS dependencies
- Removed all *-focus color names. Darker colors are now generated using CSS color-mix() under the hood
- btn-info, btn-success, btn-warning, btn-error now have hover color change just like other buttons
- 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.
- Improve improve compatibility with @tailwindcss/forms plugin
- Use Culori package instead of Colord which supports P3 colors
- Add divider color modifiers
- Add divider color position modifiers
Docs
- daisyUI Resources
- daisyUI store
- Document utility classes
- Document CSS variables
- Docs: add Farsi translation
- Docs: add Arabic translation
- Docs: add Malay translation
- Docs: add Vietnamese translation
- Docs: add Italian translation
- Docs: add German translation
- Docs: add Bengali translation
- Docs: add Polish translation
- Docs: Update to Svelte 5
daisyUI 5
- Tailwind CSS 4 compatibility
- Migrate project to Bun workspaces
- Use ESM
- Use native CSS nesting
- Remove all JavaScript dependencies
- Reduce package size by 61%
- Reduce CDN file size by 75%
- Use Tailwind CSS 4 CSS variables format for color names
- Make each component and each theme available as pure CSS files
- New components: List, Status, Fieldset, Label, Filter, Calendar, Validator, Dock
- New component: Tag
- New themes: Caramelllatte, Abyss, Silk
- Add popover API support for dropdowns
- Config option to include or exclude parts of the library
- Add dash and soft styles
- Effects: optional depth and noise effects for themes
- Refactor size scale
- Customizable size scale
- Customizable border size
- Make all modifier class names responsive
- Accessibility improvements
- Design imporovements
- Adjust theme colors to the new Tailwind CSS 4 color palette
Docs
- Add docs for copmonent specific CSS variables
- Add docs base styles
- New Theme generator
- Homepage redesign
- Add missing translations
- Add component design specs
- Add component accessibility guidelines
- Add FAQ to the site
- Add integrations tutorial for third-party JS packages
- Improve the loading of translation files
Future
- Pre-built CSS grid layouts
- micro animations
- More theme effects
- CSS anchor positioning
- View transitions API
- CSS color-contrast()
- CSS relative color syntax
- CSS animation timeline
- Collapsible floating action button
- HTML invoker API
- CSS @scope
Official daisyUI
Figma Library
Available on daisyUI store
More details