@clidey/ux

滑翔机设计
以Radix UI和Tailwind CSS v4相建的制作准备回放组件库.
37+ 无障碍,可堆肥,暗模可备组件——下船.

为什么是克利德设计?

从零开始建立一个连贯的,无障碍的UI需要几周的时间. Clidey Design给你一套完整的被打磨的组件,这样你就可以专注于自己的产品,而不是你的设计系统.

• 默认可访问 - 每个组成部分都建立在 Radix 用户界面 原始的 原始的 原始的 键盘导航,焦点管理,和ARIA属性都是为您处理的.
• 包含暗模式 - 包装您的应用程序 ThemeProvider 所有组件自动调整。 系统偏好检测和 localStorage 坚韧不拔.
• 完全输入 ——采用严格模式的完整TypeScript定义. 每个道具、变体和事件处理器自动完成 .
• 可编译的 API ——子构件图案使你完全控制了布局和打分,而不与有见解的结构相对抗.
• 尾风 CSS v4 - 以你已经知道的实用类命名 覆盖任何东西 className。 。 。 .
• 0 配置 一个导入, 一个样式表, 完成 .

安装

npm install @clidey/ux
# or
pnpm add @clidey/ux
# or
yarn add @clidey/ux

一次导入样式表 在您的应用程序入口:

// main.tsx / _app.tsx
import '@clidey/ux/styles.css';

以主题提供器环绕 以启用暗模式 :

import { ThemeProvider } from '@clidey/ux';

export default function App() {
  return (
    <ThemeProvider defaultTheme="system">
      {/* your app */}
    </ThemeProvider>
  );
}

就是这样。 没有额外的配置, 您的项目中不需要 Tailwind 设置 .

快开始

import {
  Button,
  Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
  Badge,
  Input,
  Label,
} from '@clidey/ux';
import '@clidey/ux/styles.css';

export default function Example() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>Create account</CardTitle>
        <CardDescription>Get started in seconds. No credit card required.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="space-y-1">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="[email protected]" />
        </div>
        <div className="space-y-1">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" showPasswordToggle />
        </div>
      </CardContent>
      <CardFooter className="flex items-center justify-between">
        <Badge variant="outline">Free plan</Badge>
        <Button>Create account</Button>
      </CardFooter>
    </Card>
  );
}

构成部分

行动

投入

显示

导航

重叠

菜单

版式

数据可视化

公用事业

主题

用法实例

目录图标

import { IconSearch, IconSearchAlt, CatalogIcon } from '@clidey/ux';

<IconSearch className="size-4" />
<IconSearchAlt size={20} />
<CatalogIcon name="source" size={16} />

Catalog 图标继承了当前文本颜色并接受 SVG 道具和 ref. 添加 aria-label 当图标需要它自己的无障碍名称时.

触发和 asChild

环绕交互式儿童在 DropdownMenuTrigger, (中文(简体) ), TooltipTrigger, (中文(简体) ), PopoverTrigger, (中文(简体) ), DialogTrigger 朋友们 无 asChild;当时间档安全时,触发器作为孩子产生(Button, (中文(简体) ), Badge, (中文(简体) ), SidebarMenuButton,内在 button编号 :a编号 :span编号 :div,否则作为自己的按钮。 过 asChild 仅用于转发 refs 的非 ux 元素。 见 文件/触发器-和-儿童 对于规则,安全/不安全的桌子和陷阱.

<DropdownMenuTrigger>
  <Button variant="ghost" size="icon"><MoreHorizontal /></Button>
</DropdownMenuTrigger>

确认对话框

import {
  AlertDialog, AlertDialogTrigger, AlertDialogContent,
  AlertDialogHeader, AlertDialogTitle, AlertDialogDescription,
  AlertDialogFooter, AlertDialogCancel, AlertDialogAction,
  Button,
} from '@clidey/ux';

<AlertDialog>
  <AlertDialogTrigger>
    <Button variant="destructive">Delete account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. Your data will be permanently deleted.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

托拉斯通知

import { Toaster, toast } from '@clidey/ux';

// In your root layout
<Toaster />

// Anywhere in your app
toast.success('Saved successfully!');
toast.error('Something went wrong.');
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Done!',
  error: 'Failed to save.',
});

命令调色板 (QQ)

import {
  CommandDialog, CommandInput, CommandList,
  CommandEmpty, CommandGroup, CommandItem,
} from '@clidey/ux';

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Search commands..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Navigation">
      <CommandItem onSelect={() => navigate('/dashboard')}>Dashboard</CommandItem>
      <CommandItem onSelect={() => navigate('/settings')}>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

具有虚拟化的大型数据集表

import {
  TableProvider, Table, TableHeader, TableHeadRow,
  TableHead, VirtualizedTableBody, TableRow, TableCell,
} from '@clidey/ux';

<TableProvider columnCount={3}>
  <Table>
    <TableHeader>
      <TableHeadRow>
        <TableHead>ID</TableHead>
        <TableHead>Name</TableHead>
        <TableHead>Status</TableHead>
      </TableHeadRow>
    </TableHeader>
    <VirtualizedTableBody rowCount={10000} rowHeight={48} height={400}>
      {({ index, style }) => (
        <TableRow style={style}>
          <TableCell>{rows[index].id}</TableCell>
          <TableCell>{rows[index].name}</TableCell>
          <TableCell>{rows[index].status}</TableCell>
        </TableRow>
      )}
    </VirtualizedTableBody>
  </Table>
</TableProvider>

他们

所有可视标志作为CSS自定义属性被曝光. 导入后在您的样式表中覆盖 @clidey/ux/styles.css数字 :

:root {
  --primary: 250 84% 54%;          /* your brand color */
  --radius: 0.375rem;              /* border radius */
}

黑暗模式是自动的—— ThemeProvider 应用 a dark 类改为 <html> 所有部件都通过Tailwind的 dark: 修饰相.

下一个.js

// app/providers.tsx
'use client';
import { ThemeProvider } from '@clidey/ux';

export function Providers({ children }: { children: React.ReactNode }) {
  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}

// app/layout.tsx
import '@clidey/ux/styles.css';
import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

同伴依赖关系

所有其他依赖(Radix UI,Lucide,Recharts,Sonner,Vaul,cmdk)都被捆绑——不需要额外的安装.

捐款

欢迎投稿、错误报告和特性请求。 请打开一个问题或调用请求 GitHub 图像。 。 。 .

未找到页面

在您的应用程序倒置路线中使用动画 404 视图 :

import { NotFoundPage } from '@clidey/ux';

<NotFoundPage homeHref="/" homeLabel="Back to home" />

自定义副本 title, (中文(简体) ), description,以及 eyebrow启用 onHome 用于路由器导航或 action 习惯动作。 播放支持 loop, (中文(简体) ), once,以及 off 结束 defaultMotion 或受控制 motion 编号 : onMotionChange 道具来. 减少的运动偏好自动显示一个静态. 启用可选播放控制 showMotionControls。 。 。 .

许可证

凭 Apache 许可证 2.0。 。 。 .

滑翔机设计图标

完整的Clidey Design图标收藏作为原始的SVG资产,无需通过主UI条目加载. 在 Vite app 中导入单个图标 URL :

import searchUrl from "@clidey/ux/icons/svg/search.svg?url";

<img src={searchUrl} alt="" />

对于动态图标拾取器,请导入 icons URL 地图来自 @clidey/ux/icons。见 icons/README.md 用于使用示例.