Getting started

This page is for developers. Tattva is built with React 19, TypeScript and Tailwind CSS v4, and needs nothing else. Not a developer, or building with an AI tool? Go to Start here.

Add it to your project+

Start from a React and Tailwind CSS v4 project (for example npm create vite@latest my-app -- --template react-ts, then npm install tailwindcss @tailwindcss/vite and add the plugin). Then install the parts:

npm install @tattva/ui

In your main stylesheet, load the tokens (they load Tailwind too, so they replace your own @import "tailwindcss";) and let Tailwind see the classes the parts use:

@import "@tattva/ui/tokens.css";
@source "../node_modules/@tattva/ui/dist";

Then import from the package: import { Message, Composer } from "@tattva/ui";. Prefer to own the code? Copy the parts in instead:

mkdir -p src/tokens
curl -fsSL https://lkb00.github.io/tattva/downloads/tokens.css -o src/tokens/tokens.css
curl -fsSL https://lkb00.github.io/tattva/downloads/tattva-free.zip -o free.zip
unzip -oq free.zip -d src && rm free.zip     # creates src/tattva/

Load the tokens+

Import the token stylesheet once, at the top of your app. It loads Tailwind, sets every color, corner, shadow and motion value, and sets the base text styles. It also stops all animation for people who turn off motion in their system settings, so keep it loaded: the parts rely on it for that.

import "./tattva.css"; // the stylesheet with the two lines above
import { Message, Composer } from "@tattva/ui";

The fonts are Inter (interface and headings) and Geist Mono (code and technical labels). Both are free and open source. Load them from Google Fonts, or host them yourself and keep the same names.

<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet" />

Pick a colour theme+

Lime (warm paper and a fresh lime AI color) is the default. Set data-palette on the root element to teal, indigo, harbor, plum, graphite or terminal (near-black and dense, for trading and data screens) to change the greys and the AI color. Each works in light and dark and also sets two soft wash colors for AI areas. Amber still means a person must act, and the status colors stay the same, in every theme.

<html data-palette="indigo">

Build a first screen+

import { useState } from "react";
import { Message, MessageList, Composer, Markdown, useStreamingText } from "@tattva/ui";

export function Chat() {
  const { text, streaming, start, stop } = useStreamingText("Hello. **How can I help?**");
  return (
    <MessageList>
      <Message role="user">Say hello.</Message>
      <Message role="assistant" streaming={streaming}><Markdown>{text}</Markdown></Message>
      <Composer generating={streaming} onStop={stop} onSend={() => start()} />
    </MessageList>
  );
}

Swap useStreamingText for your real reply source. Set streaming while words arrive. The caret, busy state and Stop button follow.

Dark mode+

Add the dark class or data-theme="dark" to the root element. Every component uses named color roles, so nothing else needs to change.

document.documentElement.classList.toggle("dark", prefersDark);

Change the theme+

Components use named color roles such as --surface, --fg and --action (the colour of buttons, links and the selected state; every theme sets its own, and white text on it must stay at 4.5:1 or better). Change the base palette at the top of the token file, or override the roles under your own selector.

[data-theme="forest"] {
  --action: #1f3d2b;
  --lime: #d9f99d;
  --attention: #c2410c;
}

Icons+

The icon set comes from the same package: import { SendIcon, CopyIcon } from "@tattva/ui";. Icons take their colour from the text around them. Give an icon-only button a label.

Import+

Every part comes from the package: import { Message, Composer } from "@tattva/ui". If you copied the kit in, import from that folder instead: import { ApprovalPrompt } from "./tattva".