Seed 07 · Components

Forms & web app

Inputs, selects, checkboxes, dropdowns, alerts, modals, avatars, tabs. The starter kit for any product UI built on the PocketSeed system.

Inputs

Text fields

Email required We never share your email.

Password

⌕ ⌘K

Amount

$ USD

Tell us what you're building

Field with error That doesn't look like a valid domain.

Disabled

Select

Native select with custom chevron

Plan

Region

Choice

Checkboxes, radios, switches

.ps-check-row + .ps-checkbox

Send me product updates Roughly one email per month, no fluff. Notify my team about new credentials

.ps-check-row + .ps-radio

Public Anyone with the link can view. Private Only invited collaborators.

.ps-switch

Auto-publish credentials when signed Email me when a viewer asks the AI a question

Dropdown

No-JS dropdown menu

Built on <details> + <summary>, no JavaScript required. For richer behavior (keyboard nav, click-outside-to-close), wire up your own.

Alerts

Banners

Heads up, your trial ends in 7 days

Add a payment method to keep your credentials live and shareable.

Credential signed

The 2026 Carbon Footprint credential is now live at pocketseed.io/c/cf-2026-acme.

Evidence expiring

Lab Results · Batch 042 expires on 30 Jun 2026. Renew to keep the credential verifiable.

Couldn't publish

Two evidence files failed to upload. Retry or remove them to continue.

Modal

Dialog

Render the markup conditionally and pop the overlay over your app. The card has header / body / footer slots.

Avatars

People & teams

AC AC AC AC

AC SM JR +4

Tabs

Tabbed navigation

Plain text by default. Add a Lucide icon when the label benefits from a visual cue at a glance — admin-style sections, settings, dense navigation. Skip them for short, obvious labels.

Without icons · text only

Tab panel content goes here.

With icons · same labels, easier to scan

Tab panel content goes here.

Table

Data table

.ps-table is designed to live inside a white surface, a .ps-card, a modal, an app pane, where the mono-uppercase header row reads as a column label rather than a heading. Header bg, hover, and selected states use the new neutral --ps-mute-* tokens so the table never picks up a cream patch that clashes with the host card.

Credential	Status	Signers	Issued
2026 Carbon Footprint	Verified	2	Mar 12 · 2026
Lab Results · Batch 118	Verified	1	Mar 02 · 2026
Scope 3 Supplier Audit	Pending	4	·