All daisyUI components

49 Components

Alert

Alert

Alert informs users about important events.

Artboard

Artboard

Artboard provides fixed size container to display a demo content on mobile size.

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.

Bottom navigation

Bottom navigation

Bottom navigation bar allows navigation between primary screens.

Breadcrumbs

Breadcrumbs

Breadcrumbs helps users to navigate through the website.

Button group

Button group

Button group shows buttons next to each other.

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.

Divider

Divider

Divider will be used to separate content vertically or horizontally.

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.

Input group

Input group

Input group puts an input next to a text or a button.

Text Input

Text Input

Text Input is a simple input field.

Kbd

Kbd

Kbd is used to display keyboard shortcuts.

Link

Link

Link adds the missing underline style to links.

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.

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.

Stack

Stack

Stack visually puts elements on top of each other.

Stat

Stat

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

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.

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.