51 Screens, in 6 Frameworks

Speed up your build with the components behind the admin: charts, tables, forms, calendars and notifications, all reading the same tokens. They are the same components in every framework, because the class strings come from one shared source rather than being written out per edition.

Tailwind CSS · Bootstrap · Bulma

Dashboard

The landing screen, and the variants on the roadmap.

  • Overview Dashboard

    Organizations, employees, markets and branches in one view.

  • Analytics Dashboard

    Traffic, funnels and cohort tables.

  • CRM Dashboard

    Pipeline value, stage counts and the deals behind them.

The Form Layout screen

Layouts

The shells every screen sits in.

  • Sidebar Layout

    Collapsible nav, quick actions and a command palette.

  • Tabbed Workspace

    Open records as tabs, the way a back office is actually used.

  • Split Detail

    List on the left, record on the right, resizable.

The Line Chart screen

Charts

Recharts, themed from the same tokens as everything else.

  • Line and Area

    Revenue against expenses, over any range.

  • Bar and Stacked

    Categorical comparisons with a legend that fits.

  • Radial and Gauge

    Targets, percentages and progress.

The Data Table screen

Data Table

The component this product is built around.

  • Full Data Table

    Sort, filter, page, select, import and export.

  • Column Controls

    Show, hide, reorder and pin, remembered per user.

  • Inline Editing

    Edit in place with per-cell validation.

Record View

One record, read and write.

  • Record Detail

    Fields laid out by type, alignment computed rather than remembered.

  • Related Records

    Children and links, without leaving the page.

  • Audit Trail

    Who changed what, and when.

The Form Elements screen

Forms

Every input the design system ships.

  • Field States

    Default, focus, error, disabled and read-only.

  • Complex Inputs

    Selects, combos, dates, files and rich text.

  • Validation

    Per-field messages that survive a failed submit.

The Steps screen

Steps

Multi-stage flows.

  • Wizard

    Numbered steps with validation per stage.

  • Progress Header

    Where you are, and what is left.

  • Review and Confirm

    The last screen before a write.

The Calendar screen

Calendar

Scheduling.

  • Month View

    Events, drag to move, click to create.

  • Week and Day

    Hour grid with overlap handling.

  • Event Editor

    The panel that opens on a click.

The Chat screen

Chat

Conversation.

  • Conversation List

    Unread counts, search and pinning.

  • Thread

    Messages, attachments and typing state.

  • Composer

    Send, attach and mention.

The Notifications screen

Notifications

Telling someone something happened.

  • Notification Centre

    Grouped, filterable, markable.

  • Toasts

    Success, warning and error, on the same tokens.

  • Empty State

    What it looks like with nothing in it.

The Organizations screen

Organizations

The records the demo is built on.

  • Organization List

    Search, filter and bulk actions.

  • Organization Detail

    Branches, employees and markets on one record.

  • Branches

    Locations under an organization.

Employees

People.

  • Employee Directory

    Filterable by department and role.

  • Employee Record

    Profile, reporting line and history.

  • Departments

    The structure employees sit in.

Users

Access.

  • User List

    Accounts, roles and last activity.

  • Roles and Permissions

    What each role can reach.

  • Invitations

    Pending, accepted and expired.

Settings

Configuration.

  • General Settings

    Name, locale, and the things everyone changes first.

  • Theme Settings

    The twelve token fields, live.

  • Integrations

    Keys, webhooks and their state.

The Support Tickets screen

Support

Help.

  • Ticket List

    Open, pending and resolved.

  • Ticket Detail

    Thread, attachments and internal notes.

  • Knowledge Base

    Articles, categorised.

The Signin screen

Authentication

The way in.

  • Sign In

    Email, password and the states around them.

  • Sign Up

    Registration with validation.

  • Recovery

    Forgotten password and reset.

Onboarding

The first five minutes.

  • Welcome

    What this is, and what to do first.

  • Business Setup

    The details a new tenant supplies.

  • Checklist

    Progress toward a configured account.

Sign in to Voilet

Don't have an account?

By continuing you agree to our Terms of Service and Privacy Policy.