DaisyUI Kit 🌼

Migrate

This guide will help you migrate your project from DaisyUI Kit 3.x to 5.x. All breaking changes and important updates are grouped by topic for clarity.

Looking for the v3 documentation? Visit v3.daisyuikit.com.

Inputs & Form Controls

TextInput is now Input

  • The new Input component supports all input types and provides more flexibility.

FormControl Changes

  • The form-control CSS utility was removed in DaisyUI 5.
  • The FormControl component remains, but is now a semantic wrapper around Flex with the col prop.
  • Review any usage of FormControl to ensure it renders as expected.

Tabs & Navigation

Tabs Refactor

  • The TabManager component has been combined into the Tabs component.
  • Each Tab is now a separate component and must immediately precede its corresponding TabContent.
  • Example migration:

Before:

<TabsManager>
  <Tabs :tabs="['First', 'Second', 'Third']" />
  <TabContent name="First">...</TabContent>
  <TabContent name="Second">...</TabContent>
  <TabContent name="Third">...</TabContent>
</TabsManager>

After:

<Tabs>
  <Tab name="first" />
  <TabContent name="First">...</TabContent>
  <Tab name="second" />
  <TabContent name="Second">...</TabContent>
  <Tab name="third" />
  <TabContent name="Third">...</TabContent>
</Tabs>

Additional Tab Changes

  • Tabs is now the wrapper instead of TabsManager.
  • Accessibility: Tab to the tab group, then use arrow keys to navigate between tabs.
  • The lifted prop is now called lift.
  • The inline-boxed variant has been removed. Use the box prop or variant instead.
  • You can use the Tabs component without nested TabContent components.

Removed or Replaced Components

Mask

  • The Mask component no longer supports parallelogram shapes.

LabelText and LabelTextAlt

  • The LabelText and LabelTextAlt components have been removed.
  • Use the Text component instead.

Artboard

  • The Artboard component has been removed.
  • Use height and width utility classes instead.

BottomNav

  • The BottomNav component has been replaced with Dock.

Behavioral & Prop Changes

  • The strategy prop has been removed.
  • Dropdown now uses the native HTML Popover API and CSS anchor positioning instead of Floating UI.
  • All dropdowns now use position: fixed automatically for optimal positioning.
  • Dropdowns will never go off-screen thanks to CSS anchor positioning with automatic fallbacks.
  • Browser support: All modern browsers (Chrome 125+, Safari 17+, Firefox 125+).
  • For browsers without native CSS anchor positioning support (like Firefox), a polyfill is automatically applied.
  • Vertical menus are no longer full width by default.
  • Use w-full to make them full width if needed.
  • The Footer is now vertical by default.
  • Use the horizontal prop to make it horizontal.
DaisyUI Kit 🌼