Components
Live components
Every component in the Suprnova Live component library, running for real. Each preview is a Live island on this server: what you type goes to Rust and comes back as HTML, and the code beside it is the code that rendered it.
The previews run in frames. suprnova.app is a Vue 3.5 application built on the Pulsar starter kit, and a Live island needs a server-rendered page of its own, so each example is a separate Live page loaded in an iframe. An open list or popover therefore stays inside its frame; in a Live page of your own application it opens over the page.
Nothing you enter is kept. A preview binds to your own session on its first action, so no other visitor sees it. This site accepts no uploads: the upload and file input pages show those widgets without sending anything.
Installation
Components install into an application with the suprnova CLI, one directory each under templates/suprnova-ui/: the Askama macro view, the stylesheet, the script when the component has one, and the manifest that names them.
Opt a document into the token and base stylesheets with LiveBootstrapOptions::esm().with_suprnova_ui(), serve the vendored files with try_live_ui_assets(), and import the macros in your views. The Live chapter of the manual covers each step.
suprnova live:add field
suprnova live:add input
suprnova live:add buttonTheming
Every visual value is a --sn- custom property with light and dark values. Override the tokens on :root to retheme an application. The theme bar re-themes these previews the same way, and Copy theme gives you the block for your choice.
An application that already uses Tailwind CSS 4 can speak in the same tokens through the library's @theme preset:
@import "tailwindcss";
@import "./suprnova-ui.tailwind.css";Forms
- FieldA label, the control, a hint and the field's error output around one model field.
- LabelA label for a control you render yourself, with an optional required mark.
- InputA native text-like input bound to a model field.
- TextareaA multi-line text control bound to a model field.
- Number inputA native number input with bounds and a step.
- SliderA native range input that shows its value.
- Search inputA search input whose model updates are debounced by 250 ms.
- Password inputA password input with a reveal button; its model is transient, so it never enters a snapshot.
- CheckboxA single checkbox, and a group of checkboxes bound to a list.
- Radio groupA group of radio inputs, with a legend, bound to one value.
- SwitchA checkbox with the switch role.
- SelectA native select bound to one value.
- ButtonA native button with an explicit type and variant, and a link that reads as a button.
- Button groupA labeled group of related buttons.
- FieldsetA native fieldset with a legend, optionally disabled.
- Form actionsThe row of buttons that ends a form.
- Validation summaryThe form-level list of one action's validation errors.
- File inputA native file input; with `upload=true` it binds a Live upload field.
- UploadThe upload widget over the Live upload protocol, with a progress bar and a message for every state.
- Input OTPA one-time code as one native input, with presentation cells.
- Date pickerA native date input with year, month and day strips.
- ComboboxAn accessible combobox over a native input and list.