Components
shadcn/ui components mapped to TPC tokens, plus TPC-built components for FlyonUI parity.
Components (15)
AccordionVertically stacked headings that reveal content.AvatarUser image with initials fallback.BadgeSmall status or count label.ButtonPrimary action trigger in all variants and sizes.CardSurface grouping related content and actions.CarouselSwipeable slides with previous/next controls.CollapseShows and hides a single region.DiffBefore/after comparison slider.Drag & DropReorderable list (mouse + keyboard).List GroupBordered list of rows.Remove ElementDismissible wrapper with exit transition.ResizableResizable panel groups.Scroll AreaCustom-styled scroll container.StackFlex and layered stacks.SwapAnimated swap between two states.
Feedback (7)
Overlays (9)
Alert DialogModal confirmation that interrupts with a required choice.Context MenuRight-click menu of actions.Drawer (Bottom)Bottom sheet with drag-to-dismiss.Drawer (Offcanvas)Side panel sliding from any edge.DropdownMenu of actions from a trigger.Hover CardPreview content on hover or focus.ModalFocus-trapped dialog window.PopoverFloating panel anchored to a trigger.TooltipShort label on hover or focus.
Content (11)
Aspect RatioKeeps media at a fixed width-to-height ratio.BlockquoteQuotation with citation.Code BlockCode with copy button.Copy To ClipboardCopy button with confirmation.DirectionRTL/LTR direction provider.DividerHorizontal or vertical divider.KeyboardKeyboard key and shortcut display.LinkInline text link with token underline.ListOrdered and unordered lists.MaskClip images into shapes.TypographyHeadings, lead, muted and inline code.
Navigation (10)
BreadcrumbShows the path to the current page.FooterSite footer with link columns.MenuDesktop-style menubar.NavbarResponsive top navigation.Navigation MenuSite navigation with flyout panels.PaginationPage navigation links.ScrollspyHighlights the section in view.SidebarCollapsible application sidebar.Stepper / Form WizardMulti-step progress.Tabs & PillsTabbed panels.
Forms (17)
Button Group (Join)Joins related buttons and inputs into one control.CheckboxBinary choice with indeterminate state.FieldLabel, control, description and error layout.File InputStyled native file input.FilterToggleable filter chips.InputSingle-line text input.Input GroupInput with addons, icons and buttons.LabelAccessible label for form controls.Native SelectStyled native <select>.RadioSingle choice from a set.RangeRange slider with one or two thumbs.RatingStar rating input.SelectDropdown select.SwitchOn/off toggle.TextareaMulti-line text input.ToggleTwo-state button.Toggle GroupSet of toggles, single or multiple.
Advanced forms (12)
Advanced Select (Tags)Free-text tags input.CalendarDate grid for picking single dates or ranges.Combo BoxSearchable select with typeahead.Command (Search)Command palette with fuzzy search.Date PickerPopover calendar date picker.File UploadDrag-and-drop dropzone with file list.Form Validationreact-hook-form + zod validation wiring.Input NumberNumeric input with steppers.Pin Input (OTP)One-time-code input with slots.Strong PasswordPassword strength meter and checklist.Toggle CountToggle with a live count.Toggle PasswordPassword field with show/hide.