Simulate terminal interactions in your documentation
Wether to show an example of your CLI that is not video, or just to look cool (yes, terminals are cool ! they. are.) Terminable is for you.
It is built using Shadcn/ui components, and you can (only) install it using my custom shadcn/ui registry
To install the Terminable component, you can use the following command:
npx shadcn@latest add https://DimitriGilbert.github.io/TerMinable/r/terminable.jsonTo integrate the Terminable component into your project:
import Terminable from "@/components/ui/Terminable";The Terminable component accepts the following props:
| Name | Type | Default | Description |
|---|---|---|---|
commands | CommandEntry[] | required | An array of command objects to be executed in the terminal. |
titleBarVariant | "macos" | "windows" | "linux" | "minimal" | "none" | "macos" | Visual style of the terminal title bar. |
title | string | ReactNode | - | Title displayed in the title bar. |
defaultTypingSpeed | number | 50 | Default typing speed in ms per character. |
defaultTypingRandom | number | 0 | Randomness factor for typing speed (0–100). |
defaultOutputSpeed | number | 30 | Delay between output lines in ms. |
width | string | "w-full max-w-[800px]" | Tailwind width classes for the terminal container. |
height | string | "min-h-[300px] max-h-[500px]" | Tailwind height classes for the terminal body. |
termPrompt | string | ReactNode | "$ " | Prompt symbol shown before each command. |
startLine | string | ReactNode | "" | Initial content displayed before commands start. |
backgroundColor | string | CSS var | CSS color value for the terminal background. Overrides the internal CSS variable. |
promptColor | string | CSS var | CSS color value for the prompt text. Overrides the internal CSS variable. |
outputColor | string | CSS var | CSS color value for the output text. Overrides the internal CSS variable. |
commandDelay | number | 1000 | Default delay between commands in ms. |
allowCopy | boolean | true | Whether completed commands can be clicked to copy. |
start | boolean | true | Start processing commands automatically on mount. |
onError | (error: Error) => void | - | Callback fired when an error occurs during command processing. |
onCopySuccess | (text: string) => void | - | Callback fired when a command is successfully copied to clipboard. |
onCopyError | (error: Error) => void | - | Callback fired when copying to clipboard fails. |
Each command object in the commands array defines a command to be executed in the terminal. Here are the properties you can use:
| Name | Type | Description |
|---|---|---|
prompt | string | ReactNode | Array<string | ReactNode> | The command prompt string or ReactNode to be typed. |
output | string | OutputContent | ReactNode | Array<string | OutputContent | ReactNode> | The output of the command. Can be a string, OutputContent object, ReactNode, or an array of these. |
typingSpeed | number | Typing speed for this command in ms, overriding the default. |
typingRandom | number | Randomness factor for typing speed (0–100), overriding the default. |
delay | number | Delay before executing this command in ms, overriding the global commandDelay. |
outputDelay | number | Delay before displaying the output of this command in ms. |
onDone | () => void | Callback function executed when the command is finished. |
onCopy | () => void | Callback function executed when the command text is copied. |
onBeforeOutput | () => void | Callback function executed before the output is displayed. |
The OutputContent object allows you to specify complex output scenarios with placeholders and delays.
| Name | Type | Description |
|---|---|---|
delay | number | Delay before the content is displayed, in milliseconds. |
placeholder | string | ReactNode | Placeholder content to display while waiting for the delay. |
content | string | ReactNode | The actual content to display after the delay. |
The component uses CSS custom properties for theming. These are defined with Tokyo Night defaults and can be overridden by passing the corresponding props or by setting the CSS variables in your stylesheet.
| Variable | Default | Purpose |
|---|---|---|
--terminable-bg | #1a1b26 | Terminal background color |
--terminable-prompt | #73daca | Prompt text color |
--terminable-output | #c0caf5 | Output text color |
--terminable-titlebar-bg | #24283b | Title bar background |
--terminable-border | #3b4261 | Terminal border color |
--terminable-title-color | #a9b1d6 | Title text color |
--terminable-hover-bg | #292e42 | Command hover background |
--terminable-cursor-color | #c0caf5 | Blinking cursor color |
--terminable-dot-green | #27c93f | macOS title bar green dot |
--terminable-dot-yellow | #ffbd2e | macOS title bar yellow dot |
--terminable-dot-red | #ff5f56 | macOS/Linux title bar red dot |
The titleBarVariant prop controls the visual style of the title bar. Choose from five options:
Explore these examples to understand how to use the Terminable component in different scenarios.