{"id":20779943,"url":"https://github.com/devklick/termblock","last_synced_at":"2026-04-25T19:31:13.168Z","repository":{"id":167966318,"uuid":"643579078","full_name":"devklick/termblock","owner":"devklick","description":"Small react library for displaying faux terminal commands","archived":false,"fork":false,"pushed_at":"2023-06-03T09:07:49.000Z","size":430,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T11:47:29.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/devklick.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}},"created_at":"2023-05-21T15:58:08.000Z","updated_at":"2023-05-21T16:51:30.000Z","dependencies_parsed_at":"2024-11-18T00:31:10.698Z","dependency_job_id":null,"html_url":"https://github.com/devklick/termblock","commit_stats":null,"previous_names":["devklick/termblock"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/devklick/termblock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devklick%2Ftermblock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devklick%2Ftermblock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devklick%2Ftermblock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devklick%2Ftermblock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/devklick","download_url":"https://codeload.github.com/devklick/termblock/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/devklick%2Ftermblock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32274980,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2024-11-17T13:30:52.945Z","updated_at":"2026-04-25T19:31:13.153Z","avatar_url":"https://github.com/devklick.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n    TermBlock\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    Small react library for displaying faux terminal commands\n\u003c/p\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# What it is\n\nA small, stateless react library that lets you render faux terminals with command inputs and outputs.\n\n# Example usage\n\nFor the absolute basic usage, you probably only want to render a single terminal with a single command, and the text that the command outputs. For example:\n\n```tsx\nimport TermBlock from \"termblock\";\n\nfunction App() {\n  return (\n    \u003cTermBlock\n      commands={[\n        {\n          command: \"npm install termblock\",\n          output: [\n            \"added 1 package, and audited 2 packages in 520ms\",\n            \"found 0 vulnerabilities\",\n          ],\n        },\n      ]}\n    /\u003e\n  );\n}\n```\n\n![Simple_Command](/docs/images/TermBlock_SimpleCommand.png \"Simple Command\")\n\n# Themes\n\nThemes can either be configured globally or provided as props when you render each terminal (or a combination of both!). \n\n## Built in themes\n\nThere are a few built in themes, and this list is expected to continue to grow.\n\n### Nord\n![NordTheme](/docs/images/themes/NordTheme.png \"Nord Theme\")\n\n### One Dark Pro\n![OneDarkProTheme](/docs/images/themes/OneDarkProTheme.png \"One Dark Pro Theme\")\n\n### Paper Color\n![PaperColorTheme](/docs/images/themes/PaperColorTheme.png \"Paper Color Theme\")\n\n### Windows 10\n![Windows10Theme](/docs/images/themes/Windows10Theme.png \"Windows 10 Theme\")\n\n### MacOS\n![MacOsTheme](/docs/images/themes/MacOsTheme.png \"MacOS Theme\")\n\n## Custom theme\n\nYou can create your own theme by creating an object that implements either the `TerminalTheme` or `PartialTerminalTheme` interface. For example:\n\n```ts\nimport { TerminalTheme } from \"termblock\";\nconst customTheme: TerminalTheme = {\n  titleBar: {\n    colors: {\n      background: \"#2b2a28\",\n      foreground: \"#c4a244\",\n    },\n    buttons: {\n      colors: {\n        close: \"#a53731\",\n        max: \"#585e3c\",\n        min: \"#b4a681\",\n      },\n    },\n  },\n  content: {\n    colors: {\n      background: \"#585e3c\",\n      foreground: \"#b4a681\",\n      context: \"#c4a244\",\n      separator: \"#2b2a28\",\n      scrollbar: \"#585e3c\",\n    },\n  },\n  footer: {\n    colors: {\n      background: \"#585e3c\",\n      foreground: \"#b4a681\",\n    },\n  },\n},\n```\n![Custom_Theme](/docs/images/themes/CustomTheme.png \"Custom Theme\")\n\n### Note:\nIf you want to apply a custom global theme, you *must* implement the `TerminalTheme` interface (see [Configure global theme](#configure-global-theme)). Otherwise, if you just want to override certain styles of the global theme, you can implement `PartialTerminalTheme` and pass that object in to the `TermBlock` component's `theme` prop (see [Theme props](#theme-props)).\n\n\n## Configure global theme\n\nTo configure a theme globally, you need to call the `configureGlobal` function and pass in the theme you want. For example:\n\n```tsx\nimport TermBlock, { themes } from \"termblock\";\nthemes.configureGlobal(themes.oneDarkPro);\n```\n\nNote that you only need to do this once, so probably most suitable to do this in your `App.tsx`.\n\n## Theme props\n\nIn addition to configuring a global theme, you can also pass in a theme to the `TermBlock` component. For example:\n\n```tsx\nimport TermBlock, { themes } from \"termblock\";\n\nfunction App() {\n  return \u003cTermBlock theme={themes.paperColor} /\u003e;\n}\n```\n\nNote that all properties of the theme props are optional. Any values provided will be the priority, and any props omitted will fall back on the global theme. For example, the following will simply override the default button position, and the rest of the global theme will apply:\n\n```tsx\nimport TermBlock, { PartialTerminalTheme } from \"termblock\";\n\nconst partialCustomTheme: PartialTerminalTheme = { \n  titleBar: { \n    buttons: { \n      position: \"right\" \n    } \n  } \n};\n\nfunction App() {\n  return \u003cTermBlock theme={{ titleBar: { buttons: { position: \"right\" } } }} /\u003e;\n  // or \n  // return \u003cTermBlock theme={partialCustomTheme} /\u003e;\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevklick%2Ftermblock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdevklick%2Ftermblock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdevklick%2Ftermblock/lists"}