0Sponsor

Installation

PreviousNext

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

Prerequisites

A project with Ink set up.

Installation

Run the following command to add any component:

pnpm dlx shadcn@latest add https://termcn.dev/r/spinner.json

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:

pnpm dlx shadcn@latest add https://termcn.dev/r/theme-dracula.json

Then wrap your app:

import { ThemeProvider } from "@/components/ui/theme-provider";
import { draculaTheme } from "@/lib/terminal-themes/dracula";
 
export function App() {
  return (
    <ThemeProvider theme={draculaTheme}>{/* your Ink tree */}</ThemeProvider>
  );
}