https://github.com/msafdev/background

🌆 modern background snippets for your websites
https://github.com/msafdev/background

backgrounds tailwindcss

Last synced: 9 months ago
JSON representation

🌆 modern background snippets for your websites

• Host: GitHub
• URL: https://github.com/msafdev/background
• Owner: msafdev
• License: mit
• Created: 2024-06-08T17:28:40.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-04-11T05:50:09.000Z (9 months ago)
• Last Synced: 2025-04-11T06:31:59.644Z (9 months ago)
• Topics: backgrounds, tailwindcss
• Language: TypeScript
• Homepage: https://bg.msaf.tech
• Size: 475 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
 [![Vercel Deploy](https://deploy-badge.vercel.app/vercel/bg-snippet)](https://bg.msaf.tech/)

 [![License](https://img.shields.io/github/license/msafdev/background)](https://github.com/msafdev/background/blob/main/LICENSE.txt)

 [![Issues](https://img.shields.io/github/issues/msafdev/background)](https://github.com/msafdev/background/issues)

 [![GitHub Repo stars](https://img.shields.io/github/stars/msafdev/background?style=flat&color=yellow)](https://github.com/msafdev/background/stargazers)

## 🌆 Modern Background Snippets

![image](https://raw.githubusercontent.com/msafdev/background/af5aaea30cb3d807e57ddac4b03b26bb9c94692a/public/cover.png)

Supercharge your website with modern background snippets. This app provides a collection of backgrounds that you can use for your website.

### 📦 Requirements

First, install Next.js with Tailwind CSS:

```bash

bunx create-next-app@latest -e with-tailwindcss

```

Then install shadcn-ui, and pick your favorite theme, or generate a new one:

```bash

bunx shadcn-ui@latest init

```

Lastly, install next-themes:

```bash

bun add next-themes

```

### 🚀 Usage

Visit the live app [here](https://bg.msaf.tech/). Then click on the snippet you like to copy the code. You can also change the theme of the app to play around with the backgrounds.

### 🚦 To Do

- [x] Add CSS variables

- [ ] Add CI/CD pipeline

- [ ] Add more snippets

### 📝 Contribute

Feel free to contribute to this project. For more information, check the [CONTRIBUTING.md]("https://github.com/msafdev/background/blob/main/CONTRIBUTING.md") file.

#### Disclaimer

> This app is an improved version of [bg.ibelick]("https://bg.ibelick.com"). I added CSS variables and next-themes to make it more dynamic and developer-friendly.

The project uses *Next.js*, *TailwindCSS*, *shadcn-ui*, and *Typescript*.