ui

ui is an object of JSX elements enabled with Yamada UI's style system, and can also be used as a function for custom components to receive Yamada UI's style system.

Usage

Use the ui.<element> notation to generate basic HTML elements with a style system.
For example, to generate a plain HTML button element with a style system, write <ui.button />.

<ui.button
  py="sm"
  px="md"
  rounded="md"
  bg="purple.600"
  color="white"
  _hover={{ bg: "purple.500" }}
>
  Click me!
</ui.button>

For supported elements, please check here.

Creating a Component

ui can be used in two ways: the JSX element <ui.div /> and the function that returns a JSX element ui('div').

The function is suitable for generating simple components.

import { ui } from "@yamada-ui/core"

const Button = ui("button")

const Demo = () => {
  return <Button>Click me!</Button>
}

You can also set default styles.

import { ui } from "@yamada-ui/core"

const Button = ui("button", {
  baseStyle: {
    py: "sm",
    px: "md",
    rounded: "md",
    bg: "purple.600",
    color: "white",
    _hover: { bg: "purple.500" },
  },
})

const Demo = () => {
  return <Button>Click me!</Button>
}

You can pass a custom component as an argument and generate a custom component with the Yamada UI style system enabled.

import { ui } from "@yamada-ui/core"
import { YourComponent } from "./your-component"

const NewComponent = ui(YourComponent)

const Demo = () => {
  return (
    <NewComponent
      py="sm"
      px="md"
      rounded="md"
      bg="purple.600"
      color="white"
      _hover={{ bg: "purple.500" }}
    >
      Click me!
    </NewComponent>
  )
}

If a custom component's prop overlaps with a prop from Style Props, the prop will be absorbed into the Yamada UI style system and will not be passed to the custom component. If you want to pass the prop to the custom component without it being absorbed by the Yamada UI style system, you can set disableStyleProp.

const NewComponent = ui(YourComponent, {
  disableStyleProp: (prop) => ["targetProp"].includes(prop),
})

Allowing the Transfer of props

By default, ui filters out the props of the Yamada UI style system and incorporates them into the DOM. To control how and which props are transferred, you can set shouldForwardProp.

Here is a simple example that allows all props (including those of the Yamada UI style system) except for targetProp.

const NewComponent = ui(YourComponent, {
  shouldForwardProp: (prop) => !["targetProp"].includes(prop),
})

Here's an example combined with Yamada UI's default shouldForwardProp.

import { ui, shouldForwardProp } from "@yamada-ui/core"

const NewComponent = ui(YourComponent, {
  shouldForwardProp: (prop) => {
    const isUIProps = !shouldForwardProp(prop)

    if (isUIProps) return false

    return !["targetProp"].includes(prop)
  },
})