Skip to main content

Home Guide Components Playground Theme designer Security Version

opus-react v0.20.3

Theme

Components

Overview(308)Relationships

Alert Avatar Avatar group Background blobs Badge Card Chat Bubble Clock Content timeline Description list Divider Empty state Flip Clock JSON viewer List Masonry grid Panel Property grid Section Show more Skeleton Statistic Text Marquee Tree menu Tree view

3D asset gallery 3D asset lightbox 3D asset thumbnail 3D asset viewer

Accordion Accordion group

Dual List Builder Filter Builder Permissions Matrix Property Inspector Query Builder Rule Builder

Audit log Bulk action bar Data grid Diff viewer Editable data table File manager Infinite selectable list Table Tree table Upload queue Virtual list

Desktop Desktop Dock Desktop Icon Desktop Window

Save-state indicator

Carousel Image gallery Image thumbnail Lightbox

Aspect Ratio Columns Container Custom Scrollbar Dock Layout Grid Overflow toolbar Resizable Panel Resize Handle Scroll Area Spacer Splitter Stack Three Pane Layout

Audio Player Video Player

Bottom Navigation Breadcrumb Dock / Toolbar Dropdown menu FAB Mega menu Navigation Rail Page Header Pagination Sidebar Split Button Tabs Top navigation

Calendar Kanban Board Resource Planner Scheduler

Stat Tile Stat Tiles Tile Tiles

Clipboard Copy button Focus trap Hotkey manager Icon Icon badge Intersection observer Keyboard shortcut Portal Portal host Resize observer Spinner Theme provider Theme switcher Visually hidden

Dashboard Content Container Deals Over Time Gauge KPI Card Metric Tile Pipeline Overview Profile Photo Upload Progress Bar Progress Ring Recent Activity Sparkline Speedometer Stat Card Status Indicator Top Performing People Trend Badge Upcoming Tasks User Profile

Accent colour picker Async multi-select Async select Button Cascader Checkbox Checkbox group Chip input Choice chips Colour clouds Colour picker Combobox Country picker Currency input Currency selector Date picker Date range picker Date/time picker Email input Emoji picker File upload Filter select Form & validation summary Form wizard Hidden input Icon picker Image crop upload Language picker*List field Masked input Mention input Month picker Multi select Multi-file upload Note composer Number input OTP input Password input Password strength field Phone number input Radio group Range slider Rating input Recurrence editor Reset button Rich text field Search Box Search input Segmented control Select Signature pad Slider range Submit button Switch Text input Textarea Theme toggle Time picker Time range picker Transfer list Tree select URL input Week picker

Asteroids Game Pac-Man Game

100% Stacked Bar Chart Bar Chart (Horizontal)Bar Chart (Vertical)Bullet Chart Grouped Bar Chart Pareto Chart Range Bar Chart Stacked Bar Chart

Financial Charts(3)

Candlestick Chart OHLC Chart Waterfall Chart

Chord Diagram Force Directed Graph Funnel Chart Network Graph Pyramid Chart Sankey Diagram

Hierarchy Charts(2)

Circle Packing Treemap

Area Chart Line Chart Multi-Line Chart Range Area Chart Ridgeline Plot Spline (Smooth Line)Stacked Area Chart Stream Graph

Bubble Map Choropleth Map Geo Map

Matrix Charts(4)

Calendar Heatmap Contour Plot Heatmap Surface Plot (2D projection)

Planning Charts(3)

Gantt Chart Milestone Timeline Timeline

Point Charts(3)

Bubble Chart Hexbin Plot Scatter Plot

Radial Charts(5)

Donut Chart Pie Chart Polar Area Chart Radar Chart Sunburst Chart

Statistical Charts(6)

Box Plot Density Plot Error Bar Chart Histogram Parallel Coordinates Violin Plot

Bottom sheet Command palette Confirm dialog Context menu Cookie consent Dialog Drawer Modal Popover Product tour Toast Tooltip

Application Footer Application Header Background Blobs Theme Lab Chat Conversation Notes & Activity Notification Centre Sidebar User Profile

Authentication(12)

Change Password Form Check Email Screen Email Verified Screen Forgot Password Form Google & Apple Login Form Google & Apple Registration Form Link Expired Screen Login Form OTP Form Passkey Login Form Register Form Reset Password Form

Appointment Diary

Company Card Company Details Company Directory Company Notes

Contact Card Contact Details Contact Directory Contact Notes

Dashboard Layout Dashboard List Columns Dashboard Welcome

Desktop Environment

Document Manager

Form Submission

Product Catalogue

Quotation Builder Sales Invoice Sales Opportunity Pipeline Sales Order

System Configuration

403 Page 404 Page App setup Error state

Opus
Documentation
Components
Forms

Components

Loading preview…

Settings

Flagged

Label direction

Left

Right

Radio shape

Round

Square

Checkbox shape

Square

Round

Errors

Button

Cascader

Location

Checkbox

I agree to the Terms & Conditions

Chip input

Tags

DesignReactUI

Choice chips

Interests

Colour picker

Choose a colour

Country picker

Country

Date picker

Date of birth

Date/time picker

Appointment

Email input

Email address

File upload

Upload a file

Drag and drop a file here

or

Browse files

Max file size 10MB

Filter select

Filters

Hidden input

Campaign ID

Not visible in the UI

name="campaignId" value="campaign-id-42"

Hidden fields are not visible to users but submit with the form.

Month picker

Billing month

Multi select

Teams

Number input

Quantity

Password input

Password

Password strength field

Create password

Strong

At least 8 characters
One uppercase letter
One lowercase letter
One number

Phone number input

Mobile number

Radio group

Account type

Personal

Business

Enterprise

Range slider

Volume

Volume60%

0%100%

Rating input

Satisfaction

Reset button

Rich text field

Description

Search input

Search

Segmented control

Billing cycle

Select

Country

Slider range

Budget range

20 – 80

0100

Submit button

Switch

Enable notifications

Text input

Full name

Textarea

Your message

0 / 500

0 / 500 characters

Time picker

Start time

Transfer list

Office locations

Available

Selected

Tree select

Department

URL input

Website

Week picker

Planning week