# Obsidian Pro Design System

> Premium dark developer design system with 46 components. Everything in Obsidian plus advanced form controls, navigation, overlays, data display, and composite patterns.

## Overview

- Style: Dark Developer
- Tier: paid
- Fonts: Inter (--font-sans), JetBrains Mono (--font-code)
- Border radius: 0.5rem
- Spacing base: 4px
- Components: 46

## Design Tokens

### Colors
- --primary: oklch(0.65 0.20 275)
- --primary-foreground: oklch(0.98 0 0)
- --background: oklch(0.15 0.02 270)
- --foreground: oklch(0.93 0.01 270)
- --muted: oklch(0.22 0.02 270)
- --muted-foreground: oklch(0.60 0.02 270)
- --border: oklch(0.30 0.02 270)
- --card: oklch(0.18 0.02 270)
- --accent: oklch(0.70 0.18 280)
- --destructive: oklch(0.60 0.22 25)

### Typography
- Inter: var(--font-sans)
- JetBrains Mono: var(--font-code)

## Components

### accordion
Obsidian Pro accordion — expandable content sections with animated open/close transitions.
Dependencies: @radix-ui/react-accordion
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/accordion

### alert
Obsidian Pro alert — dark informational banner with icon support for developer tools. Supports default and destructive variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/alert

### alert-dialog
Obsidian Pro alert dialog — confirmation modal with cancel and action buttons for destructive operations.
Dependencies: @radix-ui/react-alert-dialog
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/alert-dialog

### aspect-ratio
Obsidian Pro aspect ratio — wrapper that maintains a specified aspect ratio for its content.
Dependencies: @radix-ui/react-aspect-ratio
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/aspect-ratio

### avatar
Obsidian Pro avatar — circular image container with dark fallback styling for developer dashboards.
Dependencies: @radix-ui/react-avatar
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/avatar

### badge
Obsidian Pro badge — small label with purple-blue accent for developer dashboards. Supports default, secondary, destructive, and outline variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/badge

### breadcrumb
Obsidian Pro breadcrumb — navigation breadcrumb trail with links, separators, and ellipsis support.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/breadcrumb

### button
Obsidian Pro button — dark developer style with purple-blue accents inspired by Linear and Vercel. Supports default, destructive, outline, secondary, ghost, and link variants.
Dependencies: class-variance-authority
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/button

### calendar
Obsidian Pro calendar — date picker calendar with navigation, day selection, and range support.
Dependencies: react-day-picker
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/calendar

### card
Obsidian Pro card — dark container with subtle border for developer dashboards. Includes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/card

### carousel
Obsidian Pro carousel — horizontal or vertical carousel with previous/next controls and item indicators.
Dependencies: embla-carousel-react
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/carousel

### chart
Obsidian Pro chart — flexible chart wrapper supporting area, bar, and line charts with system-matched colors.
Dependencies: recharts
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/chart

### checkbox
Obsidian Pro checkbox — accessible checkbox with checked state using the system's primary color.
Dependencies: @radix-ui/react-checkbox
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/checkbox

### collapsible
Obsidian Pro collapsible — expandable/collapsible content section with trigger.
Dependencies: @radix-ui/react-collapsible
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/collapsible

### combobox
Obsidian Pro combobox — searchable select with input and dropdown list powered by cmdk.
Dependencies: cmdk
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/combobox

### command
Obsidian Pro command — command palette with search input, grouped items, and keyboard navigation.
Dependencies: cmdk
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/command

### context-menu
Obsidian Pro context menu — right-click menu with items, separators, and sub-menus.
Dependencies: @radix-ui/react-context-menu
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/context-menu

### data-table
Obsidian Pro data table — feature-rich table with sorting, filtering, and pagination powered by TanStack Table.
Dependencies: @tanstack/react-table
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/data-table

### dialog
Obsidian Pro dialog — modal overlay with header, footer, title, and description. Includes close button and animations.
Dependencies: @radix-ui/react-dialog
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/dialog

### dropdown-menu
Obsidian Pro dropdown menu — accessible dropdown with items, checkboxes, radio items, and sub-menus.
Dependencies: @radix-ui/react-dropdown-menu
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/dropdown-menu

### form
Obsidian Pro form — form primitives with FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage using React context.
Dependencies: react-hook-form
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/form

### hover-card
Obsidian Pro hover card — floating card shown on hover with trigger and content.
Dependencies: @radix-ui/react-hover-card
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/hover-card

### input
Obsidian Pro input — dark text input with purple-blue focus ring for developer interfaces.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/input

### label
Obsidian Pro label — form label with consistent typography and disabled state handling.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/label

### menubar
Obsidian Pro menubar — horizontal menu bar with menus, triggers, items, and sub-menus.
Dependencies: @radix-ui/react-menubar
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/menubar

### navigation-menu
Obsidian Pro navigation menu — full nav menu with triggers, content panels, and viewport animations.
Dependencies: @radix-ui/react-navigation-menu
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/navigation-menu

### pagination
Obsidian Pro pagination — page navigation with previous, next, and numbered page links.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/pagination

### popover
Obsidian Pro popover — small floating content panel triggered by a button.
Dependencies: @radix-ui/react-popover
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/popover

### progress
Obsidian Pro progress — horizontal progress bar with animated indicator using the system's primary color.
Dependencies: @radix-ui/react-progress
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/progress

### radio-group
Obsidian Pro radio group — accessible radio button group with styled indicators using the system's primary color.
Dependencies: @radix-ui/react-radio-group
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/radio-group

### resizable
Obsidian Pro resizable — resizable panel layout with draggable handles between panels.
Dependencies: react-resizable-panels
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/resizable

### scroll-area
Obsidian Pro scroll area — custom scrollable container with styled scrollbar.
Dependencies: @radix-ui/react-scroll-area
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/scroll-area

### select
Obsidian Pro select — accessible dropdown select with trigger, content, item, label, and separator components.
Dependencies: @radix-ui/react-select
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/select

### separator
Obsidian Pro separator — horizontal or vertical divider line using the system's border color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/separator

### sheet
Obsidian Pro sheet — side panel overlay that slides in from any edge, built on the Dialog primitive.
Dependencies: @radix-ui/react-dialog
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/sheet

### sidebar
Obsidian Pro sidebar — application sidebar layout with header, content, footer, group, and trigger components.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/sidebar

### skeleton
Obsidian Pro skeleton — animated loading placeholder using the system's muted color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/skeleton

### slider
Obsidian Pro slider — horizontal range slider with track and thumb using the system's primary color.
Dependencies: @radix-ui/react-slider
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/slider

### switch
Obsidian Pro switch — toggle switch with the system's primary color when checked.
Dependencies: @radix-ui/react-switch
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/switch

### table
Obsidian Pro table — styled HTML table with header, body, row, head, cell, caption, and footer components.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/table

### tabs
Obsidian Pro tabs — accessible tab navigation with list, trigger, and content components.
Dependencies: @radix-ui/react-tabs
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/tabs

### textarea
Obsidian Pro textarea — multi-line text input with focus ring matching the system's primary color.
No external dependencies
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/textarea

### toast
Obsidian Pro toast — toast notifications powered by Sonner with system-matched styling.
Dependencies: sonner
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toast

### toggle
Obsidian Pro toggle — single toggle button with default and outline variants.
Dependencies: @radix-ui/react-toggle
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toggle

### toggle-group
Obsidian Pro toggle group — group of selectable toggle items with single or multiple selection modes.
Dependencies: @radix-ui/react-toggle-group
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toggle-group

### tooltip
Obsidian Pro tooltip — small popup on hover with provider, trigger, and content components.
Dependencies: @radix-ui/react-tooltip
Install: npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/tooltip

## Quick Start

Install all components:
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/accordion
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/alert
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/alert-dialog
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/aspect-ratio
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/avatar
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/badge
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/breadcrumb
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/button
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/calendar
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/card
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/carousel
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/chart
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/checkbox
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/collapsible
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/combobox
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/command
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/context-menu
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/data-table
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/dialog
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/dropdown-menu
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/form
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/hover-card
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/input
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/label
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/menubar
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/navigation-menu
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/pagination
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/popover
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/progress
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/radio-group
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/resizable
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/scroll-area
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/select
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/separator
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/sheet
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/sidebar
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/skeleton
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/slider
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/switch
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/table
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/tabs
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/textarea
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toast
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toggle
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/toggle-group
npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/tooltip

## Links

- System page: https://vibedesign.systems/systems/obsidian-pro
- Registry API: https://vibedesign.systems/api/registry/obsidian-pro
- Platform: https://vibedesign.systems/llms.txt