Introducing Wind 1.12.0

Rapidly build modern Flutter apps without ever leaving your widget tree.

Tailwind CSS for Flutter. A utility-first styling framework packed with classes like flex, p-4, dark:bg-gray-800, hover:scale-105, and md:flex-row that compose into responsive, theme-aware widget trees.

Get started View on pub.dev

wind_kit / lib / welcome_card.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

WDiv(

className: 'flex gap-4 p-6 rounded-2xl '

'bg-slate-800 border border-slate-700',

children: [

WIcon(Icons.air, className: 'size-14 p-3 '

'rounded-xl bg-blue-500/15 text-blue-400'),

WDiv(

className: 'flex flex-col gap-1',

children: [

WText('Welcome to Wind',

className: 'text-2xl font-bold text-white'),

WText('Utility-first styling for Flutter.',

className: 'text-sm text-slate-400'),

],

),

],

)

hot reload

Style. Compose. Ship.

Stop nesting widgets for styling. Write className="p-4 bg-blue-500 hover:bg-blue-700" directly in your Dart code. Same Tailwind syntax you write on the web.

Utility-First Styling

Style widgets with composable classes like p-4 bg-blue-500 rounded-lg. No more deeply nested widget trees just for styling.
Learn more about Utility-First Styling
Responsive Design

Mobile-first breakpoint system. Prefix any utility with sm:, md: or lg: to apply styles at specific screen sizes.
Learn more about Responsive Design
Interactive States

Add hover:bg-blue-700 or disabled:opacity-50 to any element. Built-in hover, focus, loading, and custom state support.
Learn more about Interactive States
Theming

Define your entire design system in WindThemeData: custom colors, typography scales, spacing tokens, and shadows. One config, consistent UI everywhere.
Learn more about Theming
Dark Mode

Prefix any utility with dark: for automatic dark mode support. Use dark:bg-slate-900 and toggle themes at runtime with a single call.
Learn more about Dark Mode
Dynamic Rendering

Build Flutter UIs from JSON at runtime with WDynamic. Server-driven UI for CMS layouts, A/B testing, and remote configuration. No app rebuild needed.
Learn more about Dynamic Rendering

Live Playground

Write Wind code and see the results instantly. Experiment with utility classes, test your ideas, and copy the code directly to your Flutter project.

Real-time preview as you type
One-click copy to clipboard
Full utility class support

Open the playground

playground

editor

1
2
3
4
5
6
7
8
9
10

WDiv(

className: 'flex flex-col gap-1 '

'p-6 rounded-xl bg-slate-800',

children: [

WText('Hello Wind!',

className: 'text-2xl font-bold'),

WText('Edit to see changes',

className: 'text-slate-300'),

],

)

Live sync enabled

Your agent speaks Wind.

The Wind UI skill teaches your coding assistant the className grammar, dark-mode pairing rules, and anti-patterns before the first line. One command wires it up.

npx skills add anilcancakir/ai --skill wind-ui

run in your project other editors

works with

Claude Code
Cursor
OpenCode
VS Code Copilot
Codex CLI

✻ claude ~/my_app connected

$ npx skills add anilcancakir/ai --skill wind-ui

✓ wind-ui installed

› add a pricing card with a dark variant

● Skill(wind-ui) loaded

⏺ Edit lib/pricing_card.dart

+ WDiv(className: '… dark:bg-slate-800')

✓ dark: pairs on every background

And verifies what it wrote.

Skills teach the grammar. The MCP server at mcp.anilcancakir.com/wind gives your agent live docs lookup while it edits, so it never ships a hallucinated className.

Streamable HTTP

One endpoint, every client.
search-docs

Live query against the source.
Public, no auth

MIT, free forever.

Connect your editor

mcp.anilcancakir.com/wind live

# streamable http, the default

claude
                        mcp add
                                                    --transport http
                            wind_kit
                            https://mcp.anilcancakir.com/wind

# or stdio, for clients without http

npx
                            @anilcancakir/wind-mcp

Public, no auth, MIT.

Loved by developers

“Wind has completely transformed how we build UI in Flutter. It feels just like web development but native. The velocity gain is incredible.”

Sarah Chen Senior Flutter Engineer at TechFlow

“Finally, a styling solution that makes sense for Flutter! The utility-first approach saves us hours of boilerplate code every week.”

Marcus Rodriguez Lead Developer at AppForge

“Migrating from React Native was painless with Wind. The familiar Tailwind syntax made our team productive from day one.”

Emily Watson Mobile Architect at StartupX

“The dark mode support is amazing. One prefix and our entire app transforms. Wind is an absolute game-changer.”

James Park UI/UX Developer at DesignLab

“We shipped our MVP 3x faster using Wind. The component patterns feel natural and the documentation is top-notch.”

Aisha Patel CTO at MobileFirst

Start building in seconds

~/my_app

flutter pub add
                wind_kit

Or add to pubspec.yaml:

dependencies:
  wind_kit: ^1.12.0

Or give your AI agent this prompt:

Read https://anilcancakir.com/wind_kit/docs/llms.txt and install the Wind package in this project.

Rapidly build modern Flutter apps without ever leaving your widget tree.

Style. Compose. Ship.

Utility-First Styling

Responsive Design

Interactive States

Theming

Dark Mode

Dynamic Rendering

Live Playground

Your agent speaks Wind.

And verifies what it wrote.

Streamable HTTP

search-docs

Public, no auth

Loved by developers

Start building in seconds