---
name: "@ark-cn"
slug: "ark-cn"
description: "Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready, and customizable. Built by ARK UI."
category: "Animated components"
tags: ["accessibility", "animation", "buttons", "cards", "dashboard", "forms", "loaders", "media", "navigation", "onboarding", "overlays", "tables"]
framework: "react"
license: null
author: "RajaARK99"
website: "https://ark-cn.vercel.app"
github: "https://github.com/RajaARK99/ark-cn"
registry: "https://ark-cn.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 76
generated_at: "2026-09-21T01:50:16.753Z"
---

# @ark-cn

Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS. Copy-paste ready, and customizable. Built by ARK UI.

## Links

- Website: https://ark-cn.vercel.app
- GitHub: https://github.com/RajaARK99/ark-cn
- Registry JSON: https://ark-cn.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/ark-cn
- This file: https://sh4dcn.vercel.app/md/ark-cn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://ark-cn.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://ark-cn.vercel.app/r/registry.json
bunx shadcn@latest add https://ark-cn.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/RajaARK99/ark-cn.git
# fetch the raw registry index
curl -s https://ark-cn.vercel.app/r/registry.json
```

## Components (76)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A shadcn-style accordion component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/accordion.json` |
| alert | registry:ui | A shadcn-style alert component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/alert.json` |
| alert-dialog | registry:ui | A shadcn-style alert dialog component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/alert-dialog.json` |
| angle-slider | registry:ui | A shadcn-style angle slider component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/angle-slider.json` |
| avatar | registry:ui | A shadcn-style avatar component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/avatar.json` |
| badge | registry:ui | A shadcn-style badge component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/badge.json` |
| breadcrumb | registry:ui | A shadcn-style breadcrumb component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/breadcrumb.json` |
| button | registry:ui | A shadcn-style button component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/button.json` |
| button-group | registry:ui | A shadcn-style button group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/button-group.json` |
| card | registry:ui | A flexible container for grouping related content and actions. | `npx shadcn@latest add https://ark-cn.vercel.app/r/card.json` |
| carousel | registry:ui | A shadcn-style carousel component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/carousel.json` |
| checkbox | registry:ui | A shadcn-style checkbox component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/checkbox.json` |
| clipboard | registry:ui | A shadcn-style clipboard component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/clipboard.json` |
| collapsible | registry:ui | A shadcn-style collapsible component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/collapsible.json` |
| color-picker | registry:ui | A shadcn-style color picker component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/color-picker.json` |
| combobox | registry:ui | A shadcn-style combobox component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/combobox.json` |
| command | registry:ui | A shadcn-style command component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/command.json` |
| date-picker | registry:ui | A shadcn-style date picker component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/date-picker.json` |
| dialog | registry:ui | A shadcn-style dialog component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/dialog.json` |
| editable | registry:ui | A shadcn-style editable component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/editable.json` |
| empty | registry:ui | Empty state placeholder with icon, title, description, and action slots. | `npx shadcn@latest add https://ark-cn.vercel.app/r/empty.json` |
| field | registry:ui | A shadcn-style field component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/field.json` |
| fieldset | registry:ui | A shadcn-style fieldset component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/fieldset.json` |
| file-upload | registry:ui | A shadcn-style file upload component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/file-upload.json` |
| floating-panel | registry:ui | A shadcn-style floating panel component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/floating-panel.json` |
| hover-card | registry:ui | A shadcn-style hover card component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/hover-card.json` |
| image-cropper | registry:ui | A shadcn-style image cropper component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/image-cropper.json` |
| input | registry:ui | A shadcn-style input component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/input.json` |
| input-group | registry:ui | A shadcn-style input group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/input-group.json` |
| item | registry:ui | Composable list item with media, content, title, description, and action slots. | `npx shadcn@latest add https://ark-cn.vercel.app/r/item.json` |
| kbd | registry:ui | A shadcn-style keyboard shortcut component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/kbd.json` |
| label | registry:ui | A shadcn-style label component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/label.json` |
| listbox | registry:ui | A shadcn-style listbox component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/listbox.json` |
| marquee | registry:ui | A shadcn-style marquee component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/marquee.json` |
| menu | registry:ui | A shadcn-style menu component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/menu.json` |
| number-field | registry:ui | A shadcn-style number field component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/number-field.json` |
| pagination | registry:ui | A shadcn-style pagination component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/pagination.json` |
| password-input | registry:ui | A shadcn-style password input component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/password-input.json` |
| pin-input | registry:ui | A shadcn-style pin input component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/pin-input.json` |
| popover | registry:ui | A shadcn-style popover component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/popover.json` |
| progress-circular | registry:ui | A shadcn-style progress circular component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/progress-circular.json` |
| progress-linear | registry:ui | A shadcn-style progress linear component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/progress-linear.json` |
| qr-code | registry:ui | A shadcn-style qr code component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/qr-code.json` |
| radio-group | registry:ui | A shadcn-style radio group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/radio-group.json` |
| rating-group | registry:ui | A shadcn-style rating group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/rating-group.json` |
| scroll-area | registry:ui | A shadcn-style scroll area component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/scroll-area.json` |
| segment-group | registry:ui | A shadcn-style segment group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/segment-group.json` |
| select | registry:ui | A shadcn-style select component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/select.json` |
| separator | registry:ui | A shadcn-style separator component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/separator.json` |
| sheet | registry:ui | A shadcn-style sheet component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/sheet.json` |
| sidebar | registry:ui | A shadcn-style sidebar component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/sidebar.json` |
| signature-pad | registry:ui | A shadcn-style signature pad component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/signature-pad.json` |
| skeleton | registry:ui | Placeholder to show a loading state before content loads. | `npx shadcn@latest add https://ark-cn.vercel.app/r/skeleton.json` |
| slider | registry:ui | A shadcn-style slider component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/slider.json` |
| spinner | registry:ui | A shadcn-style spinner component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/spinner.json` |
| splitter | registry:ui | A shadcn-style splitter component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/splitter.json` |
| steps | registry:ui | A shadcn-style steps component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/steps.json` |
| swap | registry:ui | A shadcn-style swap component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/swap.json` |
| switch | registry:ui | A shadcn-style switch component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/switch.json` |
| tabs | registry:ui | A shadcn-style tabs component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/tabs.json` |
| tags-input | registry:ui | A shadcn-style tags input component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/tags-input.json` |
| textarea | registry:ui | A shadcn-style textarea component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/textarea.json` |
| timer | registry:ui | A shadcn-style timer component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/timer.json` |
| toast | registry:ui | A shadcn-style toast component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/toast.json` |
| toggle | registry:ui | A shadcn-style toggle component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/toggle.json` |
| toggle-group | registry:ui | A shadcn-style toggle group component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/toggle-group.json` |
| tooltip | registry:ui | A shadcn-style tooltip component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/tooltip.json` |
| tour | registry:ui | A shadcn-style tour component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/tour.json` |
| tree-view | registry:ui | A shadcn-style tree view component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/tree-view.json` |
| zoom-image | registry:ui | A shadcn-style zoom image component built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/zoom-image.json` |
| download-trigger | registry:ui | A shadcn-style download trigger utility built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/download-trigger.json` |
| focus-trap | registry:ui | A shadcn-style focus trap utility built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/focus-trap.json` |
| format | registry:ui | Shadcn-style format utilities (Byte, Time, RelativeTime) built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/format.json` |
| highlight | registry:ui | A shadcn-style text highlight utility built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/highlight.json` |
| locale | registry:ui | A shadcn-style locale provider utility built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/locale.json` |
| presence | registry:ui | A shadcn-style presence utility built with Ark UI primitives. | `npx shadcn@latest add https://ark-cn.vercel.app/r/presence.json` |

## For AI agents

```text
You are adding components from @ark-cn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/ark-cn.md) for the component list.
2. Fetch the machine-readable index: https://ark-cn.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: ark-cn).
```