Pieces/Nav(30)

Nav pieces from Beste UI, drop-in widgets built with shadcn/ui and Tailwind CSS.

Pagination

Numbered pagination with prev/next arrows and ellipses for long ranges. Active page flips to foreground.

Tab Bar Pill

Four-tab navigation pill that expands the active tab to show its label, with a count badge on alerts.

Breadcrumb

Breadcrumb trail with a home icon, chevron separators, and a bold final crumb.

Quick commands

Slash Commands

Slash-command flyout listing mono commands with hints beside them and a slash glyph prefix column.

Notifications
Mira starred Project Horizon2m
Build passed · main18m
PR #482 merged1h

Notifications Panel

Notifications dropdown listing icon-prefixed rows with time stamps and a trailing unread dot per item.

Beste

App Header

Pill header with a menu button on the left, centered brand mark, and search and avatar actions right.

Workspace Switcher

Open workspace-switcher showing the current pick and a dropdown with sibling workspaces and a new action.

app
page.tsx
layout.tsx
components
tailwind.config.ts

File Tree

Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.

App Bar

Web-app bottom bar with five labeled icon tabs and a primary indicator above the active one.

Account
Team
Billing
4Done

Stepper

Multi-step stepper with emerald done, primary current, and muted pending tiles linked by colored rails.

Products
Products preview

Mega Menu

Nav flyout pairing a vertical product list with a gradient promo pane spotlighting a new release.

On this page

Anchor Nav

Docs-style on-this-page list with left borders and a primary active rail on the current section.

Product
Company
Resources

Footer Columns

Three-column footer link grid with uppercase section headings and plain-text links underneath each.

Beste Sözen
Beste Sözenmira@beste.co

User Menu

Account dropdown with an avatar header, profile and settings rows, workspace switcher, and a Sign out action.

Bottom Nav

Mobile tab bar with labeled icons, a raised center create button, and a rose unread counter badge.

Command Trigger

Full-width button that fires a command palette, paired with a search icon and a ⌘K kbd hint.

Context Menu

Right-click menu pointed by a corner arrow with icon rows and mono shortcut hints on the right.

Actions

Dropdown Menu

Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.

Pagination

Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.

Workspace
Admin

Sidebar Nav

Grouped sidebar menu with section labels, icon rows, optional counters, and a muted active state.

Path Breadcrumb

URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.

Icon Tabs

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.

Counted Tabs

Underline tabs that print a pill count next to the label, with the active count filled in primary.

Collapsed Breadcrumb

Breadcrumb that hides middle crumbs behind a dropdown chip so the trail stays on a single row.

Markdown version