Gryt UI

React component library for Gryt, the open-source WebRTC voice chat platform from Gryt-chat.

@gryt/ui builds on Base UI — the MUI team's headless component library — styled with Tailwind on the Gryt palette. Flat surfaces, fully rounded controls, chat-focused primitives. Designed for the Gryt desktop/web client and reusable by Gryt-adjacent apps.

Install

bun add @gryt/ui

npm install @gryt/ui
pnpm add @gryt/ui
yarn add @gryt/ui

@gryt/ui includes Base UI, Phosphor icons, and the compiled Gryt styles. Your app provides react and react-dom. There is no CSS-in-JS runtime.

Usage

Import the stylesheet once in your app's global entry file.

// main.tsx, app.tsx, layout.tsx, or another global app entry
import "@gryt/ui/styles.css";

Wrap your app with GrytProvider, then use the components.

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

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

For Next.js, import the stylesheet from app/layout.tsx or pages/_app.tsx.

Links

• Platform monorepo: Gryt-chat/gryt
• Desktop/web client: Gryt-chat/client
• Code theme palette: Gryt-chat/code-theme
• Product site: gryt.chat
• App: app.gryt.chat
• Docs: docs.gryt.chat

Development

bun install
bun run dev

Scripts

bun run typecheck
bun run test
bun run build

Publishing

packages/ui is the npm package. The docs app is private and uses the workspace package through Vite.