A collection of beautifully designed, accessible, and customizable terminal UI components. Built on Ink. Works with shadcn/ui.

How do I publish components with termcn?

Add or edit components under registry/bases/ink/ or registry/bases/opentui/, register them in registry.json, run pnpm registry:build (which refreshes public/r/), then deploy. Consumers install with npx shadcn@latest add against your published registry URL.

Is termcn open source?

Yes. The source is on GitHub and released under the MIT License.

Sidebar

Collapsible navigation sidebar panel

Terminal

Installation


$ pnpm dlx shadcn@latest add @termcn/sidebar

Usage

import { Sidebar } from "@/components/ui/sidebar";

<Sidebar
  title="Explorer"
  activeKey="inbox"
  items={[
    { key: "inbox", label: "Inbox", icon: "📥", badge: 3 },
    { key: "drafts", label: "Drafts", icon: "📝" },
  ]}
  onSelect={(key) => console.log(key)}
/>

API Reference

Sidebar

Prop	Type	Default
`items`	`SidebarItem[]`	`required`
`activeKey`	`string`	-
`onSelect`	`(key: string) => void`	-
`collapsed`	`boolean`	`false`
`width`	`number`	`20`
`title`	`string`	-

SidebarItem

Prop	Type	Default
`key`	`string`	`required`
`label`	`string`	`required`
`icon`	`string`	-
`badge`	`string \| number`	-
`children`	`SidebarItem[]`	-

Pagination Tabbed Content

On This Page

Installation Usage API Reference Sidebar SidebarItem

Edit this page Follow @shadcnlabs Join community