/
1.1k
Sponsor

Installation

PreviousNext

Install terminal components, hooks, and themes from the registry.

Prerequisites

A project with Ink or OpenTUI set up.

Installation

Run the following command to add any component:

$ pnpm dlx shadcn@latest add @termcn/ink/spinner

OpenTUI components use the opentui/ namespace:

$ pnpm dlx shadcn@latest add @termcn/opentui/spinner

Usage

Import and use the component:

import { Spinner } from "@/components/ui/spinner";
import { Text } from "ink";
 
export function App() {
  return (
    <>
      <Text>Loading...</Text>
      <Spinner />
    </>
  );
}

Install a Theme

termcn ships bundled terminal themes that integrate with the ThemeProvider:

For Ink:

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

For OpenTUI:

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

Providers install into providers/. Wrap your app only when you want to override the default theme:

import { ThemeProvider } from "@/providers/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";
 
export function App() {
  return <ThemeProvider theme={draculaTheme}></ThemeProvider>;
}

Motion and Unicode overrides are separate optional items:

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

Use the opentui/ namespace for the equivalent OpenTUI providers.