No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

DrupalX React Design System

This Storybook contains all the UI components for our project, built with shadcn/ui and integrated seamlessly with Drupal 10/11. Each component has its own story showcasing its different states and variations. Below, you'll find guidance on how to navigate and use this Storybook effectively.

Getting Started

To begin, select a component from the sidebar on the left. You can then view the different stories associated with that component, each representing a unique state or variation. Our components leverage the power and flexibility of shadcn/ui, ensuring responsive and accessible designs.

Usage

Each story is interactive and can be modified using the knobs available in the addons panel. These knobs allow you to change the properties of the components and see how they react in real-time.

Stories under the "Editorial" section are available as components for authors in Drupal.