Skip to content
Dial

52Elements

Elements

Every control in its states, light and dark. Open the HTML or React tab to copy the code, or open a piece on its own page.

Actions

Buttons

Five variants in two sizes. Keys sink 1px with an inset shadow when pressed, like a real switch.

Button states

Default, toggled (aria-pressed), focus ring, loading with aria-busy, and disabled. Hover and press them to feel the travel.

Default
Toggled
Focus
Loading
Disabled

Icon buttons

44px square keys with accessible labels. Toggle keys keep their pressed state.

Keypad

A grid of square keys for transport controls, pads or quick actions. Each key is a real toggle button.

Segmented control

A mode selector built on native radio inputs, so arrow keys work out of the box.

Time range

Forms

Text input

Recessed fields with label, hint, error and disabled states. Errors use aria-invalid and aria-describedby.

Shown on the device screen.

Enter a full email address.

Input add-ons

Prefix, suffix and inline action add-ons that sit inside the same well.

dial.app/
BPM

Textarea

Auto-counted textarea. The counter is linked with aria-describedby and updates as you type.

0 / 240

Select

Native select with a custom chevron. Keeps full keyboard and screen reader support.

Search field

Search input with a leading icon and a keyboard shortcut hint.

⌘K

Checkbox

Checked, unchecked, indeterminate, invalid and disabled. The whole row is a 44px tap target.

Channels

Required before you record.

Radio group

Native radios with a machined ring. Arrow keys move between options.

Monitoring

Radio cards

Large selectable cards for plans or modes. Selection lights the LED and raises the card.

Plan

Switch

A role="switch" button with a sliding cap and an LED that lights when on. The hit area extends to 48px.

Phantom power

+48V on inputs 1 and 2

Low cut

Roll off below 80 Hz

External sync

Requires a word clock source

Rocker switch

A two-position rocker in the style of a hardware power switch. Same switch semantics, a bolder shape.

Power
Bypass

Fader slider

Native range input styled as a fader with a ridged cap. The filled track and readout update live.

-4 dB
35%
20%

Rotary knob

The signature control. role="slider" with arrows, Page Up/Down, Home/End, and drag in any direction. The LED ring shows the value.

Gain

62%

Tone

40%

Space

85%

Number stepper

A numeric input flanked by two keys. Respects min, max and step.

One-time code

Six recessed digit cells. Typing advances, Backspace goes back, and pasting a full code fills every cell.

Verification code

File drop

Drop zone with a native file input covering it, so click, keyboard and drag-and-drop all work.

Drop stems here or browse

WAV or AIFF, up to 2 GB each

No file chosen

Display

Badges

Mono pill badges in six tones, optionally with a status LED. Fixed 24px height, optically centred caps.

DraftNewLiveClippingOfflinePro

Chips

Filter chips that toggle, plus removable tag chips. Removing a chip moves focus to its neighbour.

  • analog
  • warm
  • 120 bpm
  • minor

Avatars

Initial avatars with presence LEDs and an overlapping stack. Fictional people only.

Mara Voss

Online

Keyboard keys

Physical keycaps for shortcuts in menus, tooltips and help pages.

Command menu
⌘K
Play / pause
Space
Nudge value
Shift↑

Status LEDs

Glowing indicator lights with text labels, so colour is never the only signal. The blink is disabled under reduced motion.

  • Synced
  • Buffering
  • Clip
  • Armed
  • Idle

Dividers

Plain, labelled and engraved double-rule dividers.

Card

A panel card with corner screws, media, metadata and actions.

A metal toggle switch on a bone-coloured panel
Presetv2.4

Tape Saturation

Soft clipping and wow, modelled on a half-inch reel deck. Three knobs, no menus.

LCD readout

A backlit display panel with scanlines for live values, timecodes and status. Text stays above 7:1 contrast.

Take 07Rec

01:42.380

120 BPM4/4-6.2 dB

Stat

Metric tiles with an engraved label, tabular value and a delta badge.

Sessions
1,284+12%
Avg. length
38m+4%
Dropouts
0.4%-0.2pt

Data table

Sortable columns (aria-sort), select-all with indeterminate state, status badges and row actions. Scrolls horizontally on small screens.

Recorded takes
Status Actions
Verse guitar 2:14 Keeper
Bass DI 3:02 Review
Lead vocal 3 3:41 Clipped
Room tone 0:30 Draft

Calendar

Month grid with today marker, a selected range and disabled past days. 44px day cells.

Sep 2026

MoTuWeThFrSaSu

Timeline

A vertical event log with LED nodes and mono timestamps.

  1. Mix approved

    Jonas signed off on v4.

  2. Stems uploaded

    12 files, 1.8 GB.

  3. Clip detected

    Lead vocal 3 peaked at +0.4 dB.

  4. Session created

    Template: Band tracking.

Empty state

A friendly zero-data panel with a grille texture and one clear action.

No takes yet

Arm a track and press record. Takes appear here as soon as you stop.

Bar chart

A meter-style bar chart built from plain divs with an accessible data table summary. Bars rise on load unless reduced motion is on.

Hours tracked · week 3731.5h
Hours tracked per day
Mon4.4h
Tue6.4h
Wed3.6h
Thu7.6h
Fri5.6h
Sat2.4h
Sun1.5h

Navigation

Tabs

WAI-ARIA tabs with roving focus: arrows, Home and End. The active tab sits raised in a recessed track.

Four-band parametric EQ with a high-pass filter. Drag a band or use the knobs below.

Accordion

Disclosure buttons with aria-expanded. Panels animate their height with a grid-rows transition and are inert while closed.

Yes. The kit ships a v4 theme file alongside the v3 preset, and markup sticks to standard utilities.

Every piece ships as plain HTML with Tailwind classes plus a small script for interactive parts.

Every token has a dark value. Add the dark class on the html element, or let the theme toggle handle it.

Breadcrumbs

A labelled nav with aria-current on the last item.

Pagination

Key-style page buttons with aria-current and labelled previous and next.

Stepper

Progress through a multi-step flow. Completed steps show a check, the current step lights up.

Dropdown menu

Menu button with roving arrow keys, checkbox and radio items, a disabled item and Esc to close.

Command palette

A combobox with aria-activedescendant, grouped results, empty state and keyboard hints. Opens in a native dialog.

Esc

Session

New sessionN
Open recentO

Transport

Arm all tracksR
Toggle loopL
MetronomeT
↑↓ move↵ run

Feedback

Tooltip

Shows on hover and keyboard focus, dismisses with Esc, and stays open while hovered (WCAG 1.4.13).

Popover

A non-modal panel anchored to a button. Click outside or press Esc to close; focus returns to the trigger.

Dialog

Native

modal: focus trap, Esc, backdrop click and focus restore come from the browser.

Delete “Lead vocal 3”?

The audio file and its edits will be removed from this session. This can’t be undone.

Drawer

A side sheet built on

, sliding in from the right with a sticky footer.

Track settings

Mono

Toast

Polite live-region notifications with LED tones. They pause on hover and dismiss after 4.5 seconds.

Alerts

Inline banners for info, success, warning and error. Errors use role="alert".

Firmware 2.4 is available

Adds MIDI clock out and fixes a meter glitch.

Backup complete

All 14 sessions are safe in the cloud.

Low disk space

About 6 minutes of recording time left.

Progress

Linear meters with role="progressbar", a segmented level meter and an indeterminate sweep.

Bouncing mix64%

Input level

Scanning plug-ins

Gauge

A semicircular dial gauge for CPU, battery or capacity, with the value exposed as a meter.

38%

CPU

82%

Disk

Spinners

Arc spinner, stepped dial spinner and pulsing LED dots. All respect reduced motion.

Loading

Skeleton

Placeholder blocks that shimmer while content loads, hidden from assistive tech.

Guides

OverviewDocs Design tokensDocs AccessibilityDocs Quick startDocs

Elements

ButtonsActions Button statesActions Icon buttonsActions KeypadActions Segmented controlActions LinksActions Text inputForms Input add-onsForms TextareaForms SelectForms Search fieldForms CheckboxForms Radio groupForms Radio cardsForms SwitchForms Rocker switchForms Fader sliderForms Rotary knobForms Number stepperForms One-time codeForms File dropForms BadgesDisplay ChipsDisplay AvatarsDisplay Keyboard keysDisplay Status LEDsDisplay DividersDisplay CardDisplay LCD readoutDisplay StatDisplay Data tableDisplay CalendarDisplay TimelineDisplay Empty stateDisplay Bar chartDisplay TabsNavigation AccordionNavigation BreadcrumbsNavigation PaginationNavigation StepperNavigation Dropdown menuNavigation Command paletteNavigation TooltipFeedback PopoverFeedback DialogFeedback DrawerFeedback ToastFeedback AlertsFeedback ProgressFeedback GaugeFeedback SpinnersFeedback SkeletonFeedback

Sections

Announcement barMarketing NavbarNavigation App headerApplication Hero · deviceMarketing Hero · centeredMarketing Hero · consoleMarketing Logo stripMarketing How it worksMarketing Features · gridMarketing Features · bentoMarketing Features · alternatingMarketing Spec sheetMarketing Stats · LCDMarketing Stats · metersMarketing Pricing · three tiersMarketing Pricing · compare tableMarketing Pricing · singleMarketing Testimonials · gridMarketing Testimonial · large quoteMarketing CTA · panelMarketing CTA · newsletterMarketing FAQ · accordionMarketing FAQ · two columnsMarketing Team gridMarketing Blog · cardsContent Blog · featuredContent Contact · split formMarketing Contact · cardsMarketing Footer · largeNavigation Footer · simpleNavigation Dashboard · KPIsApplication Dashboard · chartApplication Dashboard · tableApplication Dashboard · activityApplication Dashboard · sidebarApplication Settings panelApplication Auth · sign inApplication Auth · sign upApplication Auth · verify codeApplication Error · 404Content

Layouts

Landing pageLayout DashboardLayout SettingsLayout Pricing pageLayout Blog indexLayout ArticleLayout Contact pageLayout Sign inLayout 404Layout
↑↓ move↵ openEsc close