JTBDOS uses Storybook as a frontend workshop for the design system. It allows you to interact with the components in the design system, and see how they behave in different states.
By default, Storybook is configured with every component from shadcn/ui, and allows you to interact with them. It is also configured with the relevant fonts and higher-order components to ensure a consistent experience between your application and Storybook.
Storybook will start automatically when you run pnpm dev. You can also start it independently with pnpm dev --filter storybook. The preview will be available at localhost:6006.
You can add your own components to the workshop by adding them to the apps/storybook/stories directory. Each component should have its own .stories.tsx file.
{"docsConfig":{"$schema":"https://mintlify.com/docs.json","theme":"mint","name":"jtbdos docs","colors":{"primary":"#f35815","light":"#f35815","dark":"#f35815"},"favicon":"/images/icon.png","styling":{"eyebrows":null,"codeblocks":"system"},"logo":{"light":"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/images/jtbdos-logo-full-with-thrv.svg","dark":"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/images/jtbdos-logo-full-with-thrv.svg"},"background":{"decoration":"windows"},"navbar":{"primary":{"type":"github","href":"https://github.com/thrv/jtbdos4"}},"search":{"prompt":"Search or ask..."},"footer":{"socials":{"x":"https://x.com/haydenbleasel","github":"https://github.com/haydenbleasel/next-forge","linkedin":"https://www.linkedin.com/in/haydenbleasel"}},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"thrv-c7d92728","hasAudioNarration":false,"actualSubdomain":"thrv-c7d92728","customDomains":["docs.jtbdos.com"],"gitSource":{"type":"github","owner":"thrv","repo":"jtbdos4","deployBranch":"main","contentDirectory":"apps/jtbdos-docs","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6a21e6b403d4026a3ef7729d","collectionId":"e31b713b-bfcb-4d49-8138-d29cda6a8c61","schemaVersion":"v2"},"entitlements":{},"buildId":"6a21e6b403d4026a3ef7729d:success","clientVersion":"0.0.4044","searchFilterCounts":[{"language":"default","tag":"Packages","count":41},{"language":"default","tag":"Migrations","count":15},{"language":"default","tag":"Getting Started","count":10},{"language":"default","tag":"Design System","count":9},{"language":"default","tag":"Addons","count":8},{"language":"default","tag":"Libraries","count":7},{"language":"default","tag":"Apps","count":7},{"language":"default","tag":"Database","count":6},{"language":"default","tag":"Introduction","count":5},{"language":"default","tag":"Security","count":5}]},"assistantConfig":{},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"apps/storybook","slug":"/apps/storybook","pageMetadata":{"title":"Storybook","description":"Frontend workshop for the design system","href":"/apps/storybook"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Frontend workshop for the design system\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,p:`p`,..._provideComponents(),...props.components},{Frame,Heading,OptimizedImage,Tip}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsx(Frame,{children:_jsx(OptimizedImage,{src:`https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/images/storybook.png`,alt:`A preview of storybook`})}),`\n`,_jsxs(Tip,{children:[`The `,_jsx(_components.code,{children:`storybook`}),` application runs on port 6006.`]}),`\n`,_jsxs(_components.p,{children:[`JTBDOS uses `,_jsx(_components.a,{href:`https://storybook.js.org/`,children:`Storybook`}),` as a frontend workshop for the design system. It allows you to interact with the components in the design system, and see how they behave in different states.`]}),`\n`,_jsx(Heading,{level:`2`,id:`configuration`,children:`Configuration`}),`\n`,_jsxs(_components.p,{children:[`By default, Storybook is configured with every component from `,_jsx(_components.a,{href:`https://ui.shadcn.com/`,children:`shadcn/ui`}),`, and allows you to interact with them. It is also configured with the relevant fonts and higher-order components to ensure a consistent experience between your application and Storybook.`]}),`\n`,_jsx(Heading,{level:`2`,id:`running-the-workshop`,children:`Running the workshop`}),`\n`,_jsxs(_components.p,{children:[`Storybook will start automatically when you run `,_jsx(_components.code,{children:`pnpm dev`}),`. You can also start it independently with `,_jsx(_components.code,{children:`pnpm dev --filter storybook`}),`. The preview will be available at `,_jsx(_components.a,{href:`http://localhost:6006`,children:`localhost:6006`}),`.`]}),`\n`,_jsx(Heading,{level:`2`,id:`adding-stories`,children:`Adding stories`}),`\n`,_jsxs(_components.p,{children:[`You can add your own components to the workshop by adding them to the `,_jsx(_components.code,{children:`apps/storybook/stories`}),` directory. Each component should have its own `,_jsx(_components.code,{children:`.stories.tsx`}),` file.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"codeStyling":"system","config":{},"pageMetadata":{"title":"Storybook","description":"Frontend workshop for the design system","href":"/apps/storybook"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Configuration","slug":"configuration","depth":2,"children":[]},{"title":"Running the workshop","slug":"running-the-workshop","depth":2,"children":[]},{"title":"Adding stories","slug":"adding-stories","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"thrv-c7d92728","siteName":"jtbdos docs","title":"Storybook - jtbdos docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"originalFileLocation":"apps/storybook.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Frontend workshop for the design system\">\u003cmeta data-mint-head name=\"application-name\" content=\"jtbdos docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/_generated/favicon/apple-touch-icon.png?v=3\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/_generated/favicon/favicon-32x32.png?v=3\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/_generated/favicon/favicon-16x16.png?v=3\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/_generated/favicon/favicon.ico?v=3\">\u003cmeta data-mint-head property=\"og:title\" content=\"Storybook - jtbdos docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Frontend workshop for the design system\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"jtbdos docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.jtbdos.com/apps/storybook\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://thrv-c7d92728.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Storybook\u0026amp;description=Frontend+workshop+for+the+design+system\u0026amp;theme=87e5d5443d5dde3c753ee24e\u0026amp;signature=22e66258a354daf93ad7d9e02f8457c7ae9e183bd4da623c8bd983be18e654ac\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Storybook - jtbdos docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Frontend workshop for the design system\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://thrv-c7d92728.mintlify.app/_mintlify/api/og/v2?division=Documentation\u0026amp;title=Storybook\u0026amp;description=Frontend+workshop+for+the+design+system\u0026amp;theme=87e5d5443d5dde3c753ee24e\u0026amp;signature=22e66258a354daf93ad7d9e02f8457c7ae9e183bd4da623c8bd983be18e654ac\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/_generated/favicon/browserconfig.xml?v=3\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"jtbdos docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#f35815\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.jtbdos.com/apps/storybook\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/apps/storybook.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.jtbdos.com/#organization\",\"name\":\"jtbdos docs\",\"url\":\"https://docs.jtbdos.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintlify.s3.us-west-1.amazonaws.com/thrv-c7d92728/images/jtbdos-logo-full-with-thrv.svg\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.jtbdos.com#website\",\"name\":\"jtbdos docs\",\"url\":\"https://docs.jtbdos.com\",\"publisher\":{\"@id\":\"https://docs.jtbdos.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.jtbdos.com/apps/storybook#webpage\",\"url\":\"https://docs.jtbdos.com/apps/storybook\",\"name\":\"Storybook\",\"description\":\"Frontend workshop for the design system\",\"isPartOf\":{\"@id\":\"https://docs.jtbdos.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.jtbdos.com/apps/storybook#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.jtbdos.com/apps/storybook#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\",\"item\":\"https://docs.jtbdos.com/apps/api\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Storybook\",\"item\":\"https://docs.jtbdos.com/apps/storybook\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.jtbdos.com/apps/storybook#article\",\"headline\":\"Storybook\",\"name\":\"Storybook\",\"description\":\"Frontend workshop for the design system\",\"url\":\"https://docs.jtbdos.com/apps/storybook\",\"mainEntityOfPage\":{\"@id\":\"https://docs.jtbdos.com/apps/storybook#webpage\"},\"publisher\":{\"@id\":\"https://docs.jtbdos.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.jtbdos.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"jtbdos docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"jtbdos docs","nav":{"global":null,"tabs":[{"tab":"Getting Started","pages":[{"title":"Getting Started","href":"/overview"}]},{"tab":"Apps","groups":[{"group":"","pages":[{"title":"API","href":"/apps/api"},{"title":"App","href":"/apps/app"},{"title":"Documentation","href":"/apps/docs"},{"title":"Email","description":"How email templates work in JTBDOS","href":"/apps/email"},{"title":"Storybook","href":"/apps/storybook"},{"title":"Studio","description":"Visualize and edit your database in a UI.","href":"/apps/studio"},{"title":"Web","href":"/apps/web"}]}]},{"tab":"Packages","pages":[{"title":"Packages","href":"/packages/ai"}]},{"tab":"Recipes","pages":[{"title":"Recipes","href":"/recipes/ai-chatbot"}]},{"tab":"Migrations","pages":[{"title":"Migrations","href":"/migrations/authentication/authjs"}]},{"tab":"Addons","pages":[{"title":"Addons","href":"/addons/friendlier-words"}]}]},"basePath":"","title":"Storybook - jtbdos docs","buildId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","deploymentId":"dpl_DeHjVRGfFnhYQwHnfC2pjeXXv8h9","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-DXXFP6nH.js","DynamicMarkdown-B54_zNBF.js","zoom-image-lightbox-BG6oD64b.js","lightbox-handle-r17bVUz3.js"]}
