UI Elements — RedDash UI Kit

Buttons

Primary, outline, soft, color variants, sizes, rounded, and icon-only styles.

.rd-btn-{primary|outline|soft|success|info|warning|dark|ghost} + size modifier .rd-btn-{sm|lg}

Alerts

Inline contextual messages with dismissible option.

Primary Alert

This is a primary informational message. Use for general information or tips.

Success!

Your changes have been saved successfully. All data is up to date.

Did you know?

You can switch between light and dark mode using the toggle in the navbar.

Warning

Your storage is 85% full. Consider upgrading your plan or deleting old files.

.rd-alert-{primary|success|info|warning} — add .rd-alert-dismiss for close button

Badges

Soft, solid, pill, and dot styles for labels, statuses, and notifications.

Primary Success Info Warning Dark

Pill Primary Pill Success Pill Info Pill Warning

Solid Solid Success Solid Info Solid Warning

Active Online Away Offline

.rd-badge + color + optional .rd-badge-pill or .rd-badge-dot

Tabs

Underline tab navigation with switchable content panes.

This is the Overview tab content. Tabs use a simple underline indicator driven by a CSS class toggle — no external library needed.

This is the Analytics tab. You can embed charts, tables, or any content inside each pane.

This is the Settings tab. Forms, toggles, or configuration panels work perfectly here.

.rd-tabs + .rd-tab-btn + .rd-tab-pane — toggle .active class

Accordions

Collapsible content panels using Bootstrap collapse.

What is RedDash?

RedDash is a premium admin dashboard template built with Bootstrap 5, GSAP, Chart.js, FullCalendar, DataTables, and Three.js. It supports dark mode, RTL, and multi-language out of the box.

Does it require a build step?

No build process is needed. RedDash is pure HTML/CSS/JS with CDN-loaded libraries. Open any page in a browser or serve with a local web server.

How do I customize the colors?

Edit the --primary variable in assets/css/theme.css. All UI elements that use var(--primary) will update automatically.

.rd-accordion + Bootstrap data-bs-toggle="collapse"

Progress Bars

Labeled progress bars in multiple color variants and sizes.

JavaScript92%

Design Systems85%

Node.js / APIs74%

DevOps58%

Striped Animated65%

.rd-progress + .rd-progress-bar — set width via inline style or data-width

Spinners & Loading Skeletons

Loading indicators for async states.

.rd-spinner — .rd-skeleton for shimmer loading states

Avatars

Circle, square, initial-based, and grouped avatar styles.

AJ

SC

MD

LP

RD

+8

.rd-avatar-{sm|md|lg|xl} — .rd-avatar-sq for square — .rd-avatar-group for stack

Pagination

Page navigation with active, disabled, and previous/next controls.

1 2 3 … 8 9

Previous 1 2 3 Next

.rd-pagination + .rd-page-item — add .active or .disabled

Breadcrumbs

Navigation path indicator with icons and arrow separator.

.rd-breadcrumb + .rd-breadcrumb-item + .rd-breadcrumb-sep

File Upload

Drag & drop upload zone with attached file list.

Drop files here or click to upload

Supports PDF, DOC, JPG, PNG up to 20 MB each

project-brief.pdf

2.4 MB

Done

dashboard-mockup.png

5.7 MB

68%

assets-v2.zip

18.2 MB

32%

.rd-file-drop + .rd-file-list + .rd-file-item

Toasts & Notifications

Non-intrusive notification messages.

Changes saved

Your profile has been updated successfully.

Delete failed

You do not have permission to delete this record.

New message

Sarah Chen sent you a message in Chat.

.rd-toast — position with position: fixed; bottom: 24px; right: 24px in production

Modals

Standard, confirmation, and form modals powered by Bootstrap.

Bootstrap 5 modal with custom theme overrides — data-bs-toggle="modal"