Skip to content
Türkçe

217 snippets

Snippet Gallery

Real Wind examples, added as they are written. Open one to see the result and read its code.

Read the docs

Latest snippets

217 snippets, newest first.

  • WTabs example

    A controlled tab list and panel, with a selected: state.

    • WDiv
    • WTabs
    • WText

  • WText example

    Text styled with Tailwind-like class strings.

    • WDiv
    • WText

  • Featured

    Settings card

    A card with a border, a shadow and a dark: pair on every colour.

    • WCard
    • WText

  • Featured

    Validated email field

    A form input with a validator, a focus ring and an error: border.

    • WFormInput

  • Button variants

    One recipe with two intents and two sizes, resolved from a map of classNames.

    • WindRecipe

  • Disabled button

    A button that fades and greys out through disabled: utilities.

    • WDiv
    • WText
    • WButton

  • Swap layouts at md

    Two blocks, one hidden on phones and one on tablets, with hidden md:flex.

    • WDiv

  • Hover transition

    A primary button that darkens and lifts its shadow over 200 milliseconds.

    • WAnchor
    • WDiv
    • WText

  • Responsive heading

    A heading that grows at sm: over a muted subtitle, with a dark: colour.

    • WDiv
    • WText

  • Flutter Navigation Lights Card with COLREGs Port, Starboard, Masthead and Stern Light Arcs

    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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Electromagnetic Spectrum Card with Log Scale Wavelength Bands and Visible Light Zoom

    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.

    • WDiv
    • WIcon
    • WText
    • WButton

  • Flutter Euro Banknote Card with True Scale Note Stack and Denomination Colours

    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.

    • WDiv
    • WText
    • WButton
    • WIcon