Lab Commands
Enter The Lab

Page Kit Lab — active frontend experiment

Lab online

The frontend workbench

Experiment with components. Build complete pages.

Discover, customize, test, and download production-ready HTML, CSS, and JavaScript components from one visual frontend laboratory.

Enter the Component Lab Browse Components
150 implemented150 validated8 active categories
EXPERIMENT PKL-001768 px
Responsive test passedHTML + CSS + JS

Small building blocks

Pick one precise piece.

Start with a button, menu, control, or chart instead of importing a whole page section.

View all components

Recently tested

Fresh from The Lab.

Open a live component, inspect its source, and change the formula before you copy or download it.

Stable

Primary action button

A focused primary button with an icon slot, compact sizing, and clear interaction states.

Open in Lab
Stable

Compact top app bar

A narrow application header with brand, navigation links, status, and one action.

Open in Lab
Stable

Compact sidebar menu

A slim dashboard navigation rail with section labels, active state, and item counts.

Open in Lab
Stable

Sparkline stat card

A small metric card with a labeled trend and an accessible inline sparkline.

Open in Lab
Stable

Mini bar chart

A compact six-column comparison chart with readable values and no charting dependency.

Open in Lab
Stable

Donut progress card

A compact circular progress graphic paired with explicit completion details.

Open in Lab

Live customization

Adjust the formula. Keep the clean files.

The Lab Inspector writes visible CSS custom properties, preserves an undo history, checks text contrast, and includes the customized values in the ZIP.

  • App and component themes stay separate
  • Color, radius, spacing, and effects update immediately
  • Exported files open without a framework
Test the Lab Inspector
--cmp-primary: #4f5fe6;
--cmp-radius: 18px;
Live component

One small API for the visual system.

Change two values and watch the component react without touching its structure.

Ready-made pages

Start from a complete page formula.

Templates compose the same catalog components, so every section remains replaceable and editable.

Browse templates

Generator Lab

Measure useful CSS values visually.

Build color pairs, gradients, shadows, radius scales, layouts, type scales, and metadata.

Open generators

Lab notebook

Practical frontend guides.

01 / 9 minSemantic HTML page structure: a practical frontend blueprint

Build a clear HTML document outline with landmarks, headings, navigation, and content regions that work for people and search engines.

02 / 8 minButton or link? Choose the correct HTML control

Learn when an interface action needs a button, when navigation needs a link, and how the choice affects keyboards, semantics, and UX.

03 / 8 minDesign accessible focus states that look intentional

Create visible, attractive keyboard focus styles with focus-visible, reliable contrast, offset rings, and component-level testing.

Build the page you meant to ship.

Start with a tested component, change the formula, then mix it into a complete page.

Browse the component labOpen Page Lab