mcpField
U
ui-components

ui-components

github.com/elie222设计与 UI12.9k94 次安装1 天前更新
代码仓库

关于 ui-components

为界面开发提供 Shadcn UI、Tailwind CSS、SWR 及常见加载和表单组件的使用规范，适用于构建响应式界面和获取 API 数据的开发者。

主要功能

  1. 01Shadcn UI 与 Tailwind 样式规范
  2. 02移动优先的响应式设计
  3. 03使用 SWR 发起 API GET 请求
  4. 04加载状态组件指导
  5. 05表单输入示例

适用场景

  1. 01构建响应式界面组件
  2. 02获取分页 API 数据
  3. 03实现加载状态和表单

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/elie222/inbox-zero --skill ui-components

安装后在 Claude Code 中输入/ui-components确认已加载。

详细介绍

UI 组件与样式

UI 框架

  • 使用 Shadcn UI 和 Tailwind 构建组件并设置样式
  • 使用 Tailwind CSS 以移动端优先的方式实现响应式设计
  • 使用 next/image 包处理图片

安装新的 Shadcn 组件

pnpm dlx shadcn@latest add COMPONENT

示例：

pnpm dlx shadcn@latest add progress

使用 SWR 获取数据

对服务器发起 API GET 请求时，使用 swr 包：

const searchParams = useSearchParams();
const page = searchParams.get("page") || "1";
const { data, isLoading, error } = useSWR<PlanHistoryResponse>(
  `/api/user/planned/history?page=${page}`
);

加载组件

使用 LoadingContent 组件处理加载状态：

<Card>
  <LoadingContent loading={isLoading} error={error}>
    {data && <MyComponent data={data} />}
  </LoadingContent>
</Card>

表单组件

文本输入框
<Input
  type="email"
  name="email"
  label="Email"
  registerProps={register("email", { required: true })}
  error={errors.email}
/>
文本区域
<Input
  type="text"
  autosizeTextarea
  rows={3}
  name="message"
  placeholder="Paste in email content"
  registerProps={register("message", { required: true })}
  error={errors.message}
/>

评论

支持 Markdown