Components Beautifully designed components built with Angular and Tailwind CSS. All 57 Basic 8 Form 15 Layout 6 Overlay 9 Complex 10 Advanced 9AccordionA vertically stacked set of interactive headings.BreadcrumbDisplays the path to the current resource.Context MenuDisplays a menu to the user on right click.Dropdown MenuDisplays a menu when triggered.MenubarA visually persistent menu common in desktop applications.Navigation MenuA collection of links for navigating websites.PaginationPagination with page navigation, next and previous links.TabsA set of layered sections of content.ButtonDisplays a button or a component that looks like a button. Supports multiple variants, sizes, and states.CheckboxA control that allows the user to toggle between checked and not checked.ComboboxAutocomplete input and command palette with a list of suggestions.Date PickerA date picker component with calendar popup.FormBuilding forms with Angular Reactive Forms. Provides form field components with built-in validation, error messages, and accessibility.InputDisplays a form input field. Supports various types, states, and integrates with Angular forms.Input OTPAccessible one-time password component with copy paste functionality.LabelRenders an accessible label associated with form controls. Essential for form accessibility and usability.Radio GroupA set of checkable buttons where only one can be checked at a time.SelectDisplays a list of options for the user to pick from.SliderAn input where the user selects a value from within a given range.SwitchA control that allows the user to toggle between checked and not checked.TextareaDisplays a form textarea.ToggleA two-state button that can be either on or off.Toggle GroupA set of two-state buttons that can be toggled on or off.Aspect RatioDisplays content within a desired ratio.CardDisplays a card with header, content, and footer. Perfect for displaying grouped information, forms, or media.CollapsibleAn interactive component which expands/collapses a panel.ResizableResizable panel groups and panels.Scroll AreaAugments native scroll functionality for custom styling.SeparatorVisually or semantically separates content. Renders as an hr element with proper accessibility.AlertDisplays a callout for user attention with customizable variants.Alert DialogA modal dialog that interrupts the user with important content and expects a response.DialogA window overlaid on the primary window, rendering content in a layer above the page.DrawerA drawer component for Angular.Hover CardFor sighted users to preview content available behind a link.PopoverDisplays rich content in a portal, triggered by a button. Supports positioning and collision detection.SheetA panel that slides in from the edge of the screen. Useful for navigation, filters, or forms.ToastA succinct message displayed temporarily. Supports variants, actions, and custom positioning.TooltipA popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.AvatarAn image element with a fallback for representing the user.BadgeDisplays a badge or a component that looks like a badge.CalendarA date field component that allows users to enter and edit date.CarouselA carousel with motion and swipe built using Embla.ChartBeautiful charts built with SVG.CommandFast, composable, unstyled command menu.ProgressDisplays an indicator showing the completion progress.SkeletonUsed to show a placeholder while content is loading.SpinnerA loading spinner indicator.TableA responsive table component.Button GroupGroups multiple buttons together.EmptyEmpty state placeholder component.Input GroupInput with prefix/suffix addons.KbdKeyboard key indicator component.Native SelectHTML native select with styling.SegmentediOS-style segmented control buttons.SidebarA composable, themeable and customizable sidebar component.SpinnerLoading indicator animations.TypographyText styling components.
