Appearance
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/server | Run long Python or Rust tasks on a local server with streamed progress and saved runs |
@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
- DatePicker — date field with a calendar popover and custom formats
- DateRangePicker — start and end date fields with a range calendar
- 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)
- List — item list with icons or color swatches, a collapsible header and action buttons
- Menu — dropdown menu of actions or links, opened from an icon button or any trigger
- MultiSelect — multi-select combobox with autocomplete
- NumberInput — number field with optional single, range, or multi-handle slider
- ParamEditor — lazy-loaded JSON/TOML/YAML editor for parameter sets
- PriorInput — distribution family and parameters for a Bayesian prior, using numpyro names
- 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 — choropleth map of US states, counties, and HSAs, or any custom geography
- DataTable — table for columnar data or ModelOutput
- LineChart — responsive SVG line chart
- VegaLiteChart — renders a Vega-Lite spec as a LineChart or BarChart
The export helpers behind the chart menu (standalone SVG, PNG blobs, file downloads) are documented under Chart export.