Components

Browse installable Fulldev UI components.

AccordionA vertically stacked set of interactive headings that each reveal a section of content.AlertDisplays a callout for user attention.Alert DialogA modal dialog for important confirmations that expects a response.Aspect RatioDisplays content within a desired ratio.AttachmentDisplays a file or image attachment with media, metadata, state, and actions.AvatarAn image element with a fallback for representing the user.BadgeDisplays a badge or a component that looks like a badge.BannerA full-width container for important messages or announcements.BreadcrumbDisplays the path to the current resource using a hierarchy of links.ButtonDisplays a button or a component that looks like a button.Button GroupGroups related controls with connected edges and consistent focus behavior.CardDisplays a card with header, content, and footer.CarouselA carousel with motion, swipe and responsive slides built using Embla.CheckboxA control that allows the user to toggle between checked and not checked.CollapsibleAn interactive component which expands/collapses a panel.ComboboxAutocomplete input with a list of suggestions.CommandCommand menu for search and quick actions.DialogA window overlaid on either the primary window or another dialog window, rendering the content underneath inert.DrawerA swipeable panel that opens from an edge of the screen.Dropdown MenuDisplays a menu to the user, such as a set of actions or functions, triggered by a button.EmptyDisplays an empty state placeholder with optional media, title, and description.FieldCombine labels, controls, and help text to compose accessible form fields and grouped inputs.FormA thin Astro form wrapper with sensible vertical spacing for fulldev field primitives.HeaderA responsive site header with grouped content.Hover CardFor sighted users to preview content available behind a link.IconRender Fulldev content icons or use Lucide and Simple Icons directly in Astro.InputDisplays a form input field or a component that looks like an input field.Input GroupAdd addons, buttons, and helper content to inputs.ItemA flexible container for displaying content items with various styles.KbdUsed to display textual user input from keyboard.LabelRenders an accessible label associated with a control.LayoutPage-shell primitives for the root html, head, body, and main structure.LogoA component for displaying a brand logo.MarqueeA continuous scrolling animation component for displaying content in a loop.Native SelectA styled native HTML select element with consistent design system integration.Navigation MenuA collection of links for navigating websites.PaginationPage navigation with previous, next, numbered, and overflow links.PopoverDisplays rich content in a floating layer, triggered by a button.PriceA flexible price display component for showing pricing information.Radio GroupA set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time.RatingA star rating component for displaying ratings visually.ResizableAccessible panel groups with pointer and keyboard resizing.SectionA layout component for organizing page content into sections.SelectDisplays a list of options for the user to pick from, triggered by a button.SeparatorVisually or semantically separates content.SheetA sliding panel component that appears from the edge of the screen.SidebarA composable, themeable, and customizable Astro sidebar component.SkeletonUse a skeleton as a placeholder while content is loading.SliderAn input where the user selects a value from within a given range.SpinnerAn animated loading indicator.SwitchA control that allows the user to toggle between checked and not checked.TableA data table component that displays information in rows and columns.TabsA set of layered sections of content, known as tabs, that display one panel of content at a time.TextareaDisplays a form textarea or a component that looks like a textarea.Theme ToggleA two-state theme toggle that switches immediately between light and dark mode.ToastA brief notification that appears without interrupting the user.TocDisplays a simple table of contents for page sections and subsections.ToggleA two-state button that can be either on or off.Toggle GroupA set of two-state buttons that can be toggled independently or as a single choice.TooltipDisplays contextual information when a user hovers or focuses a trigger.TypographyAutomatic prose styling and semantic text primitives for documentation and content-heavy interfaces.VideoA responsive video component that supports YouTube videos and shorts.