All daisyUI components
49 Components
Alert
Alert informs users about important events.
Artboard
Artboard provides fixed size container to display a demo content on mobile size.
Avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface.
Badge
Badges are used to inform the user of the status of specific data.
Bottom navigation
Bottom navigation bar allows navigation between primary screens.
Breadcrumbs
Breadcrumbs helps users to navigate through the website.
Button group
Button group shows buttons next to each other.
Button
Buttons allow the user to take actions or make choices.
Card
Cards are used to group and display content in a way that is easily readable.
Carousel
Carousel show images or content in a scrollable area.
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
Checkboxes are used to select or deselect a value.
Collapse
Collapse is used for showing and hiding content.
Countdown
Countdown gives you a transition effect of changing numbers.
Divider
Divider will be used to separate content vertically or horizontally.
Drawer
Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.
Dropdown
Dropdown can open a menu or any other element when the button is clicked.
File Input
File Input is a an input field for uploading files.
Footer
Footer can contain logo, copyright notice, and links to other pages.
Hero
Hero is a component for displaying a large box or image with a title and description.
Indicator
Indicators are used to place an element on the corner of another element.
Input group
Input group puts an input next to a text or a button.
Text Input
Text Input is a simple input field.
Kbd
Kbd is used to display keyboard shortcuts.
Link
Link adds the missing underline style to links.
Mask
Mask crops the content of the element to common shapes.
Menu
Menu is used to display a list of links vertically or horizontally.
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 shows a mockup of an iPhone.
Window mockup
Window mockup shows a box that looks like an operating system window.
Modal
Modal is used to show a dialog or a box when you click a button.
Navbar
Navbar is used to show a navigation bar on the top of the page.
Pagination
Pagination is a group of buttons that allow the user to navigate between a set of related content.
Progress
Progress bar can be used to show the progress of a task or to show the passing of time.
Radial progress
Radial progress can be used to show the progress of a task or to show the passing of time.
Radio
Radio buttons allow the user to select one option from a set.
Range slider
Range slider is used to select a value by sliding a handle.
Rating
Rating is a set of radio buttons that allow the user to rate something.
Select
Select is used to pick a value from a list of options.
Stack
Stack visually puts elements on top of each other.
Stat
Stat is used to show numbers and data in a box.
Steps
Steps can be used to show a list of steps in a process.
Swap
Swap allows you to toggle the visibility of two elements using a checkbox or a class name.
Tabs
Tabs can be used to show a list of links in a tabbed format.
Table
Table can be used to show a list of data in a table format.
Textarea
Textarea allows users to enter text in multiple lines.
Toast
Toast is a wrapper to stack elements, positioned on the corner of page.
Toggle
Toggle is a checkbox that is styled to look like a switch button.
Tooltip
Tooltip can be used to show a message when hovering over an element.