Park UI Documentation

The Pagination.Items shortcut is a convenience wrapper. Rendering <Pagination.Items /> is functionally equivalent to using the Pagination.Context to map over the pages array and conditionally rendering either a Pagination.Item or a Pagination.Ellipsis based on the page type.

<Pagination.Context>
  {({ pages }) =>
    pages.map((page, index) =>
      page.type === "page" ? (
        <Pagination.Item key={index} {...page} />
      ) : (
        <Pagination.Ellipsis key={index} index={index} />
      ),
    )
  }
</Pagination.Context>

Park UI themes are built around the combination of one accent color and one gray color. You can choose between two pairing strategies:

• Neutral Pairings: Using a neutral gray scale. This works well with any accent hue and provides a simple, clean vibe.
• Natural Pairings: Choosing a gray scale that is saturated with the hue closest to your accent hue. This creates a more colorful and harmonious visual vibe.

The NumberInput.Control component can be used as a shorthand. Writing <NumberInput.Control /> automatically renders the IncrementTrigger and DecrementTrigger inside it, unless you choose to provide custom triggers manually.

// Shorthand for:
<NumberInput.Control>
  <NumberInput.IncrementTrigger />
  <NumberInput.DecrementTrigger />
</NumberInput.Control>

When setting up a Combobox, you may need to use specific hooks to manage the data lifecycle:

• useListCollection: Used to manage the list of items in the combobox, providing methods for filtering and mutating the list.
• useFilter: Used to provide the filtering logic for the combobox based on Intl.Collator APIs.

You can customize the visual layout of the SegmentGroup using the following props:

• size: Controls the size of the segmented group.
• fitted: When enabled, makes the items fit the full width of the container.
• orientation: Controls the direction of the group. Set to vertical to change from the default horizontal layout to a vertical one.

The InputGroup component supports customization through the following props:

• size: Controls the size of the input group (e.g., to match the scale of the input field).
• variant: The InputGroup automatically adapts its styling to match the variant of the Input component placed inside it.

The HoverCard is intended solely for supplementary information that is not essential for understanding the context.

Important: The component is inaccessible to screen readers and cannot be activated via keyboard. Do not place crucial or essential content inside a HoverCard.

To ensure visual harmony, Park UI defines five standardized variants that are shared across components. You can use these to maintain a consistent look and feel when combining different elements:

• solid: High-contrast background with inverted foreground. Best for primary CTAs and main actions.
• subtle: Tinted background with matching foreground. Best for badges, tags, and secondary highlights.
• surface: Background with a visible border and hover states. Best for cards, menu items, and elevated containers.
• outline: Border-only with a transparent background. Best for secondary actions, cancel buttons, and filters.
• plain: Minimal style with background appearing only on interaction. Best for text buttons, links, and tabs.