Blocks

Blocks are whole pages, not components: a dashboard, an app shell, a settings screen. They show how the parts compose at real size, which a component demo cannot.

Each one runs as a real route in this site and is shown in a frame, because an app shell is position: fixed and sized to the viewport — it cannot be rendered honestly inside a documentation column. Use the width toggle to see how it responds.

Agent cockpitCopy Anchor Link

The Nooxit product home, built on dashboard-01's structure. It follows the product's own loop: see which agent is waiting on you, decide the case in place, then check that the rest ran on its own. Two routes, Home and Operations, share one sidebar and one set of state. A decision on Home is still reflected in the Operations table and the sidebar count.

Try it:

• Pick an agent in the "On duty" row. The queue and the decision card narrow to that agent's cases.
• Accept or reject a case. It leaves the queue, the agent's count and the summary drop, the activity log records it, and a toast offers Undo.
• Open Operations from the sidebar. Its table has status tabs, search, an agent filter, sorting, bulk accept, and a detail sheet on each row.

How it differs from dashboard-01Copy Anchor Link

• No stat-card row. Numbers sit next to what a person does about them: the waiting count in the summary and on each agent, and the totals in the chart's legend.
• The top bar sits outside the content panel, on the sidebar surface, holding the organization switcher, workforce status and Inbox.
• Agents are neutral monograms. Color is kept for state: warning for deviations, blue for approvals and work in progress, red for overdue.

All suppliers, references and amounts are fictional.

Source: app/(preview)/preview/agent-cockpit/.

DashboardCopy Anchor Link

A port of shadcn/ui's dashboard-01 onto Nooxit components: sidebar, site header, stat cards, an interactive area chart and a sortable, filterable data table with drag-and-drop rows.

What changed in the portCopy Anchor Link

The block is the stock composition with its imports repointed at nooxit-design-system, plus three corrections that bring it onto the system:

• Chart colors. The stock block paints both series with var(--primary), which renders them as two identical grays. It now uses var(--chart-1) and var(--chart-2) — orange and green — so the series are actually separable.
• Card treatment. The stock cards carry bg-gradient-to-t from-primary/5 and shadow-xs. Nooxit cards are defined by a border and have no shadow, and the design rules forbid gradients, so both were removed.
• Sidebar width. The block hard-codes 288px; the override was dropped so it uses the Nooxit 240px.

It also replaces shadcn's internal IconPlaceholder — which leaks into the published block and does not resolve outside their repo — with real Phosphor icons.

Install it yourselfCopy Anchor Link

npx shadcn@latest add dashboard-01

That gives you the stock block. Repoint the imports at nooxit-design-system/components/* and apply the three corrections above.

It needs @dnd-kit/core, @dnd-kit/modifiers, @dnd-kit/sortable, @dnd-kit/utilities, @tanstack/react-table and zod.

App shellCopy Anchor Link

The sidebar pattern on its own: a collapsible 240px sidebar with a logo tile, grouped navigation, a sub-menu, a footer, and a header with a breadcrumb.

Source: app/(preview)/preview/sidebar/page.tsx.