Components

Beautifully crafted components for any interface

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

Left
Right

Flex utilities

One-property shorthand classes for building layouts without custom CSS.

Card content with generous padding and a bottom margin.

Spacing utilities

One-property padding and margin shorthand classes across the shared space scale.

Actions

Button

FlickUI's core clickable-action element for forms, overlays, and in-page actions.

Segmented button

A pill-shaped group of mutually-exclusive or independently toggleable options.

FAB

A circular, elevated primary-action button anchored to a corner of the viewport.

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.

Plan

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.

We'll never share your email.

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.

    File upload

    A styled dropzone around a native file input, with click-to-browse and drag-and-drop.

    Display

    Revenue

    Last 30 days

    $48.2k

    Card

    A general-purpose bordered or shadowed content container.

    Live

    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.

    Status: Open

    Chip

    A compact, pill-shaped element for filter tags, selectable options, and tokens.

    Uploading… 72%

    Progress

    A filled bar or circular ring communicating completion of a task.

    72% Complete

    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.

    • Build pipeline Passed in 4m 12s
      1h

    List

    A vertical collection of rows for settings menus, feeds, and search results.

    Name Role Amount
    Ada Lovelace Admin $1,240
    Alan Turing Editor $980

    Table

    A styled native <table> for structured data, with optional click-to-sort and row selection.

    Skeleton

    A shimmering placeholder block shown while real content is still loading.

    Spinner

    A small rotating-arc loading indicator for inline or compact use.

    Slide one
    Slide two
    Slide three

    Carousel

    A horizontally-scrolling, snap-to-item row of content with prev/next controls.

    Feedback

    Alert

    An inline, persistent banner surfacing a message directly in the page flow.

    FlickUI.toast({ title: 'Saved', body: 'Your changes have been saved.', variation: 'success', duration: 5000, // ms; 0 disables auto-hide position: 'bottom-right', });

    Toast

    A transient, self-dismissing notification created entirely at runtime.

    This is flickui.

    Modal

    A centered overlay dialog built on the native <dialog> element.

    Helpful tooltip text

    Tooltip

    A small floating label that appears on hover or keyboard focus.

    Navigation

    Navbar

    A full-width top-level navigation bar with a built-in responsive collapse.

    Overview content.

    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.

    General settings content.

    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.

    Plan details

    Includes unlimited projects and priority support.

    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.

    Pickers

    July 2026
    SMTWTFS

    Date picker

    A fully interactive calendar-grid control for choosing a single date.

    July 2026
    SMTWTFS

    Date range

    The two-endpoint sibling of the date picker, fully interactive with a shaded range band.

    :

    Time picker

    A fully interactive hour/minute/AM-PM control with large numeric fields.