Playground

Try a real Bridge UI form.

A personal information CRUD built with Card, inputs, and useSnackbarAction. Switch React / Vue in the header — open the Code tab to inspect the source.

Get Started Browse components

Demo

Live preview

Fill the form and save to open a success snackbar. Toggle Preview and Code to move between the running app and its source.

Providers

Host setup

The preview mounts the form inside a FormHost that provides BridgeUIProvider and BridgeUIHosts so useSnackbarAction can open snackbars.

VueFormHost.vue

<script setup lang="ts">
// ** Bridge UI Imports
import { BridgeUIProvider } from "@bridge-ui/vue";
import { BridgeUIHosts } from "@bridge-ui/vue/Actions";

// ** Local Imports
import FormApp from "./FormApp.vue";
</script>

<template>
  <BridgeUIProvider :global="{}" :components="{}">
    <BridgeUIHosts
      :snackbar="{
        max: 3,
        timeout: 5000,
        position: 'bottom-center',
      }"
    >
      <FormApp />
    </BridgeUIHosts>
  </BridgeUIProvider>
</template>

ReactFormHost.tsx

// ** Bridge UI Imports
import { BridgeUIProvider } from "@bridge-ui/react";
import { BridgeUIHosts } from "@bridge-ui/react/Actions";

// ** Local Imports
import FormApp from "./FormApp";

export default function FormHost() {
  return (
    <BridgeUIProvider global={{}} components={{}}>
      <BridgeUIHosts
        snackbar={{
          max: 3,
          timeout: 5000,
          position: "bottom-center",
        }}
      >
        <FormApp />
      </BridgeUIHosts>
    </BridgeUIProvider>
  );
}