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

Components/Avatar

Avatar

Image or initials, alone or overlapped in a group.

Open in Claude Open in ChatGPT
NM
NMALGHKT

Installation

$npx shadcn@latest add @opendraft/avatar

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.

PreviousSidebarNext Badge

On this page