Introduction

What is Shark UI?

Shark UI is an opinionated UI library built on top of Ark UI and shadcn. "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

Ark UI offers a broad set of headless components—made by the team behind Chakra UI—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 with Tailwind CSS. 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

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

To get started, follow the installation guide. You’ll choose your framework (Next.js, Vite, Astro, and others are supported), add the components you need, and you’re off.