{"id":26020933,"url":"https://github.com/vivekanand-vr/code_blocks","last_synced_at":"2026-02-12T19:31:44.277Z","repository":{"id":276591084,"uuid":"929656510","full_name":"vivekanand-vr/code_blocks","owner":"vivekanand-vr","description":"A modern, customizable React UI component library. This library provides reusable UI components organized by categories with the source code that you can use them directly in your projects and focus more on the logic.","archived":false,"fork":false,"pushed_at":"2025-02-10T09:21:43.000Z","size":80,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-12T07:10:16.102Z","etag":null,"topics":["library","react"],"latest_commit_sha":null,"homepage":"https://code-blocks-sigma.vercel.app/","language":"JavaScript","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/vivekanand-vr.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,"zenodo":null}},"created_at":"2025-02-09T03:58:28.000Z","updated_at":"2025-02-10T09:21:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"66adc67d-a62b-4c9c-96c7-e677099ee85b","html_url":"https://github.com/vivekanand-vr/code_blocks","commit_stats":null,"previous_names":["vivekanand-vr/code_blocks"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vivekanand-vr/code_blocks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekanand-vr%2Fcode_blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekanand-vr%2Fcode_blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekanand-vr%2Fcode_blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekanand-vr%2Fcode_blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vivekanand-vr","download_url":"https://codeload.github.com/vivekanand-vr/code_blocks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vivekanand-vr%2Fcode_blocks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29378818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-12T19:05:20.189Z","status":"ssl_error","status_checked_at":"2026-02-12T19:01:44.216Z","response_time":55,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["library","react"],"created_at":"2025-03-06T08:31:53.992Z","updated_at":"2026-02-12T19:31:44.233Z","avatar_url":"https://github.com/vivekanand-vr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CODE BLOCKS - React UI Library\n\nA modern, customizable React UI component library providing reusable UI components organized by categories. View and use the source code directly in your projects to focus more on business logic.\n\n## Quick Start\n\n### Prerequisites\n- Node.js (v14 or higher)\n- npm or yarn\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/yourusername/code-blocks.git\n\n# Navigate to project directory\ncd code-blocks\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n## Adding New Components\n\nFollow these steps to add new components to the library:\n\n### 1. Create the Component\n\nCreate your component in the appropriate category directory under `/src/components/`.\n\nExample component structure:\n```\nsrc/components/\n├── forms/\n│   └── ExampleForm.jsx\n├── navbars/\n│   └── ExampleNavbar.jsx\n└── sidebars/\n    └── ExampleSidebar.jsx\n```\n\n### 2. Add Component to Routes\n\nImport the component and its source code in the corresponding route file under `/src/routes/`. Use Vite's raw import feature to import the source code.\n\nExample route file (`category-routes.jsx`):\n```javascript\n// Import Component\nimport ExampleComponent from '../components/category/ExampleComponent';\n\n// Import Component Source Code\nimport exampleComponentSource from '../components/category/ExampleComponent.jsx?raw';\n\nexport const categoryRoutes = [\n  {\n    name: 'Example Component',\n    path: '/category/example-component',\n    element: \u003cExampleComponent /\u003e,\n    source: exampleComponentSource,\n    description: 'Brief description of the component functionality.'\n  }\n];\n```\n\n### 3. Update Categories\n\nUpdate the category details in `/src/constants/Index.jsx` to display the component on the homepage.\n\n```javascript\nconst categories = [\n  {\n    title: 'Category Name',\n    path: '/category',\n    components: [\n      { name: 'Example Component' },\n      // Add more components...\n    ]\n  }\n];\n\nexport default categories;\n```\n\n## Component Guidelines\n\n### Directory Structure\n```\nsrc/\n├── components/          # UI Components organized by category\n├── constants/          # Global constants and configurations\n├── pages/             # Page components and layouts\n├── routes/            # Route configurations for each category\n└── utils/             # Utility functions and shared code\n```\n\n### Naming Conventions\n- Components: Use PascalCase (e.g., `LoginForm`, `MainNavbar`)\n- Files: Match component names (e.g., `LoginForm.jsx`)\n- Routes: Use kebab-case (e.g., `login-form`, `main-navbar`)\n\n### Component Standards\n- Create functional components using React hooks\n- Use Tailwind CSS for styling\n- Ensure responsive design\n- Include proper PropTypes\n- Add JSDoc comments for documentation\n- Implement error handling where necessary\n- Keep components focused and maintainable\n- Follow React best practices\n\n### Code Style\n```jsx\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n * @component\n * @description Brief description of the component\n */\nconst ExampleComponent = ({ prop1, prop2 }) =\u003e {\n  return (\n    \u003cdiv className=\"tailwind-classes\"\u003e\n      {/* Component Implementation */}\n    \u003c/div\u003e\n  );\n};\n\nExampleComponent.propTypes = {\n  prop1: PropTypes.string.isRequired,\n  prop2: PropTypes.number\n};\n\nexport default ExampleComponent;\n```\n\n## Contributing\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/ComponentName`)\n3. Commit your changes (`git commit -m 'Add ComponentName'`)\n4. Push to the branch (`git push origin feature/ComponentName`)\n5. Open a Pull Request\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekanand-vr%2Fcode_blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvivekanand-vr%2Fcode_blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvivekanand-vr%2Fcode_blocks/lists"}