Iris UI
Browse components

Catalogue

Components and blocks

164 pieces on one token set. Each page has a live preview in both themes, its guidelines and the command that installs it.

Install

  1. In a project set up for shadcn (npx shadcn@latest init), add the foundation: tokens, fonts and focus rules.

    npx shadcn@latest add https://irisui.dev/r/foundation.json

  2. Import it once from your global stylesheet, after Tailwind v4. It brings the tokens, the fonts and the Tailwind theme every component is styled with.

    @import "tailwindcss";
@import "./components/iris/styles/foundation.css";

  3. Add any component by its URL, or register the namespace in components.json and use @iris/<name>.

    npx shadcn@latest add https://irisui.dev/r/split-button.json
    {
  "registries": {
    "@iris": "https://irisui.dev/r/{name}.json"
  }
}

  4. Iris UI's --accent token shares its name with shadcn's default theme. If the project keeps shadcn's theme, import foundation.css after it so Iris UI's value wins, or remove shadcn's --accent.

  5. Set data-theme="dark" on <html> for dark mode; every token has a tuned dark value.

AI interface

AgentScreenWatch an agent's screen — open, teach a task, record.ApprovalCardHuman-in-the-loop questions the agent asks before acting.ChatPanelTabbed chat panel with reasoning replies and a composer.CodeBlockSource code with a filename, copy and collapse, or a unified diff of changed lines.ContextCardsRetrieved knowledge chunks with their sources.DiffTableAI-proposed edits sweeping through tabular data.FilterTableStatus chips that reorganize live data.FineTuneCardThe agent adjusts design properties in an inspector.FlowchartWorkflow trigger and condition steps on a dotted canvas.GlideMenuA wrapper that draws one shared hover highlight and glides it between the interactive rows inside it.InsightCardsPaged agent insights with scrub-ready live charts.LoadingStatePixel-grid loader with shimmer and elapsed time.PromptBarComposer with @ sources, / commands, model picker, and dictation.RecommendationCardAgent suggestion with a confidence meter and actions.RecordsTableCRM-style grid with tags, sorting, and relationship status.SearchListCommand search with live filtering and an empty state.SelectionActionsHighlight a passage and hand it to the agent to rewrite.SidebarNavCollapsible workspace and chat navigation with gliding hover states.StreamingTextStreamed answer with inline sources, actions, and follow-ups.TaskRowsLive agent task status — running, failed, completed.ThinkingStateExpandable traces — steps, reasoning, search, coding.ToolChipsCode edits and tool calls as compact chips.

Actions

ButtonA clear, responsive action with quiet secondary states.ActionButtonA compact button for frequent toolbar actions.SplitButtonA primary action with a menu of nearby alternatives.ButtonGroupRelated actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.FloatingButtonGroupSeparate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.ExpandingButtonGroupIcon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.DropdownMenuA focused list of actions anchored to a trigger.ContextMenuSecondary actions kept close to the selected object.CopyButtonCopy a value with immediate confirmation.ThemeSwitchFour smooth ways to move between light and dark appearance.HoldToConfirmConfirm a destructive action by holding, not tapping.SwipeActionsReveal row actions with a swipe, or from the same actions in a menu.ReactionsAcknowledge a post in one tap, with counts that roll.UserMenuYour account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.IconMorphIcons that morph between states: menu to close, play to pause, copy to check, and more.ConfirmMorphA destructive button that morphs into an inline confirmation, a spinner, and a result with undo.

Inputs

InputA single line field with clear labels and useful states.TextareaA multiline field for notes, descriptions, and longer text.SelectA compact choice field with a keyboard friendly menu.ComboboxSearch and select from a list without leaving the field.CheckboxA binary choice with a precise, legible state.SwitchA tactile toggle for settings that take effect immediately.MultiSelectSelect several values while keeping the field readable.NumberFieldEnter a bounded number with clear increment controls.PasswordFieldCapture sensitive text with a visible reveal control.SearchFieldA recognizable search entry point with clear affordances.TagInputTurn short text values into removable tags.FileDropzoneA generous target for dropping one or more files.RadioGroupChoose one option from a visible set.SegmentedControlSwitch between a small set of related views.CalendarBrowse dates in a clear, compact month view.DatePickerChoose a date without losing context.TimePickerChoose a time with sensible keyboard behavior.RatingA simple, accessible way to capture a numeric opinion.SliderPick a value or a range on a track that follows your finger.ElasticSliderA slider that stretches like rubber past its ends, with a swaying value tag and detents the thumb clicks into.InlineEditRename in place: the text becomes a field without moving.ExpandingSearchAn icon that morphs into a search field with results beneath it.ChipGroupFilter by a few facets with chips that morph as you pick them.PasswordStrengthShow how strong a new password is while it is typed.SignaturePadSmooth ink that thins with speed, with undo, replay, and PNG or SVG export.DateRangePickerA range picker that grows from its trigger into two months with presets and a stretching range highlight.ColorPickerA swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.MorphSelectA select whose trigger grows into the list, with a gliding highlight and type-ahead.ScrubInputA Figma-style number field: drag the label to scrub, or type values, units, and arithmetic.PhoneInputA phone field with a country picker, formatting as you type, and E.164 output.MoneyInputA currency field with live grouping, stable width, rolling digits, and minor-unit output.ShortcutRecorderRecord key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.MentionInputA textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.RichTextEditorA lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.BillingToggleA monthly and yearly switch with a savings badge and prices that roll to the new amount.RadioCardsSelectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.FileUploadA complete file selection flow with constraints, progress, and error feedback.OtpInputA six digit verification flow with paste support and keyboard navigation.

Data display

AvatarA compact identity marker for people and accounts.AvatarGroupShow a team or set of contributors in a small space.BadgeA small label for status, category, or metadata.CardA contained group of related content and actions.MetricCardA compact summary for a number that needs context.EmptyStateA useful next step when there is nothing to show yet.TreeViewNavigate nested folders and structured content.PaginationMove through a long collection with clear bounds.FilterToolbarKeep collection filters close and easy to reset.SortableDataTableCompare structured records with sortable columns.AnimatedCounterGive changing totals a clear sense of movement.ReorderableListOrganize items with direct drag and drop.ImageCompareDrag a divider across two images to see what changed.CarouselBrowse a row of slides by dragging, flicking, or arrowing through them.CardStackReview a deck one card at a time, with a throw and an undo.TimelineFollow what happened, newest first, grouped by day.JsonViewerA collapsible JSON tree with search, paging for long arrays, and copy value or path.ChatThreadA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.CommentThreadThreaded comments with replies, reactions, mentions, inline edit, and resolve.ChipA small monospace token for code values such as field names, IDs and flags, set inline in text.EntityChipAn inline reference to a supplier, person or record: a coloured monogram disc plus the name in a soft pill.ValuePillA soft inline pill that sets off a plain value (a date, amount, name or count) inside running text.

Charts

SparklineShow a compact trend beside a value.GaugeShow a value against a known range.BarChartCompare one measure across days and scrub any bar for its value.ActivityHeatmapSee a year of activity at a glance, one square per day.LineChartA multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.DonutChartA donut whose arcs morph between datasets, with the active value rolling into the center.StreamgraphLayered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.BrushChartA dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.RidgelineOverlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.TreemapA squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.WaffleChartA ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.SlopeChartBefore and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.

Feedback

AlertA persistent message that helps people recover or continue.ToastBrief confirmation for a completed background action.ProgressShow how much of a known task is complete.SkeletonReserve space while content is still loading.ToastStackStack short results at the edge until you reach for them.UsageMeterShow what fills an allowance and how close it is to the limit.OnboardingChecklistGuide a new workspace through setup, one step at a time.StepperShow where a person is in a multi-step flow and what is done.CountdownA launch countdown with rolling digits that morphs into a live state at zero.CookieConsentA consent bar that morphs into preferences and folds into a reopen button.AnnouncementBarA top banner that rotates messages, counts down, and collapses smoothly when dismissed.NotificationCenterA home for updates with read state, grouped information, and animated disclosure.ProgressRingA small circular progress ring with content in its center, used as a task badge.StatusPillA small rounded pill with an optional leading dot that labels the state of a run, deployment, or record.TextRowA label-left, value-right row with an optional quiet meta value, the basic building block of summary cards.

Overlays & disclosure

DrawerA temporary side surface for focused work.AccordionProgressively reveal supporting information in place.DialogA focused surface for decisions that need attention.PopoverA small anchored surface for contextual information.TooltipShort supporting text for unfamiliar controls.TabsSwitch between related content in the same context.ExpandableCardGive a dense card more room when requested.BreadcrumbShow where a page sits in a hierarchy.BottomSheetA sheet that rests at a peek or full height and follows your finger.HoverCardPreview a person or link on hover or focus without leaving the page.ResizablePanelsTrade space between panes by dragging the divider between them.ScrollAreaA native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.ExpandableTextLong text clamped to a few lines with a soft fade that glides open with Read more and closes with Show less, shown only when the text overflows.CommandPaletteA complete keyboard driven action surface with search, grouped results, and shortcuts.

Text & motion

TextRevealReveal a short piece of content with restrained motion.InViewTitleBring a section title in as it scrolls into view.TextMorphMorph a label into its next state, letter by letter.TextShimmerShow ongoing work with a calm light across the words.SlotTextText and numbers that spin into their new value on staggered slot machine reels.ShimmerA shimmering label: a soft gradient that sweeps across inline text to signal the agent is processing.StreamTextStreaming text: reveals characters quickly like a token stream, resolves the leading edge out of a soft blur, and keeps a caret that blinks once the text settles.

Blocks

SignupFormAn account creation flow with field validation, password strength, and a clear completion state.LogoMarqueeA quiet, continuously moving row of brand marks with a pause control.PlanComparisonCompare meaningful differences between plans and billing periods.ChangelogFeedRelease notes you can filter, open in place, and scroll through month by month.SignInA sign in card that morphs from email to a six digit code to your account.PageHeaderA project page header that folds into a compact bar as you scroll, with tabs whose counts roll.EmptyStatesFour empty states in one illustration whose shapes morph between scenes as you switch tabs.LoginCenteredA passkey-first login card on a quiet ring backdrop that morphs through email and code.SiteHeaderA sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.SiteFooterA website footer with link columns and newsletter, a minimal layout, and a large fading brand wordmark.HeroSectionThree full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a mesh gradient.FaqSectionFAQs as an accordion, a topic rail, or a searchable list that highlights matches.ContactSectionA validated contact form that morphs into a confirmation, support channels, and office cards with local times.BlogGridA blog index with a featured post, category filter, post cards, pagination and an in-place reader.ComparisonTableAn us versus them table with a sticky header, a highlighted column, and a stacked phone view.StatsBandHeadline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.CtaSectionA call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.NewsletterSignupAn email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.

Foundation and variants

Iris UI foundationIris UI's tokens (colour, surface, ink, line, radius, shadow, spacing, type) in light and dark, the Tailwind v4 theme that maps them to utilities, motion variables, keyboard focus rules, keyframes and the Inter, Geist and JetBrains Mono fonts. Requires Tailwind v4: import components/iris/styles/foundation.css after tailwindcss. strict.css (optional, imported before foundation.css) removes Tailwind's default palette, shadows and radii.Today hookThe current date, stable between server and client renders.Copy feedback hookCopies text and reports a short-lived copied state.Link and image providerIrisProvider: lets an app swap the link and image elements Iris UI components render, such as next/link and next/image.Demo mediaSample people and photos the demos use, as initials and flat placeholder shapes.Motion tokensThe shared motion presets (durations, easings, springs, staggers) every animated Iris UI component reads.Class namesCn(): clsx plus tailwind-merge, taught Iris UI's theme names.