├── app
    ├── favicon.ico
    ├── components
    │   ├── playground.tsx
    │   └── background.tsx
    ├── globals.css
    ├── layout.tsx
    └── page.tsx
├── public
    ├── banner.jpg
    ├── cover.webp
    ├── vercel.svg
    └── next.svg
├── postcss.config.js
├── next.config.js
├── lib
    └── utils.ts
├── .eslintrc.json
├── README.md
├── .prettierrc.json
├── components.json
├── .gitignore
├── tsconfig.json
├── package.json
├── components
    └── ui
    │   └── button.tsx
└── tailwind.config.js


/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/background-snippets/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/background-snippets/HEAD/public/banner.jpg


--------------------------------------------------------------------------------
/public/cover.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ibelick/background-snippets/HEAD/public/cover.webp


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | module.exports = nextConfig;
5 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx';
2 | import { twMerge } from 'tailwind-merge';
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }
7 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
3 |   "plugins": ["prettier", "prettier-plugin-tailwindcss"],
4 |   "rules": {
5 |     "prettier/prettier": "error"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |  <img src="public/cover.webp" width="100%" />
2 | 
3 | ## BG.IBELICK
4 | 
5 | Collection of modern, background snippets.
6 | Ready to use, simply copy and paste it into your next project. All snippets are crafted with Tailwind CSS.
7 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "printWidth": 80,
 3 |   "tabWidth": 2,
 4 |   "useTabs": false,
 5 |   "semi": true,
 6 |   "singleQuote": true,
 7 |   "trailingComma": "es5",
 8 |   "bracketSpacing": true,
 9 |   "jsxBracketSameLine": false,
10 |   "arrowParens": "avoid",
11 |   "endOfLine": "auto"
12 | }
13 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tailwind": {
 6 |     "config": "tailwind.config.js",
 7 |     "css": "app/globals.css",
 8 |     "baseColor": "neutral",
 9 |     "cssVariables": true
10 |   },
11 |   "aliases": {
12 |     "components": "@/components",
13 |     "utils": "@/lib/utils"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "background-snippets",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@radix-ui/react-slot": "^1.0.2",
13 |     "@types/node": "20.3.3",
14 |     "@types/react": "18.2.14",
15 |     "@types/react-dom": "18.2.6",
16 |     "autoprefixer": "10.4.14",
17 |     "class-variance-authority": "^0.6.1",
18 |     "clsx": "^1.2.1",
19 |     "eslint": "8.44.0",
20 |     "eslint-config-next": "13.4.8",
21 |     "lucide-react": "^0.258.0",
22 |     "next": "13.4.8",
23 |     "postcss": "8.4.24",
24 |     "react": "18.2.0",
25 |     "react-dom": "18.2.0",
26 |     "sonner": "^0.5.0",
27 |     "tailwind-merge": "^1.13.2",
28 |     "tailwindcss": "3.3.2",
29 |     "tailwindcss-animate": "^1.0.6",
30 |     "typescript": "5.1.6"
31 |   },
32 |   "devDependencies": {
33 |     "prettier": "^3.0.0",
34 |     "prettier-plugin-tailwindcss": "^0.4.0"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/app/components/playground.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOMServer from 'react-dom/server';
 3 | import { toast } from 'sonner';
 4 | 
 5 | type PlaygroundProps = {
 6 |   children: React.ReactElement;
 7 |   setPreview: (preview: React.ReactNode) => void;
 8 |   theme: 'light' | 'dark';
 9 |   setTheme: (theme: 'light' | 'dark') => void;
10 | };
11 | 
12 | const Playground: React.FC<PlaygroundProps> = ({
13 |   children,
14 |   setPreview,
15 |   theme,
16 |   setTheme,
17 | }) => {
18 |   const copyCode = () => {
19 |     const code = ReactDOMServer.renderToString(children);
20 | 
21 |     navigator.clipboard.writeText(code);
22 |     toast.success('Copied to clipboard');
23 |   };
24 | 
25 |   return (
26 |     <>
27 |       <div className="relative min-h-[300px] w-full overflow-hidden rounded-lg ring-1 ring-slate-900/10">
28 |         <div className="absolute left-4 top-4 z-10 cursor-pointer">
29 |           <div className="flex flex-row gap-4">
30 |             <div
31 |               className=" rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white"
32 |               onClick={() => {
33 |                 setPreview(children);
34 |                 setTheme(theme);
35 |               }}
36 |             >
37 |               preview
38 |             </div>
39 |             <div
40 |               className="rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white"
41 |               onClick={copyCode}
42 |             >
43 |               copy code
44 |             </div>
45 |           </div>
46 |         </div>
47 |         {children}
48 |       </div>
49 |     </>
50 |   );
51 | };
52 | 
53 | export default Playground;
54 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 0 0% 3.9%;
 9 | 
10 |     --muted: 0 0% 96.1%;
11 |     --muted-foreground: 0 0% 45.1%;
12 | 
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 0 0% 3.9%;
15 | 
16 |     --card: 0 0% 100%;
17 |     --card-foreground: 0 0% 3.9%;
18 | 
19 |     --border: 0 0% 89.8%;
20 |     --input: 0 0% 89.8%;
21 | 
22 |     --primary: 0 0% 9%;
23 |     --primary-foreground: 0 0% 98%;
24 | 
25 |     --secondary: 0 0% 96.1%;
26 |     --secondary-foreground: 0 0% 9%;
27 | 
28 |     --accent: 0 0% 96.1%;
29 |     --accent-foreground: 0 0% 9%;
30 | 
31 |     --destructive: 0 84.2% 60.2%;
32 |     --destructive-foreground: 0 0% 98%;
33 | 
34 |     --ring: 0 0% 63.9%;
35 | 
36 |     --radius: 0.5rem;
37 |   }
38 | 
39 |   .dark {
40 |     --background: 0 0% 3.9%;
41 |     --foreground: 0 0% 98%;
42 | 
43 |     --muted: 0 0% 14.9%;
44 |     --muted-foreground: 0 0% 63.9%;
45 | 
46 |     --popover: 0 0% 3.9%;
47 |     --popover-foreground: 0 0% 98%;
48 | 
49 |     --card: 0 0% 3.9%;
50 |     --card-foreground: 0 0% 98%;
51 | 
52 |     --border: 0 0% 14.9%;
53 |     --input: 0 0% 14.9%;
54 | 
55 |     --primary: 0 0% 98%;
56 |     --primary-foreground: 0 0% 9%;
57 | 
58 |     --secondary: 0 0% 14.9%;
59 |     --secondary-foreground: 0 0% 98%;
60 | 
61 |     --accent: 0 0% 14.9%;
62 |     --accent-foreground: 0 0% 98%;
63 | 
64 |     --destructive: 0 62.8% 30.6%;
65 |     --destructive-foreground: 0 85.7% 97.3%;
66 | 
67 |     --ring: 0 0% 14.9%;
68 |   }
69 | }
70 | 
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }
79 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Script from 'next/script';
 2 | import './globals.css';
 3 | import { Inter } from 'next/font/google';
 4 | 
 5 | const inter = Inter({ subsets: ['latin'] });
 6 | 
 7 | export const metadata = {
 8 |   title: 'BG.IBELICK - Modern, Ready-to-Use Background Snippets for Developers',
 9 |   description:
10 |     'A collection of modern background snippets for web developers. Ready-to-use snippets crafted with Tailwind CSS and Vanilla CSS for seamless integration.',
11 |   keywords:
12 |     'background snippets, Tailwind CSS, CSS snippets, web development, front-end snippets, free CSS resources',
13 |   openGraph: {
14 |     title: 'BG.IBELICK - Ready-to-Use Background Snippets',
15 |     description:
16 |       'Modern background snippets for web developers crafted with Tailwind CSS and Vanilla CSS.',
17 |     url: 'https://bg.ibelick.com',
18 |     type: 'website',
19 |     images: [
20 |       {
21 |         url: '/banner.jpg',
22 |         width: 1200,
23 |         height: 630,
24 |         alt: 'BG.IBELICK Cover Image',
25 |       },
26 |     ],
27 |   },
28 |   twitter: {
29 |     card: 'summary_large_image',
30 |     title: 'BG.IBELICK - Ready-to-Use Background Snippets',
31 |     description:
32 |       'Modern background snippets for web developers crafted with Tailwind CSS and Vanilla CSS.',
33 |     image: '/banner.jpg',
34 |   },
35 | };
36 | 
37 | export default function RootLayout({
38 |   children,
39 | }: {
40 |   children: React.ReactNode;
41 | }) {
42 |   const isDev = process.env.NODE_ENV === 'development';
43 | 
44 |   return (
45 |     <html lang="en" className={inter.className}>
46 |       <body>
47 |         {!isDev ? (
48 |           <Script
49 |             async
50 |             src="https://analytics.umami.is/script.js"
51 |             data-website-id="9ad0e597-9fa4-4690-8ca2-18a964ab087f"
52 |           />
53 |         ) : null}
54 |         {children}
55 |       </body>
56 |     </html>
57 |   );
58 | }
59 | 


--------------------------------------------------------------------------------
/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 rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 |         destructive:
14 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15 |         outline:
16 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17 |         secondary:
18 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
20 |         link: 'text-primary underline-offset-4 hover:underline',
21 |       },
22 |       size: {
23 |         default: 'h-10 px-4 py-2',
24 |         sm: 'h-9 rounded-md px-3',
25 |         lg: 'h-11 rounded-md px-8',
26 |         icon: 'h-10 w-10',
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: 'default',
31 |       size: 'default',
32 |     },
33 |   }
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : 'button';
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   }
53 | );
54 | Button.displayName = 'Button';
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     "./pages/**/*.{ts,tsx}",
 6 |     "./components/**/*.{ts,tsx}",
 7 |     "./app/**/*.{ts,tsx}",
 8 |     "./src/**/*.{ts,tsx}",
 9 |   ],
10 |   theme: {
11 |     container: {
12 |       center: true,
13 |       padding: "2rem",
14 |       screens: {
15 |         "2xl": "1400px",
16 |       },
17 |     },
18 |     extend: {
19 |       colors: {
20 |         border: "hsl(var(--border))",
21 |         input: "hsl(var(--input))",
22 |         ring: "hsl(var(--ring))",
23 |         background: "hsl(var(--background))",
24 |         foreground: "hsl(var(--foreground))",
25 |         primary: {
26 |           DEFAULT: "hsl(var(--primary))",
27 |           foreground: "hsl(var(--primary-foreground))",
28 |         },
29 |         secondary: {
30 |           DEFAULT: "hsl(var(--secondary))",
31 |           foreground: "hsl(var(--secondary-foreground))",
32 |         },
33 |         destructive: {
34 |           DEFAULT: "hsl(var(--destructive))",
35 |           foreground: "hsl(var(--destructive-foreground))",
36 |         },
37 |         muted: {
38 |           DEFAULT: "hsl(var(--muted))",
39 |           foreground: "hsl(var(--muted-foreground))",
40 |         },
41 |         accent: {
42 |           DEFAULT: "hsl(var(--accent))",
43 |           foreground: "hsl(var(--accent-foreground))",
44 |         },
45 |         popover: {
46 |           DEFAULT: "hsl(var(--popover))",
47 |           foreground: "hsl(var(--popover-foreground))",
48 |         },
49 |         card: {
50 |           DEFAULT: "hsl(var(--card))",
51 |           foreground: "hsl(var(--card-foreground))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | };
77 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | import { ArrowRight, Github, Twitter } from 'lucide-react';
  3 | import { BACKGROUND_OPTIONS } from './components/background';
  4 | import { Button } from '@/components/ui/button';
  5 | import Playground from './components/playground';
  6 | import { useState } from 'react';
  7 | import { Toaster } from 'sonner';
  8 | 
  9 | export default function Home() {
 10 |   const [preview, setPreview] = useState<null | React.ReactNode>(null);
 11 |   const [theme, setTheme] = useState<'light' | 'dark'>('light');
 12 | 
 13 |   const resetBg = () => {
 14 |     setPreview(null);
 15 |     setTheme('light');
 16 |   };
 17 | 
 18 |   return (
 19 |     <>
 20 |       <Toaster />
 21 |       <div className={`${theme}`}>
 22 |         <div className="fixed left-0 top-0 -z-10 h-full w-full">
 23 |           {preview ? preview : null}
 24 |         </div>
 25 |         <div className="relative mx-auto h-screen w-full max-w-7xl px-6 md:px-8 lg:px-12">
 26 |           <header className="flex items-center justify-between py-8">
 27 |             <div />
 28 |             <nav className="flex gap-6">
 29 |               <a
 30 |                 href="https://twitter.com/Ibelick"
 31 |                 target="_blank"
 32 |                 rel="noopener noreferrer"
 33 |                 className="inline-flex"
 34 |               >
 35 |                 <Twitter
 36 |                   className="h-6 w-6 text-neutral-800 transition-colors hover:text-neutral-600 dark:text-neutral-200 dark:hover:text-neutral-400"
 37 |                   strokeWidth={1.5}
 38 |                 />
 39 |               </a>
 40 |               <a
 41 |                 href="https://github.com/ibelick/background-snippets"
 42 |                 target="_blank"
 43 |                 rel="noopener noreferrer"
 44 |                 className="inline-flex"
 45 |               >
 46 |                 <Github
 47 |                   className="h-6 w-6 text-neutral-800 transition-colors hover:text-neutral-600 dark:text-neutral-200 dark:hover:text-neutral-400"
 48 |                   strokeWidth={1.5}
 49 |                 />
 50 |               </a>
 51 |             </nav>
 52 |           </header>
 53 |           <div className="pt-8">
 54 |             <div className="relative mx-auto flex max-w-2xl flex-col items-center">
 55 |               <div className="mb-8 flex">
 56 |                 <a
 57 |                   href="https://github.com/ibelick/background-snippets"
 58 |                   target="_blank"
 59 |                   rel="noopener noreferrer"
 60 |                   className="inline-flex"
 61 |                 >
 62 |                   <span className="relative inline-block overflow-hidden rounded-full p-[1px]">
 63 |                     <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#a9a9a9_0%,#0c0c0c_50%,#a9a9a9_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#171717_0%,#737373_50%,#171717_100%)]" />
 64 |                     <div className="inline-flex h-full w-full cursor-pointer justify-center rounded-full bg-white px-3 py-1 text-xs font-medium leading-5 text-slate-600 backdrop-blur-xl dark:bg-black dark:text-slate-200">
 65 |                       New snippets ⚡️
 66 |                       <span className="inline-flex items-center pl-2 text-black dark:text-white">
 67 |                         Read more{' '}
 68 |                         <ArrowRight
 69 |                           className="pl-0.5 text-black dark:text-white"
 70 |                           size={16}
 71 |                         />
 72 |                       </span>
 73 |                     </div>
 74 |                   </span>
 75 |                 </a>
 76 |               </div>
 77 |               <h2 className="text-center text-3xl font-medium text-gray-900 dark:text-gray-50 sm:text-6xl">
 78 |                 Collection of modern,{' '}
 79 |                 <span className="animate-text-gradient inline-flex bg-gradient-to-r from-neutral-900 via-slate-500 to-neutral-500 bg-[200%_auto] bg-clip-text leading-tight text-transparent dark:from-neutral-100 dark:via-slate-400 dark:to-neutral-400">
 80 |                   background snippets
 81 |                 </span>
 82 |               </h2>
 83 |               <p className="mt-6 text-center text-lg leading-6 text-gray-600 dark:text-gray-200">
 84 |                 Ready-to-use, simply copy and paste into your next project. All
 85 |                 snippets crafted with Tailwind CSS and{' '}
 86 |                 <span className="cursor-wait opacity-70">Vanilla CSS</span> for
 87 |                 easy integration.
 88 |               </p>
 89 |               <div className="mt-10 flex gap-4">
 90 |                 <a
 91 |                   href="https://github.com/ibelick/background-snippets"
 92 |                   target="_blank"
 93 |                   rel="noopener noreferrer"
 94 |                   className="inline-flex items-center"
 95 |                 >
 96 |                   <Button>
 97 |                     Go to GitHub <ArrowRight className="pl-0.5" size={16} />
 98 |                   </Button>{' '}
 99 |                 </a>
100 |                 <Button variant="secondary" onClick={resetBg}>
101 |                   Reset background
102 |                 </Button>
103 |               </div>
104 |             </div>
105 |           </div>
106 |           <div className="overflow-hidden px-4 pb-20 pt-52 md:px-10">
107 |             <div className="grid grid-cols-1 gap-6 pb-6 md:grid-cols-2 lg:grid-cols-4">
108 |               {BACKGROUND_OPTIONS.map((background, index) => {
109 |                 return (
110 |                   <Playground
111 |                     key={index}
112 |                     setPreview={setPreview}
113 |                     theme={background.theme}
114 |                     setTheme={setTheme}
115 |                   >
116 |                     {background.component}
117 |                   </Playground>
118 |                 );
119 |               })}
120 |             </div>
121 |             <div className="inline-flex max-w-2xl rounded-md border border-neutral-200 bg-white p-2 text-sm text-neutral-900 dark:border-neutral-900 dark:bg-black dark:text-neutral-200">
122 |               {`These backgrounds are made for a full page background. The preview
123 |               can be different from the actual result. Click on preview to test
124 |               it. And don't forget to tweak it to your needs.`}
125 |             </div>
126 |           </div>
127 |           <footer>
128 |             <div className="flex items-center justify-center py-8">
129 |               <span className="text-sm text-neutral-800 dark:text-neutral-200">
130 |                 Made by
131 |                 <a
132 |                   href="https://twitter.com/Ibelick"
133 |                   target="_blank"
134 |                   rel="noopener noreferrer"
135 |                   className="ml-1 text-neutral-950 dark:text-neutral-100"
136 |                 >
137 |                   @Ibelick
138 |                 </a>
139 |               </span>
140 |             </div>
141 |           </footer>
142 |         </div>
143 |       </div>
144 |     </>
145 |   );
146 | }
147 | 


--------------------------------------------------------------------------------
/app/components/background.tsx:
--------------------------------------------------------------------------------
  1 | const BgLightGrid1 = () => {
  2 |   return (
  3 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]" />
  4 |   );
  5 | };
  6 | 
  7 | const BgLightGrid2 = () => {
  8 |   return (
  9 |     <div className="relative h-full w-full bg-white">
 10 |       <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
 11 |     </div>
 12 |   );
 13 | };
 14 | 
 15 | const BgLightGrid5 = () => {
 16 |   return (
 17 |     <div className="relative h-full w-full bg-white">
 18 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]" />
 19 |     </div>
 20 |   );
 21 | };
 22 | 
 23 | const BgLightGradient1 = () => {
 24 |   return (
 25 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]">
 26 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_800px_at_100%_200px,#d5c5ff,transparent)]" />
 27 |     </div>
 28 |   );
 29 | };
 30 | 
 31 | const BgLightGrid3 = () => {
 32 |   return (
 33 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]" />
 34 |   );
 35 | };
 36 | 
 37 | const BgLightGridGradient1 = () => {
 38 |   return (
 39 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]">
 40 |       <div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-fuchsia-400 opacity-20 blur-[100px]" />
 41 |     </div>
 42 |   );
 43 | };
 44 | 
 45 | const BgDarkGradient1 = () => {
 46 |   return (
 47 |     <div className="absolute inset-0 -z-10 h-full w-full items-center px-5 py-24 [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]" />
 48 |   );
 49 | };
 50 | 
 51 | const BgLightGrid4 = () => {
 52 |   return (
 53 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]" />
 54 |   );
 55 | };
 56 | 
 57 | const BgLightGradient2 = () => {
 58 |   return (
 59 |     <div className="absolute top-0 z-[-2] h-screen w-screen rotate-180 transform bg-white bg-[radial-gradient(60%_120%_at_50%_50%,hsla(0,0%,100%,0)_0,rgba(252,205,238,.5)_100%)]" />
 60 |   );
 61 | };
 62 | 
 63 | const BgDarkGradient2 = () => {
 64 |   return (
 65 |     <div className="absolute top-0 z-[-2] h-screen w-screen bg-neutral-950 bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
 66 |   );
 67 | };
 68 | 
 69 | const BgLightGradient3 = () => {
 70 |   return (
 71 |     <div className="absolute top-0 z-[-2] h-screen w-screen bg-white bg-[radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]" />
 72 |   );
 73 | };
 74 | 
 75 | const BgLightGradient4 = () => {
 76 |   return (
 77 |     <div className="absolute top-0 -z-10 h-full w-full bg-white">
 78 |       <div className="absolute bottom-auto left-auto right-0 top-0 h-[500px] w-[500px] -translate-x-[30%] translate-y-[20%] rounded-full bg-[rgba(173,109,244,0.5)] opacity-50 blur-[80px]" />
 79 |     </div>
 80 |   );
 81 | };
 82 | 
 83 | const BgLightGradient5 = () => {
 84 |   return (
 85 |     <div className="absolute top-0 z-[-2] h-screen w-screen bg-white bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]" />
 86 |   );
 87 | };
 88 | 
 89 | const BgLightGradient6 = () => {
 90 |   return (
 91 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#63e_100%)]" />
 92 |   );
 93 | };
 94 | 
 95 | const BgDarkGrid1 = () => {
 96 |   return (
 97 |     <div className="absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]" />
 98 |   );
 99 | };
100 | 
101 | const BgDarkGradient3 = () => {
102 |   return (
103 |     <div className="relative h-full w-full bg-neutral-900">
104 |       <div className="absolute inset-0 bg-fuchsia-400 bg-[size:20px_20px] opacity-20 blur-[100px]"></div>
105 |     </div>
106 |   );
107 | };
108 | 
109 | const BgLightGridGradient2 = () => {
110 |   return (
111 |     <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]">
112 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#C9EBFF,transparent)]" />
113 |     </div>
114 |   );
115 | };
116 | 
117 | const BgDarkGradient4 = () => {
118 |   return (
119 |     <div className="relative h-full w-full bg-slate-950">
120 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[radial-gradient(circle_500px_at_50%_200px,#3e3e3e,transparent)]" />
121 |     </div>
122 |   );
123 | };
124 | 
125 | const BgDarkGradient5 = () => {
126 |   return (
127 |     <div className="relative h-full w-full bg-slate-950">
128 |       <div className="absolute bottom-0 left-[-20%] right-0 top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]" />
129 |       <div className="absolute bottom-0 right-[-20%] top-[-10%] h-[500px] w-[500px] rounded-full bg-[radial-gradient(circle_farthest-side,rgba(255,0,182,.15),rgba(255,255,255,0))]" />
130 |     </div>
131 |   );
132 | };
133 | 
134 | const BgDarkGrid2 = () => {
135 |   return (
136 |     <div className="relative h-full w-full bg-slate-950">
137 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px]" />
138 |     </div>
139 |   );
140 | };
141 | 
142 | const BgDarkGridGradient1 = () => {
143 |   return (
144 |     <div className="relative h-full w-full bg-black">
145 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]" />
146 |       <div className="absolute left-0 right-0 top-[-10%] h-[1000px] w-[1000px] rounded-full bg-[radial-gradient(circle_400px_at_50%_300px,#fbfbfb36,#000)]" />
147 |     </div>
148 |   );
149 | };
150 | 
151 | const BgDarkGrid3 = () => {
152 |   return (
153 |     <div className="relative h-full w-full bg-slate-950">
154 |       <div className="absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
155 |     </div>
156 |   );
157 | };
158 | 
159 | export const BACKGROUND_OPTIONS = [
160 |   {
161 |     name: 'Background Light Gradient 1',
162 |     component: <BgLightGradient1 />,
163 |     theme: 'light',
164 |   },
165 |   {
166 |     name: 'Background Light Gradient 2',
167 |     component: <BgLightGradient2 />,
168 |     theme: 'light',
169 |   },
170 |   {
171 |     name: 'Background Light Gradient 3',
172 |     component: <BgLightGradient3 />,
173 |     theme: 'light',
174 |   },
175 |   {
176 |     name: 'Background Light Gradient 4',
177 |     component: <BgLightGradient4 />,
178 |     theme: 'light',
179 |   },
180 |   {
181 |     name: 'Background Light Gradient 5',
182 |     component: <BgLightGradient5 />,
183 |     theme: 'light',
184 |   },
185 |   {
186 |     name: 'Background Light Gradient 6',
187 |     component: <BgLightGradient6 />,
188 |     theme: 'light',
189 |   },
190 |   {
191 |     name: 'Background Light Grid Gradient 1',
192 |     component: <BgLightGridGradient1 />,
193 |     theme: 'light',
194 |   },
195 |   {
196 |     name: 'Background Light Grid Gradient 2',
197 |     component: <BgLightGridGradient2 />,
198 |     theme: 'light',
199 |   },
200 |   {
201 |     name: 'Background Light Grid ',
202 |     component: <BgLightGrid1 />,
203 |     theme: 'light',
204 |   },
205 |   {
206 |     name: 'Background Light Grid 2',
207 |     component: <BgLightGrid2 />,
208 |     theme: 'light',
209 |   },
210 |   {
211 |     name: 'Background Light Grid 3',
212 |     component: <BgLightGrid3 />,
213 |     theme: 'light',
214 |   },
215 |   {
216 |     name: 'Background Light Grid 4',
217 |     component: <BgLightGrid4 />,
218 |     theme: 'light',
219 |   },
220 |   {
221 |     name: 'Background Light Grid 5',
222 |     component: <BgLightGrid5 />,
223 |     theme: 'light',
224 |   },
225 |   {
226 |     name: 'Background Dark Gradient',
227 |     component: <BgDarkGradient1 />,
228 |     theme: 'dark',
229 |   },
230 |   {
231 |     name: 'Background Dark Gradient 2',
232 |     component: <BgDarkGradient2 />,
233 |     theme: 'dark',
234 |   },
235 |   {
236 |     name: 'Background Dark Gradient 3',
237 |     component: <BgDarkGradient3 />,
238 |     theme: 'dark',
239 |   },
240 |   {
241 |     name: 'Background Dark Gradient 4',
242 |     component: <BgDarkGradient4 />,
243 |     theme: 'dark',
244 |   },
245 |   {
246 |     name: 'Background Dark Gradient 5',
247 |     component: <BgDarkGradient5 />,
248 |     theme: 'dark',
249 |   },
250 |   {
251 |     name: 'Background Dark Grid Gradient 1',
252 |     component: <BgDarkGridGradient1 />,
253 |     theme: 'dark',
254 |   },
255 |   {
256 |     name: 'Background Dark Grid 1',
257 |     component: <BgDarkGrid1 />,
258 |     theme: 'dark',
259 |   },
260 |   {
261 |     name: 'Background Dark Grid 2',
262 |     component: <BgDarkGrid2 />,
263 |     theme: 'dark',
264 |   },
265 |   {
266 |     name: 'Background Dark Grid 3',
267 |     component: <BgDarkGrid3 />,
268 |     theme: 'dark',
269 |   },
270 | ] as const;
271 | 


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