Button

Three variants (primary, secondary, ghost) and three sizes. Accepts an href prop for link behavior or onClick for actions.

Variants
Sizes
As Link

Badge

Six variants matching the VAULT color system. Used for labels, tags, status indicators, and difficulty levels throughout the docs.

GreenBeginnervariant="green"
BlueReferencevariant="blue"
YellowBetavariant="yellow"
RedDeprecatedvariant="red"
PurpleAdvancedvariant="purple"
Muted~5 minvariant="muted"

Text

Four variants for consistent typography across the docs. Renders as p, span, or div.

body

The Vault SDK provides type-safe access to the inference API.

14px / #8B949E
caption

Last updated March 2025

12px / #484F58
label

Getting Started

11px mono / uppercase
codeVAULT_API_KEY13px mono / surface

Card

Feature cards with icon, title, description, and optional badge tag. Used in docs landing pages and component showcases.

Syntax Highlighting
Component

Code blocks with token-level highlighting for 10+ languages. Copy button included.

Callout Boxes
Component

Info, warning, tip, and danger callouts. Each with a distinct icon and color.

Step Guides
Component

Numbered step-by-step guides with a vertical connector line and code blocks inside.

Auth Pages
Auth

Login and signup pages with Zod validation, error states, and success screens.

Design Tokens
System

Full color palette and spacing system defined as CSS variables in globals.css.

Next.js 15 Ready
Stack

App Router, server components, TypeScript strict, Tailwind v4. Ready to ship.

CodeBlock

Syntax-highlighted code with a copy button. Uses lang or title in the header. Client component.

lib/vault.ts
import { VaultClient } from '@vault/sdk';

export const vault = new VaultClient({
  apiKey: process.env.VAULT_API_KEY!,
  workspace: process.env.VAULT_WORKSPACE ?? 'default',
  timeout: 30_000,
});
bash
$ npm install @vault/sdk --save

Callout

Four semantic variants for inline documentation notices. Renders with a colored left border and an icon.

Info. The Vault SDK requires zod ^3.22 as a peer dependency.
Warning. Never commit your VAULT_API_KEY to source control.
Tip. Use vault.infer() for one-shot completions and vault.stream() for streaming.
Danger. Calling vault.delete() is irreversible. All data will be permanently removed.

Color Tokens

All design tokens are defined in globals.css inside the @theme {} block. Swap any color in one place to retheme the entire site.

Base
#0D1117
Surface
#161B22
Elevated
#1C2128
Overlay
#21262D
Border
#30363D
Text
#E6EDF3
Text Sec
#8B949E
Muted
#484F58
Accent
#00D97E
Red
#FF7B72
Yellow
#E3B341
Blue
#79C0FF
Purple
#D2A8FF

System Pages

Error and 404 pages use the VAULT palette with a glowing code number and centered layout. Both are standalone pages without the docs shell.

404
Page not found
The system code glows with a soft green blur behind the number.