22 / Help & Docs · 12

Code playground

Side-by-side editor + result preview, with an Open in StackBlitz CTA. Editor pane uses the existing code-block primitive.

Production answer

Code playground is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Code playground states
Generative search brief

Code playground: Side-by-side editor + result preview, with an Open in StackBlitz CTA. Editor pane uses the existing code-block primitive.

Use case

Drop into a docs article when a reader benefits from seeing the code and its output together. The preview is cosmetic — pass real rendered output via props.

Live playground

Embedding the quote builder

Wire the quote builder into a custom workshop dashboard with a customer and vehicle ID.

Open in StackBlitz
Source
TSXCatbackQuote.tsx
import { QuoteBuilder } from "@oak/quote" export function CatbackQuote({ customerId, vehicleId }: Props) {  return (    <QuoteBuilder      customer={customerId}      vehicle={vehicleId}      preset="custom-catback"      onSigned={(quote) => bookJob(quote.id)}    />  )}
Preview
Quote builder · v2Custom catback · 2017 VFIIMF-14816 universal · 2.5″ inlet · 31% margin