Loading...

Good things come to those who wait...

DittoPublic

Ditto Porygon API

Foundations

Visuals

UI Library

Layouts

Layout Modules

Building blocks designed for use within page layouts

Global navigation bar with responsive menu and user dropdown

View Demo

Sidebar navigation with groups, nesting, badges, and collapsible mode

View Demo

Step progress sidebar for multi-step processes

View Demo

Command-style scope navigation between Home, Programs, and Projects

View Demo

ScopeViewToggle

3-state toggle for Hub, Timeline, and Dashboard views within a scope

View Demo

Chat-style input bar that slots into TopBar center area

View Demo

Usage

Layout modules are designed to work within specific page layouts. Each module's demo page shows which layouts support it and how to configure it.

import { LeftNav, WizardNav } from '@/ui/layouts';
import { TopBar, ScopeJump, ChatBar } from '@/ui/components';