A comprehensive boilerplate for building and Chrome extensions with Vite and Shadcn/UI. This template provides a solid foundation for creating robust, type-safe applications with modern testing practices.
- React Chrome Extension with TypeScript
- Full Tailwind CSS and Shadcn/UI support
- Vite for lightning-fast development
- ESLint and Prettier setup
- CI/CD ready configuration
├── src/ # Source files
│ ├── assets/ # Images and static assets
│ ├── components/ # React components
│ │ └── ui/ # UI components
│ ├── lib/ # Utility functions
│ │ └── utils.ts # Helper utilities
│ ├── App.tsx # Main App component
│ ├── App.css # App styles
│ └── main.tsx # Entry point
├── public/ # Static assets and manifest.json
├── vite.config.ts # Vite configuration
├── tsconfig.json # TypeScript configuration
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
└── package.json # Project dependencies and scripts- Node.js (v18+)
- npm or yarn
- Git
- Clone the repository:
git clone https://github.com/tooniez/chrome-extension-vite-shadcn-framer.git
cd chrome-extension-vite-shadcn-framernpm install
or
yarn installStart the development server:
npm run dev
or
yarn devBuild and install the extension:
npm run buildLoad the unpacked extension in Chrome:
chrome://extensions/Contributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.