Back to home

Component Catalog

Browse all 71 Primstack primitives. Each one is typed, tested, and accessible.

Button

Versatile button with multiple variants, sizes, and states.

form-inputsactionform

Input

Styled text input with theme-aware focus states.

form-inputsformtext

Select

Accessible select menu built on Radix UI.

form-inputsformdropdown

Checkbox

Accessible checkbox with indeterminate state support.

form-inputsformtoggle

Slider

Range slider with optional label display.

form-inputsformrange

Card

Composable container with header, content, and footer slots.

data-displaycontainersurface

Badge

Small status label with color variants.

data-displaylabelstatus

Table

Composable HTML table with theme-aware styling.

data-displaydatagrid

Avatar

User avatar with image, fallback initials, and size variants.

data-displayuserprofile

CodeBlock

Syntax-highlighted code display with copy support.

data-displaycodesyntax

Alert

Contextual feedback messages with variant styling.

feedbackmessagenotification

Toast

Temporary notification popups with action support.

feedbacknotificationpopup

Dialog

Modal dialog with overlay, accessible focus management.

overlaysmodalpopup

Tabs

Tabbed interface with accessible keyboard navigation.

navigationtabbedswitch

Accordion

Collapsible content sections with smooth animations.

navigationcollapseexpand

Textarea

Multi-line text input with auto-resize support.

form-inputsformtext

Switch

Toggle switch for boolean settings.

form-inputsformtoggle

RadioGroup

Accessible radio button group for single selection.

form-inputsformselection

DatePicker

Calendar-based date selection input.

form-inputsformdate

FileUpload

Drag-and-drop file upload zone with preview.

form-inputsformfile

Form

Structured form layout with field groups and validation.

form-structureformvalidation

Label

Accessible form label with Radix UI integration.

form-structureformaccessibility

DataTable

Full-featured data table with sorting, filtering, and pagination.

data-displaydatagrid

AvatarGroup

Stacked avatar display for multiple users.

data-displayusergroup

Callout

Highlighted content block for tips, warnings, or notes.

data-displaynotetip

EmptyState

Placeholder UI for empty lists, search results, or pages.

data-displayplaceholderempty

FileTree

Hierarchical file/folder tree display.

data-displayfiletree

Tree

Generic tree view with expand/collapse nodes.

data-displaytreehierarchy

MarkdownRenderer

Renders markdown content with GFM support.

data-displaymarkdowncontent

Progress

Horizontal progress bar with percentage display.

feedbackloadingbar

CircularProgress

Circular progress ring with percentage or label.

feedbackloadingring

Spinner

Loading spinner with size variants.

feedbackloadingindicator

Skeleton

Placeholder loading shimmer for content areas.

feedbackloadingplaceholder

StatusIndicator

Colored dot indicator for online/offline/busy states.

feedbackstatusdot

StepIndicator

Multi-step progress tracker for wizards and flows.

feedbackstepperwizard

AlertDialog

Confirmation dialog requiring explicit user action.

overlaysmodalconfirm

Drawer

Slide-out panel from any edge of the screen.

overlayspanelslide

Popover

Floating content panel anchored to a trigger.

overlayspopupfloating

Tooltip

Hover/focus tooltip with configurable placement.

overlayshinthover

DropdownMenu

Accessible dropdown menu with submenus and keyboard navigation.

overlaysmenudropdown

ContextMenu

Right-click context menu with submenus.

overlaysright-clickmenu

Command

Command palette with fuzzy search and keyboard shortcuts.

overlayssearchpalette

Navbar

Top navigation bar with brand, links, and mobile menu.

navigationheadertop-bar

Sidebar

Collapsible side navigation with groups and menu items.

navigationside-navmenu

Breadcrumb

Navigation breadcrumb trail with separator support.

navigationtrailpath

Pagination

Page navigation with previous/next and page numbers.

navigationpagespaging

Separator

Visual divider line, horizontal or vertical.

layoutdividerline

ScrollArea

Custom-styled scrollable area with thin scrollbars.

layoutscrolloverflow

AspectRatio

Enforces a fixed aspect ratio on child content.

layoutratioimage

Collapsible

Show/hide content with a trigger toggle.

layouttoggleexpand

Text

Themed text and heading components with size/weight variants.

typographytextheading

CopyButton

One-click copy-to-clipboard button with feedback.

utilitiesclipboardcopy

IconButton

Square button optimized for icon-only actions.

utilitiesiconaction

KeyboardShortcut

Styled keyboard shortcut display (⌘K, Ctrl+S).

utilitieskeyboardshortcut

ChatMessage

Chat bubble for user and assistant messages.

agenticchatmessage

ChatInput

Message input with send button for chat interfaces.

agenticchatinput

ChatContainer

Scrollable container for chat message lists.

agenticchatcontainer

ConversationThread

Full conversation view with date separators.

agenticchatthread

ToolCall

Display for AI tool/function call execution.

agenticaitool

ToolOutput

Formatted display for AI tool execution results.

agenticaitool

ToolPermissions

UI for granting/denying AI tool access.

agenticaipermissions

ToolSelector

Multi-select interface for choosing AI tools.

agenticaitools

ModelSelector

AI model picker with provider grouping.

agenticaimodel

AgentSettings

Configuration panel for AI agent parameters.

agenticaiconfig

PromptInput

Rich prompt input with model/tool attachments.

agenticaiprompt

ResponseCard

Styled container for AI response content.

agenticairesponse

ThinkingIndicator

Animated dots showing AI is processing.

agenticailoading

StreamingText

Typewriter-style text animation for streaming responses.

agenticaistreaming

AIProgress

Multi-step AI task progress with status indicators.

agenticaiprogress

TokenCounter

Visual token usage meter for AI interactions.

agenticaitokens

SystemMessage

Styled system/info message for chat interfaces.

agenticaisystem