Semantic, accessible Tailwind CSS component library ready for Tailwind v4.
FigmaFlyonuiKBHkY7DekXFlyonUI Pro DocsSupport FlyonUIFramework guidesUsageJavascriptAccessibilityUpgrade GuideCode EditorsCopy PromptCustomize componentsConfigBase styleColorsIconsThemesUtilities and VariablesRTLBlockquoteDividerkeyboardLinkListMaskAccordionAlertAvatarBadgeButtonCardCarouselChat BubbleCollapseDiffIndicatorList GroupLoadingProgressRadial progressRemove elementSkeletonStackStatStatusSwapTheme ControllerTimelineTree ViewBreadcrumbFooterMenuNavbarPaginationScrollspySidebarStepperTabs & PillsContext MenuDrawer (Offcanvas)DropdownModalPopoverTooltipCheckboxFile inputFilterInputJoin (Group Items)RadioRangeSelectSwitchTextareaAdvanced selectCombo BoxCopy MarkupForm wizardInput NumberPin InputStrong PasswordToggle CountToggle PasswordTableBrowserPhoneWindowAdvance Range SliderAnimationCalendarCopy To ClipboardData MapsDatatablesDatePickerDrag & DropFile UploadForm ValidationNotyf (Toasts)RatingWave EffectWYSIWYG EditorBasic exampleDefaultAlways openContent advanced styleActive borderedShadow accordionPopout accordionIllustrationsNested accordionWith arrowWith AvatarArrow on right sideIconWithout plusBordered accordionDestroy/ReinitializeBasicClose Active ElementJavaScript behaviorOptionsMethodsMethod usageEventsEvent usageLooking for creative Tailwind CSSOn this pageInnovative OfferingsDropdown MenuOffcanvasTabs
FlyonUI is an open-source, semantic Tailwind CSS component library combining semantic markup, built-in JavaScript interactivity, and Tailwind CSS v4 support. Designed for speed and developer ergonomics, it includes over 80 responsive components with rich theme presets.