Getting Started

On this page, we will guide you through the process of setting up a UI System for your frames in Frog.

Steps

Create your UI System

Firstly, we will need to create our UI System with createSystem. The createSystem function takes in a variables object, and returns a set of primitive components to build our frame UI.

By default, if no variables are passed to createSystem, the system will use the default variables.

src/ui.ts

import { createSystem } from 'frog/ui'
 
export const {
  Box,
  Columns,
  Column,
  Heading,
  HStack,
  Rows,
  Row,
  Spacer,
  Text,
  VStack,
  vars,
} = createSystem()

Read more on UI System & Variables to learn how to customize the system.

Tip

You can also control the color scheme of the system by passing in a colors property to createSystem. Frog supports a light and dark color scheme.

src/ui.ts

import { colors, createSystem } from 'frog/ui'
 
export const {
  // ...
} = createSystem({
  colors: colors.light,
})

Consume the System

Once we have our system set up, we will need to inject the ui configuration into our Frog instance.

After that, we can then consume our components to build our frame UI.

src/index.ts

import { Frog } from 'frog'
import { Box, Heading, Text, VStack, vars } from './ui.js'
 
export const app = new Frog({
  ui: { vars },
  title: 'Frog Frame',
}).frame('/', (c) => {
  return c.res({
    image: (
      <Box
        grow
        alignHorizontal="center"
        backgroundColor="background"
        padding="32"
      >
        <VStack gap="4">
          <Heading>FrogUI 🐸</Heading>
          <Text color="text200" size="20">
            Build consistent frame experiences
          </Text>
        </VStack>
      </Box>
    )
  })
})

Read more on Primitive Components to learn about the available components and their properties.

Done!

Frog UI 🐸

Build consistent frame experiences