搜索组件

类别

所有组件
3349
导航
46
导航组件
45
导航栏
33
侧边导航
30
面包屑导航
29
下拉菜单
41
汉堡菜单
31
页脚导航
37
内容显示组件
38
轮播滑块
35
卡片
31
标签页
31
手风琴
34
模态
30
工具提示
37
画廊
34
互动组件
34
按钮
38
表单
36
搜索框
42
评论区
33
社交分享按钮
43
评分系统
32
布局组件
43
标题
35
页脚
42
侧边栏
32
网格布局
38
容器
37
列
31
功能组件
36
购物车
42
登录/注册
31
聊天窗口
35
通知
34
进度条
37
分页
31
过滤器
37
媒体组件
38
视频播放器
39
音频播放器
33
图片灯箱
38
媒体嵌入
40
360°查看器
53
文件查看器
35
数据可视化组件
37
图表
31
地图
35
时间线
39
信息图
34
仪表板
27
热力图
37
数据表
34
反馈组件
31
警报消息
31
toast 通知
29
进度指示器
34
徽章
43
加载器
39
错误消息
31
成功消息
32
电子商务组件
29
产品卡片
36
产品画廊
38
价格显示
21
加入购物车按钮
38
结账表单
27
愿望清单
44
产品评论
35
产品比较
37
社交组件
36
用户个人信息
35
动态
28
点赞/反馈按钮
31
关注按钮
29
社交登录
40
社区论坛
37
用户提及
38
导航增强组件
29
大菜单
49
粘性导航
38
返回顶部按钮
48
跳到内容链接
31
目录
34
标签云
34
网站地图
35
认证组件
36
登录表单
41
注册表单
35
密码重置
30
两步验证
35
验证码
50
OAuth按钮
29
会话超时警报
35

组件图表

图表

使用图表的数据显示方式

图表组件

一个极简主义的图表组件，使用Tailwind CSS具备响应式设计和深色主题支持。

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Revenue</div>
      <div class="text-lg font-bold text-green-500">$12,450</div>
    </div>
    <div class="flex items-center justify-between">
      <div class="text-sm text-gray-500 dark:text-gray-300">Profit</div>
      <div class="text-lg font-bold text-blue-500">$5,600</div>
    </div>
  </div>
  <div class="mt-4">
    <div class="w-full h-32 bg-gray-200 dark:bg-gray-700 rounded-lg"></div>
  </div>
</div>