{"id":46783953,"url":"https://github.com/ultrasonicdevs/simplify-dev","last_synced_at":"2026-03-10T01:01:58.974Z","repository":{"id":183491966,"uuid":"670227897","full_name":"ultrasonicdevs/simplify-dev","owner":"ultrasonicdevs","description":"Simple react design system","archived":false,"fork":false,"pushed_at":"2025-11-15T12:00:45.000Z","size":3174,"stargazers_count":2,"open_issues_count":6,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-11-15T12:03:13.475Z","etag":null,"topics":["hook","react","ui","ui-component","ui-kit"],"latest_commit_sha":null,"homepage":"","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/ultrasonicdevs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-07-24T15:13:31.000Z","updated_at":"2025-11-15T12:00:48.000Z","dependencies_parsed_at":"2024-05-05T06:31:45.880Z","dependency_job_id":"198b4b70-c123-41ae-b864-401e6bc4975a","html_url":"https://github.com/ultrasonicdevs/simplify-dev","commit_stats":null,"previous_names":["ultrasonicdevs/samplify-dev","ultrasonicdevs/simplify-dev","ultrasonicdevs/simplicity"],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/ultrasonicdevs/simplify-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultrasonicdevs%2Fsimplify-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultrasonicdevs%2Fsimplify-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultrasonicdevs%2Fsimplify-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultrasonicdevs%2Fsimplify-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ultrasonicdevs","download_url":"https://codeload.github.com/ultrasonicdevs/simplify-dev/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ultrasonicdevs%2Fsimplify-dev/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30320199,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T20:05:46.299Z","status":"ssl_error","status_checked_at":"2026-03-09T19:57:04.425Z","response_time":61,"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":["hook","react","ui","ui-component","ui-kit"],"created_at":"2026-03-10T01:01:29.685Z","updated_at":"2026-03-10T01:01:58.928Z","avatar_url":"https://github.com/ultrasonicdevs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Simplify-dev\n\n---\n\n## About package:\n\nReact library for speeding up creation of interfaces.\n\nIt includes UI components stylized with [tailwindcss](https://tailwindcss.com/) and a set of some commonly used hooks. The main feature of the project is the changeability of library styles out of the box. Styles are applied to components directly in your project using preset and plugin with prepared default values and utilities that can be changed in tailwind configuration file.\n\n---\n\n## [Read documentation](https://github.com/ultrasonicdevs/simplify-dev/wiki)\n\n## Quick start:\n\n### 1. Init your project\n\n_As example used vite react app_\n\n```bash\nnpm create vite@latest my-app --template react-ts\n```\n\n### 2. Install packages and init config files:\n\nInstall simplify-dev, tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.\n\n```bash\nnpm i simplify-dev\nnpm i -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n### 3. Setup configuration\n\n#### Configure your tailwind.config.js:\n\nAdd the paths to all of your template files in your tailwind.config.js file.\n\n```js\nimport { simplifyDefaultsPlugin, simplifyUtilitiesPreset } from 'simplify-dev';\n\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    './index.html',\n    './src/**/*.{js,ts,jsx,tsx}',\n    './node_modules/simplify-dev/*', // styling simplify-dev components\n  ],\n  theme: {\n    extend: {\n      // your configuration\n    },\n  },\n  plugins: [simplifyDefaultsPlugin],\n  presets: [simplifyUtilitiesPreset],\n};\n```\n\nYou can see that we add simplify-dev files to tailwindcss content. This is done to simplify the customization of components via tailwind.config.js\n\n### 4. Add the Tailwind directives to your CSS\n\nAdd the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.\n\n```\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n### 5. Start your build process\n\nRun your build process with npm run dev.\n\n```bash\nnpm run dev\n```\n\n### 6. Start using simplify-dev in your project\n\n**Example:**\n\n```js\nexport default function App() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cBox\n      as=\"section\"\n      className=\"flex flex-col items-center justify-center gap-5 min-h-screen\"\u003e\n      \u003cBox className=\"flex justify-center\"\u003e\n        \u003cButton\n          as=\"a\"\n          buttonType=\"text\"\n          href=\"https://vitejs.dev\"\n          target=\"_blank\"\u003e\n          \u003cimg src={viteLogo} alt=\"Vite logo\" width=\"120px\" /\u003e\n        \u003c/Button\u003e\n        \u003cButton\n          as=\"a\"\n          buttonType=\"text\"\n          href=\"https://react.dev\"\n          target=\"_blank\"\u003e\n          \u003cimg src={reactLogo} alt=\"React logo\" width=\"120px\" /\u003e\n        \u003c/Button\u003e\n      \u003c/Box\u003e\n      \u003cTypography as=\"h1\"\u003eProject with simplify-dev\u003c/Typography\u003e\n      \u003cButton\n        as=\"button\"\n        variant=\"reject\"\n        className=\"w-[300px]\"\n        onClick={() =\u003e setCount((count) =\u003e count + 1)}\u003e\n        count is {count}\n      \u003c/Button\u003e\n      \u003cTypography\u003e\n        Edit \u003ccode\u003esrc/App.tsx\u003c/code\u003e and save to test HMR\n      \u003c/Typography\u003e\n      \u003cTypography\u003eClick on the Vite and React logos to learn more\u003c/Typography\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fultrasonicdevs%2Fsimplify-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fultrasonicdevs%2Fsimplify-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fultrasonicdevs%2Fsimplify-dev/lists"}