Dev Design Library

Park UI components

Beautifully designed components built with Ark UI and Panda CSS that work with a variety of JS frameworks.

Components
59
Framework
React
Stack
React, TypeScript, CSS-in-JS
License
MIT
GitHub stars
2,369
Source
https://github.com/chakra-ui/park-ui
Website
https://park-ui.com
Install
npx @park-ui/cli add {name}

All Park UI components

  • Absolute Center: A utility component for centering content within its parent container.
  • Accordion: A disclosure component with collapsible sections for organizing content.
  • Alert: A component for displaying important notifications and feedback messages.
  • Avatar: A component for displaying user profile images with fallback support.
  • Badge: A component for displaying small labels and status indicators.
  • Breadcrumb: A navigation component showing the user's location within a site hierarchy.
  • Button: A clickable component for triggering actions and user interactions.
  • Card: A container component for grouping related content and actions.
  • Carousel: A component for displaying multiple items in a rotating slideshow format.
  • Checkbox: A form input component for toggling between checked and unchecked states.
  • Clipboard: A component for copying text content to the system clipboard.
  • Close Button: A button component specifically designed for closing modals and overlays.
  • Code: A typography component for displaying inline code snippets.
  • Collapsible: A component for showing and hiding content with smooth transitions.
  • Color Picker: An input component for selecting and manipulating color values.
  • Combobox: A searchable dropdown component combining input and selection features.
  • Date Picker: An input component for selecting dates with a calendar interface.
  • Dialog: A modal component for displaying important content requiring user response.
  • Display Value: Display values with consistent fallback for empty values.
  • Drawer: A slide-out panel component for navigation or additional content.
  • Editable: A component for inline text editing with confirmation controls.
  • Field: A wrapper component for form inputs with labels and error messages.
  • Fieldset: A grouping component for organizing related form fields.
  • File Upload: A component for selecting and uploading files from the user's device.
  • Group: A layout component for grouping related elements visually.
  • Heading: A typography component for displaying page and section headings.
  • Hover Card: A popover component that displays content when hovering over an element.
  • Icon: A component for displaying scalable vector icons.
  • Icon Button: A button component designed specifically for displaying icons.
  • Input: A form input component for collecting text input from users.
  • Input Addon: A component for adding prefix or suffix content to input fields.
  • Input Group: A component for combining input fields with additional elements.
  • Kbd: A typography component for displaying keyboard input and shortcuts.
  • Link: A navigation component for creating accessible hyperlinks.
  • Menu: A dropdown component for displaying a list of actions or options.
  • Number Input: A form input component for entering and adjusting numeric values.
  • Pagination: A navigation component for browsing through pages of content.
  • Pin Input: A form input component for entering PIN codes and verification codes.
  • Popover: A floating overlay component for displaying contextual information.
  • Progress: A display component for showing task completion and loading states.
  • Radio Card Group: A form input component for selecting one option from a set of cards.
  • Radio Group: A form input component for selecting one option from a set of choices.
  • Rating Group: A form input component for capturing user ratings and reviews.
  • Scroll Area: A container component with customizable scrollbars for overflowing content.
  • Segment Group: A form input component for selecting one option from a segmented control.
  • Select: A form input component for choosing one option from a dropdown list.
  • Skeleton: A placeholder component for showing loading states of content.
  • Slider: A form input component for selecting values from a continuous range.
  • Spinner: A feedback component for indicating loading or processing states.
  • Splitter: A layout component for creating resizable split panes and panels.
  • Switch: A form input component for toggling between on and off states.
  • Table: A component for displaying data in rows and columns.
  • Tabs: A component for organizing content into switchable panels.
  • Tags Input: A form control for adding and removing multiple tags or labels.
  • Text: A typography component for displaying body text and paragraphs.
  • Textarea: A form input component for entering multi-line text.
  • Toast: A feedback component for displaying temporary notification messages.
  • Toggle Group: A form input component for selecting multiple options from a set.
  • Tooltip: A component for displaying contextual information on hover or focus.

Browse by category