cfasim-ui

cfasim-ui is the shared component and theming library you use to make simulators.

Packages

Package	Description
@cfasim-ui/components	Accessible UI components built on reka-ui
@cfasim-ui/charts	SVG charting components
@cfasim-ui/theme	Design tokens, reset, and utility classes
@cfasim-ui/pyodide	Run Python models in the browser via Pyodide Web Workers
@cfasim-ui/wasm	Run Rust/WASM models in the browser via a Web Worker
@cfasim-ui/shared	Shared utilities, including the useUrlParams composable

Components

• Box — colored container for callouts and alerts
• Button — primary and secondary actions
• ButtonGroup — visually joins a set of buttons into one unit
• Container — vertical or horizontal layout wrapper with optional border, height, and gap
• Expander — collapsible content section
• Grid — responsive multi-column layout
• Hint — inline tooltip for help text
• Icon — inline-SVG Material Symbols icon (tree-shakeable, no webfont)
• MultiSelect — multi-select combobox with autocomplete
• NumberInput — number field with optional slider
• ParamEditor — lazy-loaded JSON/TOML/YAML editor for parameter sets
• SelectBox — dropdown select
• SidebarLayout — two-panel layout with a collapsible sidebar
• Spinner — loading indicator
• TextInput — text field
• Toggle — boolean switch
• ToggleGroup — segmented single/multi-select control

Charts

• BarChart — grouped/stacked/overlay bar chart, vertical or horizontal
• ChoroplethMap — US state choropleth map with D3
• DataTable — table for columnar data or ModelOutput
• LineChart — responsive SVG line chart

Workers

• Pyodide — run Python models via Pyodide Web Workers
• WASM — run Rust/WASM models via a Web Worker