Component gallery

Shared list primitives against inline fixtures. Dev-only.

SearchInput — debounced (chat history style)

Debounced value:

SearchInput — explicit button (agents style)

Submitted value:

FilterBar

{}

SegmentedTabs — md (list pages)

CategoryChips

ViewToggle — persisted per surface

Mode: grid

CopyButton

npx shadcn add card

PageHeader

Chat History

ResourceList — notebooks (no search row, filled action)

Free until Aug 12Content Optimization

SEO 101

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
Category

SEO Warning

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
PremiumContent Optimization

How do you learn SEO?

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
Category

SEO 404

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
PremiumContent Optimization

SEO In 2026

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth

ResourceList — agent library (search row, outlined action)

GPT TitleCategoryOverall
System Prompts4.8/5Launch
Research4.7/5Launch
Research4.6/5Launch
Productivity4.4/5Launch
Analysis4.3/5Launch
Education4.0/5Launch

ResourceList — grouped sections (notebooks Collection tab)

Featured Collection

Standard notes inside this collection are free to use, doesn't consume note credits

Free until Aug 12Content Optimization

SEO 101

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
Category

SEO Warning

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth

Other Collection

PremiumContent Optimization

How do you learn SEO?

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
Category

SEO 404

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth
PremiumContent Optimization

SEO In 2026

Lorem ipsum dolor sit amet consectetur. Neque ac eget.

Steve Toth

ResourceList — loading, empty, and error

Nothing here yet

Items you create will show up here.

Markdown (S7) — notes and prompts

Note title

Some bold text, some italic, a bit of inline code, and a link to the docs.

A list

  • First item
  • Second item with code
  • Third item
  1. Ordered one
  2. Ordered two

A blockquote, for pull-quotes in a note.

ColumnMeaning
searchTitle match, ILIKE
page1-indexed
const keys = noteKeys.list({ search: "seo" });

Trailing paragraph after a rule.

ShareDialog (S4) — minted, public, disabled

ExportMenu (S5) — pdf is a backend stub

ConfirmDialog (S6) — destructive pattern

Skeletons

Empty and error states (F7)

Nothing here yet

Items you create will show up here.