Dev Design Library

Ark UI components

Unstyled, accessible UI components for your design System. Works in React, Vue, Solid, and Svelte.

Components
65
Framework
React
Stack
React, TypeScript
License
MIT
GitHub stars
5,409
Source
https://github.com/chakra-ui/ark
Website
https://ark-ui.com
Install
npm install @ark-ui/react

All Ark UI components

  • Accordion: A collapsible component for displaying content in a vertical stack.
  • Angle Slider: A component for selecting a value within a circular range.
  • Avatar: A graphical representation of the user, often used in profile sections.
  • Carousel: An interactive slideshow component for cycling through elements.
  • Checkbox: A control element that allows for multiple selections within a set.
  • Client Only: Render content only on the client side.
  • Clipboard: A component to copy text to the clipboard
  • Collapsible: An interactive component that can be expanded or collapsed.
  • Collection
  • Color Picker: A component that allows users to select a color from a color picker.
  • Combobox: A single input field that combines the functionality of a select and input.
  • Date Input: A segment-based date input that allows users to enter dates by navigating individual date parts.
  • Date Picker: A component that allows users to select a date from a calendar.
  • Dialog: A modal window that appears on top of the main content.
  • Download Trigger: Trigger file downloads programmatically.
  • Drawer: A panel that slides in from the edge of the screen, typically used for navigation or forms.
  • Editable: A component that allows users to edit text in place.
  • Environment: Set up components for custom environments like iframes, Shadow DOM, or Electron.
  • Field: Provides a flexible container for form inputs, labels, and helper text.
  • Fieldset: A set of form controls optionally grouped under a common name.
  • File Upload: A component that is used to upload multiple files.
  • Floating Panel: Used to display content in a non-modal floating window.
  • Focus Trap: Trap focus within a specified container.
  • Format
  • Frame: Used to render a component in an iframe
  • Highlight: Used to emphasize specific words or phrases within a larger body of text.
  • Hotkeys: Register keyboard shortcuts, sequences and scopes, and read them back to build a command palette.
  • Hover Card: A card that appears when a user hovers over an element.
  • Image Cropper: Crop and transform images with zoom, rotation, and aspect ratio controls.
  • Interaction
  • Json Tree View: A component that displays JSON data in an interactive, collapsible tree structure.
  • Listbox: A component for selecting a single or multiple items from a list.
  • Locale: Locale provider for setting the locale and direction of the app.
  • Marquee: A continuous scrolling component for displaying content in a seamless loop.
  • Menu: A list of options that appears when a user interacts with a button.
  • Navigation Menu: A collection of links and menus for website navigation.
  • Number Input: A field that allows user input of numeric values.
  • Pagination: A navigation component that allows users to browse through pages.
  • Password Input: A component that allows users to enter secure text like (passwords and api keys)
  • Pin Input: For pin or verification codes with auto-focus transfer and masking options.
  • Popover: An overlay that displays additional information or options when triggered.
  • Presence: Helps control the rendering and unmounting of your content based on a given state.
  • Progress
  • Qr Code: A component that generates a QR code based on the provided data.
  • Radio Group: Allows single selection from multiple options.
  • Rating Group: Allows users to rate items using a set of icons.
  • Scroll Area: A custom scrollable area component with styled scrollbars.
  • Segment Group: Organizes and navigates between sections in a view.
  • Select: Displays a list of options for the user to pick from.
  • Signature Pad: A component that allows users to draw a signature using a signature pad.
  • Slider: A control element that allows for a range of selections.
  • Splitter: A component that divides your interface into resizable sections
  • Steps: Used to guide users through a series of steps in a process
  • Swap: Animate between two visual states with smooth transitions.
  • Switch: A control element that allows for a binary selection.
  • Tabs: Flexible navigation tool with various modes and features.
  • Tags Input: A component that allows users to add tags to an input field.
  • Timer: Used to record the time elapsed from zero or since a specified target time.
  • Toast: A message that appears on the screen to provide feedback on an action.
  • Toc: A navigation component that tracks and highlights the active section as users scroll through document content.
  • Toggle: A two-state button that can be toggled on or off.
  • Toggle Group: A set of two-state buttons that can be toggled on or off.
  • Tooltip: A label that provides information on hover or focus.
  • Tour: A guided tour that helps users understand the interface.
  • Tree View: A component that is used to show a tree hierarchy.

Browse by category