Arc UI — 自带克制而优雅内置动效的开源 React 与 shadcn 组件库,让产品界面更显完工质感。

自带克制而优雅内置动效的开源 React 与 shadcn 组件库,让产品界面更显完工质感。

包含组件

126
Try the demoMotionAI and MCPButtonAction buttonSplit buttonCopy buttonConfirm morphTheme switcherHold to confirmSwipe actionsDropdown menuContext menuUser menuInputTextareaPassword fieldSearch fieldInline editNumber fieldPhone inputTag inputMention inputShortcut recorderSelectComboboxMulti-selectChip groupRadio cardsBilling toggleCheckboxRadio groupSwitchSegmented controlSliderCalendarDate pickerDate range pickerTime pickerColor pickerRich text editorSignature padFile dropzoneTabsBreadcrumbPaginationScroll areaAccordionExpandable cardResizable panelsDialogDrawerBottom sheetPopoverHover cardTooltipAlertToastToast stackAnnouncement barProgressSkeletonStepperUsage meterAvatarAvatar groupBadgeCardMetric cardEmpty stateLine chartBar chartDonut chartStreamgraphBrush chartWaffle chartSlope chartSparklineGaugeActivity heatmapAnimated counterRidgelineTreemapSunburstSankey flowFunnel chartRadar chartRealtime streamRace bar chartData gridSortable data tableTree viewFilter toolbarCode blockTimelineComment threadChat threadImage compareCarouselText revealIn-view titleText morphText shimmerWhat’s new80NextAction buttonWhen to useWhen not to useUsageExamplesAPI referenceKeyboardAccessibilityResponsive behaviorPerformanceNotes for AIRelatedView as MarkdownLabel that morphs after savingKeyboard interactionsMorph SelectMetrics Dashboard BlockSparkline SliderVoice OrbLightbox GalleryInteractive DockConfirm Morph Button

Arc UI 是由 Elia Kuratli 设计的高品质 React 组件与区块库,以克制、温润的内置微动效为特色。其底层基于 Radix UI 与 Motion 构建,在保证无障碍规范的前提下带来流畅的形变过渡与手感反馈。支持通过 shadcn CLI 一键安装,并配备专属 MCP 服务方便 AI 编程助手直接调度。