Overview

Gryt's interface comes from two published packages that share one set of tokens.

@gryt/ui is the web library: React components on Base UI, styled with Tailwind on the Gryt palette. It is what the desktop and web clients render.

@gryt/ui-native is the same design system through React Native. Same colours, same names, a different renderer.

Both are MIT, which makes them the exception in this project. Everything else here is AGPL-3.0, on the argument that somebody running a modified Gryt as a service should publish their changes. A component library is meant to be picked up and used in whatever somebody is building, including things with nothing to do with Gryt, and AGPL would rule that out for most of them.

Which one

npm install @gryt/ui

Your app provides react and react-dom. Base UI, the Phosphor icons and the compiled stylesheet come with the package, and there is no CSS-in-JS runtime.

npm install @gryt/ui-native

Your app provides react and react-native. See React Native, which is where the differences live.

Using the web library

Import the stylesheet once, in whichever file is your global entry.

import "@gryt/ui/styles.css";

Then wrap the app in GrytProvider:

import { Button, GrytProvider, TextField } from "@gryt/ui";

export function App() {
  return (
    <GrytProvider>
      <TextField label="Channel name" placeholder="Design review" />
      <Button tone="primary">Create</Button>
    </GrytProvider>
  );
}

The component reference is elsewhere

ui.gryt.chat is the library's own documentation: every component with live examples, the theme reference, a theme generator, and a handful of full-screen examples built out of the parts.

This section does not repeat it. What is here is the part that spans both packages, and the React Native story, which ui.gryt.chat does not currently cover.

Themes

A theme is a couple of dozen hex values. The generator on ui.gryt.chat/theme/generator produces one and gives you a link, and the Gryt client takes that link directly in Settings → How Gryt looks → Theme.

Underneath, the ramps are built by neutralScale, hueScale and alphaScale, exported from @gryt/ui and from its ./theme entry. Each step is specified in OKLCh, as a lightness, a chroma and a hue, and converted to hex through the published OKLab matrices. There is no colour dependency; the conversion is in the package. Both renderers call the same functions, so a curve tuned for the web moves to the phone with it.

Where the code is

The two packages live in one repository, Gryt-chat/ui, which is the only Gryt repository that is not AGPL.