├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── README.md ├── app ├── components │ ├── background.tsx │ └── playground.tsx ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── components.json ├── components └── ui │ └── button.tsx ├── lib └── utils.ts ├── next.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── banner.jpg ├── cover.webp ├── next.svg └── vercel.svg ├── tailwind.config.js └── tsconfig.json /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 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 | -------------------------------------------------------------------------------- /app/components/background.tsx: -------------------------------------------------------------------------------- 1 | const BgLightGrid1 = () => { 2 | return ( 3 |
4 | ); 5 | }; 6 | 7 | const BgLightGrid2 = () => { 8 | return ( 9 |
10 |
11 |
12 | ); 13 | }; 14 | 15 | const BgLightGrid5 = () => { 16 | return ( 17 |
18 |
19 |
20 | ); 21 | }; 22 | 23 | const BgLightGradient1 = () => { 24 | return ( 25 |
26 |
27 |
28 | ); 29 | }; 30 | 31 | const BgLightGrid3 = () => { 32 | return ( 33 |
34 | ); 35 | }; 36 | 37 | const BgLightGridGradient1 = () => { 38 | return ( 39 |
40 |
41 |
42 | ); 43 | }; 44 | 45 | const BgDarkGradient1 = () => { 46 | return ( 47 |
48 | ); 49 | }; 50 | 51 | const BgLightGrid4 = () => { 52 | return ( 53 |
54 | ); 55 | }; 56 | 57 | const BgLightGradient2 = () => { 58 | return ( 59 |
60 | ); 61 | }; 62 | 63 | const BgDarkGradient2 = () => { 64 | return ( 65 |
66 | ); 67 | }; 68 | 69 | const BgLightGradient3 = () => { 70 | return ( 71 |
72 | ); 73 | }; 74 | 75 | const BgLightGradient4 = () => { 76 | return ( 77 |
78 |
79 |
80 | ); 81 | }; 82 | 83 | const BgLightGradient5 = () => { 84 | return ( 85 |
86 | ); 87 | }; 88 | 89 | const BgLightGradient6 = () => { 90 | return ( 91 |
92 | ); 93 | }; 94 | 95 | const BgDarkGrid1 = () => { 96 | return ( 97 |
98 | ); 99 | }; 100 | 101 | const BgDarkGradient3 = () => { 102 | return ( 103 |
104 |
105 |
106 | ); 107 | }; 108 | 109 | const BgLightGridGradient2 = () => { 110 | return ( 111 |
112 |
113 |
114 | ); 115 | }; 116 | 117 | const BgDarkGradient4 = () => { 118 | return ( 119 |
120 |
121 |
122 | ); 123 | }; 124 | 125 | const BgDarkGradient5 = () => { 126 | return ( 127 |
128 |
129 |
130 |
131 | ); 132 | }; 133 | 134 | const BgDarkGrid2 = () => { 135 | return ( 136 |
137 |
138 |
139 | ); 140 | }; 141 | 142 | const BgDarkGridGradient1 = () => { 143 | return ( 144 |
145 |
146 |
147 |
148 | ); 149 | }; 150 | 151 | const BgDarkGrid3 = () => { 152 | return ( 153 |
154 |
155 |
156 | ); 157 | }; 158 | 159 | export const BACKGROUND_OPTIONS = [ 160 | { 161 | name: 'Background Light Gradient 1', 162 | component: , 163 | theme: 'light', 164 | }, 165 | { 166 | name: 'Background Light Gradient 2', 167 | component: , 168 | theme: 'light', 169 | }, 170 | { 171 | name: 'Background Light Gradient 3', 172 | component: , 173 | theme: 'light', 174 | }, 175 | { 176 | name: 'Background Light Gradient 4', 177 | component: , 178 | theme: 'light', 179 | }, 180 | { 181 | name: 'Background Light Gradient 5', 182 | component: , 183 | theme: 'light', 184 | }, 185 | { 186 | name: 'Background Light Gradient 6', 187 | component: , 188 | theme: 'light', 189 | }, 190 | { 191 | name: 'Background Light Grid Gradient 1', 192 | component: , 193 | theme: 'light', 194 | }, 195 | { 196 | name: 'Background Light Grid Gradient 2', 197 | component: , 198 | theme: 'light', 199 | }, 200 | { 201 | name: 'Background Light Grid ', 202 | component: , 203 | theme: 'light', 204 | }, 205 | { 206 | name: 'Background Light Grid 2', 207 | component: , 208 | theme: 'light', 209 | }, 210 | { 211 | name: 'Background Light Grid 3', 212 | component: , 213 | theme: 'light', 214 | }, 215 | { 216 | name: 'Background Light Grid 4', 217 | component: , 218 | theme: 'light', 219 | }, 220 | { 221 | name: 'Background Light Grid 5', 222 | component: , 223 | theme: 'light', 224 | }, 225 | { 226 | name: 'Background Dark Gradient', 227 | component: , 228 | theme: 'dark', 229 | }, 230 | { 231 | name: 'Background Dark Gradient 2', 232 | component: , 233 | theme: 'dark', 234 | }, 235 | { 236 | name: 'Background Dark Gradient 3', 237 | component: , 238 | theme: 'dark', 239 | }, 240 | { 241 | name: 'Background Dark Gradient 4', 242 | component: , 243 | theme: 'dark', 244 | }, 245 | { 246 | name: 'Background Dark Gradient 5', 247 | component: , 248 | theme: 'dark', 249 | }, 250 | { 251 | name: 'Background Dark Grid Gradient 1', 252 | component: , 253 | theme: 'dark', 254 | }, 255 | { 256 | name: 'Background Dark Grid 1', 257 | component: , 258 | theme: 'dark', 259 | }, 260 | { 261 | name: 'Background Dark Grid 2', 262 | component: , 263 | theme: 'dark', 264 | }, 265 | { 266 | name: 'Background Dark Grid 3', 267 | component: , 268 | theme: 'dark', 269 | }, 270 | ] as const; 271 | -------------------------------------------------------------------------------- /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 = ({ 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 |
28 |
29 |
30 |
{ 33 | setPreview(children); 34 | setTheme(theme); 35 | }} 36 | > 37 | preview 38 |
39 |
43 | copy code 44 |
45 |
46 |
47 | {children} 48 |
49 | 50 | ); 51 | }; 52 | 53 | export default Playground; 54 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ibelick/background-snippets/e4dbb135364867f9cb5b3f3bd4a98a493f49cf5f/app/favicon.ico -------------------------------------------------------------------------------- /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 | 46 | 47 | {!isDev ? ( 48 |