packages/dashboard/.storybook/stories/Intro.mdx
import { Meta } from '@storybook/addon-docs/blocks';
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" />
This is a visual reference of the available components you can use while building custom extensions to the
Vendure Dashboard.
</div>
Before you can use these components, you'll need to make sure your Vendure application is set up correctly:
</div>
<div className="sb-section">
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Installing Vendure</h4>
<p className="sb-section-item-paragraph">If you've not yet set up Vendure, you can get started in just a few minutes
using the `npx @vendure/create my-shop` command.</p>
<a
href="https://docs.vendure.io/guides/getting-started/installation/"
target="_blank"
>Vendure Getting Started Guide<RightArrow /></a>
</div>
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Installing the Dashboard</h4>
<p className="sb-section-item-paragraph">Make sure you have installed and configured the
`@vendure/dashboard` package</p>
<a
href="https://docs.vendure.io/guides/extending-the-dashboard/getting-started/"
target="_blank"
>Dashboard Installation guide<RightArrow /></a>
</div>
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Creating a Plugin</h4>
<p className="sb-section-item-paragraph">Dashboard extensions are housed in Vendure plugins. Find out how
to create a plugin in just a few commands</p>
<a
href="https://docs.vendure.io/guides/extending-the-dashboard/extending-overview/"
target="_blank"
>Plugin setup guide<RightArrow /></a>
</div>
</div>
Browse components by category to find what you need for your extension.
</div>
<div className="sb-section">
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Layout</h4>
<p className="sb-section-item-paragraph">Components that you use to lay out your page.</p>
</div>
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Framework</h4>
<p className="sb-section-item-paragraph">More complex components that often interact with
the app context, make data calls, or combine several lower-level components.</p>
</div>
<div className="sb-section-item">
<h4 className="sb-section-item-heading">Form Inputs</h4>
<p className="sb-section-item-paragraph">Components used to interact with data via forms.</p>
</div>
<div className="sb-section-item">
<h4 className="sb-section-item-heading">UI</h4>
<p className="sb-section-item-paragraph">Low-level components from [shadcn/ui](https://ui.shadcn.com/docs).</p>
</div>
</div>
Additional resources for building Vendure Dashboard extensions.
</div>
<div className="sb-section">
<div className="sb-section-item">
<div>
<h4 className="sb-section-item-heading">Vendure Docs</h4>
<p>Comprehensive guides and references on every aspect of building with Vendure.</p>
<a
href="https://docs.vendure.io/"
target="_blank"
>View documentation<RightArrow /></a>
</div>
</div>
<div className="sb-section-item">
<div>
<h4 className="sb-section-item-heading">Vendure Discord</h4>
<p>Get help from the community, ask questions, and share your custom extensions.</p>
<a
href="https://vendure.io/community"
target="_blank"
>Join the community<RightArrow /></a>
</div>
</div>
<div className="sb-section-item">
<div>
<h4 className="sb-section-item-heading">GitHub Repository</h4>
<p>Explore the source code, report issues, and contribute to Vendure Dashboard development.</p>
<a
href="https://github.com/vendurehq/vendure"
target="_blank"
>View on GitHub<RightArrow /></a>
</div>
</div>
</div>