# zkit

> A GPU interface toolkit for native and browser apps, written in Rust: GPUI foundations, styled accessible components, motion and a dither engine.

Every page below is Markdown. Append `.md` (or `.mdx`) to a docs path, for example https://zkit.opcodehq.com/docs/installation.md. All pages in one file: https://zkit.opcodehq.com/llms-full.txt

## Get started

- [Introduction](https://zkit.opcodehq.com/docs/introduction.md): A GPU interface toolkit for native and browser apps, written in Rust.
- [Installation](https://zkit.opcodehq.com/docs/installation.md): Add the components to a GPUI app and install a theme.
- [Theming](https://zkit.opcodehq.com/docs/theming.md): Two designed appearances, seven accents and one set of semantic tokens.
- [Accessibility](https://zkit.opcodehq.com/docs/accessibility.md): Every component is keyboard-operable and announces its state to assistive technology.
- [Credits](https://zkit.opcodehq.com/docs/credits.md): The projects zkit's dither work builds on.

## Components

- [Button](https://zkit.opcodehq.com/docs/button.md): A compact, accessible button with five variants, three sizes and full state support.
- [Kbd](https://zkit.opcodehq.com/docs/kbd.md): Keyboard shortcut hints, rendered as platform key caps.
- [Badge](https://zkit.opcodehq.com/docs/badge.md): A small count or status pill.
- [Divider](https://zkit.opcodehq.com/docs/divider.md): Hairline separators between groups.
- [Toolbar](https://zkit.opcodehq.com/docs/toolbar.md): A labelled row of controls at the top of a view.
- [Panel (frame)](https://zkit.opcodehq.com/docs/panel.md): A frame: title and actions in a muted band, the body on an inset plate, and a footer below.
- [Sidebar](https://zkit.opcodehq.com/docs/sidebar.md): Navigation sections with keyboard movement and an animated collapse.
- [Card](https://zkit.opcodehq.com/docs/card.md): A content card with a header, body and footer. Use it alone or inside a Panel frame.
- [Popover](https://zkit.opcodehq.com/docs/popover.md): Floating content anchored to a trigger, opened by pointer or keyboard.
- [Menu](https://zkit.opcodehq.com/docs/menu.md): Commands in a popover, with headings, separators, shortcuts and checks.
- [Dialog](https://zkit.opcodehq.com/docs/dialog.md): A modal surface with a header, body and a footer band for actions.
- [Progress bar](https://zkit.opcodehq.com/docs/progress-bar.md): Determinate progress, or an indeterminate sweep while the duration is unknown.
- [Spinner](https://zkit.opcodehq.com/docs/spinner.md): A ring with a quarter arc that turns at a steady rate.
- [Pulse loader](https://zkit.opcodehq.com/docs/pulse-loader.md): An ambient loader of staggered, breathing cells.
- [Glass surface](https://zkit.opcodehq.com/docs/glass-surface.md): Native AppKit materials on macOS, with a portable backdrop fallback elsewhere.

## Motion

- [Motion catalog](https://zkit.opcodehq.com/docs/motion.md): Durations and curves are named once and reused, so every surface moves with the same vocabulary.
- [Entrances](https://zkit.opcodehq.com/docs/entrances.md): Helpers that animate an element in with the catalog's specs.
- [Loaders](https://zkit.opcodehq.com/docs/loaders.md): Three indicators on one shared clock that parks when nothing is visible.
- [Reduced motion](https://zkit.opcodehq.com/docs/reduced-motion.md): One policy decides whether anything moves.

## Dither

- [Dither surface](https://zkit.opcodehq.com/docs/dither.md): Paint any tone field behind real GPUI children as batched GPU quads.
- [Fields](https://zkit.opcodehq.com/docs/dither-fields.md): Every built-in field, live.
- [Loader](https://zkit.opcodehq.com/docs/dither-loader.md): Dithered loading indicators: ring, dots, pulse and bar. Rendered by the Rust engine.
- [Globe](https://zkit.opcodehq.com/docs/dither-globe.md): A rotating dithered globe with a lit terminator, atmosphere, markers and arcs. Rendered by the Rust engine.
- [Dither button](https://zkit.opcodehq.com/docs/dither-button.md): A real button with a dithered face. It grows denser on hover and while pressed.
- [Dither chart](https://zkit.opcodehq.com/docs/dither-chart.md): Charts driven by your data, with axes, labels and a legend. Hover a chart to read its values.
- [Avatar](https://zkit.opcodehq.com/docs/dither-avatar.md): Generative avatars: an 8 × 8 symmetric pattern and a hue, both derived from a name.
- [Dither image](https://zkit.opcodehq.com/docs/dither-image.md): Dither photos and logos with ordered or error-diffusion methods. Nothing leaves the browser.
- [Cards and states](https://zkit.opcodehq.com/docs/dither-states.md): Cards, dividers, skeletons, loaders and empty states with a dithered finish.
- [Examples](https://zkit.opcodehq.com/docs/dither-examples.md): Larger pieces built from fields: type, a globe, waves and photos.
- [Engine](https://zkit.opcodehq.com/docs/dither-engine.md): zkit-dither: fields, matrices, palettes, images and export, with no GPUI dependency.

## Dither fields

- [Aurora](https://zkit.opcodehq.com/docs/dither-fields/aurora.md): Curtains of light that fold and drift along a horizon.
- [Gradient](https://zkit.opcodehq.com/docs/dither-fields/gradient.md): A diagonal ramp from paper to ink, the simplest field there is.
- [Glow](https://zkit.opcodehq.com/docs/dither-fields/glow.md): A soft light source, off centre, falling away to paper.
- [Mesh gradient](https://zkit.opcodehq.com/docs/dither-fields/mesh.md): Four wandering colour points blended into a mesh.
- [Noise field](https://zkit.opcodehq.com/docs/dither-fields/noise.md): Layered value noise, drifting slowly.
- [Waves](https://zkit.opcodehq.com/docs/dither-fields/waves.md): Stacked swells that roll across the surface.
- [Plasma](https://zkit.opcodehq.com/docs/dither-fields/plasma.md): Interfering sine fields, the classic demo effect.
- [Beams](https://zkit.opcodehq.com/docs/dither-fields/beams.md): Rays fanning down from a source above the frame.
- [Silk](https://zkit.opcodehq.com/docs/dither-fields/silk.md): Folded ribbons of light with a little grain.
- [Smoke](https://zkit.opcodehq.com/docs/dither-fields/smoke.md): Warped noise rising from the bottom of the frame.
- [Contours](https://zkit.opcodehq.com/docs/dither-fields/contours.md): Topographic lines over a slow height field.
- [Ripples](https://zkit.opcodehq.com/docs/dither-fields/ripples.md): Two drops on still water, interfering.
- [Ridgelines](https://zkit.opcodehq.com/docs/dither-fields/ridgelines.md): Stacked mountain silhouettes, one ridge in front of the next.
- [Metaballs](https://zkit.opcodehq.com/docs/dither-fields/metaballs.md): Four blobs that merge as they pass.
- [Tunnel](https://zkit.opcodehq.com/docs/dither-fields/tunnel.md): Concentric rings rushing towards the viewer.
- [Retro grid](https://zkit.opcodehq.com/docs/dither-fields/retro-grid.md): A perspective floor under a striped sun.
- [Eclipse](https://zkit.opcodehq.com/docs/dither-fields/eclipse.md): A dark disc in front of a bright corona.
- [Horizon](https://zkit.opcodehq.com/docs/dither-fields/horizon.md): A planet's lit rim under a dark sky.
- [Starfield](https://zkit.opcodehq.com/docs/dither-fields/starfield.md): Stars streaming out from the centre.
- [Halftone](https://zkit.opcodehq.com/docs/dither-fields/halftone.md): Newsprint dots, larger where the tone is darker.
- [Globe](https://zkit.opcodehq.com/docs/dither-fields/globe.md): A rotating sphere with procedural land.
- [Dot map](https://zkit.opcodehq.com/docs/dither-fields/dot-map.md): A flat world map drawn in dots.
- [Orb](https://zkit.opcodehq.com/docs/dither-fields/orb.md): A lit sphere with a soft terminator.
- [Fade](https://zkit.opcodehq.com/docs/dither-fields/fade.md): A vertical fade for the edge of a section.
- [Area chart](https://zkit.opcodehq.com/docs/dither-fields/area.md): A filled area under a sample trend.
- [Bar chart](https://zkit.opcodehq.com/docs/dither-fields/bar.md): Sample bars, densest at the top.
- [Line chart](https://zkit.opcodehq.com/docs/dither-fields/line.md): A single trend line on paper.
- [Sparkline](https://zkit.opcodehq.com/docs/dither-fields/sparkline.md): A compact trend for a table cell or stat.
- [Heatmap](https://zkit.opcodehq.com/docs/dither-fields/heatmap.md): A grid of sample activity levels.
- [Donut chart](https://zkit.opcodehq.com/docs/dither-fields/donut.md): A ring split into sample segments.
- [Radar chart](https://zkit.opcodehq.com/docs/dither-fields/radar.md): A filled polygon over concentric rings.
- [Gauge](https://zkit.opcodehq.com/docs/dither-fields/gauge.md): A half-circle meter at a sample value.
- [Progress bar](https://zkit.opcodehq.com/docs/dither-fields/progress.md): A track with a dithered fill.
- [Uptime bar](https://zkit.opcodehq.com/docs/dither-fields/uptime.md): Daily status bars across a period.
- [Stat trend](https://zkit.opcodehq.com/docs/dither-fields/stat.md): A trend under a headline number.