{"id":17832430,"url":"https://github.com/vikrantaroraa/canary-design","last_synced_at":"2026-02-14T03:03:52.197Z","repository":{"id":191235941,"uuid":"678546142","full_name":"vikrantaroraa/canary-design","owner":"vikrantaroraa","description":"⚡ A UI component library built using Vite + React + TypeScript.","archived":false,"fork":false,"pushed_at":"2025-03-19T19:38:07.000Z","size":1986,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-17T06:49:36.531Z","etag":null,"topics":["canary-design","component-library","design-systems","react-components","reactjs","typescript","vite"],"latest_commit_sha":null,"homepage":"https://canary-design.netlify.app/","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/vikrantaroraa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null}},"created_at":"2023-08-14T20:03:05.000Z","updated_at":"2025-03-19T19:38:11.000Z","dependencies_parsed_at":"2023-08-29T00:10:30.556Z","dependency_job_id":"5aa79d51-337f-4315-87f9-933ad2201af4","html_url":"https://github.com/vikrantaroraa/canary-design","commit_stats":{"total_commits":116,"total_committers":2,"mean_commits":58.0,"dds":0.008620689655172376,"last_synced_commit":"f70597b665f220ab5a82debad6591de11923ea51"},"previous_names":["vikrantaroraa/canary-design"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vikrantaroraa/canary-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fcanary-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fcanary-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fcanary-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fcanary-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vikrantaroraa","download_url":"https://codeload.github.com/vikrantaroraa/canary-design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vikrantaroraa%2Fcanary-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273836772,"owners_count":25177020,"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-09-05T02:00:09.113Z","response_time":402,"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":["canary-design","component-library","design-systems","react-components","reactjs","typescript","vite"],"created_at":"2024-10-27T19:57:09.932Z","updated_at":"2026-02-14T03:03:52.137Z","avatar_url":"https://github.com/vikrantaroraa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- # React + TypeScript + Vite\n\nThis template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.\n\nCurrently, two official plugins are available:\n\n- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh\n- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh\n\n## Expanding the ESLint configuration\n\nIf you are developing a production application, we recommend updating the configuration to enable type aware lint rules:\n\n- Configure the top-level `parserOptions` property like this:\n\n```js\n   parserOptions: {\n    ecmaVersion: 'latest',\n    sourceType: 'module',\n    project: ['./tsconfig.json', './tsconfig.node.json'],\n    tsconfigRootDir: __dirname,\n   },\n```\n\n- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`\n- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`\n- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` \u0026 `plugin:react/jsx-runtime` to the `extends` list --\u003e\n\n\u003ckbd\u003e\u003cimg src=\"src/assets/canary-design-screenshot.png\" alt=\"canary-design-homepage-screenshot\" style=\"border: 1px solid lightgrey; border-radius: 0px;\" /\u003e\u003c/kbd\u003e\n\n# Canary Design\n\nCanary design is a component library built in React + Vite + TypeScript using Vite's library mode. To find out about all the available components and how to use them, read the [Documentation](https://canary-design.netlify.app/).\n\n## ✨ Components\n\n- **Button**\n- **Carousel - TypeA**\n- **Carousel - TypeB**\n- **Drawer**\n- **File Upload**\n- **Steps**\n- **Tabs - TypeA**\n- **Tabs - TypeB**\n- **Timeline**\n- **Tour**\n\n## 🎉 Contributing\n\nContributions, bug reports, and feature requests are welcome! Please feel free to open an issue or submit a pull request on this repository.\n\n\u003cbr\u003e\n\nMade with ❤️ by Vikrant Arora in Kashipur, Uttarakhand ( India )\n\n\u003c!-- # 🌟 Canary Design\n\n**Canary Design** is a modern, scalable, and feature-rich React component library built with **Vite** and **TypeScript**. It empowers developers to create stunning, user-friendly interfaces effortlessly. Designed with flexibility and performance in mind, Canary Design offers a wide range of customizable components for your next React project.\n\nVisit the [**Documentation**](https://canary-design.netlify.app/) to explore all available components and integration guides.\n\n---\n\n## 🚀 Features\n\n- **Modern UI Components**: A growing collection of reusable, customizable, and responsive components.\n- **Built for Developers**: Fully typed with TypeScript for an improved developer experience.\n- **Lightning Fast**: Built using Vite’s library mode for blazing-fast builds.\n- **Easy Integration**: Plug-and-play components designed for React apps.\n- **Theming Support**: Style components with custom themes effortlessly.\n\n---\n\n## ✨ Components\n\n| **Component**        | **Description**                                              |\n| -------------------- | ------------------------------------------------------------ |\n| **Button**           | Fully customizable buttons with multiple variants and sizes. |\n| **Carousel - TypeA** | Responsive carousel with autoplay and navigation controls.   |\n| **Carousel - TypeB** | Minimalist carousel for a sleek look.                        |\n| **Drawer**           | Slide-in navigation or side panels.                          |\n| **File Upload**      | Drag-and-drop or browse file upload functionality.           |\n| **Steps**            | Stepper for guiding users through workflows.                 |\n| **Tabs - TypeA**     | Classic tabbed navigation.                                   |\n| **Tabs - TypeB**     | Modern tabbed navigation with animations.                    |\n| **Timeline**         | Display events or milestones in a timeline format.           |\n| **Tour**             | Guided user interface tours for enhanced onboarding.         |\n\n---\n\n## 📦 Installation\n\nTo start using **Canary Design**, add it to your project with:\n\n```bash\nnpm install canary-design\n```\n\n## 🚀 Getting Started\n\nHere’s a quick example to get started with **Canary Design**:\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"canary-design\";\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eWelcome to Canary Design\u003c/h1\u003e\n    \u003cButton variant=\"primary\" size=\"large\"\u003e\n      Click Me\n    \u003c/Button\u003e\n  \u003c/div\u003e\n);\n\nexport default App;\n```\n\nCheck out the [Documentation](https://canary-design.netlify.app/) for detailed examples and usage instructions.\n\n## 🛠️ Development Setup\n\nIf you want to contribute to Canary Design, follow these steps to set up your development environment:\n\n1. Clone the repository:\n\n   ```bash\n   git clone https://github.com/your-username/canary-design.git\n   ```\n\n2. Navigate to the project directory:\n\n   ```bash\n   cd canary-design\n   ```\n\n3. Install dependencies:\n\n   ```bash\n   npm install\n   ```\n\n4. Start the development server:\n\n   ```bash\n   npm run dev\n   ```\n\n## 🌍 Browser Support\n\nCanary Design supports the latest versions of major browsers, including:\n\n- Chrome\n- Firefox\n- Safari\n- Edge\n\n## 🎉 Contributing\n\nWe welcome contributions! Whether it’s fixing bugs, adding new features, or improving documentation, your help is valuable. Please refer to our [Contribution Guidelines](CONTRIBUTING.md) for more details. --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantaroraa%2Fcanary-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvikrantaroraa%2Fcanary-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvikrantaroraa%2Fcanary-design/lists"}