Installation

Include two files — CDN or self-hosted.

CDN (quickest)

<link rel="stylesheet" href="https://alps-is-core.github.io/RanjuUI/ranju.css">
<script src="https://alps-is-core.github.io/RanjuUI/ranju.js" defer></script>

Self-hosted (download ranju.css & ranju.js)

<link rel="stylesheet" href="ranju.css">
<script src="ranju.js" defer></script>

The CSS and JS bundles at the repo root are built from src/css/ and src/js/ via make dist. Use the bundles for the full library, or import individual component files for smaller payloads.

Theming & Dark Mode

Set data-theme="dark" on the <html> element, or use the JS API. RanjuUI auto-detects system preference.

JS

Ranju.theme.toggle();       // switch between light/dark
Ranju.theme.set('dark');    // force dark
Ranju.theme.current();      // get 'light' or 'dark'

Typography

Clean heading scale, text utilities, and semantic inline elements.

Preview

Heading 1

Heading 2

Heading 3

Heading 4

Regular paragraph text with bold, italic, inline code, highlighted text, and links.

Muted small text for secondary content.

Blockquotes for pull quotes and citations.

const hello = "preformatted code block";

Code

HTML

<h1>Heading 1</h1>
<p>Text with <strong>bold</strong>, <code>code</code>, <mark>highlight</mark>.</p>
<p class="text-muted text-sm">Muted secondary text.</p>
<blockquote>Blockquote.</blockquote>
<pre><code>const x = "preformatted";</code></pre>

Grid & Layout

Responsive CSS grid and flexbox utility classes.

Preview

1

2

3

Code

HTML

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 rounded border">1</div>
  <div class="p-4 rounded border">2</div>
  <div class="p-4 rounded border">3</div>
</div>

Utilities

Common spacing, sizing, border-radius, shadow, and display helpers.

Preview

shadow-sm

shadow

shadow-md

shadow-lg

Code

HTML

<div class="p-3 rounded shadow border">shadow</div>
<div class="p-3 rounded shadow-md border">shadow-md</div>
<div class="p-3 rounded shadow-lg border">shadow-lg</div>
<!-- gap-1 to gap-8, p-0 to p-8, flex, grid, etc. -->

Accordion

Expandable content panels, single or multi-open.

Preview

RanjuUI is an ultra-lightweight, semantic UI system built with plain HTML, CSS, and minimal JavaScript. No frameworks, no build tools, no dependencies.

Just link ranju.css and include ranju.js with the defer attribute. That's two files — zero configuration.

Yes! RanjuUI uses semantic HTML and ARIA attributes throughout. Keyboard navigation and screen readers are supported by default.

Code

HTML

<div class="accordion">
  <div class="accordion-item" data-state="open">
    <button class="accordion-trigger">Title</button>
    <div class="accordion-content">
      <div class="accordion-body">Content here...</div>
    </div>
  </div>
</div>

Alert

Contextual feedback messages with optional dismiss.

Preview

Info

This is an informational alert message.

Success

Operation completed successfully.

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.

Code

HTML

<div class="alert alert-info">
  <div class="alert-content">
    <div class="alert-title">Info</div>
    <div class="alert-description">Message text.</div>
  </div>
  <button class="alert-close">&times;</button>
</div>
<!-- alert-success, alert-warning, alert-destructive -->

Aspect Ratio

Maintain consistent aspect ratios for media containers.

Preview

1:1

16:9

4:3

Code

HTML

<div class="aspect-square">1:1</div>
<div class="aspect-video">16:9</div>
<div class="aspect-photo">4:3</div>

Avatar

User profile images with fallback initials and group stacking.

Preview

SM

AP

LG

XL

A

B

C

+3

Code

HTML

<div class="avatar avatar-sm">SM</div>
<div class="avatar">AP</div>
<div class="avatar avatar-lg">LG</div>
<div class="avatar-group">
  <div class="avatar">A</div>
  <div class="avatar">B</div>
</div>

Badge

Small status labels and tags.

Preview

Primary Secondary Outline Destructive Success Warning Ghost Online Large

Code

HTML

<span class="badge">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-outline">Outline</span>
<span class="badge badge-success badge-dot">Online</span>

Breadcrumb

Navigation path indicator.

Preview

Code

HTML

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Components</a></li>
  <li><span aria-current="page">Breadcrumb</span></li>
</ol>

Button

Action triggers in multiple variants and sizes.

Preview

Link

Code

HTML

<button class="btn">Primary</button>
<button class="btn btn-outline">Outline</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-lg">Large</button>
<div class="btn-group">
  <button class="btn btn-outline">Left</button>
  <button class="btn btn-outline">Right</button>
</div>

Calendar

Interactive date picker calendar. Auto-initializes or use Ranju.calendar(el, options).

Preview

Code

HTML

<div class="calendar"></div>
<!-- Auto-initializes. For manual control: -->
<script>
Ranju.calendar(el, {
  onSelect: function(date) { console.log(date); }
});
</script>

Card

Flexible content container with header, body, and footer regions.

Preview

Card Title

A brief description of the card content.

This is the main body content of the card. Cards can hold any type of content.

RJ

ranju

@ranju · 2h ago

Building RanjuUI — an ultra-lightweight component library. No frameworks needed.

CSS HTML JS

Code

HTML

<div class="card">
  <div class="card-header">
    <div class="card-title">Title</div>
    <div class="card-description">Description</div>
  </div>
  <div class="card-content">Content here</div>
  <div class="card-footer">
    <button class="btn btn-sm">Action</button>
  </div>
</div>

Carousel

Image or content slider with navigation controls and dots.

Preview

Slide 1

First slide content

Slide 2

Second slide content

Slide 3

Third slide content

Code

HTML

<div class="carousel" style="height:200px">
  <div class="carousel-track">
    <div class="carousel-slide">Slide 1</div>
    <div class="carousel-slide">Slide 2</div>
    <div class="carousel-slide">Slide 3</div>
  </div>
  <button class="carousel-btn carousel-prev">&#8249;</button>
  <button class="carousel-btn carousel-next">&#8250;</button>
  <div class="carousel-dots">
    <button class="carousel-dot"></button>
    <button class="carousel-dot"></button>
    <button class="carousel-dot"></button>
  </div>
</div>

Checkbox & Radio

Custom styled selection controls with native semantics.

Preview

Option A Option B Option C

Choice 1 Choice 2 Choice 3

Code

HTML

<label class="checkbox">
  <input type="checkbox" checked>
  <span class="checkbox-mark"></span>
  Option A
</label>
<label class="radio">
  <input type="radio" name="choice" checked>
  <span class="radio-mark"></span>
  Choice 1
</label>

Collapsible

Simple show/hide toggle for any content block.

Preview

This content can be shown or hidden by clicking the button above. Use data-state to control initial state.

Code

HTML

<div class="collapsible" data-state="closed">
  <button class="btn btn-outline btn-sm collapsible-trigger">Toggle</button>
  <div class="collapsible-content">
    <div class="mt-4 p-4 rounded border">Hidden content</div>
  </div>
</div>

Combobox

Searchable dropdown select with filtering.

Preview

RanjuUI
React
Vue
Svelte
Angular
Solid

Code

HTML

<div class="combobox" data-state="closed" style="max-width:300px">
  <input class="combobox-input input" placeholder="Search...">
  <ul class="combobox-list">
    <li class="combobox-option">Option 1</li>
    <li class="combobox-option">Option 2</li>
  </ul>
</div>

Command Palette

Keyboard-first command launcher. Press Ctrl + K or click the button below.

Preview

Navigation

Home G H

Documentation G D

Actions

Toggle Theme T T

Settings G S

Code

HTML

<button onclick="Ranju.command.open('cmd')">Open</button>
<div class="command-overlay" id="cmd" data-state="closed">
  <div class="command-dialog">
    <div class="command-input-wrapper">
      <input class="command-input" placeholder="Type a command...">
    </div>
    <div class="command-list">
      <div class="command-group-label">Actions</div>
      <div class="command-item">Toggle Theme<span class="command-shortcut">T T</span></div>
    </div>
  </div>
</div>
<!-- Ctrl+K opens automatically -->

Context Menu

Right-click menu overlay.

Preview

Right-click this area

Code

HTML

<div data-context-menu="ctx" class="p-8 border rounded">Right-click here</div>
<ul class="context-menu" id="ctx">
  <li class="context-menu-item">Cut <span class="shortcut">Ctrl+X</span></li>
  <li class="context-menu-item">Copy <span class="shortcut">Ctrl+C</span></li>
  <li class="context-menu-separator"></li>
  <li class="context-menu-item" data-disabled>Delete</li>
</ul>

Data Table

Sortable data tables with hover and stripe options. Click headers to sort.

Preview

Name	Status	Role
Alice Chen	Active	Admin
Bob Smith	Inactive	Member
Carol Davis	Active	Editor
Dan Wilson	Pending	Member

Dialog

Modal dialog with overlay, close on backdrop click, and escape key support.

Preview

Name

Email

Code

HTML

<button data-dialog-open="my-dialog">Open</button>
<div class="dialog-overlay" id="my-dialog" data-state="closed">
  <div class="dialog" style="position:relative">
    <button class="dialog-close" data-dialog-close>&times;</button>
    <div class="dialog-header">
      <div class="dialog-title">Title</div>
    </div>
    <div class="dialog-body">Content</div>
    <div class="dialog-footer">
      <button data-dialog-close>Close</button>
    </div>
  </div>
</div>

Drawer & Sheet

Bottom drawer and side sheet panels. Use the standard dialog system with overlay.

Preview

Drawer Title

This is a bottom drawer panel. Use it for additional actions or content.

Sheet Panel

This is a side sheet panel that slides in from the right. Great for detail views, settings, or editing forms.

Name

Code

HTML

<button data-dialog-open="drawer-id">Open Drawer</button>
<div class="dialog-overlay" id="drawer-id" data-state="closed"></div>
<div class="drawer" data-state="closed">
  <div class="drawer-handle"></div>
  <div class="p-6">Content. Use Ranju.dialog.close('drawer-id') to close.</div>
</div>

Dropdown

Click-triggered menu overlays.

Preview

Code

HTML

<div class="dropdown" data-state="closed">
  <button class="btn btn-outline" data-dropdown-trigger>Options &#9662;</button>
  <ul class="dropdown-menu">
    <li class="dropdown-label">Section</li>
    <li class="dropdown-item">Profile</li>
    <li class="dropdown-item">Settings</li>
    <li class="dropdown-separator"></li>
    <li class="dropdown-item" style="color:var(--destructive)">Log Out</li>
  </ul>
</div>

Empty State

Placeholder content for empty lists or search results.

Preview

No results found

Try adjusting your search or filter to find what you're looking for.

Code

HTML

<div class="empty-state">
  <div class="empty-state-title">No results found</div>
  <div class="empty-state-description">Try adjusting your search.</div>
  <button class="btn btn-sm">Clear Filters</button>
</div>

Input & Textarea

Form controls with validation states, groups, and field layouts.

Preview

Username

Must be at least 3 characters.

Email

Error State

This field has an error.

Input Group

https://

Message

Code

HTML

<div class="field">
  <label class="label">Username</label>
  <input type="text" class="input" placeholder="Enter username">
  <div class="field-hint">Must be 3+ chars.</div>
</div>
<div class="field">
  <label class="label label-required">Email</label>
  <input type="email" class="input" placeholder="name@example.com">
</div>
<div class="input-group">
  <span class="input-group-text">https://</span>
  <input type="text" class="input" placeholder="example.com">
</div>
<textarea placeholder="Message..."></textarea>

Hover Card

Rich content preview on hover.

Preview

Code

HTML

<div class="hover-card">
  <a href="#">@username</a>
  <div class="hover-card-content">
    <div class="flex items-center gap-3">
      <div class="avatar">U</div>
      <div><div class="font-semibold">Name</div><div class="text-xs text-muted">@user</div></div>
    </div>
    <p class="text-sm text-muted">Description.</p>
  </div>
</div>

Kbd

Keyboard shortcut hints.

Preview

Ctrl + C ⇧ Shift + Enter Esc ⌘ + K

Code

HTML

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<kbd>Esc</kbd>

Label

Form labels with required indicator support.

Preview

Regular Label Required Label

Code

HTML

<label class="label">Field name</label>
<label class="label label-required">Required</label>

Menubar & Navigation

App menubar and responsive navigation bar.

Preview

File

Edit

View

Help

Code

HTML

<nav class="navbar">
  <a href="#" class="navbar-brand">Logo</a>
  <ul class="navbar-nav">
    <li><a href="#" class="navbar-link">Home</a></li>
    <li><a href="#" class="navbar-link">Docs</a></li>
  </ul>
</nav>

Meter

Value gauge indicator with semantic colors.

Preview

Storage45%

CPU78%

Memory92%

Code

HTML

<div class="meter"><div class="meter-fill" style="width:65%"></div></div>
<div class="meter meter-warning"><div class="meter-fill" style="width:80%"></div></div>
<div class="meter meter-destructive"><div class="meter-fill" style="width:95%"></div></div>

Pagination

Page navigation controls.

Preview

Code

HTML

<nav class="pagination">
  <a class="pagination-item" href="#">&laquo;</a>
  <a class="pagination-item" href="#">1</a>
  <a class="pagination-item active" aria-current="page" href="#">2</a>
  <a class="pagination-item" href="#">&raquo;</a>
</nav>

Popover

Click-triggered floating content panel.

Preview

Code

HTML

<div class="popover" data-state="closed">
  <button class="btn btn-outline" data-popover-trigger>Open</button>
  <div class="popover-content">
    <h4>Content</h4>
    <input type="text" class="input">
  </div>
</div>

Progress

Determinate and indeterminate loading bars.

Preview

Code

HTML

<div class="progress"><div class="progress-fill" style="width:65%"></div></div>
<div class="progress progress-sm"><div class="progress-fill" style="width:40%"></div></div>
<div class="progress progress-indeterminate"><div class="progress-fill"></div></div>

Resizable

Draggable resize handles between panels.

Preview

Left Panel

Right Panel

Code

HTML

<div class="resizable border rounded" style="height:150px">
  <div class="resizable-panel p-4">Left</div>
  <div class="resizable-handle"></div>
  <div class="resizable-panel p-4">Right</div>
</div>

Scroll Area

Custom styled scrollbar container.

Preview

Scrollable content area with custom thin scrollbars.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra.

Code

HTML

<div class="scroll-area" style="height:200px">
  <p>Long scrollable content...</p>
</div>

Separator

Horizontal and vertical content dividers.

Preview

Content above

Content below

or continue with

Left

Right

Code

HTML

<hr class="separator">
<div class="separator-label">or continue with</div>
<div class="flex items-center gap-4">
  <span>Left</span>
  <div class="separator-vertical" style="height:1.5rem"></div>
  <span>Right</span>
</div>

Sidebar

App sidebar navigation with sections, labels, and collapsible support.

Preview

Code

HTML

<div class="sidebar" style="height:300px;width:240px">
  <div class="sidebar-header"><div class="font-semibold">Workspace</div></div>
  <div class="sidebar-content">
    <div class="sidebar-label">Main</div>
    <a class="sidebar-item active" href="#">Dashboard</a>
    <a class="sidebar-item" href="#">Settings</a>
  </div>
  <div class="sidebar-footer">
    <button class="btn btn-ghost btn-sm" data-sidebar-toggle="sidebar-id">Toggle</button>
  </div>
</div>

Skeleton

Loading placeholder shimmer animations.

Preview

Code

HTML

<div class="skeleton skeleton-avatar"></div>
<div class="skeleton skeleton-heading"></div>
<div class="skeleton skeleton-text"></div>
<div class="skeleton skeleton-image"></div>
<div class="skeleton skeleton-btn"></div>

Slider

Range input with custom styling.

Preview

Volume — 50%

Code

HTML

<div class="field">
  <label class="label">Volume <span id="vol">50</span>%</label>
  <div class="slider">
    <input type="range" min="0" max="100" value="50"
           oninput="document.getElementById('vol').textContent=this.value">
  </div>
</div>

Spinner

Loading indicator variants.

Preview

Default

Dots

Bars

Code

HTML

<div class="spinner spinner-sm"></div>
<div class="spinner"></div>
<div class="spinner spinner-lg"></div>
<div class="spinner-dots"><span></span><span></span><span></span></div>
<div class="spinner-bar"><span></span><span></span><span></span></div>

Switch & Toggle

On/off switches and pressable toggle buttons.

Preview

Airplane Mode Notifications

Code

HTML

<label class="switch">
  <input type="checkbox" checked>
  <span class="switch-track"><span class="switch-thumb"></span></span>
  Label
</label>
<button class="toggle active" aria-pressed="true">Bold</button>
<div class="toggle-group">
  <button class="toggle active">Left</button>
  <button class="toggle">Center</button>
  <button class="toggle">Right</button>
</div>

Tabs

Tabbed content panels with underline and pill variants.

Preview

Account Settings

Manage your account details and preferences.

Password

Change your password and security settings.

Notifications

Configure how you receive notifications.

Code

HTML

<div class="tabs">
  <div class="tabs-list">
    <button class="tabs-trigger active" data-tab="one">Tab 1</button>
    <button class="tabs-trigger" data-tab="two">Tab 2</button>
  </div>
  <div class="tab-panel active" data-tab-panel="one">Content 1</div>
  <div class="tab-panel" data-tab-panel="two">Content 2</div>
</div>

Toast / Notification

Non-blocking notifications via JavaScript API.

Preview

Code

JS

Ranju.toast({
  title: 'Saved!',
  description: 'Your changes have been saved.',
  variant: 'success',     // 'success' | 'destructive' | 'warning'
  duration: 4000,          // ms, 0 = persistent
  position: 'bottom-right' // top-right, top-left, bottom-left, etc.
});

Tooltip

Lightweight hover hints. CSS-only or use data-tooltip for JS-enhanced tooltips.

Preview

Code

HTML

<div class="tooltip">
  <button class="btn btn-sm">Hover me</button>
  <div class="tooltip-content">Tooltip text</div>
</div>
<button data-tooltip="JS tooltip">Hover me</button>

Item Group

Vertical or horizontal list layout for items with icons, text, and actions.

Preview

Dashboard

Overview of your workspace

New

Profile

Manage your account settings

Settings

Configure your preferences

Code

HTML

<div class="item-group border rounded">
  <div class="item item-clickable">
    <div class="item-content">
      <div class="item-title">Dashboard</div>
      <div class="item-description">Overview</div>
    </div>
    <span class="badge badge-ghost item-action">New</span>
  </div>
  <div class="item item-clickable">
    <div class="item-content">
      <div class="item-title">Settings</div>
    </div>
  </div>
</div>

RanjuUI

Installation

Theming & Dark Mode

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Grid & Layout

Utilities

Accordion

Alert

Aspect Ratio

Avatar

Badge

Breadcrumb

Button

Calendar

Card

Carousel

Slide 1

Slide 2

Slide 3

Checkbox & Radio

Collapsible

Combobox

Command Palette

Context Menu

Data Table

Dialog

Drawer & Sheet

Drawer Title

Sheet Panel

Dropdown

Empty State

Input & Textarea

Hover Card

Kbd

Label

Menubar & Navigation

Meter

Pagination

Popover

Dimensions

Progress

Resizable

Scroll Area

Separator

Sidebar

Skeleton

Slider

Spinner

Switch & Toggle

Tabs

Account Settings

Password

Notifications

Toast / Notification

Tooltip

Item Group