{"id":50823277,"url":"https://github.com/sunsided/svelte-tui","last_synced_at":"2026-06-13T16:10:45.914Z","repository":{"id":350537131,"uuid":"1206906755","full_name":"sunsided/svelte-tui","owner":"sunsided","description":"Retro Svelte TUI","archived":false,"fork":false,"pushed_at":"2026-05-09T13:04:30.000Z","size":1376,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-09T15:09:53.548Z","etag":null,"topics":["retro","retrocomputing","svelte","tuicss","turbovision"],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sunsided.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-10T11:25:08.000Z","updated_at":"2026-05-09T13:04:33.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/sunsided/svelte-tui","commit_stats":null,"previous_names":["sunsided/svelte-tui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sunsided/svelte-tui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunsided%2Fsvelte-tui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunsided%2Fsvelte-tui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunsided%2Fsvelte-tui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunsided%2Fsvelte-tui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sunsided","download_url":"https://codeload.github.com/sunsided/svelte-tui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sunsided%2Fsvelte-tui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34290604,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"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":["retro","retrocomputing","svelte","tuicss","turbovision"],"created_at":"2026-06-13T16:10:45.177Z","updated_at":"2026-06-13T16:10:45.908Z","avatar_url":"https://github.com/sunsided.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svelte-tui\n\nA SvelteKit component library that migrates [TuiCss](https://github.com/vinibiavatti1/TuiCss) to reusable, pluggable and configurable Svelte 5 components. Recreate the retro MS-DOS / Turbo Vision aesthetic in your web apps.\n\n![svelte-tui showcase](https://github.com/user-attachments/assets/c3833f87-8b5a-4dc5-8e38-af52f2425f58)\n\n## Components\n\n| Component        | Description                                                             |\n| ---------------- | ----------------------------------------------------------------------- |\n| `TuiButton`      | Retro-style button with shadow and active state                         |\n| `TuiCheckbox`    | ASCII checkbox using `[ ]` / `[√]` characters                           |\n| `TuiDivider`     | Horizontal rule (white or black variant)                                |\n| `TuiDropdown`    | Hover-activated dropdown menu                                           |\n| `TuiFieldset`    | Double-bordered fieldset with optional legend, close/resize buttons     |\n| `TuiInput`       | Dark text input that highlights yellow on focus                         |\n| `TuiModal`       | Centered modal dialog with overlay and close button                     |\n| `TuiNav`         | Fixed top navigation bar                                                |\n| `TuiPanel`       | Blue panel with optional header                                         |\n| `TuiProgressBar` | Progress bar with optional label / indeterminate mode                   |\n| `TuiRadio`       | ASCII radio button using `( )` / `(•)` characters                       |\n| `TuiSideNav`     | Slide-in side navigation panel                                          |\n| `TuiStatusBar`   | Fixed bottom status bar with shortcut key support                       |\n| `TuiTable`       | Table with optional hover and stripe styles                             |\n| `TuiTabs`        | Tab strip with active tab slot content                                  |\n| `TuiTextarea`    | Yellow-on-inherit resizable textarea                                    |\n| `TuiWindow`      | Floating double-border window with TV-style title, close/resize buttons |\n\n## Installation\n\n```bash\nnpm install svelte-tui\n```\n\n## Usage\n\nImport the theme CSS once (e.g. in your root layout):\n\n```svelte\n\u003c!-- src/routes/+layout.svelte --\u003e\n\u003cscript\u003e\n  import 'svelte-tui/theme.css';\n\u003c/script\u003e\n```\n\nThen use any component:\n\n```svelte\n\u003cscript\u003e\n  import { TuiButton, TuiWindow, TuiInput, TuiModal } from 'svelte-tui';\n  let name = $state('');\n  let showModal = $state(false);\n\u003c/script\u003e\n\n\u003cTuiWindow title=\"Login\" closable resizable\u003e\n  \u003cTuiInput bind:value={name} placeholder=\"Username\" /\u003e\n  \u003cTuiButton onclick={() =\u003e (showModal = true)}\u003eLogin\u003c/TuiButton\u003e\n\u003c/TuiWindow\u003e\n\n\u003cTuiModal bind:open={showModal} title=\"Welcome\"\u003e\n  \u003cp\u003eHello, {name}!\u003c/p\u003e\n  \u003cTuiButton onclick={() =\u003e (showModal = false)}\u003eOK\u003c/TuiButton\u003e\n\u003c/TuiModal\u003e\n```\n\nA full Turbo Vision desktop demo is available at `/turbo-vision` in the development server.\n\n## Theming\n\nAll colors are driven by CSS custom properties defined in `theme.css`. Override them in your own stylesheet to customise the look:\n\n```css\n:root {\n  --tui-button-bg: rgb(168, 0, 0); /* red buttons */\n  --tui-window-bg: rgb(0, 168, 0); /* green windows */\n  --tui-nav-bg: rgb(0, 0, 168); /* blue nav bar */\n}\n```\n\n### Available CSS variables\n\n| Variable                  | Default              | Controls                  |\n| ------------------------- | -------------------- | ------------------------- |\n| `--tui-button-bg`         | `rgb(0, 168, 0)`     | Button background         |\n| `--tui-button-color`      | `black`              | Button text colour        |\n| `--tui-button-active-bg`  | `rgb(0, 168, 168)`   | Button active background  |\n| `--tui-window-bg`         | `rgb(0, 0, 168)`     | Window background         |\n| `--tui-panel-bg`          | `rgb(0, 0, 168)`     | Panel background          |\n| `--tui-input-bg`          | `rgb(0, 0, 0)`       | Input background          |\n| `--tui-input-color`       | `white`              | Input text colour         |\n| `--tui-input-focus-bg`    | `rgb(255, 255, 0)`   | Input focused background  |\n| `--tui-textarea-color`    | `rgb(255, 255, 0)`   | Textarea text colour      |\n| `--tui-progress-track-bg` | `rgb(0, 168, 168)`   | Progress bar track        |\n| `--tui-progress-bg`       | `rgb(0, 255, 255)`   | Progress bar fill         |\n| `--tui-nav-bg`            | `rgb(168, 168, 168)` | Navigation bar background |\n| `--tui-statusbar-bg`      | `rgb(168, 168, 168)` | Status bar background     |\n| `--tui-tabs-bg`           | `rgb(0, 0, 168)`     | Tabs strip background     |\n| `--tui-sidenav-bg`        | `rgb(0, 168, 168)`   | Side nav background       |\n\n### `TuiWindow` props\n\n| Prop        | Type         | Default | Description                              |\n| ----------- | ------------ | ------- | ---------------------------------------- |\n| `title`     | `string`     | —       | Centered legend/title text               |\n| `fullWidth` | `boolean`    | `false` | Stretch to 100% width                    |\n| `noShadow`  | `boolean`    | `false` | Remove drop shadow                       |\n| `closable`  | `boolean`    | `false` | Show close `[■]` button (top-right)      |\n| `resizable` | `boolean`    | `false` | Show resize `[↕]` button (top-left)      |\n| `onclose`   | `() =\u003e void` | —       | Callback fired when close button clicked |\n\n### `TuiFieldset` props\n\n| Prop           | Type         | Default | Description                              |\n| -------------- | ------------ | ------- | ---------------------------------------- |\n| `legend`       | `string`     | —       | Legend text                              |\n| `legendCenter` | `boolean`    | `false` | Center-align the legend                  |\n| `closable`     | `boolean`    | `false` | Show close `[■]` button (top-right)      |\n| `resizable`    | `boolean`    | `false` | Show resize `[↕]` button (top-left)      |\n| `onclose`      | `() =\u003e void` | —       | Callback fired when close button clicked |\n\n### `TuiModal` props\n\n| Prop      | Type                 | Default | Description                  |\n| --------- | -------------------- | ------- | ---------------------------- |\n| `open`    | `boolean` (bindable) | `false` | Whether the modal is visible |\n| `title`   | `string`             | —       | Modal window title           |\n| `onclose` | `() =\u003e void`         | —       | Callback fired on close      |\n\n## Development\n\nThis project uses **Yarn** as its package manager. Prefer using task commands over direct `yarn` invocations when available.\n\n```bash\nyarn install       # install dependencies\nyarn dev           # start showcase app on http://localhost:5173\nyarn build         # build library to dist/\nyarn check         # type-check with svelte-check\nyarn lint          # lint with ESLint + Prettier\nyarn test          # run component tests with Vitest\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunsided%2Fsvelte-tui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsunsided%2Fsvelte-tui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsunsided%2Fsvelte-tui/lists"}