🌸 Nexus Spring of Code Project

🚀 UIverse – Frontend Component Hub

📊 Project Insights

🌟 Stars	🍴 Forks	🐛 Issues	🔔 Open PRs	🛠️ Languages	👥 Contributors

UI-Verse is a beginner-friendly open-source project that provides a growing collection of reusable UI components built using HTML, CSS, and JavaScript.

The goal of UI-Verse is to help developers—especially beginners—make their first open-source contribution while learning how to build clean, responsive, and reusable UI components.

🌟 Features

• 🎨 Collection of reusable UI components
• 🧩 Beginner-friendly contribution system
• 📂 Well-structured folders for easy navigation
• 👀 Live preview of components
• 📋 View & Copy code functionality
• 🚀 Multi-page UI (Sidebar-based navigation)
• 🌙 Upcoming Dark Mode support
• 📱 Fully responsive UI improvements

For a complete list of available CSS root variables and color mappings, please refer to the CSS Variables Glossary in DARK_MODE_IMPLEMENTATION.md.

🖥️ Live Preview

Live demo: https://tushar-sonawane06.github.io/UI-Verse/

This repository is configured to auto-deploy to GitHub Pages via GitHub Actions. After pushing this change the Pages workflow will run — deployment may take a few minutes. If the site is not live yet, trigger the "Deploy to Pages" workflow from the Actions tab or check again in a few minutes.

📁 Updated Project Structure

UI-Verse/
│
├── index.html
├── Navbar.html
├── alerts.html
├── badges.html
├── button.html
├── cards.html
├── color.html
├── footer.html
├── form.html
├── loaders.html
├── pricing.html
├── testimonials.html
├── toggles.html
├── privacypolicy.html
│
├── style.css
├── script.js
├── .gitignore
├── favicon.ico
│
├── components/
│   ├── buttons/
│   ├── cards/
│   ├── navbars/
│   ├── forms/
│   └── loaders/
│
├── Contributing.md
└── README.md

🌟 Exciting News...

🚀 This project is now an official part of Nexus Spring of Code - NSoC'26! 💃🎉💻 We're thrilled to welcome contributors from all over India and beyond to collaborate, build, and grow UI-Verse! Let’s make learning and career development smarter – together! 🌟👨‍💻👩‍💻

👩‍💻 NSoC is one of India’s largest 60-day open source program that encourages developers of all levels to contribute to real-world projects 🌍 while learning, collaborating, and growing together. 🌱

🌈 With mentorship, community support, and collaborative coding, it's the perfect platform for developers to:

• ✨ Improve their skills
• 🤝 Contribute to impactful projects
• 🏆 Get recognized for their work
• 📜 Receive certificates and swag!

🎉 I can’t wait to welcome new contributors from NSoC'26 to this UI-Verse project family! Let's build, learn, and grow together — one commit at a time. 🔥👨‍💻👩‍💻

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A code editor (VS Code recommended)
• Git installed on your system

1️⃣ Fork the Repository

Click on the Fork button (top-right of GitHub)

---

2️⃣ Clone Your Fork

git clone https://github.com/your-username/UI-Verse.git
cd UI-Verse

---

3️⃣ Setup Dependencies and Build

To configure local development tooling and TypeScript modules:

npm install
npm run build

---

4️⃣ Previewing & Running

Option A — Launch Storybook (Recommended): To view components interactively inside the Storybook showcase environment:

npm run storybook

Option B — Live Server (VS Code Extension): If you have VS Code, install the Live Server extension, right-click index.html, and select "Open with Live Server". This provides auto-reload on file changes.

Option C — Python HTTP Server:

# Python 3
python -m http.server 8000

# Then open http://localhost:8000 in your browser

---

4️⃣ Start Customizing

Browse the component pages via the sidebar navigation. Each page contains reusable UI components with viewable and copyable code snippets.

Component Versioning

UI-Verse tracks each core component with semantic versions in data/meta/*.json and publishes a combined changelog in CHANGELOG_COMPONENTS.md.

Use these commands:

npm run components:version:generate
npm run components:version:check
npm run components:version:bump -- --bump=button:patch --note="Describe what changed"

• generate: ensures metadata exists for all components and refreshes the changelog.
• check: verifies semver format, changelog consistency, and component path validity.
• bump: increments one component version (patch|minor|major) and prepends a changelog entry.

NPM Package

Import the packaged components from ui-verse:

import { DesignTokens, UVButton } from 'ui-verse';
import 'ui-verse/design-tokens.css';
import 'ui-verse/theme-switcher';

You can also import single components with subpaths like ui-verse/button or ui-verse/modal.

CI / CD & Local Quality Gates

Pull requests run a series of strict quality checks, linting rules, and tests through GitHub Actions. You should run these checks locally before opening a pull request to ensure your changes pass the quality gates:

🛠️ Local Quality Gate Commands

Run the following commands in your workspace:

• Verify all files: npm run quality (Runs HTML, CSS, JavaScript linting, accessibility scans, and visual regression tests).
• HTML Linting: npm run lint:html
• CSS Style Linting: npm run lint:css
• JavaScript Linting: npm run lint:js
• Accessibility Verification: npm run audit:a11y
• Visual E2E Regression Tests: npm run test:visual (Requires Playwright browsers to be installed via npx playwright install).

For Netlify previews on pull requests, configure the following secrets in your repository settings:

• NETLIFY_AUTH_TOKEN
• NETLIFY_SITE_ID

Component Usage Quick Examples

Use this quick workflow when you add any UIverse component to a project:

1. Add global base styles.
2. Add the component stylesheet.
3. Paste the component HTML.
4. Add optional behavior with JavaScript (if needed).

1) Buttons

<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="button.css">

<button class="primary-btn">Get Started</button>

2) Cards

<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="cards.css">

<article class="profile-card">
	<div class="profile-avatar">UI</div>
	<h3>UIverse Card</h3>
	<p>Reusable card layout for content blocks.</p>
</article>

3) Alerts

<link rel="stylesheet" href="alerts.css">

<div class="alert success">
	<i class="fa-solid fa-circle-check"></i>
	Profile updated successfully.
</div>

4) Forms

<link rel="stylesheet" href="forms.css">

<form class="form-card">
	<label>Email</label>
	<input type="email" placeholder="you@example.com" required>
	<button type="submit" class="primary-btn">Submit</button>
</form>

5) Navbar

<link rel="stylesheet" href="navbar.css">

<nav class="mini-nav">
	<span class="mini-brand">UIverse</span>
	<div class="mini-links">
		<span>Docs</span>
		<span>Components</span>
	</div>
</nav>

6) Inputs

<link rel="stylesheet" href="input.css">

<div class="preview-input-wrap">
	<i class="fa-solid fa-magnifying-glass preview-icon"></i>
	<input class="preview-input" type="text" placeholder="Search components">
</div>

7) Badges

<link rel="stylesheet" href="badges.css">

<div class="badge-container">
	<div class="badge">
		<h3>First PR</h3>
		<p>Opened your first pull request.</p>
	</div>
</div>

For more examples, open each component page (for example alerts.html, cards.html, forms.html) and copy snippets from the "View Code" blocks.

🤝 Contributing Guide

We welcome contributions from beginners 💙

🔰 Steps to Contribute

1. Go to the Issues section
2. Choose an issue to work on
3. Comment to get assigned
4. Fork the repository
5. Create a new branch

git checkout -b feature/your-feature-name

6. Make your changes
7. Commit changes

git commit -m "Added: your feature name"

8. Push to GitHub

git push origin feature/your-feature-name

9. Create a Pull Request 🎉

📌 Contribution Guidelines

• ✅ Keep code clean and readable
• ✅ Follow proper folder structure
• ✅ Make components responsive
• ✅ Use meaningful commit messages
• ✅ Avoid breaking existing UI
• ✅ Add comments where necessary

🧩 Contribution Areas

🎯 Components

• Buttons
• Cards
• Navbars
• Forms
• Loaders
• Alerts
• Badges
• Toggles
• Pricing Sections
• Testimonials

🎨 UI Improvements

• Improve responsiveness
• Add animations
• Enhance UX/UI
• Improve mobile experience

⚙️ Features

• Add new component pages
• Improve code preview system
• Add dark mode 🌙
• Improve sidebar navigation
• Add search functionality

🏷️ Issue Labels

• good first issue → Beginner-friendly
• enhancement → Feature request
• bug → Bug fixes
• documentation → Docs improvements

💡 Example Contributions

• Add a gradient button
• Create a responsive navbar
• Add hover effects to cards
• Improve mobile layout
• Add new UI components

🎯 Project Goals

• Help beginners start open-source contributions
• Build a large UI component library
• Create a developer-friendly UI showcase platform

📦 Web Components & TypeScript Build Pipeline

Core interactive UI components are migrated to TypeScript, modularized under src/components/*, and built into ESM and UMD formats.

Build and Package Commands

• Build: Compiles TypeScript and bundles the modules.

  npm run build

• Verify / Test: Runs the Playwright test suite for Web Components.

  npm run wc:test

• Package Check: Validates the built package structure.

  npm run package:check

Usage

You can consume the components in your HTML using the built ESM or UMD bundles under the dist/ directory.

ESM (ES Modules) Usage

<script type="module">
  import '/dist/index.esm.js';
</script>

<uv-button>Click Me</uv-button>
<uv-modal>
  <div>Modal Content</div>
</uv-modal>

Individual Component Imports (ESM)

<script type="module" src="/dist/components/uv-button.js"></script>
<script type="module" src="/dist/components/uv-modal.js"></script>

UMD (Universal Module Definition) Usage

<script src="/dist/index.umd.js"></script>

🎨 Storybook Component Explorer & Automated Documentation

UIverse features an automated Storybook Component Explorer that showcases all 50+ components.

Features of the Storybook Catalog:

1. Automated Generation: A Node.js script (scripts/generate-storybook-stories.js) parses definitions from data/components.json, extracts Visual Showcase HTML, resolves stylesheet/script assets, and dynamically generates 50+ Storybook stories under stories/generated/.
2. Interactive Playground: Preview components in an isolated Shadow DOM environment to verify styling fidelity.
3. Automated Documentation: Each story features an interactive documentation tab containing:
   • Usage details (HTML snippets and stylesheet/script dependencies).
   • Accessibility (a11y) Checklist (ARIA compliance, keyboard access, color contrast).
   • Test Cases (responsive layouts, hover transitions, and state checks).

Key Commands

• Run Storybook Dev Server:

  npm run storybook

  Starts the local Storybook dev server on port 6006.

• Build Storybook Static Site:

  npm run build-storybook

  Generates a production build of the static Storybook site under storybook-static/.

• Verify and Generate Stories:

  npm run storybook:check

  Runs the generation script to ensure all component stories are generated and up to date.

• Run Storybook Integration / Snapshot Tests:

  npm run test:storybook

  Runs visual snapshot tests using Playwright against the local Storybook dev server.

🏆 Featured In:

Event Name	Event Description
Nexus Spring of Code 2026	A 60-day open source program where project maintainers bring real-world projects, and contributors work on solving actual issues, building features, and shipping production-ready code.

📞 Contact

• GitHub Issues: Report bugs or request features

• Email: Contact the maintainers for collaboration opportunities

Feel free to reach out with any questions or feedback!

📜 Code of Conduct

Please refer to the Code of Conduct for details on contributing guidelines and community standards.

🤝👤 Contribution Guidelines

We love our contributors! If you'd like to help, please check out our CONTRIBUTING.md file for guidelines.

Thank you once again to all our contributors who has contributed to UI-Verse! Your efforts are truly appreciated. 💖👏

See the full list of contributors and their contributions on the GitHub Contributors Graph.

Show some by starring this awesome repository!

💡 Suggestions & Feedback

Feel free to open issues or discussions if you have any feedback, feature suggestions, or want to collaborate!

🙌 Show Your Support

If you find UI-Verse project helpful, give it a star! ⭐ to support more such educational initiatives:

• ⭐ Starring the repository
• 🐦 Sharing on social media
• 💬 Telling your friends and colleagues
• 🤝 Contributing to the project

Utility Scripts

Standard Python 3.x is required to run these scripts.

• add_sidebar.py: This script is used for documentation generation or formatting.

  python add_sidebar.py

• Command-Line To-Do List.py: This is a terminal-based task management utility.

  python "Command-Line To-Do List.py"

📄 License

This project is licensed under the MIT License - see the License file for details.

🧑‍💻Project Admin:

Tushar Sonawane

Give us a Star and let's make magic!

👨‍💻 Built with ❤️ by UI-Verse Team

❤️ Tushar Sonawane and Contributors ❤️

Open an Issue | 🌟 Star on GitHub | 🚀 Live Demo

⬆️ Back to Top

Ready to show off your coding achievements? Get started with UI-Verse today! 🚀