Storybook popularized the concept of story files, which are used to capture the rendered states of a UI component. In Vitebook, story files are simply pages. The decision of how to display certain pages and any addons is left to theme builders. However, the default theme is built with developers wanting to build and design UI components in mind, so you'll find the notion of "stories" baked right in.

If you'd like to follow the convention of using .story files, simply include it in your Vitebook configuration file...

App File

An app file should be present inside your Vitebook config folder, which can be used for application level configuration such as setting context providers, or adding plugins in Vue.

Writing a Story

A story file is no different to creating a component in your favourite framework. We recommend creating a companion .story file next to each component in your app. For example, a Button component will contain an adjacent Button.story.{svelte,tsx,vue} file.


Story variants are a way to showcase your component in different states. This is supported by the default theme by showing a dropdown in the component preview pane to select the desired variant.