Examples

The Examples section teaches VibeFlui as a practical, copy-pasteable tutorial path.

These examples teach realistic app structure: schema files, registry files, page usage, optional endpoints, expected response shapes, and reusable fixture data.

Start here

Install the core package:

npm install @vibeflui/core

Every example keeps schema separate from React code. The schema stays JSON-friendly and declarative. Runtime functions live in a registry file.

Recommended order

1. Basic
2. Client-side
3. Server-side
4. Advanced
5. Adapter
6. Custom
7. Migration From React

Basic

• Basic Usage shows the smallest working FluiKit page.
• Simple Form shows a focused form with validation and registry-based submit behavior.
• Simple Table shows a static table with row actions.
• Simple Form And Table combines local table data, create, edit, and delete.

Client-side and server-side

• Client Side is for local demos, admin prototypes, and offline examples.
• Server Side is for Next.js route handler examples and endpoint-backed operation flows.

Advanced

• Advanced Form expands form layout, validation, options, computed values, and adapters.
• Advanced Table expands search, filters, pagination, export, row selection, grouping, and server query state.
• Advanced Form And Table shows a production-like CRUD tutorial.
• Advanced Patterns gathers multi-resource schemas, dashboard cards, wizard/tabs layout, permission-based UI, dynamic options, server-side tables, two-step destructive actions, and clean production folder structure.

Adapter

• Adapter shows optional adapter/plugin setup, one page per adapter.

Custom theme

• Customization teaches registry validators, transformers, renderers, components, permissions, messages, hooks, events, and computed values.
• Themes teaches theme customization.

Migration from React

• Migration From React shows how to migrate a manual React table/form into VibeFlui.

Availability Rule

Examples must only describe features that exist in the current VibeFlui source. If a requested advanced feature cannot be verified, do not present it as available until source support is confirmed.

Rendered examples

Examples are written so the same schema and fixture data can render as UI:

app/users/page.tsx

<FluiKitProvider registry={exampleRegistry}>
  <FluiKit schema={exampleSchema} data={exampleRows} />
</FluiKitProvider>

Use the same schema and fixture data for both code blocks and rendered examples.