字
字节笔记本
2026年2月23日
shadcn/ui Music 示例：构建现代化音乐应用界面
本文介绍 shadcn/ui 官方提供的 Music 音乐应用示例，展示如何使用 shadcn/ui 组件库构建一个现代化的音乐播放界面。
示例概述
shadcn/ui 的 Music 示例是一个功能完整的音乐应用界面，展示了多个核心组件的组合使用。该示例包含专辑展示、播放列表、标签切换等功能模块，采用响应式设计，支持桌面端和移动端适配。
核心组件使用
1. 布局组件
- Tabs 标签页：用于切换 Music、Podcasts、Live 三个主要视图
- Sidebar 侧边栏：展示播放列表导航
- ScrollArea 滚动区域：实现专辑列表的水平滚动
2. 基础组件
- Button 按钮：添加音乐按钮，使用 PlusCircledIcon 图标
- Separator 分隔线：区分不同内容区块
- Image 图片：Next.js 图片组件，支持响应式图片显示
3. 数据结构
示例使用两组模拟数据：
- listenNowAlbums："立即收听"专辑列表
- madeForYouAlbums："为你推荐"专辑列表
- playlists：播放列表数据
代码结构分析
tsx
export const metadata: Metadata = {
title: "Music App",
description: "Example music app using the components.",
}页面使用 Next.js 13+ 的 Metadata API 定义页面元数据。
响应式处理
tsx
<div className="md:hidden">
{/* 移动端显示静态图片预览 */}
</div>
<div className="hidden md:block">
{/* 桌面端显示完整交互界面 */}
</div>通过 Tailwind CSS 的响应式类实现设备适配。
标签页实现
tsx
<Tabs defaultValue="music" className="h-full space-y-6">
<TabsList>
<TabsTrigger value="music">Music</TabsTrigger>
<TabsTrigger value="podcasts">Podcasts</TabsTrigger>
<TabsTrigger value="live" disabled>Live</TabsTrigger>
</TabsList>
<TabsContent value="music">...</TabsContent>
<TabsContent value="podcasts">...</TabsContent>
</Tabs>专辑列表展示
tsx
<ScrollArea>
<div className="flex space-x-4 pb-4">
{listenNowAlbums.map((album) => (
<AlbumArtwork
key={album.name}
album={album}
className="w-[250px]"
aspectRatio="portrait"
width={250}
height={330}
/>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>样式特点
- 使用 Tailwind CSS 工具类进行样式定义
- 支持深色模式（通过
dark:hidden和hidden dark:block类） - 采用 CSS Grid 布局（
lg:grid-cols-5） - 边框和背景色使用 shadcn/ui 的设计令牌
技术栈
- 框架：Next.js 13+ (App Router)
- UI 库：shadcn/ui 组件
- 样式：Tailwind CSS
- 图标：Radix UI Icons
项目链接
分享: