bash-ui
ComponentsDesign systemsHow to use
Getting started
IntroductionHow to use
Design systemsSee all →
The MeridianFrontierUnderstatedCuratedStudioNeutralPlayground
ButtonsSee all →
Social link buttonsKey login buttonSend buttonArrow buttonVideo buttonApp store badgeTonal buttonLoading buttonCTA buttonInbox buttonDelete button
Top navbars & navigationSee all →
Radial navigationExpanding menuGooey tabsCount tabsApp sidebar
InputsSee all →
Sort-by headingDissolve inputSearchable selectCheckboxLock toggleNotification toggleGooey inputSearch barRange sliderDate range calendar
ChartsSee all →
GitHub activity chartRevenue bar chartDonut chartMoney flow chartIncome vs spending chartFunnel chartMetric cardPipeline chartBreakdown dialAI cost cardStick progress bar
Data displaySee all →
Tech stack logosWallet cardScore gauge
Images & mediaSee all →
Doodle portraitImage collageQR codeSaved board
Text & typeSee all →
Scramble text
ListsSee all →
Ranking tableTo-do listFAQ accordionSwipe cards
FeedbackSee all →
Feedback cardFeedback sheet
Menus & overlaysSee all →
Link previewInfo tooltipAccount menu

Top navbars & navigation

Tab rows that sit at the top of a page, and the sidebar that holds the whole app together.

Radial navigation
Expanding menu
Gooey tabs
Count tabs
App sidebar

Playground

Component
Design system
Collapsed (desktop)
Current page
Title
import { AppSidebar } from "@/components/app-sidebar";

<AppSidebar
  currentPath="/dashboard"
  title="180Connect"
  sections={sections}
  logo={<Logo />}
  account={account}
/>
180Connect
  • Dashboard
  • Tasks3
  • Inbox12
  • Clients
  • Data imports
  • Analytics
180Connect
  • Dashboard
  • Tasks3
  • Inbox12
  • Clients
  • Data imports
  • Analytics