Widget Catalog
26 widgets you style with
className="flex p-4 dark:bg-gray-800".
Same Tailwind tokens you write on the web, rendered as native Flutter widget trees.
One grammar, every widget.
Utility classes for layout, state, and breakpoints. Same syntax you write on the web.
01 · Utility tokens
flex, p-4, rounded-xl. The same Tailwind tokens, mapped to native Flutter properties.
02 · State variants
hover:, focus:, dark:. Interaction and theme states inlined right where you read them.
03 · Responsive prefixes
sm:, md:, lg:. Mobile, tablet, and desktop layouts in a single className string.
Essentials
The four you'll reach for daily
The core building blocks. Compose every screen from these.
Text
A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography.
Div
The fundamental building block of Wind. WDiv acts as a multi-purpose container that replaces standard Flutter widgets like Container, Row, Column, F...
Button
WButton is an interactive component that combines WAnchor state management with Tailwind-like utility styling and built-in loading states.
Input
The WInput widget is a utility-first form input that combines React-style controlled state management with Tailwind-like styling. It replaces the standard ...
Catalog
Browse by category
26 widgets organized by what they do.
Layout & Text
Containers, spacing, and text primitives
Text
A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography.
Div
The fundamental building block of Wind. WDiv acts as a multi-purpose container that replaces standard Flutter widgets like Container, Row, Column, F...
Spacer
The WSpacer is a lightweight widget designed specifically for adding consistent gaps between elements. Unlike WDiv, which supports a full range of decora...
Breakpoint
Declarative breakpoint-keyed builder for rendering different widget trees per responsive breakpoint. An escape hatch for cases where the widget structure...
Data Display
Cards, badges, and content surfaces
Badge
Inline status or label pill. Composes a pill-shaped WDiv (rounded-full, inline-flex) around a WText (text-xs). All visual styling is className-driven: th...
Card
Surface container with optional header and footer slots. Composes a WDiv (flex-col) with up to three slots: an optional header above the body, the requ...
Interactive
Buttons, links, and interactive elements
Anchor
The foundational state wrapper that detects user gestures (Hover, Focus, Press) and propagates that state down to all descendant widgets via WindAnchorState...
Button
WButton is an interactive component that combines WAnchor state management with Tailwind-like utility styling and built-in loading states.
Popover
A flexible popover component for creating dropdown menus, notification panels, user menus, tooltips, and similar overlay patterns.
Tabs
Controlled tabs widget. Renders a tab list and a content panel. The selected: state prefix activates on the currently active tab, so callers can supply tok...
Dynamic
WDynamic renders a Flutter widget tree from a JSON/Map configuration at runtime, with built-in action handling and form state management.
Media
Images, icons, and SVG widgets
Icon
The utility-first icon component for displaying vector icons with Tailwind-like styling. It wraps Flutter's Icon widget and applies utility classes for siz...
Image
The WImage widget brings utility-first styling to images in Flutter, providing HTML-like semantics with Tailwind-inspired classes for sizing, object fittin...
SVG
The utility-first SVG component. WSvg brings HTML SVG semantics to Flutter with Tailwind-like utility classes for styling, supporting both asset paths and ...
Form Inputs
Input fields and form controls
Checkbox
A utility-first checkbox component that translates Tailwind-style classes into a fully customizable checkbox widget. It sidesteps the limitations of native F...
Radio
Controlled radio button. Composes WAnchor (interaction state) + WDiv (outer ring shell) + WDiv (inner filled indicator). Drives the selected: state p...
Switch
Controlled toggle switch. Composes WAnchor + WDiv (track) + WDiv (thumb). Pushes the checked: state prefix into the className context when value is...
Input
The WInput widget is a utility-first form input that combines React-style controlled state management with Tailwind-like styling. It replaces the standard ...
Select
A highly customizable, utility-first select component that supports single selection, multi-selection, searching, and remote data fetching.
Date Picker
A utility-first date picker component built on [WPopover](./w-popover.md) with support for single date selection, date range selection, min/max constraints, ...
Form Wrappers
Form-integrated widgets with validation
Form Checkbox
A Wind-styled checkbox that integrates with Flutter's Form validation, providing built-in support for labels, hints, and error states.
Form Input
A Wind-styled input that integrates seamlessly with Flutter's native Form validation system. It extends FormField to provide automatic error handling, labe...
Form Select
A Wind-styled single or multi-select dropdown that integrates seamlessly with Flutter's Form validation. It wraps the core WSelect widget with FormField ...
Form Date Picker
A form-integrated date picker that wraps [WDatePicker](./w-date-picker.md) with Flutter's FormField<DateTime>. Provides native form validation, automatic ...