v1.1.0@vibeflui/core

AI-friendly schema-drivenUI framework for React & Next.js

Generate forms, tables, actions, and UI from schema for React / Next.js with an AI-friendly workflow.

npm install @vibeflui/core

Read the Docs View Examples

Less repetitive JSX

Generate UI from schema instead of hand-writing boilerplate.

AI-friendly workflow

Schemas are easy for AI to write, edit, and reason about.

Faster prototyping

Go from idea to interactive UI in minutes, not hours.

Fewer tokens

Shorter prompts, smaller deltas, and lower cost.

Cleaner structure

Keep UI, validation, and data contracts aligned.

Forms

Generate accessible, beautiful forms from JSON schema.

Tables

Render data tables with sorting, filtering, and pagination.

Actions

Schema-defined workflows, menus, and toolbars.

Schema Driven

One source of truth for UI, validation, defaults, and docs.

AI Friendly

Designed for LLMs: consistent, predictable, and easy to extend.

Type Safe

Full TypeScript support with inferred types from schema.

Schema example

Define your UI with JSON schema.

Schema-Driven

Define once, render everywhere.

AI-Friendly

Optimized for LLMs. Less tokens, more signal.

Developer First

Type-safe, composable, and easy to extend.

schema.jsonJSON

{
  "version": "1.0.0",
  "resource": "users",
  "title": "User Details",
  "mode": "static",
  "uiMode": "interactive",
  "adapter": "shadcn",
  "registry": {
    "renderers": ["LandingUserNameCell", "LandingRoleBadge", "LandingStatusBadge"]
  },
  "form": {
    "mode": "inline",
    "submitLabel": "Save User",
    "cancelLabel": "Cancel",
    "fields": [
      {"name": "name", "label": "Full Name", "type": "text", "placeholder": "Enter full name", "required": true, "className": "md:col-span-2"},
      {"name": "email", "label": "Email", "type": "email", "placeholder": "name@example.com", "required": true, "className": "md:col-span-2"},
      {"name": "role", "label": "Role", "type": "select", "options": [{"label": "Admin", "value": "admin"}, {"label": "User", "value": "user"}, {"label": "Viewer", "value": "viewer"}], "defaultValue": "admin", "createValueMode": "default"},
      {"name": "active", "label": "Active", "type": "switch", "defaultValue": true, "createValueMode": "default"}
    ]
  },
  "table": {
    "export": false,
    "columnVisibility": false,
    "columns": [
      {"key": "name", "label": "Name", "renderer": "LandingUserNameCell"},
      {"key": "email", "label": "Email", "type": "email"},
      {"key": "role", "label": "Role", "renderer": "LandingRoleBadge"},
      {"key": "status", "label": "Status", "renderer": "LandingStatusBadge"}
    ]
  },
  "actions": false
}

Generated UI previewTABLE

Name	Email	Role	Status
AAlice Johnson	alice@example.com	Admin	Active
BBob Smith	bob@example.com	User	Active
CCarol Lee	carol@example.com	Viewer	Inactive

Generated UI previewFORM

User Details

Get started in 3 steps

Add VibeFlui to your project and ship your first UI in minutes.

Install

Add the package to your React or Next.js project.

Define Schema

Write a JSON schema for your data and UI.

Render UI

Pass the schema to VibeFlui and get production-ready UI.

Explore the docs

Quick StartInstall and render your first UI. - 5 min read Schema GuideStructure fields, validation, and defaults. - 12 min read Component LibraryBrowse the blocks that power VibeFlui. - Browse all components ExamplesReal-world schema-driven use cases. - Use cases

Terminal

npm i @vibeflui/core

import { Form } from "@vibeflui/core";
import schema from "./schema.json";

export default function Page() {
  return <Form schema={schema} />;
}

Define once. Render everywhere.

Ship better UIs faster with an AI-friendly, schema-driven workflow.

Read the Docs