Playground · Flexiwind

Button Versatile action trigger with support for loading states and icons.

Input Enhanced text input field with support for icons and validation.

Field Form field wrapper with label, hint, error message and required indicator.

Text Area Multi-line text input for longer user descriptions or notes.

Select Customizable dropdown for single or multiple selection options.

Listbox A select you can style: one or several values, search, icons, avatars and groups.

Autocomplete Search first: people type, the list narrows, they pick. A known list or a Livewire search.

Tag group Short labels to show, remove, or pick as filters.

Tag input Type free values that become tags: topics, emails, keywords.

Checkbox Form control for independent or multi-select choices with optional inline labels and sizing.

Radio Single-choice form control for mutually exclusive options in a named group.

Switch An on/off control for settings that apply right away.

Toggle A button that stays pressed.

Toggle group Pressed buttons that work together: toolbars, segmented controls, view switchers.

File trigger Open the file picker from any button, or let people drop files on a zone.

Otp / Pin Segmented input field designed for verification codes and MFA.

Range Slider component for selecting numeric values within a span.

Card Organized content container with header, body, and footer sections.

Divider Horizontal separator with optional labeled content and alignment controls.

Aspect Ratio Utility component to maintain specific dimensions for images or videos.

Navbar Header navigation component with support for branding and menus.

Sidebar Collapsible vertical navigation container for application dashboards.

Breadcrumbs Hierarchical navigation trail showing current location and quick parent navigation.

Tabs Segmented view switcher for organizing content within a page.

Pagination Controls for navigating through split datasets or multiple pages.

Link Consistent link primitive supporting inline, underlined, and button-like action styles.

Table Data-rich table component with header, row, and cell styling.

Avatar Visual representation of a user with fallback support for initials.

Badge Compact status indicator for counts, labels, or categories.

Alert Inline notification for conveying success, error, or warning messages.

Callout Attention-grabbing box for tips, warnings, or notes.

Progress Task-completion indicator with configurable thickness for determinate loading states.

Toast Short messages that confirm, warn or report progress without stopping anyone.

Meter Range-based value indicator for metrics like usage, score, or capacity.

Skeleton Lightweight loading placeholder to preserve layout and reduce perceived wait.

Kbd Shortcut keycap component for displaying keyboard commands and key combinations.

Modal Blocking dialog window for critical interactions or forms.

Alert Dialog Confirmation dialog pattern for destructive or high-impact actions using modal behavior.

Slideover Side-panel overlay for secondary navigation or settings.

Dropdown Overlay menu for displaying contextual actions or links.

Command menu A ⌘K palette: search, pages, actions and shortcuts in one dialog.

Popover Floating container for displaying rich content on click or hover.

Tooltip Small informative popup that appears on element hover.

Accordion Vertically collapsing panels for managing dense content.

Collapse Toggle visibility of content sections with smooth height transitions.

Dissmissible User-dismissible content wrapper for alerts, notifications, and temporary messages.

Icon Reusable icon component using Iconify for consistent iconography across the UI.

Text Semantic text component with intent-based styling for body, muted, title, and accent colors.

Heading Structured heading levels (H1-H5) with consistent sizing and semantic hierarchy.

Chart Zoomable time series, candlesticks, heatmaps, radar, scatter and funnels, drawn by Apache ECharts and themed with your Flexiwind tokens.

Rich text A rich text editor with no dependency: marks, headings, lists, links, images and uploads, composed part by part.

Rich text Pro A rich text editor on Tiptap: tables, tasks, mentions, slash commands, font, size and colour, loaded only where you use it. Pro

Chart Bar, line, area, pie, donut and radial charts rendered by Blade, with no JavaScript library.

Bar Chart Grouped, stacked, horizontal and signed bar charts.

Line Chart Line and area charts for trends over time.

Pie Chart Pie and donut charts for shares of a whole.

Radial Chart Progress rings and gauges.

Sparkline A tiny trend line, area or bar series for KPI cards and tables.

Tracker A row of status blocks: uptime, job runs, attendance.

Bar Grouped, stacked and horizontal bars, on categories or on a time axis.

Line Lines and areas, from a few points to thousands, with zoom on time series.

Pie Pie and donut charts for shares of a whole.

Scatter Scatter plots to show how two measures relate.

Radar Radar charts to compare profiles across several measures.

Heatmap Heatmaps to spot patterns across two dimensions.

Candlestick Candlesticks for prices: open, close, low and high.

Funnel Funnels for conversion steps.

Stacked Modal A custom stacked modal component. Pro

Accordion A custom accordion component. Pro

Dropdown A custom dropdown component. Pro