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

> ## Agent Instructions
> The docs are served at https://docs.devias.io. Every path in these docs is relative to that root: /llms.txt is https://docs.devias.io/llms.txt.
> Devias is an open-source platform that works as an operating system for a business: a core (records, views, workflows, agents, permissions) with installable modules.
> Pages are typed by folder. concepts/ explains what things are, guides/ gives procedures, reference/ is exhaustive (SDK, CLI, HTTP API), operate/ covers hosting. Use /start/glossary for exact terms.
> Every id in a module (module, object, field, view, action, workflow, step, connection, variable, event, policy) is a uuid. Generate them with `devias id <count>`. Never invent dotted or readable ids.
> Run `devias plan` and read its output before `devias apply`. Apply only what the plan says.
> The OpenAPI document, including the routes of the modules in the reference setup, is at /reference/api/openapi.json.
> Devias is young and changes quickly. If a page and the source repository (github.com/devias-io/devias) disagree, the repository is right.

# Blocks

> How a module adds a block, a React component that Devias places on a screen. Lists the five surfaces (home, record, dialog, panel, approval), the defineBlockComponent properties, why a block is also declared in the manifest with defineBlock, and the requires property.

A **block** is a React component that Devias can place on a screen. A module uses blocks to add its own card to Home or its own section to a record page without changing the studio.

```tsx theme={"dark"}
function Greeting() {
  return (
    <InsightCard icon="sparkles" title="Welcome">
      <InsightText>Hello from my module.</InsightText>
    </InsightCard>
  );
}

export const greetingBlock = defineBlockComponent({
  id: ids.blocks.greeting,
  label: 'Welcome',
  icon: 'sparkles',
  surfaces: { home: { order: 10 } },
  component: Greeting,
})
```

## Surfaces of a block

A block lists the surfaces it can appear on.

| Surface | Where it shows |
| - | - |
| `home` | The Home page, as a card. `InsightCard` gives it the house style. |
| `record` | A record page, placed by a layout or added automatically. |
| `dialog` | Inside a dialog. |
| `panel` | Docked beside the content, like the assistant. |
| `approval` | In the assistant, in place of the default approval card for a module's tool. |

## Declare the block in the manifest

Every block has an id. The module's manifest declares it with `defineBlock` and lists its surfaces. The manifest side lets layouts refer to the block and lets agents see what exists before any React loads.

A block can set `requires` to certain objects, so that it shows only in workspaces that have them, such as once the module that owns them is installed.

## Related

* [Views and navigation in a module](https://docs.devias.io/guides/modules/views-layouts-navigation.md): put a block on a record page.
* [Pages and commands](https://docs.devias.io/guides/customize-studio/pages-commands.md): give a block a whole page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.