mtversemtverseui
Main homepage

MENU

UI ElementsFormsTablesChartsAdvanced UIExtended UI
EcommerceAnalyticsMarketingCRMStocksSaaSLogisticsAINEWSalesNEWFinanceNEW
Text GeneratorImage GeneratorCode Generator
ProductsOrdersCustomersInvoicesTransactionsCoupons
CalendarChatEmailTasksFile ManagerSupport
World MapRoute MapDensity Map
ProfileSettingsPricingFAQAPI KeysIntegrationsActivity LogNotificationsTeamSuccessBlank Page404 Error500 Error503 ErrorComing SoonMaintenance
Sign InSign UpForgot Password
Arun Pandian

Arun Pandian

arun@mtverse.io

⌘K

Extended UI Elements

Explore 50+ additional UI components for your admin dashboard

Input & Search

Command Palette

Mention Input

Hashtag Input

#design#admin

Actions & Interactions

Copy to Clipboard

npm install mtverse-admin

Rating Stars

3/5

Like Button

Share Button

Bookmark Button

Follow Button

Reaction Picker

Date & Time

Date Display

Saturday, June 20, 2026
Jun 20, 2026

Time Display

08:04:53 AM

Live • 6/20/2026, UTC

Keyboard Shortcuts

Command Palette
⌘K
Save
⌘S
Copy
CtrlC
Command Panel
⌘ShiftP

Media & Display

QR Code

Scan to visit

Color Picker

#465fff

Carousel

Slide One

Lightbox

Click to Open

Gallery Grid

Image 1
Image 2
Image 3
Image 4
Image 5
Image 6

Image Compare

File Upload

Avatar Upload

Click to upload avatar

Dropzone Area

Drag & drop files here

or click to browse

File List

report.pdf

2.4 MB

image.png

1.1 MB

data.csv

340 KB

Media Players

Audio Player

1:233:45

Video Player

2:15 / 6:30

Map Placeholder

Interactive Map Area

Editor & Code

Rich Text Editor

Start typing your content here...

Markdown Preview

Heading

This is a bold and italic text.

  • Item one
  • Item two
const x = 42;

Code Editor

app.tsx
1import React from "react";
2import React from "react";
3import React from "react";
4import React from "react";
5import React from "react";
6import React from "react";
7import React from "react";
8import React from "react";
9import React from "react";
10import React from "react";
11import React from "react";

Diff Viewer

+ const greeting = "Hello, World!";
+ console.log(greeting);
- const msg = "Hi";
- alert(msg);
  export default App;

Syntax Highlight

function greet(name) {
  return "Hello, " + name + "!";
}

File Tree

app.tsx
utils.ts
package.json
tsconfig.json

Navigation

Breadcrumb Trail

Laptops

Stepper Form

1
2
3
Step 1: Account

Wizard Navigation

Data Widgets

Chart Widget

M
T
W
T
F
S
S

Stat Widget

24,580

+12.5% from last month

Banners

Info Banner

Information

Your account has been verified successfully.

Warning Banner

Warning

Your subscription expires in 3 days. Renew now.

Maintenance Banner

Scheduled maintenance on March 15, 2:00 AM – 4:00 AM UTC

Cookie Banner

We use cookies to enhance your experience. By continuing, you agree to our cookie policy.

Announcement Bar

New: Dark mode is now available! Check your settings.

Onboarding

Onboarding Tooltip

Welcome!

This is your dashboard overview.

Tour Guide

Accessibility

Keyboard Navigation

Use Tab and Enter to navigate

Skip Link

Tab into this area to see the skip link become visible (accessibility feature).

Focus Trap

Trapped Focus Area

Focus stays within this boundary in a real implementation.

Live Region (ARIA)

No updates yet

Screen readers announce changes to the live region.

Screen Reader Only

Visible content

This text is only visible to screen readers for accessibility

Hidden text is announced by assistive technology but not displayed visually.

Print Button

Fullscreen Toggle

Social & Communication

Chat Bubble

Hey, how is the project going?

10:24 AM

Great! Almost done with the UI components.

10:26 AM

Awesome! Can you share a preview?

10:27 AM

Social Card

JD

Jane Doe

@janedoe • 2h ago

Just shipped the new dashboard design! 🚀 What do you think about the new component library?

Comment Thread

A
Alex1h ago

This feature looks great! Love the design.

S
Sarah45m ago

Thanks! Took a while to get it right.

M
Mike30m ago

Can we add dark mode support?

Cards

Product Card

Pro Camera Kit

Professional grade

$89
(4.0)

Profile Card

AK
Alex Kim

@alexkim • Senior Developer

842

Posts

12.4k

Followers

324

Following

Contact Card

RM
Rachel Morgan

Product Designer

rachel@company.com
••••••••••
San Francisco, CA

Info Widgets

Calendar Widget

March 2026
Su
Mo
Tu
We
Th
Fr
Sa

Weather Widget

22°

Sunny • San Francisco

Mon

24°

18°

Tue

20°

15°

Wed

17°

12°

Thu

23°

16°

Stock Ticker

AAPL$189.84
+2.34%
GOOGL$141.80
-1.12%
MSFT$415.56
+5.67%
TSLA$248.42
-3.89%

Notification Panel

2 unread

New follower

Sarah started following you

2m ago

Comment received

John commented on your post

15m ago

System update

Version 2.4.0 is available

1h ago

Payment received

Invoice #1234 was paid

3h ago

Activity Feed

Alex pushed a commit to main

5m ago

Sarah opened a pull request in ui-kit

12m ago

Mike closed an issue in dashboard

1h ago

Emma reviewed code in api

2h ago

Tom deployed production

3h ago

Data & Charts

Data Table Mini

Name Role Status
AliceAdminActive
BobEditorInactive
CarolViewerActive
DaveAdminActive

Chart Placeholder

Mon
Tue
Wed
Thu
Fri
Sat
Sun
This Week
Last Week

Progress Dashboard

Revenue
Target: $125K78%
Users
Target: 45.2K92%
Orders
Target: 1.8K64%
Growth
Target: 18%45%

Metric Gauge

72%Performance

Donut Chart

100%
Desktop45%
Mobile30%
Tablet15%
Other10%

Forms & Filters

Survey Form

How satisfied are you?

Would you recommend us?

Pricing Toggle

MonthlyAnnual

Starter

$9/mo
  • 5 Projects
  • Basic Support
  • 1GB Storage

Pro

$29/mo
  • Unlimited Projects
  • Priority Support
  • 50GB Storage

Filter Panel

Category
Price Range
$0$500
Rating

Search Results

3 results for "dashboard"

Dashboard Overview

Main analytics <mark>dashboard</mark> with real-time metrics...

/dashboard

Dashboard Settings

Configure your <mark>dashboard</mark> layout and widgets...

/settings/dashboard

Dashboard API

RESTful API endpoints for <mark>dashboard</mark> data...

/api/dashboard

Organization

Tag Manager

ReactTypeScriptTailwindNext.jsNode.js

Avatar Group

AK
SM
JD
RL

8 team members

Kanban Board

To Do2

Setup project

Design mockups

In Progress2

Build components

API integration

Done2

Plan sprint

Setup CI/CD

Badge Collection

3/6 earned

Visual Tools

Image Compare

After
Before

Map Placeholder

HQ
Office
Store
🗺 Interactive Map

Audio Player

Midnight Echoes

Stellar Waves

1:243:58

Video Player

4:32 / 10:15

Onboarding & Consent

Onboarding Steps

Welcome

Get started with your new account

Setup Profile

Add your name and avatar

Invite Team

Add team members to collaborate

All Done!

You're ready to go

Cookie Consent

We value your privacy

We use cookies to enhance your experience. By continuing, you agree to our cookie policy.