# UI Components
## Table of Contents
- [UI Components](#ui-components)
- [Table of Contents](#table-of-contents)
- [Atomic Design](#atomic-design)
- [Atoms](#atoms)
- [Molecules](#molecules)
- [Organisms](#organisms)
- [Templates](#templates)
- [Pages](#pages)
- [Components](#components)
- [References](#references)
## Atomic Design
### Atoms
1. Alert
2. Avatar
3. Badge
4. Breadcrumbs
5. Button
6. Card
7. Checkbox
8. Divider
9. Drawer sidebar
10. Menu
11. Modal
12. Pagination
13. Progress
14. Select
15. Skeleton
16. Table
17. Tabs
18. Text Input
19. Toggle
20. Tooltip
### Molecules
### Organisms
### Templates
### Pages
## Components
| No | Component | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| --- | ------------------ | ------------------ | ------------------- | ---------- | ------------------ |
| 1 | Alert | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 2 | Avatar | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 3 | Badge | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 4 | Breadcrumbs | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 5 | Button | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 6 | Card | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 7 | Checkbox | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 8 | Divider | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 9 | Drawer sidebar | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 10 | Menu | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 11 | Modal | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 12 | Pagination | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 13 | Progress | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 14 | Select | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 15 | Skeleton | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 16 | Table | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 17 | Tabs | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 18 | Text Input | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 19 | Toggle | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 20 | Tooltip | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 21 | Accordion | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | |
| 22 | Autocomplete | | | [MUI][mui] | [Ant Design][antd] |
| 23 | Calendar | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 24 | Carousel | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 25 | Collapse | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 26 | Date Picker | | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 27 | Dropdown | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 28 | Empty | | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 29 | List | [DaisyUI][daisyui] | | [MUI][mui] | [Ant Design][antd] |
| 30 | Loading | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 31 | Masonry | | | [MUI][mui] | [Ant Design][antd] |
| 32 | Popover | | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 33 | Radio | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | [Ant Design][antd] |
| 34 | Radio Group | | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 35 | Rating | [DaisyUI][daisyui] | | [MUI][mui] | [Ant Design][antd] |
| 36 | Slider | | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 37 | Steps | [DaisyUI][daisyui] | | | [Ant Design][antd] |
| 38 | Timeline | [DaisyUI][daisyui] | | [MUI][mui] | [Ant Design][antd] |
| 39 | Toast | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | [MUI][mui] | |
| 40 | Typography | | [shadcn/ui][shadcn] | [MUI][mui] | [Ant Design][antd] |
| 41 | Join (group items) | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 42 | Kbd | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 43 | Label | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 44 | Navbar | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 45 | Range slider | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 46 | Textarea | [DaisyUI][daisyui] | [shadcn/ui][shadcn] | | |
| 47 | Link | [DaisyUI][daisyui] | | [MUI][mui] | |
| 48 | FAB / Speed Dial | [DaisyUI][daisyui] | | [MUI][mui] | |
| 49 | Browser mockup | [DaisyUI][daisyui] | | | |
| 50 | Chat bubble | [DaisyUI][daisyui] | | | |
| 51 | Code mockup | [DaisyUI][daisyui] | | | |
| 52 | Countdown | [DaisyUI][daisyui] | | | |
| 53 | Diff | [DaisyUI][daisyui] | | | |
| 54 | Dock | [DaisyUI][daisyui] | | | |
| 55 | Fieldset | [DaisyUI][daisyui] | | | |
| 56 | File Input | [DaisyUI][daisyui] | | | |
| 57 | Filter | [DaisyUI][daisyui] | | | |
| 58 | Footer | [DaisyUI][daisyui] | | | |
| 59 | Hero | [DaisyUI][daisyui] | | | |
| 60 | Hover 3D Card | [DaisyUI][daisyui] | | | |
| 61 | Hover Gallery | [DaisyUI][daisyui] | | | |
| 62 | Indicator | [DaisyUI][daisyui] | | | |
| 63 | Mask | [DaisyUI][daisyui] | | | |
| 64 | Phone mockup | [DaisyUI][daisyui] | | | |
| 65 | Radial progress | [DaisyUI][daisyui] | | | |
| 66 | Stack | [DaisyUI][daisyui] | | | |
| 67 | Stat | [DaisyUI][daisyui] | | | |
| 68 | Status | [DaisyUI][daisyui] | | | |
| 69 | Swap | [DaisyUI][daisyui] | | | |
| 70 | Text Rotate | [DaisyUI][daisyui] | | | |
| 71 | Theme Controller | [DaisyUI][daisyui] | | | |
| 72 | Validator | [DaisyUI][daisyui] | | | |
| 73 | Window mockup | [DaisyUI][daisyui] | | | |
| 74 | Alert Dialog | | [shadcn/ui][shadcn] | | |
| 75 | Aspect Ratio | | [shadcn/ui][shadcn] | | |
| 76 | Chart | | [shadcn/ui][shadcn] | | |
| 77 | Combobox | | [shadcn/ui][shadcn] | | |
| 78 | Command | | [shadcn/ui][shadcn] | | |
| 79 | Context Menu | | [shadcn/ui][shadcn] | | |
| 80 | Direction | | [shadcn/ui][shadcn] | | |
| 81 | Field | | [shadcn/ui][shadcn] | | |
| 82 | Hover Card | | [shadcn/ui][shadcn] | | |
| 83 | Input Group | | [shadcn/ui][shadcn] | | |
| 84 | Input OTP | | [shadcn/ui][shadcn] | | |
| 85 | Item | | [shadcn/ui][shadcn] | | |
| 86 | Menubar | | [shadcn/ui][shadcn] | | |
| 87 | Native Select | | [shadcn/ui][shadcn] | | |
| 88 | Navigation Menu | | [shadcn/ui][shadcn] | | |
| 89 | Resizable | | [shadcn/ui][shadcn] | | |
| 90 | Scroll Area | | [shadcn/ui][shadcn] | | |
| 91 | Sheet | | [shadcn/ui][shadcn] | | |
| 92 | Sidebar | | [shadcn/ui][shadcn] | | |
| 93 | Sonner | | [shadcn/ui][shadcn] | | |
| 94 | Toggle Group | | [shadcn/ui][shadcn] | | |
| 95 | Bottom Navigation | | | [MUI][mui] | |
| 96 | Chip | | | [MUI][mui] | |
| 97 | Data Grid | | | [MUI][mui] | |
| 98 | Image List | | | [MUI][mui] | |
| 99 | Navigation Rail | | | [MUI][mui] | |
| 100 | Number Field | | | [MUI][mui] | |
| 101 | Paper | | | [MUI][mui] | |
| 102 | Stepper | | | [MUI][mui] | |
| 103 | Transfer List | | | [MUI][mui] | |
| 104 | Tree View | | | [MUI][mui] | |
| 105 | Anchor | | | | [Ant Design][antd] |
| 106 | Cascader | | | | [Ant Design][antd] |
| 107 | ColorPicker | | | | [Ant Design][antd] |
| 108 | Descriptions | | | | [Ant Design][antd] |
| 109 | Flex | | | | [Ant Design][antd] |
| 110 | Form | | | | [Ant Design][antd] |
| 111 | Mentions | | | | [Ant Design][antd] |
| 112 | Notification | | | | [Ant Design][antd] |
| 113 | QRCode | | | | [Ant Design][antd] |
| 114 | Result | | | | [Ant Design][antd] |
| 115 | Splitter | | | | [Ant Design][antd] |
| 116 | Tour | | | | [Ant Design][antd] |
| 117 | Tree | | | | [Ant Design][antd] |
| 118 | Watermark | | | | [Ant Design][antd] |
## References
1. [Ant Design](https://ant.design/components/overview)
2. [DaisyUI](https://daisyui.com/components)
3. [MUI](https://mui.com/components)
4. [shadcn/ui](https://ui.shadcn.com/components)
## Form Components
| Group | Component |
| ---------------------------------------- | --------- |
| [Form](https://tanstack.com/form/latest) | Button |
| [Form](https://tanstack.com/form/latest) | Input |
| [Form](https://tanstack.com/form/latest) | Textarea |
| [Form](https://tanstack.com/form/latest) | Select |
| [Form](https://tanstack.com/form/latest) | Checkbox |
| [Form](https://tanstack.com/form/latest) | Radio |
| [Form](https://tanstack.com/form/latest) | Toggle |
| [Form](https://tanstack.com/form/latest) | Label |
## Typography
- h1
- h2
- h3
- h4
- h5
- h6
- p
## Charts
- [TanStack Charts](https://react-charts.tanstack.com/)
- [TanStack Ranger](https://tanstack.com/ranger/latest)
- [TanStack Table](https://tanstack.com/table/latest)
- [TanStack Virtual](https://tanstack.com/virtual/latest)
[daisyui]: https://daisyui.com/
[shadcn]: https://ui.shadcn.com/
[mui]: https://mui.com/
[antd]: https://ant.design/