KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

temir

★ 992 Open GitHub ↗

Vue for interactive command-line apps

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# This repository has been archived, please use [Vue TermUI](https://github.com/vue-terminal/vue-termui) instead.

<p align='center'>
English | <a href='./README.zh-CN.md'>简体中文</a>
</p>

> Vue for CLIs. Build your CLI output using components.

Temir provides the same component-based UI building experience that Vue offers in the browser, but for command-line apps.

It uses [Yoga](https://github.com/facebook/yoga) to build Flexbox layouts in the terminal, so most CSS-like props are available in Temir as well.
If you are already familiar with Vue, you already know Temir.

Since Temir is a Vue renderer, it means that most of the features of Vue are supported.
Head over to [Vue](https://vuejs.org/) website for documentation on how to use it.
Only Temir's methods will be documented in this readme.

---

## Install

```sh
npm install @temir/core
```

## Usage

```vue
<script lang="ts" setup>
import { ref } from '@vue/runtime-core'
import { TBox, TText } from '@temir/core'
const counter = ref(0)
setInterval(() => {
  counter.value++
}, 100)
</script>

<template>
  <TBox>
    <TText color="green">
      {{ counter }} tests passed
    </TText>
  </TBox>
</template>

```

## HMR Support

## Contents

- [Getting Started](#getting-started)
- [Components](#components)
  - [`<Text>`](#text)
  - [`<Box>`](#box)
  - [`<Newline>`](#newline)
  - [`<Spacer>`](#spacer)
  - [`<Link>`](https://github.com/webfansplz/temir/tree/main/packages/temir-link)
  - [`<Tab>`](https://github.com/webfansplz/temir/tree/main/packages/temir-tab)
  - [`<Spinner>`](https://github.com/webfansplz/temir/tree/main/packages/temir-spinner)
  - [`<SelectInput>`](https://github.com/webfansplz/temir/tree/main/packages/temir-select-input)
  - 💻 Still working and welcome to contribute.

- [Examples](https://github.com/webfansplz/temir/tree/main/examples)
  - [hi-temir](https://github.com/webfansplz/temir/tree/main/examples/hi-temir)  
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/media/hi-temir.png)
  - [borders](https://github.com/webfansplz/temir/tree/main/examples/borders)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/media/temir-borders.png)
  - [table](https://github.com/webfansplz/temir/tree/main/examples/table)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/media/temir-table.png)
  - [temir-link](https://github.com/webfansplz/temir/tree/main/examples/temir-link)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/packages/temir-link/media/temir-link.png)
  - [temir-spinner](https://github.com/webfansplz/temir/tree/main/examples/temir-spinner)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/packages/temir-spinner/media/temir-spinner.gif)
  - [temir-tab](https://github.com/webfansplz/temir/tree/main/examples/temir-tab)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/packages/temir-tab/media/temir-tab.gif)
  - [temir-select-input](https://github.com/webfansplz/temir/tree/main/examples/temir-select-input)   
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/packages/temir-select-input/media/temir-select-input.gif)
  - [Vitest](https://github.com/webfansplz/temir/tree/main/examples/vitest)  
    ![](https://raw.githubusercontent.com/webfansplz/temir/main/media/temir-vitest.gif)

## Getting Started

Use `@temir/cli` to quickly scaffold a new Temir-based CLI.

```sh

mkdir my-temir-cli

cd my-temir-cli

touch main.ts

npm install @temir/cli

# Dev

temir main.ts

# Build

temir build main.ts
```

You can also check it out this [example](https://github.com/webfansplz/temir/tree/main/examples/hi-temir) to get started.Feel free to play around with the example and fork this repl at [repl.it sandbox](https://replit.com/@webfansplz/hi-temir?v=1)

Temir uses Yoga - a Flexbox layout engine to build great user interfaces for your CLIs using familiar CSS-like props you've used when building apps for the browser. It's important to remember that each element is a Flexbox container. Think of it as if each <div> in the browser had display: flex. See <Box> built-in component below for documentation on how to use Flexbox layouts in Ink. Note that all text must be wrapped in a <Text> component.

## Components

### `<Text>`

This component can display text, and change its style to make it bold, underline, italic or strikethrough.

![temir-text-props](https://raw.githubusercontent.com/webfansplz/temir/main/media/temir-text-props.png)

```vue
<TText color="green">
  I am green
</TText>

<TText color="black" background-color="white">
  I am black on white
</TText>

<TText color="white">
  I am white
</TText>

<TText italic>
  I am italic
</TText>

<TText underline>
  I am underline
</TText>

<TText strikethrough>
  I am strikethrough
</TText>

<TText inverse>
  I am inversed
</TText>

```

**Note:** `<Text>` allows only text nodes and nested `<Text>` components inside of it. For example, `<Box>` component can't be used inside `<Text>`.

#### color

Type: `string`

Change text color.
Temir uses [chalk](https://github.com/chalk/chalk) under the hood, so all its functionality is supported.

```vue
<TBox flex-direction="column">
  <TText color="green">
    Green
  </TText>
  <TText color="blue">
    Blue
  </TText>
  <TText color="red">
    Red
  </TText>
</TBox>
```

#### backgroundColor

Type: `string`

Same as `color` above, but for background.

```vue
<TBox flex-direction="column">
  <TText background-color="green">
    Green
  </TText>
  <TText background-color="blue">
    Blue
  </TText>
  <TText background-color="red">
    Red
  </TText>
</TBox>

```

#### dimColor