daisyUI 5.6

daisyUI 5.6 is here with 3 new components, new ways to use existing components, and many small improvements across the library.

Try the new version now:

npm i [email protected]

New components

Aura

Give aura to your components!

Aura is a new wrapper component for animated border glow effects. You can put it around a card, button, image, or any other element and get a conic-gradient border animation with a smooth blur aura effect.

It comes with different styles:

• aura-dual
• aura-rainbow
• aura-holo
• aura-gold
• aura-silver
• aura-glow

It supports 5 sizes from xs to xl. If one element in your page needs extra attention, wrap it in an aura!

See Aura docs for more examples and usage.

Megamenu

Megamenu is a new navigation component for larger menus. It uses the Popover API for desktop and can fall back to a vertical layout on small screens.

It supports wide, full width, and vertical modifiers, plus size variants from xs to xl. This is useful for docs sites, dashboards, stores, and apps where a normal dropdown gets crowded too quickly.

See Megamenu docs for more examples and usage.

OTP

OTP is a new one-time password input component. You can use it for login codes, verification codes, 2FA screens, and similar flows.

It uses a native input with visual slots. You get the familiar OTP look while keeping the form simple. It supports joined style, semantic colors, and all sizes from xs to xl.

See OTP docs for more examples and usage.

Better sliders, tooltips, modals, and cards

• Range slider now has a vertical mode. Add range-vertical to make it vertical.

• Tooltip now supports alignment modifiers:

  • tooltip-start
  • tooltip-center
  • tooltip-end

  These work with all tooltip directions. You can place the tooltip at the top, bottom, left, or right and still choose how it aligns on that axis.

• Modal now supports the Popover API as another opening method. daisyUI already supported modal patterns using HTML dialog and other methods. With 5.6, you can also use [popover], :popover-open, and ::backdrop when that fits your project better.

• Card also got selectable states. Cards can now use aria-checked, nested checkbox or radio focus styles, pointer cursor, and a stronger checked focus outline. This makes selectable pricing cards, plan cards, and settings cards easier to build.

Improvements across existing components

Many small improvements are coming in 5.6. Here are some highlights:

• Calendar now has a new style integration for Vanilla Calendar Pro.

• Buttons got cleaner internal variables for variants like ghost, outline, dash, soft, and link. Disabled buttons now also support [aria-disabled="true"], which is useful when the element can't use the native disabled attribute.

• Collapse got smoother native details animation support and better overflow handling. Loading animations now respect prefers-reduced-motion, showing a static fallback for users who prefer reduced motion.

• Inputs, selects, textareas, floating labels, ratings, and range sliders got cleaner size variables and selector improvements. That means size variants are easier to maintain and more consistent.

• There are also smaller fixes for menu, dropdown, footer, mockup code, FAB, filter, calendar, and more. These are not the loud features. They make the whole system feel more solid.

Docs updates

• The docs now include pages and examples for the new components Aura, Megamenu, and OTP. Modal docs include the new popover method, Tooltip docs include alignment examples, and Range docs include the vertical slider example.

• Card docs now include selectable card examples with checkbox and radio inputs.

• Blueprint MCP, daisyUI Skill and llms.txt are all updated to include the new components and new improvements.

  • Use the latest version of Blueprint with daisyui-blueprint@latest
  • Update your daisyUI Skill using npx skills update

Try it and send feedback

daisyUI 5.6 is ready to use now, and you can install it with:

npm i [email protected]

If you find a bug or if something feels confusing, please open an issue or discussion on GitHub or Discord.