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. 


  




    
    
Playground
Components(github)
Options(github)
Template
Themes
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
Open on CodeSandboxOpen Sandbox
Open on CodeSandboxOpen Sandbox
Open browser consoleTests

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);
Open on CodeSandboxOpen Sandbox
Open on CodeSandboxOpen Sandbox
Nothing found
Stories
Resizable
export default function Example() {
  return (
  <div className="flex h-screen px-4">
    <div className="m-auto max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
      <div className="md:flex">
        <div className="md:shrink-0">
          <img
            className="h-48 w-full object-cover md:h-full md:w-48"
            src="https://images.unsplash.com/photo-1637734433731-621aca1c8cb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=404&q=80"
            alt="Modern building architecture"
          />
        </div>
        <div className="p-8">
          <div className="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
            Company retreats
          </div>
          <a
            href="#"
            className="block mt-1 text-lg leading-tight font-medium text-black hover:underline"
          >
            Incredible accommodation for your team
          </a>
          <p className="mt-2 text-slate-500">
            Looking to take your team away on a retreat to enjoy awesome food
            and take in some sunshine? We have a list of places to do just that.
          </p>

          <button className="mt-4 bg-indigo-500 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded" onClick={() => console.log("click")}>
            See more
          </button>
        </div>
      </div>
    </div>
  </div>
  );
  }
Basic Console
const helloWorld = "";

console.log("foo");
Open browser consoleTerminal
Basic
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Open on CodeSandboxOpen Sandbox
Open on CodeSandboxOpen Sandbox
File Content
export default function App() {
  return <h1>Hello world</h1>
}

Open on CodeSandboxOpen Sandbox
Open on CodeSandboxOpen Sandbox