Home
Components
Charts

Getting Started

Introduction Installation Client Side Routing MCP Server LLMs

Framework Guides

Nextjs Laravel Tanstack Start Vite

Components

Buttons

Button File Trigger Toggle Toggle Group

Charts

Collections

Accordion Attachment Bubble Collapsible Dropdown Menu Grid List Item List Box Message Table Tag Group Tree

Colors

Controls

Command Kbd Slider Switch Toolbar

Date And Time

Calendar Date Field Date Picker Date Range Picker Range Calendar Time Field

Drag And Drop

Forms

Checkbox Combo Box Field Input Input Group Input OTP Number Field Radio Search Field Select Text Field

Layouts

Container Navbar Sidebar

Media

Avatar Carousel

Navigation

Breadcrumbs Link Pagination Tabs

Overlays

Alert Dialog Dialog Drawer Popover Sheet Tooltip

Statuses

Alert Badge Empty Meter Progress Skeleton Sonner

Surfaces

Sidebar

A sidebar is a component that helps you organize your content and navigation.

Installation

CLI

Manual

npx shadcn add https://hq-ui.vercel.app/r/nova/sidebar

Preview

dashboard-01

HQ UI © 2025 - This UI design was crafted by Diqi Al-Haqqi

Special thanks for Intent UI by Irsyad A. Pandjaitan for inspiration

On this page

Installation
Preview

On this page

Installation
Preview