{"id":15019498,"url":"https://github.com/aherrahul/rds-design-system-example","last_synced_at":"2026-02-24T18:34:51.540Z","repository":{"id":247082882,"uuid":"815640264","full_name":"AherRahul/RDS-design-system-example","owner":"AherRahul","description":"Welcome to the example project showcasing how to integrate and use the RDS (Rahul's Design System) in your Vue.js projects. This guide will walk you through the steps to get started with RDS, from installation to usage, ensuring a smooth integration process.","archived":false,"fork":false,"pushed_at":"2025-01-11T06:23:16.000Z","size":6365,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T01:16:13.823Z","etag":null,"topics":["component","component-li","components","demo","demo-app","design","design-system","design-systems","design-tools","library","library-systems","rds","rds-design-system","vue","vue-router","vue3","vuejs","vuejs2","vuetify","vuex"],"latest_commit_sha":null,"homepage":"https://demo1-rds-design-system.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AherRahul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-06-15T17:34:31.000Z","updated_at":"2025-01-11T06:23:20.000Z","dependencies_parsed_at":"2024-07-17T11:32:45.844Z","dependency_job_id":"d34d988e-f669-4b4b-9c89-1867355898d5","html_url":"https://github.com/AherRahul/RDS-design-system-example","commit_stats":{"total_commits":24,"total_committers":2,"mean_commits":12.0,"dds":0.04166666666666663,"last_synced_commit":"9eab5344bbd73a760085d6286f8a0b0bb5c37cf1"},"previous_names":["aherrahul/rds-design-system-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AherRahul%2FRDS-design-system-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AherRahul%2FRDS-design-system-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AherRahul%2FRDS-design-system-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AherRahul%2FRDS-design-system-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AherRahul","download_url":"https://codeload.github.com/AherRahul/RDS-design-system-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237964646,"owners_count":19394436,"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":["component","component-li","components","demo","demo-app","design","design-system","design-systems","design-tools","library","library-systems","rds","rds-design-system","vue","vue-router","vue3","vuejs","vuejs2","vuetify","vuex"],"created_at":"2024-09-24T19:53:37.019Z","updated_at":"2025-10-24T12:31:18.128Z","avatar_url":"https://github.com/AherRahul.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003ca href=\"https://rahulaher.netlify.app\"\u003e\n  \u003cimg src=\"https://rahulaher.netlify.app/img/logo/glyph-black-colored.svg\" alt=\"Take care soon\" width=\"250\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\n# RDS Design System Example Project\n\nWelcome to the example project showcasing how to integrate and use the RDS (Rahul's Design System) in your Vue.js projects. This guide will walk you through the steps to get started with RDS, from installation to usage, ensuring a smooth integration process.\n\n## Introduction to RDS\n\nRDS is a powerful and flexible design system built with Vue.js, aimed at providing a consistent and efficient way to develop user interfaces. With a collection of reusable components and styles, RDS helps streamline your development process, ensuring your applications have a cohesive look and feel.\n\n## The Journey of RDS\n\n### How It All Started\n\nThe idea for RDS came from my own experience as a frontend developer. I found myself repeatedly creating similar components and styles for different projects. This repetitive work not only consumed a lot of time but also made it challenging to maintain consistency across various applications. I realized the need for a centralized design system that could be reused across projects to ensure a uniform user experience.\n\n### The Problem It Solves\n\n1. **Consistency**: One of the primary challenges in frontend development is maintaining consistency in UI elements across different parts of an application or across multiple projects. RDS addresses this by providing a standardized set of components that can be reused, ensuring a cohesive look and feel.\n2. **Efficiency**: Rewriting similar components for different projects is time-consuming. RDS saves developers time by offering pre-built, customizable components, allowing them to focus more on the unique aspects of their projects rather than reinventing the wheel.\n3. **Scalability**: As projects grow, maintaining and updating individual components can become cumbersome. With RDS, updates and improvements can be made in a single place and propagated across all projects that use the design system, making it easier to scale and maintain applications.\n4. **Collaboration**: In teams, having a shared design system fosters better collaboration between developers and designers. RDS provides a common language and set of tools that everyone can use, reducing misunderstandings and increasing productivity.\n\n## Prerequisites\n\nBefore you begin, make sure you have the following installed:\n\n- Node.js (v12 or higher)\n- npm (v6 or higher) or Yarn (v1.22 or higher)\n- Vue.js (v2.x or v3.x)\n\n## NPM Package\n\n[@aherrahul/design-system](https://www.npmjs.com/package/@aherrahul/design-system)\n\n## Getting Started\n\n### Step 1: Install RDS\n\nTo use RDS in your Vue.js project, you first need to install it via npm. Open your terminal and run the following command:\n\n```bash\nnpm install @aherrahul/design-system\n```\n\nAlternatively, if you prefer using Yarn, you can run:\n\n```bash\nyarn add @aherrahul/design-system\n```\n\n### Step 2: Import RDS in Your Project\n\nOnce the installation is complete, you need to import RDS into your Vue.js project. This can be done in your main JavaScript file (usually main.js or main.ts).\n\nFor Vue 2:\n\n```javascript\nimport Vue from 'vue';\nimport App from './App.vue';\nimport RDS from '@aherrahul/design-system';\nimport '@aherrahul/design-system/dist/style.css';\n\nVue.use(RDS);\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app');\n```\n\nFor Vue 3:\n\n```javascript\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport RDS from '@aherrahul/design-system';\nimport '@aherrahul/design-system/dist/style.css';\n\nconst app = createApp(App);\napp.use(RDS);\napp.mount('#app');\n```\n\n### Step 3: Using RDS Components\n\nNow that RDS is installed and configured, you can start using its components in your Vue.js project. Here's an example of how to use a button component from RDS:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003crds-button\n      variant=\"green\"\n      size=\"md\"\n      text=\"Lorem Ipsum\"\n      @click=\"handleClick\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst handleClick = () =\u003e {\n  alert('Button clicked!');\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* Add any custom styles here */\n\u003c/style\u003e\n```\n\n### Step 4: Customizing RDS Components\n\nRDS components are designed to be easily customizable. You can pass props to the components to change their appearance and behavior. For example, to customize the button component:\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003crds-button\n      :variant=\"btnColor\"\n      :size=\"btnSize\"\n      :text=\"btnText\"\n      @click=\"handleClick\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\n\nconst btnColor = ref('red');\nconst btnSize = ref('md');\nconst btnText = ref('Button');\n\nconst handleClick = () =\u003e {\n  alert('Button Alert');\n};\n\u003c/script\u003e\n\n\u003cstyle\u003e\n/* Add any custom styles here */\n\u003c/style\u003e\n```\n\n### Step 5: Exploring More Components\n\nRDS comes with a wide range of components that you can use to build your application. Check out the [official documentation](https://rds-design-system.netlify.app/) for a complete list of available components and their usage examples.\n\n## Documentation: Your Ultimate Guide\n\nThe RDS documentation is created using Storybook, providing a comprehensive and interactive way to explore and understand the design system. Here are some of the benefits of the documentation:\n\n1. **Interactive Demos**: Each component is documented with interactive demos, allowing you to see the component in action and play around with its properties.\n2. **Usage Examples**: Detailed usage examples show how to integrate and use each component in your project, making it easy to get started.\n3. **Customization Options**: The documentation includes information on the various customization options available for each component, helping you tailor them to fit your specific needs.\n4. **API Reference**: A thorough API reference is provided for each component, including details on all available props, events, and slots.\n5. **Design Guidelines**: The documentation also covers design guidelines and best practices for using the components, ensuring your application maintains a consistent and professional look.\n\n## Conclusion\n\nIntegrating RDS into your Vue.js project is a straightforward process that can greatly enhance your development workflow. With its reusable components and consistent design language, RDS helps you build polished and professional applications efficiently. [Demo project/Starter-pack](https://github.com/AherRahul/RDS-design-system-example)\n\nWe hope this guide helps you get started with RDS. If you have any questions or feedback, feel free to leave a comment below or reach out to us on [GitHub](https://github.com/AherRahul/design-system).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faherrahul%2Frds-design-system-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faherrahul%2Frds-design-system-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faherrahul%2Frds-design-system-example/lists"}