Skip to content
CroStreamUI kit

CroStream UI kit · Components

Components

192 components in 24 groups, built on the foundations and on Bits UI for keyboard and focus behaviour. Every one is checked in both themes, at every text size and in compact density.

  1. Actions Buttons in every emphasis, toggles, links that look like buttons, and the spinner they share. ButtonSpinner
  2. Forms Labelled fields with hints and errors, text and number entry, choices, switches and sliders. FieldInputTextareaNumberInputInlineEditPinInputCheckboxRadioGroupSwitchSliderSegmentedTemplateInput
  3. Selection & navigation Pick one from many, search as you type, switch views, and act on things from a menu. SelectComboboxTabsMenuContextMenu
  4. Overlays Hints, popovers, dialogs, drawers, confirmations and toasts, layered over the page. TooltipHoverCardPopoverDialogDrawerConfirmDialogToast
  5. Display & feedback Status at a glance: badges, chips, live pills, progress, callouts, empty states and cards. BadgeChipKbdAvatarStatusDotLivePillProgressMeterSkeletonCalloutEmptyStateCardDividerCounterTimelineCarousel
  6. Data Tables that sort, select and collapse to cards on phones, plus pagination, key/value lists, highlighted code and a full code editor. TablePaginationDescriptionListCodeBlockCodeEditorCopyButtonJsonTree
  7. Dates & times Picking when: a calendar, date and date-range pickers, and time fields, locale-aware and keyboard-first. CalendarDatePickerDateRangePickerTimeFieldWeekdayPicker
  8. Guidance Walking people through things: step indicators, multi-step wizards and product tours with coachmarks. StepperWizardTour
  9. Collections Browsing many things at once: selection, trees, asset grids, cards and rows, filters, selection bars, thumbnails, infinite lists and the inspector. SelectionModelTreeViewAssetGridThumbnailCollectionViewFilterBarItemCardSelectionBarInfiniteListInspectorPanelCategoryNavFavoriteToggle
  10. Media Sound, video and pictures: players with a scrubber and waveform, one-at-a-time playback, a lightbox, drop zones, file pickers and an upload queue. MediaPlayerScrubberWaveformPlaybackCoordinatorLightboxDropZoneFileTriggerUploadQueue
  11. Editor The parts of a visual editor: pane layout, toolbars, zoom, a pan-and-zoom canvas, transform handles, save status, undo, shortcuts and version history. EditorLayoutToolbarZoomControlCanvasViewportTransformBoxScaledPreviewSaveStatusUnsavedChangesGuardVersionHistorySplitButtonHotkeysHistoryStepList
  12. Inspector fields Dense property editing for editors: property panels and rows, slider fields, vectors with aspect lock, box sides, angles, colour, swatches, gradients and nine-slice guides. PropertyPanelSliderFieldVectorInputBoxSidesInputAngleInputColorInputSwatchGridGradientEditorOptionalFieldPickerTriggerIconPickerIconRadioGridSliceEditor
  13. Settings forms Settings built from a schema, and every field kind they need: tags, key-value pairs, lists, secrets, hotkeys, JSON, sizes, repeatable rows and tri-state checklists. SchemaFormTagInputKeyValueEditorListInputSecretInputHotkeyInputJsonFieldSizeInputRepeaterListTriStateChecklistEditableListConditionBuilder
  14. Pickers & dialogs Choosing things and confirming changes: presets, a gallery picker, media pickers and fields, a folder picker, form and prompt dialogs, and confirmations that show what will be affected. PresetMenuGalleryPickerAssetPickerAssetFieldTreePickerDialogFormDialogPromptDialogImpactConfirmDialog
  15. Charts Stream data you can read at a glance: sparklines, stat tiles, line and area, bars, the time chart, heatmaps and share bars, on a validated data palette. SparklineStatTileLineChartBarChartTimeChartHeatmapShareBar
  16. Content Long-form reading: prose styles for plain Markdown, admonitions, accordions, disclosures and numbered steps. ProseAdmonitionAccordionDetailsSteps
  17. Docs The pieces a docs page is built from: link cards, screenshots, chat bubbles, contents, file trees, breadcrumbs and settings tables. LinkCardFigureChatBubbleTableOfContentsFileTreeBreadcrumbsSettingsTable
  18. Window chrome macOS and Windows drawn in code: app windows, browsers, Finder and Explorer, terminals, desktops and notifications, so docs can show UI without screenshots. WindowBrowserWindowFileBrowserTerminalDesktopNotification
  19. Site navigation How visitors get around the website and docs: top navs with sub-navs and mega menus, mobile menus, docs side navs, and footers from slim to super. SiteNavMegaMenuMobileNavDocsSidebarSiteFooter
  20. App navigation How streamers get around the app: top bars, a collapsible sidebar, a bottom status bar, a phone tab bar and a Ctrl+K command palette. AppTopBarAppSidebarAppStatusBarBottomTabBarCommandPalette
  21. App UI The CroStream app screens, built on the kit and shared with docs and the demo: the port provider, supporter gate, provider marks, platform support and manifest-driven forms. ProviderMarkLockedPlatformSupportManifestFormAppShell
  22. Page structure The top of a page: announcement bar, heroes from slim to full-bleed, page headers slim and thick, and numbered section headers. AnnouncementBarHeroPageHeaderSectionHeader
  23. Marketing Blocks that sell: calls to action, feature grids and rows, stats, testimonials, integrations, plans, downloads, changelog and FAQ. CallToActionFeatureGridFeatureRowStatBandTestimonialIntegrationStripPlansComparisonTableDownloadPickerChangelogFaq
  24. Widgets Overlay widgets on show: live preview frames, widget and set cards, the detail stage, versions, a settings panel drawn from the widget, and an event simulator. WidgetFrameWidgetSettingsEventSimulatorWidgetCardSetCardSetShelfWidgetGridWidgetSectionWidgetStageWidgetBylineDetailColumnsVersionListChipFilterFilterSelect