Track conversion
Follow visits through signup and activation.
Visits → Signups → Activations
Component library
Real components, shared styles. These examples use the same implementations as the site and documentation.
The UI library owns appearance and structure. Content comes from props; the examples and site adapters own event handlers, navigation and state.
Use Tab to inspect focus, arrow keys to switch tabs, and the copy controls to check feedback. Resize to compare phone and desktop layouts.
Example links and actions stay on this page. Tabs, disclosures and copy controls remain interactive.
Foundations
--paper--surface--surface-muted--ink--muted--line--accent--darkGeist for interface and reading text. Geist Mono for code. Colors, page boundaries and surface tokens live in the root stylesheet.
Actions and links
Primary actions use a solid fill. Secondary actions keep a transparent fill at rest. Header controls have a 44 px hit area around a 36 px visible capsule.
Inline links stay in the reading flow: code blocks and documentation. The underline, hover and focus treatment come from TextLink.
Card actions fill the content width at every viewport size. Centered 17 px semibold text, a 50 px minimum height and the shared 8 px panel radius keep the label proportionate to the surface. The containing card supplies the outer inset. Long labels wrap and increase the height.
Closing invitations
A short title and caller-supplied actions share one brand surface. The site adapter supplies signup and booking; these examples stay in the gallery.
Explore the
documentation
Header navigation
The site and documentation logos share inline artwork and the page’s Geist font. Their dimensions and lettering stay consistent across headers, phone menus and the footer.
Site links use a faint capsule on hover. Section links use muted text, primary ink on hover, and a pale-gray capsule for the current section. Both share typography, spacing and hit areas.
The surrounding site header uses HeaderBar, HeaderRow and HeaderBrand. Fixed positioning, matching flow space, frosted background and brand alignment share one implementation. The caller chooses the divider mode and responsive visibility.
Icon buttons share 44 px targets and 18 px icons. MenuDialog and MenuHeader supply the full-screen surface and scroll divider; the caller owns dialog state, focus, scroll tracking and content.
Tabs
Default text tabs, equal-width language tabs, and responsive conversation tabs share keyboard behavior. Switching tabs preserves panel state.
SELECT 1 AS ready;{"ready": 1}const ready = await client.query("SELECT 1 AS ready");ready, err := client.Query(ctx, "SELECT 1 AS ready")let ready = client.query("SELECT 1 AS ready").await?;Code and copy
Hover or focus reveals copy on desktop; touch devices keep it visible. Successful copies announce feedback. If clipboard access fails, the source remains selectable with visible recovery feedback.
Inline source uses the same neutral treatment: SELECT 1.
Read https://www.scopedb.io/skill.md and help me get started.connect.js
const rows = await client.query("SELECT 1 AS ready");
console.log(rows);SELECT timestamp, event, service, region, status, request_id FROM events WHERE service = 'checkout' ORDER BY timestamp DESC LIMIT 100;SELECT 1 AS ready;The same code surface also accepts a different action. This example owns its wrapping toggle; the surface has no clipboard behavior.
SELECT timestamp, event, service, region, status, request_id FROM events ORDER BY timestamp DESC;Page layouts
Agent and Pricing share the page container, with 72 px above the content on desktop and 40 px on phones. Page titles use 48 / 32 px, section titles 28 / 24 px and item titles 24 / 20 px. Body text stays at 16 px with 1.7 line height. Equal columns stack below 1024 px.
Explore your workspace
Choose a starting point and follow the connection guide.
Connection options
Bring an existing project
Use the same layout and type roles with different content. The page supplies its own actions and destinations.
Setup flows
Numbered steps compose PageHeader, ContentHeading and SplitSection. Steps and answers share one desktop text column. On smaller screens, numbers stay beside the headings while code and instructions use the full reading width. Content and actions come from the caller.
Connect your workspace
Follow these two steps to verify a connection.
Copy the command.
SELECT 1 AS ready;Verify the result.
Run the command in your own environment and check the returned value.
Connection details
Where do I run this?
Use the environment configured for your workspace.
Feature cards
Titles, descriptions and figures are content slots. Different text does not create a different component.
Find slow requests
Trace the wait to logs and dependencies.
Request → Service → Dependency
Callouts
One neutral surface across articles and documentation. Meaning comes from the icon, an optional authored title, and the text.
Disclosures
Static and expandable FAQ entries share 16 px text and 1.7 line height. Questions use 500 weight and primary ink; answers use muted ink. Compact reading controls use 14 px text and 20 px line height.
Which agents can I use?
Use an agent with web and terminal access. Read the setup guide.
A longer question that wraps on narrow screens without displacing the chevron
The label and arrow retain their alignment, including when the label wraps.
On this page
Tables
Quiet rules and medium-weight headings distinguish columns. Overflow stays inside a keyboard-accessible region.
| Type | Description |
|---|---|
string | UTF-8 encoded string |
timestamp | Epoch nanoseconds |
| Column | Type | Meaning |
|---|---|---|
request_id | string | Identifier used to join events across services. |