UI & Layout

Embedded Panel

This component will render the signup/login UI as well as the user profile all in one on the page. It's useful as an alternative to SophonWidget, which first renders a button that brings up the flow.

Properties

Name	Type	Description
background	`'none' \| 'default' \| 'with-border'`	The variant name of the widget
className	`string`	The CSS class name of the widget, it must exists in the shadow DOM
style	`CSSProperties`	The custom CSS styles to be applied to the embedded widget

Embedded Panel Without Background

"use client";

import { SophonEmbeddedWidget } from "@sophon-labs/account-react";

export default function ExampleComponent() {
  return <SophonEmbeddedWidget background="none" />;
}

Embedded Panel With Background

"use client";

import { SophonEmbeddedWidget } from "@sophon-labs/account-react";

export default function ExampleComponent() {
  return <SophonEmbeddedWidget background="default" />;
}

Embedded Panel With Border

"use client";

import { SophonEmbeddedWidget } from "@sophon-labs/account-react";

export default function ExampleComponent() {
  return <SophonEmbeddedWidget background="with-border" />;
}

Embedded Panel With Custom Styles

"use client";

import { SophonEmbeddedWidget } from "@sophon-labs/account-react";

export default function ExampleComponent() {
  return (
    <SophonEmbeddedWidget
      style={{
        border: "1px solid red",
        borderRadius: "26px",
      }}
    />
  );
}