Kappa / Blocks

Blocks

@dicehub/kappav0.5.0

Application Shell

Application layouts with namespace selection, profile menus, Quick search, and mobile navigation. Use the published SidebarLayout block and keep your data and routing in the application.

Layout	Purpose
Grouped Navigation	A documentation sidebar with text links grouped by section, a version selector, and an editable search field. Desktop collapse hides the sidebar; mobile uses a full-screen drawer.
Collapsible Sections	Section headings expand and collapse their links independently. Search opens matching sections, and section state is retained when switching between desktop and mobile.
Submenus	Clickable parent pages with always-visible, indented child links. A simple documentation header and off-canvas collapse keep the hierarchy clear.
Floating Submenus	A wider, floating navigation panel with a border, rounded corners, and visible child links. Desktop collapse hides the panel; mobile uses a full-screen drawer.
Collapsible Submenus	Click a parent row to show or hide its indented links. The selected page's group starts open. Search reveals matching links, and open groups are retained on mobile.
Dropdown Submenus	Click a parent row to open its page links in a popup. Search filters the links. Mobile selection closes the full-screen navigation and keeps the selected page.
Collapsible Icon Navigation	Starts expanded with nested link groups, project shortcuts, namespace and profile menus, and Quick search. Collapse to an icon rail; click a group icon to expand its links. Group state and selection are retained on mobile.
Inset Navigation	An inset content panel beside nested navigation and project links. Support and Feedback stay above the profile menu while the main links scroll. Includes namespace selection, Quick search, icon collapse, and full-screen mobile navigation.
Inbox Navigation	A fixed folder icon rail beside a searchable message list and reading panel. Filter unread messages, collapse the list, and open messages from a full-screen mobile drawer.
Workspace Pages	A page-based workspace with Favorites, expandable groups, namespace selection, Quick search, and utility links. Desktop collapse hides the sidebar; mobile uses a full-screen drawer. The original Workspace example remains available below.
Minimal Workspace	A compact dicehub-style shell with centered search and a / shortcut, a simple namespace selector, a resizable sidebar, and a rounded content panel. Includes local project creation, profile and Help menus, a footer collapse button, and full-screen mobile navigation.
Workspace	Grouped navigation, namespace and profile menus, Quick search, and a resizable edge.
Icon Rail	Starts with a compact icon rail. Expand it for labels and nested navigation. Use the centered search field or press / to open a panel that expands and fades in. Search pages and projects.
Inset Content	A quiet navigation surface beside a bordered, inset content panel.
Floating Sidebar	A separate navigation panel with a small outer gap and rounded edges.

Browse Application Shell layouts →

Login

Responsive sign-in structures for credentials, passwordless email, identity providers, and contextual media. Authentication remains in your application.

Layout	Purpose
Simple	A focused credential form centered on a quiet page.
Split Media	A full-height form beside product or organization context.
Muted Panel	A contained login panel on a muted application surface.
Media Card	A compact two-column card with supporting media on the logical start side.
Email Only	A minimal passwordless entry point for email-link authentication.
Neutral Background	A compact credential form on a quiet neutral application surface.

Browse Login layouts →

Signup

Responsive account-creation structures for profile details, personal namespaces, passwords, consent, and identity providers. Account services remain in your application.

Layout	Purpose
Complete Account	The full dicehub account form with identity, namespace, password, and consent.
Split Media	The complete form beside a technical product visual and a direct sign-in action.
Muted Panel	A contained signup panel on a quiet application background.
Media Card	A compact two-column signup card with contextual workspace media.
Email Only	A minimal account entry point for applications that complete registration later.

Browse Signup layouts →

Settings

Account and workspace settings with tabs, current values, and expandable forms.

Browse Settings examples →

Resource List

Responsive resource pages with optional controls and contextual information. Data loading, filtering, pagination, and routing remain in the application.

Layout	Purpose
Complete	Page identity, actions, filtering, resource rows, and contextual usage in one responsive layout.
Compact	Reduced page spacing and compact rows for dense technical workspaces.
Minimal	The primary region can stand alone when the surrounding application already supplies page identity and controls.

Browse Resource List layouts →

Resource Actions

Block	Purpose
File Browser	Browse folders and files in list or card view, with selection and actions.
Resource Picker	Search and select resources with a confirmation step.
Delete Resource	Confirm deletion with optional exact-name entry and async progress.
Message Composer	Write a message, add attachments, and submit it.
Workspace Switcher	Switch workspaces and access workspace or account actions.

Components and Blocks

Components provide focused controls and interactions. Blocks combine them into reusable page structures. Sidebar remains under Components; Application Shell combines it with a header and page content.

Blocks are exported from @dicehub/kappa and their documented @dicehub/kappa/blocks/* paths. They use Kappa tokens and existing component behavior. No extra dependencies are required.