Skip to main content

Home Guide Components Playground Version

opus-react v0.6.8

Theme

Overview Relationships

Alert Avatar Avatar group Badge Card Clock Content timeline Description list Divider Empty state Flip Clock JSON viewer List Masonry grid Panel Property grid Section Show more Skeleton Statistic 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

Data grid Table

Desktop Desktop Dock Desktop Icon Desktop Window

Carousel Image gallery Image thumbnail Lightbox

Aspect Ratio Columns Container Custom Scrollbar Dock Layout Grid 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 Button Cascader Checkbox Checkbox group*Chip input Choice chips Colour clouds Colour picker Combobox*Country picker Currency input*Date picker Date range picker*Date/time picker Email input Emoji picker File upload Filter select Form & validation summary*Hidden input Icon picker Image crop upload Masked 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 Reset button Rich text field Search input Segmented control Select Slider range Submit button Switch Text input Textarea Theme toggle Time picker Transfer list Tree select URL input Week picker

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

Candlestick Chart OHLC Chart Waterfall Chart

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

Hierarchy Charts

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

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

Planning Charts

Gantt Chart Milestone Timeline Timeline

Bubble Chart Hexbin Plot Scatter Plot

Donut Chart Pie Chart Polar Area Chart Radar Chart Sunburst Chart

Statistical Charts

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

Command palette Context menu Dialog Drawer Modal Popover Toast Tooltip

Application Footer Application Header Notes & Activity Notification Centre Sidebar User Profile

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

Opus
Documentation
Components
Forms

Components

Loading preview…

Settings

Flagged

Label direction

Left

Right

Radio shape

Round

Square

Checkbox shape

Square

Round

Errors

ButtonMore

CascaderMore

Location

CheckboxMore

I agree to the Terms & Conditions

Chip inputMore

Tags

DesignReactUI

Choice chipsMore

Interests

Colour pickerMore

Choose a colour

Country pickerMore

Country

Date pickerMore

Date of birth

Date/time pickerMore

Appointment

Email inputMore

Email address

File uploadMore

Upload a file

Drag and drop a file here

or

Browse files

Max file size 10MB

Filter selectMore

Filters

Hidden inputMore

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 pickerMore

Billing month

Multi selectMore

Teams

Number inputMore

Quantity

Password inputMore

Password

Password strength fieldMore

Create password

Strong

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

Phone number inputMore

Mobile number

Radio groupMore

Account type

Personal

Business

Enterprise

Range sliderMore

Volume

Volume60%

0%100%

Rating inputMore

Satisfaction

Reset buttonMore

Rich text fieldMore

Description

Search inputMore

Search

Segmented controlMore

Billing cycle

SelectMore

Country

Slider rangeMore

Budget range

20 – 80

0100

Submit buttonMore

SwitchMore

Enable notifications

Text inputMore

Full name

TextareaMore

Your message

0 / 500

0 / 500 characters

Time pickerMore

Start time

Transfer listMore

Office locations

Available

Selected

Tree selectMore

Department

URL inputMore

Website

Week pickerMore

Planning week