Migrate from DaisyUI Kit 3.x to 5.x

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.

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 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.