{"id":13766679,"url":"https://github.com/webfansplz/temir","last_synced_at":"2025-09-29T00:32:40.053Z","repository":{"id":54632882,"uuid":"518859246","full_name":"webfansplz/temir","owner":"webfansplz","description":"Vue for interactive command-line apps","archived":true,"fork":false,"pushed_at":"2023-11-07T13:19:19.000Z","size":6788,"stargazers_count":1001,"open_issues_count":3,"forks_count":34,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-09-19T02:22:18.942Z","etag":null,"topics":["cli","command-line","flexbox","interactive","reactivity","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webfansplz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["webfansplz"]}},"created_at":"2022-07-28T13:32:51.000Z","updated_at":"2025-08-18T04:29:40.000Z","dependencies_parsed_at":"2024-01-24T15:12:36.136Z","dependency_job_id":null,"html_url":"https://github.com/webfansplz/temir","commit_stats":{"total_commits":129,"total_committers":5,"mean_commits":25.8,"dds":0.03875968992248058,"last_synced_commit":"d310f3e0ea82dd08bb1a842487326def06dc65cd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webfansplz/temir","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfansplz%2Ftemir","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfansplz%2Ftemir/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfansplz%2Ftemir/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfansplz%2Ftemir/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfansplz","download_url":"https://codeload.github.com/webfansplz/temir/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfansplz%2Ftemir/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277450939,"owners_count":25819971,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-28T02:00:08.834Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cli","command-line","flexbox","interactive","reactivity","vue"],"created_at":"2024-08-03T16:00:59.392Z","updated_at":"2025-09-29T00:32:39.632Z","avatar_url":"https://github.com/webfansplz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/webfansplz"],"categories":["Command Line Interface","TypeScript","cli","Components \u0026 Libraries"],"sub_categories":["Runtime"],"readme":"\n# This repository has been archived, please use [Vue TermUI](https://github.com/vue-terminal/vue-termui) instead.\n\n\n\u003cdiv align=\"center\"\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cimg width=\"240\" alt=\"Temir\" src=\"./media/logo.svg\"\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\t\u003cbr\u003e\n\u003c/div\u003e\n\n\n\u003cp align='center'\u003e\nEnglish | \u003ca href='./README.zh-CN.md'\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e Vue for CLIs. Build your CLI output using components.\n\nTemir provides the same component-based UI building experience that Vue offers in the browser, but for command-line apps.\n\nIt 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.\nIf you are already familiar with Vue, you already know Temir.\n\nSince Temir is a Vue renderer, it means that most of the features of Vue are supported.\nHead over to [Vue](https://vuejs.org/) website for documentation on how to use it.\nOnly Temir's methods will be documented in this readme.\n\n---\n\n## Install\n\n```sh\nnpm install @temir/core\n```\n\n## Usage\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref } from '@vue/runtime-core'\nimport { TBox, TText } from '@temir/core'\nconst counter = ref(0)\nsetInterval(() =\u003e {\n  counter.value++\n}, 100)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTBox\u003e\n    \u003cTText color=\"green\"\u003e\n      {{ counter }} tests passed\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n\n```\n\n\u003cimg src=\"./media/temir-demo.gif\" /\u003e\n\n## HMR Support\n\n\u003cimg src=\"./media/temir-hmr.gif\" /\u003e\n\n\n## Contents\n\n- [Getting Started](#getting-started)\n- [Components](#components)\n  - [`\u003cText\u003e`](#text)\n  - [`\u003cBox\u003e`](#box)\n  - [`\u003cNewline\u003e`](#newline)\n  - [`\u003cSpacer\u003e`](#spacer)\n  - [`\u003cLink\u003e`](https://github.com/webfansplz/temir/tree/main/packages/temir-link)\n  - [`\u003cTab\u003e`](https://github.com/webfansplz/temir/tree/main/packages/temir-tab)\n  - [`\u003cSpinner\u003e`](https://github.com/webfansplz/temir/tree/main/packages/temir-spinner)\n  - [`\u003cSelectInput\u003e`](https://github.com/webfansplz/temir/tree/main/packages/temir-select-input)\n  - 💻 Still working and welcome to contribute.\n\n- [Examples](https://github.com/webfansplz/temir/tree/main/examples)\n  - [hi-temir](https://github.com/webfansplz/temir/tree/main/examples/hi-temir)  \n    ![](./media/hi-temir.png)\n  - [borders](https://github.com/webfansplz/temir/tree/main/examples/borders)   \n    ![](./media/temir-borders.png)\n  - [table](https://github.com/webfansplz/temir/tree/main/examples/table)   \n    ![](./media/temir-table.png)\n  - [temir-link](https://github.com/webfansplz/temir/tree/main/examples/temir-link)   \n    ![](./packages/temir-link/media/temir-link.png)\n  - [temir-spinner](https://github.com/webfansplz/temir/tree/main/examples/temir-spinner)   \n    ![](./packages/temir-spinner/media/temir-spinner.gif)\n  - [temir-tab](https://github.com/webfansplz/temir/tree/main/examples/temir-tab)   \n    ![](./packages/temir-tab/media/temir-tab.gif)\n  - [temir-select-input](https://github.com/webfansplz/temir/tree/main/examples/temir-select-input)   \n    ![](./packages/temir-select-input/media/temir-select-input.gif)\n  - [Vitest](https://github.com/webfansplz/temir/tree/main/examples/vitest)  \n    ![](./media/temir-vitest.gif)\n\n## Getting Started\n\nUse `@temir/cli` to quickly scaffold a new Temir-based CLI.\n\n```sh\n\nmkdir my-temir-cli\n\ncd my-temir-cli\n\ntouch main.ts\n\nnpm install @temir/cli\n\n# Dev\n\ntemir main.ts\n\n# Build\n\ntemir build main.ts\n```\n\nYou 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)\n\nTemir 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 \u003cdiv\u003e in the browser had display: flex. See \u003cBox\u003e built-in component below for documentation on how to use Flexbox layouts in Ink. Note that all text must be wrapped in a \u003cText\u003e component.\n\n## Components\n\n### `\u003cText\u003e`\n\nThis component can display text, and change its style to make it bold, underline, italic or strikethrough.\n\n\n![temir-text-props](./media/temir-text-props.png)\n\n```vue\n\u003cTText color=\"green\"\u003e\n  I am green\n\u003c/TText\u003e\n\n\u003cTText color=\"black\" background-color=\"white\"\u003e\n  I am black on white\n\u003c/TText\u003e\n\n\u003cTText color=\"white\"\u003e\n  I am white\n\u003c/TText\u003e\n\n\u003cTText bold\u003e\n  I am bold\n\u003c/TText\u003e\n\n\u003cTText italic\u003e\n  I am italic\n\u003c/TText\u003e\n\n\u003cTText underline\u003e\n  I am underline\n\u003c/TText\u003e\n\n\u003cTText strikethrough\u003e\n  I am strikethrough\n\u003c/TText\u003e\n\n\u003cTText inverse\u003e\n  I am inversed\n\u003c/TText\u003e\n\n```\n\n**Note:** `\u003cText\u003e` allows only text nodes and nested `\u003cText\u003e` components inside of it. For example, `\u003cBox\u003e` component can't be used inside `\u003cText\u003e`.\n\n#### color\n\nType: `string`\n\nChange text color.\nTemir uses [chalk](https://github.com/chalk/chalk) under the hood, so all its functionality is supported.\n\n```vue\n\u003cTBox flex-direction=\"column\"\u003e\n  \u003cTText color=\"green\"\u003e\n    Green\n  \u003c/TText\u003e\n  \u003cTText color=\"blue\"\u003e\n    Blue\n  \u003c/TText\u003e\n  \u003cTText color=\"red\"\u003e\n    Red\n  \u003c/TText\u003e\n\u003c/TBox\u003e\n```\n\n\u003cimg src=\"./media/temir-text-props-color.png\" /\u003e\n\n#### backgroundColor\n\nType: `string`\n\nSame as `color` above, but for background.\n\n```vue\n\u003cTBox flex-direction=\"column\"\u003e\n  \u003cTText background-color=\"green\"\u003e\n    Green\n  \u003c/TText\u003e\n  \u003cTText background-color=\"blue\"\u003e\n    Blue\n  \u003c/TText\u003e\n  \u003cTText background-color=\"red\"\u003e\n    Red\n  \u003c/TText\u003e\n\u003c/TBox\u003e\n\n```\n\n\u003cimg src=\"./media/temir-text-bg-color.png\" /\u003e\n\n#### dimColor\n\nType: `boolean`\\\nDefault: `false`\n\nDim the color (emit a small amount of light).\n\n```vue\n\u003cText color=\"red\" dimColor\u003e\n\tDimmed Red\n\u003c/Text\u003e\n```\n\n\u003cimg src=\"./media/temir-text-props-dimmed-color.png\" /\u003e\n\n#### bold\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text bold.\n\n#### italic\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text italic.\n\n#### underline\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text underlined.\n\n#### strikethrough\n\nType: `boolean`\\\nDefault: `false`\n\nMake the text crossed with a line.\n\n#### inverse\n\nType: `boolean`\\\nDefault: `false`\n\nInverse background and foreground colors.\n\n```vue\n\u003cTText color=\"yellow\" inverse\u003e\n  Inversed Yellow\n\u003c/TText\u003e\n```\n\n\u003cimg src=\"./media/text-inverse.png\"/\u003e\n\n#### wrap\n\nType: `string`\\\nAllowed values: `wrap` `truncate` `truncate-start` `truncate-middle` `truncate-end`\\\nDefault: `wrap`\n\nThis property tells Temir to wrap or truncate text if its width is larger than container.\nIf `wrap` is passed (by default), Temir will wrap text and split it into multiple lines.\nIf `truncate-*` is passed, Temir will truncate text instead, which will result in one line of text with the rest cut off.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"7\"\u003e\n    \u003cTText\u003eHello World\u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'Hello\\nWorld'\n\n  // `truncate` is an alias to `truncate-end`\n  \u003cTBox :width=\"7\"\u003e\n    \u003cTText wrap=\"truncate\"\u003e\n      Hello World\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'Hello…'\n\n  \u003cTBox :width=\"7\"\u003e\n    \u003cTText wrap=\"truncate-middle\"\u003e\n      Hello World\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'He…ld'\n\n  \u003cTBox :width=\"7\"\u003e\n    \u003cTText wrap=\"truncate-start\"\u003e\n      Hello World\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e '…World'\n\u003c/template\u003e\n```\n\n### `\u003cBox\u003e`\n\n`\u003cBox\u003e` is an essential Temir component to build your layout.\nIt's like `\u003cdiv style=\"display: flex\"\u003e` in the browser.\n\n```vue\n\u003cscript\u003e\nimport { TBox, TText } from '@temir/core'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTBox :margin=\"2\"\u003e\n    \u003cTText\u003eThis is a box with margin\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n#### Dimensions\n\n##### width\n\nType: `number` `string`\n\nWidth of the element in spaces.\nYou can also set it in percent, which will calculate the width based on the width of parent element.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"4\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  //=\u003e 'X   '\n\u003c/template\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"10\"\u003e\n    \u003cTBox width=\"50%\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      Y\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  //=\u003e 'X    Y'\n\u003c/template\u003e\n```\n\n##### height\n\nType: `number` `string`\n\nHeight of the element in lines (rows).\nYou can also set it in percent, which will calculate the height based on the height of parent element.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :height=\"4\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'X\\n\\n\\n'\n\u003c/template\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :height=\"6\" flex-direction=\"column\"\u003e\n    \u003cTBox height=\"50%\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      Y\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'X\\n\\n\\nY\\n\\n'\n\u003c/template\u003e\n```\n\n##### minWidth\n\nType: `number`\n\nSets a minimum width of the element.\nPercentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.\n\n##### minHeight\n\nType: `number`\n\nSets a minimum height of the element.\nPercentages aren't supported yet, see https://github.com/facebook/yoga/issues/872.\n\n#### Padding\n\n##### paddingTop\n\nType: `number`\\\nDefault: `0`\n\nTop padding.\n\n##### paddingBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom padding.\n\n##### paddingLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft padding.\n\n##### paddingRight\n\nType: `number`\\\nDefault: `0`\n\nRight padding.\n\n##### paddingX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`.\n\n##### paddingY\n\nType: `number`\\\nDefault: `0`\n\nVertical padding. Equivalent to setting `paddingTop` and `paddingBottom`.\n\n##### padding\n\nType: `number`\\\nDefault: `0`\n\nPadding on all sides. Equivalent to setting `paddingTop`, `paddingBottom`, `paddingLeft` and `paddingRight`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :padding-top=\"2\"\u003e\n    \u003cTText\u003eTop\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding-bottom=\"2\"\u003e\n    \u003cTText\u003eBottom\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding-left=\"2\"\u003e\n    \u003cTText\u003eLeft\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding-right=\"2\"\u003e\n    \u003cTText\u003eRight\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding-x=\"2\"\u003e\n    \u003cTText\u003eLeft and right\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding-y=\"2\"\u003e\n    \u003cTText\u003eTop and bottom\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :padding=\"2\"\u003e\n    \u003cTText\u003eTop, bottom, left and right\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n\n```\n\n#### Margin\n\n##### marginTop\n\nType: `number`\\\nDefault: `0`\n\nTop margin.\n\n##### marginBottom\n\nType: `number`\\\nDefault: `0`\n\nBottom margin.\n\n##### marginLeft\n\nType: `number`\\\nDefault: `0`\n\nLeft margin.\n\n##### marginRight\n\nType: `number`\\\nDefault: `0`\n\nRight margin.\n\n##### marginX\n\nType: `number`\\\nDefault: `0`\n\nHorizontal margin. Equivalent to setting `marginLeft` and `marginRight`.\n\n##### marginY\n\nType: `number`\\\nDefault: `0`\n\nVertical margin. Equivalent to setting `marginTop` and `marginBottom`.\n\n##### margin\n\nType: `number`\\\nDefault: `0`\n\nMargin on all sides. Equivalent to setting `marginTop`, `marginBottom`, `marginLeft` and `marginRight`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :margin-top=\"2\"\u003e\n    \u003cTText\u003eTop\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin-bottom=\"2\"\u003e\n    \u003cTText\u003eBottom\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin-left=\"2\"\u003e\n    \u003cTText\u003eLeft\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin-right=\"2\"\u003e\n    \u003cTText\u003eRight\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin-x=\"2\"\u003e\n    \u003cTText\u003eLeft and right\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin-y=\"2\"\u003e\n    \u003cTText\u003eTop and bottom\u003c/TText\u003e\n  \u003c/TBox\u003e\n\n  \u003cTBox :margin=\"2\"\u003e\n    \u003cTText\u003eTop, bottom, left and right\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n#### Flex\n\n##### flexGrow\n\nType: `number`\\\nDefault: `0`\n\nSee [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox\u003e\n    \u003cTText\u003eLabel:\u003c/TText\u003e\n    \u003cTBox :flex-grow=\"1\"\u003e\n      \u003cTText\u003eFills all remaining space\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n##### flexShrink\n\nType: `number`\\\nDefault: `1`\n\nSee [flex-shrink](https://css-tricks.com/almanac/properties/f/flex-shrink/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"20\"\u003e\n    \u003cTBox :flex-shrink=\"2\" :width=\"10\"\u003e\n      \u003cTText\u003eWill be 1/4\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTBox :width=\"10\"\u003e\n      \u003cTText\u003eWill be 3/4\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n##### flexBasis\n\nType: `number` `string`\n\nSee [flex-basis](https://css-tricks.com/almanac/properties/f/flex-basis/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"6\"\u003e\n    \u003cTBox :flex-basis=\"3\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      Y\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'X  Y'\n\u003c/template\u003e\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :width=\"6\"\u003e\n    \u003cTBox flex-basis=\"50%\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      Y\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //=\u003e 'X  Y'\n\u003c/template\u003e\n```\n\n##### flexDirection\n\nType: `string`\\\nAllowed values: `row` `row-reverse` `column` `column-reverse`\n\nSee [flex-direction](https://css-tricks.com/almanac/properties/f/flex-direction/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox\u003e\n    \u003cTBox :margin-right=\"1\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      Y\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  // X Y\n\n  \u003cTBox flex-direction=\"row-reverse\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n    \u003cTBox :margin-right=\"1\"\u003e\n      \u003cTText\u003eY\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n  // Y X\n\n  \u003cTBox flex-direction=\"column\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n    \u003cTText\u003eY\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // X\n  // Y\n\n  \u003cTBox flex-direction=\"column-reverse\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n    \u003cTText\u003eY\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // Y\n  // X\n\u003c/template\u003e\n```\n\n##### alignItems\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end`\n\nSee [align-items](https://css-tricks.com/almanac/properties/a/align-items/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox align-items=\"flex-start\"\u003e\n    \u003cTBox :margin-right=\"1\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      A\n      \u003cTNewline /\u003e\n      B\n      \u003cTNewline /\u003e\n      C\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  // X A\n  //   B\n  //   C\n\n  \u003cTBox align-items=\"center\"\u003e\n    \u003cTBox margin-right=\"1\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      A\n      \u003cTNewline /\u003e\n      B\n      \u003cTNewline /\u003e\n      C\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //   A\n  // X B\n  //   C\n\n  \u003cTBox align-items=\"flex-end\"\u003e\n    \u003cTBox margin-right=\"1\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n\n    \u003cTText\u003e\n      A\n      \u003cTNewline /\u003e\n      B\n      \u003cTNewline /\u003e\n      C\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n  //   A\n  //   B\n  // X C\n\u003c/template\u003e\n```\n\n##### alignSelf\n\nType: `string`\\\nDefault: `auto`\\\nAllowed values: `auto` `flex-start` `center` `flex-end`\n\nSee [align-self](https://css-tricks.com/almanac/properties/a/align-self/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox :height=\"3\"\u003e\n    \u003cTBox align-self=\"flex-start\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n  // X\n  //\n  //\n\n  \u003cTBox :height=\"3\"\u003e\n    \u003cTBox align-self=\"center\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n  //\n  // X\n  //\n\n  \u003cTBox :height=\"3\"\u003e\n    \u003cTBox align-self=\"flex-end\"\u003e\n      \u003cTText\u003eX\u003c/TText\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n  //\n  //\n  // X\n\u003c/template\u003e\n```\n\n##### justifyContent\n\nType: `string`\\\nAllowed values: `flex-start` `center` `flex-end` `space-between` `space-around`\n\nSee [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox justify-content=\"flex-start\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // [X      ]\n\n  \u003cTBox justify-content=\"center\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // [   X   ]\n\n  \u003cTBox justify-content=\"flex-end\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // [      X]\n\n  \u003cTBox justify-content=\"space-between\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n    \u003cTText\u003eY\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // [X      Y]\n\n  \u003cTBox justify-content=\"space-around\"\u003e\n    \u003cTText\u003eX\u003c/TText\u003e\n    \u003cTText\u003eY\u003c/TText\u003e\n  \u003c/TBox\u003e\n  // [  X   Y  ]\n\u003c/template\u003e\n```\n\n#### Visibility\n\n##### display\n\nType: `string`\\\nAllowed values: `flex` `none`\\\nDefault: `flex`\n\nSet this property to `none` to hide the element.\n\n#### Borders\n\n##### borderStyle\n\nType: `string`\\\nAllowed values: `single` `double` `round` `bold` `singleDouble` `doubleSingle` `classic`\n\nAdd a border with a specified style.\nIf `borderStyle` is `undefined` (which it is by default), no border will be added.\nTemir uses border styles from [`cli-boxes`](https://github.com/sindresorhus/cli-boxes) module.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox flex-direction=\"column\"\u003e\n    \u003cTBox\u003e\n      \u003cTBox border-style=\"single\" :margin-right=\"2\"\u003e\n        \u003cTText\u003esingle\u003c/TText\u003e\n      \u003c/TBox\u003e\n\n      \u003cTBox border-style=\"double\" :margin-right=\"2\"\u003e\n        \u003cTText\u003edouble\u003c/TText\u003e\n      \u003c/TBox\u003e\n\n      \u003cTBox border-style=\"round\" :margin-right=\"2\"\u003e\n        \u003cTText\u003eround\u003c/TText\u003e\n      \u003c/TBox\u003e\n\n      \u003cTBox border-style=\"bold\"\u003e\n        \u003cTText\u003ebold\u003c/TText\u003e\n      \u003c/TBox\u003e\n    \u003c/TBox\u003e\n\n    \u003cTBox :margin-top=\"1\"\u003e\n      \u003cTBox border-style=\"singleDouble\" :margin-right=\"2\"\u003e\n        \u003cTText\u003esingleDouble\u003c/TText\u003e\n      \u003c/TBox\u003e\n\n      \u003cTBox border-style=\"doubleSingle\" :margin-right=\"2\"\u003e\n        \u003cTText\u003edoubleSingle\u003c/TText\u003e\n      \u003c/TBox\u003e\n\n      \u003cTBox border-style=\"classic\"\u003e\n        \u003cTText\u003eclassic\u003c/TText\u003e\n      \u003c/TBox\u003e\n    \u003c/TBox\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n\n##### borderColor\n\nType: `string`\n\nChange border color.\nAccepts the same values as [`color`](#color) in `\u003cText\u003e` component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cTBox border-style=\"round\" border-color=\"green\"\u003e\n    \u003cTText\u003eGreen Rounded Box\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n```\n\n### `\u003cNewline\u003e`\n\nAdds one or more newline (`\\n`) characters.\nMust be used within `\u003cText\u003e` components.\n\n#### count\n\nType: `number`\\\nDefault: `1`\n\nNumber of newlines to insert.\n\n```vue\n\u003cscript\u003e\nimport { TBox, TNewline, TText } from '@temir/core'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTBox\u003e\n    \u003cTText\u003e\n      \u003cTText color=\"green\"\u003e\n        Hello\n      \u003c/TText\u003e\n      \u003cTNewline /\u003e\n      \u003cTText color=\"red\"\u003e\n        World\n      \u003c/TText\u003e\n    \u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n\n```\n\nOutput:\n\n```\nHello\nWorld\n```\n\n### `\u003cSpacer\u003e`\n\nA flexible space that expands along the major axis of its containing layout.\nIt's useful as a shortcut for filling all the available spaces between elements.\n\nFor example, using `\u003cSpacer\u003e` in a `\u003cBox\u003e` with default flex direction (`row`) will position \"Left\" on the left side and will push \"Right\" to the right side.\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { TBox, TSpacer, TText } from '@temir/core'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTBox\u003e\n    \u003cTText\u003eLeft\u003c/TText\u003e\n    \u003cTSpacer /\u003e\n    \u003cTText\u003eRight\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n\n```\n\nIn a vertical flex direction (`column`), it will position \"Top\" to the top of the container and push \"Bottom\" to the bottom of it.\nNote, that container needs to be tall to enough to see this in effect.\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { TBox, TSpacer, TText } from '@temir/core'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cTBox flex-direction=\"column\" :height=\"10\"\u003e\n    \u003cTText\u003eTop\u003c/TText\u003e\n    \u003cTSpacer /\u003e\n    \u003cTText\u003eBottom\u003c/TText\u003e\n  \u003c/TBox\u003e\n\u003c/template\u003e\n\n```\n\n## Credits\n\nThis project is highly inspired by [ink](https://github.com/vadimdemedes/ink)\n\n[vite-node](https://github.com/antfu/vite-node) made the HMR support easily\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfansplz%2Ftemir","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebfansplz%2Ftemir","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfansplz%2Ftemir/lists"}