Skip to content

Primitive Components

FrogUI provides a set of primitive components from the UI System. These components are the building blocks for creating higher-level components, layouts, and templates.

FrogUI currently provides the following primitive components as a return value of createSystem:

  • Box: foundational component that includes styling utility properties.
  • Columns: renders children horizontally (column layout).
  • Divider: renders a visual separator.
  • Icon: renders an icon from a collection.
  • Image: renders an image element.
  • Heading: renders a heading text node.
  • HStack: renders children horizontally (inline layout).
  • Rows: renders children vertically (row layout).
  • Spacer: renders a spacer node.
  • Text: renders a text node.
  • VStack: renders children vertically (inline layout).

The following example trivially demonstrates how to use the primitive components to build a "Hero" layout:

index.tsx
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>
        </VStack>
      </Box>
    )
  })
})