createSystem

Creates a UI System with optional UI Variables.

Import

import { createSystem } from 'frog/ui'

Usage

src/ui.ts

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

Parameters (Variables)

colors

Type: Record<string, string>
Default: colors.dark

A map of color variables. The keys of these variables can be used as values to color-based style properties such as color, backgroundColor, borderColor, etc on components.

By default, it uses the built-in FrogUI colors.

export const { Box } = createSystem({
  colors: {
    text: '#000000',
    background: '#ffffff',
    blue: '#0070f3',
    green: '#00ff00',
    red: '#ff0000',
    orange: '#ffaa00',
  }
})
 
function Example() {
  return <Box backgroundColor="background
text
blue
red
green
orange
}

fonts

Type: Record<string, Font[]>

A map of font variables. The keys of these variables will be used as values to the fontFamily property on components.

export const { Box } = createSystem({
  fonts: {
    default: [
      {
        name: 'Open Sans',
        source: 'google',
        weight: 400,
      },
      {
        name: 'Open Sans',
        source: 'google',
        weight: 600,
      },
    ],
    madimi: [
      {
        name: 'Madimi One',
        source: 'google',
      },
    ],
  },
})
 
function Example() {
  return <Box fontFamily="default
madimi
}

fontSizes

Type: Record<string, number>
Default: fontSizes

A map of font size variables. The keys of these variables will be used as values to the fontSize property on components.

The values are relative to the dimensions of the frame (e.g. 0.01 is 1% of the larger frame dimension).

By default, it uses the built-in FrogUI font size variables.

export const { Box } = createSystem({
  fontSizes: {
    small: 0.01875,
    medium: 0.03125,
    large: 0.04375,
  }
})
 
function Example() {
  return <Box fontSize="small
medium
large
}

frame

Type: { height?: number, width?: number }
Default: inferred

The dimensions of the frame. If not specified, then it will be inferred from the Frog instance.

export const system = createSystem({
  frame: {
    height: 1024,
    width: 1024,
  }
})

icons

Type: Record<string, string>
Default: lucide

Icon collection to use for resolving icons. The following collections are available:

export const system = createSystem({
  icons: lucide,
})

See Icon for more information on using icons.

units

Type: Record<string, number>

A map of unit variables. The keys of these variables will be used as values to the unit-based properties (padding, margin, borderWidth, etc) properties on components.

The values are relative to the dimensions of the frame (e.g. 0.01 is 1% of the larger frame dimension).

By default, it uses the built-in FrogUI unit variables.

export const { Box } = createSystem({
  units: {
    small: 0.01,
    medium: 0.02,
    large: 0.03,
  }
})
 
function Example() {
  return <Box padding="small
medium
large
}

Returns

Box

The Box component.

Columns

The Columns component.

Divider

The Divider component.

Icon

The Icon component.

Image

The Image component.

Heading

The Heading component.

HStack

The HStack component.

Rows

The Rows component.

Text

The Text component.

VStack

The VStack component.

vars

An object containing the UI Variables used by the system.