{"id":13694899,"url":"https://github.com/WTTJ/welcome-ui","last_synced_at":"2025-05-03T04:31:16.290Z","repository":{"id":36957041,"uuid":"174542973","full_name":"WTTJ/welcome-ui","owner":"WTTJ","description":"Customizable design system from Welcome to the jungle (@wttj) with react, typescript, styled-components, ariakit and a lot of love 💛 Here you'll find all the core components you need to create a delightful webapp.","archived":false,"fork":false,"pushed_at":"2025-04-25T09:36:27.000Z","size":38810,"stargazers_count":643,"open_issues_count":5,"forks_count":51,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-04-25T10:39:49.905Z","etag":null,"topics":["ariakit","customizable","design","design-system","design-systems","jungle","react","styled-components","styled-system","system","typescript","typescript-react","ui","ux","welcome","xstyled"],"latest_commit_sha":null,"homepage":"https://www.welcome-ui.com","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/WTTJ.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.mdx","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-03-08T13:31:39.000Z","updated_at":"2025-04-23T12:47:33.000Z","dependencies_parsed_at":"2023-09-27T20:31:34.533Z","dependency_job_id":"0c65f916-fd51-4b48-8b30-69d62ff0fb08","html_url":"https://github.com/WTTJ/welcome-ui","commit_stats":{"total_commits":2244,"total_committers":36,"mean_commits":"62.333333333333336","dds":0.6795900178253119,"last_synced_commit":"4e47b49553660b4cf8cd6444b3a21de70d9f750c"},"previous_names":[],"tags_count":605,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WTTJ%2Fwelcome-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WTTJ%2Fwelcome-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WTTJ%2Fwelcome-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WTTJ%2Fwelcome-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WTTJ","download_url":"https://codeload.github.com/WTTJ/welcome-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252144558,"owners_count":21701434,"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":["ariakit","customizable","design","design-system","design-systems","jungle","react","styled-components","styled-system","system","typescript","typescript-react","ui","ux","welcome","xstyled"],"created_at":"2024-08-02T17:01:47.662Z","updated_at":"2025-05-03T04:31:11.280Z","avatar_url":"https://github.com/WTTJ.png","language":"TypeScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Welcome UI\n\n![Welcome UI Logo](https://github.com/user-attachments/assets/e7df47fd-e6c8-462a-ac09-d052d67555bc)\n\nWelcome to the _Welcome UI library_ created by [Welcome to the jungle](https://www.welcometothejungle.com), a customizable design system with react • typescript • styled-components • styled-system and ariakit.\n\nHere you'll find all the core components you need to create a delightful webapp.\n\n🌴 [Discover all the components](https://welcome-ui.com)\n\n---\n\n[![License](https://img.shields.io/npm/l/welcome-ui.svg)](https://github.com/WTTJ/welcome-ui/tree/main/LICENSE) ![Code formating](https://img.shields.io/badge/code%20formating-prettier-blue.svg) ![Code style](https://img.shields.io/badge/code%20style-styled--components-ff69b4.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-mediumspringgreen.svg)](https://github.com/WTTJ/welcome-ui/tree/main/CONTRIBUTING.mdx) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)\n\n---\n\n## Installation\n\n1 - Install the **peer dependencies** listed below:\n\n```bash\nyarn add @xstyled/styled-components react styled-components\n```\n\n2 - Install the the **core** component and any other components you need for your webapp e.g. if you need just a button…\n\n```bash\nyarn add @welcome-ui/core @welcome-ui/button\n```\n\n## Import library \u0026 Theme\n\nGetting started\n\n```js\nimport React from 'react'\nimport { createTheme, WuiProvider } from '@welcome-ui/core'\nimport { Button } from '@welcome-ui/button'\n\n// Add theme options (if you want)\nconst options = {\n  defaultFontFamily: 'Helvetica',\n  headingFontFamily: 'Georgia',\n  colors: {\n    primary: {\n      50: '#124C80',\n    },\n    green: {\n      50: '#32CD32',\n    },\n  },\n}\n\n// Create your theme\nconst theme = createTheme(options)\nexport default function Root() {\n  return (\n    // Wrap your components with \u003cWuiProvider /\u003e with your theme\n    \u003cWuiProvider\n      theme={theme}\n      // Will inject a CSS reset with normalizer\n      hasGlobalStyle\n      // Will show the focus ring on keyboard navigation only\n      shouldHideFocusRingOnClick\n    \u003e\n      \u003cButton\u003eWelcome!\u003c/Button\u003e\n    \u003c/WuiProvider\u003e\n  )\n}\n```\n\n## Develop on local\n\n1. First install and build the packages _(only the first time)_\n\n```bash\nyarn first:install\n```\n\n2. Start documentation website\n\n```bash\nyarn start\n```\n\n3. Start a watch on all packages to rebuild them easily\n\n```bash\nyarn watch\n```\n\n4. and go to http://localhost:3020\n\n## How to release\n\nThe release of the packages is automated by the CI, you just need to bump package version and push git tags to initiate the process.\n\n### Initiating the release process from your environment\n\n**The commands listed below will only prompt for packages to bump**. Then they will modify packages versions, commit changes and create the git tag to finally push everything to github. **No further actions are required once you have validated the packages to bump.**\n\n#### If you just need to bump one version without switching from a prerelease to stable release, run:\n\n```bash\nyarn release\n```\n\n#### To create a new prerelease, run:\n\nThis is only used for the **first** prerelease. If you already published a v5.0.0-alpha.0 then you just need to run the first command.\n\n```bash\nyarn dev:prerelease\n```\n\nNB: you can replace alpha with any other keyword (beta, rc, ...)\n\n#### Force publish a package\n\nIn addition to the options shown above, you can use the --force-publish option to force bumping some packages.\n\n#### Troubleshooting\n\n##### How to release when the publish process failed having published some packages\n\nRe-run the failed job with ssh, then ssh into the machine and run this command:\n\n`cd welcome-ui/packages \u0026\u0026 find . -maxdepth 1 -type d \\( ! -name . \\) -exec bash -c \"cd '{}' \u0026\u0026 npm publish\" \\;`\n\nThis will publish each packages, those who are already published will fail and be ignored by the script.\n\n##### How to rollback a release that has been stopped before publish to npm\n\nRevert the last commit (which should be the commit that bumps package versions):\n\n`git revert HEAD^`\n\nRemove the tag on github and locally.\n\nThen apply your fixes and re-run your release command.\n\n### About the CI\n\nThe CI will trigger on tags to build the packages and then push them to the npm registry\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWTTJ%2Fwelcome-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWTTJ%2Fwelcome-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWTTJ%2Fwelcome-ui/lists"}