{"id":15022752,"url":"https://github.com/puppetlabs/design-system","last_synced_at":"2025-08-28T16:44:15.935Z","repository":{"id":39630753,"uuid":"175898443","full_name":"puppetlabs/design-system","owner":"puppetlabs","description":"A resource for creating user interfaces based on brand, UX, and dev principles","archived":false,"fork":false,"pushed_at":"2025-01-07T11:53:38.000Z","size":222842,"stargazers_count":18,"open_issues_count":16,"forks_count":27,"subscribers_count":65,"default_branch":"main","last_synced_at":"2025-02-02T03:56:06.731Z","etag":null,"topics":["design-system","hacktoberfest","puppet","react-components"],"latest_commit_sha":null,"homepage":"https://puppet.style","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/puppetlabs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-15T22:21:02.000Z","updated_at":"2024-12-09T11:24:45.000Z","dependencies_parsed_at":"2024-04-15T15:04:13.176Z","dependency_job_id":"07bab6bb-7554-426e-a0d9-d24d9eaef95c","html_url":"https://github.com/puppetlabs/design-system","commit_stats":{"total_commits":3633,"total_committers":57,"mean_commits":63.73684210526316,"dds":0.7701624002202037,"last_synced_commit":"ae091c6feca13f0f6a0eaf123c3d434e08a61f53"},"previous_names":[],"tags_count":298,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puppetlabs%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puppetlabs%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puppetlabs%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/puppetlabs%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/puppetlabs","download_url":"https://codeload.github.com/puppetlabs/design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238044095,"owners_count":19407128,"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":["design-system","hacktoberfest","puppet","react-components"],"created_at":"2024-09-24T19:58:20.795Z","updated_at":"2025-02-10T02:11:48.779Z","avatar_url":"https://github.com/puppetlabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Puppet Design System\n\nThe Puppet Design System represents the behaviors, components, principles and visual presentation we share. It is based on our objective to provide consistency, efficiency, and quality experiences to our customers. With it, we scale design across departments, products, platforms, and time zones.\n\nVisit the documentation and living styleguide at \u003chttps://puppetlabs.github.io/design-system\u003e.\n\n## Quick start\n\n### Prerequisites\n\nCurrently, a POSIX environment like macOS or Linux is required for development. (For Windows, you can use [Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/).) You must install the version of Node specified in [`.nvmrc`](.nvmrc). We recommend using [nvm](https://github.com/nvm-sh/nvm) (Node Version Manager), which allows you to `nvm install` the specified version and `nvm use` the specified version in the current shell (or `nvm alias default` to use the specified version in all new shells).\n\n### Local sandbox\n\nThe primary development environment uses [Styleguidist](https://react-styleguidist.js.org) (which is what is also hosted at \u003chttps://puppet.style\u003e). You can run it locally to view the docs and play around with components using live editable code:\n\n```sh\ngit clone git@github.com:puppetlabs/design-system.git \u0026\u0026 cd design-system\nnpm install\nnpm start\n```\n\n### With an existing app\n\nTo add the main package, `@puppet/react-components`, to an existing project:\n\n```sh\nnpm install @puppet/react-components\n```\n\n### New app from scratch\n\nTo try out the design system from scratch, generate a new project with uikit:\n\n```sh\nnpm install -g @puppet/uikit\nuikit generate project my-project\n```\n\n### Add components\n\n```html\nimport { Button } from '@puppet/react-components';\n\u003cButton\u003eHello world!\u003c/Button\u003e\n```\n\n### Use common styles\n\nTo use public Sass variables, add `@puppet/sass-variables` to your project:\n\n```sh\nnpm install @puppet/sass-variables\n```\n\nReference the [public variables](packages/sass-variables) from your Sass files:\n\n```scss\n@import '~@puppet/sass-variables/index';\n.my-text {\n  color: $puppet-amber;\n}\n```\n\nNote: See the [Getting Started](getting-started.md) guide for a longer walkthrough with examples of using the uikit, React components, Sass variables, and other packages.\n\n## Packages\n\nThe Puppet Design System includes:\n\n- Puppet React Components: Library of reusable React components [packages/react-components](packages/react-components)\n- Puppet React Layouts: Library of reusable React layouts like login screens [packages/react-layouts](packages/react-layouts)\n- Puppet Sass Variables: A set of public Sass variables for color palettes, typography, borders, etc. [packages/sass-variables](packages/sass-variables)\n- Puppet UI Toolkit: A `uikit` CLI for generating apps, components, etc. [packages/uikit](packages/uikit)\n- Puppet Design System Website: The website documenting the Design System [packages/design-system-website](packages/design-system-website)\n\n## Contribute\n\nThe Puppet Design System is a cross-functional team effort across Puppet with shared ownership where contributions are welcome and encouraged. Read more in [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Feedback\n\nWe are continuing to iterate on the Puppet Design System and appreciate your feedback and questions. Feel free to create an issue, pull request, or contact \u003cpuppet-design-system@puppet.com\u003e. Puppet employees can follow along in Slack ([#team-design-system](https://puppet.slack.com/messages/CFFECRQAY)) or Jira ([PDS](https://tickets.puppetlabs.com/secure/RapidBoard.jspa?projectKey=PDS\u0026rapidView=1018\u0026view=planning)).\n\n\n## Release Notes\n\nSee the changelog for each package, like react-components' [CHANGELOG.md](CHANGELOG.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuppetlabs%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpuppetlabs%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpuppetlabs%2Fdesign-system/lists"}