{"id":13479147,"url":"https://github.com/vadimdemedes/ink-ui","last_synced_at":"2025-05-14T18:00:20.031Z","repository":{"id":162867630,"uuid":"633415187","full_name":"vadimdemedes/ink-ui","owner":"vadimdemedes","description":"💄 Ink-redible command-line interfaces made easy","archived":false,"fork":false,"pushed_at":"2024-05-22T12:20:07.000Z","size":3548,"stargazers_count":1639,"open_issues_count":10,"forks_count":17,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-10T22:29:23.488Z","etag":null,"topics":["ink","react","terminal","tui","tuikit","ui","uikit"],"latest_commit_sha":null,"homepage":"https://term.ink/ui","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/vadimdemedes.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"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,"dei":null,"publiccode":null,"codemeta":null},"funding":{"open_collective":"vadimdemedes","custom":"https://www.comebackalive.in.ua"}},"created_at":"2023-04-27T12:56:48.000Z","updated_at":"2025-05-08T02:38:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"dd1697e0-00df-4251-9741-123752dd121b","html_url":"https://github.com/vadimdemedes/ink-ui","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":"0.33333333333333337","last_synced_commit":"14b1145da0123a48cfc2f0ec9ff33dff0633f464"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Fink-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Fink-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Fink-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Fink-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadimdemedes","download_url":"https://codeload.github.com/vadimdemedes/ink-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253627781,"owners_count":21938553,"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","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":["ink","react","terminal","tui","tuikit","ui","uikit"],"created_at":"2024-07-31T16:02:10.376Z","updated_at":"2025-05-14T18:00:18.522Z","avatar_url":"https://github.com/vadimdemedes.png","language":"TypeScript","funding_links":["https://opencollective.com/vadimdemedes","https://www.comebackalive.in.ua"],"categories":["TypeScript","ui"],"sub_categories":[],"readme":"[![](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n\n# Ink UI [![test](https://github.com/vadimdemedes/ink-ui/actions/workflows/test.yml/badge.svg)](https://github.com/vadimdemedes/ink-ui/actions/workflows/test.yml)\n\n\u003e Collection of customizable UI components for CLIs made with [Ink](https://term.ink).\n\n## Install\n\n```sh\nnpm install @inkjs/ui\n```\n\n_This assumes you've already set up [Ink](https://term.ink). The easiest way to get started is [create-ink-app](https://github.com/vadimdemedes/create-ink-app)._\n\n## Components\n\n### Text input\n\n[Documentation](docs/text-input.md)\n\n`TextInput` is used for entering any single-line input with an optional autocomplete.\n\n```jsx\nimport {TextInput} from '@inkjs/ui';\n\n\u003cTextInput\n\tplaceholder=\"Enter your name...\"\n\tonSubmit={name =\u003e {\n\t\t// `name` contains user input\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/text-input.gif\" width=\"400\"\u003e\n\n### Email input\n\n[Documentation](docs/email-input.md)\n\n`EmailInput` is used for entering an email. After \"@\" character is entered, domain can be autocompleted from the list of most popular email providers.\n\n```jsx\nimport {EmailInput} from '@inkjs/ui';\n\n\u003cEmailInput\n\tplaceholder=\"Enter email...\"\n\tonSubmit={email =\u003e {\n\t\t// `email` contains user input\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/email-input.gif\" width=\"400\"\u003e\n\n### Password input\n\n[Documentation](docs/password-input.md)\n\n`PasswordInput` is used for entering sensitive data, like passwords, API keys and so on. It works the same way as `TextInput`, except input value is masked and replaced with asterisks (\"\\*\").\n\n```jsx\nimport {PasswordInput} from '@inkjs/ui';\n\n\u003cPasswordInput\n\tplaceholder=\"Enter password...\"\n\tonSubmit={password =\u003e {\n\t\t// `password` contains user input\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/password-input.gif\" width=\"400\"\u003e\n\n### Confirm input\n\n[Documentation](docs/confirm-input.md)\n\n`ConfirmInput` shows a common \"Y/n\" input to confirm or cancel an operation your CLI wants to perform.\n\n```jsx\nimport {ConfirmInput} from '@inkjs/ui';\n\n\u003cConfirmInput\n\tonConfirm={() =\u003e {\n\t\t// confirmed\n\t}}\n\tonCancel={() =\u003e {\n\t\t// cancelled\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/confirm-input.png\" width=\"200\"\u003e\n\n### Select\n\n[Documentation](docs/select.md)\n\n`Select` shows a scrollable list of options for a user to choose from.\n\n```jsx\nimport {Select} from '@inkjs/ui';\n\n\u003cSelect\n\toptions={[\n\t\t{\n\t\t\tlabel: 'Red',\n\t\t\tvalue: 'red',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Green',\n\t\t\tvalue: 'green',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Yellow',\n\t\t\tvalue: 'yellow',\n\t\t},\n\t\t/* ... */\n\t]}\n\tonChange={newValue =\u003e {\n\t\t// `newValue` equals the `value` field of the selected option\n\t\t// For example, \"yellow\"\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/select.gif\" width=\"400\"\u003e\n\n### Multi select\n\n[Documentation](docs/multi-select.md)\n\n`MultiSelect` is similar to `Select`, except user can choose multiple options.\n\n```jsx\nimport {MultiSelect} from '@inkjs/ui';\n\n\u003cMultiSelect\n\toptions={[\n\t\t{\n\t\t\tlabel: 'Red',\n\t\t\tvalue: 'red',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Green',\n\t\t\tvalue: 'green',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Yellow',\n\t\t\tvalue: 'yellow',\n\t\t},\n\t\t/* ... */\n\t]}\n\tonChange={newValue =\u003e {\n\t\t// `newValue` is an array of `value` fields of the selected options\n\t\t// For example, [\"green\", \"yellow\"]\n\t}}\n/\u003e;\n```\n\n\u003cimg src=\"media/multi-select.gif\" width=\"400\"\u003e\n\n### Spinner\n\n[Documentation](docs/spinner.md)\n\n`Spinner` indicates that something is being processed and CLI is waiting for it to complete.\n\n```jsx\nimport {Spinner} from '@inkjs/ui';\n\n\u003cSpinner label=\"Loading\" /\u003e;\n```\n\n\u003cimg src=\"media/spinner.gif\" width=\"400\"\u003e\n\n### Progress bar\n\n[Documentation](docs/progress-bar.md)\n\n`ProgressBar` is an extended version of `Spinner`, where it's possible to calculate a progress percentage.\n\n```jsx\nimport {ProgressBar} from '@inkjs/ui';\n\n// `progress` must be a number between 0 and 100\n\u003cProgressBar value={progress} /\u003e;\n```\n\n\u003cimg src=\"media/progress-bar.gif\" width=\"400\"\u003e\n\n### Badge\n\n[Documentation](docs/badge.md)\n\n`Badge` can be used to indicate a status of a certain item, usually positioned nearby the element it's related to.\n\n```jsx\nimport {Badge} from '@inkjs/ui';\n\n\u003cBadge color=\"green\"\u003ePass\u003c/Badge\u003e\n\u003cBadge color=\"red\"\u003eFail\u003c/Badge\u003e\n\u003cBadge color=\"yellow\"\u003eWarn\u003c/Badge\u003e\n\u003cBadge color=\"blue\"\u003eTodo\u003c/Badge\u003e\n```\n\n\u003cimg src=\"media/badge.png\" width=\"400\"\u003e\n\n### Status message\n\n[Documentation](docs/status-message.md)\n\n`StatusMessage` can also be used to indicate a status, but when longer explanation of such status is required.\n\n```jsx\nimport {StatusMessage} from '@inkjs/ui';\n\n\u003cStatusMessage variant=\"success\"\u003e\n\tNew version is deployed to production\n\u003c/StatusMessage\u003e\n\n\u003cStatusMessage variant=\"error\"\u003e\n  Failed to deploy a new version of this app\n\u003c/StatusMessage\u003e\n\n\u003cStatusMessage variant=\"warning\"\u003e\n    Health checks aren't configured\n\u003c/StatusMessage\u003e\n\n\u003cStatusMessage variant=\"info\"\u003e\n    This version is already deployed\n\u003c/StatusMessage\u003e\n```\n\n\u003cimg src=\"media/status-message.png\" width=\"400\"\u003e\n\n### Alert\n\n[Documentation](docs/alert.md)\n\n`Alert` is used to focus user's attention to important messages.\n\n```jsx\nimport {Alert} from '@inkjs/ui';\n\n\u003cAlert variant=\"success\"\u003e\n    A new version of this CLI is available\n\u003c/Alert\u003e\n\n\u003cAlert variant=\"error\"\u003e\n    Your license is expired\n\u003c/Alert\u003e\n\n\u003cAlert variant=\"warning\"\u003e\n    Current version of this CLI has been deprecated\n\u003c/Alert\u003e\n\n\u003cAlert variant=\"info\"\u003e\n    API won't be available tomorrow night\n\u003c/Alert\u003e\n```\n\n\u003cimg src=\"media/alert.png\" width=\"600\"\u003e\n\n### Unordered list\n\n[Documentation](docs/unordered-list.md)\n\n`UnorderedList` is used to show lists of items.\n\n```jsx\nimport {UnorderedList} from '@inkjs/ui';\n\n\u003cUnorderedList\u003e\n\t\u003cUnorderedList.Item\u003e\n\t\t\u003cText\u003eRed\u003c/Text\u003e\n\t\u003c/UnorderedList.Item\u003e\n\n\t\u003cUnorderedList.Item\u003e\n\t\t\u003cText\u003eGreen\u003c/Text\u003e\n\n\t\t\u003cUnorderedList\u003e\n\t\t\t\u003cUnorderedList.Item\u003e\n\t\t\t\t\u003cText\u003eLight\u003c/Text\u003e\n\t\t\t\u003c/UnorderedList.Item\u003e\n\n\t\t\t\u003cUnorderedList.Item\u003e\n\t\t\t\t\u003cText\u003eDark\u003c/Text\u003e\n\t\t\t\u003c/UnorderedList.Item\u003e\n\t\t\u003c/UnorderedList\u003e\n\t\u003c/UnorderedList.Item\u003e\n\n\t\u003cUnorderedList.Item\u003e\n\t\t\u003cText\u003eBlue\u003c/Text\u003e\n\t\u003c/UnorderedList.Item\u003e\n\u003c/UnorderedList\u003e;\n```\n\n\u003cimg src=\"media/unordered-list.png\" width=\"400\"\u003e\n\n### Ordered list\n\n[Documentation](docs/ordered-list.md)\n\n`OrderedList` is used to show lists of numbered items.\n\n```jsx\nimport {OrderedList} from '@inkjs/ui';\n\n\u003cOrderedList\u003e\n\t\u003cOrderedList.Item\u003e\n\t\t\u003cText\u003eRed\u003c/Text\u003e\n\t\u003c/OrderedList.Item\u003e\n\n\t\u003cOrderedList.Item\u003e\n\t\t\u003cText\u003eGreen\u003c/Text\u003e\n\n\t\t\u003cOrderedList\u003e\n\t\t\t\u003cOrderedList.Item\u003e\n\t\t\t\t\u003cText\u003eLight\u003c/Text\u003e\n\t\t\t\u003c/OrderedList.Item\u003e\n\n\t\t\t\u003cOrderedList.Item\u003e\n\t\t\t\t\u003cText\u003eDark\u003c/Text\u003e\n\t\t\t\u003c/OrderedList.Item\u003e\n\t\t\u003c/OrderedList\u003e\n\t\u003c/OrderedList.Item\u003e\n\n\t\u003cOrderedList.Item\u003e\n\t\t\u003cText\u003eBlue\u003c/Text\u003e\n\t\u003c/OrderedList.Item\u003e\n\u003c/OrderedList\u003e;\n```\n\n\u003cimg src=\"media/ordered-list.png\" width=\"400\"\u003e\n\n## Theming\n\nAll component have their styles defined in a theme, which is accessible to components via React context. Ink UI ships with a default theme and it can be customized or replaced with a different theme altogether.\n\nLet's get a quick look on how to customize a `Spinner`'s component theme. Here's how it looks by default:\n\n\u003cimg src=\"media/spinner.gif\" width=\"400\"\u003e\n\nFirst, look up component's default theme, which will give an overview which parts does this component consist of. Documentation of each component includes a link to component's `theme.ts` file on top. In the case of `Spinner`, it's [source/components/spinner/theme.ts](source/components/spinner/theme.ts).\n\nHere's the part we care about:\n\n```tsx\nconst theme = {\n\tstyles: {\n\t\tcontainer: (): BoxProps =\u003e ({\n\t\t\tgap: 1,\n\t\t}),\n\t\tframe: (): TextProps =\u003e ({\n\t\t\tcolor: 'blue',\n\t\t}),\n\t\tlabel: (): TextProps =\u003e ({}),\n\t},\n} satisfies ComponentTheme;\n\nexport default theme;\n```\n\nThis component theme hints that `Spinner` has 3 parts: container, frame and a label. So to customize the color of the spinner itself, we'd want to change the `color` prop returned from the `frame` function.\n\nTo customize the default theme, use `extendTheme` function and make that custom theme available to children components via `ThemeProvider`.\n\n```tsx\nimport {render, type TextProps} from 'ink';\nimport {Spinner, ThemeProvider, extendTheme, defaultTheme} from '@inkjs/ui';\n\nconst customTheme = extendTheme(defaultTheme, {\n\tcomponents: {\n\t\tSpinner: {\n\t\t\tstyles: {\n\t\t\t\tframe: (): TextProps =\u003e ({\n\t\t\t\t\tcolor: 'magenta',\n\t\t\t\t}),\n\t\t\t},\n\t\t},\n\t},\n});\n\nfunction Example() {\n\treturn (\n\t\t\u003cThemeProvider theme={customTheme}\u003e\n\t\t\t\u003cSpinner label=\"Loading\" /\u003e\n\t\t\u003c/ThemeProvider\u003e\n\t);\n}\n\nrender(\u003cExample /\u003e);\n```\n\nWith custom theme applied, `Spinner` now renders a magenta spinner, instead of the default blue one.\n\n\u003cimg src=\"media/spinner-theme.gif\" width=\"400\"\u003e\n\nThere are also cases where styles change based on some condition. For example, [`StatusMessage`](docs/status-message.md) changes the color of an icon based on the `variant` prop.\n\nHere's a sample code from its [theme](source/components/status-message/theme.ts).\n\n```ts\nconst colorByVariant = {\n\tsuccess: 'green',\n\terror: 'red',\n\twarning: 'yellow',\n\tinfo: 'blue',\n};\n\nconst theme = {\n\tstyles: {\n\t\ticon: ({variant}) =\u003e ({\n\t\t\tcolor: colorByVariant[variant],\n\t\t}),\n\t},\n};\n```\n\nSince each field in `styles` object is a function, it can return different styles based on the props that were passed in or a state of a component.\n\nComponent themes can also include configuration for rendering a component in a `config` object, that's not related to styling. For example, [`UnorderedList`](docs/unordered-list.md) specifies a `marker`, which is a character that's rendered before each list item.\n\nHere's a sample code from its [theme](source/components/unordered-list/theme.ts).\n\n```ts\nconst theme = {\n\tconfig: () =\u003e ({\n\t\tmarker: '─',\n\t}),\n};\n```\n\n\u003cimg src=\"media/unordered-list.png\" width=\"400\"\u003e\n\nChanging `marker` to `'+'` would render this:\n\n\u003cimg src=\"media/unordered-list-theme.png\" width=\"400\"\u003e\n\nComponents shipped in Ink UI automatically read the necessary styles and configuration from a theme. However, if you're adding a new custom component and a theme for it, use `useComponentTheme` hook to access it.\n\n```tsx\nimport React, {render, Text, type TextProps} from 'ink';\nimport {\n\tThemeProvider,\n\tdefaultTheme,\n\textendTheme,\n\tuseComponentTheme,\n\ttype ComponentTheme,\n} from '@inkjs/ui';\n\nconst customLabelTheme = {\n\tstyles: {\n\t\tlabel: (): TextProps =\u003e ({\n\t\t\tcolor: 'green',\n\t\t}),\n\t},\n} satisfies ComponentTheme;\n\ntype CustomLabelTheme = typeof customLabelTheme;\n\nconst customTheme = extendTheme(defaultTheme, {\n\tcomponents: {\n\t\tCustomLabel: customLabelTheme,\n\t},\n});\n\nfunction CustomLabel() {\n\tconst {styles} = useComponentTheme\u003cCustomLabelTheme\u003e('CustomLabel');\n\n\treturn \u003cText {...styles.label()}\u003eHello world\u003c/Text\u003e;\n}\n\nfunction Example() {\n\treturn (\n\t\t\u003cThemeProvider theme={customTheme}\u003e\n\t\t\t\u003cCustomLabel /\u003e\n\t\t\u003c/ThemeProvider\u003e\n\t);\n}\n\nrender(\u003cExample /\u003e);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimdemedes%2Fink-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadimdemedes%2Fink-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimdemedes%2Fink-ui/lists"}