Home Guidelines

UIverse Guidelines

Everything you need to know — how to use UIverse components in your project, how to contribute your own, and how the design system is structured.

Getting Started Design System How to Use Contribute Naming Rules Accessibility
120+ Components
10 Categories
100% Free & Open
0 Dependencies
01

Getting Started

UIverse is a free, open-source library of copy-paste UI components built with pure HTML, CSS, and JavaScript. No npm, no build tools, no framework — just clean code you can drop into any project.

1

Browse components

Find the component you need from any category page — Buttons, Cards, Alerts, Tabs, etc.

2

Click "View Code"

Each card reveals a code snippet with the HTML and CSS needed for that exact component.

3

Click "Copy"

Hit copy and paste directly into your project. Customise the classes and colours to match your brand.

4

That's it!

No installation, no configuration. UIverse components are intentionally dependency-free.

Some interactive components (tabs, toggles, alerts) need a few lines of JavaScript — it's always included in the code snippet alongside the HTML and CSS.

02

Design System

UIverse uses a small set of design tokens — colours, typography, spacing, and radius values — that run through every component. If you copy a component into a project that already uses these tokens, it will look consistent immediately.

🎨 Brand Colours

Accent#eb6835
Secondary#6c5ce7
Success#00b894
Danger#d63031
Warning#fdcb6e
Info#0984e3
Light BG#f5f4f2
Dark BG#0f0f12

✍️ Typography

RoleFontWeightUsage
Heading Syne 700 / 800 Page titles, card labels, hero text
Body DM Sans 400 / 500 Paragraphs, descriptions, labels
Code Fira Code / Courier New 400 Code blocks, inline code, kbd

📐 Spacing & Border Radius

--radius-sm 8px — inputs, tags, code
--radius-md 14px — cards, dropdowns
--radius-lg 20px — hero sections, modals
999px Pills, badges, toggles

Add the UIverse CSS variables to your project's :root and components will automatically adopt your theming when you override them.

⚙️ CSS Custom Properties

:root {
  /* Brand */
  --accent:       #eb6835;
  --accent-2:     #6c5ce7;
  --accent-glow:  rgba(235, 104, 53, 0.18);

  /* Backgrounds */
  --body-bg:      #f5f4f2;
  --card-bg:      #ffffff;
  --card-border:  #ebebeb;

  /* Text */
  --text-primary:   #111111;
  --text-secondary: #666666;

  /* Radius */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;

  /* Fonts */
  --font-heading: 'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Transitions */
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
body.dark-mode {
  --body-bg:      #0f0f12;
  --card-bg:      #1a1a1e;
  --card-border:  #2a2a30;
  --text-primary:   #f0f0f0;
  --text-secondary: #999999;
}
03

How to Use Components

Every UIverse component is self-contained. The code snippet shown in "View Code" is everything you need — HTML structure, CSS styles, and (where needed) JavaScript.

📋 Recommended File Structure

your-project/
├── index.html
├── style.css          ← Your global styles
├── components/
│   ├── buttons.css    ← Paste button component styles here
│   ├── cards.css
│   └── alerts.css
└── js/
    └── main.js        ← Paste any interactive JS here

🔗 Linking Fonts & Icons

UIverse uses Google Fonts and Font Awesome. Add these to your <head>:

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">

<!-- Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

🎨 Customising a Component

All UIverse components use CSS custom properties. Override the variables in your own stylesheet to change the look globally:

/* Override UIverse accent colour to your brand blue */
:root {
  --accent: #3b82f6;
}

/* Or override a single component directly */
.my-card .gradient-btn {
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
}

💡 Dark Mode

UIverse dark mode is toggled by adding dark-mode to the <body> element. Persist the preference using localStorage:

const btn = document.getElementById('themeToggle');

btn.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

// On page load — restore saved preference
if (localStorage.getItem('theme') === 'dark') {
  document.body.classList.add('dark-mode');
}

UIverse is not a CSS framework. Do not import all styles at once — copy only the component styles you actually use to keep your CSS lean.

04

Contributing a Component

UIverse is community-driven. If you've built a cool component, we'd love to include it. Here's the step-by-step process:

1

Fork the repository

Go to github.com/Tushar-sonawane06/UI-Verse and click "Fork" to create your own copy.

2

Create a branch

Name your branch descriptively: add-modal-component or fix-button-hover.

3

Build your component

Follow the component structure guidelines below. Keep it self-contained — HTML, CSS, and minimal JS in one file.

4

Open a Pull Request

Submit your PR with a clear title and description. Include a screenshot or GIF of the component in action.

📦 Component File Template

Every new component page should follow this structure:

<!-- Component Card structure -->
<div class="component-card" data-name="descriptive keywords here" data-cat="category">

  <!-- Card header -->
  <div class="card-top">
    <span class="card-label">Component Name</span>
    <span class="card-tag tag-popular">Popular</span>
  </div>

  <!-- Live preview -->
  <div class="card-preview">
    <!-- Your component HTML goes here -->
  </div>

  <!-- Short description -->
  <p class="card-desc">One or two sentence description.</p>

  <!-- Code toggle + copy buttons -->
  <div class="actions">
    <button class="action-btn view-btn" onclick="toggleCode('id', this)">View Code</button>
    <button class="action-btn copy-btn" onclick="copyCode('id', this)">Copy</button>
  </div>

      

        UIverse includes reusable components such as cards,
        buttons, forms, navbars, inputs and more. Follow this
        pattern: include stylesheet, paste markup, then attach
        optional JavaScript behavior.
      


      
    
        
  1. Import global styles and the component stylesheet.
    2. 
        
  2. Paste the HTML snippet for the variant you need.
    3. 
        
  3. Adjust colors and spacing using CSS variables.
    4. 
        
  4. Add JavaScript only if the component is interactive.
    5.

Buttons

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

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

Cards

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

<div class="profile-card">
  <div class="profile-avatar">UI</div>
  <h3>UIverse Card</h3>
</div>

Alerts

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

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

Forms

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

<form class="form-card">
  <label>Email</label>
  <input type="email" required>
</form>

Inputs

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

<input class="preview-input"
  type="text"
  placeholder="Search components">

Navbar

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

<nav class="mini-nav">
  <span class="mini-brand">UIverse</span>
</nav>

Need more variants? Open component pages like Buttons, Cards, Alerts, and Forms to copy complete production-ready examples.

Not sure where your component fits? Open a GitHub Discussion first and the maintainers will suggest the right category or create a new one.

05

Naming Conventions

Consistent naming keeps the codebase easy to understand and search. Follow these rules when adding new components or CSS classes.

CSS Classes — BEM-inspired, kebab-case

✓ Do 
.profile-card { }
.profile-card__avatar { }
.profile-card--featured { }
✗ Don't 
.ProfileCard { }
.profilecard_avatar { }
.FEATURED_CARD { }

data-name — lowercase, space-separated keywords

✓ Do 
data-name="gradient button colorful hover"
✗ Don't 
data-name="GradientButton"
data-name="gradient-button"

data-cat — single lowercase word

✓ Do 
data-cat="style"
data-cat="animated"
data-cat="dark"
✗ Don't 
data-cat="Dark Theme"
data-cat="animated-effects"

File names — lowercase, hyphenated

✓ Do 
navbar-page.css
progress.html
alerts.css
✗ Don't 
NavbarPage.css
Progress Page.html
ALERTS.CSS

Code snippet IDs — short, unique, prefixed by page

✓ Do 
id="btn1"   ← buttons page
id="al3"    ← alerts page
id="pb7"    ← progress page
✗ Don't 
id="code"
id="myCode1"
id="snippet-for-gradient-button"
06

Accessibility

UIverse components are built to be usable by everyone. Here are the accessibility standards every component should meet:

Semantic HTML

Use the correct element for the job. Buttons should be <button>, not <div>. Links should be <a>.

ARIA labels where needed

Icon-only buttons must have aria-label. Toggles and tabs must use the correct role and aria-* attributes.

<!-- Good -->
<button aria-label="Close menu">
  <i class="fa-solid fa-xmark"></i>
</button>

<!-- Tabs example -->
<div role="tablist">
  <button role="tab" aria-selected="true">HTML</button>
  <button role="tab" aria-selected="false">CSS</button>
</div>

Keyboard navigable

All interactive components must be reachable and operable with a keyboard alone. Never remove the default browser focus outline without replacing it.

/* Good — custom focus ring */
.btn:focus-visible {
  outline: 2px solid #eb6835;
  outline-offset: 2px;
}

/* Bad — removes focus entirely */
* { outline: none; } ← Never do this

Colour contrast

Text must meet WCAG AA contrast ratio of at least 4.5:1 against its background. Never convey meaning through colour alone.

Reduced motion

Respect users who prefer reduced motion. Wrap all animations in a media query:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
07

Frequently Asked Questions

Is UIverse completely free?

Yes, 100%. UIverse is open-source and free to use in personal and commercial projects. No attribution required, though it's appreciated.

Do I need to install anything?

No. UIverse is a copy-paste library. There's no npm package, no CLI, and no build step. Just copy the HTML and CSS into your project and go.

Can I use UIverse with React, Vue, or Angular?

Absolutely. Since UIverse components are pure HTML and CSS, you can convert them to framework components yourself. Just copy the structure into a JSX/Vue template and the styles into your component's CSS file.

How do I report a bug?

Open an issue on GitHub. Include the component name, a description of the bug, and a screenshot if possible. We aim to respond within 48 hours.

Can I request a new component?

Yes! Open a GitHub Discussion with the tag "Component Request". Describe what you need and how it would be used. The community votes on what gets built next.

My component isn't appearing after I paste the code — why?

Check three things: (1) Did you include the CSS as well as the HTML? (2) Are the Font Awesome and Google Fonts CDN links in your <head>? (3) Are there any CSS conflicts with your existing styles? Open your browser dev tools to inspect the element.

Still have questions?

Reach out through GitHub, Discord, or the contact page and we'll help you out.

Open an Issue Contact Us