shadcn/ui
中文文档
组件
构建块
图表
主题
示例
配色
React
Next.js
Toggle Menu
Search documentation...
Search...
⌘
K
GitHub
Toggle theme
New sidebar component
页面构建块
设计精美的构建块。你可它们将其复制并粘贴到你的应用程序中直接使用。这些都是开源的。
浏览构建块
Request a block
A simple sidebar with navigation grouped by section.
npx shadcn add sidebar-01
Open in New Tab
Open in
A sidebar with collapsible sections.
npx shadcn add sidebar-02
Open in New Tab
Open in
A sidebar with submenus.
npx shadcn add sidebar-03
Open in New Tab
Open in
A floating sidebar with submenus.
npx shadcn add sidebar-04
Open in New Tab
Open in
A sidebar with collapsible submenus.
npx shadcn add sidebar-05
Open in New Tab
Open in
A sidebar with submenus as dropdowns.
npx shadcn add sidebar-06
Open in New Tab
Open in
A sidebar that collapses to icons.
npx shadcn add sidebar-07
Open in New Tab
Open in
An inset sidebar with secondary navigation.
npx shadcn add sidebar-08
Open in New Tab
Open in
Collapsible nested sidebars.
npx shadcn add sidebar-09
Open in New Tab
Open in
A sidebar in a popover.
npx shadcn add sidebar-10
Open in New Tab
Open in
A sidebar with a collapsible file tree.
npx shadcn add sidebar-11
Open in New Tab
Open in
A sidebar with a calendar.
npx shadcn add sidebar-12
Open in New Tab
Open in
A sidebar in a dialog.
npx shadcn add sidebar-13
Open in New Tab
Open in
A sidebar on the right.
npx shadcn add sidebar-14
Open in New Tab
Open in
A left and right sidebar.
npx shadcn add sidebar-15
Open in New Tab
Open in
A simple login form.
npx shadcn add login-01
Open in New Tab
Open in