Documentation — termaUI

◈ termaUI

termaUI is currently a working prototype. We are actively seeking funding to bring it to full production.

Installation

◈

This entire website is built with termaUI

Every font stack, guardian fix, text effect, and pecha layout you see on termafoundry.com is rendered using termaUI's prototype stylesheet. The framework works — this site is the proof of concept.

Framework Guides

termaUI is framework-agnostic. It's a CSS file plus an optional JS utility — it works in any environment that renders HTML.

✓ Works alongside Tailwind CSS, Bootstrap, and any other CSS framework

Every termaUI class uses a tr- prefix. There are no naming conflicts with Tailwind, Bootstrap, or any other utility framework. Just load both stylesheets and combine classes freely on the same element.

HTML — termaUI + Tailwind together

<!-- Tailwind classes and termaUI tr-* classes coexist on the same element -->
<div class="p-4 rounded-xl bg-slate-900 tr-glass">
  <p class="text-sm text-slate-400 tr-jomolhari tr-guard tr-text-rainbow" lang="bo">
    བཀྲ་ཤིས་བདེ་ལེགས།
  </p>
</div>

Vanilla HTML

Drop the CDN link and optional script into your <head>. No build step needed.

HTML

<head>
  <!-- 1. CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/termaui/dist/termaui.min.css">
  <!-- 2. terma.js (required for correct line breaking) -->
  <script src="https://cdn.jsdelivr.net/npm/termaui/dist/terma.js"></script>
</head>
<body>
  <p class="tr-jomolhari tr-guard" lang="bo">བཀྲ་ཤིས་བདེ་ལེགས།</p>
  <script>
    document.addEventListener('DOMContentLoaded', () => terma.prepareAll());
  </script>
</body>

Next.js (App Router)

Import the CSS in your root layout. terma.prepareAll() needs DOM access, so run it in a 'use client' component inside useEffect.

Terminal

npm install termaui

app/layout.tsx — import CSS here

import 'termaui/dist/termaui.css';
// rest of your layout...

app/TibetanInit.tsx — Client Component for terma.js

'use client';
import { useEffect } from 'react';
import terma from 'termaui';

export function TibetanInit() {
  useEffect(() => {
    terma.prepareAll();
  }, []);
  return null;
}

Add <TibetanInit /> inside the <body> of your root layout. It renders nothing — it just runs terma.prepareAll() on mount and after each navigation.

Next.js (Pages Router)

pages/_app.tsx

import 'termaui/dist/termaui.css';
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import terma from 'termaui';

export default function App({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    terma.prepareAll();
    router.events.on('routeChangeComplete', () => terma.prepareAll());
    return () => router.events.off('routeChangeComplete', () => terma.prepareAll());
  }, [router]);
  return <Component {...pageProps} />;
}

Astro

Import the CSS in your base layout's frontmatter. Call terma.prepareAll() in a client <script> — Astro bundles it automatically.

src/layouts/BaseLayout.astro (npm)

---
import 'termaui/dist/termaui.css';
---
<html><body>
  <slot />
  <script>
    import terma from 'termaui';
    terma.prepareAll();
  </script>
</body></html>

src/layouts/BaseLayout.astro (CDN — no npm needed)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/termaui/dist/termaui.min.css">
<script src="https://cdn.jsdelivr.net/npm/termaui/dist/terma.js" is:inline></script>
<script is:inline>
  document.addEventListener('astro:page-load', () => terma.prepareAll());
</script>

Use astro:page-load (not DOMContentLoaded) when View Transitions are enabled — it fires after every client-side navigation.

Vite + React

src/main.jsx — import CSS once at the entry point

import 'termaui/dist/termaui.css';
// rest of your entry point...

Call terma.prepareAll() in a root useEffect

import { useEffect } from 'react';
import terma from 'termaui';

export default function App() {
  useEffect(() => {
    terma.prepareAll();
  }, []);
  // ...your JSX
}

Vite + Vue

src/main.ts — import CSS once

import 'termaui/dist/termaui.css';
import { createApp } from 'vue';
// rest of your entry point...

Root component — call terma.prepareAll() in onMounted

<script setup>
import { onMounted } from 'vue';
import terma from 'termaui';
onMounted(() => {
  terma.prepareAll();
});
</script>
<template><slot /></template>

SvelteKit

src/routes/+layout.svelte

<script>
  import 'termaui/dist/termaui.css';
  import { onMount } from 'svelte';
  import terma from 'termaui';
  onMount(() => {
    terma.prepareAll();
  });
</script>
<slot />

Quick Start

Three things to render Tibetan properly: the stylesheet, lang="bo" on your element, and the classes you need.

HTML

<!-- 1. Add the stylesheet -->
<link rel="stylesheet" href="termaui.css">

<!-- 2. Use lang="bo" + termaUI classes -->
<p class="tr-jomolhari tr-guard" lang="bo">
  བཀྲ་ཤིས་བདེ་ལེགས།
</p>

Why `lang="bo"`?

termaUI uses the :lang(bo) selector to apply sensible defaults — font family, line-height, word-breaking — to all Tibetan content. Always set lang="bo" on elements containing Tibetan text, or on a parent <div> wrapping them.

The base reset provides: font-family: Jomolhari, line-height: 1.8, word-break: keep-all, overflow-wrap: anywhere, and font-size: 1.1em. These kick in automatically with lang="bo".

Fonts

36 Tibetan typefaces — each available via a single tr-* class. Each class sets font-family with correct WOFF2 fallback chains. All fonts are loaded on demand using unicode-range: U+0F00-0FFF, so Latin text is never affected.

HTML — basic usage

<p class="tr-jomolhari tr-guard" lang="bo">བཀྲ་ཤིས་བདེ་ལེགས།</p>
<p class="tr-monlam tr-guard" lang="bo">བཀྲ་ཤིས་བདེ་ལེགས།</p>
<p class="tr-drutsa tr-guard" lang="bo">བཀྲ་ཤིས་བདེ་ལེགས།</p>

Uchen — 24 fonts

.tr-jomolhariJomolhariབཀྲ་ཤིས་བདེ་ལེགས།

.tr-ddc-uchenDDC Uchenབཀྲ་ཤིས་བདེ་ལེགས།

.tr-notoNoto Serif Tibetanབཀྲ་ཤིས་བདེ་ལེགས།

.tr-machine-uniTibetan Machine Uniབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlamMonlam Bodyigབཀྲ་ཤིས་བདེ་ལེགས།

.tr-babelstoneBabelStone Tibetanབཀྲ་ཤིས་བདེ་ལེགས།

.tr-babelstone-slimBabelStone Slimབཀྲ་ཤིས་བདེ་ལེགས།

.tr-gangjieGangJie Uchenབཀྲ་ཤིས་བདེ་ལེགས།

.tr-jamyangJamyang Monlam Uchenབཀྲ་ཤིས་བདེ་ལེགས།

.tr-panchenPanchen Tsukringབཀྲ་ཤིས་བདེ་ལེགས།

.tr-riwocheRiwoche Dhodriབཀྲ་ཤིས་བདེ་ལེགས།

.tr-sadriSadri Yigchenབཀྲ་ཤིས་བདེ་ལེགས།

.tr-ddc-rinzinDDC Rinzinབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-ouchan1Monlam OuChan 1བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-ouchan2Monlam OuChan 2བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-ouchan3Monlam OuChan 3བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-ouchan4Monlam OuChan 4བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-ouchan5Monlam OuChan 5བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-paytsikMonlam PayTsikབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-tikrangMonlam Tikrangབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-tiktongMonlam TikTongབཀྲ་ཤིས་བདེ་ལེགས།

.tr-qomolangma-sarchenQomolangma Sarchenབཀྲ་ཤིས་བདེ་ལེགས།

.tr-qomolangma-betsuQomolangma Betsuབཀྲ་ཤིས་བདེ་ལེགས།

.tr-qomolangma-tsutongQomolangma Tsutongབཀྲ་ཤིས་བདེ་ལེགས།

Drutsa (Cursive) — 6 fonts

.tr-drutsaQomolangma-Drutsaབཀྲ་ཤིས་བདེ་ལེགས།

.tr-gangjie-drutsaGangJie Drutsaབཀྲ་ཤིས་བདེ་ལེགས།

.tr-khampa-drutsaKhampa Dedri Drutsaབཀྲ་ཤིས་བདེ་ལེགས།

.tr-sadri-drutsaSadri Drutsaབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-dutsa1Monlam Dutsa 1བཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-dutsa2Monlam Dutsa 2བཀྲ་ཤིས་བདེ་ལེགས།

Modern / Sans — 3 fonts

.tr-noto-sansNoto Sans Tibetanབཀྲ་ཤིས་བདེ་ལེགས།

.tr-misansMiSans Tibetanབཀྲ་ཤིས་བདེ་ལེགས།

.tr-monlam-sansMonlam Uni Sansབཀྲ་ཤིས་བདེ་ལེགས།

Semi-cursive — 3 fonts

.tr-joyigJoyigབཀྲ་ཤིས་བདེ་ལེགས།

.tr-chuyigKhampa Dedri Chuyigབཀྲ་ཤིས་བདེ་ལེགས།

.tr-bechuKhampa Dedri Bechuབཀྲ་ཤིས་བདེ་ལེགས།

Noto Serif Tibetan also ships a full weight axis: .tr-noto-thin, .tr-noto-light, .tr-noto-medium, .tr-noto-semibold, .tr-noto-bold, .tr-noto-extrabold, .tr-noto-black. · Preview all 36 fonts with live text →

Effects

Visual effects that work with Tibetan script — gradient text, glows, outlines, and glass panels. These use standard CSS techniques (background-clip: text, text-shadow, backdrop-filter) so they compose with any font class.