Park UI

https://park-ui.com/docs
Admin
Park UI is a customizable component library built on Ark UI and Panda CSS. It provides a set of...
Tokens:75,910
Snippets:609
Trust Score:7.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Park UI dependencies

Source: https://park-ui.com/docs/installation

Install the required Ark UI and Lucide icon packages.

```bash
npm install @ark-ui/react lucide-react
```

--------------------------------

### Install Switch Component

Source: https://park-ui.com/docs/components/switch

Use the CLI to add the switch component to your project.

```bash
npx @park-ui/cli add switch
```

--------------------------------

### Install Input Component

Source: https://park-ui.com/docs/components/input

Use the CLI to add the Input component to your project.

```bash
npx @park-ui/cli add input
```

--------------------------------

### Install Tooltip Component

Source: https://park-ui.com/docs/components/tooltip

Use the CLI to add the tooltip component to your project.

```bash
npx @park-ui/cli add tooltip
```

--------------------------------

### Usage Example

Source: https://park-ui.com/docs/components/kbd

Basic implementation of the Kbd component.

```typescript
import { Kbd } from '@/components/ui'
```

```jsx
<Kbd>F12</Kbd>
```

--------------------------------

### Install Card Component

Source: https://park-ui.com/docs/components/card

Use the CLI to add the Card component to your project.

```bash
npx @park-ui/cli add card
```

--------------------------------

### Install Clipboard Component

Source: https://park-ui.com/docs/components/clipboard

Use the CLI to add the clipboard component to your project.

```bash
npx @park-ui/cli add clipboard
```

--------------------------------

### Install Kbd Component

Source: https://park-ui.com/docs/components/kbd

Use the Park UI CLI to add the Kbd component to your project.

```bash
npx @park-ui/cli add kbd
```

--------------------------------

### Install Progress Component

Source: https://park-ui.com/docs/components/progress

Use the CLI to add the Progress component to your project.

```bash
npx @park-ui/cli add progress
```

--------------------------------

### Install Toast Component

Source: https://park-ui.com/docs/components/toast

Use the Park UI CLI to add the toast component to your project.

```bash
npx @park-ui/cli add toast
```

--------------------------------

### Install Spinner Component

Source: https://park-ui.com/docs/components/spinner

Use the CLI to add the spinner component to your project.

```bash
npx @park-ui/cli add spinner
```

--------------------------------

### Install Skeleton Component

Source: https://park-ui.com/docs/components/skeleton

Use the CLI to add the skeleton component to your project.

```bash
npx @park-ui/cli add skeleton
```

--------------------------------

### Install Textarea Component

Source: https://park-ui.com/docs/components/textarea

Use the CLI to add the Textarea component to your project.

```bash
npx @park-ui/cli add textarea
```

--------------------------------

### Install Drawer via CLI

Source: https://park-ui.com/docs/components/drawer

Use the Park UI CLI to add the Drawer component to your project.

```bash
npx @park-ui/cli add drawer
```

--------------------------------

### Install Splitter Component

Source: https://park-ui.com/docs/components/splitter

Use the Park UI CLI to add the splitter component to your project.

```bash
npx @park-ui/cli add splitter
```

--------------------------------

### Usage Examples

Source: https://park-ui.com/docs/components/icon

Basic import and usage of the Icon component.

```typescript
import { Icon } from '@/components/ui'
```

```jsx
<Icon />
```

--------------------------------

### Install Number Input

Source: https://park-ui.com/docs/components/number-input

Use the CLI to add the number-input component to your project.

```bash
npx @park-ui/cli add number-input
```

--------------------------------

### Install Icon Component

Source: https://park-ui.com/docs/components/icon

Use the Park UI CLI to add the Icon component to your project.

```bash
npx @park-ui/cli add icon
```

--------------------------------

### Install Link Component

Source: https://park-ui.com/docs/components/link

Use the Park UI CLI to add the Link component to your project.

```bash
npx @park-ui/cli add link
```

--------------------------------

### Install Date Picker

Source: https://park-ui.com/docs/components/date-picker

Use the Park UI CLI to add the date picker component to your project.

```bash
npx @park-ui/cli add date-picker
```

--------------------------------

### Install Select Component via CLI

Source: https://park-ui.com/docs/components/select

Use the Park UI CLI to add the Select component to your project.

```bash
npx @park-ui/cli add select
```

--------------------------------

### Install Heading Component

Source: https://park-ui.com/docs/components/heading

Use the CLI to add the Heading component to your project.

```bash
npx @park-ui/cli add heading
```

--------------------------------

### Usage Example

Source: https://park-ui.com/docs/components/spinner

Import and use the Spinner component in your application.

```typescript
import { Spinner } from '@/components/ui'
```

```jsx
<Spinner />
```

--------------------------------

### Install File Upload Component

Source: https://park-ui.com/docs/components/file-upload

Use the CLI to add the file upload component to your project.

```bash
npx @park-ui/cli add file-upload
```

--------------------------------

### Install Badge Component

Source: https://park-ui.com/docs/components/badge

Use the CLI to add the Badge component to your project.

```bash
npx @park-ui/cli add badge
```

--------------------------------

### Install Display Value Component

Source: https://park-ui.com/docs/components/display-value

Use the Park UI CLI to add the component to your project.

```bash
npx @park-ui/cli add display-value
```

--------------------------------

### Install Code Component

Source: https://park-ui.com/docs/components/code

Use the Park UI CLI to add the code component to your project.

```bash
npx @park-ui/cli add code
```

--------------------------------

### Install Button Component

Source: https://park-ui.com/docs/components/button

Use the Park UI CLI to add the button component to your project.

```bash
npx @park-ui/cli add button
```

--------------------------------

### Import and use components

Source: https://park-ui.com/docs/installation

Example of importing and rendering a component in a React application.

```javascript
import { Button } from '@/components/ui'

export const App = () => {
  return <Button>Park UI</Button>
}
```

--------------------------------

### Install Pagination Component via CLI

Source: https://park-ui.com/docs/components/pagination

Use the Park UI CLI to add the pagination component to your project.

```bash
npx @park-ui/cli add pagination
```

--------------------------------

### Install Field Component

Source: https://park-ui.com/docs/components/field

Use the CLI to add the Field component to your project.

```bash
npx @park-ui/cli add field
```

--------------------------------

### Install Absolute Center Component

Source: https://park-ui.com/docs/components/absolute-center

Use the Park UI CLI to add the component to your project.

```bash
npx @park-ui/cli add absolute-center
```

--------------------------------

### Install Dialog Component

Source: https://park-ui.com/docs/components/dialog

Use the Park UI CLI to add the Dialog component to your project.

```bash
npx @park-ui/cli add dialog
```

--------------------------------

### Install Tabs Component

Source: https://park-ui.com/docs/components/tabs

Use the Park UI CLI to add the Tabs component to your project.

```bash
npx @park-ui/cli add tabs
```

--------------------------------

### Install Text component via CLI

Source: https://park-ui.com/docs/components/text

Use the Park UI CLI to add the Text component to your project.

```bash
npx @park-ui/cli add text
```

--------------------------------

### Install Slider Component

Source: https://park-ui.com/docs/components/slider

Use the Park UI CLI to add the slider component to your project.

```bash
npx @park-ui/cli add slider
```

--------------------------------

### Install Group Component

Source: https://park-ui.com/docs/components/group

Use the Park UI CLI to add the Group component to your project.

```bash
npx @park-ui/cli add group
```

--------------------------------

### Install Table Component via CLI

Source: https://park-ui.com/docs/components/table

Use the Park UI CLI to add the table component to your project.

```bash
npx @park-ui/cli add table
```

--------------------------------

### Install Avatar Component

Source: https://park-ui.com/docs/components/avatar

Use the Park UI CLI to add the Avatar component to your project.

```bash
npx @park-ui/cli add avatar
```

--------------------------------

### Install Combobox via CLI

Source: https://park-ui.com/docs/components/combobox

Use the Park UI CLI to add the combobox component to your project.

```bash
npx @park-ui/cli add combobox
```

--------------------------------

### Install Collapsible Component

Source: https://park-ui.com/docs/components/collapsible

Use the Park UI CLI to add the collapsible component to your project.

```bash
npx @park-ui/cli add collapsible
```

--------------------------------

### Install Menu Component via CLI

Source: https://park-ui.com/docs/components/menu

Use the Park UI CLI to add the Menu component to your project.

```bash
npx @park-ui/cli add menu
```

--------------------------------

### Install Editable Component

Source: https://park-ui.com/docs/components/editable

Use the Park UI CLI to add the Editable component to your project.

```bash
npx @park-ui/cli add editable
```

--------------------------------

### Install Segment Group

Source: https://park-ui.com/docs/components/segment-group

Use the Park UI CLI to add the segment-group component to your project.

```bash
npx @park-ui/cli add segment-group
```

--------------------------------

### Install Accordion via CLI

Source: https://park-ui.com/docs/components/accordion

Use the Park UI CLI to add the accordion component to your project.

```bash
npx @park-ui/cli add accordion
```

--------------------------------

### Install Popover via CLI

Source: https://park-ui.com/docs/components/popover

Use the Park UI CLI to add the popover component to your project.

```bash
npx @park-ui/cli add popover
```

--------------------------------

### Install Carousel Component

Source: https://park-ui.com/docs/components/carousel

Use the Park UI CLI to add the Carousel component to your project.

```bash
npx @park-ui/cli add carousel
```

--------------------------------

### Install Alert Component via CLI

Source: https://park-ui.com/docs/components/alert

Use the Park UI CLI to add the Alert component to your project.

```bash
npx @park-ui/cli add alert
```

--------------------------------

### Install Fieldset via CLI

Source: https://park-ui.com/docs/components/fieldset

Use the Park UI CLI to add the Fieldset component to your project.

```bash
npx @park-ui/cli add fieldset
```

--------------------------------

### Install Radio Card Group via CLI

Source: https://park-ui.com/docs/components/radio-card-group

Use the Park UI CLI to add the component to your project.

```bash
npx @park-ui/cli add radio-card-group
```

--------------------------------

### Install Radio Group

Source: https://park-ui.com/docs/components/radio-group

Use the Park UI CLI to add the Radio Group component to your project.

```bash
npx @park-ui/cli add radio-group
```

--------------------------------

### Install Checkbox via CLI

Source: https://park-ui.com/docs/components/checkbox

Use the Park UI CLI to add the checkbox component to your project.

```bash
npx @park-ui/cli add checkbox
```

--------------------------------

### Install Toggle Group via CLI

Source: https://park-ui.com/docs/components/toggle-group

Use the Park UI CLI to add the toggle-group component to your project.

```bash
npx @park-ui/cli add toggle-group
```

--------------------------------

### Install Breadcrumb via CLI

Source: https://park-ui.com/docs/components/breadcrumb

Use the Park UI CLI to add the breadcrumb component to your project.

```bash
npx @park-ui/cli add breadcrumb
```

--------------------------------

### Install Icon Button via CLI

Source: https://park-ui.com/docs/components/icon-button

Use the Park UI CLI to add the icon-button component to your project.

```bash
npx @park-ui/cli add icon-button
```

--------------------------------

### Import Toast Components

Source: https://park-ui.com/docs/components/toast

Import the Toaster component and the toaster function to get started.

```typescript
import { Toaster, toaster } from "@/components/ui"
```

--------------------------------

### Initialize Park UI

Source: https://park-ui.com/docs/installation

Run the CLI command to set up configuration files and directories.

```bash
npx @park-ui/cli init
```

--------------------------------

### Skeleton Usage

Source: https://park-ui.com/docs/components/skeleton

Basic import and implementation examples for the Skeleton components.

```typescript
import { Skeleton, SkeletonCircle, SkeletonText } from "@/components/ui"
```

```tsx
<Stack gap="6">
  <HStack>
    <SkeletonCircle boxSize="10" />
    <SkeletonText noOfLines={2} />
  </HStack>
  <Skeleton height="48" />
</Stack>
```

--------------------------------

### Usage Example

Source: https://park-ui.com/docs/components/group

Import the component and wrap your elements within the Group.

```typescript
import { Group } from '@/components/ui'
```

```jsx
<Group>
  <div />
  <div />
</Group>
```

--------------------------------

### Using Closed Component

Source: https://park-ui.com/docs/components/checkbox

Usage example for the simplified Checkbox component.

```jsx
<Checkbox>Label</Checkbox>
```

--------------------------------

### Install Input Addon via CLI

Source: https://park-ui.com/docs/components/input-addon

Use the Park UI CLI to add the Input Addon component to your project.

```bash
npx @park-ui/cli add input-addon
```

--------------------------------

### Closed component composition

Source: https://park-ui.com/docs/components/avatar

Setup for a custom wrapper component around the Avatar.

```typescript
import { forwardRef, type ImgHTMLAttributes } from 'react'
import { Avatar as StyledAvatar } from '@/components/ui'

type ImageProps = ImgHTMLAttributes<HTMLImageElement>

export interface AvatarProps extends StyledAvatar.RootProps {
  name?: string
  src?: string
  srcSet?: string
  loading?: ImageProps['loading']
  icon?: React.ReactElement
  fallback?: React.ReactNode
}

export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(props, ref) {
  const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props
  return (
    <StyledAvatar.Root ref={ref} {...rest}>
      <StyledAvatar.Fallback name={name}>{fallback || icon}</StyledAvatar.Fallback>
      <StyledAvatar.Image src={src} srcSet={srcSet} loading={loading} />
      {children}
    </StyledAvatar.Root>
  )
})
```

--------------------------------

### Usage of closed Breadcrumb component

Source: https://park-ui.com/docs/components/breadcrumb

Example of how to invoke the custom closed Breadcrumb component.

```jsx
<Breadcrumb items={[ { title: 'Docs', url: '/docs' }]} />
```

--------------------------------

### Setup Closed Component Composition

Source: https://park-ui.com/docs/components/field

Create a wrapper component for simplified field usage.

```typescript
import { forwardRef, type ReactNode } from 'react'
import { Field as StyledField } from '@/components/ui'

export interface FieldProps extends Omit<StyledField.RootProps, 'label'> {
  label?: ReactNode
  helperText?: ReactNode
  errorText?: ReactNode
  optionalText?: ReactNode
}

export const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(props, ref) {
  const { label, children, helperText, errorText, optionalText, ...rest } = props
  return (
    <StyledField.Root ref={ref} {...rest}>
      {label && (
        <StyledField.Label>
          {label}
          <StyledField.RequiredIndicator fallback={optionalText} />
        </StyledField.Label>
      )}
      {children}
      {helperText && <StyledField.HelperText>{helperText}</StyledField.HelperText>}
      <StyledField.ErrorText>{errorText}</StyledField.ErrorText>
    </StyledField.Root>
  )
})
```

--------------------------------

### Install Hover Card via CLI

Source: https://park-ui.com/docs/components/hover-card

Use the Park UI CLI to add the Hover Card component to your project.

```bash
npx @park-ui/cli add hover-card
```
Tokens:
Raw