首页风格模板
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 生成更好看的网站。

反馈建议支持维护
浏览+
风格库模板动效资源库提示词库主题合集
学习与更新+
前端基础指南配方更新日志博客
关于与政策+
关于联系与支持隐私政策服务条款支持我们退款政策

(c) 2026 StyleKit. 开源项目。

闄旾CP澶?025065501鍙?3

刊末信息/SK — 2026

基于 Editorial 风格构建

01反馈与建议告诉我们哪里还可以更好02支持维护如果 StyleKit 恰好帮到了你，欢迎扫码支持。金额随意，每一份心意我都很感谢。

StyleKit

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

GitHub 仓库

浏览

风格库模板动效资源库提示词库主题合集

学习与动态

前端基础指南配方更新日志博客

订阅动态

新风格、模板与工具上线时，第一时间收到通知。

保持更新

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

(c) 2026 StyleKit. 开源项目。

关于联系与支持隐私政策服务条款支持我们退款政策/陕ICP备2025065501号-3

StyleKit

风格预览

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

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

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

    分页组件

    • 1
    • 2
    • 3
    • More pages
    • 10

    Tree

    树形结构组件

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

    Input OTP

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

    6 位数字验证码

    4 位验证码

    字母数字混合

    密码遮罩

    错误状态

    禁用状态

    Resizable

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

    水平布局

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

    垂直布局

    顶部面板
    底部面板

    嵌套布局

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

    简洁分隔线

    面板 A
    面板 B