FrameUI

Usage

frames.js/render/types.tsx

import { FrameUI, fallbackFrameContext } from "@frames.js/render';
import { FrameImageNext } from "@frames.js/render/next";
import { useFrame } from "@frames.js/render/use-frame";
 
 
export const Page(){
    const frameState = useFrame({
        // ...
    });
 
    return (
        <FrameUI
            frameState={frameState}
            theme={{}}
        />
    );
}

In order for the styles to work, your project should hae tailwind set up as well as the tailwind.config.js rule

// tailwind.config.js
const config = {
    // ...
    content: [
        // ...
        "./node_modules/frames.js/dist/render/next/*.{ts,tsx,js,css}",
        "./node_modules/frames.js/dist/**/*.{ts,tsx,js,css}",
        "./node_modules/@frames.js/render/dist/*.{ts,tsx,js,jsx,css}",
        "./node_modules/@frames.js/render/dist/**/*.{ts,tsx,js,jsx,css}",
    ]