{"id":14985474,"url":"https://github.com/hello-softis/andromeda","last_synced_at":"2026-02-07T10:04:36.250Z","repository":{"id":250073734,"uuid":"826988310","full_name":"hello-softis/andromeda","owner":"hello-softis","description":"Design System used by Softis.","archived":false,"fork":false,"pushed_at":"2024-10-17T19:37:00.000Z","size":11235,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-21T03:42:39.570Z","etag":null,"topics":["design-system","front-end","javascript","react","stitches","storybook","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/~hello-softis","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hello-softis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-10T19:37:01.000Z","updated_at":"2024-12-22T02:33:15.000Z","dependencies_parsed_at":"2024-07-25T02:46:07.087Z","dependency_job_id":"c60588f3-3bed-4be5-9eda-5009020b1cf7","html_url":"https://github.com/hello-softis/andromeda","commit_stats":{"total_commits":111,"total_committers":3,"mean_commits":37.0,"dds":"0.32432432432432434","last_synced_commit":"1f4dec6ea2d3d940cccdc30e9d3dbee44bdfbc01"},"previous_names":["hello-softis/andromeda"],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/hello-softis/andromeda","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-softis%2Fandromeda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-softis%2Fandromeda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-softis%2Fandromeda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-softis%2Fandromeda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hello-softis","download_url":"https://codeload.github.com/hello-softis/andromeda/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hello-softis%2Fandromeda/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29191996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["design-system","front-end","javascript","react","stitches","storybook","tailwind","tailwindcss","typescript"],"created_at":"2024-09-24T14:11:01.247Z","updated_at":"2026-02-07T10:04:36.225Z","avatar_url":"https://github.com/hello-softis.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/logo.svg\" width=\"500px\" height=\"500px\" /\u003e\n\u003c/div\u003e\n\n# \u003cspan style=\"color: #9956F6;\"\u003eAndromeda\u003c/span\u003e\n\nAndromeda is the Design System of Softis, designed to create cohesive and efficient user interfaces. With reusable components, clear guidelines, and comprehensive documentation, Andromeda helps build digital products with consistency and quality.\n\n---\n\n## Badges\n\n![Version](https://img.shields.io/badge/Version-2.1.0-black?style=for-the-badge\u0026logo=version\u0026logoColor=white\u0026color=black\u0026labelColor=black\u0026label=Version)\n![Update](https://img.shields.io/badge/Update-July%202024-black?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026color=black\u0026labelColor=black\u0026label=Update)\n![License](https://img.shields.io/badge/License-Commercial-black?style=for-the-badge\u0026logo=license\u0026logoColor=white\u0026color=black\u0026labelColor=black\u0026label=License)\n\n## Project Status\n\n![Status](https://img.shields.io/badge/Status-In%20Development-black?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026color=black\u0026labelColor=black\u0026label=Status)\n\n---\n\n## Table of Contents\n\n- [Prerequisites and How to Run the App](#prerequisites-and-how-to-run-the-app)\n- [How to use](#how-to-use-andromeda)\n- [Integration with Tailwind](#integration-with-tailwind)\n- [Technologies Used](#technologies-used)\n- [Author](#author)\n- [License](#license)\n\n---\n\n## Prerequisites and How to Run the App\n\n### Prerequisites\n\n- Node.js version 21.x or higher\n- Yarn or npm\n\nHere's the updated section in English, without the Tailwind integration part:\n\n---\n\n## How to Use Andromeda\n\nTo integrate Andromeda into your project, follow these steps:\n\n### 1. Install Dependencies\n\nFirst, add Andromeda as a dependency in your project. Run the following commands to install the tokens package and the React components package:\n\n```bash\nnpm install @hello.softis/andromeda-tokens\nnpm install @hello.softis/andromeda-react\n```\n\n### 2. Configure Design Tokens\n\nAndromeda’s tokens provide values for colors, font sizes, and other design styles. To use them in your project, import the tokens and apply them in your styling files or directly in your components.\n\nHere’s an example of how you might import and use tokens in a CSS-in-JS solution or inline styles:\n\n```javascript\nimport * as tokens from '@hello.softis/andromeda-tokens';\n\nconst styles = {\n  color: tokens.twColors.primary,\n  fontSize: tokens.fontSizes.large,\n};\n\nfunction App() {\n  return (\n    \u003cdiv style={styles}\u003e\n      \u003ch1\u003eWelcome to Andromeda\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### 3. Use React Components\n\nThe `@hello.softis/andromeda-react` package includes a set of pre-configured components that follow the Design System guidelines. To use them, import the desired components and include them in your project:\n\n```javascript\nimport { Button, Card } from '@hello.softis/andromeda-react';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003cCard\u003e\n        \u003ch1\u003eWelcome to Andromeda\u003c/h1\u003e\n        \u003cButton\u003eClick Me\u003c/Button\u003e\n      \u003c/Card\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### 4. Start Your Project\n\nAfter setting up the dependencies and integrating the tokens and components, start your project to see the changes in action:\n\n```bash\nnpm run dev\n```\n\n---\n\nFeel free to let me know if there are any other changes you need!\n\n## Integration with Tailwind\n\nAndromeda can be easily integrated with Tailwind CSS, allowing you to use the colors defined in the Design System directly in your Tailwind utility classes. To do this, you need to configure your project's tailwind.config.js file to import the colors from the Andromeda tokens package.\n\nFirst, install the tokens package:\n\n```bash\nnpm install @hello.softis/andromeda-tokens\n```\n\nNext, configure the tailwind.config.js file to add Andromeda's colors:\n\n```bash\n/** @type {import('tailwindcss').Config} */\nimport * as tokens from '@hello.softis/andromeda-tokens';\n\nexport default {\n  content: ['../react/src/**/*.{js,ts,jsx,tsx}','./src/**/*.{js,ts,jsx,tsx,mdx}'],\n  theme: {\n    extend: {\n      colors: tokens.twColors,\n      fontSize: tokens.fontSizes,\n      fontWeight: tokens.fontWeights,\n      fontFamily: {\n        sans: tokens.fonts.default,\n        mono: tokens.fonts.code,\n      },\n      lineHeight: tokens.lineHeights,\n      borderRadius: tokens.radii,\n      spacing: tokens.space,\n    },\n  },\n  plugins: [],\n};\n```\n\nWith this configuration, you can use Andromeda's colors directly in Tailwind CSS classes, ensuring visual consistency and leveraging the benefits of a well-defined design system.\n\n---\n\n## Technologies Used\n\n![Storybook](./public/readme/languages/storybook.svg \"Storybook\")\n![React](./public/readme/languages/react-ts.svg \"React\")\n![Tailwind](./public/readme/languages/tailwind.svg \"Tailwind CSS\")\n![TypeScript](./public/readme/languages/typescript.svg \"TypeScript\")\n![Turborepo](./public/readme/languages/turborepo.svg \"Turborepo\")\n![npm](./public/readme/languages/npm.svg \"npm\")\n![others](./public/readme/languages/symbols.svg \"Others\")\n\n#### Others\n- [Radix UI](https://radix-ui.com/ \"Radix\")\n- [Chakra-UI](https://chakra-ui.com/ \"Chakra\")\n- [Stitches](https://stitches.dev/ \"Stitches\")\n- [Tailwind Variants](https://www.tailwind-variants.org/ \"Tailwind Variants\")\n- [HugeIcons](https://hugeicons.com/ \"HugeIcons\")\n\n## Author\n\nDeveloped by [Softis©](https://github.com/hello-softis). Get in touch!\n\n## License\n\nThis project is licensed under a closed license. See the [LICENSE](LICENSE.md) file for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-softis%2Fandromeda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhello-softis%2Fandromeda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhello-softis%2Fandromeda/lists"}