FrogUI

FrogUI is an extension of the Frog Framework that provides type-safe layout & styling primitives to help you build extensible and consistent dynamic Frame Image interfaces.

It is a systematic & type-safe alternative to styling components using the Tailwind (tw) or style property of Satori.

Create your UI System with optional variables, and build your frames with Primitive Components.

Frog UI 🐸

Build consistent frame experiences

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
        alignVertical="center"
        backgroundColor="background"
        padding="32"
      >
        <VStack gap="4">
          <Heading>FrogUI 🐸</Heading>
          <Text color="text200" size="20">
            Build consistent frame experiences
          </Text>
          <Text color="tetext
text100
text200
text300
text400
teal100
teal200
teal300
teal400
teal500
teal600
teal
teal700
teal800
teal900
teal1000
        </VStack>
      </Box>
    )
  })
})