1k
Sponsor

Theming

PreviousNext

Configure terminal themes, motion, and Unicode behavior for terminal apps.

InkOpenTUI
Terminal

ThemeProvider

OpenTUI components use the default theme without a provider. Install ThemeProvider when you want to supply another theme or update the active theme at runtime.

$ pnpm dlx shadcn@latest add @termcn/opentui/theme-provider

Usage

import { Spinner } from "@/components/ui/spinner";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { ThemeProvider } from "@/providers/theme-provider";
 
export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Spinner label="Generating registry items" />
    </ThemeProvider>
  );
}

Theme-aware components receive the provider-optional use-theme hook transitively. Application code can import useTheme or useThemeUpdater from @/hooks/use-theme when it needs direct access.

Available themes

Default
Catppuccin
Dracula
High Contrast
High Contrast Light
Monokai
Nord
One Dark
Solarized
Tokyo Night
AMOLED
Aura
Ayu
Carbonfox
Catppuccin Frappe
Catppuccin Macchiato
Cobalt2
Cursor
Everforest
Flexoki
GitHub
Gruvbox
Kanagawa
Lucent Orng
Material
Matrix
Mercury
Night Owl
OC-2
One Dark Pro
OpenCode
Orng
Osaka Jade
Palenight
Rose Pine
Shades of Purple
Synthwave '84
Vercel
Vesper
Zenburn

Custom themes

Use createTheme to extend the default tokens while preserving the complete theme shape.

import { createTheme } from "@/providers/theme-provider";
 
export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});

MotionProvider

Motion is independent from the active theme. Install MotionProvider only when the application needs to override the default reduced-motion detection.

$ pnpm dlx shadcn@latest add @termcn/opentui/motion-provider

Usage

import { MotionProvider } from "@/providers/motion-provider";
 
export function Example() {
  return (
    <MotionProvider reducedMotion>
      <App />
    </MotionProvider>
  );
}

Without the provider, motion follows NO_MOTION=1 and CI=true.

UnicodeProvider

Unicode support is independent from the active theme. Install UnicodeProvider only when the application needs to override terminal detection.

$ pnpm dlx shadcn@latest add @termcn/opentui/unicode-provider

Usage

import { UnicodeProvider } from "@/providers/unicode-provider";
 
export function Example() {
  return (
    <UnicodeProvider unicode={false}>
      <App />
    </UnicodeProvider>
  );
}

Without the provider, Unicode support follows terminal detection and NO_UNICODE=1.