TypeScript

Ladle is written in TypeScript and provides first-class support for TypeScript.

tsconfig.json

Ladle uses jsx-runtime so there is not need to import React at the top of each module. However, you need to let TypeScript know:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src", ".ladle"]
}

Exported Types

You can import many types from @ladle/react to improve your development experience:

import type { StoryDefault, Story } from "@ladle/react";

type Props = { label: string };

export default {
  title: "New title",
} satisfies StoryDefault<Props>;

const Card: Story<Props> = ({ label }) => <p>Label: {label}</p>;
Card.args = {
  label: "Hello",
};