ProductShell

Responsive product shell with desktop navigation, an accessible mobile drawer, utility actions, and active-page callbacks.

InterfaceSource ready7 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/product-shell.json
Interactive preview
Interface

Overview

Northstar

Today

Work in focus

A quiet shell for product navigation, utility actions, and the work that matters now.

12 active
4 in review
2 due today

Install with the CLI

# adds ProductShell to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/product-shell.json

Or install the package

// npm install @uigrids/react-ui
import { ProductShell } from '@uigrids/react-ui'

export default function App() {
  return <ProductShell />
}

Props

PropTypeDefaultDescription
productNamestring'Northstar'Configures the product name option.
navItemsunknownDEFAULT_NAV_ITEMSConfigures the nav items option.
defaultActiveIdstring'overview'Configures the default active id option.
workspaceLabelstring'Design workspace'Configures the workspace label option.
onNavigateunknown-Configures the on navigate option.
childrenunknown-Content rendered inside the component.
classNamestring''Additional CSS classes for the outer element.