Athena 正在加载...
🎨 UI 组件库
全功能

组件展示

探索 Athena UI 组件库的强大功能包含 按钮、卡片、输入框、模态框 等丰富组件

📱响应式设计
🎨多种变体
🌓主题适配
无障碍访问
动画效果

组件 演示

实时体验每个组件的功能和样式变化

🔘

按钮组件 (Button)

多种样式、尺寸和状态的按钮组件

变体样式

尺寸大小

交互状态

📋

卡片组件 (Card)

灵活的卡片容器,支持多种变体和内边距

卡片变体

默认卡片

这是一个默认样式的卡片组件,适用于大多数场景。

悬浮卡片

鼠标悬浮时会有优雅的动画效果和阴影变化。

玻璃态卡片

具有现代化玻璃态毛玻璃效果的卡片样式。

✏️

输入框组件 (Input)

功能强大的表单输入组件,支持多种类型和样式

基础输入框

密码至少8位字符

浮动标签样式

手机号码格式不正确

尺寸变化

🗂️

模态框组件 (Modal)

可自定义的对话框组件,支持多种尺寸和功能

交互演示

点击下方按钮体验模态框的打开和关闭效果

🛠️

样式工具类

预定义的工具类和动画效果

动画效果

淡入动画
滑入动画

文本渐变

这是美丽的渐变文本效果

玻璃态效果

这是现代化的玻璃态背景效果

开始使用组件

所有组件都采用 TypeScript 编写,提供完整的类型定义和 API 文档

📋

复制代码

直接复制组件代码到您的项目中使用

⚙️

自定义样式

通过 props 轻松自定义组件的外观和行为

🚀

快速开发

开箱即用的组件,加速您的开发流程