revojsGitHub
Modules@revojs/ui

Every control, one page

Interactive showcase of all Vue components from @revojs/ui. Every control below is live and bound with v-model where applicable.

Structure

Typography, navigation and layout

Heading

Heading 3xl

Heading xl (default)

Heading sm

Centered heading

Icon, Link and Breadcrumb
Primary linkMuted linkInfo linkAttention linkSuccess linkDestructive link
Navigate
HomeComponentsSettings
Shell

Workspace overview

Active section: overview. Navigation and actions are supplied through slots.

Entry
Ada LovelaceTeam member
Alan TuringTeam member
Grace HopperTeam member
A fully clickable link row

Favorite: None. Link rows contain no nested buttons.

Pagination
Input
Textarea

Page 1 of 3

Separator

Above

Below

LeftRight
Container
size="3xl" → max-w-3xl
size="5xl" → max-w-5xl (default)
size="7xl" → max-w-7xl
Collection
Grid 1
Grid 2
Grid 3
Ada Lovelace
Alan Turing
Grace Hopper
Nothing found

Actions

Button

Variants
Sizes, fonts and icons
Link button

Forms

Inputs and selection

Field and Input
Search

Try typing, the value is shown below.

Email

Larger text with trailing icon.

Message

Leading and trailing buttons inside the input.

Age
Disabled

Search: — · Email: —

Textarea

Native rows and maxlength attributes are forwarded to the textarea.

0 / 240 characters

Select
Checkbox

Accepted: no

Radio

Plan: free

Switch

Notifications: on

Setting
Release emails

Changes apply immediately.

Used for dates and labels.

Range, Number field and Rating
Volume40 %

Volume: 40

Quantity: 2

Rate this page

Rating: 3 / 5

Readonly
Radio group
Plan
Horizontal
Tags input and Date
ada@revojs.com

Recipients: ada@revojs.com

Due date
Upload
Avatar
Drag and drop a file here
PNG or JPEG.

File: No file selected

Progress
Uploading35%
35%
75%

Choices

Menu, Tabs, Toggle group, Badge and Tooltip

Menu

Last action: none · Archived: hidden · Sort: recent

Context menu and Toolbar
Right-click or long-press here
Tabs

Panel for overview.

Vertical tabs with manual activation

Panel for overview.

Toggle group

Formats: bold

Badge and Tooltip
OutlineSecondaryPrimaryWaitingDoneNewFailedrevojs.com

Feedback

Notification and action states

Toast
Confirm

Answer: —

Notification

Unsaved changes

Save your changes before leaving this page.

Custom icon

Static notifications can opt out of live announcements.

Overlays

Dialog, Sheet and Popover

Dialog
Hello

Dialogs trap attention until closed via backdrop, the X button or the footer.

Sheet
Menu
HomeComponents
Popover

Disclosure

Accordion, Collapsible and Stepper

Accordion
How much does it cost?

Answer for How much does it cost?

Where is my data stored?

Answer for Where is my data stored?

Can I export everything?

Answer for Can I export everything?

Standalone collapsible

Built on the native details element.

Stepper

Surfaces

Card slots

Profile

Cards group related content with an optional footer.

Custom header

Use the actions slot for icon buttons and menus.