Tables & navigation

Table

Preview

Feature	Import
Buttons	nextguide/ui
FileTree	nextguide/blocks
OpenAPI	nextguide/components

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "nextguide/ui"

<Table>
  <TableHeader><TableRow><TableHead>Feature</TableHead><TableHead>Import</TableHead></TableRow></TableHeader>
  <TableBody>
    <TableRow><TableCell>Buttons</TableCell><TableCell>nextguide/ui</TableCell></TableRow>
    <TableRow><TableCell>FileTree</TableCell><TableCell>nextguide/blocks</TableCell></TableRow>
    <TableRow><TableCell>OpenAPI</TableCell><TableCell>nextguide/components</TableCell></TableRow>
  </TableBody>
</Table>

Preview

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from "nextguide/ui"

<Breadcrumb><BreadcrumbList>
  <BreadcrumbItem><BreadcrumbLink href="/docs">Docs</BreadcrumbLink></BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem><BreadcrumbPage>Components</BreadcrumbPage></BreadcrumbItem>
</BreadcrumbList></Breadcrumb>

Scroll area

Use NextGuide's Radix-backed scroll area for internal panels, drawers, navigation lists and other bounded content. The scrollbar adapts to the current theme.

Preview

Installation

Generated files

Create a page

Navigation

Theming

Fonts

Deployment

OpenAPI

MDX rendering

Components

import { ScrollArea, ScrollAreaViewport, ScrollBar } from "nextguide/ui"

<ScrollArea type="always" className="h-40 max-w-md rounded-lg border">
  <ScrollAreaViewport className="h-full px-4">
  <div className="border-b py-2 text-sm" key="0">Installation</div>
  <div className="border-b py-2 text-sm" key="1">Generated files</div>
  <div className="border-b py-2 text-sm" key="2">Create a page</div>
  <div className="border-b py-2 text-sm" key="3">Navigation</div>
  <div className="border-b py-2 text-sm" key="4">Theming</div>
  <div className="border-b py-2 text-sm" key="5">Fonts</div>
  <div className="border-b py-2 text-sm" key="6">Deployment</div>
  <div className="border-b py-2 text-sm" key="7">OpenAPI</div>
  <div className="border-b py-2 text-sm" key="8">MDX rendering</div>
  <div className="border-b py-2 text-sm" key="9">Components</div>
  </ScrollAreaViewport>
  <ScrollBar />
</ScrollArea>