PanelUI

面向 Expo 的高性能 React Native 组件。
语义化设计令牌 · 通过 Uniwind 使用 Tailwind v4 · 在 UI 线程上运行 Reanimated。

PanelUI 是一个面向 Expo 应用的开源 React Native UI 组件库，采用 Tailwind CSS v4 进行样式设计，并使用 Reanimated 4 实现动画。93 个无障碍、类型安全的组件 —— 按钮、输入框、表单、对话框、底部弹出层、图表、日历、地图以及一组 AI 聊天组件 —— 统一于一种连贯的视觉语言中，开箱即支持浅色和深色主题。

纯 TypeScript 且无原生模块，因此可在 Expo Go 中运行，无需 prebuild，无需 Xcode，也无需 Android Studio。

为什么选择 PanelUI

⚡ 快速样式化 — Uniwind 将 Tailwind v4 引入 React Native，无需 Babel 转换，速度比替代方案快约 2.4–3 倍。
🧵 UI 线程动画 — 按压反馈、开关、弹出层、对话框和标签页均在 UI 线程上通过 Reanimated 4 运行。无 JS 线程卡顿。
🎨 语义化设计令牌 — 一套颜色系统（background、primary、muted、 destructive、……）贯穿浅色和深色模式，并预计算为原生静态值。
🌗 原生深色模式 — 主题切换以原生方式应用，无需重新渲染组件树。
♿ 默认无障碍 — 每个交互组件都配置了 accessibilityRole 并镜像其状态。
🧩 复合 API — Card.Header、Dialog.Content、Table.Row 的组合方式与标记的阅读方式一致。
📦 类型安全、可树摇、零原生代码 — 在 Expo Go 中可用，提供完整的 TypeScript 类型定义。

快速开始

需要 Expo SDK 57+ 应用和 Node 20+。

npx expo install panelui-native uniwind tailwindcss @react-native-masked-view/masked-view expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets

然后是三个文件——Metro 配置、CSS 入口和 provider。 安装指南 逐一介绍了每个文件，并列出了人们遇到的每个错误的修复方法。

或者复制源代码

panelui-cli 将组件的源代码复制到您的项目中，以便您拥有并编辑：

npx panelui-cli@latest init
npx panelui-cli@latest add button

两种方法均受支持，您可以混合使用。请参阅 CLI 文档。

用法

import { Button, Card, Dialog, Input } from 'panelui-native';

function CreateProject() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Create project</Card.Title>
        <Card.Description>Deploy your new project in one click.</Card.Description>
      </Card.Header>
      <Card.Content className="gap-4">
        <Input label="Name" placeholder="My project" />
      </Card.Content>
      <Card.Footer>
        <Dialog>
          <Dialog.Trigger>
            <Button>Deploy</Button>
          </Dialog.Trigger>
          <Dialog.Content>
            <Dialog.Title>Are you sure?</Dialog.Title>
            <Dialog.Description>This will start a deployment.</Dialog.Description>
            <Dialog.Footer>
              <Dialog.Close>
                <Button variant="ghost" size="sm">Cancel</Button>
              </Dialog.Close>
              <Dialog.Close>
                <Button size="sm">Confirm</Button>
              </Dialog.Close>
            </Dialog.Footer>
          </Dialog.Content>
        </Dialog>
      </Card.Footer>
    </Card>
  );
}

每个组件都接受 className，因此任何内容都可以使用 Tailwind 类重新设置样式：

<Button className="w-full rounded-full" labelClassName="uppercase">
  Continue
</Button>

组件

93 个组件，在 panelui.dev/docs 中提供了实时示例和完整的 props 表格。

布局与内容 — Card, Frame, Surface, Item, GridItem, Separator, Typography, Table, Timeline, Steps, Accordion, Carousel, EmptyState, Skeleton
表单与输入 — Form, Field, Input, Textarea, InputGroup, NumberInput, OtpInput, Select, Combobox, Checkbox, RadioGroup, Switch, Slider, Rating, Signature, ColorPicker, DatePicker, TimePicker, DateTimePicker, Calendar, Label, MarkdownEditor, Questionnaire
操作与导航 — Button, ButtonGroup, ToggleButton, Fab, Menu, Swipe, Sortable, Tabs, Breadcrumb, Pagination, SectionRail, Panelside, Tree, Chip, Badge
覆盖层与反馈 — Dialog, BottomSheet, Drawer, Popover, Tooltip, Toast, Alert, Progress, Spinner, Loader
数据可视化 — LineChart, AreaChart, BarChart, ScatterChart, PieChart, RingChart, RadarChart, HeatmapChart, Kpi, Map, Marker, Flow
AI 组件 — Message, MessageScroller, Response, Reasoning, Plan, Task, Sources, CodeBlock, Shimmer, ThinkingOrb, Soundwave
社交 — Post, Avatar, Attachment
滚动与动效 — ScrollFade, ScrollText, ScrollCanvas, TextAnimation, Direction

以及基础组件：PanelUIProvider, Portal, AnimatedPressable, useTheme, useThemeMode, useToast, cn。

主题

theme.css 中内置了六种主题 — light, dark, moon, moon-dark, grass 和 grass-dark。每个主题系列都设置了自身的圆角比例以及自身的调色板，因此切换主题也会改变 UI 的形状。

const { theme, setTheme } = useTheme();
setTheme('moon-dark');
setTheme('system'); // follow the device

const { family, mode, setFamily, toggleMode } = useThemeMode();
toggleMode();       // dark ↔ light, staying in the current brand
setFamily('grass'); // switch family, staying in the current mode

Tokens 是 CSS 变量，可以在你自己的 global.css 中覆盖。请参阅 Colors 以获取 token 参考以及 @variant 形状覆盖必须使用的内容，以及 Fonts 以将库指向您自己的字体。

示例应用

一个 Expo Router 展示，包含每个组件的实时演示和一个主题选择器——用于在发布前对所有六种主题进行整个库的冒烟测试。

git clone https://github.com/panel-ui/PanelUI.git
cd PanelUI
npm install
npm run example

然后按 i 选择 iOS 或按 a 选择 Android。

贡献

欢迎贡献。该库位于 packages/panelui，展示项目位于 apps/example，文档站点位于 apps/docs。

npm install         # install workspace deps
npm run typecheck   # typecheck all workspaces
npm run build       # build the library

在提交拉取请求之前，请先阅读 CONTRIBUTING.md，并遵守 行为准则。

社区

报告 bug 或 请求组件
在 Discussions 中提问
如果 PanelUI 对您有用，请给仓库加星——这是其他人发现它的方式

PanelUI

为什么选择 PanelUI

快速开始

或者复制源代码

用法

组件

主题

示例应用

贡献

社区

许可证