HomeStylesTemplates
StyleKit
风格库配方指南动效模板

组件库

UI Components

基于 Radix UI + Tailwind CSS 构建的 20 个通用组件，支持主题定制和无障碍访问。

Loading preview...

Button

按钮组件，支持多种变体和尺寸

Input

输入框组件，支持多种变体

Card

卡片组件，用于内容分组

Default Card

带边框的默认卡片样式

卡片内容区域

Elevated Card

带阴影的悬浮卡片

卡片内容区域

Ghost Card

无边框的透明卡片

卡片内容区域

Alert

警告提示组件

默认提示
这是一条默认的提示信息。
信息
这是一条信息提示。
成功
操作已成功完成。
警告
请注意潜在的问题。
错误
操作失败，请重试。

Loading & Progress

加载和进度指示器

Loading...
Loading...
Loading...
Loading...
加载中...加载中...

60%

StyleKit

精选网页设计风格库，帮助 AI 生成更好看的网站。

导航

风格库模板社区指南博客更新日志

资源

UI 设计提示词落地页提示词Dashboard 提示词Tailwind UI 提示词暗黑模式提示词GitHub 仓库

保持更新

订阅即表示您同意我们的 隐私政策 和 服务条款。

支持维护

如果 StyleKit 恰好帮到了你，欢迎扫码支持。金额随意，每一份心意我都很感谢。

扫码支持 / 查看全部方式

(c) 2026 StyleKit. 开源项目。

关于联系与支持隐私政策服务条款基于 Editorial 风格构建
Stylekit前端样式库stylekit.top陕ICP备2025065501号-3

风格预览

查看这些组件在不同风格下的样式

选择一个风格查看组件预览

Form Controls

表单控件：Select、Checkbox、Radio

Select

Checkbox

Radio

Modal & Tooltip

弹窗和提示组件

Table

数据表格组件

名称类型状态操作
Neo-Brutalist设计风格已发布
Glassmorphism设计风格已发布
Bento Grid布局风格已发布

Drawer & Popover

抽屉和弹出层组件

Toast

消息提示组件

    List

    列表组件

    • 文档标题

      这是文档的描述信息

      2024

    • 文件夹

      包含 12 个项目

    • 图片文件

      PNG 格式，2.4 MB

    Pagination

    分页组件

    • More pages

    Tree

    树形结构组件

    Button.tsx
    Card.tsx
    App.tsx
    index.tsx

    Input OTP

    验证码输入组件，支持数字和字母数字模式

    6 位数字验证码

    4 位验证码

    字母数字混合

    密码遮罩

    错误状态

    禁用状态

    Resizable

    可调整大小的面板组件，支持水平和垂直布局

    水平布局

    左侧面板 (30%)
    中间面板 (40%)
    右侧面板 (30%)

    垂直布局

    顶部面板
    底部面板

    嵌套布局

    侧边栏
    主内容区
    终端/面板

    简洁分隔线

    面板 A
    面板 B