examples/with-storybook/stories/Configure.mdx
import { Meta } from "@storybook/blocks"; import Image from "next/image";
import Github from "./assets/github.svg"; import Discord from "./assets/discord.svg"; import Youtube from "./assets/youtube.svg"; import Tutorials from "./assets/tutorials.svg"; import Styling from "./assets/styling.png"; import Context from "./assets/context.png"; import Assets from "./assets/assets.png"; import Docs from "./assets/docs.png"; import Share from "./assets/share.png"; import FigmaPlugin from "./assets/figma-plugin.png"; import Testing from "./assets/testing.png"; import Accessibility from "./assets/accessibility.png"; import Theming from "./assets/theming.png"; import AddonLibrary from "./assets/addon-library.png";
export const RightArrow = () => ( <svg viewBox="0 0 14 14" width="8px" height="14px" style={{ marginLeft: "4px", display: "inline-block", shapeRendering: "inherit", verticalAlign: "middle", fill: "currentColor", "path fill": "currentColor", }}
<path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
<a
href="https://github.com/storybookjs/storybook"
target="_blank" rel="noreferrer"
>Star on GitHub<RightArrow /></a>
</div>
<div className="sb-section-item">
<Image
width={33}
height={32}
layout="fixed"
src={Discord}
alt="Discord logo"
className="sb-explore-image"
/>
<div>
Get support and chat with frontend developers.
<a
href="https://discord.gg/storybook"
target="_blank" rel="noreferrer"
>Join Discord server<RightArrow /></a>
</div>
</div>
<div className="sb-section-item">
<Image
width={32}
height={32}
layout="fixed"
src={Youtube}
alt="Youtube logo"
className="sb-explore-image"
/>
<div>
Watch tutorials, feature previews and interviews.
<a
href="https://www.youtube.com/@chromaticui"
target="_blank" rel="noreferrer"
>Watch on YouTube<RightArrow /></a>
</div>
</div>
<div className="sb-section-item">
<Image
width={33}
height={32}
layout="fixed"
src={Tutorials}
alt="A book"
className="sb-explore-image"
/>
<p>Follow guided walkthroughs on for key workflows.</p>
<a
href="https://storybook.js.org/tutorials/"
target="_blank" rel="noreferrer"
>Discover tutorials<RightArrow /></a>
</div>