Infara Component Library

Components / Controls

Buttons, Badges & Tags

Utilitarian controls and status marks. One primary action per decision area; everything else supports.

Button

Action primitives across tiers. One primary per decision area; featured gradient reserved for truly featured actions.

Primary tier

Secondary

Promoted & destructive

With icon

Icon only

Sizes

States

Button Group

Badge

Labels, status marks, tags, and attention chips. Color encodes semantics; text still carries meaning for non-color users.

Semantic

InfoSuccessWarningDestructive

Brand

Brand primaryPromotedFeatured

Neutral

DefaultSecondaryOutlineGhostLink

Status pills

RunningQueuedDegradedFailedCompleteArchived

Operational tags

nova-7b-v12v2.0.3us-east-1cgrounded · 0.914 sources

With count

12 pendingNEW8 alerts3 warnings

Count Badge

Numeric overlay or inline chip. Use `max` to cap long counts (e.g. 99+).

Sizes

31242

Variants

94299+9

Overlay

7

99+

Card

Default

Standard card with subtle shadow.

Glass

Semi-transparent with backdrop blur.

Accent

Brand blue top border accent.

Interactive

Clickable with hover lift and ring.

Section Header

Monitoring

Operational summaries and alert triage.

||

Registry Status

Current publish queue for consumer apps.

Components / Forms

Inputs & Form Fields

Accessible single-value and compound input primitives with consistent focus and error affordances.

Input & Label

Single-line input states: rest, filled, focused, invalid, disabled, read-only, and monospace variants.

Email

Workspace

API key

Key revoked. Rotate before next run.

Organization

Run ID

Max tokens

Field

Maintenance Window

Used for operator notifications and release holds.

Rollback Contact

Primary escalation owner for failed deployments.

A rollback contact is required.

Notification routing

Release Notifications

Choose which operator channels receive registry publish and rollback updates.

Push notifications

Immediate alerts for publish failures and rollback events.

Email digests

Daily summary for staging publishes and content updates.

Form

Select

Native Select

Combobox

Checkbox & Switch

Accept terms

Dark mode

Date Picker

Components / Feedback

Alerts, Toasts, Progress & Skeletons

Persistent, transient, and stateful feedback. Every surface should declare skeleton, empty, and error coverage before it ships.

Tabs

Route-like or pane-like switching. Keep trigger labels short and keyboard-reachable.

System overview. Quiet states stay quiet; anomalies surface via status pills.

Window: last 1h · 42 samples.

Skeleton

Placeholder blocks for asynchronous content. Use matching shapes to reduce layout shift.

Separator

Above

Below

Hover for info

Empty

No active escalations

Monitoring queues are clear. New incident pages will surface here once thresholds trip.

Last resolved ticket closed 18 minutes ago.

Alert

Inline, persistent feedback. Use for system-level or page-level notices.

Inference cluster rotated

New primary is us-east-1c. Historical runs are preserved.

Deployed to production

model nova-7b-instruct-v12 is now serving 100% traffic.

Approaching quota

You've used 82% of this month's compute budget.

Token limit exceeded

Request dropped at 128k tokens. Consider chunked streaming.

Infara Reason beta

Multi-step planning is available on Pro workspaces.

Toast

Transient, time-out notifications. Four tones, stacks in lower-right.

Avatar

Initials fallback with tone-tinted backgrounds, size scale, and stacked row for attribution.

Sizes

HVHVHVHVHV

Tones

HVJPTIARRDNL

Stacked

HVJPTI+5

8 reviewers

Item

Deployment Summary

Weekly registry publish for monitoring and compliance packages.

Queued

2

Assigned Reviewer

Human gate

Blake will review release notes before publish.

Updated 14 minutes ago

Release Notes Draft

Needs approval

Add consumer install notes before pushing the next registry cut.

Shared with the launch list and QA reviewers.

Open

Additional Review States

Large media layout

Healthy

Size and media variants should stay readable without becoming a new card system.

Progress & Spinner

Determinate and indeterminate progress signals.

Weights download72%

x

Training epoch 3/544%

x

Thinking...Generating 24 steps

Components / Display

Tables, Timelines & Stats

Dense data surfaces optimized for operational scanning, selection, and row-level action.

Radio Group

Default plan

Pro plan

Enterprise plan

Slider

Alert threshold

Maintenance window

Range sliders must expose distinct accessible names for each thumb.

Textarea

Toggle

Default variant

Brand primary active state

Promoted attention active state

Toggle Group

Pagination

Right-click here

Input OTP

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Accordion

Components / Overlays

Menus, Dialogs & Overlays

Modal and transient surfaces. Focus management, escape paths, and keyboard return are mandatory.

Collapsible

3 items hidden

Scroll Area

Item 1

Description for item 1.

Item 2

Description for item 2.

Item 3

Description for item 3.

Item 4

Description for item 4.

Item 5

Description for item 5.

Item 6

Description for item 6.

Item 7

Description for item 7.

Item 8

Description for item 8.

Item 9

Description for item 9.

Item 10

Description for item 10.

Item 11

Description for item 11.

Item 12

Description for item 12.

Item 13

Description for item 13.

Item 14

Description for item 14.

Item 15

Description for item 15.

Item 16

Description for item 16.

Item 17

Description for item 17.

Item 18

Description for item 18.

Item 19

Description for item 19.

Item 20

Description for item 20.

Dialog

Alert Dialog

Sheet

Drawer

Menubar

Components / Navigation

Navigation & Wayfinding

Shell-level and in-surface navigation. Keyboard-first, active-state clear, density-aware.

Sidebar

Carousel

1

2

3

4

5

Resizable

Panel A

Panel B

Panel C

Aspect Ratio

16:9

16 : 9

4:3

4 : 3

Command

Components / Utility

Utility Primitives

Supporting primitives that ride alongside the main control set — typography, charts, writing direction, keyboard hints.

Kbd

Close panelEsc

Quick searchCtrl+K

Command paletteShift+Cmd+P

Calendar

May 2026

Direction provider

Infara-native DirectionProvider + useDirection. Wrap branches of the tree that need RTL mirroring; components can call useDirection() to mirror their internals.

Active directionltr

Active directionrtl

Toast (Sonner)

Table

Sample inventory data
Name	Status	Role	Hours
Alice Chen	Active	Engineer	38
Bob Martinez	Active	Designer	42
Carol Wright	Away	PM	28

Data Table

Core table with sort, selection, row actions, and mini-charts in cells.

				Owner
trial-aurora-042	nova-7b-v12	running	480 ms	HVHana Voss
grounded-qa-eval	nova-7b-v11	queued	—	RDRahul D.
refactor-gen-09	nova-34b-v3	degraded	2.1 s	JPJin Park
safety-probe-f	nova-7b-v12	failed	timeout	ARAoife R.
tool-use-bench	nova-mixture-1	complete	310 ms	TITeam Infra

248 total results

Data Table — compact

Minimal variant without toolbar. Same primitive, different composition.


TX-HUDSONOAKS-EA-1	Texas	Healthy	14
OK-NORMAN-POP-1	Oklahoma	Warning	9
AR-FAYETTEVILLE-WEST-3	Arkansas	Healthy	11

24 total results

Input Group

https://

Typography

Registry copy system

Branded type should carry hierarchy before any surrounding layout or product chrome gets added.

Use the typography components to keep long-form product copy, release notes, and operational summaries consistent across preview surfaces.

Inline technical references such as registry.json and shadcn build should stay visually distinct without breaking reading rhythm.

Large utility copy for section callouts

Smaller support label

Muted metadata for timestamps and system notes.

Ship the registry source as the branded default.
Document additive variants instead of inventing local one-offs.
Keep preview examples close to real operator workflows.

Draft the API shape.
Validate the preview coverage.
Publish the registry update after QA clears it.

Consumer apps should import the branded components directly instead of restyling them locally.

UI components

Button

Button Group

Badge

Count Badge

Card

Section Header

Monitoring

Registry Status

Input & Label

Field

Form

Select

Native Select

Combobox

Checkbox & Switch

Date Picker

Tabs

Skeleton

Separator

Info Tooltip

Empty

Alert

Toast

Avatar

Item

Breadcrumb

Progress & Spinner

Radio Group

Slider

Textarea

Toggle

Toggle Group

Pagination

Hover Card

Context Menu

Input OTP

Accordion

What is Infara UI?

How do I install components?

Can I customize the theme?

Collapsible

Scroll Area

Dialog

Alert Dialog

Sheet

Drawer

Dropdown Menu

Menubar

Navigation Menu

Sidebar

Monitoring workspace

Popover

Carousel

Resizable

Aspect Ratio

Command

Kbd

Calendar

Direction provider

Toast (Sonner)

Tooltip

Table

Data Table

Data Table — compact

Input Group

Typography

Registry copy system