---
tags:
  - reference
  - documents
  - typescript
  - dashboard
title: Document UI Template
nextjs:
  metadata:
    title: Document UI Template
    description: The Document UI Template provides ready-made React components to assemble a document-driven dashboard quickly with TerminusDB.
    keywords: terminusdb, dashboard, terminusdb cloud, document, document database, document ui template, documents, javascript
    openGraph:
      images: https://assets.terminusdb.com/docs/technical-documentation-terminuscms-og.png
    alternates:
      canonical: https://terminusdb.com/docs/document-ui-template/
media: []
---

{% callout type="warning" title="Unmaintained package" %}
These packages (`@terminusdb/terminusdb-documents-ui` etc.) were last published December 2023 and are no longer actively maintained. The documentation is preserved for reference. Community contributions and pull requests are welcome.
{% /callout %}


A Software Development Kit (SDK) to build a UI from @terminusdb/terminusdb-documents-ui and the @terminusdb/terminusdb-react-table.

This template has components to assemble a dashboard quickly. You also have the option to use our base components like the FramesViewer and TDBReactTable.

## Installation

Install the dependencies from npm

```bash
npm install @terminusdb/terminusdb-documents-ui
npm install @terminusdb/terminusdb-react-table
npm install @terminusdb/terminusdb-documents-ui-templates
```

## Run a Dashboard Example in Code Sandbox

`terminusdb-documents-ui-templates` are a collection of hooks to connect with the TerminusDB server and a number of templates (components) for building a dashboard.

The sandbox features an example and how to use the components and hooks to assemble your pages.

[Source Code](https://github.com/terminusdb/dashboard-examples-sandbox/tree/main/terminusdb-documents-ui-template-example/dashboard-demo)

[Code Sandbox](https://codesandbox.io/s/github/terminusdb/dashboard-examples-sandbox/tree/main/terminusdb-documents-ui-template-example/dashboard-demo)