fbredius/storybook

import { Story, Preview, Meta } from '@storybook/addon-docs';
import ButtonView from './views/ButtonView.svelte';

# Storybook Docs for Svelte

Storybook supports every major view layer:
React, Vue, Angular, Ember, React Native, etc.

Storybook Docs does too.

<Story id="welcome--welcome" height="400px" />

Hallelujah! Svelte is working out of the box without modification.
How you like them apples?!

Just like in React, we first declare our component.

<Meta title="Addon/Docs" />

## CSF stories

Here's how we Svelte stories in pure CSF:

```js
export const rounded = () => ({
  Component: ButtonView,
  props: {
    rounded: true,
    text: 'Rounded text',
  },
});

export const square = () => ({
  Component: ButtonView,
  props: {
    rounded: false,
    text: 'Squared text',
  },
});
```

## MDX stories

Amd here's how `rounded` looks in MDX:

<Story name="rounded">
  {{
    Component: ButtonView,
    props: {
      rounded: true,
      text: 'Rounded text',
    },
  }}
</Story>

And `square`:

<Story name="square">
  {{
    Component: ButtonView,
    props: {
      rounded: false,
      text: 'Squared text',
    },
  }}
</Story>

## More info

For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/addons/docs).

We want your feedback to help make this more useful.

Follow us on Twitter for more short demos & project updates! ❤️📈🛠