{"id":25563549,"url":"https://github.com/franc-dev/ct-setup-app","last_synced_at":"2025-06-29T08:32:28.267Z","repository":{"id":267325731,"uuid":"900899631","full_name":"Franc-dev/ct-setup-app","owner":"Franc-dev","description":"simple setup for your react-vite-shadcn-tailwindcss and typescripts app","archived":false,"fork":false,"pushed_at":"2024-12-09T17:27:40.000Z","size":44,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T07:14:55.026Z","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/Franc-dev.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}},"created_at":"2024-12-09T17:14:59.000Z","updated_at":"2025-05-17T11:55:42.000Z","dependencies_parsed_at":"2024-12-09T18:26:47.972Z","dependency_job_id":"bfd0b6e5-cd9a-4ec2-bac3-99fd8d58caf9","html_url":"https://github.com/Franc-dev/ct-setup-app","commit_stats":null,"previous_names":["franc-dev/ct-setup-app"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Franc-dev/ct-setup-app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Franc-dev%2Fct-setup-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Franc-dev%2Fct-setup-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Franc-dev%2Fct-setup-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Franc-dev%2Fct-setup-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Franc-dev","download_url":"https://codeload.github.com/Franc-dev/ct-setup-app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Franc-dev%2Fct-setup-app/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262564453,"owners_count":23329506,"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":"2025-02-20T20:26:48.902Z","updated_at":"2025-06-29T08:32:28.248Z","avatar_url":"https://github.com/Franc-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Complete Setup Guide: React + Vite + shadcn/ui + Tailwind CSS + TypeScript\n\nThis guide provides a detailed, step-by-step process to set up a new project using React, Vite, shadcn/ui, Tailwind CSS, and TypeScript. Follow these instructions carefully to create a powerful, modern web development environment.\n\n## Prerequisites\n\nEnsure you have the following installed on your system:\n- Node.js (version 14.18+ or 16+)\n- npm (comes with Node.js)\n\nYou can check your Node.js and npm versions by running:\n```bash\nnode --version\nnpm --version\n```\n\n## Step 1: Create a new Vite project\n\n1. Open your terminal and navigate to the directory where you want to create your project.\n2. Run the following command to create a new Vite project with React and TypeScript:\n\n\n```shellscript\nnpm create vite@latest my-react-app -- --template react-ts\n```\n\n3. Navigate into your new project directory:\n\n\n```shellscript\ncd my-react-app\n```\n\n## Step 2: Install dependencies\n\nInstall the project dependencies:\n\n```shellscript\nnpm install\n```\n\n## Step 3: Add Tailwind CSS\n\n1. Install Tailwind CSS and its peer dependencies:\n\n\n```shellscript\nnpm install -D tailwindcss postcss autoprefixer\n```\n\n2. Generate Tailwind CSS configuration files:\n\n\n```shellscript\nnpx tailwindcss init -p\n```\n\nThis creates `tailwind.config.js` and `postcss.config.js` files.\n\n## Step 4: Configure Tailwind CSS\n\n1. Open `tailwind.config.js` and replace its content with:\n\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nexport default {\n  content: [\n    \"./index.html\",\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n2. Create or update `src/index.css` with Tailwind directives:\n\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\n3.The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add the baseUrl and paths properties to the compilerOptions section of the `tsconfig.json` and  `tsconfig.app.json` files:\n```bash\n{\n  \"files\": [],\n  \"references\": [\n    {\n      \"path\": \"./tsconfig.app.json\"\n    },\n    {\n      \"path\": \"./tsconfig.node.json\"\n    }\n  ],\n  \"compilerOptions\": {\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  }\n}\n```\n\n4. Edit tsconfig.app.json file\nAdd the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:\n```bash\n{\n  \"compilerOptions\": {\n    // ...\n    \"baseUrl\": \".\",\n    \"paths\": {\n      \"@/*\": [\n        \"./src/*\"\n      ]\n    }\n    // ...\n  }\n}\n\n```\n## Step 5: Install and configure shadcn/ui\n\n1. Run the shadcn/ui init command:\n\n\n```shellscript\nnpx shadcn@latest init\n```\n\n2. Follow the prompts:\n\n1. Would you like to use TypeScript (recommended)? `Yes`\n2. Which style would you like to use? `Default`\n3. Which color would you like to use as base color? `Slate`\n4. Where is your global CSS file? `src/index.css`\n5. Do you want to use CSS variables for colors? `Yes`\n6. Where is your tailwind.config.js located? `tailwind.config.js`\n7. Configure the import alias for components: `@/components`\n8. Configure the import alias for utils: `@/lib/utils`\n9. Are you using React Server Components? `No`\n\n\n## Step 6: Update vite.config.ts\n\n1. Open `vite.config.ts` and update it to include path resolution:\n\n```bash\n# (so you can import \"path\" without error)\nnpm i -D @types/node\n```\n\n```typescript\nimport path from \"path\"\nimport react from \"@vitejs/plugin-react\"\nimport { defineConfig } from \"vite\"\n\nexport default defineConfig({\n  plugins: [react()],\n  resolve: {\n    alias: {\n      \"@\": path.resolve(__dirname, \"./src\"),\n    },\n  },\n})\n\n```\n\n## Step 7: Create a sample component using shadcn/ui\n\n1. Install the Button component:\n\n\n```shellscript\nnpx shadcn@latest add button\n```\n\n2. Create a new file `src/components/HelloWorld.tsx`:\n\n\n```typescriptreact\nimport { Button } from \"@/components/ui/button\"\n\nexport function HelloWorld() {\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003ch1 className=\"text-2xl font-bold mb-4\"\u003eHello, World!\u003c/h1\u003e\n      \u003cButton\u003eClick me\u003c/Button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n3. Update `src/App.tsx` to use the new component:\n\n\n```typescriptreact\nimport { HelloWorld } from './components/HelloWorld'\n\nfunction App() {\n  return (\n    \u003cdiv className=\"container mx-auto mt-8\"\u003e\n      \u003cHelloWorld /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\n## Step 8: Run the development server\n\nStart your development server:\n\n```shellscript\nnpm run dev\n```\n\nOpen your browser and navigate to `http://localhost:5173` (or the port Vite is running on).\n\n## Conclusion\n\nYou now have a fully set up project using React, Vite, shadcn/ui, Tailwind CSS, and TypeScript. This setup provides a powerful foundation for building modern web applications with a beautiful UI and type safety.\n\n## Next Steps\n\n1. Explore the shadcn/ui documentation to add more components to your project.\n2. Dive deeper into Tailwind CSS to customize your styles.\n3. Start building your React components and pages.\n4. Consider setting up ESLint and Prettier for code linting and formatting.\n\n\n## Additional Resources\n\n- [React Documentation](https://reactjs.org/)\n- [Vite Documentation](https://vitejs.dev/)\n- [shadcn/ui Documentation](https://ui.shadcn.com/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/)\n- [TypeScript Documentation](https://www.typescriptlang.org/)\n\n\nHappy coding!\n\n```plaintext\n\nThis `SETUP_GUIDE.md` file provides a comprehensive, step-by-step guide to setting up a project with React, Vite, shadcn/ui, Tailwind CSS, and TypeScript. It includes all the necessary commands, code snippets, and explanations without creating separate components or additional files.\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranc-dev%2Fct-setup-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranc-dev%2Fct-setup-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranc-dev%2Fct-setup-app/lists"}