Get Started with Storybook

🌱 This post is in the growth phase. It may still be useful as it grows up.

It’s never been easier to get started with component-driven development in Storybook. Let’s explore three ways to start building UIs in seconds with Storybook.

1. storybook.new

I like spiking out component concepts in an online sandbox first. Thanks to StackBlitz, I can do this in Storybook.

Visit storybook.new.
Select your library, builder, and language.
- I like React, Vite, and TypeScript.
And start the component driven development process.

Alt text

This is the best place to go thru our library of existing tutorials. And explore new features.

Of course, there are options if you prefer to explore Storybook using your own locol environment too…

Did you know that you can use Storybook in the cloud?

SECTION

This is a great way to spike out a component design using component-driven development patterns. Or a just a good place to explore new feautures as we release them.

Follow along for more UI development tips and tricks like this.

2. npx storybook sandbox

To spin up a new Storybook — using your favorite framework — use the storybook sandbox command.

(In a terminal), run npx storybook sandbox.
Select a UI library, builder, and framework combo.
cd into the directory you’ve created.
kick it off with the yarn storybook command.
and visit port localhost:6006.

This is how the Storybook contributors and maintainers test and develop framework integrations.

Have you ever wanted to give Storybook a try but aren’t ready to install it into your app just yet?

Not a problem, we have a Storybook command for that.

SECTION

Storybook Sandbox is a great way to kick the tires on Storybook, start work on a custom integration, and even reproduce bugs and feature requests.

Follow along for more UI development tips and tricks like this.

3. npx storybook init

When it’s time to go primetime and integrate Storybook into your stack, we have a command for that too.

In the root of JavaScript project, run npx storybook init.
init automatically configures Storybook for your project.

Setting up Storybook inside of an existing project couldn’t be easier.

SECTION

We have framework support for major frameworks like Next.js, Angular, SvelteKit, Vue, and more. And we’re adding more all the time.

What framework would you like to see supported?

Follow along for more UI development tips and tricks like this.

Outcome

Now you know three ways to explore component-driven development in Storybook. Whether it be to spike out a quick component, or to build out a published component library.