opendraft
DocsComponentsThemingUse with AI

Get started

All componentsIntroductionUse with AIUse with other AI toolsUse casesIntegrationsInstallationThemingMotion

Blocks13

Data TableNewRecord PageNewStage BoardNewSchedulerNewCRM PipelineNewAnalytics DashboardNewSettings PageNewAuth ScreenNewAgent WorkspaceNewCheckoutNewCatalogNewDetail PageNewOrder ConfirmationNew

AI Agents39

Voice OrbNewMessage BubbleMessageMessage ScrollerPrompt InputStreaming ResponseCitationsAgent ActivityAgent Loading StatesTodo ListTool ResultCode BlockFile DiffApproval CardTool ApprovalImage GenerationAI SidebarChat AppQuestion CardNewChat PanelNewRecommendation CardNewContext CardsNewPrompt BarNewSelection ActionsNewPixel LoaderNewThinking TraceNewStreaming AnswerNewTask RowsNewTool ChipsNewAgent ScreenNewCode PanelNewWaveformNewLive WaveformNewBar VisualizerNewAudio PlayerNewScrub BarNewTranscript ViewerNewMic SelectorNewVoice ButtonNew

Data & Workflows6

Filter TableNewFlowchartNewInsight CardsNewFine-tune CardNewRecords TableNewDiff TableNew

Components71

AccordionSidebarNewAvatarBadgeButtonCardCheckboxCommand PaletteNewData TableNewDate Range PickerNewDialogDrawerNewDropdown MenuInputKbdLabelPopoverRadio GroupNewSelectSeparatorSkeletonSwitchTabsTextareaToastTooltipSearch ListNewSidebar NavNewFilter BarNewBulk Action BarNewChecklistNewDescription ListNewGaugeNewETA IndicatorNewSecret InputNewMFA StepNewPermission MatrixNewSignature PadNewPhoto CaptureNewStep NavigationNewTime Series ChartNewSeat MapNewProduct CardNewImage GalleryNewAddress FormNewVideo PlayerNewDocument ViewerNewDate Time PickerNewRatingNewGanttNewMap ViewNewRich Text EditorNewQuantity StepperNewProgressNewStatNewEmpty StateNewStepperNewTheme ToggleNewSite HeaderNewQR CodeNewTicket PassNewPage HeaderNewFieldNewDate PickerNewRepeater FieldNewTimelineNewAlertNewStatus IndicatorNewSliderNewDropzoneNewOTP InputNew

Motion14

Action SwapAnimated NumberBlur TextCopy ButtonLoaderMagneticMarqueeCode RevealNewPixel FieldNewPreview RailRevealShimmer TextSpotlight CardText Scramble

AI Agents/File Diff

File Diff

Streaming unified diff with added and removed counts.

Open in Claude Open in ChatGPT
File changes

Installation

$npx shadcn@latest add @opendraft/file-diff

Needs the @opendraft registry in your components.json. See Installation.

Dependencies

Source

The files the install command adds to your project. They're yours to edit.

PreviousCode BlockNext Approval Card

On this page