DOCSEARCHbyAlgolia
Submit Docs

Park UI

repository·main·Indexed 11 days ago

https://github.com/cschroeter/park-ui

A multi-framework component library that combines Ark UI's headless component logic with Panda CSS styling. It provides accessible, high-quality UI components for React, Solid, and Vue, featuring a CLI for initialization and component management.

Tokens
50.8K
Snippets
189
Records
339
Agent score
78%

What's inside Park UI

  2. Configure Scroll Area visibility and sizes

    main

    You can customize the appearance of the Scroll Area using the following props:

    • Visibility: Use the scrollbar prop to control how the scrollbar is displayed (e.g., always visible, only on hover, or hidden).
    • Sizes: Use the size prop to adjust the thickness of the scrollbar and the padding of the content area.
    • Horizontal Scrolling: The component automatically supports horizontal scrolling if the content overflows the width of the container.

  3. Use Pagination.Items shortcut

    main

    The Pagination.Items component is a shortcut that automatically renders the correct sequence of page numbers and ellipsis based on the count and pageSize props provided to the root.

    Using <Pagination.Items /> is functionally equivalent to mapping over the pages array provided by the Pagination.Context and rendering either a Pagination.Item or a Pagination.Ellipsis depending on the page type.

    // Shorthand version
<Pagination.Items />

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

  5. Render file lists with FileUpload.Items and FileUpload.List

    main

    To display the list of uploaded files, you can use shortcuts to avoid manual mapping.

    • FileUpload.Items: Renders the list of uploaded files within a FileUpload.ItemGroup. Use this if you want to customize how each file is rendered by accessing the context.
    • FileUpload.List: A high-level shortcut that composes FileUpload.ItemGroup and FileUpload.Items together for a quick implementation.

    If you need to customize the rendering of each file, use FileUpload.Context to access the acceptedFiles array.

    // Custom rendering using FileUpload.Context
<FileUpload.ItemGroup>
  <FileUpload.Context>
    {({ acceptedFiles }) =>
      acceptedFiles.map((file) => (
        <FileUpload.Item key={file.name} file={file}>
          <FileUpload.ItemPreview />
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger />
        </FileUpload.Item>
      ))
    }
  </FileUpload.Context>
</FileUpload.ItemGroup>

// Concise rendering using FileUpload.Items
<FileUpload.ItemGroup>
  <FileUpload.Items />
</FileUpload.ItemGroup>

// Quickest rendering using FileUpload.List
<FileUpload.List />

  8. Understand the Park UI color system and Radix Colors

    main

    Park UI replaces the standard Panda CSS 50–950 scale with Radix Colors.

    Key characteristics:

    • Shade Count: Each color includes 12 shades per mode (light and dark), totaling 24 shades per color.
    • Structure: The system is built around one Accent color and one Gray color.
    • Pairing Strategies:
      • Neutral Pairings: Using a neutral gray scale, which works well with any accent hue.
      • Natural Pairings: Choosing a gray scale that is saturated with the hue closest to your accent hue for a more harmonious, colorful vibe.

  10. Render multiple tags with TagsInput.Items

    main

    Instead of manually mapping over the tag values, you can use the TagsInput.Items shortcut to automatically render all tag items based on the current value.

    If you need more control over how each item is rendered (e.g., custom text or specific item properties), you can use TagsInput.Context to access the current value and map over it manually using TagsInput.Item.

    // Concise way to render all items
<TagsInput.Items />

// Custom way using Context
<TagsInput.Context>
  {({ value }) =>
    value.map((tag, index) => (
      <TagsInput.Item key={index} index={index} value={tag}>
        <TagsInput.ItemPreview>
          <TagsInput.ItemText>{tag}</TagsInput.ItemText>
          <TagsInput.ItemDeleteTrigger />
        </TagsInput.ItemPreview>
        <TagsInput.ItemInput />
      </TagsInput.Item>
    ))
  }
</TagsInput.Context>