Storyless

👉 LIVE DEMO

For when design system powerhouses like Storybook is just too much.

Storyless is a UI DevTool that lets you build and test components in isolation inside of your app.

Direct interoperability with your app and main build tools means hard-to-integrate features like authentication, fetching, state management, themes, etc. will just work when you need them.

[!CAUTION]
Storyless is currently in alpha and is not recommended for production use.

🚀 Getting Started

Install using your project's package manager:

npm i @storyless/react
yarn add @storyless/react
pnpm i @storyless/react
bun i @storyless/react
{the-new-thing} {add-package-command} @storyless/react

Then drop it in your app (we're using Next.js as an example here):

1import { Storyless } from "@storyless/react";
2
3function App({ Component, pageProps }: AppProps) {
4  return (
5    <>
6      <Component {...pageProps} />
7      <Storyless
8        components={{
9          Hello: <h1>Hello World!</h1>,
10        }}
11      />
12    </>
13  );
14}

🎭 Combinations

We've added a nifty <Combinations /> component to help you test your components with different props:

1import { Storyless, Combinations } from "@storyless/react";
2import { Button } from "./ButtonExample";
3
4function App({ Component, pageProps }: AppProps) {
5  return (
6    <>
7      <Component {...pageProps} />
8      <Storyless
9        components={{
10          Hello: <h1>Hello World!</h1>,
11          // 🗑️ Delete this Button component if copy-pasting
12          Button: (
13            <Combinations
14              component={Button}
15              propsToCombine={{
16                color: ["#57799F", "#43577E", "#313851", "#D4D195", "#A7C2D1"],
17                size: ["lg", "sm"],
18                square: [false, true],
19                disabled: [false, true],
20                children: ["Button"],
21              }}
22            />
23        }}
24      />
25    </>
26  );
27}

[!TIP]
Here's the <Combinations /> documentation:

---

Display all combinations of props for a component.

Main props:

• component - The component to display.
• propsToCombine - The props to display all combinations for.
• componentProps - Props to pass to all instances of the component.
• columns - Override the number of columns to display the combinations in.
• componentBackgroundColor - Override the background color of the combinations.

@example

1<AllCombinations
2  component={Button} // props => <Button {...props} />
3  propsToCombine={{
4    color: ["slate", "emerald", "sky", "rose"],
5    size: ["lg", "sm"],
6    square: [false, true],
7    disabled: [false, true],
8    children: ["Button"],
9  }}
10  backgroundColor="#13191f"
11  columns={2} // Auto-calculated by default
12/>

If you want to customize the preview window, you can replace the original Wrapper by passing a wrapper prop to your <Storyless /> component. Here's a style agnostic starter wrapper you can use:

1import { Storyless, Combinations } from "@storyless/react";
2import { Button } from "./ButtonExample";
3
4function Wrapper({
5  children,
6}: {
7  children: React.ReactNode;
8}) {
9  return (
10    <div
11      style={{
12        borderRadius: "0.5rem",
13        width: "100%",
14        height: "100%",
15        maxWidth: "100%",
16        display: "grid",
17        placeItems: "center",
18        backgroundColor: "rgba(239, 239, 239, 0.1)",
19        boxShadow: `
20          inset 0 1px 0px 0px rgba(255, 255, 255, 0.1),
21          inset 0 -2px 0px 0px rgba(0, 0, 0, 0.125),
22          0 1px 0 7px rgba(0, 0, 0, 0.1)
23        `,
24        backdropFilter: "blur(30px)",
25        padding: "1rem 2rem",
26        margin: 0,
27      }}
28    >
29      {children}
30    </div>
31  );
32}
33
34function App({ Component, pageProps }: AppProps) {
35  return (
36    <>
37      <Component {...pageProps} />
38      <Storyless
39        wrapper={Wrapper}
40        components={{
41          Hello: <h1>Hello World!</h1>,
42          // 🗑️ Delete this Button component if copy-pasting
43          Button: (
44            <Combinations
45              component={Button}
46              propsToCombine={{
47                color: ["#57799F", "#43577E", "#313851", "#D4D195", "#A7C2D1"],
48                size: ["lg", "sm"],
49                square: [false, true],
50                disabled: [false, true],
51                children: ["Button"],
52              }}
53            />
54        }}
55      />
56    </>
57  );
58}

That's it – now go nuts 🥜🐿️

And don't worry, Storyless is automatically removed from your production bundle.