Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tooniez/chrome-extension-vite-shadcn-framer

Chrome extension Vite Starter with Shadcn, Framer and Tailwind CSS
https://github.com/tooniez/chrome-extension-vite-shadcn-framer

extension-chrome framer-motion shadcn-ui tailwindcss vite

Last synced: about 2 months ago
JSON representation

Chrome extension Vite Starter with Shadcn, Framer and Tailwind CSS

Host: GitHub
URL: https://github.com/tooniez/chrome-extension-vite-shadcn-framer
Owner: tooniez
License: mit
Created: 2024-11-03T09:54:50.000Z (3 months ago)
Default Branch: main
Last Pushed: 2024-11-03T09:54:51.000Z (3 months ago)
Last Synced: 2024-11-10T13:25:41.612Z (3 months ago)
Topics: extension-chrome, framer-motion, shadcn-ui, tailwindcss, vite
Language: TypeScript
Homepage:
Size: 237 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
- Support: .github/SUPPORT.md
- Governance: .github/GOVERNANCE.md

Awesome Lists containing this project

README

Chrome Extension Vite Shadcn UI Starter 🚀

A modern, TypeScript-powered Chrome extension starter with React and Shadcn/UI

## 🚀 Introduction

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.

### ✨ Features

- 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

## 📁 Project Structure

```shell
├── 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
```
## 🛠️ Getting Started

### Prerequisites

- Node.js (v18+)
- npm or yarn
- Git

### Setup

1. Clone the repository:

```bash
git clone https://github.com/tooniez/chrome-extension-vite-shadcn-framer.git
cd chrome-extension-vite-shadcn-framer
```

```bash
npm install
or
yarn install
```

### Development

Start the development server:

```bash
npm run dev
or
yarn dev
```

### Deployment

Build and install the extension:

```bash
npm run build
```

Load the unpacked extension in Chrome:

```bash
chrome://extensions/
```

## 🤝 Contributing

Contributions are welcome! Please read our [Contributing Guide](.github/CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.

## 📝 License