# Snippet Galerisi

Yazıldıkça eklenen gerçek Wind örnekleri. Sonucu görmek ve kodunu okumak için birini aç.

- [WAnchor örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-anchor/index.md): Hover, odak ve basma durumunu alt öğelere ileten durum sarmalayıcısı.
- [WBadge örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-badge/index.md): Satır içi durum ya da etiket hapı.
- [WBreakpoint örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-breakpoint/index.md): Her kırılma noktası için farklı bir widget ağacı kurar.
- [WButton örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-button/index.md): Yerleşik durumları ve yüklenme hali olan buton.
- [WCard örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-card/index.md): İsteğe bağlı başlık ve altlık alanları olan bir yüzey.
- [WCheckbox örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-checkbox/index.md): Tamamen biçimlenebilen onay kutusu.
- [WDatePicker örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-date-picker/index.md): Tekil tarih, aralık ve tarih-saat seçimi; WPopover üzerine kurulu.
- [WDiv örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-div/index.md): Yapı taşı. Container, Row, Column, Flex ve Grid için tek bir kap.
- [WDynamic örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-dynamic/index.md): Çalışma anında JSON verisinden widget ağacı çizer.
- [WFormCheckbox örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-form-checkbox/index.md): Form doğrulaması, etiket ve ipucu destekli onay kutusu.
- [WFormDatePicker örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-form-date-picker/index.md): Flutter Form doğrulamasına bağlanan tarih seçici.
- [WFormInput örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-form-input/index.md): Flutter Form doğrulamasına bağlanan metin girdisi.
- [WFormSelect örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-form-select/index.md): Flutter Form doğrulamasına bağlanan seçim.
- [WIcon örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-icon/index.md): Yardımcı sınıflarla biçimlenen vektör ikonlar.
- [WImage örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-image/index.md): Boyut, sığdırma ve yuvarlama sınıflarıyla görseller.
- [WindAnimationWrapper örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-wind-animation-wrapper/index.md): Herhangi bir widget için sürekli dönme, ping, nabız ya da zıplama animasyonu.
- [WInput örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-input/index.md): Yardımcı sınıflarla biçimlenen kontrollü metin girdisi.
- [WKeyboardActions örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-keyboard-actions/index.md): Klavyenin üstünde Bitti düğmesi ve alan gezintisi.
- [WPopover örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-popover/index.md): Açılır menüler, bildirim panelleri ve ipuçları.
- [WRadio örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-radio/index.md): `selected:` durumlu kontrollü radyo düğmesi.
- [WSelect örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-select/index.md): Arama ve uzak veriyle tekli ya da çoklu seçim.
- [WSpacer örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-spacer/index.md): Öğeler arasında hafif bir boşluk.
- [WSvg örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-svg/index.md): Yardımcı sınıflarla biçimlenen SVG dosyaları.
- [WSwitch örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-switch/index.md): `checked:` durumlu kontrollü anahtar.
- [WTabs örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-tabs/index.md): Kontrollü sekme listesi ve panel; `selected:` durumuyla.
- [WText örneği](https://anilcancakir.com/tr/wind_kit/snippets/example-w-text/index.md): Tailwind benzeri sınıf dizeleriyle biçimlenen metin.
- [Ayarlar kartı](https://anilcancakir.com/tr/wind_kit/snippets/card-surface-dark/index.md): Kenarlığı, gölgesi ve her renk için `dark:` karşılığı olan bir kart.
- [Doğrulamalı e-posta alanı](https://anilcancakir.com/tr/wind_kit/snippets/form-input-validation/index.md): Doğrulayıcısı, odak halkası ve `error:` kenarlığı olan bir form girdisi.
- [Buton varyantları](https://anilcancakir.com/tr/wind_kit/snippets/wind-recipe-button/index.md): İki niyet ve iki boyut içeren tek bir tarif; className haritasından çözülür.
- [Devre dışı buton](https://anilcancakir.com/tr/wind_kit/snippets/button-disabled-state/index.md): `disabled:` yardımcılarıyla soluklaşan ve grileşen bir buton.
- [md'de düzen değişimi](https://anilcancakir.com/tr/wind_kit/snippets/responsive-md-visibility/index.md): Biri telefonda, biri tablette gizlenen iki blok; `hidden md:flex` ile.
- [Hover geçişi](https://anilcancakir.com/tr/wind_kit/snippets/animation-transition-hover/index.md): 200 milisaniyede koyulaşan ve gölgesi yükselen bir ana buton.
- [Responsive başlık](https://anilcancakir.com/tr/wind_kit/snippets/typography-blog-header/index.md): Soluk bir alt başlığın üstünde `sm:` ile büyüyen, `dark:` rengi olan bir başlık.
- [Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs](https://anilcancakir.com/tr/wind_kit/snippets/a8iym7zf/index.md): A Flutter navigation lights card for boating and marine apps: a night panel with a top-down hull ringed by the COLREGs Rule 21 arcs, red port and green starboard sidelights at 112.5 degrees, a 225 degree masthead ring, a 135 degree sternlight and Rule 22 visibility ranges. Built with wind_kit.
- [Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom](https://anilcancakir.com/tr/wind_kit/snippets/gielefji/index.md): A Flutter electromagnetic spectrum card for science and physics education apps: radio, microwave, infrared, visible, UV, X-ray and gamma bands on a log wavelength axis from 10 m to 0.1 pm with NASA band edges, and a connector zooming the visible slice into a 700 to 400 nm strip. Built with wind_kit.
- [Flutter Euro Banknote Card with True Scale Note Stack and Denomination Colours](https://anilcancakir.com/tr/wind_kit/snippets/atz8zp15/index.md): A euro banknote card for banking, travel and currency apps: all six Europa series notes from €5 to €200 drawn to true scale in their official grey, red, blue, orange, green and yellow-brown, each tagged with its millimetre size, plus width and height stats showing how every step up adds 6 or 7 mm.
- [Flutter Seven Segment Display Card with Lit LED Digits and Register Byte Decoder](https://anilcancakir.com/tr/wind_kit/snippets/e593xxi1/index.md): A seven segment LED card for embedded, IoT and maker apps: a four digit red display reading 12.45 with unlit segments still glowing faintly, an enlarged digit with segments A to G and the decimal point labelled, its MAX7219 no-decode register byte 0xED in hex and binary, and a DP to G bit strip from D7 to D0.
- [Flutter Pascal Triangle Card with Odd Entry Pattern and Row Sums](https://anilcancakir.com/tr/wind_kit/snippets/8s3mmrbt/index.md): A Flutter Pascal's triangle card for maths and tutoring apps: rows 0 to 7 as binomial coefficient tiles, odd entries shaded so the Sierpinski pattern shows, and a row sum gutter doubling from 1 to 128. Counts 36 entries, 27 odd, 255 total. Centred wind_kit rows, one node per number.
- [Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate](https://anilcancakir.com/tr/wind_kit/snippets/kor2f8sr/index.md): A Flutter income tax card for payroll, budgeting and personal finance apps: UK 2026/27 personal allowance, basic and higher rate bands drawn to scale for a 60,000 pound salary, tax per band and tiles for total, effective rate and marginal rate. Baseline-aligned wind_kit bars.
- [Flutter File Permission Card with rwx Grid and Octal Mode Readout](https://anilcancakir.com/tr/wind_kit/snippets/vtd39kn6/index.md): A Flutter file permission card for DevOps dashboards, hosting panels and learning apps: a terminal-style grid of owner, group and other against read, write and execute, bits worth 4, 2 and 1 summing to the octal digits of mode 755, plus the chmod command and the -rwxr-xr-x listing. Built with wind_kit.
- [Flutter Runway Markings Card with Designator, Threshold Stripes and Aiming Point](https://anilcancakir.com/tr/wind_kit/snippets/qe44nlmh/index.md): A Flutter runway markings card for aviation and flight training apps: the approach end of runway 27 drawn to scale, with eight threshold stripes, the designator from a 268 degree heading, a dashed centreline and twin aiming point bars, each called out. Absolute positioning in wind_kit.
- [Flutter Morse Code Card with Dot Dash Timing Signal Strip](https://anilcancakir.com/tr/wind_kit/snippets/v7ykwk6k/index.md): A Morse code keyer card for learning and ham radio apps: HELLO spelled with dot and dash pills under each letter, a 49 unit signal strip drawn to scale with on marks and letter gaps, the four timing rules for dots, dashes, letter gaps and word gaps, and a key button.
- [Flutter Contrast Checker Card with WCAG AA and AAA Pass Badges](https://anilcancakir.com/tr/wind_kit/snippets/iyici9tr/index.md): A WCAG 2.2 colour contrast card for design system and accessibility apps: text and background swatches, a live preview of body and large text, the 3.74:1 ratio on a threshold scale, AA and AAA pass or fail tiles for normal and large text, and a one-tap fix to the nearest passing shade.
- [Flutter Connect Four Board Card with Winning Diagonal and Series Score](https://anilcancakir.com/tr/wind_kit/snippets/z2dxts9z/index.md): A Connect Four game card for casual and board game apps: a 7 by 6 board with ringed winning discs on the diagonal, a marker over the last column played, the head to head series score, move and disc counts, and a play-again button.
- [Flutter Resistor Colour Code Card with Four Band Decoder and Ohm Readout](https://anilcancakir.com/tr/wind_kit/snippets/qldi7ejq/index.md): A 4-band resistor decoder card for electronics and maker apps: a through-hole resistor drawn in red, violet, green and gold, a per-band legend, the decoded 2.7 MΩ value with its ±5% range, and the full 0 to 9 digit colour strip with the used bands outlined.
- [Flutter Subnet Calculator Card with 32 Bit Network and Host Grid](https://anilcancakir.com/tr/wind_kit/snippets/zx4pms7k/index.md): A Flutter subnet calculator card for network and developer tools: an IPv4 address with its CIDR prefix, all 32 bits by octet with network and host bits in two colours, plus network, mask, first and last host, broadcast and usable hosts. A correct /21 worked example built with wind_kit.
- [Flutter Hearing Test Card with Audiogram Ear Markers and Severity Bands](https://anilcancakir.com/tr/wind_kit/snippets/gbyqs9m7/index.md): A Flutter hearing test card for health apps: a pure tone audiogram with red circles for the right ear and blue crosses for the left, dotted threshold lines from 250 Hz to 8 kHz, severity bands, per-ear averages and a noise notch callout. Fixed-pixel wind_kit layout that scales cleanly.
- [Flutter Soroban Abacus Card with Heaven and Earth Bead Rods](https://anilcancakir.com/tr/wind_kit/snippets/tewwsqbo/index.md): A Flutter soroban trainer card for maths and education apps: seven rods with heaven beads worth 5 and earth beads worth 1 set against the reckoning beam, unit dots, the digit under each rod and a streak, accuracy and pace row. Bead positions are computed from the number. Built with wind_kit.
- [Flutter Golf Scorecard Card with Birdie Circles and Bogey Squares](https://anilcancakir.com/tr/wind_kit/snippets/e0rtnhjm/index.md): A Flutter golf scorecard card for round tracker apps: a back nine with hole and par rows, strokes marked the way golfers read them (circles under par, a double ring for an eagle, squares over par), a total against par and a post-to-handicap button. Built with wind_kit and dark mode pairs.
- [Flutter Braille Learning Card with Six Dot Letter Cells](https://anilcancakir.com/tr/wind_kit/snippets/4paozd1y/index.md): A Flutter Braille learning card for accessibility and education apps: the name Louis in six-dot cells with the capital sign, raised and flat dots, the matching Unicode Braille line, a numbered dot key and alphabet progress. Follows Unified English Braille. Built with wind_kit.
- [Flutter Barbell Plate Loader Card with IPF Colour Coded Plates](https://anilcancakir.com/tr/wind_kit/snippets/ur70di2d/index.md): A Flutter barbell plate loader card for gym and powerlifting apps: a side-on barbell with IPF colour-coded plates stacked heaviest first, competition collars, a per-side breakdown and an attempt strip. Exact maths: 20 kg bar, two 2.5 kg collars and 90 kg a side make 205 kg. Built with wind_kit.
- [Flutter Poker Hand Odds Card with Board Cards and Equity Bar](https://anilcancakir.com/tr/wind_kit/snippets/dvf6sjxl/index.md): A Flutter poker odds card for trainers and odds calculator apps: heads-up hole cards with suit glyphs, a flop with empty turn and river slots, a win and lose equity bar and every out as a mini card. Exact numbers over all 990 run-outs. Built with wind_kit className utilities.
- [Flutter Container Ship Bay Plan Card with Colour Coded Port Stacks](https://anilcancakir.com/tr/wind_kit/snippets/6biw93mh/index.md): A Flutter container ship bay plan card for logistics and terminal apps: a row-by-tier cross-section of Bay 14 with port and starboard row numbers, deck tiers above the hatch cover, a tapered hold, slots coloured by discharge port, plugged reefers and a stowage legend. Built with wind_kit.
- [Flutter Periodic Element Card with Bohr Model Electron Shells](https://anilcancakir.com/tr/wind_kit/snippets/9ksumd8n/index.md): A Flutter element of the day card for chemistry and study apps: a Bohr model with all 26 electrons of iron on four shells, the valence pair highlighted, shell chips for the 2, 8, 14, 2 filling and a periodic table tile beside configuration, melting point and density. Built with wind_kit.
- [Flutter Speedcube Timer Card with Unfolded Scramble Net](https://anilcancakir.com/tr/wind_kit/snippets/h5no98vi/index.md): A Flutter speedcube timer card for puzzle and hobby apps: an unfolded cube net showing the exact state of a 20-move scramble in WCA notation, the last five solves with dropped times, best, average-of-five and solve count tiles and a start-inspection action. Built with wind_kit.
- [Flutter Git Commit Graph Card with Branch Lanes and Merge Lines](https://anilcancakir.com/tr/wind_kit/snippets/nba8m7px/index.md): A commit history card for developer tools and Git clients, built with Wind in Flutter. Colour-coded lanes for main, a feature branch and a hotfix fork and merge with right-angle connectors, commit rows carry branch, tag and HEAD chips, and an ahead/behind summary sits above a rebase action.
- [Flutter Eye Test Card with Snellen Acuity Chart](https://anilcancakir.com/tr/wind_kit/snippets/62rvhp9o/index.md): A vision check card for health and optician apps, built with Wind in Flutter. A real Snellen letter chart shrinks line by line from 20/200 to 20/15, the 20/20 line is highlighted as the last line read, and acuity tiles summarise each eye above a book-an-exam action.
- [Flutter Time Zone Meeting Planner Card with Work Hour Tracks](https://anilcancakir.com/tr/wind_kit/snippets/w0l32yru/index.md): A meeting planner card for Flutter team apps, built with Wind: one 24 hour UTC track per city showing work, awake and asleep hours, a highlighted best slot column, local times with an after hours flag, a legend and an invite button. Every block is computed from the real September UTC offsets.
- [Flutter Bookshelf Card with Book Spine Shelves and Reading Goal](https://anilcancakir.com/tr/wind_kit/snippets/ogowuhrs/index.md): A reading tracker card for Flutter book apps, built with Wind: two wooden shelves of book spines in varied heights, colours and foil bands, a flat stack, a bookmark ribbon on the current read, a reading challenge badge and a page progress bar. The spine counts match the goal it reports.
- [Flutter Bubble Level Card with Bullseye and Tilt Vials](https://anilcancakir.com/tr/wind_kit/snippets/dsdf518u/index.md): A spirit level card for Flutter tool apps, built with Wind: a bullseye vial with target rings and crosshair, vertical and horizontal tube vials with tolerance marks, a big total tilt readout, roll and pitch tiles and a set reference button. Every bubble sits where the stated tilt puts it.
- [Flutter Chess Puzzle Card with Mate in Two Board](https://anilcancakir.com/tr/wind_kit/snippets/i7o9xz8y/index.md): A daily chess puzzle card for Flutter apps, built with Wind: a full 8x8 board with coordinates, Unicode pieces, a highlighted last move, a mate in two badge, solve stats and a hint button. The position is a real puzzle with exactly one winning first move.
- [Flutter Word Game Card with Letter Tile Rack and Premium Squares](https://anilcancakir.com/tr/wind_kit/snippets/rbtt5n0e/index.md): A Flutter word game card for word duel apps: a live board row with triple word, double word and letter premium squares, a scoring play on the pink double word and a seven-tile rack with point values. Tiles and squares are plain wind_kit divs over WDynamic, no canvas, no image.
- [Flutter Restaurant Floor Plan Card with Table Occupancy Status](https://anilcancakir.com/tr/wind_kit/snippets/4gbz6a5u/index.md): A Flutter restaurant floor plan card for host stand apps: round tops, banquette booths, a communal eight-top and a bar with stools, each table coloured free, seated or held. Every table is a div at a fixed pixel coordinate in wind_kit over WDynamic, no canvas, no image.
- [Flutter Typing Heatmap Card with Colour Coded QWERTY Keys](https://anilcancakir.com/tr/wind_kit/snippets/pkmys9og/index.md): A typing analytics card that draws a real staggered QWERTY layout, tinting every key by how often it was pressed, from a cold grey Z to a hot rose E. Built with Wind utility classes over WDynamic: 26 keycaps, a space bar and a five step legend, all plain divs with no canvas and no image assets.
- [Flutter Sheet Music Practice Card with Staff Notation](https://anilcancakir.com/tr/wind_kit/snippets/pueda8mu/index.md): A Flutter sheet music practice card for music learning apps: a treble staff with five lines, a clef, a 4/4 time signature and eight note heads with stems at true pitch positions, the current note highlighted. wind_kit over WDynamic with positioned divs, no canvas, no image.
- [Flutter Market Share Card with Marimekko Mosaic Columns](https://anilcancakir.com/tr/wind_kit/snippets/duzf3afn/index.md): A Flutter market share card using a Marimekko mosaic: column width shows segment size and the stack inside shows who owns it, so which brand leads which segment is visible before you read a number. Pure wind_kit flex boxes with fixed pixel sizing and dark mode pairs.
- [Flutter Starting XI Lineup Card with Pitch and Player Chips](https://anilcancakir.com/tr/wind_kit/snippets/9808dknc/index.md): A Flutter starting XI lineup card for football and matchday apps: a pitch with halfway line, penalty boxes and centre spot, all eleven players placed at fixed coordinates so any formation is a coordinate table, plus bench pills and a captain callout. wind_kit utility classes with dark mode pairs.
- [Flutter Guitar Chord Diagram Card with Barre and Finger Dots](https://anilcancakir.com/tr/wind_kit/snippets/ftg2i03m/index.md): The chord every beginner quits on, drawn properly. A real fretboard box with a thick nut, six strings, numbered finger dots and a full barre across the first fret, plus three easier voicings underneath. Every line and dot is a positioned Wind box, so there is no image asset and no charting library.
- [Flutter SLA Scorecard Card with Bullet Chart Target Markers](https://anilcancakir.com/tr/wind_kit/snippets/qsvkwoh8/index.md): A Flutter SLA scorecard card for support desk dashboards: bullet charts with qualitative bands, a thick actual-value bar and a vertical target tick, so a missed target shows at a glance instead of hiding in a percentage. Built with wind_kit utility classes, dark mode pairs, no chart package.
- [Flutter Revenue Bridge Card with Floating Waterfall Steps](https://anilcancakir.com/tr/wind_kit/snippets/olninwhj/index.md): A waterfall bridge that walks opening recurring revenue to closing through new, expansion, contraction and churn. Each step floats at its own running total with a hairline connector to the next, so the additions and the losses are readable without a chart library.
- [Flutter Punch Card Grid with Dot Size Encoded Busy Hours](https://anilcancakir.com/tr/wind_kit/snippets/8gd67wyl/index.md): A weekday by hour punch card where the dot diameter carries the value instead of a colour ramp, so the evening ridge and the weekend midday bulge read at a glance. Forty two sized dots placed on a fixed pixel lattice, pure Wind className strings.
- [Flutter Code Minimap Card with Viewport Window and Problem Markers](https://anilcancakir.com/tr/wind_kit/snippets/yij569xr/index.md): An editor file overview rendered entirely from Wind utility classes: a syntax tinted minimap of the whole file, a translucent viewport window showing where you are scrolled, and an overview ruler ticking off every error and warning below the fold.
- [Flutter Frame Profiler Card with Nested Flame Chart Layers](https://anilcancakir.com/tr/wind_kit/snippets/xaefqrmo/index.md): A performance profiler card that renders a real flame chart: nested call frames stacked by depth, a red frame budget line cutting across the stack, and the hot path picked out in amber. Built with Wind className strings, no charting package and no custom painter.
- [Flutter Battery Cell Balancing Card with Per Cell Voltage Gauges](https://anilcancakir.com/tr/wind_kit/snippets/i4rslmmv/index.md): A battery management panel that gives every cell in the pack its own vertical gauge, so a low cell and the one being bled off both stand out at a glance against the pack voltage and delta. Each gauge is a fixed height cell with a bottom anchored fill, which is the vertical twin of the classNames progress bar pattern.
- [Flutter Bowling Scoresheet Card with Frame by Frame Strike Marks](https://anilcancakir.com/tr/wind_kit/snippets/nrwmihby/index.md): A Flutter bowling scoresheet card for league apps: the real ten-frame table with two roll cells above a running total, traditional strike and spare marks and the current frame ringed in amber. Nested flex rows with fixed widths in wind_kit, no data grid widget.
- [Flutter Lap Delta Card with Diverging Sector Time Bars](https://anilcancakir.com/tr/wind_kit/snippets/3m9vclr0/index.md): A Flutter lap delta card for race telemetry apps: each mini sector is a bar that grows up when time is gained and down when it is lost, all anchored to one zero line. Flex columns with a fixed-pixel spacer in wind_kit, no chart package.
- [Flutter Box Model Inspector Card with Nested Spacing Layers](https://anilcancakir.com/tr/wind_kit/snippets/njye96dy/index.md): A DevTools style inspector panel that unpacks a single Wind className into its real geometry: nested margin, border, padding and content layers, each labelled with the utility that produced it. The whole diagram is plain WDiv nesting with Tailwind syntax classNames, no custom painter and no layout maths in Dart.
- [Flutter Lab Assay Plate Card with 24 Well Dose Grid](https://anilcancakir.com/tr/wind_kit/snippets/tbqzj9qu/index.md): A Flutter lab assay plate card for scientific apps: a real 24-well culture plate with lettered rows, a dose ladder across the columns, wells shaded from blank to the highest concentration and one excluded well ringed in amber. Circular wind_kit divs on a gap grid.
- [Flutter Borehole Log Card with Proportional Soil Strata Column](https://anilcancakir.com/tr/wind_kit/snippets/n996t42h/index.md): A Flutter borehole log card for geotechnical and ground investigation apps: soil strata as coloured bands proportional to true thickness, a shared depth rail, SPT blow counts beside each layer and the groundwater strike marked across the column. Aligned wind_kit divs, no chart package.
- [Flutter Grain Storage Card with Silo Fill Level Gauges](https://anilcancakir.com/tr/wind_kit/snippets/5d8wjhai/index.md): A Flutter grain storage card for farm monitoring apps: each bin drawn as a silo with a bottom-anchored fill level, a 90 percent overfill line across every silo and a flag on the bin that crossed it. Fixed-pixel wind_kit divs, no chart library, no custom painter.
- [Flutter Archery Scoring Card with Target Face and Arrow Groupings](https://anilcancakir.com/tr/wind_kit/snippets/qg1cnhkn/index.md): A Flutter archery scoring card for sport apps: a full World Archery target face drawn from concentric circles, the six arrows of the end plotted where they landed, with end score, arrow average and running total. Plain wind_kit className utilities, no chart package, canvas or image asset.
- [Flutter Daily Crossword Card with Blacked Out Mini Grid](https://anilcancakir.com/tr/wind_kit/snippets/w2ks687n/index.md): A Flutter daily crossword card for puzzle and word game apps: a real 5x5 mini board with symmetric black squares, clue numbers, an amber active word and cursor cell, solved words, the active clue and a resume button. wind_kit className strings only, no grid library.
- [Flutter Moon Phase Card with Carved Gibbous Disc and Night Sky Panel](https://anilcancakir.com/tr/wind_kit/snippets/pytoredh/index.md): A Flutter moon phase card for astronomy apps: a cream disc on a night sky panel, carved into a gibbous shape by a second offset disc, the eight-step phase cycle with the current phase ringed, moon age, rise and set tiles and the next full moon. Two circles, no image, built with wind_kit.
- [Flutter Audience Overlap Card with Three Circle Venn Segments](https://anilcancakir.com/tr/wind_kit/snippets/wbg92h8b/index.md): A Flutter audience overlap card for marketing and growth dashboards: three translucent circles form a real Venn diagram, so shared regions darken by themselves and each lobe shows its count, with a segment legend, reach and overlap tiles and a suppression action. wind_kit only, no chart library.
- [Flutter Hiking Trail Card with Elevation Profile and Waypoints](https://anilcancakir.com/tr/wind_kit/snippets/iuzpbcy0/index.md): A Flutter hiking trail card for outdoor, trail running and cycling apps: a 34-step elevation profile with a ridge line, markers for trailhead, summit and lake, a distance axis, trip stat tiles, a snow advisory strip and a navigation button. Built with wind_kit className strings only.
- [Flutter Domino Score Card with Pip Tile Rack](https://anilcancakir.com/tr/wind_kit/snippets/w179fb3c/index.md): A Flutter domino score card for board game and party apps: a tile rack with pip faces, the playable double highlighted, a boneyard draw tile, a head-to-head score strip with a race-to-150 bar and round stats. Absolutely positioned pips with wind_kit utility classes.
- [Flutter Tournament Bracket Card with Semi Final Matchups](https://anilcancakir.com/tr/wind_kit/snippets/r5m2ptqw/index.md): A knockout bracket card for sports and esports apps: seeded team rows with scores, losing sides dimmed, real bracket connectors drawn from side borders, the two finalists aligned to each pair and a dark final strip with kickoff time and venue. Built with Wind utility classes and complete dark mode pairs.
- [Flutter Metro Line Card with Station Route Map and Live Train](https://anilcancakir.com/tr/wind_kit/snippets/5m4djel2/index.md): A Flutter metro line card for journey planning apps: route map with station markers, a bend into the return leg, a live train between two stops, service status, headline stats and next departures. Absolute positioning with wind_kit utility classes, no map SDK, no canvas.
- [Flutter Glucose Monitor Card with Continuous Trend Line](https://anilcancakir.com/tr/wind_kit/snippets/88pvb18u/index.md): A continuous glucose monitoring card for health and wearable apps: a 24 hour dot trend line plotted over a shaded target range, amber markers on every reading above 180 mg/dL, time in range and average tiles, and a spike callout. Built with Wind utility classes, complete dark mode pairs and no charting package.
- [Flutter Portfolio Allocation Card with Weighted Treemap Tiles](https://anilcancakir.com/tr/wind_kit/snippets/kaf2r7pn/index.md): A holdings breakdown where every tile is sized by its share of the portfolio, so the biggest position is literally the biggest rectangle. Nine positions tile edge to edge across three weighted rows, with asset class totals below and a drift warning strip. Each tile is a fixed size Wind div, no chart library involved.
- [Flutter Class Schedule Card with Time Blocked Day Columns](https://anilcancakir.com/tr/wind_kit/snippets/70bm5dd0/index.md): A Flutter weekly class schedule card with time on the vertical axis: five day columns, class blocks sized by start time and duration, colour-coded types with a legend, an hour axis and a next-class strip with spots left. Pure wind_kit className layout, no charting package.
- [Flutter Piano Chord Trainer Card with Highlighted Keys](https://anilcancakir.com/tr/wind_kit/snippets/ntgr04uh/index.md): A Flutter piano chord trainer card for music lesson apps: ten white keys, seven absolutely positioned black keys, chord notes highlighted, root, third, fifth and seventh tiles and a weekly accuracy stat. Every key is a wind_kit styled div, no custom painter.
- [Flutter Focus Timer Card with Radial Minute Dial](https://anilcancakir.com/tr/wind_kit/snippets/4k75omx0/index.md): A deep-work session card that turns the remaining minutes into a ring of 25 dots, one per minute, with the countdown in the middle. Round pills track the pomodoro cycle and two tiles summarise focused time and streak. Built with Wind className utilities, so the whole dial is plain divs.
- [Flutter A/B Test Results Card with Mirrored Variant Bars](https://anilcancakir.com/tr/wind_kit/snippets/bpvogy4x/index.md): An experiment readout where control and variant grow away from a shared centre axis, one metric per row, so which side wins is obvious before you read a single number. Ends with the projected revenue lift and a ship decision.
- [Flutter Feature Prioritization Card with Impact Effort Quadrant Plot](https://anilcancakir.com/tr/wind_kit/snippets/4t6v7yyf/index.md): A roadmap card that plots ten candidate features on an impact versus effort field, split into quick wins, big bets, fill ins and time sinks. Each dot is placed at a real pixel offset, so the quadrant a feature lands in is the recommendation.
- [Flutter Conversion Funnel Card with Narrowing Stage Bars](https://anilcancakir.com/tr/wind_kit/snippets/g4anwjin/index.md): A checkout funnel card where each stage is a centred bar scaled to its true share of traffic, so the drop off is visible as a shape rather than a number. Between the bars sit the exact losses, and the footer calls out the biggest leak in the flow.
- [Flutter Trading Chart Card with Candlestick Session Range](https://anilcancakir.com/tr/wind_kit/snippets/39x5kynf/index.md): An intraday trading card that pairs a 14 bar candlestick chart with its volume histogram, a price axis, and the session open, high, low, and volume figures. Every wick and body is a plain Wind div, so the whole chart renders without a charting library.
- [Flutter Sprint Board Card with Kanban Status Columns](https://anilcancakir.com/tr/wind_kit/snippets/r2i4ni52/index.md): A kanban board squeezed into one card: three status columns side by side, each holding its own stack of task tiles, so the uneven column heights show where the work is piling up. Label chips, assignee avatars, struck-through done items and a WIP limit footer, all in Wind className strings.
- [Flutter Sprint Timeline Card with Offset Gantt Task Bars](https://anilcancakir.com/tr/wind_kit/snippets/wtzd063g/index.md): A project schedule card where each task bar starts on a different day and runs a different length against one shared date axis, so overlap and slack are visible without a chart library. Five staggered bars plus a release milestone marker, positioned with fixed-pixel spacers inside a Wind row.
- [Flutter Beat Sequencer Card with 16 Step Track Grid](https://anilcancakir.com/tr/wind_kit/snippets/m7567nqg/index.md): A drum machine pattern grid where instrument tracks run down the left and 16 steps run across the top, so every cell is a step you can read at a glance. Six tracks, downbeat markers on 1, 5, 9 and 13, and a transport button, all built from fixed-size Wind divs.
- [Flutter Family Tree Card with Generation Branch Connectors](https://anilcancakir.com/tr/wind_kit/snippets/s34izqgn/index.md): A Flutter family tree card that draws three generations as a real pedigree: spouse pairs joined by marriage bars, drop lines and branching connectors into each child. Every connector is a fixed-pixel wind_kit div, so the tree is className strings only, no custom painter or canvas.
- [Flutter Purchase Order Card with Indented BOM Tree](https://anilcancakir.com/tr/wind_kit/snippets/9pgshqgq/index.md): A procurement card whose body is a real three-level bill of materials: parent assemblies, indented children, and connector rules drawn with left borders, each line carrying its quantity pill and rolled-up cost. Flags the short-stock part and totals at the foot, styled with Wind utility classes and full dark-mode pairs.
- [Flutter Benefits Enrollment Card with Side by Side Plan Comparison](https://anilcancakir.com/tr/wind_kit/snippets/2qfm6rzg/index.md): An open-enrollment card that puts two health plans in matched columns so premium, deductible, out-of-pocket max, and HSA match scan straight across, with the recommended plan outlined and badged. Closes on the yearly saving, styled with Wind utility classes and full dark-mode pairs.
- [Flutter Beehive Inspection Card with Stacked Box Layers](https://anilcancakir.com/tr/wind_kit/snippets/cbe2n28y/index.md): A hive record card built as the hive itself: outer cover, honey supers, queen excluder, brood box, and bottom board rendered as overlapping layers, each carrying its own frame count and status pill. Negative margins do the stacking, styled with Wind utility classes and full dark-mode pairs.
- [Flutter Dental Chart Card with FDI Tooth Grid](https://anilcancakir.com/tr/wind_kit/snippets/ibn4k6l1/index.md): An odontogram card where position is the data: two arches of numbered tooth tiles in FDI notation, colour-coded for crowns, caries, and missing teeth, split by a midline. A legend and a finding note carry the diagnosis, styled with Wind utility classes and full dark-mode pairs.
- [Flutter Hiring Pipeline Card with Segmented Stage Band](https://anilcancakir.com/tr/wind_kit/snippets/066wxscq/index.md): A recruiter-facing requisition card whose hero is one segmented band, each stage sized to its candidate count with the number set inside it. Pairs a color legend with the candidates who moved today and an offers CTA, styled with Wind utility classes and full dark-mode pairs.
- [Flutter eSIM Data Plan Card with Segmented Block Meters](https://anilcancakir.com/tr/wind_kit/snippets/xvqp0azx/index.md): A mobile plan usage card that trades the usual continuous progress bar for discrete lit blocks, so data, minutes, and texts can be read at a glance. Adds a burn-rate warning, a roaming row, and a top-up CTA, all styled with Wind utility classes and full dark-mode pairs.
- [Flutter Veterinary Health Card with Vitals Tiles and Vaccination Chips](https://anilcancakir.com/tr/wind_kit/snippets/m3aqs435/index.md): A pet health record card that pairs three vitals tiles with a wrapped row of vaccination chips, so an overdue booster stands out against the ones already cleared. Includes the next appointment and a booking CTA, built with Wind utility classes and full dark-mode pairs.
- [Flutter Lab Results Card with Flagged Reference Ranges](https://anilcancakir.com/tr/wind_kit/snippets/bn80a8nd/index.md): A clinical lab report card that sets every analyte next to its reference range, outlines the out-of-range results in amber and rose, and marks the normal ones with a quiet check. Includes a trend note and a provider CTA, styled end to end with Wind utility classes and full dark-mode pairs.
- [Flutter Grocery List Card with Quantity Pills and Running Total](https://anilcancakir.com/tr/wind_kit/snippets/crq7r5wc/index.md): A shared shopping list where checked items strike through, each row carries a quantity pill and a price, and the footer tracks the running total against the weekly budget. Wind line-through and pill utilities, no state package required.
- [Flutter Tire Pressure Card with Four Corner Wheel Readout](https://anilcancakir.com/tr/wind_kit/snippets/cvklpk12/index.md): A TPMS panel that maps live psi onto the car itself: four corner tiles around a center chassis, the low tire flagged in amber with the exact top up amount, plus recommended pressure, tire temperature, and the nearest air pump.
- [Flutter Video Call Card with Participant Tile Grid](https://anilcancakir.com/tr/wind_kit/snippets/54cewudj/index.md): A live meeting panel with a six tile participant grid, an active speaker ring, per person mute and camera state, connection stats, and a round control bar. Pure Wind className layout, no video plugin needed for the design pass.
- [Flutter Password Strength Card with Requirement Checklist](https://anilcancakir.com/tr/wind_kit/snippets/ia2f77by/index.md): A sign-up password step that scores strength on a four segment meter, ticks off each requirement live, and confirms the password is not in a known breach list. Built with Wind className utilities and a real WInput field.
- [Flutter Insurance Claim Status Card with Payout Breakdown](https://anilcancakir.com/tr/wind_kit/snippets/o4o597uy/index.md): A Flutter insurance claim tracker for insurtech apps: four-stage stepper from filed to paid, estimated payout, a two-tone bar splitting covered amount and deductible, assigned adjuster and a document shortcut. Stepper built from fixed-width columns in wind_kit, no stack or painter.
- [Flutter Crop Field Health Card with Soil Moisture Zones](https://anilcancakir.com/tr/wind_kit/snippets/rw98lse2/index.md): A Flutter crop field health card for precision agriculture apps: NDVI canopy score with weekly delta, four zones with soil moisture bars (dry, optimal, wet), weather and harvest stats and the next irrigation window. Bars sized in pixels on one shared scale with wind_kit.
- [Flutter Factory Andon Board Card with Line Station Status](https://anilcancakir.com/tr/wind_kit/snippets/zol9w0zu/index.md): A Flutter Andon board for factory and industrial operations apps: shift output against target, OEE badge, five station rows coded running, idle or stopped, cycle times and total downtime. Status colours on square station tiles, built with wind_kit utility classes.
- [Flutter Mixing Console Card with Channel Strip Level Meters](https://anilcancakir.com/tr/wind_kit/snippets/5bsmyn06/index.md): A Flutter audio mixer card for music production apps: six vertical channel meters with peak and clip zones, dB readouts, mute and solo pills and a master bus meter with a no-clipping badge. Vertical meters from a fixed-height track and bottom-aligned fill in wind_kit, no custom painter.
- [Flutter Team Fixture List Card with Result Badges and Form Strip](https://anilcancakir.com/tr/wind_kit/snippets/ejaaygzw/index.md): A football club fixture card that splits played matches from upcoming ones: paired team initial avatars, scores with win, draw and loss badges, a highlighted next match, and a last-five form strip of coloured result tiles. Demonstrates overlapping avatars with ring borders, section labels and grouped rows in Wind.
- [Flutter Transit Departure Board Card with Live Line Times](https://anilcancakir.com/tr/wind_kit/snippets/b56s0w2g/index.md): A live departure board for a transit stop: coloured line-number tiles, destination rows with on time and delayed states, countdown times, a last-updated footnote and a route planner action. A good example of Wind rows that pair a fixed square badge with a two-line label and a right-aligned value.
- [Flutter VPN Connection Status Card with Server and Speed Stats](https://anilcancakir.com/tr/wind_kit/snippets/y4qg19mu/index.md): A VPN client status card with a large protected state badge, the active server and its latency, protocol and kill switch rows in a soft inner panel, session and throughput stats, plus a disconnect action. Shows how Wind handles centred column layouts, nested panels and dark-mode inverted buttons.
- [Flutter Cloud Storage Quota Card with Category Breakdown Bar](https://anilcancakir.com/tr/wind_kit/snippets/qkujfjxa/index.md): A Flutter cloud storage card that splits a 15 GB plan into photos, videos, documents and app backups: segmented capacity bar, legend rows with size and share, billing footnote and an upgrade button. Built with wind_kit utility classes, fixed-width segments and dark mode pairs.
- [Flutter Festival Lineup Card with Set Times and Stages](https://anilcancakir.com/tr/wind_kit/snippets/ch95njf3/index.md): A Flutter festival lineup card for music and event apps: gradient stage-art header, set-times list with a starred headliner, per-act time pills, coloured stage tags, a venue row and a get-passes button. Built with wind_kit className utilities and dark mode pairs.
- [Flutter Invoice Payment Due Card with Line Items and Total](https://anilcancakir.com/tr/wind_kit/snippets/fi20u2za/index.md): A Flutter invoice card for freelance and B2B billing apps: invoice number, due-date badge, itemised line rows with quantity and rate, subtotal, tax and an emphasised total above a pay button. Built with wind_kit className utilities and dark mode pairs.
- [Flutter Medication Schedule Card with Dose Reminders](https://anilcancakir.com/tr/wind_kit/snippets/9f05yr3c/index.md): A Flutter medication reminder card for health apps: adherence progress bar, taken-count chip and per-drug rows with a category dot, dose and a taken, missed or upcoming state, plus a log-dose button. Built with wind_kit className utilities and dark mode pairs.
- [Flutter CI/CD Deploy Pipeline Status Card with Stage Progress](https://anilcancakir.com/tr/wind_kit/snippets/u30it7f6/index.md): A Flutter CI/CD pipeline card for devops dashboards: branch and commit header, running status pill, segmented stage progress bar and build, test, deploy and approve rows with status icons and durations. Built with wind_kit className utilities and dark mode pairs.
- [Flutter API Key Usage and Rate Limit Card for Developer Tools](https://anilcancakir.com/tr/wind_kit/snippets/3ncv48ey/index.md): A Flutter API key usage card for developer tools: masked key with a copy action, plan badge, monthly request quota bar, 200 OK and 429 rate-limited endpoint chips, a reset countdown and a manage-keys button. Built with wind_kit className utilities and dark mode pairs.
- [Flutter NFT Collectible Bid Card with Live Auction](https://anilcancakir.com/tr/wind_kit/snippets/v7etcr7j/index.md): A Flutter NFT auction card for web3 marketplace apps: gradient artwork, verified collection name, favourites count, current owner and a bid panel with the current bid in ETH and a live countdown above the place-a-bid button. Built with wind_kit className utilities and dark mode pairs.
- [Flutter Cinema Seat Selection Card with Screen and Legend](https://anilcancakir.com/tr/wind_kit/snippets/92p5cfdu/index.md): A movie theater seat picker built with Wind for Flutter: a screen indicator bar, a color-coded seat grid (available, selected, taken), a state legend, and a live seat and price summary above a booking button. A pre-purchase seat map layout using Tailwind-style className utilities with dark-mode pairs.
- [Flutter Cafe Loyalty Stamp Card with Reward Progress](https://anilcancakir.com/tr/wind_kit/snippets/4aujyw80/index.md): A digital coffee-shop loyalty card built with Wind for Flutter: a fill-the-grid stamp collection, a stamps-earned counter chip, and a redeem call to action. Shows how to build retail rewards UI with Tailwind-style className utilities and dark-mode-ready color pairs.
- [Flutter Habit Streak Card with Contribution Heatmap Grid](https://anilcancakir.com/tr/wind_kit/snippets/lvu7n0y5/index.md): A habit tracker card built with Wind: a flame streak counter, a contribution-style heatmap grid with four intensity shades across five weeks, and a Less-to-More legend. Dark-mode ready.
- [Flutter Ride Fare Receipt Card with Fare Breakdown](https://anilcancakir.com/tr/wind_kit/snippets/y66av31g/index.md): A ride-hailing fare receipt built with Wind: a completed-trip header, a driver row with star rating, pickup and dropoff stops, an itemized fare breakdown for base, distance, time, booking fee, and tip, a bold total, and the payment method. Dark-mode ready.
- [Flutter Year in Review Recap Card with Top Artists](https://anilcancakir.com/tr/wind_kit/snippets/0ss2imul/index.md): A bold year-in-review recap card built with Wind: a violet-to-fuchsia gradient, an oversized minutes-listened stat, a ranked top-artists list with proportional progress bars, and a top-genre plus listening-rank footer. Dark-mode ready.
- [Flutter Boarding Pass Card with Perforated Stub and Barcode](https://anilcancakir.com/tr/wind_kit/snippets/ni0en9jc/index.md): A polished airline boarding pass built with Wind: an indigo header with the SFO to NRT route and flight code, a perforated dotted tear line, a passenger plus gate, seat, and boarding key-value grid, and a scannable barcode strip. Dark-mode ready.
- [Flutter Subscription Management Card with Usage Meter](https://anilcancakir.com/tr/wind_kit/snippets/2p8mw3jc/index.md): A subscription management card showing the current plan, monthly price, renewal date, an API usage meter, and a manage action. Clean Wind styling with complete dark-mode pairs.
- [Flutter Real Estate Property Listing Card with Photo Header](https://anilcancakir.com/tr/wind_kit/snippets/vc9su8ho/index.md): A real estate property listing card with a gradient photo header, price overlay, location, beds, baths, and area stats, plus a details call to action. Responsive Wind layout with dark mode.
- [Flutter EV Charging Status Card with Battery Progress](https://anilcancakir.com/tr/wind_kit/snippets/g7v9zev9/index.md): An EV charging status card showing battery percentage, a gradient progress bar, energy added, time remaining, and session cost, with a stop-charging action. Wind-styled with dark-mode support.
- [Flutter Meditation Session Card with Streak and Weekly Goal](https://anilcancakir.com/tr/wind_kit/snippets/hkf0rbdp/index.md): A calming daily meditation card with a gradient backdrop, guided session details, a streak badge, and a weekly goal progress bar. Built with Wind utility classes and complete dark-mode pairs.
- [Flutter Monthly Budget Card with Category Spending Bars](https://anilcancakir.com/tr/wind_kit/snippets/kjuw688i/index.md): A personal-finance budget card built with Wind: a remaining-balance hero with an overall progress bar, plus per-category spending rows (food, transport, shopping, bills) with icon chips and linear progress bars that turn red when a category is over budget. Dark-mode ready.
- [Flutter Restaurant Menu Dish Card with Price and Rating](https://anilcancakir.com/tr/wind_kit/snippets/ulanajw0/index.md): A food-delivery menu item card built with Wind: a gradient dish header with a popular badge and favorite toggle, star rating, dish description, dietary tags, price, and an add-to-cart button. Dark-mode ready.
- [Flutter Currency Converter Card with Live Exchange Rate](https://anilcancakir.com/tr/wind_kit/snippets/l7shiz42/index.md): A currency exchange card built with Wind: stacked send and receive amount blocks with currency chips, a convert-flow badge, a live exchange rate with a trend indicator, and a full-width action button. Dark-mode ready.
- [Flutter Poll Results Card with Vote Percentage Bars](https://anilcancakir.com/tr/wind_kit/snippets/6uyybz5m/index.md): A live poll results card built with Wind: a question header, ranked answer options each with a horizontal percentage fill bar, a highlighted winning choice, and a vote-count footer. Pure linear bars, no charts, dark-mode ready.
- [Flutter Code Snippet Card with Syntax Colors and Copy](https://anilcancakir.com/tr/wind_kit/snippets/jn6mhq95/index.md): A syntax highlighted code snippet card with a window title bar, a language tag, and a copy button, composed from Wind utility classes. The sample is Wind itself: a className string over a nested widget tree.
- [Flutter Voice Message Bubble with Waveform Player](https://anilcancakir.com/tr/wind_kit/snippets/gfubygsy/index.md): A chat voice message bubble built with Wind utility classes: a sender avatar, a two tone waveform that shows playback progress, a play control, and the clip duration. Dark mode pairs are included on every color token.
- [Flutter Calendar Month View with Event Dots](https://anilcancakir.com/tr/wind_kit/snippets/oxzfth11/index.md): A month calendar view in pure Wind className strings: a weekday header, a seven column day grid, today highlighted, and colored event dots. Every color carries its dark pair.
- [Flutter Color Palette Swatch Card with Shade Scale](https://anilcancakir.com/tr/wind_kit/snippets/u2lkyh7e/index.md): A color palette card showing four Wind color families across five shades each, the utility-first token scale at a glance. Built entirely from Wind className strings with dark mode built in.
- [Flutter Progress Stepper Wizard with Plan Selection](https://anilcancakir.com/tr/wind_kit/snippets/lt6lx85c/index.md): A multi-step wizard header with a connected step rail (completed, active, and upcoming states) over a plan selection step and a continue button, all composed from Wind utility classes.
- [Flutter Team Members Grid with Role Badges](https://anilcancakir.com/tr/wind_kit/snippets/xr9hf5l1/index.md): A team roster grid with gradient initial avatars, online status dots, and color coded role badges, composed entirely from Wind utility classes with dark mode built in.
- [Flutter Onboarding Slide with Feature Highlight and Page Dots](https://anilcancakir.com/tr/wind_kit/snippets/82t89luz/index.md): A polished onboarding slide built with Wind utility classes: a gradient feature icon, a bold headline, supporting copy, page indicator dots, and a full-width call to action. Dark mode pairs are included on every color token.
- [Flutter Referral Reward Card with Invite Link and Tiers](https://anilcancakir.com/tr/wind_kit/snippets/cuqlb833/index.md): A referral rewards card written in pure Wind className strings: progress toward the next reward, unlocked and locked tiers, earnings to date, and a copyable invite link. Every color carries its dark pair.
- [Flutter AI Prompt Composer Card with Quick Actions](https://anilcancakir.com/tr/wind_kit/snippets/x303izyx/index.md): An AI assistant prompt composer card with a model badge, a streaming response preview, quick-action chips, and a prompt input with a generate button. A marketing-ready AI chat UI built with Wind utility classes and full dark-mode pairing.
- [Flutter Smart Home Device Control Card with Toggles](https://anilcancakir.com/tr/wind_kit/snippets/pi3fp7uo/index.md): A smart home control card listing room devices with colored icon tiles, status labels, and on/off toggle switches. Built with Wind utility classes and dark-mode pairs.
- [Flutter Fundraising Donation Progress Card with Donors](https://anilcancakir.com/tr/wind_kit/snippets/4wmtdrtn/index.md): A fundraising campaign card with a goal progress bar, overlapping donor avatars, donor count, and a donate call-to-action. A marketing-ready donation UI using Wind utility classes.
- [Flutter File Upload Card with Progress Bars](https://anilcancakir.com/tr/wind_kit/snippets/96rahaa8/index.md): A file upload card with a drag-and-drop zone and per-file progress bars showing uploading and completed states. Styled with Tailwind-style Wind classes and dark-mode support.
- [Flutter Messages Inbox List with Unread Badges](https://anilcancakir.com/tr/wind_kit/snippets/vf79gc25/index.md): A messaging inbox list with gradient avatars, last-message previews, timestamps, and unread count badges. Built with Wind utility classes and full dark-mode pairing.
- [Flutter Discount Voucher Card with Promo Code](https://anilcancakir.com/tr/wind_kit/snippets/63syvjv7/index.md): A bold discount voucher card with a gradient background, promo code block, copy action, and a call-to-action button. A marketing-ready coupon UI using Wind utility classes.
- [Flutter Component Search Card with Live Suggestions](https://anilcancakir.com/tr/wind_kit/snippets/awb8b1ng/index.md): A component search card built on the real WInput widget, with a focused search field and a categorized suggestion list. Demonstrates Wind form inputs with icon tiles and dark-mode pairs.
- [Flutter Quiz Multiple Choice Question Card with Progress](https://anilcancakir.com/tr/wind_kit/snippets/de2qeo12/index.md): An interactive quiz question card with a progress bar, lettered multiple-choice options, a highlighted selected answer, and a submit button. Styled entirely with Tailwind-style Wind classes and dark-mode support.
- [Flutter Crypto Portfolio Balance Card with Coin Holdings](https://anilcancakir.com/tr/wind_kit/snippets/4ms9weh5/index.md): A clean crypto portfolio card showing total balance, daily change, and per-coin holdings with gradient token avatars and color-coded price deltas. Built with Wind utility classes and full dark-mode pairing.
- [Flutter FAQ Accordion Card with Expandable Answers](https://anilcancakir.com/tr/wind_kit/snippets/x3cfljik/index.md): A frequently asked questions accordion: the first item is expanded with its answer and a down chevron, while the rest stay collapsed with a forward chevron. A clean support and help-center pattern built with Wind utility classes and dark-mode pairing.
- [Flutter Contact Form Card with Name, Email, and Message](https://anilcancakir.com/tr/wind_kit/snippets/mseple01/index.md): A get-in-touch form built from real WInput fields: a labeled name field, an email field, and a multiline message area, finished with a full-width send button. Shows Wind's text input across single-line and multiline types, no MaterialApp required, with full dark-mode pairing.
- [Flutter Cookie Consent Privacy Banner](https://anilcancakir.com/tr/wind_kit/snippets/ooc15vcs/index.md): A privacy and cookie consent banner for web and mobile: an icon header, a plain-language explanation, an always-on essentials note, and a clear action hierarchy of accept, customize, and reject. A reusable compliance pattern composed from Wind className strings with dark-mode pairs.
- [Flutter Newsletter Subscribe Card with Email Input](https://anilcancakir.com/tr/wind_kit/snippets/em0qmhjf/index.md): An email capture card for marketing sites and product pages: a gradient icon badge, a headline and reassurance copy, a real WInput email field (Wind's text input that works without a MaterialApp), a full-width subscribe button, and a social-proof footer. Dark-mode ready and styled entirely with Wind className strings.
- [Flutter Sign In Card with Social Login](https://anilcancakir.com/tr/wind_kit/snippets/3wiewj02/index.md): A Flutter sign-in card with email and password fields, a forgot-password link, a primary sign-in button and a Google social login below an or-continue divider. Built with wind_kit WInput, which works without a MaterialApp, styled by className strings with dark mode included.
- [Flutter Game Leaderboard Card with Rank Medals and Your Position](https://anilcancakir.com/tr/wind_kit/snippets/025tuylk/index.md): A weekly leaderboard for games and social apps: gold, silver, and bronze rank medals, gradient initial avatars, points per player, and a highlighted row pinning the current user with their movement. Composed entirely from Wind className strings with dark-mode pairs.
- [Flutter Appointment Booking Card with Date and Time Slots](https://anilcancakir.com/tr/wind_kit/snippets/otve8l28/index.md): A scheduling card for services and healthcare: a provider header with rating, a horizontal date selector, a wrapping grid of time slots with selected and booked states, and a confirm button echoing the chosen slot. Pure Wind utility styling, dark-mode ready.
- [Flutter Streaming Movie Card with Rating and Genre Tags](https://anilcancakir.com/tr/wind_kit/snippets/bz1u1a48/index.md): A cinematic detail card for a streaming or movie app: a gradient poster with a centered play affordance, rating and 4K HDR badges, genre tags, a two-line synopsis, and stacked Play and Add to My List actions. Built with Wind utility classes and full dark-mode pairing.
- [Flutter Home Energy Usage Panel with Room Breakdown](https://anilcancakir.com/tr/wind_kit/snippets/1xy005nh/index.md): A smart-home energy dashboard with today's total kWh, a savings trend badge, and per-room consumption bars. Built for home automation and utility apps.
- [Flutter Reading Progress Card with Chapter Tracker](https://anilcancakir.com/tr/wind_kit/snippets/isf5zwsw/index.md): A reading companion card with book cover, genre tag, chapter progress bar, time-left estimate, rating, and a continue-reading action. Ideal for ebook, audiobook, and learning apps.
- [Flutter Trip Itinerary Day Card with Booking Codes](https://anilcancakir.com/tr/wind_kit/snippets/pas5m5vb/index.md): A daily travel itinerary card listing timed stops with category icons, confirmation codes, and booking status badges. Great for trip planners and travel concierge apps.
- [Flutter Bill Split Summary Card with Per-Person Shares](https://anilcancakir.com/tr/wind_kit/snippets/665kn94h/index.md): A group expense card showing the total bill, each person's share with avatar initials, settled and pending states, and how much you're owed. Perfect for fintech and social payment apps.
- [Flutter Job Listing Card with Tags and Salary](https://anilcancakir.com/tr/wind_kit/snippets/09zvwmfh/index.md): A job listing card with a gradient company logo, role title, location row, colored employment tags, and a salary range beside an Apply call to action. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Recipe Card with Cook Time and Difficulty](https://anilcancakir.com/tr/wind_kit/snippets/n5itjth8/index.md): A recipe card with a warm gradient cover, rating and saved badges, dish title and description, and meta chips for cook time, servings, and difficulty above a Cook now call to action. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Live Sports Score Card](https://anilcancakir.com/tr/wind_kit/snippets/4ehnwhzp/index.md): A live match score card with a league label, pulsing-style LIVE badge, two team rows with colored crest initials and bold scores, and a match-status footer. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Virtual Payment Card with Balance Summary](https://anilcancakir.com/tr/wind_kit/snippets/ylxz5wzo/index.md): A premium gradient virtual payment card with an EMV chip, masked card number, cardholder details, and a balance summary row with a live trend badge. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Place Preview Card with Gradient Map Header](https://anilcancakir.com/tr/wind_kit/snippets/7a55q86x/index.md): A venue preview card with a gradient map header and location pin, a rating and distance row, a category badge, and open-now and Wi-Fi attribute pills. Built with Wind's Tailwind-style className and full dark-mode support.
- [Flutter Notification Center Stack Panel](https://anilcancakir.com/tr/wind_kit/snippets/rn4tq3a6/index.md): A grouped notification center panel with colored icon containers, sender and message previews, timestamps, unread dots, and a mark-all-read action. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Nutrition Facts Card with Macro Breakdown](https://anilcancakir.com/tr/wind_kit/snippets/ak8lbjz0/index.md): A meal nutrition card showing total calories against a daily goal, protein/carbs/fat macro bars, and a micronutrient breakdown with percentage badges. Built with Wind's Tailwind-style className strings and full dark-mode pairs.
- [Flutter Kanban Task Card with Subtask Progress](https://anilcancakir.com/tr/wind_kit/snippets/nvbggdlh/index.md): A project task card in an in-progress state with a priority badge, labelled tags, a subtask progress bar, an assignee avatar cluster, and a due-date chip. Built with Wind utility classes and full dark-mode pairs.
- [Flutter Course Lesson Progress Card](https://anilcancakir.com/tr/wind_kit/snippets/9hpqb9ix/index.md): A vibrant gradient e-learning card with a category pill, course title, a lesson progress bar, and XP, time-left, and completed chips, capped with a continue-learning call to action. Built with Tailwind-style className utilities in Flutter.
- [Flutter Air Quality Index Panel for Smart Home](https://anilcancakir.com/tr/wind_kit/snippets/woahk2jo/index.md): A dark smart-home panel with a bold air quality index, a color-coded status pill, a teal-to-red gradient scale with a position marker, and humidity, CO2, and temperature sensor chips. Built with Tailwind-style className utilities in Flutter.
- [Flutter Sleep Score Panel with Stage Breakdown](https://anilcancakir.com/tr/wind_kit/snippets/9cr90t3j/index.md): A dark health panel led by a bold sleep score, with a segmented sleep-stage bar (light, deep, REM), a color-coded legend, and total-sleep and restfulness chips. A clean recovery-tracking pattern built with Tailwind-style className utilities in Flutter.
- [Flutter Stock Watchlist Card with Live Price Deltas](https://anilcancakir.com/tr/wind_kit/snippets/z60b2rsy/index.md): A dark fintech watchlist card with a bold portfolio value, a daily-change indicator, and a list of ticker rows showing price and color-coded percent deltas in green and red pills. Built with Tailwind-style className utilities in Flutter.
- [Flutter Event Ticket Card](https://anilcancakir.com/tr/wind_kit/snippets/zqpghs4s/index.md): A vibrant gradient event ticket with the headline act, venue and date, a perforated divider, seat metadata, and a barcode strip for scan-in. An entertainment pattern built with Tailwind-style className utilities in Flutter.
- [Flutter Language Learning Flashcard](https://anilcancakir.com/tr/wind_kit/snippets/uksz8ck9/index.md): A clean vocabulary flashcard with a language badge, XP reward, the target word with its phonetic spelling, a translation row with an audio control, and review actions. An e-learning pattern built with Tailwind-style className utilities in Flutter.
- [Flutter Habit Streak Tracker Card](https://anilcancakir.com/tr/wind_kit/snippets/ydavund4/index.md): A warm gradient habit card that gamifies a daily routine with a bold streak count, a seven-day completion dot row, and a one-tap log action. A health and productivity pattern built with Tailwind-style className utilities in Flutter.
- [Flutter Loyalty Rewards Card with Tier Progress](https://anilcancakir.com/tr/wind_kit/snippets/1cts3w2w/index.md): A dark gradient loyalty card that surfaces a points balance, membership tier badge, and a progress bar toward the next reward level, paired with quick Redeem and History actions. A clean fintech and retail pattern built with Tailwind-style className utilities in Flutter.
- [Flutter AI Assistant Chat Bubble Card](https://anilcancakir.com/tr/wind_kit/snippets/zbq0tz28/index.md): A glassmorphic AI assistant chat card with an avatar header, an online status dot, a response bubble wrapping an inset code block, a typing indicator, and suggestion chips. Built with Wind UI utility classes and dark mode pairs.
- [Flutter Order Delivery Status Timeline Card](https://anilcancakir.com/tr/wind_kit/snippets/43mhs70j/index.md): A vertical order-tracking timeline with completed check nodes, an active out-for-delivery step, a pending delivery node, connecting lines, and an arrival ETA chip. Built with Wind UI utility classes and dark mode pairs.
- [Flutter OTP Verification PIN Entry Card](https://anilcancakir.com/tr/wind_kit/snippets/h8w4i6ai/index.md): A one-time-code verification card with a six-cell PIN entry row, a focused cell showing a caret and ring glow, a resend countdown, and a primary verify action. Built with Wind UI utility classes and dark mode pairs.
- [Flutter Flash Sale Countdown Timer Card](https://anilcancakir.com/tr/wind_kit/snippets/196x9sfu/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/63ygefgd/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/nt4rbedt/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/78hfr0re/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/ujfa333h/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/vcii2hhr/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/k328vn52/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/29xwevp8/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/176415aa/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/i8obc27p/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/fpfrjoj4/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/7mykcx85/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/eghd0soj/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/5c1rhs0f/index.md): 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 Success Toast Notification](https://anilcancakir.com/tr/wind_kit/snippets/6hiwsgqh/index.md): 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 Testimonial Card with Star Rating](https://anilcancakir.com/tr/wind_kit/snippets/dlb33h5e/index.md): 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 Settings List with Icon Rows](https://anilcancakir.com/tr/wind_kit/snippets/b8sza6lf/index.md): 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 Rating Summary with Score and Bars](https://anilcancakir.com/tr/wind_kit/snippets/zhcf8rs7/index.md): 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](https://anilcancakir.com/tr/wind_kit/snippets/zrojlt8y/index.md): 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 Product Card for E-commerce Grids](https://anilcancakir.com/tr/wind_kit/snippets/242bmfem/index.md): 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 Pricing Card with Tailwind-Style className](https://anilcancakir.com/tr/wind_kit/snippets/zi6cfmsx/index.md): 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 Hero Section with Gradient and CTA Buttons](https://anilcancakir.com/tr/wind_kit/snippets/04nyztwq/index.md): 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.
- [Flutter Empty State with Icon and Call to Action](https://anilcancakir.com/tr/wind_kit/snippets/2eu6eqkv/index.md): 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 Feature Grid: Three-Column Highlights](https://anilcancakir.com/tr/wind_kit/snippets/9t9ozch5/index.md): 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 Filter Chips Row with Selected State](https://anilcancakir.com/tr/wind_kit/snippets/8tn3yfxl/index.md): A wrapping row of filter chips with a selected state, built with Wind UI utility classes. A category and tag selector pattern with full dark mode support.
- [Flutter Bottom Navigation Bar UI](https://anilcancakir.com/tr/wind_kit/snippets/ddk10jsv/index.md): A bottom navigation bar with five destinations and an active highlighted tab. A mobile navigation pattern built with Wind UI utility classes, dark mode ready.
- [Flutter Avatar Group with Status and Count Badges](https://anilcancakir.com/tr/wind_kit/snippets/92fy2bkd/index.md): An avatar group showing online status dots and a remaining-count badge. A chat and presence pattern built with Wind UI utility classes and dark mode pairs.
- [Flutter Alert Banners: Success, Info, and Warning](https://anilcancakir.com/tr/wind_kit/snippets/d4d6qpen/index.md): Success, info, and warning alert banners with semantic colors, icons, and a close affordance. A reusable notification pattern built with Wind UI className utilities.