These components ship with SVOCS — import them from `$lib/components` in any `.svx` file. ## Callout Use `.svx` instead of `.md` for any page that needs live components. Frontmatter and sidecar `.meta.json` both work on `.svx` files too. Component imports only work in `.svx` — plain `.md` files can't have a script block. Don't nest a `Callout` inside another `Callout` — styling assumes one level. Import path: `$lib/components/Callout.svelte`, added at the top of the `.svx` file's script block alongside your other imports. ## Tabs ```sh bun install bun run dev ``` ```sh pnpm install pnpm dev ``` ```sh deno task dev ``` ## Steps ### Add a markdown file Create `content/example.md` with frontmatter or a sidecar `.meta.json`. ### Register it in the sidebar Folders pick up ordering automatically from each page's `order` field — no extra step for a flat page. ### Preview it Run `bun run dev` and visit `/docs/example`. ## Cards Bootstrap your first SVOCS site. Ship to Cloudflare Pages or GitHub Pages. Source and issue tracker. ## Collapse It compiles Markdown straight to Svelte components, so `.svx` files can mix prose with live, interactive components — no separate MDX runtime required. ## FileTree ## Bleed Break wide content — a table, a diagram, a screenshot — out of the prose column's side padding: ```sh filename="all-runtimes.sh" bun install && bun run dev pnpm install && pnpm dev deno task install && deno task dev ``` _(runs across all three package managers)_ That's the full component set.