# The asChild prop (/docs/as-child) The `asChild` prop lets you swap the default element for your own—a link, a custom button, whatever—while keeping the component’s styles, props, and behavior. You get composition without extra wrapper divs or duplicated markup. That’s useful when you need semantic HTML (like an anchor for navigation) but want it to look and act like a Button or Badge. Creating new Components [#creating-new-components] When you build custom components with the [Ark factory](https://ark-ui.com/docs/guides/composition#the-ark-factory), they automatically support `asChild` because Ark’s factory handles the prop under the hood. You don’t have to do anything special—just pass through props and the child merges in: ```tsx import { ark } from '@ark-ui/react/factory' interface ButtonExampleProps extends React.ComponentProps {} export const ButtonExample = (props: ButtonExampleProps) => ( ) ``` ```tsx import Link from "next/link"; Login ``` Examples [#examples] Link [#link] Need a login link that looks like a button? Use `asChild` so the `Link` becomes the rendered element—no extra div, and it keeps proper semantics for SEO and screen readers. ```tsx showLineNumbers ``` Badge [#badge] Sometimes a badge is clickable—a tag that goes somewhere, or a category filter. Wrap a `Link` with `Badge` and `asChild`, and the link gets the badge styling while staying a real anchor. ```tsx showLineNumbers React ``` Dialog [#dialog] Trigger components like `DialogTrigger` often need a button. Instead of nesting a button inside a trigger div, pass the `Button` as the child and let it become the trigger. Same accessibility, less markup. ```tsx showLineNumbers {/* ... */} ``` Menu [#menu] Same pattern for menus. The `Button` merges into `MenuTrigger`, so you get a single element that opens the menu with the right keyboard and focus behavior. ```tsx showLineNumbers {/* ... */} ``` Popover [#popover] Popovers work the same way. Use `asChild` on `PopoverTrigger` and pass your `Button`—no wrapper needed. ```tsx showLineNumbers {/* ... */} ``` When to use it [#when-to-use-it] Reach for `asChild` when you want the right element in the DOM: links for navigation, buttons for triggers, or any case where semantic HTML matters. It’s handy for forms (submit links styled as buttons), navigation bars, and anywhere you’d otherwise wrap something in a div just to apply styles. # Colors (/docs/colors) Shark UI relies on CSS custom properties for its color system. For layout setup and the full styling guide, see [Styling](/docs/styling). These variables toggle between light and dark themes automatically when you add the `dark` class to your root element. All definitions live in `globals.css` and stick to the [shadcn/ui](https://ui.shadcn.com) naming style. How It Works [#how-it-works] Colors are wired up through Tailwind's theme. The `@theme inline` block in `globals.css` maps semantic variables into Tailwind utilities so you can use classes like `bg-primary` and `text-muted-foreground`. Naming rules: * Names with `foreground` define text (or icon) color on top of that background (e.g. `--primary-foreground`). * Names without `foreground` define backgrounds (e.g. `--primary`, `--card`, `--popover`). Typical usage: ```tsx {/* Your app */} ``` ```tsx
Primary action
``` Variable Reference [#variable-reference] Base Layout [#base-layout] * `--background` — Page background * `--foreground` — Default text on that background Cards and Surfaces [#cards-and-surfaces] * `--card` / `--card-foreground` — Card backgrounds and their text * `--popover` / `--popover-foreground` — Popovers, dropdowns, menus Primary Actions [#primary-actions] * `--primary` / `--primary-foreground` — Main buttons and links Secondary and Muted [#secondary-and-muted] * `--secondary` / `--secondary-foreground` — Secondary controls * `--muted` / `--muted-foreground` — Softer backgrounds and de‑emphasized text * `--accent` / `--accent-foreground` — Hover and active states Status Colors [#status-colors] * `--success` / `--success-foreground` * `--info` / `--info-foreground` * `--warning` / `--warning-foreground` * `--destructive` / `--destructive-foreground` Form and UI [#form-and-ui] * `--border` — Borders * `--input` — Input backgrounds * `--ring` — Focus rings Sidebar [#sidebar] * `--sidebar` — Sidebar background * `--sidebar-foreground` — Sidebar text * `--sidebar-primary` — Active item background * `--sidebar-accent` — Hover and active states * `--sidebar-border` — Sidebar borders * `--sidebar-ring` — Focus rings Charts [#charts] * `--chart-1` — Chart series color 1 * `--chart-2` — Chart series color 2 * `--chart-3` — Chart series color 3 * `--chart-4` — Chart series color 4 * `--chart-5` — Chart series color 5 How to Use Colors [#how-to-use-colors] In JSX with Tailwind classes: ```tsx
``` For full setup, see the [manual installation guide](/docs/installation/manual). Customizing Colors [#customizing-colors] Override variables in `:root` for light mode and `.dark` for dark mode: ```css :root { --primary: var(--color-blue-600); --primary-foreground: var(--color-blue-50); } .dark { --primary: var(--color-blue-500); --primary-foreground: var(--color-blue-50); } ``` For oklch or custom values, tools like [oklch.com](https://oklch.com/) help with conversion. Shark UI ships preset themes, check [Theming](/docs/theming) for more information. Quick Tips [#quick-tips] * Apply the `dark` class on the root so dark mode styles take effect. * Check both light and dark appearances when changing colors. * Keep using foreground/background pairs so contrast stays safe. * Prefer color variables over hardcoded hex or rgb values. # Forms (/docs/forms) Shark UI builds on Ark UI's `Field` and `Fieldset` components for integrating with native `form` element or popular form libraries like [React Hook Form](https://react-hook-form.com/) and [TanStack Form](https://tanstack.com/form/latest). Form Libraries [#form-libraries] For detailed guides with examples, validation, and field-type-specific patterns, see the linked pages above. Field Context [#field-context] Form components in Shark UI automatically integrate with `Field` through context. When nested inside a `Field`, they inherit `disabled`, `invalid`, `required`, and `readOnly` states automatically. ```tsx import { Field } from "@/registry/react/components/field" import { NumberField } from "@/registry/react/components/number-input" const Demo = () => ( ) ``` Accessible Labels [#accessible-labels] When building accessible forms, you need to ensure that they are properly labeled and described. * `FieldHelper`: Used to provide additional instructions about the input. * `FieldLabel`: Used to provide an accessible label for the input. These components are automatically linked to the input element via the `aria-describedby` attribute. > **Best practice:** Make sure that labels are visible (and not just used as placeholders) for screen readers to read them. ```tsx import { Field, FieldLabel, FieldHelper, } from "@/registry/react/components/field" import { Input } from "@/registry/react/components/input" const Demo = () => (
Username This will be your public display name.
) ``` Error Handling and Validation [#error-handling-and-validation] When the input is invalid, you can use the `FieldError` component to provide an error message for the input, and pass the `invalid` prop to the `Field` component. > **Best practice:** Make sure to provide clear, specific error messages that are easy to understand and fix. ```tsx import { Field, FieldLabel, FieldError, } from "@/registry/react/components/field" import { Input } from "@/registry/react/components/input" const Demo = () => (
Username Username is required.
) ``` Required Fields [#required-fields] To indicate that a field is required, you can pass the `required` prop to the `Field` component. Optionally, you can use the `` to indicate that the field is required. ```tsx import { Field, FieldLabel, FieldRequiredIndicator, FieldError, } from "@/registry/react/components/field" import { Input } from "@/registry/react/components/input" export const Demo = () => (
Username (required) Username is required.
) ``` Fieldset Context [#fieldset-context] When you have multiple fields in a form or a component that renders multiple `input` elements, you can use the `FieldSet` component to group them together. Common use cases: checkbox group, radio group, input + select composition, etc. Checkbox Group [#checkbox-group] ```tsx import { FieldSet, FieldLegend, FieldDescription, FieldGroup, Field, FieldLabel, } from "@/registry/react/components/field" import { Checkbox, CheckboxGroup } from "@/registry/react/components/checkbox" const items = [ { label: "React", value: "react" }, { label: "Solid", value: "solid" }, { label: "Vue", value: "vue" }, { label: "Svelte", value: "svelte" }, ] const Demo = () => (
Frameworks Choose your preferred frameworks {items.map((item) => ( {item.label} ))}
) ``` Radio Group [#radio-group] ```tsx import { FieldSet, FieldLegend, FieldDescription, } from "@/registry/react/components/field" import { RadioGroup, RadioGroupItem } from "@/registry/react/components/radio-group" const items = [ { label: "React", value: "react" }, { label: "Solid", value: "solid" }, { label: "Vue", value: "vue" }, { label: "Svelte", value: "svelte" }, ] const Demo = () => (
Frameworks Choose your preferred framework {items.map((item) => ( {item.label} ))}
) ``` # Introduction (/docs) What is Shark UI? [#what-is-shark-ui] Shark UI is an opinionated UI library built on top of [Ark UI](https://ark-ui.com) and [shadcn](https://shadcn.com). "Opinionated" means it comes with sensible defaults out of the box—styling, variants, and structure—so you can drop components into a project without starting from scratch. It’s not a black-box framework; you own the code, tweak what you need, and build on top of something that’s already thought through. The name blends the two projects it’s built on: **sh** from shadcn and **ark** from Ark UI. Shark. Motivation [#motivation] [Ark UI](https://ark-ui.com) offers a broad set of headless components—made by the team behind [Chakra UI](https://chakra-ui.com)—and serves as a direct alternative to [Radix Primitives](https://radix-ui.com/primitives) and [Base UI](https://base-ui.com). It gives you accessible primitives and state management, but it leaves styling and layout entirely to you. [shadcn](https://shadcn.com), on the other hand, ships copy-paste components that look great with [Tailwind CSS](https://tailwindcss.com). The gap is that Ark’s docs don’t show how to pair its primitives with Tailwind, or how to turn them into a reusable design system you can install, theme, and extend. If you wanted that combination, you had to figure it out yourself. That’s where Shark UI comes in. Solution [#solution] Shark UI bridges that gap. It takes Ark’s headless components, styles them with Tailwind using shadcn’s patterns, and gives you a design system you can install, customize, and grow. Components live in your project, not in a dependency you can’t touch. You get Tailwind examples, consistent theming, and a structure that scales—without reinventing the wheel. Installation [#installation] To get started, follow the [installation guide](/docs/installation). You’ll choose your framework (Next.js, Vite, Astro, and others are supported), add the components you need, and you’re off. # LLMs.txt (/docs/llms-txt) Shark UI provides [LLMs.txt](https://llmstxt.org/) endpoints so AI coding assistants can fetch documentation directly by URL. Available Files [#available-files] **Core documentation:** * [/llms.txt](/llms.txt) — Quick reference index for documentation * [/llms-full.txt](/llms-full.txt) — Complete Shark UI documentation **For limited context windows:** * [/llms-components.txt](/llms-components.txt) — Component documentation only * [/llms-patterns.txt](/llms-patterns.txt) — Common patterns and recipes **All platforms:** * [/llms.txt](/llms.txt) — Quick reference index * [/llms-full.txt](/llms-full.txt) — Complete documentation * [/llms-components.txt](/llms-components.txt) — All component documentation * [/llms-patterns.txt](/llms-patterns.txt) — All patterns and recipes Integration [#integration] **Claude Code:** Reference the docs in your prompt or add to your project’s `.claude` file: ```bash Use Shark UI documentation from https://shark.vini.one/llms.txt ``` **Cursor:** Use the `@Docs` feature: ```bash @Docs https://shark.vini.one/llms-full.txt ``` [Learn more](https://docs.cursor.com/context/@-symbols/@-docs) **Windsurf:** Add to your `.windsurfrules` file: ```bash #docs https://shark.vini.one/llms-full.txt ``` [Learn more](https://docs.codeium.com/windsurf/memories#memories-and-rules) **Other AI tools:** Most assistants accept documentation URLs: ```bash https://shark.vini.one/llms.txt ``` For component-specific documentation: ```bash https://shark.vini.one/llms-components.txt ``` For patterns and best practices: ```bash https://shark.vini.one/llms-patterns.txt ``` Contributing [#contributing] Spotted an issue with AI-generated code? Contributions to improve the LLMs.txt output are welcome on [GitHub](https://github.com/vinihvc/shark-ui). # RTL (/docs/rtl) Setup [#setup] Wrap your app with `LocaleProvider` and pass an RTL locale. Use this when you know the user’s language ahead of time or when the app switches locale dynamically. ```tsx showLineNumbers {4,6} import { LocaleProvider } from "@/components/ui/locale"; export const App = () => ( {/* Your app */} ); ``` Common RTL locales include `ar-BH`, `ar-SA`, `he-IL`, and `fa-IR`. > **Note:** If no `LocaleProvider` is set up, the default locale is `en-US` and the direction stays `ltr`. Applying Direction [#applying-direction] Read the current `dir` from `useLocale` and pass it to your root element—usually ``—so the layout renders correctly and child components inherit the right text direction. ```tsx import { LocaleProvider, useLocale } from "@/components/ui/locale"; const AppContent = () => { const { locale, dir } = useLocale(); return ( {/* Your app content */} ); }; ``` How it works [#how-it-works] Shark UI components rely on logical CSS properties wherever possible. That means spacing and layout use `ms-*`, `me-*`, `ps-*`, `pe-*`, and `start-*` / `end-*` instead of physical ones like `ml-*`, `mr-*`, `left-*`, or `right-*`. When you flip `dir` to `rtl`, the layout adapts automatically because those utilities follow the text direction. Setting `dir={dir}` on the root ensures that direction propagates down. Ark UI’s overlays, tooltips, and menus respect the document direction, so they position themselves correctly whether the user reads left-to-right or right-to-left. Animations [#animations] Animations should follow the reading direction. Physical utilities like `slide-in-from-right` will slide the wrong way in RTL. Use logical alternatives so motion stays consistent: * `slide-in-from-end` / `slide-out-to-end` instead of `slide-in-from-right` / `slide-out-to-right` * `slide-in-from-start` / `slide-out-to-start` instead of `slide-in-from-left` / `slide-out-to-left` *** For the full API reference, see the [Ark UI documentation](https://ark-ui.com/docs/utilities/locale). # Skills (/docs/skills) Skills give AI assistants like Claude Code project-aware context about Shark UI. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project. For example, you can ask your AI assistant to: * "Add a login form with email and password fields." * "Create a settings page with a form for updating profile information." * "Build a dashboard with a sidebar, stats cards, and a data table." * "Add the dialog component from the Shark registry." * "Can you add a hero block from the Shark blocks?" Setup [#setup] Run the installer script (works with Claude Code, Cursor, OpenCode, Codex, and Antigravity): ```bash curl -fsSL https://shark.vini.one/install | bash -s shark-ui ``` Alternatively, install via the skills CLI: ```bash npx skills add shark-ui ``` Using Skills [#using-skills] Agents discover skills automatically, or you can invoke the skill with `/shark-ui`. You can instruct your assistant to: * Implement UIs with Shark UI components * Create screens and flows using the component set * Adjust themes, tokens, and styling * Look up component APIs and examples For broader AI context, see [llms.txt](/docs/llms-txt) for documentation bundled for agents. What You Get [#what-you-get] * Shark UI setup and installation instructions * Component catalog with props, variants, and usage * Theming and styling notes * Design principles and composition patterns Skill Layout [#skill-layout] ```bash skills/shark-ui/ ├── SKILL.md # Skill entry point ├── LICENSE.txt └── scripts/ ├── list_components.mjs ├── get_component_docs.mjs ├── get_source.mjs ├── get_styles.mjs ├── get_theme.mjs └── get_docs.mjs ``` # Styling (/docs/styling) Overview [#overview] Everything here is driven by CSS variables, which is what keeps borders crisp and stacking clear on screen. If you need the token list and how colors map to utilities, read [Colors](/docs/colors). Borders are deliberately a little see-through and sit next to light shadows so surfaces read as separate layers. You can swap in your own palette, but the defaults are balanced for that recipe—typical flat themes often end up with muddier edges or flatter depth. Installation [#installation] See [Get Started](/docs/installation) for setup. To add the theme yourself, paste the following into `globals.css`: ```css @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-xs: calc(var(--radius) * 0.25); --radius-sm: calc(var(--radius) * 0.5); --radius-md: calc(var(--radius) * 0.75); --radius-lg: calc(var(--radius) * 1); --radius-xl: calc(var(--radius) * 1.5); --radius-2xl: calc(var(--radius) * 2); --radius-3xl: calc(var(--radius) * 3); --radius-4xl: calc(var(--radius) * 4); } :root { --radius: 0.5rem; --background: var(--color-neutral-50); --foreground: var(--color-neutral-800); --card: var(--color-neutral-50); --card-foreground: var(--color-neutral-800); --popover: var(--color-neutral-50); --popover-foreground: var(--color-neutral-800); --primary: var(--color-neutral-800); --primary-foreground: var(--color-neutral-50); --secondary: color-mix( in srgb, var(--color-neutral-950) 4%, var(--background) ); --secondary-foreground: var(--color-neutral-800); --muted: color-mix(in srgb, var(--color-neutral-950) 4%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 90%, var(--color-neutral-950) ); --accent: color-mix(in srgb, var(--color-neutral-950) 4%, var(--background)); --accent-foreground: var(--color-neutral-800); --destructive: var(--color-red-500); --destructive-foreground: var(--color-red-700); --info: var(--color-blue-500); --info-foreground: var(--color-blue-700); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-700); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-700); --border: color-mix(in srgb, var(--color-neutral-950) 8%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-950) 10%, var(--background)); --ring: var(--color-neutral-400); --sidebar: var(--color-neutral-50); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-800) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-800); --sidebar-primary-foreground: var(--color-neutral-50); --sidebar-accent: color-mix( in srgb, var(--color-neutral-950) 4%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-800); --sidebar-border: color-mix( in srgb, var(--color-neutral-950) 6%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-orange-600); --chart-2: var(--color-teal-600); --chart-3: var(--color-cyan-900); --chart-4: var(--color-amber-400); --chart-5: var(--color-amber-500); } .dark { --background: color-mix( in srgb, var(--color-neutral-950) 100%, var(--color-neutral-50) ); --foreground: var(--color-neutral-100); --card: color-mix(in srgb, var(--background) 98%, var(--color-neutral-50)); --card-foreground: var(--color-neutral-100); --popover: color-mix( in srgb, var(--background) 100%, var(--color-neutral-50) ); --popover-foreground: var(--color-neutral-100); --primary: var(--color-neutral-100); --primary-foreground: var(--color-neutral-800); --secondary: color-mix(in srgb, var(--color-white) 4%, var(--background)); --secondary-foreground: var(--color-neutral-100); --muted: color-mix(in srgb, var(--color-neutral-50) 4%, var(--background)); --muted-foreground: color-mix( in srgb, var(--color-neutral-500) 90%, var(--color-neutral-50) ); --accent: color-mix(in srgb, var(--color-neutral-50) 4%, var(--background)); --accent-foreground: var(--color-neutral-100); --destructive: color-mix( in srgb, var(--color-red-600) 90%, var(--color-neutral-50) ); --destructive-foreground: var(--color-red-400); --info: var(--color-blue-500); --info-foreground: var(--color-blue-400); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-400); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-400); --border: color-mix(in srgb, var(--color-neutral-50) 6%, var(--background)); --input: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background)); --ring: var(--color-neutral-500); --sidebar: color-mix( in srgb, var(--color-neutral-950) 97%, var(--color-neutral-50) ); --sidebar-foreground: color-mix( in srgb, var(--color-neutral-100) 64%, var(--sidebar) ); --sidebar-primary: var(--color-neutral-100); --sidebar-primary-foreground: var(--color-neutral-800); --sidebar-accent: color-mix( in srgb, var(--color-neutral-50) 4%, var(--sidebar) ); --sidebar-accent-foreground: var(--color-neutral-100); --sidebar-border: color-mix( in srgb, var(--color-neutral-50) 5%, var(--sidebar) ); --sidebar-ring: var(--color-neutral-400); --chart-1: var(--color-blue-700); --chart-2: var(--color-emerald-500); --chart-3: var(--color-amber-500); --chart-4: var(--color-purple-500); --chart-5: var(--color-rose-500); } ``` Font Variables [#font-variables] The theme preset defines `--font-sans` with system fallbacks. To use custom typefaces, set this variable in your layout via `next/font` or `@fontsource-variable`: ```tsx import { Inter } from "next/font/google"; const fontSans = Inter({ variable: "--font-sans", subsets: ["latin"] }); export default function RootLayout({ children }) { return ( {children} ); } ``` Apply the variables on `html` or `body` so they cascade. Customizing Colors [#customizing-colors] To customize colors interactively, use the [Themes](/themes) page: pick primary and gray bases, adjust border radius, preview light and dark, then copy the generated CSS variables into your `globals.css` (or merge them with the snippet below). # January 2026 - Beta 1 (/docs/changelog/26-01-first-beta) Beta 1 marks the first public release of Shark UI. The goal was to build a set of components on [Ark UI](https://ark-ui.com) styled with [Tailwind CSS](https://tailwindcss.com), so you can add accessible primitives to a project without wiring up styles from scratch. Components [#components] Roughly 80+ components are available, grouped into several categories: * **UI primitives**: Accordion, Alert, Avatar, Badge, Button, Card, Separator, Skeleton, Tabs * **Overlays and dialogs**: Dialog, Menu, Popover, Sheet, Tooltip, Hover Card, Context Menu * **Forms and inputs**: Input, Textarea, Checkbox, Radio Group, Select, Native Select, Field, Combobox, Input OTP, File Upload, Editable * **Layout and navigation**: Sidebar, Scroll Area, Resizable, Pagination, Breadcrumb, Bottom Navigation * **Feedback and display**: Progress, Slider, Rating Group, Toggle, Toggle Group, Steps, Carousel Components are copy-paste: they land in your project, and you own the code. Tailwind and Ark UI are the only runtime dependencies. Theme editor [#theme-editor] The theme editor lets you tweak colors and copy the resulting CSS variables into your project. Themes follow the shadcn color convention, with extra variables for success, warning, info, and destructive states. Limitations [#limitations] This is a beta. Some components may change before a stable release. If you run into issues, open an issue on [GitHub](https://github.com/vinihvc/shark-ui). # March 2026 - Release Candidate (/docs/changelog/26-03-rc) This release candidate builds on Beta 1 with new components, utilities, theme editor enhancements, and improved documentation. The component registry has been restructured with thumbs and consistent example naming. New Components [#new-components] * **Announcement** — Banner-style component for promotions and notices * **Calendar** — Full calendar with month/year navigation and range selection * **Color Picker** — Color selection with swatches and input fields * **Date Picker** — Date input with calendar popover and presets * **Drawer** — Slide-out panel for mobile-first layouts * **Image Cropper** — Crop images with zoom, aspect ratio, and constraints * **Prose** — Typography styles for markdown and long-form content * **Signature Pad** — Canvas-based signature capture * **Skip Nav** — Accessibility link to skip to main content * **Timer** — Countdown, interval, and Pomodoro timers New Utilities [#new-utilities] * **Client Only** — Render components only on the client * **Format** — Date, number, and relative time formatting * **Show** — Conditional rendering with animation support * **Download Trigger** — Programmatic file downloads * **Swap** — Toggle between two states with animation * **Presence** — Mount/unmount with enter/exit animations * **JSON Tree View** — Expandable JSON display * **Highlight** — Syntax highlighting for code blocks Component Updates [#component-updates] Registry examples and thumbs were standardized across components: * **Button** — Variants, sizes, and icon support * **Card** — Composition and theming * **Combobox** — Multi-select and controlled state * **Dialog** — Sizes and compositions * **Field** — Required fields and validation * **Floating Panel** — Positions and resize behavior * **Input Group** — Button integration and addons * **Menu** — Nested menus and keyboard navigation * **Number Input** — Stepper and format options * **Pagination** — Sizes and variants * **Select** — Multi-select and custom items * **Textarea** — Autoresize and validation * **Toast** — Placement, types, and promises * **Toggle** — Sizes, outline, and icon variants * **Tooltip** — Positioning and keyboard support * **Tour** — Step types, progress, and async steps Theme Editor [#theme-editor] * Updated color variable system and theme presets * Support for success, warning, info, and destructive states * Prose typography styles for content blocks Home Page [#home-page] * Redesigned hero with Announcement component * Component examples (Input OTP, forms, calendar, charts, and more) * Framework support badges (React, Solid, Vue, Svelte) * Theme cards for activity, chat, and sharing examples Documentation [#documentation] * **Forms** — New forms section with React Hook Form and TanStack Form guides * **RTL** — Right-to-left layout support * Component docs updated with API references and examples * New installation guides for various frameworks Infrastructure [#infrastructure] * Open Graph image generation for docs and changelog * RSS feed and sitemap generation * LLMs.txt route for AI crawlers Dependencies [#dependencies] * Package updates for Next.js, React, Ark UI, and dev tooling # Changelog (/docs/changelog) Releases are listed by date, newest first. Each entry describes what changed—components added or updated, breaking changes, and fixes. For release tags and diffs, check the [Shark UI repository](https://github.com/vinihvc/shark-ui) on GitHub. # Accordion (/docs/components/accordion) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/accordion ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Add the following animations to your `globals.css` . ```css title="styles/globals.css" showLineNumbers @theme inline { /* ... */ --animate-slide-up: slideUp 0.2s ease-out; --animate-slide-down: slideDown 0.2s ease-out; @keyframes slideUp { from { height: var(--height); } to { height: 0; } } @keyframes slideDown { from { height: 0; } to { height: var(--height); } } } ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/ui/accordion"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use the `value` and `onValueChange` props to control the accordion state programmatically. Examples [#examples] Non-collapsible [#non-collapsible] Set the `collapsible` prop to `false` to disable the collapsible behavior and prevent closing the open item. Multiple [#multiple] Use the `multiple` prop to allow multiple items to be open simultaneously. Disabled [#disabled] Use the `disabled` prop on `AccordionItem` to prevent interaction with specific items. API Reference [#api-reference] Accordion [#accordion] Root component. Manages expand/collapse state for items. | Prop | Type | Default | | --------------- | -------------------- | ------- | | `collapsible` | `boolean` | `true` | | `multiple` | `boolean` | `false` | | `value` | `string[]` | `-` | | `defaultValue` | `string[]` | `-` | | `onValueChange` | `ValueChangeDetails` | `-` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AccordionItem [#accordionitem] Wraps a single accordion section (trigger + content). | Prop | Type | Default | | ----------- | --------- | ------------ | | `value` | `string` | **required** | | `disabled` | `boolean` | `false` | | `className` | `string` | `-` | AccordionTrigger [#accordiontrigger] Toggles the section open/closed on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `disabled` | `boolean` | `false` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AccordionContent [#accordioncontent] Holds the collapsible content for the section. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/accordion#api-reference). # Action Bar (/docs/components/action-bar) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/action-bar ``` This component depends on [Button](/docs/components/button) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { ActionBar, ActionBarBody, ActionBarClose, ActionBarContent, ActionBarSelectionTrigger, ActionBarSeparator, ActionBarTrigger, } from "@/components/ui/action-bar"; ``` ```tsx showLineNumbers {/* Your action buttons */} ``` Controlled [#controlled] Examples [#examples] Positioning [#positioning] Use the `positioning.placement` prop to position the action bar. Offset [#offset] Use `positioning.offset` to control the distance from the bottom edge. Close Trigger [#close-trigger] With Dialog [#with-dialog] With Menu [#with-menu] Table [#table] Custom Spacing [#custom-spacing] The `[--space:--spacing("value")]` utility class controls the action bar internal padding. Breakpoint utilities change the action bar spacing at different screen sizes. ```css md:[--space:--spacing(6)] lg:[--space:--spacing(8)] ``` API Reference [#api-reference] ActionBar [#actionbar] Root context provider. Wraps the trigger and floating toolbar. | Prop | Type | Default | | --------------- | ----------------------------------------------------------------------------- | ----------------------------------------- | | `open` | `boolean` | - | | `defaultOpen` | `boolean` | `false` | | `positioning` | `{ placement?: "bottom" \| "bottom-start" \| "bottom-end", offset?: string }` | `{ placement: "bottom", offset: "16px" }` | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `onOpenChange` | `(open: boolean) => void` | - | ActionBarContent [#actionbarcontent] Floating toolbar positioned above selected items. | Prop | Type | Default | | ----------------- | --------- | --------------------- | | `aria-label` | `string` | `"Selection actions"` | | `aria-labelledby` | `string` | - | | `className` | `string` | - | | `asChild` | `boolean` | `false` | | Data attribute | Value | | -------------- | ---------------------- | | `data-slot` | `"action-bar-content"` | | `data-state` | `"open" \| "closed"` | | Attribute | Default | | ---------- | ---------------------------------- | | `--offset` | `16px` (from `positioning.offset`) | | `--space` | `--spacing(4)` | ActionBarTrigger [#actionbartrigger] Opens the action bar on click. Typically wraps the selection trigger. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ActionBarClose [#actionbarclose] Closes the action bar and clears the selection. | Prop | Type | Default | | ------------ | --------- | --------- | | `aria-label` | `string` | `"Close"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ActionBarSelectionTrigger [#actionbarselectiontrigger] Shows the number of selected items or a custom label. | Prop | Type | Default | | ----------- | --------- | ------- | | `count` | `number` | `0` | | `label` | `string` | - | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ActionBarBody [#actionbarbody] Holds the action buttons. Use for bulk actions on selected items. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Alert Dialog (/docs/components/alert-dialog) Built on top of the [``](/docs/components/dialog) component. Check it out for more examples. Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/alert-dialog ``` This component depends on [Button](/docs/components/button) and [Dialog](/docs/components/dialog) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogBody, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, AlertDialogHeader, AlertDialogFooter, } from "@/components/ui/alert-dialog"; ``` ```tsx showLineNumbers {/** Your content here */} ``` Examples [#examples] Destructive [#destructive] API Reference [#api-reference] AlertDialogAction [#alertdialogaction] Primary action (e.g. confirm, delete). Closes the dialog on click. | Prop | Type | Default | | ----------- | ---------------------------- | ----------- | | `variant` | `"default" \| "destructive"` | `"default"` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AlertDialogCancel [#alertdialogcancel] Cancel action. Closes the dialog without committing. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Dialog API Reference](/docs/components/dialog#api-reference). # Alert (/docs/components/alert) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/alert ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Add the following CSS variables to your CSS file: ```css @theme inline { --color-destructive-foreground: var(--destructive-foreground); --color-info: var(--info); --color-info-foreground: var(--info-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); } :root { --destructive-foreground: var(--color-red-400); --info: var(--color-blue-500); --info-foreground: var(--color-blue-700); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-700); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-700); } .dark { --destructive-foreground: var(--color-red-400); --info: var(--color-blue-500); --info-foreground: var(--color-blue-400); --success: var(--color-emerald-500); --success-foreground: var(--color-emerald-400); --warning: var(--color-amber-500); --warning-foreground: var(--color-amber-400); } ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; ``` ```tsx showLineNumbers Heads up! You can add icons to alerts. ``` Variants [#variants] The `variant` prop controls the alert's visual style. Default [#default] Info [#info] Warning [#warning] Success [#success] Destructive [#destructive] Examples [#examples] With icon [#with-icon] Icons can be added to alerts for visual context and improved user experience. With action [#with-action] Custom color [#custom-color] API Reference [#api-reference] Alert [#alert] Root wrapper for alert messages. Supports variants (info, warning, etc.). | Prop | Type | Default | | ----------- | -------------------------------------------------------- | ----------- | | `variant` | `"default", "info", "warning", "success", "destructive"` | `"default"` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AlertTitle [#alerttitle] Alert title or heading. Bold by default. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AlertDescription [#alertdescription] Alert body or description. Muted foreground for hierarchy. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AlertAction [#alertaction] Holds action buttons (e.g. dismiss, retry). | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | # Announcement (/docs/components/announcement) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/announcement ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Announcement, AnnouncementBadge, AnnouncementTitle, } from "@/components/ui/announcement"; ``` ```tsx showLineNumbers Latest update New feature added ``` Variants [#variants] The `variant` prop on `` controls the badge visual style. Info [#info] Success [#success] Warning [#warning] Destructive [#destructive] Examples [#examples] With icon [#with-icon] Add icons to the badge or title to provide visual context. Use `aria-hidden` on decorative icons. With link [#with-link] The [asChild](/docs/as-child) prop renders a link with announcement styling. Without Badge [#without-badge] The announcement supports a title-only layout without the badge component. API Reference [#api-reference] Announcement [#announcement] Root wrapper for announcement banners or notices. | Prop | Type | Default | | ----------- | ------------------------------------------------- | -------- | | `role` | `status`, `alert`, or other ARIA live region role | `status` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AnnouncementBadge [#announcementbadge] Optional badge (e.g. New, Sale) shown alongside the title. | Prop | Type | Default | | ----------- | ------------------------------------------------------------------------------ | --------- | | `variant` | `default`, `secondary`, `outline`, `success`, `info`, `warning`, `destructive` | `default` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AnnouncementTitle [#announcementtitle] Main title or message of the announcement. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | # Aspect Ratio (/docs/components/aspect-ratio) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/aspect-ratio ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { AspectRatio } from "@/components/ui/aspect-ratio"; ``` ```tsx showLineNumbers Description ``` Examples [#examples] Square [#square] Portrait [#portrait] Video [#video] Responsive [#responsive] Use `[--ratio:*]` with breakpoints to change the ratio at different screen sizes. API Reference [#api-reference] AspectRatio [#aspectratio] Main wrapper that preserves aspect ratio for its children using CSS. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | | Attribute | Description | | --------- | ----------- | | `--ratio` | `1` | # Autocomplete (/docs/components/autocomplete) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/autocomplete ``` This component depends on [Combobox](/docs/components/combobox) , [Input](/docs/components/input) , and [Separator](/docs/components/separator) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { useFilter, useListCollection } from "@ark-ui/react"; import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteInput, AutocompleteItem, AutocompleteList, } from "@/components/ui/autocomplete"; ``` ```tsx showLineNumbers const { contains } = useFilter({ sensitivity: "base" }); const { collection, filter } = useListCollection({ initialItems: [ { label: "Apple", value: "apple", group: "Fruits" }, { label: "Banana", value: "banana", group: "Fruits" }, ], filter: contains, groupBy: (item) => item.group, // optional }); filter(inputValue)} > {collection.group().map(([group, items]) => ( {items.map((item) => ( {item.label} ))} ))} ``` Controlled [#controlled] Control the selected value with `value` and `onValueChange` props. Use `inputValue` and `onInputValueChange` for controlling the input text. Sizes [#sizes] Small [#small] Medium [#medium] Large [#large] State [#state] Invalid [#invalid] Disabled [#disabled] Examples [#examples] Inline autocomplete [#inline-autocomplete] Autofill the input with the highlighted item while navigating with arrow keys. Group [#group] With Field [#with-field] Use Autocomplete with `` components to style with the field components. With clear button [#with-clear-button] Pass `showClear` to `` to show a clear button. With trigger [#with-trigger] Pass `showTrigger` to `` to show the dropdown trigger button. With start icon [#with-start-icon] API Reference [#api-reference] Autocomplete [#autocomplete] Combines input, dropdown trigger, and list into a searchable select. | Prop | Type | Default | | -------------------- | -------------------------------------------- | ------------ | | `collection` | `ListCollection` | **required** | | `value` | `string \| string[]` | - | | `defaultValue` | `string \| string[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `onInputValueChange` | `(details: InputValueChangeDetails) => void` | - | | `disabled` | `boolean` | - | | `openOnClick` | `boolean` | `true` | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | AutocompleteInput [#autocompleteinput] Text input with optional dropdown trigger and clear button. Supports size variants. | Prop | Type | Default | | ------------- | ---------------------- | ------- | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | | `showTrigger` | `boolean` | `false` | | `showClear` | `boolean` | `false` | | `disabled` | `boolean` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | AutocompleteContent [#autocompletecontent] Dropdown that displays filtered suggestions. Portaled to overlay other content. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | AutocompleteItem [#autocompleteitem] Single selectable option in the suggestion list. Pass `item` from the collection. | Prop | Type | Default | | ----------- | --------- | ------------ | | `item` | `T` | **required** | | `className` | `string` | - | | `asChild` | `boolean` | - | AutocompleteGroup [#autocompletegroup] Groups related items. Use with `groupBy` on the collection. | Prop | Type | Default | | ----------- | --------------------- | ------- | | `heading` | `string \| ReactNode` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | AutocompleteGroupLabel [#autocompletegrouplabel] Heading for a group of items. Use inside `AutocompleteGroup`. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | AutocompleteEmpty [#autocompleteempty] Content when no items match the filter. Default: "No results found." | Prop | Type | Default | | ----------- | ----------- | ------- | | `className` | `string` | - | | `children` | `ReactNode` | - | AutocompleteControl / AutocompleteTrigger / AutocompleteClear [#autocompletecontrol--autocompletetrigger--autocompleteclear] Optional building blocks for custom layouts. Use `AutocompleteInput` for the standard layout. *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/combobox#api-reference). # Avatar (/docs/components/avatar) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/avatar ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"; ``` ```tsx showLineNumbers VV ``` Sizes [#sizes] Use the `size` prop to change the size of the avatar. Small [#small] Medium [#medium] Large [#large] Examples [#examples] Avatar Group [#avatar-group] Use the `` to add a group of avatars. Badge [#badge] Use `` to show status indicators on avatars. Badge with Icon [#badge-with-icon] Add an icon to `` for actions like adding a user. Fallback with Icon [#fallback-with-icon] Use an icon inside `` when you have no image or initials. Avatar Group Count [#avatar-group-count] Use `` to add a count to the group. Avatar Group Count Icon [#avatar-group-count-icon] The `` also supports an icon. Avatar with Popover [#avatar-with-popover] Works with the `` component to show additional information. Avatar with Hover Card [#avatar-with-hover-card] Works with the `` component to show user information on hover. Custom Size [#custom-size] Use `size-*` to set the size of the avatar. Custom Radius [#custom-radius] Use `rounded-*` to set the radius of the avatar. Custom Colors [#custom-colors] Customize the `` with a custom color. API Reference [#api-reference] Avatar [#avatar] Container for user or entity profile image. Supports sizes and fallback. | Prop | Type | Default | | ----------- | ---------------- | ------- | | `size` | `sm`, `md`, `lg` | `md` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AvatarImage [#avatarimage] Profile image. Shown when URL loads; fallback used on error. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AvatarFallback [#avatarfallback] Shown when the image fails to load or is loading. Often initials or icon. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AvatarGroup [#avatargroup] Groups avatars with overlap and optional count badge. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AvatarGroupCount [#avatargroupcount] Shows "+N" when more avatars exist than displayed (e.g. "+5"). | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | AvatarBadge [#avatarbadge] Status or indicator badge overlaid on the avatar corner. | Prop | Type | Default | | ----------- | ------------------------------------------------------ | --------- | | `variant` | `default`, `success`, `info`, `warning`, `destructive` | `default` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/avatar#api-reference). # Badge (/docs/components/badge) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/badge ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Badge } from "@/components/ui/badge"; ``` ```tsx showLineNumbers Badge ``` Variants [#variants] The `variant` prop controls the badge's visual style. Default [#default] Secondary [#secondary] Outline [#outline] Success [#success] Info [#info] Warning [#warning] Destructive [#destructive] Sizes [#sizes] The `size` prop controls the badge dimensions. Small [#small] Medium [#medium] Large [#large] Pill [#pill] The `pill` prop creates fully rounded badges. Examples [#examples] With link [#with-link] The [asChild](/docs/as-child) prop renders another element with badge styling. With icon [#with-icon] Icons can be added to badges for visual context. With spinner [#with-spinner] The `` component indicates loading states when placed inside a badge. Custom color [#custom-color] API Reference [#api-reference] Badge [#badge] Label, count, or status badge. Supports variants. | Prop | Type | Default | | ----------- | ------------------------------------------------------------------------------ | --------- | | `variant` | `default`, `secondary`, `outline`, `success`, `info`, `warning`, `destructive` | `default` | | `size` | `sm`, `md`, `lg` | `md` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/badge#api-reference). # Bottom Navigation (/docs/components/bottom-navigation) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/bottom-navigation ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { BottomNavigation, BottomNavigationList, BottomNavigationItem, BottomNavigationItemIcon, BottomNavigationItemLabel, } from "@/components/ui/bottom-navigation"; ``` ```tsx showLineNumbers Home Notifications ``` Disclaimer [#disclaimer] > Don't include `position: absolute` on the ``. It's just for the examples. Examples [#examples] Icon only [#icon-only] Show only icons without labels for a minimalist layout. With links [#with-links] Use the `asChild` prop on `` with ``. Sync the active state with `value={pathname}` on the ``. Accessibility [#accessibility] * Use `aria-label` on `` when using icon-only items so screen readers can read the label. API Reference [#api-reference] BottomNavigation [#bottomnavigation] Root wrapper for the bottom navigation bar. | Prop | Type | Default | | --------------- | --------------------------------------- | ------- | | `value` | `string` | `-` | | `defaultValue` | `string` | `-` | | `onValueChange` | `(details: ValueChangeDetails) => void` | `-` | | `className` | `string` | `-` | BottomNavigationList [#bottomnavigationlist] Fixed bar at the bottom. Typically holds nav items. | Prop | Type | Default | | ------------ | -------- | ------------------- | | `aria-label` | `string` | `"Main navigation"` | | `className` | `string` | `-` | BottomNavigationItem [#bottomnavigationitem] Single navigation link or button. | Prop | Type | Default | | ------------ | --------- | ------------ | | `value` | `string` | **required** | | `disabled` | `boolean` | `false` | | `aria-label` | `string` | `-` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BottomNavigationItemIcon [#bottomnavigationitemicon] Holds the item icon. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BottomNavigationItemLabel [#bottomnavigationitemlabel] Holds the item label text. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/tabs#api-reference). # Breadcrumb (/docs/components/breadcrumb) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/breadcrumb ``` Install the following dependencies: ```bash npm install lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb"; ``` ```tsx showLineNumbers Home Current Page ``` Examples [#examples] With custom separator [#with-custom-separator] With links [#with-links] Collapsed [#collapsed] With menu [#with-menu] API Reference [#api-reference] Breadcrumb [#breadcrumb] Navigation landmark for the breadcrumb trail. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbList [#breadcrumblist] Ordered list of breadcrumb segments. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbItem [#breadcrumbitem] Wraps a single breadcrumb link or page. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbLink [#breadcrumblink] Link to a parent page in the hierarchy. | Prop | Type | Default | | ----------- | --------- | ------- | | `href` | `string` | `-` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbPage [#breadcrumbpage] Current page. Not a link; marked with `aria-current="page"` for accessibility. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbSeparator [#breadcrumbseparator] Visual separator between segments. ChevronRight by default; customizable via children. | Prop | Type | Default | | ----------- | ----------------- | ------------------ | | `children` | `React.ReactNode` | `` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | BreadcrumbEllipsis [#breadcrumbellipsis] Shows when middle segments are collapsed. MoreHorizontal icon by default; use with dropdown. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | # Button Group (/docs/components/button-group) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/button-group ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { ButtonGroup, ButtonGroupSeparator, } from "@/components/ui/button-group"; ``` ```tsx showLineNumbers ``` Accessibility [#accessibility] * When using icon-only, add an `aria-label` prop so screen readers can identify the button’s purpose. Link [#link] The [asChild](/docs/as-child) prop renders another element with button styling. Variants [#variants] The `variant` prop controls the button's visual style. Default [#default] Outline [#outline] Secondary [#secondary] Ghost [#ghost] Link [#link-1] Destructive [#destructive] Sizes [#sizes] The `size` prop controls the button dimensions. Extra Small [#extra-small] Small [#small] Large [#large] Extra Large [#extra-large] Pill [#pill] The `pill` prop creates fully rounded buttons. Disabling click effect [#disabling-click-effect] The `clickEffect` prop disables the click animation. State [#state] Disabled [#disabled] The `disabled` prop disables user interaction. Loading [#loading] The `isLoading` prop displays a loading indicator. Examples [#examples] Icon only [#icon-only] Create icon-only buttons using the `icon-*` size variants. With icon [#with-icon] Icons can be placed alongside text for visual context. Touch hitbox [#touch-hitbox] For a larger tap target without changing how the button looks, use the [Hitbox](/docs/utilities/hitbox). Custom color [#custom-color] API Reference [#api-reference] | Prop | Type | Default | | ------------- | ----------------------------------------------------------------------------------- | --------- | | `variant` | `default`, `outline`, `secondary`, `ghost`, `link`, `destructive` | `default` | | `size` | `xs`, `sm`, `md`, `lg`, `xl`, `icon-xs`, `icon-sm`, `icon-md`, `icon-lg`, `icon-xl` | `md` | | `clickEffect` | `boolean` | `true` | | `isLoading` | `boolean` | `false` | # Calendar (/docs/components/calendar) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/calendar ``` This component depends on [Button](/docs/components/button) and [Native Select](/docs/components/native-select) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Calendar, CalendarNextTrigger, CalendarPrevTrigger, CalendarTable, CalendarTableDays, CalendarViewControl, CalendarViewDate, CalendarWeekDays, } from "@/components/ui/calendar"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Examples [#examples] Date Range [#date-range] Month and Year Selector [#month-and-year-selector] With Presets [#with-presets] Multiple Months [#multiple-months] Min and Max [#min-and-max] Use the `min` and `max` props with `parseDate` to restrict the selectable date range. Select Today [#select-today] Fixed Weeks [#fixed-weeks] Use the `fixedWeeks` prop to always display 6 weeks in the calendar, preventing layout shifts when navigating between months. Booked Dates [#booked-dates] Use the `isDateUnavailable` prop to mark specific dates as unavailable. Custom Cell Size [#custom-cell-size] Use `[--cell-size:--spacing("value")]` to set the size of the calendar cells. Breakpoint utilities change the cell size at different screen sizes. ```css md:[--cell-size:--spacing(10)] lg:[--cell-size:--spacing(12)] ``` API Reference [#api-reference] Calendar [#calendar] Root component. Manages date view, selection, and navigation. | Prop | Type | Default | | ---------------------- | --------------------------------------- | ---------- | | `value` | `DateValue[]` | - | | `defaultValue` | `DateValue[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `selectionMode` | `"single"` \| `"range"` \| `"multiple"` | `"single"` | | `min` | `DateValue` | - | | `max` | `DateValue` | - | | `isDateUnavailable` | `(date: DateValue) => boolean` | - | | `fixedWeeks` | `boolean` | `false` | | `outsideDaySelectable` | `boolean` | `false` | | `numOfMonths` | `number` | `1` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | | Attribute | Default | | ------------- | -------------- | | `--cell-size` | `--spacing(8)` | CalendarViewControl [#calendarviewcontrol] Holds prev/next buttons and month/year selects. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarMonthSelect [#calendarmonthselect] Month selector dropdown. Uses NativeSelect internally. | Prop | Type | Default | | ----------- | --------------------- | --------- | | `format` | `"short"` \| `"long"` | `"short"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarYearSelect [#calendaryearselect] Year selector dropdown. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarTable [#calendartable] Table layout for the calendar day grid. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarWeekDays [#calendarweekdays] Header row with week day names (Sun–Sat). | Prop | Type | Default | | ----------- | ----------------------------------- | ---------- | | `format` | `"narrow"` \| `"short"` \| `"long"` | `"narrow"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarTableDays [#calendartabledays] Body with day cells for the current month. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarTableNextMonth [#calendartablenextmonth] Body for additional month(s). Use with `numOfMonths` for multi-month layout. | Prop | Type | Default | | ----------- | --------- | ------- | | `months` | `number` | `1` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | CalendarTableCell [#calendartablecell] Single day cell. Clickable for selection. Shows disabled/outside styling. | Prop | Type | Default | | ----------- | ----------- | ------- | | `value` | `DateValue` | - | | `className` | `string` | - | | `asChild` | `boolean` | `false` | parseDate [#parsedate] Utility for parsing dates. Use with `min`, `max`, `value`, and `defaultValue`. ```tsx import { parseDate } from "@/components/ui/calendar"; // Parse from Date, string, or timestamp parseDate(new Date()); parseDate("2024-01-15"); parseDate(Date.now()); ``` *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/date-picker#api-reference). # Card (/docs/components/card) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/card ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, CardMedia, } from "@/components/ui/card"; ``` ```tsx showLineNumbers ``` Title and Description [#title-and-description] `` supports two usage patterns: Using props [#using-props] Pass `title` and `description` props directly to ``. > This approach does not require `` or `` components. ```tsx showLineNumbers ``` Using components [#using-components] Alternatively, use `` and `` as children for more control. ```tsx showLineNumbers Card Title Card description ``` Examples [#examples] Product card [#product-card] A product card with image, title, description, price, and action buttons. Icon card [#icon-card] A card with an icon at the top and title, description, and action button at the bottom. Clickable cards [#clickable-cards] For fully clickable cards, wrap the card with [Link Overlay](/docs/components/link-overlay). Custom spacing [#custom-spacing] The `[--space:--spacing("value")]` utility class controls the card spacing. Breakpoint utilities change the card spacing at different screen sizes. ```css md:[--space:--spacing(6)] lg:[--space:--spacing(8)] ``` API Reference [#api-reference] Card [#card] Root wrapper for card layout. Supports header, body, footer. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(4)` | CardMedia [#cardmedia] Image, video, or media area. Often full-width at top. | Prop | Type | Default | | ----------- | -------------------------- | --------- | | `variant` | `default`, `icon`, `image` | `default` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardHeader [#cardheader] Header area. Typically holds title and optional actions. | Prop | Type | Default | | ------------- | --------- | ------- | | `title` | `string` | `-` | | `description` | `string` | `-` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardTitle [#cardtitle] Card title or heading. Bold by default. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardDescription [#carddescription] Card description or body text. Muted foreground for hierarchy. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardAction [#cardaction] Action button or link in the card header. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardContent [#cardcontent] Main body content of the card. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CardFooter [#cardfooter] Footer area. Typically holds secondary actions or metadata. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | # Carousel (/docs/components/carousel) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/carousel ``` This component depends on [Button](/docs/components/button) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Carousel, CarouselControl, CarouselItem, CarouselContent, CarouselIndicator, CarouselIndicatorGroup, CarouselNext, CarouselPrevious, } from "@/components/ui/carousel"; ``` ```tsx showLineNumbers Previous Next ``` Orientation [#orientation] The `orientation` prop controls the carousel layout direction. Horizontal [#horizontal] Vertical [#vertical] Thumbnail Indicators [#thumbnail-indicators] Render each thumbnail inside `` to create a visual preview of each slide. Use the `orientation` prop to change the orientation of the thumbnail indicators. Horizontal [#horizontal-1] Vertical [#vertical-1] Examples [#examples] Autoplay [#autoplay] Use `autoplay` props on `` to make the carousel play automatically. Loop [#loop] Use the `loop` prop to make the carousel loop. Controlled [#controlled] Use the `page` and `onPageChange` props to control the carousel state programmatically. Slides Per Page [#slides-per-page] Display multiple slides simultaneously by setting the `slidesPerPage` prop on ``. Spacing [#spacing] Control the gap between slides using the `spacing` prop on ``. Padding [#padding] Control the padding around the carousel using the `padding` prop on ``. Padding is in multiples of `4px`. Example: `padding={10}` will set the padding to `40px`. Mouse Drag [#mouse-drag] To allow mouse drag, set the `allowMouseDrag` prop on ``. API Reference [#api-reference] Carousel [#carousel] Root component. Manages slide state and navigation. | Prop | Type | Default | | ---------------- | ------------------------------ | -------------- | | `slideCount` | `number` | **required** | | `allowMouseDrag` | `boolean` | `false` | | `autoplay` | `boolean \| { delay: number }` | `false` | | `defaultPage` | `number` | `0` | | `loop` | `boolean` | `false` | | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | | `page` | `number` | `-` | | `slidesPerPage` | `number` | `1` | | `slidesPerMove` | `number \| 'auto'` | `'auto'` | | `spacing` | `string` | `"16px"` | | `padding` | `number` | `0` | | `className` | `string` | `-` | CarouselContent [#carouselcontent] Wraps all slides. Handles layout and transitions. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CarouselItem [#carouselitem] Wraps a single slide. | Prop | Type | Default | | ----------- | ------------------------------ | ------------ | | `index` | `number` | **required** | | `snapAlign` | `'start' \| 'center' \| 'end'` | `'start'` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CarouselControl [#carouselcontrol] Holds prev/next navigation buttons. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CarouselPrevious [#carouselprevious] Goes to the previous slide. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | CarouselNext [#carouselnext] Goes to the next slide. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | CarouselIndicatorGroup [#carouselindicatorgroup] Holds slide indicator dots or pills. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CarouselIndicator [#carouselindicator] Indicator for a slide. Click to jump to that slide. | Prop | Type | Default | | ----------- | --------- | ------------ | | `index` | `number` | **required** | | `readOnly` | `boolean` | `false` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/carousel#api-reference). # Chart (/docs/components/chart) For more complete, copy-ready setups (bar, line, area, pie, radar, tooltips, and more): Browse the Charts Examples (soon). Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/chart ``` Install the following dependencies: ```bash npm install recharts ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Component [#component] These pieces follow the familiar [shadcn/ui](https://ui.shadcn.com/docs/components/base/chart) chart pattern—container, tooltips, and legend helpers around standard Recharts charts—restyled and wired to Shark UI tokens and imports so the result feels native to this kit. ```tsx import { Bar, BarChart } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" export const MyChart = () => { return ( } /> ) } ``` Usage [#usage] Walk through a small bar chart: sample data, a shared config object, then layers for grid, axis, tooltip, and legend. Start with data [#start-with-data] Shape the rows however you like; `dataKey` maps columns to bars, lines, or areas. This set tracks desktop versus mobile counts per month: ```tsx const chartData = [ { month: "January", desktop: 186, mobile: 80 }, { month: "February", desktop: 305, mobile: 200 }, { month: "March", desktop: 237, mobile: 120 }, { month: "April", desktop: 73, mobile: 190 }, { month: "May", desktop: 209, mobile: 130 }, { month: "June", desktop: 214, mobile: 140 }, ] ``` Add a chart config [#add-a-chart-config] `ChartConfig` is metadata: human-readable labels, optional icons, and color tokens. It stays separate from the data array so several charts can reuse the same palette and copy. ```tsx import { type ChartConfig } from "@/components/ui/chart" const chartConfig = { desktop: { label: "Desktop", color: "#2563eb", }, mobile: { label: "Mobile", color: "#60a5fa", }, } satisfies ChartConfig ``` Render the chart [#render-the-chart] Pass `config` into `ChartContainer`. Give the container a **minimum height** (for example `min-h-[200px]`) or a fixed height so Recharts can measure the SVG responsively. ```tsx "use client" import { Bar, BarChart } from "recharts" import { ChartContainer, type ChartConfig } from "@/components/ui/chart" ``` Add a grid [#add-a-grid] Import `CartesianGrid` from Recharts and nest it inside the chart. Horizontal stripes alone often read cleaner than a full mesh: ```tsx import { Bar, BarChart, CartesianGrid } from "recharts" ``` Add an axis [#add-an-axis] Use `XAxis` (and `YAxis` when you need one) for categories and ticks. Here ticks are shortened and decorative lines are hidden for a lighter look: ```tsx import { Bar, BarChart, CartesianGrid, XAxis } from "recharts" value.slice(0, 3)} /> ``` Add a tooltip [#add-a-tooltip] Shark’s tooltip pair reads names, swatches, and values from `chartConfig` automatically: ```tsx import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" value.slice(0, 3)} /> } /> ``` Add a legend [#add-a-legend] `ChartLegend` with `ChartLegendContent` mirrors the same config entries: ```tsx import { ChartLegend, ChartLegendContent } from "@/components/ui/chart" value.slice(0, 3)} /> } /> } /> ``` Chart config [#chart-config] Treat `ChartConfig` as the **presentation contract** for your series keys: labels for tooltips and legends, optional Lucide (or other) icons, and either a single `color` string or a `theme` map for light and dark. Data arrays stay focused on numbers and categories. Because config is independent of rows, you can fetch remote data in one shape while keeping stable color tokens in code, share one config across a dashboard, or swap palettes without touching API responses. ```tsx import { Monitor } from "lucide-react" import { type ChartConfig } from "@/components/ui/chart" const chartConfig = { desktop: { label: "Desktop", icon: Monitor, color: "#2563eb", theme: { light: "#2563eb", dark: "#dc2626", }, }, } satisfies ChartConfig ``` Use `color` for a single value that works in both themes, or `theme` with `light` / `dark` keys when the swatch should diverge. Theming [#theming] You can theme series with CSS variables (ideal alongside Shark’s tokens), raw color strings in any supported format, or a mix. CSS variables [#css-variables] Shark’s default theme already defines `--chart-1` through `--chart-5` in `globals.css`; see [Styling](/docs/styling) for how those slots fit the rest of the design system. Point config entries at those variables so charts track global palette tweaks: ```tsx const chartConfig = { desktop: { label: "Desktop", color: "var(--chart-1)", }, mobile: { label: "Mobile", color: "var(--chart-2)", }, } satisfies ChartConfig ``` Hex, HSL, or OKLCH [#hex-hsl-or-oklch] Inline literals work when you do not need shared tokens: ```tsx const chartConfig = { desktop: { label: "Desktop", color: "#2563eb" }, mobile: { label: "Mobile", color: "hsl(220, 98%, 61%)" }, tablet: { label: "Tablet", color: "oklch(0.5 0.2 240)" }, laptop: { label: "Laptop", color: "var(--chart-2)" }, } satisfies ChartConfig ``` Applying colors in markup and data [#applying-colors-in-markup-and-data] The container exposes `var(--color-)` for each config key. Use that placeholder anywhere Recharts or Tailwind can read a color: * **Series elements:** `` * **Data-driven fills:** `{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" }` with matching config keys * **Tailwind utilities:** `` Tooltip [#tooltip] Pair `ChartTooltip` with `ChartTooltipContent` to get a styled surface that pulls series colors and labels from `chartConfig`. Pass tooltip state from Recharts by using a render function for `content` and spreading those props into `ChartTooltipContent`. Toggle the label row or the color chip with props, and switch the indicator shape between dot, line, and dashed styles. ```tsx import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" } /> ``` Tooltip props [#tooltip-props] | Prop | Type | | --------------- | --------------------------- | | `labelKey` | string | | `nameKey` | string | | `indicator` | `dot` \| `line` \| `dashed` | | `hideLabel` | boolean | | `hideIndicator` | boolean | Custom label and name keys [#custom-label-and-name-keys] When the tooltip should read from different fields than the default mapping, pass `labelKey` and `nameKey` so the header and each row title resolve correctly: ```tsx const chartData = [ { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, ] const chartConfig = { visitors: { label: "Total Visitors", }, chrome: { label: "Chrome", color: "var(--chart-1)", }, safari: { label: "Safari", color: "var(--chart-2)", }, } satisfies ChartConfig ( )} /> ``` Legend [#legend] `ChartLegend` delegates rendering to `ChartLegendContent`, which builds items from the same config metadata as the tooltip. ```tsx import { ChartLegend, ChartLegendContent } from "@/components/ui/chart" } /> ``` Custom name key [#custom-name-key] When legend entries should track a field on each datum (for example `browser`), set `nameKey`: ```tsx const chartData = [ { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" }, { browser: "safari", visitors: 200, fill: "var(--color-safari)" }, ] const chartConfig = { chrome: { label: "Chrome", color: "var(--chart-1)", }, safari: { label: "Safari", color: "var(--chart-2)", }, } satisfies ChartConfig } /> ``` Accessibility [#accessibility] Recharts’ `accessibilityLayer` opt-in wires keyboard traversal and screen-reader semantics into the chart canvas. Turn it on for interactive or data-critical views; leave it off for purely decorative thumbnails if you need to avoid extra focus targets. ```tsx {/* children */} ``` ```tsx {/* children */} ``` *** For every prop on primitives such as `Bar`, `Line`, or `XAxis`, refer to the [Recharts API reference](https://recharts.github.io/en-US/api). # Checkbox (/docs/components/checkbox) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/checkbox ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Checkbox } from "@/components/ui/checkbox"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use the `checked` prop to control the checkbox. State [#state] Invalid [#invalid] Use the `invalid` prop to indicate an invalid state. Disabled [#disabled] Use the `disabled` prop to disable the checkbox. Examples [#examples] With Description [#with-description] Use `` to add a description to the checkbox. Indeterminate [#indeterminate] Use the `checked="indeterminate"` prop to set the checkbox to an indeterminate state. Group [#group] Use `` to group multiple checkboxes together. Card Style [#card-style] Use `` to add a label to the checkbox. API Reference [#api-reference] Checkbox [#checkbox] Checkbox control for boolean or multi-select state. | Prop | Type | Default | | ----------------- | --------------------------------------------- | ------- | | `checked` | `boolean \| 'indeterminate'` | `-` | | `defaultChecked` | `boolean` | `false` | | `disabled` | `boolean` | `false` | | `name` | `string` | `-` | | `value` | `string` | `-` | | `onCheckedChange` | `({ checked }: CheckedChangeDetails) => void` | `-` | | `className` | `string` | `-` | CheckboxGroup [#checkboxgroup] Groups related checkboxes with consistent layout. | Prop | Type | Default | | --------------- | ----------------------------------- | ------- | | `value` | `string[]` | `-` | | `defaultValue` | `string[]` | `-` | | `onValueChange` | `(checkedValues: string[]) => void` | `-` | | `name` | `string` | `-` | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/checkbox#api-reference). # Circular Progress (/docs/components/circular-progress) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/circular-progress ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { CircularProgress } from "@/components/ui/circular-progress"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use `value` to control the progress manually. Examples [#examples] With value [#with-value] Use `` to render the current value text. Indeterminate [#indeterminate] Use the `indeterminate` prop when the completion percentage is unknown. Custom Size [#custom-size] Use the `size` prop to set the circle diameter in pixels. Custom Thickness [#custom-thickness] Use the `thickness` prop to control the ring stroke width. API Reference [#api-reference] CircularProgress [#circularprogress] Root element of the circular progress indicator. | Prop | Type | Default | | --------------- | --------------------------------------- | ------- | | `value` | `number \| null` | - | | `defaultValue` | `number` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `indeterminate` | `boolean` | `false` | | `size` | `number` | `32` | | `thickness` | `number` | `4` | | `className` | `string` | - | CircularProgressValue [#circularprogressvalue] Displays the current progress value text. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/react/docs/components/progress-circular#api-reference). # Circular Slider (/docs/components/circular-slider) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/circular-slider ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { CircularSlider } from "@/components/ui/circular-slider"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Examples [#examples] Size [#size] Use the `size` prop to change the slider dimensions. Thickness [#thickness] Use the `thickness` prop to change the progress ring thickness. Disabled [#disabled] With markers [#with-markers] Use `markers` to display clock-style tick marks. With step [#with-step] Use `markersAtSteps` with `step` to align markers with step positions. Show value [#show-value] Use `CircularSliderValue` to show the current value. The `prefix` and `suffix` props customize the display. Custom markers [#custom-markers] Pass a `number[]` to `markers` for custom angles. API Reference [#api-reference] CircularSlider [#circularslider] Root component. Manages angle selection and value. | Prop | Type | Default | | ---------------- | --------------------------------------- | ------- | | `value` | `number` | - | | `defaultValue` | `number` | `0` | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `step` | `number` | `1` | | `disabled` | `boolean` | - | | `size` | `number` | `120` | | `thickness` | `number` | `6` | | `markers` | `boolean \| number[]` | - | | `markersAtSteps` | `boolean` | `false` | | `className` | `string` | - | CircularSliderValue [#circularslidervalue] Shows the current angle value (degrees or custom format). | Prop | Type | Default | | ----------- | --------------------------- | ------- | | `prefix` | `React.ReactNode \| string` | - | | `suffix` | `React.ReactNode \| string` | - | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/react/docs/components/angle-slider). # Clipboard (/docs/components/clipboard) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/clipboard ``` This component depends on [Input](/docs/components/input) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Clipboard, ClipboardTrigger, ClipboardIndicator } from "@/components/ui/clipboard"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use the `onStatusChange` prop to control the clipboard value programmatically. Examples [#examples] Icon Only [#icon-only] Different Icons [#different-icons] Use the `copied` prop on `` to customize the icon shown when copied. Add a `children` to the `` to customize the icon shown when not copied. Value Text [#value-text] Use `` to display the value as text instead of an input field. Custom Timeout [#custom-timeout] Use the `timeout` prop on `` to customize how long the copied state is shown. API Reference [#api-reference] Clipboard [#clipboard] Root wrapper. Manages copy state and value. | Prop | Type | Default | | ---------------- | ------------------------------------------- | ------------ | | `value` | `string` | **required** | | `timeout` | `number` | `2000` | | `onStatusChange` | `({ copied }: StatusChangeDetails) => void` | `-` | | `className` | `string` | `-` | ClipboardTrigger [#clipboardtrigger] Triggers copy to clipboard on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | ClipboardInput [#clipboardinput] Input showing the value to copy. Often hidden or read-only. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | ClipboardIndicator [#clipboardindicator] Icon that changes based on copy state (e.g. copy vs check). | Prop | Type | Default | | ----------- | ----------- | --------------- | | `copied` | `ReactNode` | `` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | ClipboardValue [#clipboardvalue] Text display of the value. Use when input is not needed. | Prop | Type | Default | | ----------- | -------------------------------------- | ------- | | `size` | `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"` | `"md"` | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/clipboard#api-reference). # Collapsible (/docs/components/collapsible) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/collapsible ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Add the following animations to your `globals.css` . ```css title="styles/globals.css" showLineNumbers @theme inline { /* ... */ --animate-expand: expand 0.2s ease-out; --animate-collapse: collapse 0.2s ease-out; @keyframes expand { from { height: var(--collapsed-height, 0); } to { height: var(--height); } } @keyframes collapse { from { height: var(--height); } to { height: var(--collapsed-height, 0); } } } ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@/components/ui/collapsible"; ``` ```tsx showLineNumbers Open Collapsible Collapsible Content ``` Controlled [#controlled] Use the `open` and `onOpenChange` props to control the collapsible state programmatically. State [#state] Disabled [#disabled] Use the `disabled` prop on the collapsible to disable it. Examples [#examples] Nested [#nested] Collapsibles can be nested to create hierarchical structures. Partial Collapse [#partial-collapse] Use the `collapsedHeight` prop to show a portion of the content when collapsed. Accessibility Notice Interactive elements (links, buttons, inputs) within the collapsed area automatically become inaccesible to prevent keyboard navigation to hidden content. API Reference [#api-reference] Collapsible [#collapsible] Root component. Controls expand/collapse state and animation. | Prop | Type | Default | | ----------------- | --------------------------------------- | ------- | | `open` | `boolean` | `-` | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `({ open }: OpenChangeDetails) => void` | `-` | | `collapsedHeight` | `string` | `-` | | `className` | `string` | `-` | CollapsibleTrigger [#collapsibletrigger] Toggles expand/collapse on click. Use `asChild` for custom trigger elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CollapsibleContent [#collapsiblecontent] Holds the content that expands and collapses. Animated by default. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | CollapsibleIndicator [#collapsibleindicator] Chevron or icon that rotates to indicate open/closed state. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/collapsible#api-reference). # Color Picker (/docs/components/color-picker) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/color-picker ``` This component depends on [Button](/docs/components/button) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Ensure the `input` and `input-group` components are installed for ColorPickerInput usage. Copy and paste the following code into your project. Update the import paths to match your project setup. Modes [#modes] You can use multiple modes to build the color picker that fits your needs: * [Input](#input) for hex or channel editing * [Popover](#popover) for area and slider selection * [Swatch](#swatch-picker) picker for preset colors * [Area](#area) standalone component for color selection * [Slider](#slider) for color adjustment Input [#input] Usage [#usage] ```tsx import { ColorPicker, ColorPickerInput, } from "@/components/ui/color-picker"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use the `value` and `onValueChange` props to programmatically control the color picker's state. State [#state] Invalid [#invalid] Disabled [#disabled] Examples [#examples] With Field [#with-field] Channel Editing [#channel-editing] With Swatch [#with-swatch] Input with `` showing the current color alongside the hex input. With Popover [#with-popover] An input with trigger and popover content for area, hue, and alpha selection. Compact [#compact] Inspired by Figma's color input. Popover [#popover] Color picker with trigger and popover content. Usage [#usage-1] ```tsx import { ColorPicker, ColorPickerArea, ColorPickerAreaThumb, ColorPickerContent, ColorPickerEyeDropperTrigger, ColorPickerSlider, ColorPickerTrigger, ColorPickerTransparencyGrid, ColorPickerView, } from "@/components/ui/color-picker"; ``` ```tsx showLineNumbers ``` State [#state-1] Disabled [#disabled-1] Set `disabled` to prevent user interaction. Examples [#examples-1] With Eye Dropper [#with-eye-dropper] With Channel Editing [#with-channel-editing] Popover with area, sliders, and input fields for editing red, green, and blue values. With Only Sliders [#with-only-sliders] Popover with hue, saturation, lightness, and alpha sliders only, no color area. With Swatch Picker [#with-swatch-picker] Popover with preset color swatches for quick selection. Color Swatch Picker [#color-swatch-picker] Usage [#usage-2] ```tsx import { ColorPicker, ColorPickerSwatchTrigger, ColorPickerSwatchGroup, ColorPickerSwatch, ColorPickerSwatchIndicator, } from "@/components/ui/color-picker"; ``` ```tsx showLineNumbers ``` Controlled [#controlled-1] Use the `value` and `onValueChange` props to programmatically control the swatch picker's state. State [#state-2] Disabled [#disabled-2] Set `disabled` to prevent user interaction. Examples [#examples-2] Custom Size [#custom-size] Customize swatch size using the `size-*` utility class on ``. Custom Radius [#custom-radius] Override the default rounded style on `` using the `rounded-*` utility class. Custom Indicator [#custom-indicator] Replace the default check icon with a custom indicator via the children of `ColorPickerSwatchIndicator`. Area [#area] Usage [#usage-3] ```tsx import { ColorPicker, ColorPickerArea, ColorPickerAreaThumb, } from "@/components/ui/color-picker"; ``` ```tsx showLineNumbers ``` Examples [#examples-3] Color Channels [#color-channels] With Dots [#with-dots] Slider [#slider] Usage [#usage-4] ```tsx import { ColorPicker, ColorPickerSlider, } from "@/components/ui/color-picker"; ``` ```tsx showLineNumbers ``` Controlled [#controlled-2] State [#state-3] Disabled [#disabled-3] Examples [#examples-4] Alpha Channel [#alpha-channel] HSL Channels [#hsl-channels] HSBA Channels [#hsba-channels] RGB Channels [#rgb-channels] Vertical [#vertical] Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` on `` to adjust popover padding (default `--spacing(3)`). API Reference [#api-reference] ColorPicker [#colorpicker] Root element of the color picker. | Prop | Type | Default | | --------------- | ----------------------------------------------------------------------------------------------------- | ---------------------------- | | `value` | `string` | - | | `defaultValue` | `string` | - | | `onValueChange` | `(details: ColorPickerValueChangeDetails) => void` | - | | `disabled` | `boolean` | `false` | | `format` | `"hex"` \| `"hexa"` \| `"rgb"` \| `"rgba"` \| `"hsl"` \| `"hsla"` \| `"hsb"` \| `"hsba"` \| `"oklch"` | - | | `inline` | `boolean` | `false` | | `positioning` | `PositioningOptions` | `{ placement: "top-start" }` | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | ColorPickerTrigger [#colorpickertrigger] Button or element that opens the color picker popover. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ColorPickerContent [#colorpickercontent] Holds the color picker popover. Displayed in a portal. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(3)` | ColorPickerControl [#colorpickercontrol] Container for grouping control elements such as area, sliders, and inputs. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ColorPickerView [#colorpickerview] Container for sliders and inputs. Can specify `format` for child value display. | Prop | Type | Default | | ----------- | ----------------------------------------------------------------------------------------------------- | ------- | | `format` | `"hex"` \| `"hexa"` \| `"rgb"` \| `"rgba"` \| `"hsl"` \| `"hsla"` \| `"hsb"` \| `"hsba"` \| `"oklch"` | - | | `className` | `string` | - | ColorPickerArea [#colorpickerarea] Two-dimensional color selection area. | Prop | Type | Default | | ----------- | ------------------------------------------------------------------------------------------------------------- | ------- | | `showDots` | `boolean` | `false` | | `xChannel` | `"hue"` \| `"saturation"` \| `"brightness"` \| `"lightness"` \| `"red"` \| `"green"` \| `"blue"` \| `"alpha"` | - | | `yChannel` | `"hue"` \| `"saturation"` \| `"brightness"` \| `"lightness"` \| `"red"` \| `"green"` \| `"blue"` \| `"alpha"` | - | | `className` | `string` | - | ColorPickerAreaThumb [#colorpickerareathumb] Draggable thumb within the color area. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ColorPickerSlider [#colorpickerslider] Slider for adjusting a color channel. | Prop | Type | Default | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------ | -------------- | | `channel` | `"hex"` \| `"hexa"` \| `"red"` \| `"green"` \| `"blue"` \| `"hue"` \| `"saturation"` \| `"brightness"` \| `"lightness"` \| `"alpha"` | - | | `orientation` | `"horizontal"` \| `"vertical"` | `"horizontal"` | | `className` | `string` | - | ColorPickerTransparencyGrid [#colorpickertransparencygrid] Checkerboard pattern for transparency. Shown as child of `ColorPickerSlider` when editing alpha. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ColorPickerEyeDropperTrigger [#colorpickereyedroppertrigger] Button that activates the native Eye Dropper API to sample colors from the screen. | Prop | Type | Default | | ----------- | ------------------------ | ------------- | | `variant` | `ButtonProps["variant"]` | `"outline"` | | `size` | `ButtonProps["size"]` | `"icon-md"` | | `children` | `ReactNode` | `` | | `className` | `string` | - | ColorPickerInput [#colorpickerinput] Input for displaying and editing a color channel value. Use `asChild` with a custom input. | Prop | Type | Default | | --------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `channel` | `"hex"` \| `"hexa"` \| `"red"` \| `"green"` \| `"blue"` \| `"hue"` \| `"saturation"` \| `"brightness"` \| `"lightness"` \| `"alpha"` | `"hex"` | | `asChild` | `boolean` | `false` | ColorPickerSwatchPreview [#colorpickerswatchpreview] Compact swatch that displays the current color. Use inside an input group for input mode. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ColorPickerSwatchGroup [#colorpickerswatchgroup] Container for swatch triggers in swatch picker mode. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | ColorPickerSwatchTrigger [#colorpickerswatchtrigger] Button that selects a color when clicked. Wraps `ColorPickerSwatch` and optionally `ColorPickerSwatchIndicator`. | Prop | Type | Default | | ----------- | -------- | ------- | | `value` | `string` | - | | `className` | `string` | - | ColorPickerSwatch [#colorpickerswatch] Color swatch display. Use as a child of `ColorPickerSwatchTrigger`. | Prop | Type | Default | | ----------- | -------- | ------- | | `value` | `string` | - | | `className` | `string` | - | ColorPickerSwatchIndicator [#colorpickerswatchindicator] Check mark or custom icon shown when a swatch is selected. Pass children to customize. | Prop | Type | Default | | ----------- | ----------- | --------------- | | `children` | `ReactNode` | `` | | `className` | `string` | - | ColorPickerValue [#colorpickervalue] Displays the current color as formatted text. | Prop | Type | Default | | ----------- | ----------------------------------------------------------------------------------------------------- | ------- | | `format` | `"hex"` \| `"hexa"` \| `"rgb"` \| `"rgba"` \| `"hsl"` \| `"hsla"` \| `"hsb"` \| `"hsba"` \| `"oklch"` | - | | `className` | `string` | - | ColorPickerValueSwatch [#colorpickervalueswatch] Displays the current color as a swatch. Use for standalone value preview. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | parseColor [#parsecolor] Exported utility to parse color strings. Use for programmatic color handling. *** For the complete list of props and additional subcomponents, see the [Ark UI Color Picker documentation](https://ark-ui.com/docs/components/color-picker#api-reference). # Combobox (/docs/components/combobox) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/combobox ``` This component depends on [Button](/docs/components/button) , [Input](/docs/components/input) , and [Input Group](/docs/components/input-group) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { useFilter, useListCollection } from "@ark-ui/react"; import { Combobox, ComboboxContent, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, } from "@/components/ui/combobox"; ``` ```tsx showLineNumbers const { contains } = useFilter({ sensitivity: "base" }); const { collection, filter } = useListCollection({ initialItems: [ { label: "Apple", value: "apple", group: "Fruits" }, { label: "Banana", value: "banana", group: "Fruits" }, ], filter: contains, groupBy: (item) => item.group, // optional }); filter(inputValue)} > {collection.group().map(([group, items]) => ( {items.map((item) => ( {item.label} ))} ))} ``` Controlled [#controlled] Control the selected value with `inputValue` and `onValueChange` props. Size [#size] Small [#small] Medium [#medium] Large [#large] State [#state] Invalid [#invalid] Disabled [#disabled] Examples [#examples] Auto highlight [#auto-highlight] Automatically highlight the first matching item as the user types by setting `inputBehavior="autohighlight"`. Group [#group] With Field [#with-field] Use Combobox with `` components to style the combobox with the field components. With scroll [#with-scroll] Multiple [#multiple] Enable multiple selection by setting the `multiple` prop to ``. With clear button [#with-clear-button] Pass `showClear` to `` to show a clear button. With start icon [#with-start-icon] API Reference [#api-reference] Combobox [#combobox] Root component. Use with `useListCollection` and `useFilter` for filtering. | Prop | Type | Default | | -------------------- | -------------------------------------------- | ------------ | | `collection` | `ListCollection` | **required** | | `value` | `string \| string[]` | - | | `defaultValue` | `string \| string[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `onInputValueChange` | `(details: InputValueChangeDetails) => void` | - | | `multiple` | `boolean` | `false` | | `disabled` | `boolean` | - | | `openOnClick` | `boolean` | `true` | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | ComboboxControl [#comboboxcontrol] Optional wrapper for custom layouts. Use `ComboboxInput` for the standard input-with-trigger layout. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxInput [#comboboxinput] Input with dropdown trigger and optional clear button. Combines search and selection. | Prop | Type | Default | | ------------- | ---------------------- | ------- | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | | `showTrigger` | `boolean` | `true` | | `showClear` | `boolean` | `false` | | `disabled` | `boolean` | - | | `className` | `string` | - | ComboboxTrigger [#comboboxtrigger] Opens the dropdown on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxClear [#comboboxclear] Button to clear the input value. | Prop | Type | Default | | --------- | --------- | ------- | | `asChild` | `boolean` | - | ComboboxContent [#comboboxcontent] Holds the dropdown options. Displayed in a portal. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxList [#comboboxlist] Wraps the list of options. Use with collection. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxItem [#comboboxitem] A single selectable option. | Prop | Type | Default | | ----------- | --------- | ------------ | | `item` | `T` | **required** | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxGroup [#comboboxgroup] Groups related options under an optional heading. | Prop | Type | Default | | ----------- | --------------------- | ------- | | `heading` | `string \| ReactNode` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxGroupLabel [#comboboxgrouplabel] Label for an option group. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | ComboboxEmpty [#comboboxempty] Shown when no options match the current filter. Use for empty state. | Prop | Type | Default | | ----------- | ----------- | ------------------- | | `className` | `string` | - | | `children` | `ReactNode` | `No results found.` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/combobox#api-reference). # Command (/docs/components/command) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/command ``` This component depends on [Combobox](/docs/components/combobox) , [Dialog](/docs/components/dialog) , [Input Group](/docs/components/input-group) , [Menu](/docs/components/menu) , and [Separator](/docs/components/separator) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { useFilter, useListCollection } from "@ark-ui/react"; import { Command, CommandContent, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; ``` ```tsx showLineNumbers const { contains } = useFilter({ sensitivity: "base" }); const { collection, filter } = useListCollection({ initialItems: [ { label: "Search", value: "search", group: "Actions" }, { label: "Settings", value: "settings", group: "Actions" }, ], filter: contains, groupBy: (item) => item.group, // optional }); filter(inputValue)} > {collection.group().map(([group, items]) => ( {items.map((item) => ( {item.label} ))} ))} ``` Examples [#examples] With Dialog [#with-dialog] Use ``, ``, and `` for the modal pattern. Groups [#groups] Group related items with `` and the `heading` prop. Shortcuts [#shortcuts] Display keyboard shortcuts next to items with ``. With Footer [#with-footer] Add hints or actions in the footer with ``. API Reference [#api-reference] Command [#command] Root component. | Prop | Type | Default | | -------------------- | -------------------------------------------- | ------------ | | `collection` | `ListCollection` | **required** | | `value` | `string \| string[]` | - | | `defaultValue` | `string \| string[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `onInputValueChange` | `(details: InputValueChangeDetails) => void` | - | | `disabled` | `boolean` | - | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | CommandDialog [#commanddialog] Dialog root for the command palette. Same as `Dialog`. | Prop | Type | Default | | -------------- | --------------------------------------- | ------- | | `open` | `boolean` | - | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `({ open }: OpenChangeDetails) => void` | - | | `className` | `string` | - | CommandDialogTrigger [#commanddialogtrigger] Opens the command palette on click. Often uses a search icon. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | - | CommandDialogContent [#commanddialogcontent] Container for the command palette inside the dialog. | Prop | Type | Default | | ------------- | ---------------------------------------------- | ---------------------------------- | | `size` | `"sm" \| "md" \| "lg" \| "xl" \| "fullscreen"` | `"lg"` | | `title` | `string` | `"Command Palette"` | | `description` | `string` | `"Search for a command to run..."` | | `className` | `string` | - | CommandInput [#commandinput] Search input with icon. Uses InputGroup for layout. | Prop | Type | Default | | ------------- | ---------------------- | ------- | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | | `placeholder` | `string` | - | | `disabled` | `boolean` | - | | `className` | `string` | - | CommandContent [#commandcontent] Scrollable content container for the command list. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | CommandList [#commandlist] List container for command items. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | CommandEmpty [#commandempty] Content when no items match the filter. | Prop | Type | Default | | ----------- | ----------- | ------------------- | | `className` | `string` | - | | `children` | `ReactNode` | `No results found.` | | `asChild` | `boolean` | - | CommandGroup [#commandgroup] Groups related items. | Prop | Type | Default | | ----------- | --------------------- | ------- | | `heading` | `string \| ReactNode` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | CommandGroupLabel [#commandgrouplabel] Label for a group. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | CommandItem [#commanditem] A single command or action in the palette. | Prop | Type | Default | | ----------- | -------- | ------------ | | `item` | `T` | **required** | | `className` | `string` | - | CommandSeparator [#commandseparator] Visual divider between groups or items. Uses [``](/components/separator). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | CommandShortcut [#commandshortcut] Keyboard shortcut hint shown next to a command. | Prop | Type | Default | | ----------- | ----------- | ------- | | `children` | `ReactNode` | - | | `className` | `string` | - | CommandFooter [#commandfooter] Footer area for hints, tips, or extra actions. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/command#api-reference). # Context Menu (/docs/components/context-menu) Built on top of the [Menu](/docs/components/menu) component. Check it out for more examples. Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/context-menu ``` This component depends on [Menu](/docs/components/menu) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItemGroup, ContextMenuItemGroupLabel, ContextMenuItem, } from "@/components/ui/context-menu"; ``` ```tsx showLineNumbers Right click here Action 1 Action 2 Action 3 ``` API Reference [#api-reference] ContextTrigger [#contexttrigger] Trigger component for the context menu. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Menu API Reference](/docs/components/menu#api-reference). # Data List (/docs/components/data-list) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/data-list ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { DataList, DataListItem, DataListItemLabel, DataListItemValue, } from "@/components/ui/data-list"; ``` ```tsx showLineNumbers Name John Doe Email john@example.com ``` Orientation [#orientation] Use the `orientation` prop to change the orientation of the datalist component. Horizontal [#horizontal] Vertical [#vertical] Examples [#examples] Info Tip [#info-tip] Render the `Hint` component within `DataListItem` to provide additional context to the datalist. Separator [#separator] Use the `divide-y` utility class on `DataList` to add a separator between items. API Reference [#api-reference] DataList [#datalist] Root wrapper for label-value list layout. | Prop | Type | Default | | ------------- | ---------------------------- | -------------- | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | DataListItem [#datalistitem] Single label-value row. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | DataListItemLabel [#datalistitemlabel] Label or key for the row. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | DataListItemValue [#datalistitemvalue] Value or content for the row. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Date Picker (/docs/components/date-picker) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/date-picker ``` This component depends on [Button](/docs/components/button) , [Calendar](/docs/components/calendar) , [Input](/docs/components/input) , and [Input Group](/docs/components/input-group) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { DatePicker, DatePickerCalendar, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerPositioner, DatePickerTrigger, } from "@/components/ui/date-picker"; ``` ```tsx showLineNumbers Pick a date ``` Examples [#examples] Input [#input] Use `DatePickerInput` for a text input with calendar icon that opens the date picker. Range [#range] Select a date range with `selectionMode="range"`. Time [#time] Use `` for time selection. With Presets [#with-presets] Add quick single-date presets in a side panel. Custom format [#custom-format] Customize the format of the presets using external date formatting library like `date-fns`. API Reference [#api-reference] DatePicker [#datepicker] Root element. Extends [Calendar](/docs/components/calendar#api-reference). | Prop | Type | Default | | --------------- | --------------------------------------- | ---------------------- | | `value` | `DateValue[]` | - | | `defaultValue` | `DateValue[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `selectionMode` | `"single"` \| `"range"` \| `"multiple"` | `"single"` | | `positioning` | `PositioningOptions` | `{ placement: "top" }` | | `lazyMount` | `boolean` | - | | `unmountOnExit` | `boolean` | - | DatePickerTrigger [#datepickertrigger] Button that opens the date picker. `button` | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | DatePickerInput [#datepickerinput] Input with calendar icon that opens the date picker on click. `input` | Prop | Type | Default | | ------------- | -------------------------- | ------- | | `placeholder` | `string` | - | | `index` | `number` | - | | `size` | `"sm"` \| `"md"` \| `"lg"` | - | | `className` | `string` | - | DatePickerContent [#datepickercontent] Wraps the calendar. Inherits `--cell-size` from calendar for date cell sizing. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | | Attribute | Default | | ------------- | -------------- | | `--cell-size` | `--spacing(8)` | DatePickerValue [#datepickervalue] Displays the selected date(s) as text. Use inside `DatePickerTrigger`. `span` | Prop | Type | Default | | ------------- | --------- | ------- | | `placeholder` | `string` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | DatePickerTimer [#datepickertimer] Time input for selecting hour and minute. Use alongside the calendar for date-time selection. `input` | Prop | Type | Default | | --------------- | --------------------------------------- | ------- | | `value` | `string` | - | | `defaultValue` | `string` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `className` | `string` | - | DatePickerPresetTrigger [#datepickerpresettrigger] Quick preset button for dates. `button` | Prop | Type | Default | | ----------- | ------------- | ------- | | `className` | `string` | - | | `value` | `DateValue[]` | - | | `asChild` | `boolean` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/date-picker#api-reference). # Dialog (/docs/components/dialog) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/dialog ``` This component depends on [Button](/docs/components/button) and [Scroll Area](/docs/components/scroll-area) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, } from "@/components/ui/dialog"; ``` ```tsx showLineNumbers {/** your content here */} ``` Title and Description [#title-and-description] `` supports two usage patterns: Using props [#using-props] Pass `title` and `description` props directly to ``. > This approach does not require `` or `` components. ```tsx showLineNumbers ``` Using components [#using-components] Alternatively, use `` and `` as children for more control. ```tsx showLineNumbers Dialog Title Dialog description ``` Examples [#examples] With Scroll [#with-scroll] Use `` to make the content area scrollable while keeping header and footer fixed. No Close Button [#no-close-button] Use the `showCloseButton` prop to hide the close button in the top right corner. Close behavior [#close-behavior] Use `closeOnInteractOutside` and `closeOnEscape` props to prevent closing on outside click and escape. Open from Menu [#open-from-menu] Open a dialog imperatively from a menu item using the `onClick` handler. Non-Modal [#non-modal] Use `modal={false}` to allow interaction with elements outside the dialog. Disables focus trapping and scroll prevention. Initial Focus [#initial-focus] Use `initialFocusEl` to control which element receives focus when the dialog opens. Nested [#nested] Nest dialogs within one another. Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` on `` to adjust internal padding (default `--spacing(6)`). API Reference [#api-reference] Dialog [#dialog] Root context provider. Controls open state and modal behavior. | Prop | Type | Default | | ------------------------ | --------------------------------------- | ------- | | `open` | `boolean` | `-` | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `({ open }: OpenChangeDetails) => void` | `-` | | `modal` | `boolean` | `true` | | `closeOnEscape` | `boolean` | `true` | | `closeOnInteractOutside` | `boolean` | `true` | | `initialFocusEl` | `() => MaybeElement` | `-` | | `finalFocusEl` | `() => MaybeElement` | `-` | | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | `-` | | `onInteractOutside` | `(event: InteractOutsideEvent) => void` | `-` | | `className` | `string` | `-` | DialogTrigger [#dialogtrigger] Opens the dialog on click. Use `asChild` for custom trigger elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DialogContent [#dialogcontent] Holds the dialog panel. Supports size variants from sm to fullscreen. | Prop | Type | Default | | ----------------- | ---------------------------------------------- | ------- | | `size` | `"sm" \| "md" \| "lg" \| "xl" \| "fullscreen"` | `"md"` | | `showCloseButton` | `boolean` | `true` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(6)` | DialogHeader [#dialogheader] Header area for title and description. Accepts props or children. | Prop | Type | Default | | ------------- | -------- | ------- | | `title` | `string` | `-` | | `description` | `string` | `-` | | `className` | `string` | `-` | DialogBody [#dialogbody] Scrollable body content. Uses [ScrollArea](/docs/components/scroll-area) for overflow. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | DialogFooter [#dialogfooter] Footer area for action buttons. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | DialogTitle [#dialogtitle] Accessible title for the dialog. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DialogDescription [#dialogdescription] Accessible description for the dialog. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DialogClose [#dialogclose] Closes the dialog on click. Use `asChild` for custom close elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DialogOverlay [#dialogoverlay] Dimmed overlay behind the dialog panel. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/dialog#api-reference). # Drawer (/docs/components/drawer) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/drawer ``` This component depends on [Button](/docs/components/button) and [Scroll Area](/docs/components/scroll-area) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Drawer, DrawerTrigger, DrawerContent, DrawerContentInner, DrawerHeader, DrawerTitle, DrawerDescription, DrawerBody, DrawerFooter, DrawerClose, } from "@/components/ui/drawer"; ``` ```tsx showLineNumbers {/** your content here */} ``` Examples [#examples] Container [#container] Use `` to constrain drawer content width to `max-w-sm`. Inset Variant [#inset-variant] Use `variant="inset"` on `` so the drawer appears as a floating card rather than edge-to-edge. Swipe Directions [#swipe-directions] Control which direction the drawer slides and swipes using `swipeDirection` on the root. Snap Points [#snap-points] Use `snapPoints` to allow the drawer to snap to multiple heights. Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` and `[--bleed:…]` on `` to tune padding and bottom bleed (defaults `--spacing(4)` and `3rem`). API Reference [#api-reference] Drawer [#drawer] Root element of the drawer. | Prop | Type | Default | | ------------------------ | --------------------------------------- | -------- | | `open` | `boolean` | `-` | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `({ open }: OpenChangeDetails) => void` | `-` | | `swipeDirection` | `"up" \| "down" \| "left" \| "right"` | `"down"` | | `snapPoints` | `(number \| string)[]` | `[1]` | | `defaultSnapPoint` | `number \| string \| null` | `1` | | `snapToSequentialPoints` | `boolean` | `false` | | `closeThreshold` | `number` | `0.25` | | `swipeVelocityThreshold` | `number` | `700` | | `preventDragOnScroll` | `boolean` | `true` | | `modal` | `boolean` | `true` | | `closeOnEscape` | `boolean` | `true` | | `closeOnInteractOutside` | `boolean` | `true` | | `className` | `string` | `-` | DrawerTrigger [#drawertrigger] Opens the drawer on click. Use `asChild` for custom trigger elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DrawerContent [#drawercontent] Holds the drawer panel. Supports swipe-to-close; direction inherited from root `swipeDirection`. | Prop | Type | Default | | ----------- | ---------------------- | ----------- | | `variant` | `"default" \| "inset"` | `"default"` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--bleed` | `3rem` | | `--space` | `--spacing(4)` | DrawerContentInner [#drawercontentinner] Wrapper that constrains content to `max-w-sm` and centers it. Use to wrap the main body (header + body) or footer actions. When used inside `DrawerFooter`, inherits `flex-col-reverse` and `gap-2` for button layout. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | DrawerHeader [#drawerheader] Header area for title and description. Accepts props or children. | Prop | Type | Default | | ------------- | -------- | ------- | | `title` | `string` | `-` | | `description` | `string` | `-` | | `className` | `string` | `-` | DrawerTitle [#drawertitle] Accessible title for the drawer. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DrawerDescription [#drawerdescription] Accessible description for the drawer. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | DrawerBody [#drawerbody] Scrollable body content. Uses [ScrollArea](/docs/components/scroll-area) for overflow. Supports `scrollFade` for gradient edges. | Prop | Type | Default | | ------------ | --------- | ------- | | `scrollFade` | `boolean` | `false` | | `className` | `string` | `-` | DrawerFooter [#drawerfooter] Footer area for action buttons. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | DrawerClose [#drawerclose] Closes the drawer on click. Use `asChild` for custom close elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/dialog#api-reference). # Editable (/docs/components/editable) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/editable ``` This component depends on [Input](/docs/components/input) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Editable, EditableArea, EditableInput, EditablePreview, EditableControl, EditableCancelTrigger, EditableSubmitTrigger, EditableEditTrigger, } from "@/components/ui/editable"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Make the entire form editable at once by using the `edit` prop. The `value` and `onValueChange` props control the editable component programmatically. Modes [#modes] The `activationMode` prop controls how editing is triggered. Focus [#focus] Editing starts when the field receives focus. Click [#click] Editing starts with a single click on the preview. Double-Click [#double-click] Editing starts with a double-click on the preview. None [#none] No automatic activation. Use `EditableEditTrigger` to manually start editing. Sizes [#sizes] The `size` prop on `EditablePreview` controls the preview dimensions. Small [#small] Large [#large] Orientation [#orientation] The `orientation` prop controls the layout of the editable component and its controls. Horizontal [#horizontal] Vertical [#vertical] Examples [#examples] With Textarea [#with-textarea] Without Controls [#without-controls] Edit without control buttons. Press Enter to save, Escape to cancel. API Reference [#api-reference] Editable [#editable] Root component. Manages edit mode and value. | Prop | Type | Default | | ---------------- | ------------------------------------ | -------------- | | `activationMode` | `focus \| dblclick \| click \| none` | `'focus'` | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | | `submitMode` | `both \| enter \| blur \| none` | `'both'` | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | EditableArea [#editablearea] Wraps the input and preview views. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | EditableInput [#editableinput] Input shown when editing. Use `asChild` for custom input elements. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | EditablePreview [#editablepreview] Shows the value when not editing. Click to enter edit mode. | Prop | Type | Default | | ----------- | -------------------------------------- | ------- | | `asChild` | `boolean` | `-` | | `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | | `className` | `string` | `-` | EditableControl [#editablecontrol] Holds edit/cancel/submit control buttons. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | EditableEditTrigger [#editableedittrigger] Enters edit mode on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | EditableCancelTrigger [#editablecanceltrigger] Cancels editing and reverts to previous value. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | `-` | EditableSubmitTrigger [#editablesubmittrigger] Submits the edited value and exits edit mode. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/editable#api-reference). # Field (/docs/components/field) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/field ``` This component depends on [Separator](/docs/components/separator) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Field, FieldLabel, FieldInput, FieldHelper, FieldError } from "@/components/ui/field"; ``` ```tsx showLineNumbers Email Enter your email address Email is required ``` Examples [#examples] Default [#default] Input [#input] Autocomplete [#autocomplete] Combobox [#combobox] Combobox Multiple [#combobox-multiple] Textarea [#textarea] Select [#select] Checkbox [#checkbox] Checkbox Group [#checkbox-group] Radio Group [#radio-group] Switch [#switch] Slider [#slider] Use `` inside the `` to label the slider. Number Input [#number-input] Field [#field] API Reference [#api-reference] Field [#field-1] Root layout for label, control, and helper/error text. Supports vertical and horizontal orientation. | Prop | Type | Default | | ------------- | ---------------------------- | ------------ | | `orientation` | `"vertical" \| "horizontal"` | `"vertical"` | | `reverse` | `boolean` | `false` | | `invalid` | `boolean` | `-` | | `disabled` | `boolean` | `-` | | `required` | `boolean` | `-` | | `readOnly` | `boolean` | `-` | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FieldSet [#fieldset] Groups related form controls semantically. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldLegend [#fieldlegend] Legend or label for a FieldSet group. | Prop | Type | Default | | ----------- | --------------------- | ---------- | | `variant` | `"legend" \| "label"` | `"legend"` | | `className` | `string` | `-` | FieldGroup [#fieldgroup] Groups multiple fields with consistent spacing. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldContent [#fieldcontent] Wraps label, description, and error. Use with horizontal orientation. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldLabel [#fieldlabel] Label associated with the control via `htmlFor` / `id`. Required for accessibility. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FieldRequiredIndicator [#fieldrequiredindicator] | Prop | Type | Default | | ----------- | ----------- | ------- | | `children` | `ReactNode` | `"*"` | | `className` | `string` | `-` | | `asChild` | `boolean` | `-` | FieldTitle [#fieldtitle] Title wrapper for grouped field content. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldDescription [#fielddescription] Helper text or description. Shown in muted foreground. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldSeparator [#fieldseparator] Horizontal divider between field groups. Optional center label. | Prop | Type | Default | | ----------- | ----------- | ------- | | `children` | `ReactNode` | `-` | | `className` | `string` | `-` | FieldHelper [#fieldhelper] Alias for FieldDescription. Use for consistency with other form libraries. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FieldError [#fielderror] Error message shown when the field is invalid. Shown in destructive color. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/field#api-reference). # File Upload (/docs/components/file-upload) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/file-upload ``` This component depends on [Button](/docs/components/button) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { FileUpload, FileUploadDropzone, FileUploadDropzoneIcon, FileUploadTitle, FileUploadDescription, FileUploadHelper, FileUploadTrigger, FileUploadList, } from "@/components/ui/file-upload"; ``` ```tsx showLineNumbers Drop files here or You can upload up to 2 files at a time. ``` Examples [#examples] Multiple Files [#multiple-files] Use the `maxFiles` prop to allow uploading multiple files at once. Trigger only [#trigger-only] Dropzone only [#dropzone-only] Use `FileUploadDropzone` to enable drag-and-drop. It exposes a `data-dragging` attribute for styling the drag state. Accepted Files [#accepted-files] Use the `accept` prop to restrict file types. With Field [#with-field] Use `` to add helper text and error handling. Custom Preview [#custom-preview] ```tsx const { acceptedFiles } = useFileUploadContext(); return (
{acceptedFiles.map((file) => (
{file.name}
))}
); ``` Media Capture [#media-capture] Use the `capture` prop to capture and upload media directly from the device camera. The capture prop is only supported on mobile devices. Directory Upload [#directory-upload] Use the `directory` prop to upload entire folders. Attention: Directory Upload When uploading directories with many files, set `maxFiles` to a higher value or remove it entirely to prevent rejections. Clear Trigger [#clear-trigger] Use `` to remove all uploaded files at once. Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` on `` to adjust dropzone padding (default `--spacing(8)`). API Reference [#api-reference] FileUpload [#fileupload] Root component. Manages file state and wraps the upload UI. | Prop | Type | Default | | ---------------------- | ------------------------------------------------------------------- | ---------- | | `accept` | `string \| Record \| FileMimeType[]` | `-` | | `acceptedFiles` | `File[]` | `-` | | `allowDrop` | `boolean` | `true` | | `capture` | `'user' \| 'environment'` | `-` | | `defaultAcceptedFiles` | `File[]` | `-` | | `directory` | `boolean` | `false` | | `disabled` | `boolean` | `-` | | `invalid` | `boolean` | `-` | | `maxFiles` | `number` | `1` | | `maxFileSize` | `number` | `Infinity` | | `minFileSize` | `number` | `0` | | `name` | `string` | `-` | | `onFileAccept` | `(details: FileAcceptDetails) => void` | `-` | | `onFileChange` | `(details: FileChangeDetails) => void` | `-` | | `onFileReject` | `(details: FileRejectDetails) => void` | `-` | | `readOnly` | `boolean` | `-` | | `required` | `boolean` | `-` | | `transformFiles` | `(files: File[]) => Promise` | `-` | | `validate` | `(file: File, details: FileValidateDetails) => FileError[] \| null` | `-` | | `className` | `string` | `-` | FileUploadTrigger [#fileuploadtrigger] Opens the native file picker on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadDropzone [#fileuploaddropzone] Drop zone for drag-and-drop. Exposes `data-dragging` when files are dragged over. | Prop | Type | Default | | -------------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `disableClick` | `boolean` | `-` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(8)` | FileUploadDropzoneIcon [#fileuploaddropzoneicon] Icon shown in the dropzone (e.g. upload icon). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FileUploadTitle [#fileuploadtitle] Title text for the dropzone (e.g. "Drag files here"). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FileUploadDescription [#fileuploaddescription] Description or hint for the dropzone. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FileUploadHelper [#fileuploadhelper] Helper text (e.g. file types, size limits). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FileUploadList [#fileuploadlist] Pre-built list of uploaded files with previews, names, sizes, and delete buttons. Hidden when empty. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FileUploadItemGroup [#fileuploaditemgroup] List of uploaded files. | Prop | Type | Default | | ----------- | -------------------------- | ------- | | `asChild` | `boolean` | `-` | | `type` | `'accepted' \| 'rejected'` | `-` | | `className` | `string` | `-` | FileUploadItem [#fileuploaditem] Single uploaded file with preview and remove button. | Prop | Type | Default | | ----------- | --------- | -------- | | `file` | `File` | required | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadItemPreview [#fileuploaditempreview] Preview container for a file. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `type` | `string` | `'.*'` | | `className` | `string` | `-` | FileUploadItemPreviewImage [#fileuploaditempreviewimage] Image thumbnail for image files. Use inside `FileUploadItemPreview` with `type="image/*"`. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadItemName [#fileuploaditemname] Shows the file name. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadItemSize [#fileuploaditemsize] Shows the formatted file size (e.g. "1.2 MB"). | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadItemDeleteTrigger [#fileuploaditemdeletetrigger] Removes a single file from the list. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | FileUploadClearTrigger [#fileuploadcleartrigger] Removes all files from the list. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `-` | | `className` | `string` | `-` | useFileUploadContext [#usefileuploadcontext] Hook to access file upload state and methods. Use inside `FileUpload` or `FileUploadRootProvider`. | Property | Type | | -------------------- | ------------------------------------------------------- | | `acceptedFiles` | `File[]` | | `rejectedFiles` | `FileRejection[]` | | `openFilePicker` | `() => void` | | `deleteFile` | `(file: File, type?: ItemType) => void` | | `clearFiles` | `() => void` | | `clearRejectedFiles` | `() => void` | | `getFileSize` | `(file: File) => string` | | `createFileUrl` | `(file: File, cb: (url: string) => void) => () => void` | | `setClipboardFiles` | `(dt: DataTransfer) => boolean` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/file-upload#api-reference). # Float (/docs/components/float) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/float ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Float } from "@/components/ui/float"; ``` ```tsx showLineNumbers
{/** floated content **/}
``` Placement [#placement] API Reference [#api-reference] Float [#float] | Prop | Type | Default | | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `placement` | `"top-start" \| "top-center" \| "top-end" \| "middle-start" \| "middle-center" \| "middle-end" \| "bottom-start" \| "bottom-center" \| "bottom-end"` | `"top-end"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Floating Panel (/docs/components/floating-panel) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/floating-panel ``` This component depends on [Button](/docs/components/button) and [Scroll Area](/docs/components/scroll-area) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { FloatingPanel, FloatingPanelTrigger, FloatingPanelContent, FloatingPanelHeader, FloatingPanelTitle, FloatingPanelBody, } from "@/components/ui/floating-panel"; ``` ```tsx showLineNumbers ``` Examples [#examples] Controlled Size [#controlled-size] Control the panel size programmatically using the `size` and `onSizeChange` props. Controlled Position [#controlled-position] Control the panel position programmatically using the `position` and `onPositionChange` props. Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` on `` to adjust internal padding (default `--spacing(4)`). API Reference [#api-reference] FloatingPanel [#floatingpanel] Root component. Manages panel position and drag state. | Prop | Type | Default | | ------------------ | ------------------------------------------ | ------- | | `open` | `boolean` | `-` | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `(details: OpenChangeDetails) => void` | `-` | | `position` | `Point` | `-` | | `defaultPosition` | `Point` | `-` | | `onPositionChange` | `(details: PositionChangeDetails) => void` | `-` | | `size` | `Size` | `-` | | `defaultSize` | `Size` | `-` | | `onSizeChange` | `(details: SizeChangeDetails) => void` | `-` | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `closeOnEscape` | `boolean` | `true` | | `draggable` | `boolean` | `true` | | `resizable` | `boolean` | `true` | | `className` | `string` | `-` | FloatingPanelTrigger [#floatingpaneltrigger] Opens the floating panel on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FloatingPanelContent [#floatingpanelcontent] Holds the panel content. | Prop | Type | Default | | ----------- | --------- | ------- | | `resizable` | `boolean` | `true` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(4)` | FloatingPanelHeader [#floatingpanelheader] Header area. Acts as drag handle for repositioning. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | FloatingPanelTitle [#floatingpaneltitle] Title for the panel. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FloatingPanelBody [#floatingpanelbody] Scrollable body. Uses [`ScrollArea`](/docs/components/scroll-area) for overflow. | Prop | Type | Default | | ------------ | --------- | ------- | | `scrollFade` | `boolean` | `false` | | `className` | `string` | `-` | FloatingPanelCloseTrigger [#floatingpanelclosetrigger] Closes the panel on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/floating-panel#api-reference). # Frame (/docs/components/frame) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/frame ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Frame, FrameHeader, FrameTitle, FrameDescription, FramePanel, FrameFooter, } from "@/components/ui/frame"; ``` ```tsx showLineNumbers Title Description Content Footer ``` Examples [#examples] Separated Panels [#separated-panels] By default, multiple panels are separated with spacing between them. API Reference [#api-reference] Frame [#frame] Main container for grouping related content into panels. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FramePanel [#framepanel] A single panel with optional header and footer. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FrameHeader [#frameheader] Header area for the panel. Often contains title and description. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FrameTitle [#frametitle] Panel title or heading. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FrameDescription [#framedescription] Panel description or subtitle. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | FrameFooter [#framefooter] Footer area for the panel. Often contains actions. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | `false` | # Hint (/docs/components/hint) For the full Tooltip component, check out the [Tooltip](/docs/components/tooltip) component. Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/hint ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Hint, HintTrigger, HintContent } from "@/components/ui/hint"; ``` ```tsx showLineNumbers ``` Hint vs Tooltip [#hint-vs-tooltip] * **Hint**: A lightweight, minimal tooltip that shows information * **Tooltip**: A more complex component that provides a more full-featured tooltip with a variety of options. Controlled [#controlled] Pass `open` and `onOpenChange` to controlled hint. Examples [#examples] Positions [#positions] API Reference [#api-reference] Hint [#hint] Root wrapper. Provides hint context to trigger and content. | Prop | Type | Default | | -------------- | ------------------------- | ---------------------------------------- | | `open` | `boolean` | - | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `(open: boolean) => void` | - | | `positioning` | `Positioning` | `"{ placement: 'top', offset: '10px' }"` | | `className` | `string` | - | | Attribute | Default | | ---------- | ------------------------------------------ | | `--offset` | From `positioning.offset` (default `10px`) | HintTrigger [#hinttrigger] Shows the hint on hover or focus. Button by default; use `asChild` for custom elements. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | HintContent [#hintcontent] Hint content shown in a popover on hover or focus. | Prop | Type | Default | | --------------- | --------- | ------- | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | HintArrow [#hintarrow] Arrow pointing to the trigger. Rendered inside `HintContent` by default. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | # Hover Card (/docs/components/hover-card) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/hover-card ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; ``` ```tsx showLineNumbers {/* Content */} ``` Triggers Delays [#triggers-delays] The `openDelay` and `closeDelay` props control the delay before the hover card opens and closes respectively. Default values are `100ms` for `closeDelay` and `10ms` for `openDelay`. Positioning [#positioning] Control the position of the hover card relative to the trigger using the `positioning` prop. Controlled [#controlled] Control the open state programmatically using the `open` and `onOpenChange` props. Disabled [#disabled] Use the `disabled` prop to prevent the hover card from opening on hover. API Reference [#api-reference] HoverCard [#hovercard] Root component. Manages hover state and content visibility. | Prop | Type | Default | | -------------- | -------------------------------------- | ---------------------- | | `closeDelay` | `number` | `100` | | `defaultOpen` | `boolean` | - | | `disabled` | `boolean` | - | | `immediate` | `boolean` | - | | `onOpenChange` | `(details: OpenChangeDetails) => void` | - | | `open` | `boolean` | - | | `openDelay` | `number` | `10` | | `positioning` | `PositioningOptions` | `{ placement: "top" }` | | `className` | `string` | `-` | HoverCardTrigger [#hovercardtrigger] Shows the hover card on hover or focus. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | - | HoverCardContent [#hovercardcontent] Content shown in a popover when hover card is open. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | - | HoverCardArrow [#hovercardarrow] Optional arrow pointing toward the trigger. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | `-` | | `asChild` | `boolean` | - | | Attribute | Default | | -------------------- | ---------------------------- | | `--arrow-background` | `var(--popover)` | | `--arrow-size` | `calc(1.5 * var(--spacing))` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/hover-card#api-reference). # Image Cropper (/docs/components/image-cropper) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/image-cropper ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { ImageCropper, ImageCropperImage, ImageCropperSelection, } from "@/components/ui/image-cropper"; ``` ```tsx showLineNumbers ``` Examples [#examples] Aspect ratio [#aspect-ratio] Use the `aspectRatio` to lock the crop area to a specific aspect ratio. Circle crop [#circle-crop] Use `cropShape="circle"` for profile pictures or avatars. Initial crop [#initial-crop] Start with a pre-defined crop area using the `initialCrop` prop. Controlled zoom [#controlled-zoom] Control zoom programmatically with the `zoom` and `onZoomChange` props. Zoom limits [#zoom-limits] Set `minZoom` and `maxZoom` to constrain how far users can zoom. Min and max size [#min-and-max-size] Constrain the crop area size with `minWidth`, `minHeight`, `maxWidth`, and `maxHeight`. Fixed crop area [#fixed-crop-area] Set `fixedCropArea` to `true` when the crop area should stay fixed while the image moves underneath. API Reference [#api-reference] ImageCropper [#imagecropper] Root wrapper. Manages crop state and handles. | Prop | Type | Default | | --------------- | --------------------------------------------------------- | ------------- | | `aspectRatio` | `number` | - | | `cropShape` | `'circle' \| 'rectangle'` | `'rectangle'` | | `fixedCropArea` | `boolean` | `false` | | `initialCrop` | `{ x: number; y: number; width: number; height: number }` | - | | `maxHeight` | `number` | `Infinity` | | `maxWidth` | `number` | `Infinity` | | `maxZoom` | `number` | `5` | | `minHeight` | `number` | `40` | | `minWidth` | `number` | `40` | | `minZoom` | `number` | `1` | | `onCropChange` | `(details: CropChangeDetails) => void` | - | | `onZoomChange` | `(details: ZoomChangeDetails) => void` | - | | `rotation` | `number` | - | | `zoom` | `number` | - | | `className` | `string` | - | | Attribute | Default | | ------------------------- | -------------------- | | `--cropper-accent` | `var(--color-white)` | | `--cropper-handler-size` | `--spacing(2)` | | `--cropper-handler-width` | `--spacing(1)` | ImageCropperImage [#imagecropperimage] Image to crop. Pass `src` and alt. | Prop | Type | Default | | ----------- | -------- | ------- | | `alt` | `string` | - | | `src` | `string` | - | | `className` | `string` | - | ImageCropperSelection [#imagecropperselection] Crop selection overlay with resize handles and optional grid. | Prop | Type | Default | | ----------- | -------------------------------------- | -------- | | `axis` | `'horizontal' \| 'vertical' \| 'both'` | `'both'` | | `children` | `ReactNode` | - | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/image-cropper#api-reference). # Components (/docs/components) # Input Group (/docs/components/input-group) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/input-group ``` This component depends on [Input](/docs/components/input) , [Button](/docs/components/button) , and [Textarea](/docs/components/textarea) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from "@/components/ui/input-group"; ``` ```tsx showLineNumbers https:// ``` Align [#align] Use the `align` prop to change the alignment of the input group. inline-start [#inline-start] inline-end [#inline-end] block-start [#block-start] block-end [#block-end] Size [#size] Use the `size` prop to change the size of the input group. Small [#small] Medium [#medium] Large [#large] State [#state] Disabled [#disabled] Invalid [#invalid] Examples [#examples] With Tooltip [#with-tooltip] With Button [#with-button] With Menu [#with-menu] With Badge [#with-badge] With Keyboard Shortcut [#with-keyboard-shortcut] With Inner Label [#with-inner-label] With Spinner [#with-spinner] With Number Field [#with-number-field] With Input Group [#with-input-group] Use `` with textarea to build forms. Combine subject input, message textarea, and action buttons. Password Strength Checker [#password-strength-checker] A complete password checker with show/hide toggle, clear button, and real-time strength indicator. A strong password requires at least 8 characters with uppercase, lowercase, number, and special character. API Reference [#api-reference] InputGroup [#inputgroup] Wraps input with optional addons (labels, buttons, icons) on any side. | Prop | Type | Default | | ----------- | -------------------- | ------- | | `size` | `sm` \| `md` \| `lg` | `md` | | `className` | `string` | - | InputGroupAddon [#inputgroupaddon] Holds addon content (labels, buttons, icons) beside the input. | Prop | Type | Default | | ----------- | -------------------------------------------------------------- | -------------- | | `align` | `inline-start` \| `inline-end` \| `block-start` \| `block-end` | `inline-start` | | `className` | `string` | - | InputGroupButton [#inputgroupbutton] Button inside an addon. Typically used for reveal/hide, clear, or search. | Prop | Type | Default | | ----------- | --------------------------------------------------- | -------- | | `size` | [`ButtonSize`](/docs/components/button#sizes) | `xs` | | `variant` | [`ButtonVariant`](/docs/components/button#variants) | `ghost` | | `type` | `"button" \| "submit" \| "reset"` | `button` | | `className` | `string` | - | InputGroupText [#inputgrouptext] Static text label inside an addon (e.g. currency symbol, unit). | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | InputGroupInput [#inputgroupinput] Text input. Accepts all native input props. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | InputGroupTextarea [#inputgrouptextarea] Multi-line text input. Accepts all native textarea props. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | # Input OTP (/docs/components/input-otp) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/input-otp ``` This component depends on [Input](/docs/components/input) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { InputOtp, InputOtpSeparator, InputOtpSlot, } from "@/components/ui/input-otp"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use `value` and `onValueChange` to control the input. State [#state] Disabled [#disabled] Use the `disabled` prop to disable the input. Invalid [#invalid] Use the `invalid` prop to mark the input as invalid and show error styling. Examples [#examples] Four Digits [#four-digits] Use four `` elements for a 4-digit OTP. Separator [#separator] Add `` between groups of slots. With Placeholder [#with-placeholder] Use the `placeholder` prop to show a placeholder in each slot. Blur on Complete [#blur-on-complete] Use the `blurOnComplete` prop to blur the input when all slots are filled. Mask [#mask] Use the `mask` prop to mask the input value. Custom Size [#custom-size] Pass `className` to `` to override slot dimensions and text size. API Reference [#api-reference] InputOtp [#inputotp] | Prop | Type | Default | | ---------------- | ------------------------------------ | ------- | | `withFakeCaret` | `boolean` | `false` | | `value` | `string` | - | | `defaultValue` | `string` | - | | `onValueChange` | `({ value, valueAsString }) => void` | - | | `disabled` | `boolean` | - | | `invalid` | `boolean` | - | | `otp` | `boolean` | `true` | | `blurOnComplete` | `boolean` | - | | `mask` | `boolean` | - | InputOtpSlot [#inputotpslot] Single OTP slot. Use `index` to specify position (0-based). | Prop | Type | Default | | ------- | -------- | ------------ | | `index` | `number` | **required** | InputOtpSeparator [#inputotpseparator] Visual separator between slots. Extends native `
` props. *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/pin-input#api-reference). # Input (/docs/components/input) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/input ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Input } from "@/components/ui/input"; ``` ```tsx showLineNumbers ``` Sizes [#sizes] Use the `size` prop to change the input height. Small [#small] Medium [#medium] Large [#large] State [#state] Disabled [#disabled] Use the `disabled` prop to disable the input. Invalid [#invalid] Use the `invalid` prop to mark the input as invalid. Examples [#examples] Field [#field] Use ``, `` and `` to create an input with a label and a description. Field Group [#field-group] Use `` to show multiple `` blocks and to build forms. File [#file] Use the `type="file"` prop to create a file input. Dedicated File Upload component For more advanced file upload functionality, use the [``](/docs/components/file-upload) component instead. Inline [#inline] Use the `orientation="horizontal"` prop to create an inline input. Grid [#grid] Required [#required] Use the `required` prop to mark the input as required. Use `` to add a required indicator to the label. Badge [#badge] Use `` in the label to highlight a recommended field. Input Group [#input-group] Use [``](/docs/components/input-group) to create an input group. Button Group [#button-group] Use `` to create a button group. API Reference [#api-reference] Input [#input] Text input. Accepts all native input attributes. | Prop | Type | Default | | ----------- | -------------------- | ------- | | `size` | `sm` \| `md` \| `lg` | `md` | | `type` | `string` | `text` | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/field#api-reference). # Item (/docs/components/item) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/item ``` This component depends on [Separator](/docs/components/separator) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle, } from "@/components/ui/item"; ``` ```tsx showLineNumbers ``` Variant [#variant] Use the `variant` prop to change the visual style of the item. Default [#default] Outline [#outline] Muted [#muted] Custom spacing [#custom-spacing] The `[--space:--spacing("value")]` utility class controls the item padding and gap. Breakpoint utilities change the spacing at different screen sizes. ```css md:[--space:--spacing(4)] lg:[--space:--spacing(6)] ``` Examples [#examples] Icon [#icon] Use `` with `variant="icon"` to display an icon. Avatar [#avatar] `` with `variant="default"` displays an avatar. Image [#image] Use `` with `variant="image"` to display an image. Group [#group] Use `` to group related items together. Header [#header] Use `` to add a header above the item content. Link [#link] Use the `asChild` prop to render the item as a link. The hover and focus states will be applied to the anchor element. Dropdown [#dropdown] Use `` inside a menu or dropdown to display rich content in menu items. API Reference [#api-reference] Item [#item] Layout for list items with media, title, description, and actions. Use `[--space:--spacing("value")]` via `className` to control padding and gap. Supports `asChild`. | Prop | Type | Default | | ----------- | ----------------------------- | --------- | | `variant` | `default`, `outline`, `muted` | `default` | | `asChild` | `boolean` | `false` | | `className` | `string` | - | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(3)` | ItemGroup [#itemgroup] Groups related items with consistent spacing. Uses a fixed gap; adjust layout with `className` if needed. Has `role="list"` for accessibility. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemSeparator [#itemseparator] Horizontal divider between items in a group. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemMedia [#itemmedia] Avatar, icon, or image for the item. Supports icon and image variants. | Prop | Type | Default | | ----------- | -------------------------- | --------- | | `variant` | `default`, `icon`, `image` | `default` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemContent [#itemcontent] Wraps the item title and description text. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemTitle [#itemtitle] Primary title or heading for the item. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemDescription [#itemdescription] Secondary description or subtitle for the item. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemActions [#itemactions] Holds action buttons or controls (e.g. menu, buttons). | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemHeader [#itemheader] Full-width header row above the item content. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | ItemFooter [#itemfooter] Full-width footer row below the item content. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Kbd (/docs/components/kbd) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/kbd ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Kbd, KbdGroup } from "@/components/ui"; ``` ```tsx showLineNumbers ⌘ K ``` Variant [#variant] Use the `variant` prop to change the visual style of the kbd. Outline [#outline] Examples [#examples] Group [#group] Use `` to group keys into a single shortcut. Input Group [#input-group] Use `` inside `` addons to show shortcut hints next to inputs. Button [#button] Add shortcut hints to buttons with `` or ``. Tooltip [#tooltip] Show keyboard shortcuts in `` content. API Reference [#api-reference] Kbd [#kbd] Styled representation of a single key (e.g. ⌘, Enter). | Prop | Type | Default | | ----------- | -------------------- | --------- | | `variant` | `default`, `outline` | `default` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | KbdGroup [#kbdgroup] Groups multiple keys into one shortcut (e.g. ⌘ + K). | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Link Overlay (/docs/components/link-overlay) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/link-overlay ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { LinkBox, LinkOverlay } from "@/components/ui/link-overlay"; ``` ```tsx showLineNumbers

Blog Post Title

``` Accessibility [#accessibility] * **Wrapping a whole card in ``** — Screen readers announce all card content as link text (verbose, confusing). * **`LinkOverlay`** — Keeps the link on the heading only. Announcements stay short. * **Full area clickable** — The overlay makes the whole card clickable without extra markup. * **Inner links** — Stay above the overlay and remain focusable. Users can tab between multiple links instead of one. Link [#link] The [`asChild`](/docs/as-child) prop renders another element with link overlay styling. Examples [#examples] Article [#article] A blog-style article with metadata, heading, description, and an inner link that stays clickable above the overlay. Always use Link [#always-use-link] By default the `` component will render an tag. To use the Next.js (or any other) `` component, make the following updates to `link-overlay.tsx`. ```diff tsx title="components/ui/link-overlay.tsx" showLineNumbers + import Link from "next/link" - import { ark } from "@ark-ui/react/factory" - export const LinkOverlay = (props: React.ComponentProps) => { + export const LinkOverlay = (props: React.ComponentProps) => { const { className, ...rest } = props; return ( - Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/listbox ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { createListCollection } from "@ark-ui/react"; import { Listbox, ListboxContent, ListboxItem, ListboxLabel, } from "@/components/ui/listbox"; ``` ```tsx showLineNumbers const collection = createListCollection({ items: [ { label: "Brazil", value: "br" }, { label: "Mexico", value: "mx" }, { label: "Ireland", value: "ie" }, ], }); {collection.items.map((item) => ( {item.label} ))} ``` Controlled [#controlled] Use `value` and `onValueChange` to control the listbox externally. State [#state] Disabled [#disabled] Disable the entire listbox with the `disabled` prop. Orientation [#orientation] Use `orientation` prop to change the orientation of the listbox. Horizontal [#horizontal] Selection Mode [#selection-mode] Multiple [#multiple] Set `selectionMode="multiple"` to allow selecting multiple items. Extended [#extended] Set `selectionMode="extended"` to select multiple items with Cmd/Ctrl modifier. None [#none] Set `selectionMode="none"` to disable selection. Examples [#examples] With Icon [#with-icon] Add icons to listbox items to provide visual context and improve recognition of different options. With Description [#with-description] Include additional descriptive text for each item to provide more context and help users make informed choices. Image Explorer [#image-explorer] Create an interactive gallery where the listbox acts as navigation for displaying different images or media content. Transfer List [#transfer-list] Create a dual-listbox interface for moving items between available and selected states, commonly used for permission management or item selection workflows. Grouping [#grouping] Use `groupBy` in `createListCollection` and `` with `` to group items. With Filter [#with-filter] Filter items using `useListCollection` with `useFilter` from `@ark-ui/react`. Call `filter` when the search input changes to filter items by label. With Popover [#with-popover] Use the listbox within a popover to create dropdown-like selection menus that overlay other content without taking up permanent screen space. Grid Layout [#grid-layout] Use `createGridCollection` with `columnCount` and grid CSS for a grid layout. API Reference [#api-reference] Listbox [#listbox] Root component. Manages selection state and keyboard navigation. | Prop | Type | Default | | --------------- | ------------------------------------------ | ------------ | | `collection` | `ListCollection` | **required** | | `value` | `string[]` | - | | `defaultValue` | `string[]` | `[]` | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `selectionMode` | `'single' \| 'multiple' \| 'extended'` | `'single'` | | `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | | `disabled` | `boolean` | - | | `deselectable` | `boolean` | - | | `loopFocus` | `boolean` | `false` | ListboxContent [#listboxcontent] Holds the list of options. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxItem [#listboxitem] A single selectable list option. | Prop | Type | Default | | ------------------ | ---------------------------- | ------------ | | `item` | `T` | **required** | | `variant` | `"default" \| "destructive"` | `"default"` | | `asChild` | `boolean` | - | | `highlightOnHover` | `boolean` | - | ListboxItemText [#listboxitemtext] Text content for a list item. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxItemIndicator [#listboxitemindicator] Checkmark or icon shown when the item is selected. | Prop | Type | Default | | ----------- | ----------- | --------------- | | `children` | `ReactNode` | `` | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxItemGroup [#listboxitemgroup] Groups related options. Use `heading` or `` for a label. | Prop | Type | Default | | ----------- | --------- | ------- | | `heading` | `string` | - | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxItemGroupLabel [#listboxitemgrouplabel] Label for a group. Must be used inside ``. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxValueText [#listboxvaluetext] Shows the selected value(s) as text. Use for custom trigger or display. | Prop | Type | Default | | ------------- | --------- | ------- | | `placeholder` | `string` | - | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxEmpty [#listboxempty] Shown when the list has no items. Use for empty states (e.g. no search results). | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | ListboxShortcut [#listboxshortcut] Optional keyboard shortcut hint shown next to an item. *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/listbox#api-reference). # Marquee (/docs/components/marquee) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/marquee ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Add the following animations to your `globals.css` . ```css title="styles/globals.css" showLineNumbers @theme inline { /* ... */ --animate-marquee-x: marqueeX var(--marquee-duration) linear infinite var(--marquee-delay); --animate-marquee-y: marqueeY var(--marquee-duration) linear infinite var(--marquee-delay); @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(var(--marquee-translate)); } } @keyframes marqueeY { from { transform: translateY(0); } to { transform: translateY(var(--marquee-translate)); } } } ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Marquee, MarqueeContent, MarqueeItem, } from "@/components/ui/marquee"; ``` ```tsx showLineNumbers ``` Accessibility [#accessibility] * **Enable pause-on-interaction:** Use `pauseOnInteraction` so users can pause the animation on hover or focus, improving accessibility and readability. * **Use descriptive labels:** Add a meaningful `aria-label` that describes the marquee content. * **Avoid for critical information:** Do not use marquees for content users must read. Moving text is hard to process; use static content for important information. Orientation [#orientation] Use the `orientation` prop to control the orientation of the marquee. Horizontal [#horizontal] Vertical [#vertical] Examples [#examples] Pause on hover [#pause-on-hover] Use the `pauseOnInteraction` prop to pause the marquee on hover or focus. Reverse [#reverse] Use the `reverse` prop to scroll in the opposite direction. Auto fill [#auto-fill] Use the `autoFill` prop to automatically duplicate content to fill the container. Spacing [#spacing] Use the `spacing` prop to control the gap between items. Fade [#fade] Use the `showEdges` prop to show or hide the gradient fade at the start and end of the marquee. Custom speed [#custom-speed] Use the `speed` prop (pixels per second) to control scroll speed. API Reference [#api-reference] Marquee [#marquee] Root component. Manages the scrolling viewport and animation. | Prop | Type | Default | | -------------------- | ------------------------ | ------------ | | `orientation` | `horizontal`, `vertical` | `horizontal` | | `speed` | `number` (px/s) | `50` | | `spacing` | `string` | `"16px"` | | `showEdges` | `boolean` | `true` | | `autoFill` | `boolean` | `false` | | `pauseOnInteraction` | `boolean` | `false` | | `reverse` | `boolean` | `false` | | `className` | `string` | - | MarqueeContent [#marqueecontent] Viewport wrapper. Wrap `MarqueeItem` children with this. Animates content horizontally. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | MarqueeItem [#marqueeitem] Single item in the scrolling marquee. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/marquee#api-reference). # Menu (/docs/components/menu) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/menu ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuQuickItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, } from "@/components/ui/menu"; ``` ```tsx showLineNumbers ``` Positioning [#positioning] Control the position of the menu relative to the trigger using the `positioning` prop. Examples [#examples] Nested Menu [#nested-menu] Use ``, ``, and `` for nested submenus. Icons [#icons] Combine icons with labels for quick scanning. Shortcuts [#shortcuts] Use `` to show keyboard hints next to menu items. Checkboxes [#checkboxes] Use `` for toggles. Radio Group [#radio-group] Use `` and `` for a single selection from a set of options. With Link [#with-link] Use the `asChild` prop on `` with a `anchor` element to render a link. With Group Label [#with-group-label] Use `` with `` or the `heading` prop to group related items under a label. With Separator [#with-separator] Use `` to add visual dividers between related groups of menu items. Quick Items [#quick-items] Use `` for actions with icon-above-text layout, ideal for quick actions like Copy and Share displayed horizontally. With Scroll [#with-scroll] Add `max-h-*` and `overflow-y-auto` to `` to constrain height and enable native scrolling when there are many items. Open a Dialog [#open-a-dialog] Open a dialog from a `` with the `onClick` prop and controlled state. Destructive [#destructive] Use `variant="destructive"` on `` for irreversible actions like delete. API Reference [#api-reference] Menu [#menu] Root element of the menu component. | Prop | Type | Default | | --------------- | -------------------------------------- | ------- | | `positioning` | `PositioningOptions` | - | | `open` | `boolean` | - | | `defaultOpen` | `boolean` | - | | `onOpenChange` | `(details: OpenChangeDetails) => void` | - | | `onSelect` | `(details: SelectionDetails) => void` | - | | `closeOnSelect` | `boolean` | `true` | MenuTrigger [#menutrigger] Opens the menu on click. Use `asChild` to delegate to a child element. | Prop | Type | Default | | --------- | --------- | ------- | | `asChild` | `boolean` | - | MenuContent [#menucontent] Holds menu options. Displayed in a portal, positioned relative to the trigger. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | - | | `className` | `string` | - | MenuItem [#menuitem] A single selectable menu option. Supports `asChild` for custom elements. | Prop | Type | Default | | --------------- | ---------------------------- | ------------ | | `value` | `string` | **required** | | `variant` | `"default" \| "destructive"` | `"default"` | | `asChild` | `boolean` | - | | `disabled` | `boolean` | - | | `closeOnSelect` | `boolean` | - | | `onSelect` | `VoidFunction` | - | MenuCheckboxItem [#menucheckboxitem] A menu option with a checkbox. Use `checked` and `onCheckedChange` for controlled state. | Prop | Type | Default | | ----------------- | ---------------------------- | ------------ | | `value` | `string` | **required** | | `checked` | `boolean` | - | | `onCheckedChange` | `(checked: boolean) => void` | - | | `disabled` | `boolean` | - | MenuRadioGroup [#menuradiogroup] Group of mutually exclusive options. Use `value` and `onValueChange` for controlled state. | Prop | Type | Default | | --------------- | --------------------------------------- | ------- | | `value` | `string` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `heading` | `string` | - | MenuRadioItem [#menuradioitem] A single option in a radio group. | Prop | Type | Default | | ---------- | --------- | ------------ | | `value` | `string` | **required** | | `disabled` | `boolean` | - | MenuGroup [#menugroup] Groups related items. Use `heading` or `` for a label. | Prop | Type | Default | | --------- | -------- | ------- | | `heading` | `string` | - | MenuGroupLabel [#menugrouplabel] Label for a group. Must be used inside ``. MenuSeparator [#menuseparator] Visual divider between groups of menu items. MenuQuickItem [#menuquickitem] A menu option with icon-above-text layout for quick actions. Use with `flex` to display multiple items horizontally. | Prop | Type | Default | | --------------- | -------------- | ------------ | | `value` | `string` | **required** | | `asChild` | `boolean` | - | | `disabled` | `boolean` | - | | `closeOnSelect` | `boolean` | - | | `onSelect` | `VoidFunction` | - | MenuSub / MenuSubTrigger / MenuSubContent [#menusub--menusubtrigger--menusubcontent] Submenu: wrap a nested ``-like structure. `` opens the submenu; `` holds the nested items. MenuShortcut [#menushortcut] Optional keyboard shortcut hint displayed next to a menu item. MenuArrow [#menuarrow] Optional arrow pointing toward the trigger. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | | Attribute | Default | | -------------------- | ---------------------------- | | `--arrow-background` | `var(--popover)` | | `--arrow-size` | `calc(1.5 * var(--spacing))` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/menu#api-reference). # Native Select (/docs/components/native-select) For a styled select component, use the [Select component](/docs/components/select). Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/native-select ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { NativeSelect, NativeSelectOptGroup, NativeSelectOption, } from "@/components/ui/native-select"; ``` ```tsx showLineNumbers Option 1 Option 2 Option 3 ``` Native Select vs Select [#native-select-vs-select] * **NativeSelect** — Use for native browser behavior, better performance, or mobile-optimized dropdowns. * **Select** — Use for custom styling, animations, or complex interactions. Sizes [#sizes] Use the `size` prop to change the select height. Small [#small] Medium [#medium] Large [#large] State [#state] Controlled [#controlled] Use `value` and `onChange` to control the select externally. Disabled [#disabled] Use the `disabled` prop to disable the select. Invalid [#invalid] Use the `invalid` prop to mark the select as invalid. Examples [#examples] Groups [#groups] Use `` to group options with a label. With Field [#with-field] Wrap in `` with `` and `` for proper labeling and accessibility. API Reference [#api-reference] NativeSelect [#nativeselect] Extends native ` {collection.items.map((item) => ( {item} ))} ``` Controlled [#controlled] Use `value` and `onValueChange` to control the selected items. Size [#size] Control trigger size with the `size` prop on SelectTrigger. Small [#small] Medium [#medium] Large [#large] State [#state] Disabled [#disabled] Invalid [#invalid] Examples [#examples] Multiple [#multiple] Enable multiple selection with the `multiple` prop. Grouping [#grouping] Organize options into groups using `groupBy` and `SelectGroup`. With Field [#with-field] Use `` for labels, helper text, and error handling. Max Selection [#max-selection] With Scroll [#with-scroll] Empty [#empty] Use `SelectEmpty` to display a message when the collection has no items. API Reference [#api-reference] Select [#select] Root component. Wraps Ark UI Select.Root with `HiddenSelect` for form support. | Prop | Type | Default | | --------------- | ------------------------------------------ | ------- | | `collection` | `ListCollection` | - | | `value` | `string[]` | - | | `defaultValue` | `string[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `multiple` | `boolean` | `false` | | `disabled` | `boolean` | - | | `invalid` | `boolean` | - | | `name` | `string` | - | | `required` | `boolean` | - | | `positioning` | `PositioningOptions` | - | | `lazyMount` | `boolean` | `true` | | `unmountOnExit` | `boolean` | `true` | | `className` | `string` | - | SelectTrigger [#selecttrigger] Opens the dropdown on click. Displays the selected value or placeholder. | Prop | Type | Default | | ------------------ | -------------------------- | ------- | | `size` | `"sm"` \| `"md"` \| `"lg"` | `"md"` | | `showClearTrigger` | `boolean` | `false` | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectValue [#selectvalue] Shows the selected value or placeholder. Use `SelectContext` as children for custom display. | Prop | Type | Default | | ------------- | --------- | ------- | | `placeholder` | `string` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectContent [#selectcontent] Holds the dropdown options. Displayed in a portal. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectClearTrigger [#selectcleartrigger] Button to clear the selected value. Shown when `showClearTrigger` is true on `SelectTrigger`. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectGroup [#selectgroup] Groups related options under an optional heading. | Prop | Type | Default | | ----------- | ----------------------- | ------- | | `heading` | `string` \| `ReactNode` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectGroupLabel [#selectgrouplabel] Label for an option group. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectItem [#selectitem] A single selectable option in the dropdown. | Prop | Type | Default | | ----------- | --------- | ------- | | `item` | `T` | - | | `className` | `string` | - | | `asChild` | `boolean` | - | SelectEmpty [#selectempty] Shown when the collection has no items (`collection.size === 0`). Place inside `SelectContent`. | Prop | Type | Default | | ----------- | ----------- | ------- | | `className` | `string` | - | | `children` | `ReactNode` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/select#api-reference). # Separator (/docs/components/separator) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/separator ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Separator } from "@/components/ui/separator"; ``` ```tsx showLineNumbers ``` Examples [#examples] Vertical [#vertical] Use `orientation` prop to control the orientation of the separator. Menu [#menu] List [#list] API Reference [#api-reference] Separator [#separator] Horizontal or vertical divider between content. | Prop | Type | Default | | ------------- | ---------------------------- | -------------- | | `orientation` | `"horizontal"`, `"vertical"` | `"horizontal"` | | `className` | `string` | `-` | *** For complete list of props, see [Ark UI documentation](https://ark-ui.com/docs/components/separator#api-reference). # Sheet (/docs/components/sheet) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/sheet ``` This component depends on [Button](/docs/components/button) and [Dialog](/docs/components/dialog) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; ``` ```tsx showLineNumbers Open Sheet Title Sheet Description ``` Sides [#sides] Control which side the sheet slides in from using the `side` prop. Examples [#examples] Inset Variant [#inset-variant] Use the `variant="inset"` prop to add padding. The sheet appears as a floating card rather than edge-to-edge. With Scroll [#with-scroll] Use `` to make the content area scrollable while keeping header and footer fixed. No Close Button [#no-close-button] Use the `showCloseButton` prop to hide the close button in the top right corner. Close behavior [#close-behavior] Use `closeOnInteractOutside` and `closeOnEscape` props to prevent closing on outside click and escape. Non-Modal [#non-modal] Use `modal={false}` to allow interaction with elements outside the sheet. Disables focus trapping and scroll prevention. Custom spacing [#custom-spacing] Use `[--space:--spacing("value")]` on `` to adjust internal padding (default `--spacing(6)`). API Reference [#api-reference] Sheet [#sheet] Root component. Uses Ark UI Dialog. Controls open state and slide direction. | Prop | Type | Default | | ------------------------ | --------------------------------------- | ------- | | `open` | `boolean` | `-` | | `defaultOpen` | `boolean` | `false` | | `onOpenChange` | `({ open }: OpenChangeDetails) => void` | `-` | | `modal` | `boolean` | `true` | | `closeOnEscape` | `boolean` | `true` | | `closeOnInteractOutside` | `boolean` | `true` | | `initialFocusEl` | `() => MaybeElement` | `-` | | `finalFocusEl` | `() => MaybeElement` | `-` | | `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | `-` | | `onInteractOutside` | `(event: InteractOutsideEvent) => void` | `-` | | `className` | `string` | `-` | SheetTrigger [#sheettrigger] Opens the sheet on click. Use `asChild` for custom triggers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | SheetContent [#sheetcontent] Holds the sheet panel. Slides in from the configured edge. | Prop | Type | Default | | ----------------- | ---------------------------------------- | ----------- | | `side` | `"right" \| "left" \| "top" \| "bottom"` | `"right"` | | `variant` | `"default" \| "inset"` | `"default"` | | `showCloseButton` | `boolean` | `true` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--space` | `--spacing(6)` | SheetHeader [#sheetheader] Header area for title and description. | Prop | Type | Default | | ------------- | -------- | ------- | | `title` | `string` | `-` | | `description` | `string` | `-` | | `className` | `string` | `-` | SheetBody [#sheetbody] Scrollable body. Uses [ScrollArea](/docs/components/scroll-area) for overflow. | Prop | Type | Default | | ------------ | --------- | ------- | | `scrollFade` | `boolean` | `false` | | `className` | `string` | `-` | SheetFooter [#sheetfooter] Footer area for action buttons. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | SheetTitle [#sheettitle] Accessible title. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | SheetDescription [#sheetdescription] Accessible description. Announced to screen readers. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | SheetClose [#sheetclose] Closes the sheet on click. | Prop | Type | Default | | ----------- | --------- | ------- | | `asChild` | `boolean` | `false` | | `className` | `string` | `-` | SheetOverlay [#sheetoverlay] Dimmed overlay behind the sheet. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | SheetPositioner [#sheetpositioner] Positioning wrapper for sheet content. Used internally; expose for custom layouts. | Prop | Type | Default | | ----------- | ---------------------------------------- | ----------- | | `side` | `"right" \| "left" \| "top" \| "bottom"` | `-` | | `variant` | `"default" \| "inset"` | `"default"` | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/dialog#api-reference). # Sidebar (/docs/components/sidebar) For full-page examples that wire the sidebar into dashboards, media apps, and other shells: Browse the Sidebar Components (soon). Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/sidebar ``` This component depends on [Button](/docs/components/button) , [Input](/docs/components/input) , [Scroll Area](/docs/components/scroll-area) , [Separator](/docs/components/separator) , [Sheet](/docs/components/sheet) , [Skeleton](/docs/components/skeleton) , and [Tooltip](/docs/components/tooltip) . Install them first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Structure [#structure] Piecing a `Sidebar` together usually means: * `` — Owns open/collapsed state, mobile sheet state, and keyboard shortcut handling. * `` — Fixed (or sheet) column: `placement`, `variant`, and `collapsible` behavior. * `` / `` — Pin content to the top or bottom of the column. * `` — Scrollable middle; optional `scrollFade` on the inner scroll area. * `` — Labeled section inside the scroll region. * `` — Icon/control wired to `useSidebar().toggleSidebar`. * `` — Main document column beside the sidebar (required for `variant="inset"`). Optional helpers: `` (edge hit target), the `` building blocks (submenus, badges, skeletons, actions)—same roles as in the upstream doc. Usage [#usage] `app/layout.tsx` keeps the provider at the top level: ```tsx title="app/layout.tsx" import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"; import { AppSidebar } from "@/components/app-sidebar"; export default function Layout({ children }: React.PropsWithChildren) { return (
{children}
); } ``` The sidebar column itself is usually a dedicated module: ```tsx title="components/app-sidebar.tsx" import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, } from "@/components/ui/sidebar"; export function AppSidebar() { return ( ); } ``` Controlled [#controlled] Use the `onOpenChange` prop to control the sidebar open state. ```tsx "use client"; import React from "react"; import { Sidebar, SidebarProvider } from "@/components/ui/sidebar"; export const ControlledLayout = () => { const [open, setOpen] = React.useState(false); return ( ); } ``` Theming [#theming] Sidebar uses CSS variables to style the sidebar. See the full palette in [Colors](/docs/colors). Variable Reference [#variable-reference] *
`--sidebar` — Sidebar background *
`--sidebar-foreground` — Sidebar text *
`--sidebar-primary` — Active item background *
`--sidebar-accent` — Hover and active states *
`--sidebar-border` — Sidebar borders *
`--sidebar-ring` — Focus rings Learn more about styling in the [Styling](/docs/styling) section. Styling [#styling] React to collapse mode and peer state with utilities. ```tsx ``` ```tsx ``` Keyboard shortcut [#keyboard-shortcut] The toggle listens for **`⌘B`** on macOS and **`Ctrl+B`** elsewhere (`SIDEBAR_KEYBOARD_SHORTCUT` in source). Match that expectation in shortcuts or help copy. API Reference [#api-reference] SidebarProvider [#sidebarprovider] `` must wrap any tree that calls `useSidebar` or renders `` / ``. It forwards standard `div` props (including `className` and `style`). | Name | Type | Description | | -------------- | ------------------------- | -------------------------------------------------- | | `defaultOpen` | `boolean` | Initial open state on desktop (`true` by default). | | `open` | `boolean` | Controlled open flag. | | `onOpenChange` | `(open: boolean) => void` | Fires when the open flag changes. | Width [#width] Defaults live beside `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` inside the registry file. Override per layout with CSS variables on the provider: ```tsx ``` | Attribute | Default | | ------------------------ | ------- | | `--sidebar-width` | `16rem` | | `--sidebar-width-mobile` | `18rem` | | `--sidebar-width-icon` | `3rem` | Sidebar [#sidebar] Primary column component: desktop fixed strip + mobile sheet (via [Sheet](/docs/components/sheet)). | Property | Type | Description | | ------------- | ------------------------------------ | ---------------------------------------------------------------------- | | `placement` | `"left" \| "right"` | Which horizontal edge the column hugs (same idea as “side” in shadcn). | | `variant` | `"sidebar" \| "floating" \| "inset"` | Visual treatment: flush rail, floating panel, or inset shell. | | `collapsible` | `"offcanvas" \| "icon" \| "none"` | How width collapses. | Collapsible modes [#collapsible-modes] | Mode | Behavior | | ----------- | ----------------------------------------- | | `offcanvas` | Collapses off-screen; rail can recall it. | | `icon` | Shrinks to an icon rail. | | `none` | Fixed width; no collapse animation. | With **`variant="inset"`**, park page content in **`SidebarInset`** so padding, radius, and background line up with the inset shell: ```tsx
{children}
 ``` useSidebar [#usesidebar] ```tsx import { useSidebar } from "@/components/ui/sidebar"; export function Example() { const { state, open, setOpen, openMobile, setOpenMobile, isMobile, toggleSidebar, } = useSidebar(); } ``` | Property | Type | Description | | --------------- | --------------------------- | ----------------------------------------- | | `state` | `"expanded" \| "collapsed"` | Desktop collapse mode. | | `open` | `boolean` | Desktop drawer expanded. | | `setOpen` | `(open: boolean) => void` | Set desktop open. | | `openMobile` | `boolean` | Mobile sheet visibility. | | `setOpenMobile` | `(open: boolean) => void` | Control the sheet. | | `isMobile` | `boolean` | Breakpoint-derived mobile flag. | | `toggleSidebar` | `() => void` | Toggles desktop or mobile as appropriate. | SidebarHeader [#sidebarheader] Sticky top region—common pattern: workspace switcher or brand row inside a `SidebarMenu`. ```tsx Select workspace ``` Wire menus or [Menu](/docs/components/menu) triggers to `SidebarMenuButton` as needed. SidebarFooter [#sidebarfooter] Sticky bottom slot—profile, settings entry, sign-out, etc. ```tsx Username ``` SidebarContent [#sidebarcontent] Wraps scrollable groups. Pass **`scrollFade`** when you want a fade on vertical overflow (see component props in source). ```tsx ``` | Attribute | Default | | ------------- | ------- | | `--fade-size` | `3rem` | SidebarGroup [#sidebargroup] A titled block with optional **``** and **``**. ```tsx Application Add project ``` Collapsible groups pair with [Collapsible](/docs/components/collapsible). `` is a plain label slot—keep the trigger beside it (or fold the pattern into `` like the preview at the top of this page): ```tsx
Help
``` SidebarMenu [#sidebarmenu] Row list inside a group—map data to `` / ``. ```tsx {projects.map((project) => ( {project.name} ))} ``` SidebarMenuButton [#sidebarmenubutton] Default renders a **Button**; use **`asChild`** for links. **`isActive`** highlights the active route; **`tooltip`** surfaces collapsed labels. ```tsx Home ``` SidebarMenuAction [#sidebarmenuaction] Icon-only or compact action aligned to a row (e.g. “add”, “more”). Use **`showOnHover`** to reveal on row hover. ```tsx Home Add project ``` SidebarMenuSub [#sidebarmenusub] Nested list hanging off a parent item. ```tsx Child ``` SidebarMenuBadge [#sidebarmenubadge] Small count or pill beside a row. ```tsx 24 ``` SidebarMenuSkeleton [#sidebarmenuskeleton] Placeholder rows while async routes or prefs load. ```tsx {Array.from({ length: 5 }).map((_, index) => ( ))} ``` SidebarTrigger [#sidebartrigger] Prebuilt toggle wired to context—drop next to your page title or in a toolbar. ```tsx import { useSidebar } from "@/components/ui/sidebar"; export function CustomTrigger() { const { toggleSidebar } = useSidebar(); return ; } ``` Prefer **``** when you want the default styling and accessibility bundle. SidebarRail [#sidebarrail] Draggable edge control that expands or collapses the desktop rail—place after header/content/footer inside ``. ```tsx ``` # Signature Pad (/docs/components/signature-pad) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/signature-pad ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { SignaturePad } from "@/components/ui/signature-pad"; ``` ```tsx showLineNumbers ``` Examples [#examples] Image preview [#image-preview] Use the `onDrawEnd` callback to capture the signature as an image. The callback receives the `getDataUrl(type)` method that returns a promise that resolves to a data URL. With field [#with-field] Wrap the signature pad in a `Field` with `FieldLabel` and `FieldHelper` for accessible form integration. API Reference [#api-reference] SignaturePad [#signaturepad] Root component. Canvas for drawing signatures. Manages strokes and export. | Prop | Type | Default | | ----------- | ----------------------------------- | ------- | | `disabled` | `boolean` | `false` | | `required` | `boolean` | `false` | | `readOnly` | `boolean` | `false` | | `name` | `string` | - | | `onDraw` | `(details: DrawDetails) => void` | - | | `onDrawEnd` | `(details: DrawEndDetails) => void` | - | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/signature-pad#api-reference). # Skeleton (/docs/components/skeleton) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/skeleton ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Skeleton, SkeletonCircle, SkeletonText, } from "@/components/ui/skeleton"; ``` ```tsx showLineNumbers ``` Examples [#examples] Skeleton [#skeleton] Rectangular skeleton placeholder. Circle [#circle] Circular skeleton placeholder. Text [#text] Use the `lines` prop to control the number of placeholder lines; the last line is shorter by default. Loading cards [#loading-cards] API Reference [#api-reference] Skeleton [#skeleton-1] Rectangular loading placeholder. | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | SkeletonCircle [#skeletoncircle] Circular loading placeholder (e.g. for avatars). | Prop | Type | Default | | ----------- | --------- | ------- | | `className` | `string` | - | | `asChild` | `boolean` | - | SkeletonText [#skeletontext] Multi-line text placeholder. Last line is shorter by default to mimic text. | Prop | Type | Default | | ----------- | --------- | ------- | | `lines` | `number` | `2` | | `className` | `string` | - | | `asChild` | `boolean` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/skeleton#api-reference). # Skip Nav (/docs/components/skip-nav) > Click on the "Preview" tab and use the tab key to see the skip to content link. Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/skip-nav ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] * Place `` as one of the first focusable elements on the page. * Use `` to wrap your main content. It renders a div with an id that the link targets. ```tsx import { SkipNavContent, SkipNavLink } from "@/components/ui/skip-nav"; ``` ```tsx showLineNumbers
Your main content
``` API Reference [#api-reference] SkipNavLink [#skipnavlink] | Prop | Type | Default | | ----------- | --------- | -------------------- | | `id` | `string` | `"skip-nav-content"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | SkipNavContent [#skipnavcontent] | Prop | Type | Default | | ----------- | --------- | -------------------- | | `id` | `string` | `"skip-nav-content"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | # Slider (/docs/components/slider) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/slider ``` This component depends on [Field](/docs/components/field) . Install it first if you haven't already. Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Slider } from "@/components/ui/slider"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Control the value with `value` and `onValueChange` for a controlled slider. Examples [#examples] With label and value [#with-label-and-value] Use ``, ``, and `` for accessible labelling and to show the current value. Range [#range] Use an array with two values for a range slider. Vertical [#vertical] Use `orientation="vertical"` for a vertical slider. Disabled [#disabled] Use the `disabled` prop to disable the slider. Min and max [#min-and-max] Set `min` and `max` to constrain the slider's value range. Marks [#marks] The `showMarkers` and `markerInterval` props display markers and control the interval between them. Step [#step] Set `step` to control the slider's granularity. Use with `showMarkers` and `markerLabels` to show custom labels on the markers. Marks are only supported for `horizontal` sliders. API Reference [#api-reference] Slider [#slider] Root component. Manages value, track, range, and thumb(s). | Prop | Type | Default | | ---------------- | --------------------------------------- | -------------- | | `value` | `number[]` | - | | `defaultValue` | `number[]` | - | | `onValueChange` | `(details: ValueChangeDetails) => void` | - | | `min` | `number` | `0` | | `max` | `number` | `100` | | `step` | `number` | `1` | | `orientation` | `"horizontal"` \| `"vertical"` | `"horizontal"` | | `disabled` | `boolean` | `false` | | `showMarkers` | `boolean` | `false` | | `markerInterval` | `number` | `1` | | `markerLabels` | `string[]` | `[]` | | `className` | `string` | - | SliderLabel [#sliderlabel] Label for the slider. Required for accessibility. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | SliderValue [#slidervalue] Shows the current value. Useful for numeric display or formatting. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | - | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/slider#api-reference). # Spinner (/docs/components/spinner) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/spinner ``` Install the following dependencies: ```bash npm install lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Spinner } from "@/components/ui/spinner"; ``` ```tsx showLineNumbers ``` Customization [#customization] Examples [#examples] Size [#size] Use the `size-*` utility class to change the size of the spinner. Badge [#badge] Add a spinner to a badge to indicate a loading state. Input Group [#input-group] Use a spinner in an input group addon to indicate a loading or validating state. API Reference [#api-reference] Spinner [#spinner] Use the `Spinner` component to display a loading indicator. It forwards SVG props and supports `className` for sizing and styling. | Prop | Type | Default | | ------------ | -------- | ----------- | | `className` | `string` | - | | `aria-label` | `string` | `"Loading"` | # Status (/docs/components/status) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/status ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Status } from "@/components/ui/status"; ``` ```tsx showLineNumbers Success ``` Variants [#variants] Default [#default] Info [#info] Success [#success] Warning [#warning] Destructive [#destructive] Sizes [#sizes] Small [#small] Medium [#medium] Large [#large] With Badge [#with-badge] With Icon [#with-icon] Place an icon inside the ``. Custom Size [#custom-size] Use `size-*` utility classes to customize the size. Custom Color [#custom-color] Use `bg-*` and `text-*` utility classes to customize the color. API Reference [#api-reference] Status [#status] Status badge or indicator (e.g. online, busy, away). | Prop | Type | Default | | ----------- | --------------------------------------------------- | ----------- | | `variant` | `"success" \| "info" \| "warning" \| "destructive"` | `"success"` | | `size` | `"sm" \| "md" \| "lg"` | `"md"` | | `className` | `string` | - | | `asChild` | `boolean` | `false` | | Attribute | Description | | ----------- | ----------- | | `data-slot` | `status` | # Steps (/docs/components/steps) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/steps ``` Install the following dependencies: ```bash npm install @ark-ui/react lucide-react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Steps, StepsList, StepsItem, StepsTrigger, StepsSeparator, StepsIndicator, StepsTitle, StepsDescription, StepsContent, StepsCompletedContent, StepsNext, StepsPrevious } from "@/components/ui/steps"; ``` ```tsx showLineNumbers ``` Examples [#examples] Title [#title] Use `` to display a description for each step. Description [#description] Use `` to display a description for each step. Vertical [#vertical] Use `orientation="vertical"` for a vertical layout. Loading [#loading] Controlled [#controlled] Use the `step` and `onStepChange` props to control the active step programmatically. Custom Icon [#custom-icon] API Reference [#api-reference] Steps [#steps] Root component. Manages step state and connectors. | Prop | Type | Default | | ---------------- | -------------------------------------- | -------------- | | `count` | `number` | `-` | | `step` | `number` | `-` | | `defaultStep` | `number` | `-` | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | | `linear` | `boolean` | `false` | | `onStepChange` | `(details: StepChangeDetails) => void` | `-` | | `onStepComplete` | `() => void` | `-` | StepsList [#stepslist] Wraps the list of steps. Handles connector layout. | Attribute | Default | | ------------------- | -------------- | | `--steps-gutter` | `--spacing(2)` | | `--steps-icon-size` | `--spacing(4)` | | `--steps-size` | `--spacing(8)` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/steps#api-reference). # Switch (/docs/components/switch) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/switch ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Switch } from "@/components/ui/switch"; ``` ```tsx showLineNumbers ``` Controlled [#controlled] Use the `checked` and `onCheckedChange` props to control the switch state programmatically. State [#state] Invalid [#invalid] Use the `invalid` prop on the `` or in the `` component to mark the switch as invalid. Examples [#examples] Disabled [#disabled] Use the `disabled` prop to disable the switch. With Description [#with-description] Use `` to add a description to the switch. Card Style [#card-style] Use a card-style layout with the switch for a more prominent display. Form Integration [#form-integration] Integrate the switch into a form with proper validation and error handling. Customizing Size [#customizing-size] The switch size is controlled by the `[--size-*]` CSS variable. API Reference [#api-reference] Switch [#switch] Toggle switch for on/off state. Use with a form control. | Prop | Type | Default | | ----------------- | ----------------------------------------- | ------- | | `checked` | `boolean` | `-` | | `defaultChecked` | `boolean` | `false` | | `disabled` | `boolean` | `false` | | `invalid` | `boolean` | `false` | | `name` | `string` | `-` | | `value` | `string \| number` | `"on"` | | `onCheckedChange` | `(details: CheckedChangeDetails) => void` | `-` | | `className` | `string` | `-` | | Attribute | Default | | --------- | -------------- | | `--size` | `--spacing(4)` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/switch#api-reference). # Table (/docs/components/table) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/table ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, TableFooter, } from "@/components/ui/table"; ``` ```tsx showLineNumbers
``` Accessibility [#accessibility] Always use a `` to help assistive technologies announce what the table represents. Use with the `sr-only` class to make the caption screen-reader only if you don't want to show it. ```tsx showLineNumbers Monthly revenue by product. {/* ... */}
``` Examples [#examples] Striped [#striped] Use `variant="striped"` on `` for alternating row backgrounds. With footer [#with-footer] Use `` for summary rows, totals, or notes. With actions [#with-actions] Add an actions column with buttons per row. With action bar [#with-action-bar] Use checkboxes for row selection and an action bar that appears when one or more rows are selected. See the [action bar](/docs/components/action-bar) component. With context menu [#with-context-menu] Wrap each row with `ContextMenuTrigger` so right-clicking shows a context menu with row actions. Disable row hover [#disable-row-hover] Set `isHoverable={false}` on `
` to disable the hover background on body rows. API Reference [#api-reference] Table [#table] Scrollable wrapper around a native table. Supports striped and hover variants. | Prop | Type | Default | | ------------- | ------------------------ | --------- | | `variant` | `"plain"` \| `"striped"` | `"plain"` | | `isHoverable` | `boolean` | `true` | | `className` | `string` | `-` | TableHeader [#tableheader] Table header row group. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableBody [#tablebody] Table body row group. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableFooter [#tablefooter] Table footer row group for totals or summary rows. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableRow [#tablerow] A single table row. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableHead [#tablehead] Header cell for column titles. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableCell [#tablecell] Data cell for body or footer rows. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | TableCaption [#tablecaption] Accessible caption describing the table. Use `sr-only` for screen-reader only. | Prop | Type | Default | | ----------- | -------- | ------- | | `className` | `string` | `-` | # Tabs (/docs/components/tabs) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/tabs ``` Install the following dependencies: ```bash npm install @ark-ui/react tailwind-variants ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; ``` ```tsx showLineNumbers Tab 1 Tab 2 Tab 1 content Tab 2 content ``` Controlled [#controlled] Use `value` and `onValueChange` to control the active tab programmatically. Variant [#variant] Use the `variant` prop on `` to change the selection indicator style. Default [#default] Underline [#underline] Orientation [#orientation] Use the `orientation` prop on `` to lay out tabs horizontally or vertically. Horizontal [#horizontal] Vertical [#vertical] State [#state] Disabled [#disabled] Disable individual tabs with the `disabled` prop on ``. Disabled tabs are not focusable or selectable. Examples [#examples] Vertical with underline [#vertical-with-underline] Combine `orientation="vertical"` on `` with `variant="underline"` on ``. With icons [#with-icons] API Reference [#api-reference] Tabs [#tabs] Root element. Manages tab state and layout. | Prop | Type | Default | | --------------- | --------------------------------------- | -------------- | | `value` | `string` | `-` | | `defaultValue` | `string` | `-` | | `onValueChange` | `(details: ValueChangeDetails) => void` | `-` | | `orientation` | `"horizontal"` \| `"vertical"` | `"horizontal"` | | `className` | `string` | `-` | TabsList [#tabslist] Container for tab triggers and the selection indicator. | Prop | Type | Default | | ----------- | ---------------------------- | ----------- | | `variant` | `"default"` \| `"underline"` | `"default"` | | `className` | `string` | `-` | TabsTrigger [#tabstrigger] Button that selects a tab. Must have a `value` matching a `TabsContent` panel. | Prop | Type | Default | | ----------- | --------- | ------------ | | `value` | `string` | **required** | | `disabled` | `boolean` | `false` | | `className` | `string` | `-` | TabsContent [#tabscontent] Panel shown when its tab is selected. Must have a `value` matching a `TabsTrigger`. | Prop | Type | Default | | ----------- | -------- | ------------ | | `value` | `string` | **required** | | `className` | `string` | `-` | *** For a complete list of props, see the [Ark UI documentation](https://ark-ui.com/docs/components/tabs#api-reference). # Textarea (/docs/components/textarea) Installation [#installation] CLI Manual ```bash npx shadcn@latest add @shark/textarea ``` Install the following dependencies: ```bash npm install @ark-ui/react ``` Copy and paste the following code into your project. Update the import paths to match your project setup. Usage [#usage] ```tsx import { Textarea } from "@/components/ui/textarea"; ``` ```tsx showLineNumbers