├── assets
    └── icon.png
├── postcss.config.js
├── src
    ├── features
    │   └── count-button.tsx
    ├── popup.tsx
    ├── lib
    │   └── utils.ts
    ├── content.tsx
    ├── components
    │   └── ui
    │   │   ├── label.tsx
    │   │   └── button.tsx
    └── style.css
├── tsconfig.json
├── components.json
├── .gitignore
├── .prettierrc.mjs
├── .editorconfig
├── .github
    └── workflows
    │   └── submit.yml
├── LICENSE
├── package.json
├── README.md
└── tailwind.config.js


/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sugarforever/plasmo-tailwind-shadcn-boilerplate/main/assets/icon.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | /**
2 |  * @type {import('postcss').ProcessOptions}
3 |  */
4 | module.exports = {
5 |   plugins: {
6 |     tailwindcss: {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/src/features/count-button.tsx:
--------------------------------------------------------------------------------
 1 | import { useReducer } from "react"
 2 | import { Button } from "@/components/ui/button"
 3 | 
 4 | export const CountButton = (props: { id: string }) => {
 5 |   const [count, increase] = useReducer((c) => c + 1, 0)
 6 | 
 7 |   return (
 8 |     <Button id={props.id} onClick={() => increase()}>
 9 |       {count}
10 |     </Button>
11 |   )
12 | }
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "plasmo/templates/tsconfig.base",
 3 |   "exclude": [
 4 |     "node_modules"
 5 |   ],
 6 |   "include": [
 7 |     ".plasmo/index.d.ts",
 8 |     "./**/*.ts",
 9 |     "./**/*.tsx"
10 |   ],
11 |   "compilerOptions": {
12 |     "paths": {
13 |       "~*": [
14 |         "./src/*"
15 |       ],
16 |       "@/*": ["./src/*"]
17 |     },
18 |     "baseUrl": "."
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/popup.tsx:
--------------------------------------------------------------------------------
 1 | import { CountButton } from "~features/count-button"
 2 | import { Label } from "@/components/ui/label"
 3 | 
 4 | import "~style.css"
 5 | 
 6 | function IndexPopup() {
 7 |   return (
 8 |     <div className="flex flex-col items-center justify-center w-[200px] gap-4 p-4">
 9 |       <Label htmlFor="count-button">Click to increment</Label>
10 |       <CountButton id="count-button" />
11 |     </div>
12 |   )
13 | }
14 | 
15 | export default IndexPopup
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "zinc",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }
22 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | export function formatDate(input: string | number): string {
 9 |   const date = new Date(input)
10 |   return date.toLocaleDateString("en-US", {
11 |     month: "long",
12 |     day: "numeric",
13 |     year: "numeric",
14 |   })
15 | }
16 | 
17 | export function absoluteUrl(path: string) {
18 |   return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 3 | 
 4 | # dependencies
 5 | /node_modules
 6 | /.pnp
 7 | .pnp.js
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | #cache
13 | .turbo
14 | 
15 | # misc
16 | .DS_Store
17 | *.pem
18 | 
19 | # debug
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | .pnpm-debug.log*
24 | 
25 | # local env files
26 | .env*
27 | 
28 | out/
29 | build/
30 | dist/
31 | 
32 | # plasmo - https://www.plasmo.com
33 | .plasmo
34 | 
35 | # bpp - http://bpp.browser.market/
36 | keys.json
37 | 
38 | # typescript
39 | .tsbuildinfo
40 | 


--------------------------------------------------------------------------------
/src/content.tsx:
--------------------------------------------------------------------------------
 1 | import cssText from "data-text:~style.css"
 2 | import type { PlasmoCSConfig } from "plasmo"
 3 | 
 4 | import { CountButton } from "~features/count-button"
 5 | 
 6 | export const config: PlasmoCSConfig = {
 7 |   matches: ["https://www.plasmo.com/*"]
 8 | }
 9 | 
10 | export const getStyle = () => {
11 |   const style = document.createElement("style")
12 |   style.textContent = cssText
13 |   return style
14 | }
15 | 
16 | const PlasmoOverlay = () => {
17 |   return (
18 |     <div className="plasmo-z-50 plasmo-flex plasmo-fixed plasmo-top-32 plasmo-right-8">
19 |       <CountButton />
20 |     </div>
21 |   )
22 | }
23 | 
24 | export default PlasmoOverlay
25 | 


--------------------------------------------------------------------------------
/.prettierrc.mjs:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @type {import('prettier').Options}
 3 |  */
 4 | export default {
 5 |   printWidth: 80,
 6 |   tabWidth: 2,
 7 |   useTabs: false,
 8 |   semi: false,
 9 |   singleQuote: false,
10 |   trailingComma: "none",
11 |   bracketSpacing: true,
12 |   bracketSameLine: true,
13 |   plugins: ["@ianvs/prettier-plugin-sort-imports"],
14 |   importOrder: [
15 |     "<BUILTIN_MODULES>", // Node.js built-in modules
16 |     "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
17 |     "", // Empty line
18 |     "^@plasmo/(.*)$",
19 |     "",
20 |     "^@plasmohq/(.*)$",
21 |     "",
22 |     "^~(.*)$",
23 |     "",
24 |     "^[./]"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as LabelPrimitive from "@radix-ui/react-label"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const labelVariants = cva(
 8 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 9 | )
10 | 
11 | const Label = React.forwardRef<
12 |   React.ElementRef<typeof LabelPrimitive.Root>,
13 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
14 |     VariantProps<typeof labelVariants>
15 | >(({ className, ...props }, ref) => (
16 |   <LabelPrimitive.Root
17 |     ref={ref}
18 |     className={cn(labelVariants(), className)}
19 |     {...props}
20 |   />
21 | ))
22 | Label.displayName = LabelPrimitive.Root.displayName
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | # Unix-style newlines with a newline ending every file
 7 | [*]
 8 | end_of_line = lf
 9 | insert_final_newline = true
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | 
13 | # TypeScript and JavaScript files
14 | [*.{ts,tsx,js,jsx}]
15 | indent_style = space
16 | indent_size = 2
17 | 
18 | # CSS, SCSS, and JSON files
19 | [*.{css,scss,json}]
20 | indent_style = space
21 | indent_size = 2
22 | 
23 | # HTML files
24 | [*.html]
25 | indent_style = space
26 | indent_size = 2
27 | 
28 | # Markdown files
29 | [*.md]
30 | trim_trailing_whitespace = false
31 | max_line_length = off
32 | 
33 | # Package files
34 | [package.json]
35 | indent_style = space
36 | indent_size = 2
37 | 
38 | # Config files
39 | [*.{yml,yaml}]
40 | indent_style = space
41 | indent_size = 2 


--------------------------------------------------------------------------------
/.github/workflows/submit.yml:
--------------------------------------------------------------------------------
 1 | name: "Submit to Web Store"
 2 | on:
 3 |   workflow_dispatch:
 4 | 
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 |     steps:
 9 |       - uses: actions/checkout@v3
10 |       - name: Cache pnpm modules
11 |         uses: actions/cache@v3
12 |         with:
13 |           path: ~/.pnpm-store
14 |           key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
15 |           restore-keys: |
16 |             ${{ runner.os }}-
17 |       - uses: pnpm/action-setup@v2.2.4
18 |         with:
19 |           version: latest
20 |           run_install: true
21 |       - name: Use Node.js 16.x
22 |         uses: actions/setup-node@v3.4.1
23 |         with:
24 |           node-version: 16.x
25 |           cache: "pnpm"
26 |       - name: Build the extension
27 |         run: pnpm build
28 |       - name: Package the extension into a zip artifact
29 |         run: pnpm package
30 |       - name: Browser Platform Publish
31 |         uses: PlasmoHQ/bpp@v3
32 |         with:
33 |           keys: ${{ secrets.SUBMIT_KEYS }}
34 |           artifact: build/chrome-mv3-prod.zip
35 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 sugarforever
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "plasmo-tailwind-shadcn-boilerplate",
 3 |   "displayName": "Plasmo tailwind shadcn boilerplate",
 4 |   "version": "0.0.1",
 5 |   "description": "A basic Plasmo extension.",
 6 |   "author": "sugarforever <william.1022@gmail.com",
 7 |   "scripts": {
 8 |     "dev": "plasmo dev",
 9 |     "build": "plasmo build",
10 |     "package": "plasmo package"
11 |   },
12 |   "dependencies": {
13 |     "@radix-ui/react-label": "^2.1.1",
14 |     "@radix-ui/react-slot": "^1.1.1",
15 |     "class-variance-authority": "^0.7.1",
16 |     "clsx": "^2.1.1",
17 |     "lucide-react": "^0.469.0",
18 |     "plasmo": "0.89.4",
19 |     "react": "18.2.0",
20 |     "react-dom": "18.2.0",
21 |     "tailwind-merge": "^2.6.0",
22 |     "tailwindcss": "3.4.1",
23 |     "tailwindcss-animate": "^1.0.7"
24 |   },
25 |   "devDependencies": {
26 |     "@ianvs/prettier-plugin-sort-imports": "4.1.1",
27 |     "@types/chrome": "0.0.258",
28 |     "@types/node": "20.11.5",
29 |     "@types/react": "18.2.48",
30 |     "@types/react-dom": "18.2.18",
31 |     "postcss": "8.4.33",
32 |     "prettier": "3.2.4",
33 |     "typescript": "5.3.3"
34 |   },
35 |   "manifest": {
36 |     "host_permissions": [
37 |       "https://*/*"
38 |     ]
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a Plasmo boilerplate project supports the following features:
 2 | - Tailwind CSS
 3 | - Shadcn
 4 | 
 5 | ## Getting Started
 6 | 
 7 | First, run the development server:
 8 | 
 9 | ```bash
10 | pnpm dev
11 | # or
12 | npm run dev
13 | ```
14 | 
15 | Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.
16 | 
17 | You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.
18 | 
19 | For further guidance, [visit our Documentation](https://docs.plasmo.com/)
20 | 
21 | ## Making production build
22 | 
23 | Run the following:
24 | 
25 | ```bash
26 | pnpm build
27 | # or
28 | npm run build
29 | ```
30 | 
31 | This should create a production bundle for your extension, ready to be zipped and published to the stores.
32 | 
33 | ## Submit to the webstores
34 | 
35 | The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
36 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: ["./src/**/*.{tsx,html}"],
 4 |   darkMode: "class",
 5 |   theme: {
 6 |     extend: {
 7 |       colors: {
 8 |         border: "hsl(var(--border))",
 9 |         input: "hsl(var(--input))",
10 |         ring: "hsl(var(--ring))",
11 |         background: "hsl(var(--background))",
12 |         foreground: "hsl(var(--foreground))",
13 |         primary: {
14 |           DEFAULT: "hsl(var(--primary))",
15 |           foreground: "hsl(var(--primary-foreground))",
16 |         },
17 |         secondary: {
18 |           DEFAULT: "hsl(var(--secondary))",
19 |           foreground: "hsl(var(--secondary-foreground))",
20 |         },
21 |         destructive: {
22 |           DEFAULT: "hsl(var(--destructive))",
23 |           foreground: "hsl(var(--destructive-foreground))",
24 |         },
25 |         muted: {
26 |           DEFAULT: "hsl(var(--muted))",
27 |           foreground: "hsl(var(--muted-foreground))",
28 |         },
29 |         accent: {
30 |           DEFAULT: "hsl(var(--accent))",
31 |           foreground: "hsl(var(--accent-foreground))",
32 |         },
33 |         popover: {
34 |           DEFAULT: "hsl(var(--popover))",
35 |           foreground: "hsl(var(--popover-foreground))",
36 |         },
37 |         card: {
38 |           DEFAULT: "hsl(var(--card))",
39 |           foreground: "hsl(var(--card-foreground))",
40 |         },
41 |       },
42 |       borderRadius: {
43 |         lg: `var(--radius)`,
44 |         md: `calc(var(--radius) - 2px)`,
45 |         sm: "calc(var(--radius) - 4px)",
46 |       },
47 |     },
48 |   },
49 |   plugins: [require("tailwindcss-animate")],
50 | }
51 | 


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | @layer base {
 8 |   :root {
 9 |     --background: 0 0% 100%;
10 |     --foreground: 222.2 47.4% 11.2%;
11 |     --muted: 210 40% 96.1%;
12 |     --muted-foreground: 215.4 16.3% 46.9%;
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 222.2 47.4% 11.2%;
15 |     --border: 214.3 31.8% 91.4%;
16 |     --input: 214.3 31.8% 91.4%;
17 |     --card: 0 0% 100%;
18 |     --card-foreground: 222.2 47.4% 11.2%;
19 |     --primary: 222.2 47.4% 11.2%;
20 |     --primary-foreground: 210 40% 98%;
21 |     --secondary: 210 40% 96.1%;
22 |     --secondary-foreground: 222.2 47.4% 11.2%;
23 |     --accent: 210 40% 96.1%;
24 |     --accent-foreground: 222.2 47.4% 11.2%;
25 |     --destructive: 0 100% 50%;
26 |     --destructive-foreground: 210 40% 98%;
27 |     --ring: 215 20.2% 65.1%;
28 |     --radius: 0.5rem;
29 |   }
30 | 
31 |   .dark {
32 |     --background: 224 71% 4%;
33 |     --foreground: 213 31% 91%;
34 |     --muted: 223 47% 11%;
35 |     --muted-foreground: 215.4 16.3% 56.9%;
36 |     --accent: 216 34% 17%;
37 |     --accent-foreground: 210 40% 98%;
38 |     --popover: 224 71% 4%;
39 |     --popover-foreground: 215 20.2% 65.1%;
40 |     --border: 216 34% 17%;
41 |     --input: 216 34% 17%;
42 |     --card: 224 71% 4%;
43 |     --card-foreground: 213 31% 91%;
44 |     --primary: 210 40% 98%;
45 |     --primary-foreground: 222.2 47.4% 1.2%;
46 |     --secondary: 222.2 47.4% 11.2%;
47 |     --secondary-foreground: 210 40% 98%;
48 |     --destructive: 0 63% 31%;
49 |     --destructive-foreground: 210 40% 98%;
50 |     --ring: 216 34% 17%;
51 |   }
52 | }
53 | 
54 | @layer base {
55 |   * {
56 |     @apply border-border;
57 |   }
58 |   body {
59 |     @apply font-sans antialiased bg-background text-foreground;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------