{"id":17352905,"url":"https://github.com/serudda/side-ui","last_synced_at":"2025-04-13T10:26:27.838Z","repository":{"id":159397967,"uuid":"634623245","full_name":"serudda/side-ui","owner":"serudda","description":"The UI Kit for the Indie Creators HQ","archived":false,"fork":false,"pushed_at":"2024-09-23T05:22:10.000Z","size":629,"stargazers_count":24,"open_issues_count":2,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T00:43:41.401Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/serudda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/SECURITY.md","support":"docs/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-30T18:15:23.000Z","updated_at":"2025-01-10T22:58:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"226ed229-f45c-4c2d-8238-4ec3bed9fafb","html_url":"https://github.com/serudda/side-ui","commit_stats":null,"previous_names":[],"tags_count":96,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fside-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fside-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fside-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/serudda%2Fside-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/serudda","download_url":"https://codeload.github.com/serudda/side-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248697218,"owners_count":21147284,"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":[],"created_at":"2024-10-15T17:14:56.568Z","updated_at":"2025-04-13T10:26:27.812Z","avatar_url":"https://github.com/serudda.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Side-UI\n\nSide-UI is a versatile and powerful UI Kit crafted exclusively for Indie Creators HQ. As a team of Hispanic developers passionate about side-projects, we understand the value of building robust and visually stunning user interfaces quickly and efficiently.\n## Table of Contents\n\n- [Introduction](#introduction)\n- [Getting Started](#getting-started)\n  - [Quick Setup](#quick-setup)\n- [How to Use It](#how-to-use-it)\n  - [Using Enums in Side-UI Components](#using-enums-in-side-ui-components)\n- [Updating Colors](#updating-colors)\n- [Community](#community)\n- [License](#license)\n- [References](#references)\n\n## Introduction\n\nAt Indie Creators HQ, we believe in empowering developers like you with the right tools. Side-UI offers a collection of reusable and customizable React components, designed to meet the diverse needs of your projects, whether they are web applications, websites, or prototypes. With Side-UI, you can create delightful user experiences and focus on bringing your ideas to life.\n# Getting Started\n\n## Quick Setup\n\nBefore you can use side-UI, there are a couple of prerequisites you need to have in place:\n\n1. `Tailwind CSS:` Make sure you have a working Tailwind CSS project set up.\n2. `Node.js and a Package Manager:` Make sure you have Node.js installed on your machine.\n\n\nnpm\n```bash\nnpm install side-ui\n```\nyarn\n```bash\nyarn install side-ui\n```\npnpm\n```bash\npnpm install side-ui\n```\n\n### Include\n\nNext, include Side-UI in your tailwind.config.js file to enable its components.\n```js\nmodule.exports = {\n  content: ['./node_modules/side-ui/**/*.{js,jsx,ts,tsx}'],\n  presets: [require('./node_modules/side-ui/dist/tailwind.config')],\n};\n```\n\u003cdiv align=\"right\"\u003e\n\n[ [ ↑ to top ↑ ] ](#side-ui)\n\n\u003c/div\u003e\n\nIt's that easy!!!.\n## How to use it\n\nIn this example, we import the Button component from side-ui, and then we use it in the `MyComponent` functional component. The Button is configured as a primary button with the base size, and when clicked, it logs \"Button clicked\" to the console.\n\nThis short example demonstrates the basic usage of the Button component, and you can easily customize it by using different variant, size, and other props according to your project's needs.\n\n```tsx\nimport React from 'react';\nimport { Button, ButtonVariant, ButtonSize } from 'side-ui';\n\nexport const MyComponent = () =\u003e {\n  \u003cButton\n  variant={ButtonVariant.primary}\n  size={ButtonSize.base}\n  onClick={() =\u003e console.log('Button clicked')}\u003e\n    Click Me\n  \u003c/Button\u003e\n}\n\nexport default MyComponent;\n```\n### Using Enums in Side-UI Components\n\nSeveral components in Side-UI utilize enums to provide customizable options for different variations and styles. Enums are sets of named constants representing discrete values, allowing you to choose from predefined options when using the components.\n### Example\n\nIn the Button component, you can use the ButtonVariant enum to choose from different button styles, such as `ButtonVariant.primary`, `ButtonVariant.secondary`, and more.\n\n```tsx\nimport { Button, ButtonVariant } from 'side-ui';\n\nconst MyComponent = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cButton variant={ButtonVariant.primary} \u003e\n        Click Me\n      \u003c/Button\u003e\n      \u003cButton variant={ButtonVariant.secondary}\u003e\n        Click Me Too\n      \u003c/Button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n### Visual Example\n![primary_example](https://github.com/serudda/side-ui/assets/14036522/3743dd41-514a-4e9f-8285-babb14cdd7d7)\n![fsecondary_example](https://github.com/serudda/side-ui/assets/14036522/46a03b23-db34-44f0-953a-25a42c610520)\n\n### Benefit from Consistency\n\nEnums help maintain consistency throughout your application, ensuring that components adhere to predefined styles and variants. They provide a clear set of options, making it easier to understand and use the components effectively.\n\u003cdiv align=\"right\"\u003e\n\n[ [ ↑ to top ↑ ] ](#side-ui)\n\n\u003c/div\u003e\n\n## Updating colors\n1. Access the tailwind.config.js File\n\n    Ensure you have the tailwind.config.js file in your project. If it doesn't exist, create it at the root of your project.\n\n1. Update the colors Section\n\n    In the tailwind.config.js file, locate the colors section under the theme object. This section defines the primary and secondary colors, among others. The colors are specified using a numeric scale, where each number corresponds to a different shade of the color.\n\nHere's an example of how you can set your custom primary and secondary colors:\n\n```js\nmodule.exports = {\n  // ... other configurations ...\n\n  theme: {\n    // ... other theme configurations ...\n\n    // Extend the colors section to define your custom primary and secondary colors\n\n    extend: {\n      colors: {\n        primary: {\n          50: '#FEFFD6',\n          100: '#FEFFAD',\n          200: '#FDFF85',\n          300: '#FCFF5C',\n          400: '#FCFF33',\n          500: '#FAFF00',\n          600: '#DDE000',\n          700: '#B5B800',\n          800: '#8C8F00',\n          900: '#646600',\n          950: '#3C3D00',\n        },\n        secondary: {\n          50: '#ECEDFD',\n          100: '#C7C8FA',\n          200: '#A1A3F7',\n          300: '#7C7EF4',\n          400: '#6366F1',\n          500: '#4346EF',\n          600: '#1E21EB',\n          700: '#1215CE',\n          800: '#0F11A9',\n          900: '#0B0D83',\n          950: '#080A5E',\n        },\n      },\n    },\n  },\n\n  // ... other configurations ...\n};\n\n```\n\u003cdiv align=\"right\"\u003e\n\n[ [ ↑ to top ↑ ] ](#side-ui)\n\n\u003c/div\u003e\n\n\u003c!-- TODO: CUSTOM HOOKS --\u003e\n# Community\n\nContributions are always welcome!\n\nSee [CONTRIBUTING.md](/docs/CONTRIBUTING.md) for ways to get started.\n\nPlease adhere to this project's [CODE_OF_CONDUCT.](/docs/CODE_OF_CONDUCT.md)\n# License\n\nside-UI is Open Source project and licensed under [MIT](/LICENSE).\n\n# References\n\n[NPM Publish config](\nhttps://articles.wesionary.team/react-component-library-with-vite-and-deploy-in-npm-579c2880d6ff)\n\n[TailwindCSS and StorybookJS config](\nhttps://betterprogramming.pub/build-a-custom-react-component-library-with-storybook-7-beta-and-vite-4-in-2023-c52db4d733c0)\n\n\u003cdiv align=\"right\"\u003e\n\n[ [ ↑ to top ↑ ] ](#side-ui)\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserudda%2Fside-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fserudda%2Fside-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fserudda%2Fside-ui/lists"}