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:

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>
    )
  })
})