Take a piece
The design system
One set of tokens, two renderers, and a generator that turns a palette into a link. Four of these packages are MIT, so they drop into something that has nothing to do with Gryt.
Every avatar in Gryt is drawn from a nickname. The package that does it has no dependencies and never touches the network, so this page just runs it instead of showing you a picture. Type a name and both halves change.
import { avatarSeed, owlAvatarDataUri } from "@gryt/owl";
const src = owlAvatarDataUri(avatarSeed("nora") ?? "gryt");No network, no canvas, no dependencies. It’s a function from a string to SVG markup, and it runs the same in Node as it does here. avatarSeed lower-cases and trims, so someone who renames themselves and only changes the capitals keeps the same owl.
These three come straight out of the published package and are drawn here, picking up this page’s colours as they go.
42 msimport { Avatar, Button, Chip } from "@gryt/ui";
<Avatar seed="nora" alt="" size="small" />
<Chip label="42 ms" tone="success" />
<Button size="small">Send</Button>