Components

HyperKit ships 131 components. Every component is themed through --sk-* CSS custom properties and imported from a single package. Cards with a green dot have a live, editable playground.

import { Button, Card, Table } from '@ybouhjira/hyperkit';

#Layout

Structural primitives for arranging content.

AspectRatioMaintains the aspect ratio of its child.BoxBase polymorphic container with spacing and color tokens.CenterCenters content on both axes.ContainerMax-width page wrapper with padding.DocumentPageA4/letter page container with margin simulation.FlexFlexbox container with direction, align, justify, gap, and wrap props.GridCSS grid with columns, gap, and auto-fit/fill.MasonryGridPinterest-style masonry layout.MediaGridResponsive media card grid.ScrollAreaCustom-scrollbar scroll container.SectionLabeled page section with a heading.SpacerFlexible space filler for flex and grid layouts.StackVertical flex column with a consistent spacing token.WrapFlex-wrap container for tag and chip layouts.

#Input

Form controls and user-input components.

AudioInputMicrophone recording input.ButtonPolymorphic button with size and variant props.CheckboxCheckbox with indeterminate state.ColorInputColor picker input.DateInputDate and time picker input.DropZoneDrag-and-drop file drop target.FileInputFile upload input with drag support.FilterChipToggle chip for filtering.ImageInputImage upload with preview.InputText input with label, error, and size variants.NumberInputNumeric input with increment/decrement controls.RangeSliderDual-handle range slider.RecordButtonPulsing record/stop button.SearchInputInput with search icon and clear button.SegmentedBarSegmented control / pill selector.SegmentedControlSegmented option control.SelectAccessible dropdown selection built on @kobalte/core.SliderSingle-value range slider.SwitchOn/off toggle switch.TagInputMulti-value tag/token input.VideoInputCamera/video capture input.

#Display

Content presentation and data display.

AnnotationLayerOverlay layer for annotating content.BadgeStatus and count label with variants.CardContent card with padding, radius, and shadow.CodeBlockSyntax-highlighted code with copy button.ColorDotDecorative color dot.DiffViewSide-by-side and inline diff viewer.ImagePreviewImage with zoom and overlay.KbdKeyboard key display.LightboxFullscreen media lightbox.MarkdownMarkdown renderer with streaming support.MetricCardKPI card with value, label, and trend.ProjectCardProject summary card with metadata.SignalGridGrid of signal strength indicators.SkeletonLoading placeholder shimmer.SparklineMini inline chart.StatusDotColored status indicator dot.StreamingTextAnimated text that streams character by character.TerminalOutputANSI-aware terminal text display.TextPolymorphic text with size, weight, and color tokens.TimelineVertical event timeline.TooltipHover tooltip built on @kobalte/core.WaterfallChartWaterfall/bar breakdown chart.

#Feedback

Loading, progress, and status indicators.

EmptyStateEmpty content placeholder with icon, title, and CTA.ErrorBannerError, warning, and info banners.LivePulseLive status pulse indicator.ProgressBarHorizontal progress bar.ProgressRingCircular ring progress indicator.SpeakingIndicatorVoice-activity indicator.SpinnerLoading spinner with size variants.StreamingIndicatorAnimated typing/streaming dots.TopProgressBarTop-of-page route progress bar.

Menus, overlays, and app navigation chrome.

AccordionCollapsible section group.BottomNavBottom navigation bar.BottomSheetMobile bottom sheet overlay.BreadcrumbPath breadcrumb trail.CollapsibleSingle collapsible section.DialogModal dialog built on @kobalte/core.DrawerSlide-in drawer panel.DropdownTrigger with floating menu.MenuBarApplication menu bar (File/Edit/…).MobileBottomBarMobile bottom action bar.MobileNavBottom navigation bar for mobile.MobilePanelViewMobile-optimized panel switcher.ModeSwitcherApp mode/workspace switcher.PaginationPage navigation control.PopoverAnchored floating content.SeparatorHorizontal or vertical divider.SidebarCollapsible navigation sidebar.StatusBarBottom status bar with segments.SuggestionChipsHorizontal chip row for suggestions.TabBarHorizontal tab bar with icons.TabsHorizontal tabbed content.

#Chat & AI

Chat interfaces and LLM tooling.

AiCompanionFloating AI assistant companion widget.ChatWindowFull chat UI with messages and input.CostTrackerToken and cost usage display.LLMChatBoxLLM chat with tool rendering, approval, and cost tracking.MessageBubbleSingle chat message bubble.MessageInputMulti-line message composer.MessageListVirtualized message list.ModelSelectorLLM model picker dropdown.PromptQueueQueued prompt list.SessionIndicatorActive session badge.SessionManagerSession CRUD panel.SessionSearchSession search and filter.SessionTabsMulti-session tab switcher.SubagentTrackerMulti-agent progress tracker.ToolApprovalApprove or reject AI tool calls.ToolExecutionTool execution status display.

#Data

Tables, boards, dashboards, and file browsing.

ActionFormSchema-driven form builder.DashboardContainerDrag-and-drop card dashboard.DashboardGridResponsive dashboard grid.DirectoryPickerDirectory selection dialog.FileExplorerFile browser with tree, list, icons, and gallery views.IssueBoardGitHub-style issue tracker board.KanbanBoardDrag-and-drop Kanban board.LogViewerStructured log stream viewer.MediaTrimmerVideo/audio trim range selector.ProjectDashboardProject overview dashboard.RepoCardGit repository summary card.StatBarHorizontal stats bar.TableData table with typed columns, sorting, and selection.VideoSourcePickerVideo source selection (library, URL, or local file).

#Utilities

Palettes, dialogs, settings, and developer tools.

BugReporterIn-app bug report dialog.CommandPaletteKeyboard-driven command palette with fuzzy search.ConfirmDialogConfirmation modal with OK/Cancel.ConnectionStatusNetwork/WebSocket connection indicator.ContextMenuRight-click context menu.DevToolbarDevelopment toolbar overlay.GuidedTourStep-by-step onboarding tour.InspectorComponent and state inspector panel.SettingsPanelTabbed settings drawer.SplitButtonButton with dropdown arrow.ThemeBuilderInteractive theme editor.ThemePickerModalTheme selection modal.ToastToast notification system.UserProviderUser identity context provider.