Graphics
Graphics components: compare
Every Graphics component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.
Compare
| Component | Theme | Parts | Custom props | Access |
|---|---|---|---|---|
| Cloud Shapes | Light and dark | 1 | 5 | Free |
| Color Wash | Light and dark | 1 | 7 | Licensed |
| Contour Field | Light and dark | 1 | 5 | Licensed |
| Glass Icon | Dark only | 1 | 0 | Licensed |
| Growth Curve | Light and dark | 1 | 2 | Licensed |
| Orbit System | Light and dark | 1 | 0 | Licensed |
| Road Signs | Light and dark | 6 | 15 | Free |
| Scratch Reveal | Light and dark | 1 | 0 | Free |
| Sparkline | Light and dark | 1 | 3 | Free |
| Transit Light Curve | Light and dark | 1 | 0 | Licensed |
All Graphics components
10 components, A to Z.
Cloud ShapesFreePaper-white shapes lit with a two-color crescent shadow, in fourteen geometries from circle and pill to egg, arch and shield. Pinned to a daylight look; shading deepens on dark grounds.
Color WashLicensedBackground panel of two blurred color fields over a ground with overlay grain, in nine palettes such as delft, gold, vesper and gesso. Blur, field height, grain and ground lift are adjustable.
Contour FieldLicensedClient canvas field painted by the celestograph plate engine, blurred and traced with white contour lines from its own luminance. Seeded from a string, four palettes; fills a positioned parent and repaints on resize.
Glass IconLicensedRounded glass tile that frames a single icon, using the kit's glaze surface and glass-edge utilities with scene foreground ink. Sized for a 36px icon and meant for dark art surfaces.
Growth CurveLicensedDecorative chart where an orb climbs an accelerating curve drawn in currentColor, leaving a bright trail over a faint remainder. A CSS-only loop with adjustable duration; reduced motion shows it finished.
Orbit SystemLicensedOrbital diagram with two dashed rings, a chambray planet and two smaller moons in cocoa and celadon, painted with Orbital v4 orbs. Absolutely centred and scaled down on small screens.
Road SignsFreeNorth American road sign set: highway guide, exit, next services, mile marker, speed limit and warning diamond on green, blue and yellow faces. Uses the Overpass sign font and Phosphor service icons.
Scratch RevealFreeTeal painted panel whose paint wears away on hover to expose a pencil construction sketch, with the label switching to canvas ink. Set in Marcellus; decorative, and reduced motion skips the fade.
SparklineFreeCompact SVG line chart from an array of numbers, with a currentColor stroke and fading area fill. Missing values break the line, one point draws a dot, and an aria-label exposes it as an image.
Transit Light CurveLicensedAn SVG light curve in currentColor with a dot riding its dip, driven by the same clock as Planet Transit Scene. Render both from one parent so the dip matches the crossing.
Vignette
Full-bleed radial darkening layer that shades the corners of a scene, in soft, medium or strong. Focuses the centre and helps text sit on art inside a positioned parent.
Cloud Shapes
Paper-white shapes lit with a two-color crescent shadow, in fourteen geometries from circle and pill to egg, arch and shield. Pinned to a daylight look; shading deepens on dark grounds.