Roovix Components

Fully documented with live snippets & icons. All utilities now have proper examples.

28+

components

2

themes

copy

snippets

Installation

HTML

<link rel="stylesheet" href="roovix-base.css">
<link rel="stylesheet" href="roovix-components.css">
<html data-theme="light"> <!-- or dark -->

Colors

Use Roovix semantic color tokens to style backgrounds, text, borders, and status states.

Primary Background

Accent Text

Success Border

Usage


<!-- Background -->
<div style="background: var(--roovix-bg-primary);"></div>

<!-- Text Color -->
<p style="color: var(--roovix-text-accent);">Accent text</p>

<!-- Border Color -->
<div style="border: 2px solid var(--roovix-border-success);"></div>

<!-- Status Background -->
<div style="background: var(--roovix-status-danger-bg);">Error</div>

Buttons

HTML

<button class="roovix-btn roovix-btn-primary"><i class="fas fa-thumbs-up"></i> Primary</button>
<button class="roovix-btn roovix-btn-secondary"><i class="fas fa-user"></i> Secondary</button>

Cards

header

card body text

HTML

<div class="roovix-card">
  <div class="roovix-card-header">...</div>
  <div class="roovix-card-body">...</div>
</div>

Avatars

HTML

<img src="..." class="roovix-avatar-border roovix-avatar-md">
<div class="roovix-avatar-container">
  <img src="..." class="roovix-avatar-border">
  <span class="roovix-avatar-status roovix-avatar-status-online"></span>
</div>

Badges

new success

HTML

<span class="roovix-badge roovix-badge-primary"><i class="fas fa-check"></i> new</span>

Forms

remember

HTML

<input class="roovix-input" placeholder="text">
<label class="roovix-checkbox"><input type="checkbox"> <i class="far fa-check-square"></i> text</label>

Alerts

success

HTML

<div class="roovix-alert roovix-alert-success">
  <i class="fas fa-check-circle roovix-alert-icon"></i> success
</div>

Navigation

HTML

<div class="roovix-tabs">
  <button class="roovix-tab active"><i class="fas fa-home"></i> home</button>
</div>

Tables

name
roovix

HTML

<table class="roovix-table">...</table>

Modals

HTML

<div class="roovix-modal-overlay">
  <div class="roovix-modal"> ... </div>
</div>

Dropdowns

HTML

<div class="roovix-dropdown">
  <button class="roovix-btn">...</button>
  <div class="roovix-dropdown-menu"> ... </div>
</div>

Tooltips

HTML

<div class="roovix-tooltip roovix-tooltip-top">
  <button>hover</button>
  <span class="roovix-tooltip-content">tooltip</span>
</div>

Progress

HTML

<div class="roovix-progress roovix-progress-primary roovix-progress-sm">
  <div class="roovix-progress-bar" style="width:70%"></div>
</div>

Skeleton

HTML

<div class="roovix-skeleton roovix-skeleton-title"></div>

Lists

item one

HTML

<ul class="roovix-list">
  <li class="roovix-list-item"><i class="fas fa-file"></i> item</li>
</ul>

Loaders

HTML

<div class="roovix-loader roovix-loader-md roovix-loader-primary"></div>
<div class="roovix-loader-dots"><span></span><span></span><span></span></div>

Dividers

or

HTML

<div class="roovix-divider"></div>
<div class="roovix-divider-vertical"></div>
<div class="roovix-divider-label">or</div>

Knowledge Base

Article card

Tutorial Mar 15, 2024

How to build a knowledge base with Roovix

Learn best practices for creating and organizing your documentation...

2.4k 32 156

HTML

<div class="roovix-article-card">
  <div class="roovix-article-meta">
    <span class="roovix-article-category"><i class="fas fa-folder"></i> Tutorial</span>
    <span><i class="far fa-calendar"></i> Mar 15, 2024</span>
  </div>
  <h3 class="roovix-article-title"><a href="#">...</a></h3>
  <p class="roovix-article-excerpt">...</p>
  <div class="roovix-article-stats">
    <span class="roovix-article-stat"><i class="far fa-eye"></i> 2.4k</span>
    ...
  </div>
</div>

Code block

JavaScript

function hello() {
    console.log("Hello, Roovix!");
}

HTML

<div class="roovix-code-block">
  <div class="roovix-code-header">
    <span class="roovix-code-language">JavaScript</span>
    <button class="roovix-code-copy">Copy</button>
  </div>
  <pre class="roovix-code-content"><code class="language-js">...</code></pre>
</div>

Dashboard

Timeline

Article published 2h ago

"Getting started"

User joined 5h ago

Sarah Miller

HTML

<div class="roovix-timeline">
  <div class="roovix-timeline-item">
    <div class="roovix-timeline-dot"></div>
    <div class="roovix-timeline-content">...</div>
  </div>
</div>

User Profile

John Doe

@johndoe

Product manager at Roovix.

2.4k followers

156 following

HTML

<div class="roovix-profile-header">
  <div class="roovix-profile-cover"></div>
  <img src="..." class="roovix-avatar roovix-avatar-xl roovix-profile-avatar">
  <div class="roovix-profile-info">
    <div class="roovix-profile-name">John Doe</div>
    <div class="roovix-profile-username">@johndoe</div>
    <div class="roovix-profile-bio">...</div>
    <div class="roovix-profile-meta">
      <div class="roovix-profile-stat">...</div>
    </div>
  </div>
</div>

Notifications

Notification item

New comment

Sarah commented on your post

5 minutes ago

HTML

<div class="roovix-notification unread">
  <div class="roovix-notification-icon"><i class="fas fa-comment-dots"></i></div>
  <div class="roovix-notification-content">
    <div class="roovix-notification-title">New comment</div>
    <div class="roovix-notification-message">...</div>
    <div class="roovix-notification-time">5m ago</div>
  </div>
</div>

Notification badge

3

HTML

<span class="roovix-notification-badge">
  <button class="roovix-btn roovix-btn-icon"><i class="fas fa-bell"></i></button>
  <span class="roovix-notification-count">3</span>
</span>

Utilities

Text & background

primary success danger

bg-success

bg-danger

HTML

<span class="roovix-text-success"><i class="fas fa-check-circle"></i> success</span>
<div class="roovix-bg-success roovix-p-2 roovix-rounded">...</div>

Borders & shadows

default border

success border

shadow-md

HTML

<div class="roovix-border roovix-border-success">...</div>
<div class="roovix-shadow-md">...</div>

Spacing

p-1

p-2

p-4

m-2

HTML

<div class="roovix-p-2">padding 2</div>
<div class="roovix-mt-4">margin-top</div>

Responsive

visible only on mobile (hidden on larger)

visible on tablet and up

visible on desktop (md+)

col

HTML

<!-- hide on mobile, show on tablet -->
<div class="roovix-hidden roovix-sm:block">tablet+</div>

<!-- responsive grid -->
<div class="roovix-grid roovix-grid-cols-1 roovix-sm-grid-cols-2">
  <div>1</div><div>2</div>
</div>