Installation

This guide walks through installing Shark UI with your framework of choice. You will end up with components in your project, styled with Tailwind, and ready to customize.

Prerequisites

Components require Tailwind CSS and Ark UI. When you add components via the shadcn CLI, those dependencies are installed automatically. For manual setup, you add them yourself.

Frameworks

Adding components

Two options:

• CLI (recommended): Run npx shadcn@latest add https://shark.vini.one/r/<component>.json (e.g. button, dialog, input). The CLI fetches the component and its dependencies, writes files to your project, and installs any missing packages.
• Manual: Copy component source from the Shark UI repo into your project and wire up imports. Use this when you need full control or the CLI does not fit your setup.

Both paths result in components you own—no runtime package beyond Ark and Tailwind.

Styling

For theming, globals.css, and layout setup, see Styling. Colors use predefined variables from Tailwind CSS. The naming follows the shadcn/ui convention: --background, --foreground, --primary, etc.

Extended colors

See Colors for the full palette and variable reference. Extra variables extend the base palette for components that need state-specific colors (badges, alerts, status indicators):

• --destructive-foreground — Foreground for destructive actions
• --info / --info-foreground — Information states
• --success / --success-foreground — Success states
• --warning / --warning-foreground — Warning states

These keep styling consistent across components that show different states or levels of severity.