Using Builtin MDX React Components Features

<Image
  src="/static/images/canada/lake.jpg"
  alt="Image"
  width={500}
  height={500}
/>

<APITable
  data={[
    {
      attribute: 'onFocus',
      type: '(e: FocusEvent) => void',
      description: 'Handler that is called when the element receives focus.',
      default: '-',
    },
    {
      attribute: 'onBlur',
      type: '(e: FocusEvent) => void',
      description: 'Handler that is called when the element loses focus.',
      default: '-',
    },
    {
      attribute: 'onFocusChange',
      type: '(isFocused: boolean) => void',
      description:
        "Handler that is called when the element's focus status changes.",
      default: '-',
    },
  ]}
/>

<Code>npm install @heroui/react</Code>

<Spacer y={4} />

<Snippet>npm install @heroui/react</Snippet>

<Blockquote color="primary">This is a blockquote</Blockquote>
<Blockquote color="warning">This is a blockquote</Blockquote>
<Blockquote color="danger">This is a blockquote</Blockquote>
<Blockquote color="success">This is a blockquote</Blockquote>
<Blockquote color="default">This is a blockquote</Blockquote>

<PackageManagers
  commands={{
    npm: 'npm install hps -g',
    yarn: 'yarn add hps -g',
    pnpm: 'pnpm add hps -g',
    bun: 'bun add hps -g',
  }}
/>

<Kbd keys={['command']}>K</Kbd>

<Steps>
### Add dependencies

In your Next.js project, run one of the following commands to install HeroUI:

<PackageManagers
commands={{
    npm: 'npm i @heroui/react framer-motion',
    yarn: 'yarn add @heroui/react framer-motion',
    pnpm: 'pnpm add @heroui/react framer-motion',
    bun: 'bun add @heroui/react framer-motion',
  }}
/>

### Hoisted Dependencies Setup

<Blockquote color="primary">
  **Note**: This step is only for those who use `pnpm` to install. If you
  install HeroUI using other package managers, you may skip this step.
</Blockquote>

### Tailwind CSS Setup

HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/installation/framework-guides/nextjs) to install Tailwind CSS.

<Blockquote color="primary">
  **Note**: If you are using pnpm and monorepo architecture, please make sure
  you are pointing to the ROOT `node_modules`
</Blockquote>

</Steps>