@dscout/strata

A shared React component library for building Tailwind based dscout interfaces. The primary consumer is Figma Make, which uses real React components from npm in prototypes.

Installation

npm install @dscout/strata

Peer dependencies

React 18+ is required:

npm install react react-dom

Usage

// CSS (required — contains all Tailwind utilities and design tokens)
import '@dscout/strata/styles.css';

// Barrel import
import { Button, Modal } from '@dscout/strata';

// Or per-component subpath import
import Button from '@dscout/strata/button';

Components

Buttons & inputs

• Button, ButtonWithTooltipAndPopover, PillButton, PromptButton, SendButton, SourceButton
• CheckboxInput, RadioInput, Switch (+ SwitchColor type)
• TextInput, Textarea
• Datepicker
• Select

Surfaces & layout

• Modal
• Popover, PopoverMenu, PopoverMenuItem
• TooltipContainer, TooltipProvider
• Callout
• CollapsibleContent
• ScrollFadeContainer
• ResizeHandle, useResizeHandle
• WorkspaceLayout, useWorkspaceLayout, useNavState (plus WorkspacePane, WorkspaceState, WorkspaceAction, WorkspaceLayoutHandle, WorkspaceLayoutProps, PrimaryHeaderProps, SecondaryHeaderProps, PaneProps, NavProps types)

Chat & command surfaces

• ChatMessage, ChatMessagesArea, ChatThinkingIndicator, MessageTextarea
• CommandMenu (compound: .Search, .Filters, .List, .Item), CommandAnchoredMenu, CommandPopover

Text & rich content

• Markdown — opinionated MarkdownRenderer (@dscout/strata/markdown). The individual block renderers are exposed too as drop-in components={...} overrides: BasicMarkdownRenderer, MarkdownBlockquote, MarkdownCode, MarkdownListItem, MarkdownParagraph.
• FormattedTextarea, MentionSuggestionList

Tabs

• Tabs, TabsDropdown, TabsDropdownItem, FilterTabs, NavTabs, NavTabsDropdown, NavTabsDropdownItem. Available as subpath imports (@dscout/strata/tabs, @dscout/strata/tabs/filter, @dscout/strata/tabs/nav, …).

Notifications & status

• ToastContainer, ToastActions, useToastStore
• LoadingDots, LoadingSpinner, LogoLoader, SkeletonLoader, TypingIndicator

Miscellaneous

• Chip
• FeedbackSelector
• ProfileDropdown
• QuestionIndicator
• ResourceItem, ResourceItemButton
• UserAvatar

All components are available as both barrel imports from the package root (import { CommandMenu } from "@dscout/strata") and individual subpath imports (import CommandMenu from "@dscout/strata/command-menu"). Subpaths use kebab-case and mirror the source folder, e.g. @dscout/strata/popover/menu-item, @dscout/strata/command-menu/anchored, @dscout/strata/markdown/blockquote.

Browse interactive examples in the Storybook.

Intentionally internal

Some primitives in the Strata source tree are deliberately not exposed via this package. External consumers should compose around the public primitives instead:

• Component-folder internals/. Strata's complex component folders (chat/, workspace_layout/, markdown/, scroll_fade_container/, command_menu/, tabs/, …) keep implementation detail under an internals/ subdirectory — editor wiring, popover shells, suggestion-extension factories, reducers, FSM machinery, layout shells, etc. None of those modules ship as package entry points, and the in-repo ESLint rule dscout/no-strata-internals-cross-folder enforces the boundary at build time. If you find yourself wanting to reach into an internals/ module, that's a signal that the public surface is missing something — open an issue rather than working around it.
• ResourceItem / ResourceItemButton — subgrid mode is internal. Both components are exposed and render with their default flex layout out of the box. The mechanism that auto-activates leading / title / trailing alignment across a list of rows — the ResourceItemListProvider context and matching parent grid template — is not exported. External consumers will get the standalone (flex) behavior; the aligned-list behavior lives behind a follow-up primitive (e.g. a future ResourceItemList that bundles the parent grid + provider). Until that lands, this is the supported public contract.
• CheckboxIndicator — prop-driven visual sibling of CheckboxInput. Exists to deduplicate the checkbox visual contract between CheckboxInput and <button>-rooted Items (e.g. CommandMenu.Item), both of which live inside this monorepo. External Strata consumers should use CheckboxInput for real form input.
• ErrorBoundary and friends. Depend on @datadog/browser-rum-react, which is app-specific and not appropriate for the package.