> ## Documentation Index
> Fetch the complete documentation index at: https://docs.typebot.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Block

After using the [CLI](./cli) to create your new block. The `index.ts` file contains the block definition. It should look like:

<Frame>
  <img src="https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/block-name-logo-match.png?fit=max&auto=format&n=rHkgfCATWjP6ntzz&q=85&s=81a8abbcb09b7f108d64f80c20a83335" alt="Block name and logo match" width="1280" height="720" data-path="images/contribute/block-name-logo-match.png" />
</Frame>

## Props

<ResponseField name="id" type="string" required>
  The block ID. It should be unique all the other blocks.
</ResponseField>

<ResponseField name="name" type="string" required>
  A concise name for the block. Should be short enough to fit into a small block
  card.
</ResponseField>

<ResponseField name="LightLogo" type="(props: React.SVGProps<SVGSVGElement>) => React.JSX.Element" required />

<ResponseField name="DarkLogo" type="(props: React.SVGProps<SVGSVGElement>) => React.JSX.Element">
  Logo used on the dark mode.
</ResponseField>

<ResponseField name="fullName" type="string">
  The full name that will be displayed as a tooltip when the mouse hovers the
  block card.
</ResponseField>

<ResponseField name="tags" type="string[]">
  List of strings describing the block. Used for block searching.
</ResponseField>

<ResponseField name="auth" type="Auth">
  See <a href="./auth">Auth</a> for more information.
</ResponseField>

<ResponseField name="actions" type="Action[]">
  A list of all the possible actions that this block provides. See{' '}
  <a href="./action">Action</a> for more information
</ResponseField>

<ResponseField name="docsUrl" type="string">
  The dedicated documentation URL. (i.e.
  `https://docs.typebot.io/editor/blocks/integrations/openai`)
</ResponseField>

<ResponseField name="options" type="z.ZodObject<any>">
  Provide it if all the block actions share the same properties. See{' '}
  <a href="./options">Options</a> for more information. In the block settings it
  will then be displayed between the auth and the actions:

  {' '}

  <Frame style={{ maxWidth: '600px' }}>
    <img src="https://mintcdn.com/typebot/rHkgfCATWjP6ntzz/images/contribute/base-options.png?fit=max&auto=format&n=rHkgfCATWjP6ntzz&q=85&s=d5f56b01414d71a2fb26f29562e2b32e" alt="Block options" width="1177" height="750" data-path="images/contribute/base-options.png" />
  </Frame>
</ResponseField>

<ResponseField name="fetchers" type="Fetcher[]">
  A list of fetchers used in the provided <code>options</code>. See{' '}
  <a href="./fetcher">Fetcher</a> for more information.
</ResponseField>
