{"id":22862256,"url":"https://github.com/atomostechhq/genesis-react","last_synced_at":"2025-04-30T21:51:06.609Z","repository":{"id":266596817,"uuid":"898414411","full_name":"atomostechhq/genesis-react","owner":"atomostechhq","description":null,"archived":false,"fork":false,"pushed_at":"2025-04-29T07:52:58.000Z","size":609,"stargazers_count":0,"open_issues_count":1,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-04-29T08:41:49.933Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atomostechhq.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":"2024-12-04T10:56:09.000Z","updated_at":"2025-04-29T07:53:02.000Z","dependencies_parsed_at":"2024-12-05T05:05:44.792Z","dependency_job_id":"48369f57-3b35-49f7-b78b-32b0794b8aae","html_url":"https://github.com/atomostechhq/genesis-react","commit_stats":null,"previous_names":["atomostechhq/genesis-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomostechhq%2Fgenesis-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomostechhq%2Fgenesis-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomostechhq%2Fgenesis-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atomostechhq%2Fgenesis-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atomostechhq","download_url":"https://codeload.github.com/atomostechhq/genesis-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251789308,"owners_count":21644081,"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-12-13T10:12:46.899Z","updated_at":"2025-04-30T21:51:06.602Z","avatar_url":"https://github.com/atomostechhq.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atomos Genesis Component Library(React)\n\n## Step 1: Installation\n\nBegin by installing the Atomos Genesis Component Library(React) via npm:\n\n```bash\nnpm i @atomos_tech/genesis-react\n```\n\n## Step 2: Import CSS\n\nImport the library's CSS in your root page to apply the default styles:\n\n```typescript\nimport \"@atomos_tech/genesis-react/style\";\n```\n\n**Or if you are getting error for style then import css from your node modules like the example below:**\n\n```typescript\nimport \"../node_modules/@atomos_tech/genesis-react/dist/index.css\";\n```\n\n**Also, Make sure to import it right above your global.css file to override the default colour palette!**\n\nFor example:\n\n```typescript\nimport \"@atomos_tech/genesis-react/style\";\n// or node_modules import\nimport \"../node_modules/@atomos_tech/genesis-react/dist/index.css\";\nimport \"./globals.css\";\n```\n\n## Step 3: Set Up Theme Container\n\nWrap your application content within a `theme-primary` class to ensure consistent theming across your app. Add this snippet to your root or base page(main.tsx or App.tsx):\n\n```typescript\n\u003cdiv className=\"theme-primary\"\u003e{children}\u003c/div\u003e\n```\n\n## Step 4: Configure Tailwind\n\nYou can set up the Tailwind CSS configuration in your tailwind.config.ts or tailwind.config.js and copy the theme styling below:\n\n```\n theme: {\n    extend: {\n      colors: {\n        backdrop: \"rgba(0, 0, 0, 0.5)\",\n\n        // Primary Colors\n        primary: {\n          25: \"var(--primary-25)\",\n          50: \"var(--primary-50)\",\n          100: \"var(--primary-100)\",\n          200: \"var(--primary-200)\",\n          300: \"var(--primary-300)\",\n          400: \"var(--primary-400)\",\n          500: \"var(--primary-500)\",\n          600: \"var(--primary-600)\",\n          700: \"var(--primary-700)\",\n          800: \"var(--primary-800)\",\n          900: \"var(--primary-900)\",\n        },\n\n        // Gray Colors\n        gray: {\n          25: \"var(--gray-25)\",\n          50: \"var(--gray-50)\",\n          100: \"var(--gray-100)\",\n          200: \"var(--gray-200)\",\n          300: \"var(--gray-300)\",\n          400: \"var(--gray-400)\",\n          500: \"var(--gray-500)\",\n          600: \"var(--gray-600)\",\n          700: \"var(--gray-700)\",\n          800: \"var(--gray-800)\",\n          900: \"var(--gray-900)\",\n        },\n\n        // Error Colors\n        error: {\n          25: \"var(--error-25)\",\n          50: \"var(--error-50)\",\n          100: \"var(--error-100)\",\n          200: \"var(--error-200)\",\n          300: \"var(--error-300)\",\n          400: \"var(--error-400)\",\n          500: \"var(--error-500)\",\n          600: \"var(--error-600)\",\n          700: \"var(--error-700)\",\n          800: \"var(--error-800)\",\n          900: \"var(--error-900)\",\n        },\n\n        // Warning Colors\n        warning: {\n          25: \"var(--warning-25)\",\n          50: \"var(--warning-50)\",\n          100: \"var(--warning-100)\",\n          200: \"var(--warning-200)\",\n          300: \"var(--warning-300)\",\n          400: \"var(--warning-400)\",\n          500: \"var(--warning-500)\",\n          600: \"var(--warning-600)\",\n          700: \"var(--warning-700)\",\n          800: \"var(--warning-800)\",\n          900: \"var(--warning-900)\",\n        },\n\n        // Success Colors\n        success: {\n          25: \"var(--success-25)\",\n          50: \"var(--success-50)\",\n          100: \"var(--success-100)\",\n          200: \"var(--success-200)\",\n          300: \"var(--success-300)\",\n          400: \"var(--success-400)\",\n          500: \"var(--success-500)\",\n          600: \"var(--success-600)\",\n          700: \"var(--success-700)\",\n          800: \"var(--success-800)\",\n          900: \"var(--success-900)\",\n        },\n\n        bluegray: {\n          25: \"#fcfcfd\",\n          50: \"#f8f9fc\",\n          100: \"#eaecf5\",\n          200: \"#d5d9eb\",\n          300: \"#afb5d9\",\n          400: \"#717bbc\",\n          500: \"#4e5ba6\",\n          600: \"#3e4784\",\n          700: \"#363f72\",\n          800: \"#293056\",\n          900: \"#101323\",\n        },\n\n        bluelight: {\n          25: \"#f5fbff\",\n          50: \"#f0f9ff\",\n          100: \"#e0f2fe\",\n          200: \"#b9e6fe\",\n          300: \"#7cd4fd\",\n          400: \"#36bffa\",\n          500: \"#0ba5ec\",\n          600: \"#0086c9\",\n          700: \"#026aa2\",\n          800: \"#065986\",\n          900: \"#0b4a6f\",\n        },\n\n        indigo: {\n          25: \"#f5f8ff\",\n          50: \"#eef4ff\",\n          100: \"#e0eaff\",\n          200: \"#c7d7fe\",\n          300: \"#a4bcfd\",\n          400: \"#8098f9\",\n          500: \"#6172f3\",\n          600: \"#444ce7\",\n          700: \"#3538cd\",\n          800: \"#2d31a6\",\n          900: \"#2d3282\",\n        },\n\n        purple: {\n          25: \"#fafaff\",\n          50: \"#f4f3ff\",\n          100: \"#ebe9fe\",\n          200: \"#d9d6fe\",\n          300: \"#bdb4fe\",\n          400: \"#9b8afb\",\n          500: \"#7a5af8\",\n          600: \"#6938ef\",\n          700: \"#5925dc\",\n          800: \"#4a1fb8\",\n          900: \"#3e1c96\",\n        },\n\n        violet: {\n          25: \"#fcfaff\",\n          50: \"#f9f5ff\",\n          100: \"#f4ebff\",\n          200: \"#e9d7fe\",\n          300: \"#d6bbfb\",\n          400: \"#b692f6\",\n          500: \"#9e77ed\",\n          600: \"#7f56d9\",\n          700: \"#6941c6\",\n          800: \"#53389e\",\n          900: \"#42307d\",\n        },\n\n        pink: {\n          25: \"#fef6fb\",\n          50: \"#fdf2fa\",\n          100: \"#fce7f6\",\n          200: \"#fcceee\",\n          300: \"#faa7e0\",\n          400: \"#f670c7\",\n          500: \"#ee46bc\",\n          600: \"#dd2590\",\n          700: \"#c11574\",\n          800: \"#9e165f\",\n          900: \"#851651\",\n        },\n\n        rose: {\n          25: \" #fff5f6\",\n          50: \"#fff1f3\",\n          100: \"#ffe4e8\",\n          200: \"#fecdd6\",\n          300: \"#fea3b4\",\n          400: \"#fd6f8e\",\n          500: \"#f63d68\",\n          600: \"#e31b54\",\n          700: \"#c01048\",\n          800: \"#a11043\",\n          900: \"#89123e\",\n        },\n\n        orange: {\n          25: \"#fffaf5\",\n          50: \"#fff6ed\",\n          100: \"#ffead5\",\n          200: \"#fddcab\",\n          300: \"#feb273\",\n          400: \"#fd853a\",\n          500: \"#fb6514\",\n          600: \"#ec4a0a\",\n          700: \"#c4320a\",\n          800: \"#9c2a10\",\n          900: \"#7e2410\",\n        },\n      },\n      fontSize: {\n        \"display-2xl\": \"4.5rem\", // 72px\n        \"display-xl\": \"3.75rem\", // 60px\n        \"display-lg\": \"3rem\", // 48px\n        \"display-md\": \"2.25rem\", // 36px\n        \"display-sm\": \"1.875rem\", // 30px\n        \"display-xs\": \"1.5rem\", // 24px\n        \"text-xl\": \"1.25rem\", // 20px\n        \"text-lg\": \"1.125rem\", // 18px\n        \"text-md\": \"1rem\", // 16px\n        \"text-sm\": \"0.875rem\", // 14px\n        \"text-xs\": \"0.75rem\", // 12px\n      },\n      fontWeight: {\n        regular: \"400\",\n        medium: \"500\",\n        semibold: \"600\",\n        bold: \"700\",\n      },\n      boxShadow: {\n        sm: \"0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.1)\",\n        md: \"1px 2px 12px 0px rgba(112, 112, 112, 0.25)\",\n        lg: \"0px 4px 12px 0px rgba(16, 24, 40, 0.25)\",\n        table: \"inset -3px 0px 0px 0px #EAECF0\",\n      },\n      animation: {\n        \"slide-in-top\": \"slide-in-top 0.5s ease forwards\",\n        \"slide-in-right\": \"slide-in-right 0.5s ease forwards\",\n        \"spin-slow\": \"spin-slow 1.5s linear infinite\",\n      },\n      keyframes: {\n        \"slide-in-top\": {\n          from: {\n            transform: \"translateY(-100%)\",\n          },\n          to: {\n            transform: \"translateY(0)\",\n          },\n        },\n        \"slide-in-right\": {\n          from: {\n            transform: \"translateX(100%)\",\n          },\n          to: {\n            transform: \"translateX(0)\",\n          },\n        },\n        \"spin-slow\": {\n          from: {\n            transform: \"rotate(0deg)\",\n          },\n          to: {\n            transform: \"rotate(360deg)\",\n          },\n        },\n      },\n    },\n  },\n\n```\n\n## Step 5: Define Global Styles\n\nAdd the following CSS to your `index.css` file to define the theme variables and styles:\n\n```css\n@layer base {\n  :root {\n    /* Theme Primary Colors */\n    .theme-primary {\n      --primary-25: #f5faff;\n      --primary-50: #eff8ff;\n      --primary-100: #d1e9ff;\n      --primary-200: #b2ddff;\n      --primary-300: #84caff;\n      --primary-400: #53b1fd;\n      --primary-500: #2e90fa;\n      --primary-600: #1570ef;\n      --primary-700: #175cd3;\n      --primary-800: #1849a9;\n      --primary-900: #194185;\n    }\n\n    /* Gray Colors */\n    --gray-25: #fff;\n    --gray-50: #f9fafb;\n    --gray-100: #f2f4f7;\n    --gray-200: #eaecf0;\n    --gray-300: #d0d5dd;\n    --gray-400: #98a2b3;\n    --gray-500: #667085;\n    --gray-600: #475467;\n    --gray-700: #344054;\n    --gray-800: #1d2939;\n    --gray-900: #101828;\n\n    /* Error Colors */\n    --error-25: #fffbfa;\n    --error-50: #fef3f2;\n    --error-100: #fee4e2;\n    --error-200: #fecdca;\n    --error-300: #fda29b;\n    --error-400: #f97066;\n    --error-500: #f04438;\n    --error-600: #d92d20;\n    --error-700: #b42318;\n    --error-800: #912018;\n    --error-900: #7a271a;\n\n    /* Warning Colors */\n    --warning-25: #fffdf5;\n    --warning-50: #fffaeb;\n    --warning-100: #fef0c7;\n    --warning-200: #fedf89;\n    --warning-300: #fec84b;\n    --warning-400: #fdb022;\n    --warning-500: #f79009;\n    --warning-600: #dc6803;\n    --warning-700: #b54708;\n    --warning-800: #93370d;\n    --warning-900: #7a2e0e;\n\n    /* Success Colors */\n    --success-25: #f6fef9;\n    --success-50: #ecfdf3;\n    --success-100: #d1fadf;\n    --success-200: #a6f4c5;\n    --success-300: #6ce9a6;\n    --success-400: #32d583;\n    --success-500: #12b76a;\n    --success-600: #039855;\n    --success-700: #027a48;\n    --success-800: #05603a;\n    --success-900: #054f31;\n  }\n}\n```\n\n## Step 6: Usage\n\nWith the library set up, you can start using the provided components. Below are examples of how to implement the Button and Chip components.\n\n### Import Components\n\nImport the required components from the `@atomos_tech/genesis-react` package:\n\n```typescript\nimport { Button, Chip } from \"@atomos_tech/genesis-react\";\n```\n\n### Example Usage\n\nHere is how you can integrate the Button and Chip into your page:\n\n```typescript\n\u003cButton variant=\"filled\" intent=\"primary\"\u003e\n    Primary\n\u003c/Button\u003e\n\u003cChip intent=\"primary\" size=\"lg\"\u003e\n    Primary\n\u003c/Chip\u003e\n```\n\n## Example Page\n\nHere's an example of how you might set up a simple page using the library:\n\n```typescript\nimport { Button, Chip } from \"@atomos_tech/genesis-react\";\n\nexport default function ExamplePage() {\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003ch1 className=\"text-2xl font-bold mb-4\"\u003eAtomos Genesis Example(React)\u003c/h1\u003e\n      \u003cdiv className=\"mb-4\"\u003e\n        \u003cButton variant=\"filled\" intent=\"primary\"\u003e\n          Primary Button\n        \u003c/Button\u003e\n      \u003c/div\u003e\n      \u003cdiv\u003e\n        \u003cChip intent=\"primary\" size=\"lg\"\u003e\n          Primary Chip\n        \u003c/Chip\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Adding Interactivity\n\nYou can enhance the user experience by adding more interactive components and styles. Here's an example with a form and some interactive elements:\n\n```typescript\nimport { Button, Chip } from \"@atomos_tech/genesis-react\";\nimport { useState } from \"react\";\n\nexport default function InteractivePage() {\n  const [buttonClicked, setButtonClicked] = useState(false);\n\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003ch1 className=\"text-2xl font-bold mb-4\"\u003e\n        Interactive Atomos Genesis(React) Example\n      \u003c/h1\u003e\n\n      \u003cdiv className=\"mb-4\"\u003e\n        \u003cButton\n          variant=\"filled\"\n          intent=\"primary\"\n          onClick={() =\u003e setButtonClicked(!buttonClicked)}\n        \u003e\n          {buttonClicked ? \"Clicked!\" : \"Click Me\"}\n        \u003c/Button\u003e\n      \u003c/div\u003e\n\n      \u003cdiv className=\"mb-4\"\u003e\n        \u003cChip intent=\"primary\" size=\"lg\"\u003e\n          {buttonClicked ? \"Active Chip\" : \"Inactive Chip\"}\n        \u003c/Chip\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThese instructions will help you effectively integrate and utilize the `@atomos_tech/genesis-react` library in your web applications, providing a consistent and visually appealing user interface.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomostechhq%2Fgenesis-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatomostechhq%2Fgenesis-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatomostechhq%2Fgenesis-react/lists"}