Obsidian Pro

$69

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

Style: Dark Developer·46 components·Fonts: Inter, JetBrains Mono

Quick Install

Install a single component:

npx shadcn@latest add https://vibedesign.systems/api/registry/obsidian-pro/button

Or tell your AI agent:

Use the Obsidian Pro design system from vibedesign.systems. Read https://vibedesign.systems/systems/obsidian-pro/llms.txt for details.

Components

Section 1▾

Section 2▸

accordionobsidian-pro/accordion

Alert: Something happened

alertobsidian-pro/alert

Are you sure?

This action cannot be undone.

Cancel

Continue

alert-dialogobsidian-pro/alert-dialog

16:9

aspect-ratioobsidian-pro/aspect-ratio

avatarobsidian-pro/avatar

Default

Secondary

badgeobsidian-pro/badge

Home/Settings/Profile

breadcrumbobsidian-pro/breadcrumb

Primary

Outline

buttonobsidian-pro/button

March 2026

calendarobsidian-pro/calendar

Card Title

Description text here

cardobsidian-pro/card

‹

Slide 1

›

carouselobsidian-pro/carousel

chartobsidian-pro/chart

✓

checkboxobsidian-pro/checkbox

Toggle section▾

Hidden content revealed

collapsibleobsidian-pro/collapsible

Search...▲▼

comboboxobsidian-pro/combobox

Search commands...

Theme

Settings

commandobsidian-pro/command

Copy

Paste

Delete

context-menuobsidian-pro/context-menu

☐

Name ↕

☑

Alice

a@b.c

data-tableobsidian-pro/data-table

Dialog Title

Dialog content goes here

Confirm

dialogobsidian-pro/dialog

Profile

Settings

Log out

dropdown-menuobsidian-pro/dropdown-menu

you@example.com

We'll never share your email.

formobsidian-pro/form

@user

Developer

hover-cardobsidian-pro/hover-card

Placeholder text...

inputobsidian-pro/input

Form Label

labelobsidian-pro/label

File

Edit

View

menubarobsidian-pro/menubar

DocsComponentsExamples

navigation-menuobsidian-pro/navigation-menu

‹

›

paginationobsidian-pro/pagination

Popover content

popoverobsidian-pro/popover

progressobsidian-pro/progress

radio-groupobsidian-pro/radio-group

Panel A

Panel B

resizableobsidian-pro/resizable

Item 1

Item 2

Item 3

Item 4

scroll-areaobsidian-pro/scroll-area

Select option...▾

selectobsidian-pro/select

separatorobsidian-pro/separator

Side Panel

Panel content

sheetobsidian-pro/sheet

Nav

Content

sidebarobsidian-pro/sidebar

skeletonobsidian-pro/skeleton

sliderobsidian-pro/slider

switchobsidian-pro/switch

Name

Status

Item 1

Active

tableobsidian-pro/table

Tab 1

Tab 2

tabsobsidian-pro/tabs

Enter text...

textareaobsidian-pro/textarea

Event created

Monday, Jan 1 at 9:00 AM

toastobsidian-pro/toast

Bold

Italic

toggleobsidian-pro/toggle

toggle-groupobsidian-pro/toggle-group

Tooltip text

tooltipobsidian-pro/tooltip

Design Tokens

Token	Value	Preview
--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)
--radius	0.5rem