Docs & Knowledge-Base Layout

A specialized grid layout designed for code-heavy documentation, manuals, API wikis, and reference portals. It structures complex contents with a collapsible tree sidebar, a content section equipped with copyable code snippets, and a right-hand section TOC that highlights the reader's current location automatically.

Command Palette (⌘K)

Try pressing Ctrl+K or clicking the search box in the navbar to search topics across this layout.

Installation

Base UI ships as a CLI, not a prebuilt npm package — components are copied directly into your project's source so you own and can customize the code. Start by initializing the CLI in your Angular workspace:

Bash

npx base-ui-cli init

Then add the specific components and layouts used on this page:

Bash

npx base-ui-cli add tree
npx base-ui-cli add code
npx base-ui-cli add command-palette

Configuration

Base UI uses standard Tailwind CSS v4. There is no tailwind.config.js and no required brand-color setup. The color="primary" API maps to blue-* utilities.

CSS

/* Minimal consumer setup */
@import "tailwindcss";

@source "./src/**/*.{html,ts}";

Library templates use explicit pixel utilities (p-4, gap-2) and standard Tailwind colors (bg-blue-500).

Optional brand override — change the default blue scale:

CSS

:root {
  --color-blue-500: rgb(139 92 246);
  --color-blue-600: rgb(124 58 237);
}

Zero-config default

Install Tailwind, add @source, and import components — stock Tailwind blue is used automatically. Custom overrides are only needed for non-blue brand colors.

Component Integration

The documentation template coordinates separate UI blocks to manage state synchronously. Below is a code blueprint illustrating layout orchestration inside your host templates:

HTML

<div class="docs-layout-grid">
  <!-- Left Side Sidebar -->
  <aside class="sidebar">
    <base-tree 
      [nodes]="nodes" 
      (nodeClick)="onNodeClick($event)">
    </base-tree>
  </aside>

  <!-- Center Content -->
  <main class="content">
    <base-code language="HTML" [showCode]="true">
      <!-- Nested content blocks -->
    </base-code>
  </main>
</div>

Zoneless Change Detection

This showcase application runs without `zone.js` (`provideZonelessChangeDetection` is configured in `main.ts`).

To prevent view staleness, ensure that any state written asynchronously or mutated outside typical template callbacks utilizes Angular Signals:

TypeScript

import { Component, signal, effect } from '@angular/core';

@Component({
  selector: 'base-doc-view',
  template: `
    @if (isActive()) {
      <p>Component state is active and reactive.</p>
    }
  `
})
export class DocViewComponent {
  // Use signals for zoneless reactivity
  readonly isActive = signal(true);

  toggleState()  {
    this.isActive.update(val => !val);
  }
}