Single quickstart step — number chip, language tag, body, code sample, and a mark-done toggle.
Quickstart step card is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.
Quickstart step card: Single quickstart step — number chip, language tag, body, code sample, and a mark-done toggle.
Create a Mufflermen client using your workshop API key. The key scopes the client to your bays — keep it on the server, never ship it to the browser.
import { Mufflermen } from "@mufflermen/sdk" const muff = new Mufflermen({ apiKey: process.env.MUFFLERMEN_API_KEY,})Pass the vehicle, parts, and bay — the SDK resolves availability against the bay-availability stream and returns a quote with line items, GST, and an expiry timestamp.
const quote = await muff.quotes.create({ vehicleId: "veh_2026_ford_ranger_xl", partIds: ["part_extractor_xforce_4cyl"], bayId: "bay_oak_flats_03",})The card is a self-contained <article> labelled by its heading. Mark-done state is uncontrolled and tracked locally — when toggled the chip rotates to --primitive-green and the toggle becomes a filled pill with aria-pressed reflecting state.