{"id":17152077,"url":"https://github.com/selemondev/vscode-park-ui","last_synced_at":"2026-03-11T10:03:21.311Z","repository":{"id":217389585,"uuid":"743752333","full_name":"selemondev/vscode-park-ui","owner":"selemondev","description":"Park UI VSCode extension to help you install and use Park UI components without leaving your IDE ✨.","archived":false,"fork":false,"pushed_at":"2024-02-06T11:40:42.000Z","size":2043,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-30T11:50:21.581Z","etag":null,"topics":["panda-css","park-ui","park-ui-snippets","react","react-snippets","react-typescript","snippets","ui-snippets","vscode-snippets"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=Selemondev.vscode-park-ui","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/selemondev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2024-01-15T22:58:41.000Z","updated_at":"2024-09-27T11:09:06.000Z","dependencies_parsed_at":"2024-02-06T13:35:32.457Z","dependency_job_id":null,"html_url":"https://github.com/selemondev/vscode-park-ui","commit_stats":null,"previous_names":["selemondev/vscode-park-ui"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/selemondev/vscode-park-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fvscode-park-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fvscode-park-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fvscode-park-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fvscode-park-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/selemondev","download_url":"https://codeload.github.com/selemondev/vscode-park-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/selemondev%2Fvscode-park-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269392409,"owners_count":24409754,"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","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"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":["panda-css","park-ui","park-ui-snippets","react","react-snippets","react-typescript","snippets","ui-snippets","vscode-snippets"],"created_at":"2024-10-14T21:42:45.856Z","updated_at":"2026-03-11T10:03:16.278Z","avatar_url":"https://github.com/selemondev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg align=\"center\" src=\"https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/images/icon.png\" height=\"96\" /\u003e\n \u003ch1 align=\"center\"\u003e\n  Park UI\n \u003c/h1\u003e\n\u003c/p\u003e\n\nThis VSCode Extension enables you to install [park/ui](https://park-ui.com/) components directly from your IDE ✨.\n\n## Initialize the Park/UI CLI\n\n![to initialize CLI open the command palette and search for park/ui: install cli command](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/init-cli.png)\n\n## Install components\n\n![to initialize CLI open the command palette and search for park/ui: add new component](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/add-new-component.png)\n\n## Choose a component to install from the list\n\n![choose a component to install from the list](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/add-new-component-preview.png)\n\n## Install multiple components\n\n![install multiple components](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/add-multiple-components.png)\n\n## Choose components to install from the list\n![choose components to install from the list](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/add-multiple-components-preview.png)\n\n## Open the Park-UI documentation\n\n![open the park-ui documentation](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/park-ui-docs.png)\n\n## Navigate to a particular component's documentation page\n\n![navigate to a particular component's documentation page](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/park-ui-component-docs.png)\n\n## Park/UI Snippets\n\nEasily import and use park-suielte components with ease using snippets within VSCode. Just type `park-x` or `park-ui` in your jsx/tsx file and choose from an array of components to use.\n\n![park-ui-snippets-example](https://raw.githubusercontent.com/selemondev/vscode-park-ui/master/src/assets/images/park-ui-import.png)\n\n### How it works\n\n| Snippet           | Description                            |\n| ----------------- | -------------------------------------- |\n| `park-ui-help`    | How to use park/ui snippets      |\n| `park-i-[component]`| Adds imports for the component         |\n| `park-ui-[component]`| Adds the markup for the jsx/tsx component|\n\n### How to use?\n\n1. Components\n\nFor `Alert` component, type `park-i-alert` to add imports in your jsx/tsx file, and to use the component, use `park-ui-alert`.\n\n\u003e Similarly, for any other component, use `park-i-[component]` to add imports and `park-ui-[component]` to use.\n\n```tsx\n// park-i-alert\nimport { InfoIcon } from 'lucide-react',\nimport type { AlertProps } from '~/components/ui/alert',\nimport * as Alert from '~/components/ui/alert'\n\n// park-ui-alert\n\u003cAlert.Root {...props}\u003e,\n\u003cAlert.Icon asChild\u003e,\n\u003cInfoIcon /\u003e,\n\u003c/Alert.Icon\u003e,\n\u003cAlert.Content\u003e,\n\u003cAlert.Title\u003eBrowser Update available\u003c/Alert.Title\u003e,\n\u003cAlert.Description\u003eFor the best experience, please update your browser.\u003c/Alert.Description\u003e,\n\u003c/Alert.Content\u003e,\n\u003c/Alert.Root\u003e\"\n```\n\n### How to contribute?\n\nContributions are welcome and encouraged! If you have any ideas or suggestions for new features, or if you encounter any bugs or issues, please open an issue or submit a pull request on the GitHub repository. \n\nDevelopers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md).\n\nUse this link - [Snippet Generation](https://snippet-generator.app/?description=https%3A%2F%2Fpark-ui.com%2Fdocs%2Ftailwind%2Fcomponents%2F\u0026tabtrigger=park-\u0026snippet=\u0026mode=vscode) to generate snippets and add/update them to the `snippets` folder that is located in the `src` accordingly.\n\n\n### Credits \n\nAll credits go to the creators of these amazing projects:\n\n- The [Panda CSS](https://github.com/chakra-ui/panda) team.\n- [Ark UI](https://github.com/chakra-ui/ark) for doing all the hard work to make sure components are accessible.\n- [Park UI](https://park-ui.com/) for creating this amazing project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fvscode-park-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselemondev%2Fvscode-park-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselemondev%2Fvscode-park-ui/lists"}