Snippet Gallery
Discover and share Flutter UI components built with Wind. Browse community snippets, fork and customize them.
All Snippets
Browse 100 community snippets
Flutter Flash Sale Countdown Timer Card
A high-urgency flash sale card with a lightning badge, a discount pill, product pricing with a struck-through original price, and a live HH:MM:SS countdown over a warm gradient. Built with Wind UI utility classes and dark mode pairs.
Flutter iOS 27 Liquid Glass Translucency Control Card
The headline iOS 27 feature from WWDC 2026: a tunable Liquid Glass appearance card with a translucency slider that runs from ultra clear to fully tinted. Built with Wind UI over a vivid wallpaper so you can see exactly how much the glass refracts.
Flutter iOS 27 Siri AI Panel with Dynamic Island Glow
The new Siri AI surface from iOS 27, unveiled at WWDC 2026: a dark, focused panel with a soft desaturated multicolor glow expanding from the Dynamic Island. Built with Wind UI, it pairs a listening pill, a conversation thread, and an Ask anything field over a near black canvas.
Flutter Liquid Glass Music Player with Now Playing Card
A Liquid Glass now-playing card where vivid album art bleeds its color through a translucent surface, in the spirit of the iOS 26 design language. Built with Wind UI: gradient cover art, a glass play overlay, a progress track, and a full transport control row.
Flutter Liquid Glass Tab Bar with Floating Navigation
A frosted Liquid Glass navigation bar floating over a vivid gradient home screen, inspired by the iOS 26 design language unveiled at WWDC 2025. Translucent surfaces, glowing color orbs, and a glass Up Next card show how to build real depth with Wind UI.
Flutter Savings Goal Progress Card
A premium dark savings goal card: goal name with a wallet icon badge and milestone flag, an oversized saved amount against the target, a left-filled progress bar with percentage and next-milestone labels, and a bold Add Funds button. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
Flutter Flight Booking Summary Card
A boarding-pass style flight card: airline header with a plane badge and cabin pill, a departure-to-arrival route with airport codes, times and duration, a divider, and a footer of seat and gate chips with a live boarding countdown. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
Flutter Weather Forecast Card with Hourly Strip
A vibrant weather card on a sky gradient: city and date, an oversized current temperature, a one-line conditions summary, and a frosted hourly forecast strip with per-hour icons and temps. Built in the Wind Dart dialect with Tailwind-style className and dark-mode pairs.
Flutter Workout Plan Card with Exercise List
A compact fitness workout card: session title with a gradient icon badge, difficulty and calorie chips, a numbered exercise list with set and rep counts, and a bold start button. Built in the Wind Dart dialect with Tailwind-style className and full dark-mode pairs.
Flutter Checkout Order Summary Card
An e-commerce checkout summary with product line items, a totals breakdown, a discount code badge, and a secure Place Order button. Styled entirely with Wind UI utility classes and dark mode ready.
Flutter Podcast Now Playing Card with Controls
A media now-playing card with cover art, episode title, a progress track with elapsed and total time, and playback controls. Styled entirely with Wind UI utility classes and dark mode ready.
Flutter Social Post Card with Engagement Actions
A social feed post card with a verified author header, body copy, a media banner, and like, comment, share, and bookmark actions. Styled entirely with Wind UI utility classes and dark mode ready.
Flutter Transaction Activity List for Fintech Apps
A fintech activity feed listing recent transactions with category icons, merchant labels, and color-coded signed amounts. Styled entirely with Wind UI utility classes and dark mode ready.
Flutter Dashboard Stat Cards with Trend Badges
Three dashboard metric cards showing a value, label, and up or down trend badge with icons. A compact KPI row built with Wind UI utility classes and dark mode.
Flutter Testimonial Card with Star Rating
A customer testimonial card with a five-star rating, a quote, an initials avatar, and the author name and role. Built with Wind UI className utilities, dark mode ready.
Flutter Success Toast Notification
A floating success toast with an icon, a title, a message, and an action link. An ephemeral feedback pattern built with Wind UI className utilities and dark mode.
Flutter Rating Summary with Score and Bars
A review summary with a large average score, a star row, total count, and rating distribution bars. Built with Wind UI className utilities, dark mode included.
Flutter Profile Card UI: Avatar, Stats, and Actions
A social profile card with a gradient cover, initials avatar, follower stats, and Follow plus Message actions. Built with Wind UI className utilities and dark mode pairs.
Flutter Settings List with Icon Rows
A settings list with leading icon tiles, titles, subtitles, and trailing chevrons. A preferences screen pattern built with Wind UI utility classes and dark mode.
Flutter Pricing Card with Tailwind-Style className
A SaaS pricing card built with Wind UI utility classes: icon badge, plan name, monthly price, a checkmark feature list, and a full-width CTA. Dark mode included.
Flutter Product Card for E-commerce Grids
An e-commerce product card with a discount badge, name, price, star rating, and an add-to-cart button. Styled entirely with Wind UI utility classes and dark mode ready.
Flutter Feature Grid: Three-Column Highlights
A three-column feature grid with icon tiles, titles, and short descriptions. A marketing section built with Wind UI utility classes and full dark mode support.
Flutter Empty State with Icon and Call to Action
An empty-state panel with a muted icon, a headline, a short explanation, and a call-to-action button. A friendly no-data screen built with Wind UI utilities.
Flutter Hero Section with Gradient and CTA Buttons
A landing-page hero with a gradient background, a highlight badge, a bold headline, supporting copy, and primary plus secondary CTA buttons. Built with Wind UI.