Components
46 components, fully composable
Every component below has its own page — a live preview with sample code, a size reference, the full class list, and its props & events, all pulled straight from real @flickui/css markup.
Layout
Actions
Forms
Switch
A toggle control for settings that take effect immediately.
Select
A fully custom dropdown listbox with icons, descriptions, and grouping.
Checkbox
Replaces the browser's default checkbox with a styled box, keeping native accessibility.
Radio
Styles a native radio input as a circle-and-dot, grouped by name.
Input
Wraps a native input with border, focus ring, and icon/clear-button slots.
Textarea
Styles a native textarea with the same treatment as input, plus a live character counter.
Autocomplete
A text-input-plus-suggestions-listbox pattern for free-text search-as-you-type.
Slider
Styles a native range input with a colored fill and optional value tooltip.
Form field
A layout wrapper pairing a label, a control, and helper/error text.
Search bar
A thin layout wrapper around a search input and an adjacent submit button.
Display
Card
A general-purpose bordered or shadowed content container.
Badge
A small, static label for counts, statuses, or short qualifiers.
Avatar
A circular or square profile picture, initials, or icon placeholder.
Icon
A sizing/coloring wrapper for inline SVG glyphs.
Chip
A compact, pill-shaped element for filter tags, selectable options, and tokens.
Progress
A filled bar or circular ring communicating completion of a task.
Donut
A ring chart for showing one or a few proportions as colored arcs.
Divider
A thin rule used to separate content into visual sections.
List
A vertical collection of rows for settings menus, feeds, and search results.
Skeleton
A shimmering placeholder block shown while real content is still loading.
Spinner
A small rotating-arc loading indicator for inline or compact use.
Carousel
A horizontally-scrolling, snap-to-item row of content with prev/next controls.
Feedback
Navigation
Navbar
A full-width top-level navigation bar with a built-in responsive collapse.
Tabs
Switch between panels of content without leaving the page.
Breadcrumb
A static navigation trail showing the user's position in a hierarchy.
Pagination
A static navigation control for moving through a sequence of pages.
Accordion
A vertical stack of collapsible panels — the standard pattern for FAQs.
Drawer
A slide-in panel most commonly used as an off-canvas navigation menu.
Nav rail
A slim, always-visible vertical navigation strip for a handful of top-level destinations.
Bottom bar
A horizontal strip anchored to the bottom edge, the mobile-app counterpart to a top navbar.
Menu
A floating list of actionable items anchored to a trigger, built from an anchor + list pair.
Dropdown
A self-contained trigger-plus-panel component for actions and selections.
Popover
A floating card anchored to a trigger, for richer content than a menu or tooltip.
Bottom sheet
A panel that slides up from the bottom edge, the mobile-friendly equivalent of a modal.
Side sheet
A panel that slides in from the left or right edge, for detail views or secondary navigation.