Twirl, Tweak, and Transform: Bring Joy to Your UI Themes 🎡✨🧩
PixelPop is a playful React project that brings two distinct themes to life using Joy UI: a bright and bubbly Barbie-inspired style and a bold, retro 90’s look. It’s all about experimenting with colors, shapes, and styles to see just how far you can take component theming.
- Barbie Theme 🌸💅🛼: Dive into a world of vibrant pinks, playful fonts, and soft edges. It’s a theme that doesn’t take itself too seriously.
- 90’s Theme 📼🕹️: Square corners, bold hues, and a dash of nostalgia. Think early web aesthetics with a modern twist.
- Light and Dark Modes 🌞🌙: Both themes adapt beautifully to light and dark settings, adding even more variety to the mix.
- Vite-Powered ⚡🚀: Built with Vite for a snappy development experience that lets you see changes instantly.
- React Router 🧭📍🗺️: Easily hop between themes and explore the different looks without missing a beat.
PixelPop was born from a desire to experiment with Joy UI and push the boundaries of theming. 🎨✨ I created this project as a playground 🛝 to explore vibrant, nostalgic styles—from 90’s retro vibes 🕹️📼 to playful pink aesthetics 🎀🦄—and to see just how far I could take custom component styling. It’s all about having fun 🤹♂️ with design and discovering new creative possibilities! 🚀🌈
Pop in, explore the themes, and maybe get inspired along the way. 🎉
| Script | Command | Description |
|---|---|---|
| Start the Development Server | npm run dev |
Starts the development server with hot-reloading. View the app at http://localhost:5173. |
| Preview the Production Build | npm run preview |
Serves the production build locally to see how the app would appear in a live environment. |
| Production Build | npm run build |
Compiles the TypeScript code and bundles the project for production in the dist folder. |
| Format the Code | npm run format |
Formats all files in the project using Prettier according to the configured rules, ensuring consistent style. |