All daisyUI components

54 Components

Accordion

Accordion

Accordion is used for showing and hiding content but only one item can stay open at a time.

Alert

Alert

Alert informs users about important events.

Avatar

Avatar

Avatars are used to show a thumbnail representation of an individual or business in the interface.

Badge

Badge

Badges are used to inform the user of the status of specific data.

Breadcrumbs

Breadcrumbs

Breadcrumbs helps users to navigate through the website.

Button

Button

Buttons allow the user to take actions or make choices.

Card

Card

Cards are used to group and display content in a way that is easily readable.

Carousel

Carousel

Carousel show images or content in a scrollable area.

Chat bubble

Chat bubble

Chat bubbles are used to show one line of conversation and all its data, including the author image, author name, time, etc.

Checkbox

Checkbox

Checkboxes are used to select or deselect a value.

Collapse

Collapse

Collapse is used for showing and hiding content.

Countdown

Countdown

Countdown gives you a transition effect of changing numbers.

Diff

Diff

Diff component shows a side-by-side comparison of two items.

Divider

Divider

Divider will be used to separate content vertically or horizontally.

Dock

Dock

Dock (also know as Bottom navigation or Bottom bar) is a UI element that provides navigation options to the user. Dock sticks to the bottom of the screen.

Drawer

Drawer

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Dropdown

Dropdown

Dropdown can open a menu or any other element when the button is clicked.

File Input

File Input

File Input is a an input field for uploading files.

Footer

Footer

Footer can contain logo, copyright notice, and links to other pages.

Hero

Hero

Hero is a component for displaying a large box or image with a title and description.

Indicator

Indicator

Indicators are used to place an element on the corner of another element.

Text Input

Text Input

Text Input is a simple input field.

Join

Join

Join is a container for grouping multiple items, it can be used to group buttons, inputs, etc. Join applies border radius to the first and last item. Join can be used to create a horizontal or vertical list of items.

Kbd

Kbd

Kbd is used to display keyboard shortcuts.

Link

Link

Link adds the missing underline style to links.

Loading

Loading

Loading shows an animation to indicate that something is loading.

Mask

Mask

Mask crops the content of the element to common shapes.

Menu

Menu

Menu is used to display a list of links vertically or horizontally.

Browser mockup

Browser mockup

Browser mockup shows a box that looks like a browser window.

Code mockup

Code mockup

Code mockup is used to show a block of code in a box that looks like a code editor.

Phone mockup

Phone mockup

Phone mockup shows a mockup of an iPhone.

Window mockup

Window mockup

Window mockup shows a box that looks like an operating system window.

Modal

Modal

Modal is used to show a dialog or a box when you click a button.

Navbar

Navbar

Navbar is used to show a navigation bar on the top of the page.

Pagination

Pagination

Pagination is a group of buttons that allow the user to navigate between a set of related content.

Progress

Progress

Progress bar can be used to show the progress of a task or to show the passing of time.

Radial progress

Radial progress

Radial progress can be used to show the progress of a task or to show the passing of time.

Radio

Radio

Radio buttons allow the user to select one option from a set.

Range slider

Range slider

Range slider is used to select a value by sliding a handle.

Rating

Rating

Rating is a set of radio buttons that allow the user to rate something.

Select

Select

Select is used to pick a value from a list of options.

Skeleton

Skeleton

Skeleton is a component that can be used to show a loading state of a component.

Stack

Stack

Stack visually puts elements on top of each other.

Stat

Stat

Stat is used to show numbers and data in a block.

Steps

Steps

Steps can be used to show a list of steps in a process.

Swap

Swap

Swap allows you to toggle the visibility of two elements using a checkbox or a class name.

Tabs

Tabs

Tabs can be used to show a list of links in a tabbed format.

Table

Table

Table can be used to show a list of data in a table format.

Textarea

Textarea

Textarea allows users to enter text in multiple lines.

Theme Controller

Theme Controller

If a checked checkbox input or a checked radio input with theme-controller class exists in the page, The page will have the same theme as that input's value.

Timeline

Timeline

Timeline component shows a list of events in chronological order.

Toast

Toast

Toast is a wrapper to stack elements, positioned on the corner of page.

Toggle

Toggle

Toggle is a checkbox that is styled to look like a switch button.

Tooltip

Tooltip

Tooltip can be used to show a message when hovering over an element.