Blocks
Complete interface examples. Preview, copy and adapt them to your app.
| Block | Includes |
|---|---|
| Sign in | Sign-in and password-reset forms, password visibility and pending states. |
| Dashboard overview | Responsive workspace sidebar, projects, activity and project details. |
| Profile settings | Profile fields, email preferences, save and reset. |
| Data management | Search, role filters, sorting, pagination and a member editor. |
Each block has an interactive preview, device controls and copyable source. Previews follow the selected documentation theme. All data is illustrative; changes stay in memory and requests are simulated.
Setup
Follow Installation in a Nuxt app,
then copy a block into app/pages/. Code includes the module, stylesheet
and SApp setup; Copy Vue copies the page. Examples use the default S
component prefix and Nuxt auto-imports.
For local icons, install @iconify-json/hugeicons as a development dependency;
see Icons. No additional form or chart package
is needed. Blocks use your app's theme; documentation showcase presets are not
installed by copying their source.
Replace simulated requests with your services and enforce validation and permissions on the server. The source comments mark integration points. Block source is also available through llms.txt, llms-full.txt, raw Markdown and the MCP catalog.