{"id":18485384,"url":"https://github.com/system76/components","last_synced_at":"2025-10-24T13:23:27.285Z","repository":{"id":46133426,"uuid":"246686122","full_name":"system76/components","owner":"system76","description":"System76 standard Vue components","archived":false,"fork":false,"pushed_at":"2024-11-02T16:07:53.000Z","size":14040,"stargazers_count":0,"open_issues_count":11,"forks_count":1,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-01-26T04:05:27.062Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/system76.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2020-03-11T21:45:35.000Z","updated_at":"2024-11-02T16:02:28.000Z","dependencies_parsed_at":"2023-02-18T17:31:11.255Z","dependency_job_id":null,"html_url":"https://github.com/system76/components","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/system76%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/system76%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/system76%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/system76%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/system76","download_url":"https://codeload.github.com/system76/components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239201639,"owners_count":19599078,"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":[],"created_at":"2024-11-06T12:45:02.683Z","updated_at":"2025-10-24T13:23:27.202Z","avatar_url":"https://github.com/system76.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e@system76/components\u003c/h1\u003e\n  \u003ch3\u003eSystem76 standard Vue components\u003c/h3\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@system76/components/\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/@system76/components.svg\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://renovatebot.com/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/renovate-enabled-brightgreen.svg\" alt=\"renovate\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://standardjs.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/code_style-standard-brightgreen.svg\" alt=\"standard\"\u003e\n  \u003c/a\u003e\n\n  \u003ca href=\"https://components.origin76.com/\"\u003e\n    \u003cimg src=\"https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg\" alt=\"Storybook\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\nThis repository contains a bunch of standard System76 Vue components, like the\nomnibar, the header, the footer, and a couple of others. It _does not_ include\nall Vue components that System76 uses, as those are broken up into other\nrepositories like:\n\n- [asset-components](https://github.com/system76/asset-components) Vue\n  components to display image assets.\n- [design](https://github.com/system76/design) CSS variables and Vue typography\n- [forms](https://github.com/system76/forms) Vue components for forms\n\n## Using\n\n```\nnpm install --save-dev @system76/components\n```\n\nThen simply import and use them like you would any other Vue library:\n\n```vue\n\u003ctemplate\u003e\n  \u003csys-omnibar /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport { SysOmnibar } from '@system76/components'\n\nexport default {\n  components: {\n    SysOmnibar\n  }\n}\n\u003c/script\u003e\n```\n\nFor actual usage and documentation, please look at our\n[storybook instance](https://components.origin76.com).\n\n## Development\n\n1) Download the repository\n\n2) Run `npm ci`\n\n3) Run `npm run build`\n\n4) Run `npm start`\n\n5) Start hacking\n\n### Documenting\n\nWe use styleguide to document our components. Please write your own stories\nand documentation in markdown format like the other `.mdx` files. Along with\nstorybook, we also use styleguidist for documentation in the component file.\nThis gets outputted in the form of nice prop tables in storybook. Here are some\nresources on how to get started:\n\n- [Storybook markdown syntax](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md)\n- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#full-example)\n\n## Deployment\n\nTo [trigger a release](https://semantic-release.gitbook.io/semantic-release/#triggering-a-release),\npush a commit to the `master` branch in the\n[Angular Commit Message Conventions](https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#-git-commit-guidelines)\nformat.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsystem76%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsystem76%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsystem76%2Fcomponents/lists"}