Arc
ComponentsBlocksScreensDocsPricingTry the demo
Get Pro
Saved

Docs

IntroductionInstallationThemingMotionAI and MCPChangelog

Components136

ButtonAction buttonSplit buttonButton groupFloating button groupExpanding button groupCopy buttonAction swapIcon morphConfirm morphTheme switcher

Hold to confirmSwipe actionsReactions

Dropdown menuContext menuUser menu

InputTextareaPassword fieldPassword strengthSearch fieldExpanding searchInline edit

Number fieldMoney inputPhone inputScrub inputTag inputMention inputShortcut recorder

SelectComboboxMulti-selectMorph selectChip group

Radio cardsBilling toggleCheckboxRadio groupSwitchSegmented controlRatingToggle group

SliderElastic sliderRange histogram sliderRuler sliderWindow rangeNewProLens rangeNewPro

CalendarDate pickerDate range pickerTime pickerColor pickerEmoji pickerPro

Rich text editorSignature padFile dropzoneAvatar uploadPro

TabsBreadcrumbPaginationMega menu morphProTable of contents progressPro

Scroll areaAccordionExpandable cardResizable panelsExpandable text

DialogDrawerBottom sheetPopoverHover cardTooltipShare accessProConfirm popoverPro

AlertToastToast stackAnnouncement barCookie consentUndo toastPro

ProgressSkeletonStepperCountdownUsage meterOnboarding checklist

AvatarAvatar groupBadgePresence stackPro

CardMetric cardEmpty stateMetric tickerPro

Line chartBar chartDonut chartStreamgraphBrush chartWaffle chartSlope chartSparklineGaugeActivity heatmapAnimated counterRidgelineTreemapSplit barPro

SunburstProSankey flowProFunnel chartProRadar chartProRealtime streamProRace bar chartProData gridPro

Sortable data tableTree tableTree viewReorderable listFilter toolbarCode blockJSON viewer

TimelineComment threadChat thread

Image compareCarouselCard stack

Text revealIn-view titleText morphText shimmer

Blocks122

KPI drilldownProMetric explorerProRevenue explorerProMRR waterfallProCohort retentionProUsage forecastProJourney flowProUptime statusProPivot builderProChoropleth explorerProConnected scatterProHorizon chartProAccount healthPro

Budget variancePro

Small multiplesProLine replayPro

AI chatProAI composerProAI answerProModel pickerProModel arenaProPrompt studioProDocument extractionProAgent memoryProAI side panelProAI inline editProResearch runProAI insight cardProCatch upProAI feature launchProAI search barProAI setup wizardProCall insightsProLead scoringPro

Agent runProAgent tasksProAgent approvalsProAgent routinesProAgent orchestratorProMCP serversProKnowledge baseProEval suiteProAgent builderProAgent galleryPro

SidebarPro4Page headerCommand paletteNotification centerSelection toolbarProEmpty statesSearch resultsPro

Login and sign up5, free and Pro variantsOnboarding illustrationProOTP inputMulti-step formProTwo-factor setupProMagic linkPro

Settings pageProSettings commandProSecurity settingsProBilling overviewProUsage billingProCancel flowProOnboarding surveyProSpend alertPro

Team membersProInvite peopleProRoles and permissionsProProfile pagePro

API keysProWebhooksProIntegrationsProImport wizardNewProEnvironment variablesProDomain verifyProWebhook testerPro

Plan comparisonPricing calculatorProUsage pricingProCart drawerProCheckout summaryProLive checkoutProSeat managerProCredit top-upPro

Wallet cardProDelivery trackerProSeat mapPro

Activity feedProSupport widgetProFeature votingPro

File uploadMedia playerPro

Availability pickerProRelease readinessProFeedback boardProSmart schedulerProTask breakdownProGoal trackerPro

Hero sectionHero signupPro

Scroll storyProSpotlight gridProFeature bentoProComparison table

Logo marqueeStudio perspectivesProStats band

Changelog feedFAQ sectionContact sectionTeam showcaseProBlog grid

Site headerSite footerCTA sectionNewsletter signup

Activity terrainProRevenue globeProCustomer galaxyProSemantic zoomProLayout morphProExploded viewPro

Screens14

Metrics dashboardProMarket terminalPro

Kanban boardProProject boardProGantt timelinePro

Week calendarProMonth calendarNewPro

Team directoryPro

Inbox triageProSupport conversationProHelp centerPro

Product listingProProduct detailProInvoice studioPro

Special components106

Share sheetProAction morphProMorph navProDockProLiquid tab barProOrbit menuPro

Glass menuProGlass segmentedProGlass cardProGlass tab barPro

Sheet stackProWallet stackProControl centerProHolo cardProCard to articleProLink unfurlPro

Product galleryProLightbox galleryProPhoto gridProCover flowPro

Voice orbProNow playingProVoice recorderPro

Booking pillProActivity ringsProTime dialProDate reelPro

Keycap keyboardProSlot textSand textProTypewriter terminalPro

Stretch refreshProMorph loaderProSkeleton morphProBlack holeProCharge sessionPro

Sticker peelProTicket tearProPage curlProOrbit logosProPrize wheelPro

Dot gridProImage trailProGravity wellProInk fluidProCursor trail drawPro

Agent statusProTool callProAgent planProAgent timelineProContext windowProReasoning blockProSource cardsProModel cardProAI workflowProCode suggestionProGhost textProImage generationProDictation buttonProSpeech playerProMeeting summaryProReply draftProAgent handoffProPII redactionProResponse feedbackProLLM cost calculatorProProvider keysProGeneration statsProAI translateProTL;DR toggleProConnector setupProSmart form fillProEnrich columnProTicket routerProAsk your dataProAgent cursorProProvider statusProTraining runProAI commandProStarter promptsProAI mascotProImage revealProAI sparkProPixel mascotProGhost mascotProCube mascotProTone tunerProUpgrade promptProReferral cardProTrial bannerProTeam switcherProLive visitorsProSocial proof toastProInstall snippetPro

Data flowProPayment flowProDNS resolutionProModel trainingProMulti-region failoverProVector searchProBranch graphProAgent loopProMixture of expertsProSpeculative decodingProPrompt cacheProReasoning treePro
What’s new4 new
ComponentsScreens

Screens14

Complete app views, from a trading desk to a kanban board, shown at a real desktop size. Each one installs like a block and is built from Arc components.

Dashboards

  • Metrics dashboard screenMetrics dashboard screen
    Metrics dashboardProA complete product analytics app on the screen shell, with sites, saved views, a date range and filters. It has KPI tabs over one chart you can drag to zoom, breakdowns by page, source, location and device, goals, sortable tables, and a detail panel for any row.
  • Market terminal screenMarket terminal screen
    Market terminalProA brokerage app screen where the sidebar switches accounts, pages and watchlists. The trade page has a live candlestick chart, a positions, orders and activity panel, an order ticket and a watchlist you can reorder, and positions, orders and activity also open as full pages with an account summary and a position detail drawer.

Projects

  • Kanban board screenKanban board screen
    Kanban boardProA complete project board inside the Arc app shell, with projects, saved views and live cycle progress in the sidebar, filters for priority, labels and assignee, and cards you can drag between columns or swimlanes. A details panel slides over the board to edit status, priority, assignee, labels, estimate and due date, with sub-issues, linked pull requests, activity and comments.
  • Project board screenProject board screen
    Project boardProA full project overview screen: live progress stats, a milestone track that picks the task list, recent activity and a team panel. Tasks group by stage with filters and drag to reorder, and the task panel edits fields, subtasks and comments in place.
  • Gantt timeline screenGantt timeline screen
    Gantt timelineProA roadmap app screen where you drag gantt bars to reschedule, follow dependency arrows past a today line, zoom by day, week or month, and group by phase, team or owner. Selecting a task opens a details panel for owner, dates and progress, and the same plan also shows as a sortable list and an updates feed.

Calendars

  • Week calendar screenWeek calendar screen
    Week calendarProA full calendar app with a week grid. Drag to create, move and resize events, answer invites right on the grid, and overlay teammates' calendars from a side panel with a mini month and the next meeting. Pages for invites and booking links complete the app.
  • Month calendar screenMonth calendar screen
    Month calendarProA complete calendar app in the Arc shell. It has a month grid with event chips and N more, plus a docked day panel showing busy time, guests, video links and free gaps you can block as focus time. You can filter by calendar or text, drag to reschedule or plan across days, and use the invitations, upcoming and teammate views.

People and customers

  • Team directory screenTeam directory screen
    Team directoryProA complete people directory for a company. Filter by office, each shown with its local time, then browse team-grouped cards or a sortable table. It also has an org chart you rearrange by dragging, time off approvals, and a profile panel showing the hours each person shares with you.

Inbox and support

  • Inbox triage screenInbox triage screen
    Inbox triageProA support inbox where a team assigns, snoozes, resolves and replies to customer conversations, with views, channels and tags in the sidebar and the customer's billing, tags and linked issue beside the thread. Bulk select rows, triage from the keyboard with J, K, E and H, and undo any move.
  • Support conversation screenSupport conversation screen
    Support conversationProA helpdesk conversation screen with inbox views, a live chat thread with notes and shared screenshots, and a composer for replies, notes, saved replies, articles and dropped files. The customer panel shows their profile, connected apps, linked issue, past conversations and an activity timeline.
  • Help center screenHelp center screen
    Help centerProA help center workspace with an article library grouped by collection that you can drag to reorder, a reader that edits and publishes in place, and a panel showing views, votes and the searches that land on each article. It also has a live preview of the help site with instant search, search insights that turn missed searches into drafts, and a reader feedback inbox.

Commerce

  • Product listing screenProduct listing screen
    Product listingProA store admin products screen with collections and sales channels, status tabs, filters, a photo grid or a list you can drag to reorder, and live inventory totals. A details panel edits price, stock per size, status and channels in place, and selected products get bulk actions with undo.
  • Product detail screenProduct detail screen
    Product detailProA product page in a store admin. You edit photos, variants and stock per location, open any variant in a side panel to change price, cost and stock, follow sales by day, and preview the unsaved draft in the store.
  • Invoice studio screenInvoice studio screen
    Invoice studioProA full invoicing app: invoices grouped by status beside the invoice itself, edited in place on the page with live totals, with client, terms, tax and payment methods in a details panel and a send dialog. Drag lines to reorder them, record payments or send reminders, and undo any change.