Introduction

Built on top of Ark UI and shadcn, it includes sensible defaults for 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#

Ark UI offers a broad set of headless components and serves as a direct alternative to Radix Primitives and Base UI. It gives you accessible primitives and state management, but it leaves styling and layout entirely to you. shadcn, on the other hand, ships copy-paste components that look great. 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.

How it works#

Instead of only installing a package from npm and importing opaque pieces, you keep source in your repository and change it with your app. That sidesteps the usual spiral of wrappers, style overrides, and mismatched APIs when defaults are not enough.

This approach, where you keep and own the source code, means:

• Full transparency: You see exactly how each component is built, with no hidden layers between you and the implementation.
• Easy customization: Adjust any part of a component to match your design and functionality; you edit the source instead of working around a package API.
• AI-friendly workflows: Because the code lives in your repo, LLMs and teammates can read, reason about, and help improve components without reverse-engineering a library.

AI Ready#

The library is designed so people and AI tools can rely on it equally. Components are written to stay clear, readable, and predictable so assistants can understand structure, reason about changes, and modify files with less guesswork.

Because the source sits in your repository with inspectable implementations and consistent patterns from component to component, models get the context they need to read your UI layer end to end. An assistant can learn how your pieces work, propose refactors or small fixes, or generate new components that match your existing tokens, layout, and conventions.