Widget Catalog
19 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.
Div
The fundamental building block of Wind. WDiv acts as a multi-purpose container that replaces standard Flutter widgets like Container, Row, Column, F...
Text
A utility-first text component that translates Tailwind-like class strings into optimized Flutter typography.
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
19 widgets organized by what they do.
Layout & Container
Container, spacing, and responsive primitives
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...
Typography
Text styling and display widgets
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.
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...
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 ...