Overview · Components · AntelopeJS DMS

The DMS ships a catalog of blocks you declare on the backend; the shared Vue frontend renders them. For a standard screen you write no Vue: you compose blocks, and the dashboard draws the result. Start with the group that fits your screen below. Many block pages include a live preview you can tweak, alongside usage examples, options, recipes and pitfalls.

Screenshot of the KPI card block — KPI card`KpiCard`

New to the DMS? Read Pages & components first to see how blocks attach to a page, then Block fundamentals for what every block shares.

The catalog

Layout & containers

Grid, stacks, card, tabs, guard and placeholder.

Charts & widgets

KPI cards, chart cards, rankings, the period selector and thirteen chart types.

Display blocks

Stat groups, key / value lists, navigation cards, empty states, banners and code.

Lists & settings

Activity feeds, meters, and the sections of a settings page.

Forms

Data entry with validation, sections and save bars.

Tables

Paginated, filterable CRUD tables over a data controller.

The data layer

Reference	Use it for
Data types	The `type` of every form field and table column.
Data controller	Declare a table's shape, routes and field decorators once.
Derived controller	Give the same data a second editing screen with its own routes and permissions.
File storage	The storage behind the `file` and `image` types.

When nothing fits

Custom component places a Vue component of your own on the page. Build only the block the catalog is missing, give it .meta({ name, description, icon }), and keep the rest of the page in DMS blocks so each part stays a permission of its own (Best practices).

How to read a block page

Use the examples first, then consult the options when you need a specific behavior. Pages with a playground follow this structure:

What it is — what it draws and when to reach for it.
Live preview — the real block, rendered by a DMS instance; change its options in the controls panel and copy the TypeScript.
Usage — the import and a minimal, real example, with the route that feeds it.
Options — the reference table generated from the block catalog.
Recipes and pitfalls — the patterns that work and the mistakes to avoid.
Next steps — where to go from there.

When no preview instance answers, the preview falls back to a screenshot of the same block and the options table stays complete.Some blocks need backend data or page context. Forms may show only their frame, tables may show a backend-required notice, and a live toggle needs a live page. Those pages explain the limitation and point to a screenshot or the running playground for the complete result.