Collapsible sidebar with grouped links, badges, and an active state that follows the page you are on.

A press Cmd or Ctrl plus K search box that jumps to any page or doc without touching the mouse.

Sticky header with the search trigger, a notifications menu, the account menu, and space for page actions.

Area, bar, line, stacked bar, donut, and radial charts. Each one takes a single data prop.

A pop-up form with inline validation and a success message, the pattern for any add or edit flow.

Profile photo, name, username, email, and bio, validated on the client and ready to wire to your API.

A primary button with a shimmering rim that draws the eye to your one call to action.

The site-wide call-to-action button, accent-filled, used for every get-started moment.

Primary and ghost buttons with an optional arrow, the button every other CTA is built from.

Starts a Stripe checkout for any price and redirects the buyer, no account required first.

Shows Log in when signed out and the account name when signed in, works before Supabase is configured.

Account menu for signed-in users: open billing or log out in two clicks.

The numbered, uppercase section label used above every heading on the site.

A hairline chip for a stat or a label, no fill, just a clean border.

A circled step number for numbered sequences and how-it-works sections.

Counts up to a number as it scrolls into view, built for stat sections.

A tiled grid background you can fade toward the edges, for hero sections that need texture.

A card with a spotlight that follows your cursor and a glowing border.

A light that travels around a card's edge to draw attention to one element.

A slow shine that sweeps across text, used for announcement pills and new badges.

Content blurs and slides into place as it scrolls into view.

One article preview card: cover image, category, title, and read time.

A small colored label for an article's category, shown on cards and article pages.

Styled article body: headings, lists, quotes, and code, all matched to the site's tokens.

A quiet inline subscribe box at the end of an article, no popup.

A thin bar at the top of the screen that fills in as the reader scrolls.

Adds a copy button to every code block on the page automatically.

A flat, hairline container with no drop shadow, the base surface for content blocks.

A labelled text input with an accent focus ring, for any form.

A centered dialog with a backdrop and focus trap, for confirmations and short forms.

A horizontal bar chart for step-by-step conversion funnels.

A hairline table with column headers, for any list of records.

A read-only field with a one-click copy button, for API keys and commands.

A code snippet with a copy button and an optional label bar.

The light and dark mode switch used in the header.