Showcase

Every Malphas component, working, on a single page.

Actions

Button docs

Modal docs

Alert Dialog docs

Focus starts on Cancel. Clicking outside does not close it: only the two answers or Escape do.

Drawer docs

Open it and try to Tab out: focus cycles inside. Escape closes it and returns focus to the button. While it is open, the page behind does not scroll.

Dropdown docs

Open it and move with ↓ ↑. Escape closes it and returns focus to the trigger. Tab closes it too, but follows the page's natural order — a menu does not trap focus.

Popover docs

Focus moves into the panel when it opens. Escape closes it and returns focus to the button; Tab goes through the content and on to the page, closing the panel.

Context Menu docs

quarterly-report.pdf — right-click here
Right-click or press Shift+F10 for actions.

Last action: none

Swap docs

Data display

Card docs

Card title

A container that groups related content.

Pro plan

Everything in the free plan, with no limits.

Item docs

RT
Quarterly report

PDF · 2.4 MB · updated yesterday

  • protocol-v2.pdf

    Uploaded by Lincoln

  • results.csv

    Generated automatically

Hover Card docs

Protocol reviewed by @lincoln yesterday at 6 pm.

Bubble docs

The curve for cycle 32 came out above the threshold.
Should I rerun it first thing tomorrow?
  • Looking: 2
Rerun it, and set aside a control aliquot.
Quote: "set aside a control aliquot"

Marker docs

Yesterday
Amara Okafor joined the conversation
Generating the protocol summary…

Message docs

AO
The curve for cycle 32 came out above the threshold.
Should I rerun it first thing tomorrow?
ME
Rerun it, and set aside a control aliquot.
  • Like: 1

Attachment docs

  • protocol-v2.pdf

    PDF · 2.4 MB

  • cycle-32-curve.png

    PNG · 840 KB

    Uploading 45%

  • results.csv

    CSV · 12 KB

    Processing…

  • samples.xlsx

    XLSX · 1.1 MB

Message Scroller docs

Scroll up and ask for new messages: your position stays put, and the button counts what arrived. "Load earlier" adds to the top without pushing what you are reading.

Today
AO
The curve for cycle 32 came out above the threshold.
BC
Should I rerun it first thing tomorrow?
ME
Rerun it, and set aside a control aliquot.
AO
The primers arrived, they are in fridge 2.
BC
Is the thermocycler free this afternoon?
CM
I booked it from 2 to 4 pm.
ME
I logged the deviations in the protocol.
BC
The negative control came out clean.
CM
The curve for cycle 32 came out above the threshold.
AO
Should I rerun it first thing tomorrow?
ME
Rerun it, and set aside a control aliquot.
CM
The primers arrived, they are in fridge 2.

Typography docs

How the protocol works

vapulab records every step of the experiment. See the component list to build your own screen.

  • Plan the steps
  • Run them and log the deviations
Measure twice, cut once.

Run task dev to bring everything up locally.

Badge docs

NeutralPrimaryActivePendingFailedInfo
PrimaryActiveSmall

Kbd docs

Ctrl+Kto search

Avatar docs

LS LS LS VP
ON OnlineOF OfflineBU Busy

Stat docs

Revenue
$12,400

+12% this month

Subscribers
1,284

+3% this month

Failures
3

last 24h

Table docs

Service Environment Status
vapulab-api production Active
vapulab-web production Active
vapulab-jobs staging Degraded
vapulab-etl staging Stopped
Service Environment Status
vapulab-api production Active
vapulab-web production Active
vapulab-jobs staging Degraded
vapulab-etl staging Stopped

Data Table docs

40 results

Protocol Area Owner Steps
Cell culture AMicrobiologyChloé Martin14
Cell culture BBiochemistryDaniel Kim4
Cell culture CImmunologyElena Rossi8
Cell culture DGeneticsAmara Okafor12
Cell culture ENeuroscienceBen Carter16
Chromatography AImmunologyElena Rossi10
Chromatography BGeneticsAmara Okafor14
Chromatography CNeuroscienceBen Carter4

Collapse docs

The initial state comes from the server, so it does not flicker on load.

Accordion docs

Yes — it is a standalone Go module, versioned by tag.

Timeline docs

  1. Deploy started

    build #481, branch main

  2. Migrations applied

  3. Deploy finished

    zero downtime

Countdown docs

01:02:0301:3000:45
00:05Waiting… Time is up

Tooltip docs

Shows above Shows below Shows on the right

Tab to the button: the hint opens on focus, no mouse needed. Escape closes it.

Saves without closing the form

Data input

Input docs

Select docs

Combobox docs

Type to filter — accents are ignored, so "zurich" finds "Zürich". ↓ ↑ highlight, Enter picks, Escape closes and, pressed again, clears. Text that is not an option reverts to the previous selection when you leave the field.

Date Picker docs

Between today and the end of the year.

Calendar docs

Arrows move by day and week, Home/End go to the ends of the week, PageUp/PageDown change the month (with Shift, the year). Moving past the month loads the neighboring month and keeps focus on the day. Enter or Space picks.

Delivery (from Oct 5, 2026)

‹
October 2026
›
SunMonTueWedThuFriSat

Experiment period

‹
October 2026
›
SunMonTueWedThuFriSat

Questionnaire docs

Keys 1–9 choose; Enter advances. "No" on the first question skips the one about areas. Resume saved answers

Question 1 of 3

Have you ever run an experiment from a written protocol?

Label docs

Field docs

Used to sign in to your account.

Start with https://

Invalid address.

Textarea docs

Input Group docs

$
@vapulab.com

Toggle Button docs

Toggle Group docs

Tab enters the group at the pressed item; ← → ↑ ↓ move between items without changing what is pressed. Space or Enter toggles.

OTP docs

Type and focus moves forward on its own; backspace in an empty box moves back. Pasting the whole code fills every box at once.

Verification code
4-digit PIN

Toggle docs

★★★★★

Checkbox docs

Radio docs

Rating docs

★★★★★
★★★★★★★★★★
4 out of 5 — 128 reviews

Range docs

40
3

Navigation

Navbar docs

The menu button only appears on narrow screens — shrink the window to see it. It exists only because a DrawerID was given.

Menubar docs

Last action: none

Sidebar docs

Protocols

Collapse the bar with the button at its bottom: the choice is remembered in this browser. On narrow screens, the bar gives way to the Menu button.

Command docs

orCtrl+K

Last command: none

Pagination docs

Click a page: the URL changes and the marker follows.

page 3 of 20

Each one starts at an edge and moves on its own, without touching the others. Move through the pages with ← → to watch the range collapse and reopen.

short — fits whole, never collapses · page 1 of 5
long, starting at the beginning · page 1 of 20
long, starting at the end · page 20 of 20

Menu docs

Menu is navigation, not a widget: the links navigate and Tab moves through them, no arrows. The current item carries aria-current, the divider takes no focus, and the last entry is a button that fires an event instead of navigating.

Tabs docs

Move between tabs with the ← → arrows. Home and End go to the ends, and the disabled tab is skipped.

Breadcrumbs docs

Steps docs

  1. Account
  2. 2 Payment
  3. 3 Confirmation
  1. Repository cloned
  2. Migrations applied
  3. 3 Build
  4. 4 Deploy

Feedback

Skeleton docs

Loading docs

Loading Loading Loading
Loading Loading Loading

Progress docs

Alert docs

Toast docs

Empty docs

No projects yet

Projects hold your protocols and results. Create the first one to get started.

Layout & utilities

Divider docs

Above

Below

LeftRight

Aspect Ratio docs

16/9
1/1

Scroll Area docs

Clause 1: using the service means accepting these terms, which may change with prior notice.

Clause 2: using the service means accepting these terms, which may change with prior notice.

Clause 3: using the service means accepting these terms, which may change with prior notice.

Clause 4: using the service means accepting these terms, which may change with prior notice.

Clause 5: using the service means accepting these terms, which may change with prior notice.

Clause 6: using the service means accepting these terms, which may change with prior notice.

Clause 7: using the service means accepting these terms, which may change with prior notice.

Clause 8: using the service means accepting these terms, which may change with prior notice.

Clause 9: using the service means accepting these terms, which may change with prior notice.

Clause 10: using the service means accepting these terms, which may change with prior notice.

Clause 11: using the service means accepting these terms, which may change with prior notice.

Clause 12: using the service means accepting these terms, which may change with prior notice.

templhtmxalpinetailwindpostgreschromedpsqlcgooseaircloudflare

Resizable docs

Drag the divider, or Tab to it and use the arrows (Shift for 1% steps), Home and End. The first example's size is remembered in this browser.

Steps

1. Prepare samples · 2. Extract RNA · 3. PCR

Editor

Details of the selected step.

Chart

Amplification curve.

Log

Cycle 32: threshold reached.

Hero docs

Build in Go, without npm

chi, templ, Tailwind, HTMX and Alpine — with a design system of your own that you can reuse.

Indicator docs

9LS new

Join docs