Designing Game Assets

State Components

`<TextField>`

A single-line text input field.

<TextField name="characterName" placeholder="Enter character name...">
  Character Name
</TextField>

Properties

name: Unique identifier for the field
placeholder: Placeholder text (optional, default: "")
children: Label text for the field

`<TextAreaField>`

A multi-line text input field.

<TextAreaField
  name="characterDescription"
  rows={6}
  placeholder="Describe your character's appearance, personality, and background..."
>
  Character Description
</TextAreaField>

Properties

name: Unique identifier for the field
rows: Number of rows (optional, default: 3)
placeholder: Placeholder text (optional, default: "")
children: Label text for the field

`<NumberField>`

A numeric input field.

<NumberField name="characterAge" min={0} max={120} placeholder="25">
  Age
</NumberField>

Properties

name: Unique identifier for the field
min: Minimum value (optional)
max: Maximum value (optional)
placeholder: Placeholder text (optional, default: “0”)
children: Label text for the field

`<SelectField>`

A dropdown selection field.

<SelectField
  name="characterClass"
  options={[
    "Fighter",
    "Wizard",
    "Rogue",
    "Cleric",
    "Ranger",
    "Paladin",
    "Bard",
    "Druid",
  ]}
  placeholder="Choose a class..."
  defaultValue="Wizard"
>
  Choose Class
</SelectField>

Properties

name: Unique identifier for the field
options: Array of selectable options
placeholder: Placeholder text (optional, default: ”—”)
defaultValue: Default selected value (optional)
children: Label text for the field

`<CheckboxField>`

A checkbox input field.

<CheckboxField name="acceptTerms" defaultValue={false}>
  I accept the terms and conditions
</CheckboxField>

Properties

name: Unique identifier for the field
defaultValue: Initial checkbox state (optional, default: false)
children: Label text for the checkbox

`<Tracker>`

A visual tracker for counting or tracking states.

<Tracker name="healthPoints" min={1} max={10} asClock={false}>
  Health Points
</Tracker>

Properties

name: Unique identifier for the tracker
min: Minimum number of items (optional, default: 1)
max: Maximum number of items (optional)
asClock: Whether to display as a clock (optional)
children: Label text for the tracker

`<List>`

Creates a list of items that can be added, removed, and reordered.

<List name="inventory" min={1} max={10} addButtonLabel="Add Item">
  <Row>
    <TextField name="itemName" placeholder="Item name..." />
    <NumberField name="quantity" min={1} max={99} />
    <CheckboxField name="equipped" defaultValue={false}>
      Equipped
    </CheckboxField>
  </Row>
</List>

Properties

name: Unique identifier for the list
min: Minimum number of items (optional, default: 1)
max: Maximum number of items (optional)
addButtonLabel: Custom text for the add button (optional, default: “Add Item”)
children: The template for list items

`<RollingTable>`

A table for random rolls with history.

<RollingTable
  name="lootTable"
  label="Random Loot"
  items={[
    "Gold Coins",
    "Healing Potion",
    "Magic Sword",
    "Scroll of Fireball",
    "Ring of Protection",
  ]}
/>

Properties

name: Unique identifier for the table
label: Display label for the table (optional, defaults to name)
items: Array of possible outcomes
groups: Array of groups with their own items (cannot be used with items)

UI Components

`<Heading>`

Displays a bold heading.

<Heading>This is a heading</Heading>

Properties

children: The heading text

`<Label>`

Displays a label text.

<Label>This is a label</Label>

Properties

children: The label text

`<Detail>`

Displays text with gray styling.

<Detail fullWidth={true}>
  This is a detail text that spans the full width
</Detail>

Properties

children: The text content
fullWidth: Whether the text should take full width (optional)

`<Box>`

A wrapper component that groups content together.

<Box>
  <p>Hello, world!</p>
</Box>

Properties

children: The content to be wrapped.

`<Columns>`

Creates a responsive grid layout with multiple columns.

<Columns cols={3}>
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</Columns>

Properties

cols: Number of columns (optional, default: 2)
children: The content to be displayed in columns

`<Divider>`

Creates a horizontal separator line.

<Divider />

`<Row>`

Creates a horizontal flex container.

<Row align="start">
  <div>Item 1</div>
  <div>Item 2</div>
</Row>

Properties

children: The content to be displayed in a row
align: Alignment of items (“start”, “center”, “end”, “baseline”, “stretch”, optional, default: “center”)

`<Stack>`

Creates a vertical flex container with spacing.

<Stack>
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

Properties

children: The content to be stacked vertically