StudentVerse UI is a community-driven, open-source platform where students create, share, and explore beautiful UI components and mini tools built for everyday student life.
Inspired by uiverse.io — but made by students, for students.
"Every student has something to build. StudentVerse UI gives them a stage to share it."
- 📦 A growing library of copy-paste ready UI components
- 🛠️ Practical student tools — CGPA calc, Pomodoro, planners & more
- 🤝 A beginner-friendly space for real-world open source experience
- 🌍 Ideal for GSSoC, Hacktoberfest, and portfolio building
A curated, ever-growing collection of components — all live-preview enabled and copy-ready.
| Category | Examples |
|---|---|
| 🔘 Buttons | Animated, gradient, glowing, 3D, icon buttons |
| 🃏 Cards | Profile cards, pricing cards, glassmorphism cards |
| 📋 Forms | Login, signup, OTP, floating label inputs |
| 🔝 Navbars | Sticky, hamburger, sidebar, glassmorphism |
| ⏳ Loaders | Spinners, skeleton, progress bars, dots |
| 🪟 Modals | Popup dialogs, confirmation boxes, drawers |
| 🏷️ Badges & Tags | Status chips, notification badges |
| 🎠 Carousels | Image sliders, testimonial carousels |
✅ Each component comes with:
- Live interactive preview
- Clean, copy-ready code snippet (HTML/CSS/JS or React/Tailwind)
- Tech tags — HTML · CSS · JavaScript · Tailwind · Bootstrap
- Difficulty label — Beginner / Intermediate / Advanced
- Contributor name + GitHub profile link
Real tools that students actually use — no bloat, just utility.
| Tool | Description |
|---|---|
| 🎓 CGPA Calculator | Calculate SGPA & CGPA with grade inputs |
| 📅 Attendance Tracker | Track class-wise attendance & get shortage alerts |
| 🍅 Pomodoro Timer | Focus timer with customizable work/break cycles |
| ✅ To-Do / Study Planner | Manage tasks with priority, deadlines & status |
| 📄 Resume Builder | Generate a clean ATS-friendly resume with live preview |
- Filter components by category — Buttons, Cards, Modals, etc.
- Filter by tech stack — HTML, Tailwind, React, Bootstrap
- Filter by difficulty — Beginner / Intermediate
- Keyword search to find exactly what you need
- Submit your own components with live preview support
- Your GitHub profile + name shown on every component you submit
- Beginner-friendly issue structure for guided contributions
- Each PR reviewed and merged with credit
- 🌟 Contributor XP Points — earn points per accepted contribution
- 🏅 Badges — First PR, Top Contributor, Component Master, Tool Builder
- 📊 Leaderboard — see the most active contributors
- 🎯 Seasonal contribution challenges & rewards
| Layer | Technology |
|---|---|
| ⚛️ Framework | React 18 + TypeScript |
| ⚡ Build Tool | Vite 5 |
| 🎨 Styling | Tailwind CSS v3 |
| 🧩 UI Components | shadcn/ui |
| 🧪 Testing | Vitest |
| 🌐 Deployment | Lovable / Vercel |
studentverse-ui/
│
├── 📂 public/ # Favicon & static assets
│
├── 📂 src/
│ ├── 📂 components/
│ │ ├── 📂 ui/ # shadcn/ui base components
│ │ ├── 📂 layout/ # Navbar, Footer, Sidebar
│ │ ├── 📂 gallery/ # Component cards, preview, code viewer
│ │ ├── 📂 tools/ # Student tools (CGPA, Pomodoro, etc.)
│ │ ├── 📂 submission/ # Component submission form & preview
│ │ └── 📂 shared/ # Search bar, Filters, Badges, Tags
│ │
│ ├── 📂 pages/
│ │ ├── HomePage.tsx # Landing page with highlights
│ │ ├── GalleryPage.tsx # Full component gallery
│ │ ├── ComponentDetailPage.tsx # Single component preview + code
│ │ ├── ToolsPage.tsx # Student tools listing
│ │ ├── SubmitPage.tsx # Submit your component
│ │ └── ContributorsPage.tsx # Hall of Fame
│ │
│ ├── 📂 data/
│ │ ├── components.ts # All component metadata & code
│ │ └── tools.ts # Student tools metadata
│ │
│ ├── 📂 hooks/ # Custom hooks (useSearch, useFilter)
│ ├── 📂 lib/ # Utility functions
│ ├── 📂 types/ # TypeScript interfaces
│ ├── App.tsx
│ └── main.tsx
│
├── CONTRIBUTING.md
├── index.html
├── tailwind.config.ts
├── vite.config.ts
└── package.json
Make sure you have these ready:
| Tool | Version |
|---|---|
| Node.js | v18 or above |
| npm / bun | Latest |
| Git | Latest |
1. Fork & Clone the repo
# Fork first (top-right Fork button), then:
git clone https://github.com/YOUR_USERNAME/studentverse-ui.git
cd studentverse-ui2. Install dependencies
npm install
# or
bun install3. Start the development server
npm run dev
# or
bun dev4. Open in browser
http://localhost:5173
You're up and running! 🎉
npm run dev # Start dev server
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint checks
npm run test # Run tests with Vitest
npm run format # Format code with PrettierStudentVerse UI is built for contributors. Whether you're adding a new button style or building a full student tool — every contribution matters! 💜
| Type | Description |
|---|---|
| 🎨 Add a UI Component | Submit a new button, card, modal, navbar, etc. |
| 🛠️ Build a Student Tool | Add a useful tool for student daily life |
| 🐛 Fix a Bug | Find & fix issues in existing code |
| 📝 Improve Docs | Fix typos, add explanations, improve guides |
| 💡 Suggest Features | Open an issue with your idea |
| 🧪 Write Tests | Add Vitest unit/integration tests |
# Step 1: Fork this repo & clone your fork
git clone https://github.com/YOUR_USERNAME/studentverse-ui.git
# Step 2: Create a new branch
git checkout -b feat/your-component-name
# Step 3: Make your changes (see guidelines below)
# Step 4: Commit your work
git add .
git commit -m "feat: add glassmorphism login card"
# Step 5: Push to your fork
git push origin feat/your-component-name
# Step 6: Open a Pull Request on GitHub 🚀To add a new component to the gallery:
- Create your component file inside
src/components/gallery/ - Add a live preview using React
- Include a clean code snippet (copyable)
- Add metadata to
src/data/components.ts:
{
id: "glassmorphism-card",
title: "Glassmorphism Card",
category: "Cards",
tags: ["CSS", "HTML"],
difficulty: "Beginner",
contributor: {
name: "Your Name",
github: "https://github.com/yourusername"
},
preview: GlassmorphismCard, // React component
code: `...your HTML/CSS here...`
}- Submit your PR — that's it! Your name goes on the card forever. 🏅
| Label | Meaning | Best For |
|---|---|---|
good first issue |
Simple, guided tasks | 🟢 New contributors |
help wanted |
Needs community input | 🟡 Anyone |
new component |
Add a UI component | 🟢 All levels |
new tool |
Build a student tool | 🟡 Intermediate |
bug |
Something is broken | 🟡 Intermediate |
documentation |
Improve README/guides | 🟢 Beginners |
enhancement |
Improve existing feature | 🟠 Any level |
We use Conventional Commits:
feat: ✨ New component or tool
fix: 🐛 Bug fix
docs: 📝 Documentation update
style: 💄 CSS / UI-only change
refactor: ♻️ Code cleanup, no feature change
test: 🧪 Tests added
chore: 🔧 Config, build changes
StudentVerse UI is open for contributions through:
| Program | Status |
|---|---|
| 🌸 GSSoC — GirlScript Summer of Code | ✅ Participating |
| 🎃 Hacktoberfest | ✅ Participating |
| 🌞 SSOC — Social Summer of Code | 🔜 Upcoming |
| ❄️ JWOC — JGEC Winter of Code | 🔜 Upcoming |
💡 Contributing here counts toward your open-source program goals AND gives you real portfolio experience!
Every component, every fix, every PR — it all matters. Thank you! 💜
Don't see your face here? Make your first contribution now!
✅ Phase 1 — Foundation
├── ✅ Project setup (React + Vite + Tailwind + shadcn/ui)
├── ✅ Component gallery with live preview
├── ✅ Copy-ready code snippets
└── ✅ Basic student tools
🔄 Phase 2 — Community Growth (In Progress)
├── 🔄 Component submission system
├── 🔄 Search & advanced filters
├── 🔄 More student tools (Resume Builder, Attendance Tracker)
└── 🔄 Contributor credits on all components
🔜 Phase 3 — Platform Polish
├── 🔜 Dark/light mode toggle
├── 🔜 Improved component preview sandbox
├── 🔜 Component versioning & update history
└── 🔜 Mobile-responsive improvements
🚀 Phase 4 — Gamification
├── 🚀 Contributor XP & badge system
├── 🚀 Monthly leaderboard
├── 🚀 Seasonal contribution challenges
└── 🚀 Institutional contributor rankings
Who can contribute to StudentVerse UI?
Anyone! Whether you're a complete beginner learning HTML/CSS or an experienced React developer — there's always something for you here. We have issues labeled
good first issue specifically for new contributors.
What kind of components can I submit?
Any reusable UI component — buttons, cards, navbars, modals, loaders, forms, tooltips, badges, and more. Make sure it's original, visually appealing, and has clean code. Both HTML/CSS and React/Tailwind submissions are welcome!
Will my name be shown on my contribution?
Yes! Every component you submit will display your name and link to your GitHub profile. Your contribution lives forever in the gallery and in the contributors section.
Does this count for GSSoC / Hacktoberfest?
Yes! StudentVerse UI participates in GSSoC and Hacktoberfest. Contributions here count toward your program goals. Watch our repo and Discord for program-specific updates.
I found a bug. How do I report it?
Open a GitHub Issue using the Bug Report template. Describe the problem, steps to reproduce, and screenshots if possible. We respond within 48 hours!
This project is licensed under the MIT License — free to use, modify, and distribute.
See LICENSE for full details.