1 slot open this monthBy the makers of shadcnregistryWe built shadcnregistry. Now we build your product.Book a callCheck availability

1 slot open this monthAI features?We build AI features into your product.Book a callCheck availability

1 slot open this month🚨 Slop police🚨 Slop police: we clean up vibe-coded apps.Report itReport your app

Terms of Service Privacy Policy

Registry Health Inspect

Pesto UI Style – shadcn/ui Style by pestoui | shadcnregistry

Registries
pestoui
Pesto UI Style

Pesto UI Style

style

Pesto UI's tokens, accent themes, Geist fonts, motion system and base layer. Every component depends on it, so add it first.

pnpm dlx shadcn@latest add "https://pestoui.vercel.app/r/style.json"

Premium blocks for shadcn/uiShadcnblocks.com · AffiliateExplore

@fontsource-variable/geist-mono@^5.3.0
@fontsource-variable/geist@^5.3.0
shadcn@^4.23.0
tw-animate-css@^1.4.0

Light Mode

--ease-out-expo:

cubic-bezier(0.16, 1, 0.3, 1)

--ease-in-out-circ:

cubic-bezier(0.77, 0, 0.175, 1)

--ease-sheet:

cubic-bezier(0.32, 0.72, 0, 1)

--ease-out-quart:

cubic-bezier(0.25, 1, 0.5, 1)

--ease-in-quart:

cubic-bezier(0.5, 0, 0.75, 0)

--ease-in-out-quart:

cubic-bezier(0.76, 0, 0.24, 1)

--ease-out-back:

cubic-bezier(0.34, 1.35, 0.64, 1)

--ease-spring-press:

linear( 0, 0.0218 4.55%, 0.0765 9.09%, 0.1516 13.64%, 0.2373 18.18%, 0.3268 22.73%, 0.4152 27.27%, 0.4993 31.82%, 0.5769 36.36%, 0.6471 40.91%, 0.7092 45.45%, 0.7634 50%, 0.8099 54.55%, 0.8493 59.09%, 0.8823 63.64%, 0.9095 68.18%, 0.9318 72.73%, 0.9497 77.27%, 0.9639 81.82%, 0.9751 86.36%, 0.9837 90.91%, 0.9902 95.45%, 1 )

--ease-spring-glide:

linear( 0, 0.0866 5.56%, 0.2505 11.11%, 0.4165 16.67%, 0.5588 22.22%, 0.6721 27.78%, 0.7589 33.33%, 0.8239 38.89%, 0.8719 44.44%, 0.9071 50%, 0.9327 55.56%, 0.9513 61.11%, 0.9648 66.67%, 0.9746 72.22%, 0.9817 77.78%, 0.9868 83.33%, 0.9904 88.89%, 0.9931 94.44%, 1 )

Dark Mode

--background:

oklch(0.1822 0.004 var(--brand-hue))

--foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--card:

oklch(0.2404 0.0055 var(--brand-hue))

--card-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--popover:

oklch(0.2404 0.0055 var(--brand-hue))

--popover-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--paper:

Theme

--ease-out-expo:

var(--ease-out-expo)

--ease-in-out-circ:

var(--ease-in-out-circ)

--ease-sheet:

var(--ease-sheet)

--ease-out-quart:

var(--ease-out-quart)

--ease-in-quart:

var(--ease-in-quart)

--ease-in-out-quart:

var(--ease-in-out-quart)

--ease-out-back:

var(--ease-out-back)

--ease-spring-press:

var(--ease-spring-press)

--ease-spring-glide:

var(--ease-spring-glide)

--ease-spring-panel:

var(--ease-spring-panel)

CSS

--ease-spring-panel:

linear( 0, 0.1403 5.56%, 0.3435 11.11%, 0.5121 16.67%, 0.6399 22.22%, 0.7346 27.78%, 0.8046 33.33%, 0.8561 38.89%, 0.894 44.44%, 0.9219 50%, 0.9425 55.56%, 0.9577 61.11%, 0.9688 66.67%, 0.977 72.22%, 0.9831 77.78%, 0.9876 83.33%, 0.9908 88.89%, 0.9932 94.44%, 1 )

--ease-spring-swap:

linear( 0, 0.0346 4.55%, 0.1161 9.09%, 0.2195 13.64%, 0.3292 18.18%, 0.4355 22.73%, 0.5332 27.27%, 0.6195 31.82%, 0.6939 36.36%, 0.7565 40.91%, 0.8084 45.45%, 0.8507 50%, 0.8848 54.55%, 0.9119 59.09%, 0.9332 63.64%, 0.9499 68.18%, 0.9627 72.73%, 0.9726 77.27%, 0.98 81.82%, 0.9856 86.36%, 0.9898 90.91%, 0.9929 95.45%, 1 )

--ease-spring-weighted:

linear( 0, 0.0373 4.17%, 0.129 8.33%, 0.2504 12.5%, 0.3829 16.67%, 0.5135 20.83%, 0.6337 25%, 0.7387 29.17%, 0.8263 33.33%, 0.8963 37.5%, 0.9498 41.67%, 0.9887 45.83%, 1.0151 50%, 1.0316 54.17%, 1.0402 58.33%, 1.0432 62.5%, 1.0421 66.67%, 1.0384 70.83%, 1.0333 75%, 1.0277 79.17%, 1.022 83.33%, 1.0167 87.5%, 1.012 91.67%, 1.0081 95.83%, 1 )

--ease-spring-overshoot:

linear( 0, 0.0308 3.85%, 0.106 7.69%, 0.2052 11.54%, 0.3141 15.38%, 0.4228 19.23%, 0.5253 23.08%, 0.6178 26.92%, 0.6988 30.77%, 0.7677 34.62%, 0.825 38.46%, 0.8715 42.31%, 0.9086 46.15%, 0.9375 50%, 0.9595 53.85%, 0.9758 57.69%, 0.9877 61.54%, 0.9959 65.38%, 1.0014 69.23%, 1.0048 73.08%, 1.0067 76.92%, 1.0076 80.77%, 1.0077 84.62%, 1.0073 88.46%, 1.0066 92.31%, 1.0058 96.15%, 1 )

--ease-spring-bouncy:

linear( 0, 0.0784 2.94%, 0.273 5.88%, 0.5235 8.82%, 0.7774 11.76%, 0.9961 14.71%, 1.1564 17.65%, 1.2502 20.59%, 1.2814 23.53%, 1.2623 26.47%, 1.2092 29.41%, 1.1393 32.35%, 1.0675 35.29%, 1.005 38.24%, 0.9585 41.18%, 0.9308 44.12%, 0.9209 47.06%, 0.9254 50%, 0.9398 52.94%, 0.9593 55.88%, 0.9796 58.82%, 0.9975 61.76%, 1.0109 64.71%, 1.0191 67.65%, 1.0222 70.59%, 1.0212 73.53%, 1.0173 76.47%, 1.0119 79.41%, 1.0061 82.35%, 1.001 85.29%, 0.9971 88.24%, 0.9947 91.18%, 0.9938 94.12%, 0.994 97.06%, 1 )

--ease-spring-release:

linear( 0, 0.827 3.03%, 1.4128 6.06%, 1.7797 9.09%, 1.963 12.12%, 2.0031 15.15%, 1.941 18.18%, 1.814 21.21%, 1.6536 24.24%, 1.4844 27.27%, 1.3244 30.3%, 1.1851 33.33%, 1.0724 36.36%, 0.9883 39.39%, 0.9313 42.42%, 0.8981 45.45%, 0.8844 48.48%, 0.8853 51.52%, 0.8961 54.55%, 0.9129 57.58%, 0.9323 60.61%, 0.9517 63.64%, 0.9694 66.67%, 0.9844 69.7%, 0.9961 72.73%, 1.0045 75.76%, 1.0099 78.79%, 1.0128 81.82%, 1.0136 84.85%, 1.0129 87.88%, 1.0113 90.91%, 1.0092 93.94%, 1.0069 96.97%, 1 )

--ease-spring-editorial:

linear( 0, 0.0548 5%, 0.1726 10%, 0.3089 15%, 0.4404 20%, 0.557 25%, 0.6552 30%, 0.7351 35%, 0.7986 40%, 0.8482 45%, 0.8864 50%, 0.9155 55%, 0.9375 60%, 0.9539 65%, 0.9662 70%, 0.9752 75%, 0.9819 80%, 0.9869 85%, 0.9905 90%, 0.9931 95%, 1 )

--ease-spring:

var(--ease-spring-press)

--animate-shake:

shake 450ms var(--ease-out-expo)

--animate-nudge:

nudge 600ms var(--ease-out-expo)

--animate-pulse-ring:

pulse-ring 1600ms var(--ease-in-out-circ) infinite

--animate-shimmer:

shimmer 2500ms linear infinite

--animate-ripple:

ripple 1600ms var(--ease-out-expo)

--animate-travel:

travel-bounce var(--duration-travel) var(--ease-out-back), travel-squish var(--duration-travel) var(--ease-in-out-circ)

--animate-travel-slide:

travel-slide var(--duration-travel) var(--ease-out-back), travel-slide-squish var(--duration-travel) var(--ease-in-out-circ)

--text-micro:

0.6875rem

--text-caption-sm:

0.75rem

--text-caption:

0.8125rem

--text-body-sm:

0.875rem

--text-body:

0.9375rem

--text-body-md:

1rem

--text-body-lg:

1.0625rem

--text-lead:

1.125rem

--tracking-snug:

-0.01em

--tracking-title:

-0.02em

--duration-instant:

75ms

--duration-fast:

100ms

--duration-base:

150ms

--duration-slow:

250ms

--duration-slower:

400ms

--duration-exit:

160ms

--duration-spring-press:

170ms

--duration-spring-glide:

364ms

--duration-spring-panel:

443ms

--duration-spring-swap:

219ms

--duration-spring-weighted:

497ms

--duration-spring-overshoot:

584ms

--duration-spring-bouncy:

534ms

--duration-spring-release:

320ms

--duration-spring-editorial:

693ms

--duration-spring:

var(--duration-spring-press)

--duration-travel:

350ms

--press-scale:

0.96

--press-squeeze:

0.9

--press-lean:

calc(var(--spacing) * 1)

--press-lean-angle:

15deg

--travel-lean:

1.6px

--stagger-tight:

25ms

--stagger-base:

35ms

--stagger-loose:

90ms

--lift-hover:

4px

--falloff-neighbor:

0.45

--reveal-duration:

var(--duration-slower)

--reveal-blur:

2px

--reveal-rise:

4px

--orb-violet-base:

#efc8fb

--orb-violet-1:

#864eff

--orb-violet-2:

#a27aff

--orb-violet-3:

#ffebfd

--orb-violet-4:

#ff6fc5

--orb-violet-rim:

#fdeef8

--orb-pink-base:

#ffcee8

--orb-pink-1:

#ff65b8

--orb-pink-2:

#e8a9f7

--orb-pink-3:

#fff7fc

--orb-pink-4:

#ff7f7b

--orb-pink-rim:

#fdeef8

--orb-orange-base:

#ffa595

--orb-orange-1:

#ff8823

--orb-orange-2:

#ffead7

--orb-orange-3:

#fe0011

--orb-orange-rim:

#ffd8ea

--orb-blue-base:

#a0d4ff

--orb-blue-1:

#247dff

--orb-blue-2:

#fdffff

--orb-blue-3:

#2ab5f7

--orb-blue-4:

#c3c3ff

--orb-blue-rim:

#ecf4fd

--orb-teal-base:

#aae6db

--orb-teal-1:

#00d8c0

--orb-teal-2:

#18b0ff

--orb-teal-3:

#00b878

--orb-teal-4:

#e4f6ea

--orb-teal-rim:

#e0f4ea

--tracking-body:

-0.011em

--brand-hue:

121

--background:

oklch(0.9691 0.0038 var(--brand-hue))

--foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--card:

oklch(1 0 0)

--card-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--popover:

oklch(1 0 0)

--popover-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--paper:

oklch(0.945 0.0088 var(--brand-hue))

--paper-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--inverse:

oklch(0.2686 0.0072 var(--brand-hue))

--inverse-foreground:

oklch(0.9851 0.0015 var(--brand-hue))

--inverse-muted:

oklch(0.715 0.0088 var(--brand-hue))

--surface:

#F9FAF7

--surface-card:

#FEFFFC

--surface-card-border:

#EFF0ED

--primary:

oklch(0.9192 0.2125 120.78)

--primary-foreground:

oklch(0.3241 0.0723 125.5)

--secondary:

oklch(0.9542 0.0042 var(--brand-hue))

--secondary-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--muted:

oklch(0.9542 0.0042 var(--brand-hue))

--muted-foreground:

oklch(0.515 0.0099 var(--brand-hue))

--accent:

oklch(0.9463 0.0048 var(--brand-hue))

--accent-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--border:

oklch(0.9319 0.0052 var(--brand-hue))

--input:

oklch(0.9319 0.0052 var(--brand-hue))

--switch-track:

oklch(0.885 0.006 95)

--ring:

var(--selected)

--info:

oklch(0.623 0.188 259.8)

--info-foreground:

oklch(1 0 0)

--selected:

oklch(0.62 0.17 var(--brand-hue))

--selected-foreground:

oklch(1 0 0)

--selected-ink:

color-mix(in oklab, var(--selected) 65%, var(--foreground))

--success:

oklch(0.6271 0.1699 149.2)

--success-foreground:

oklch(1 0 0)

--warning:

oklch(0.7686 0.1647 70.08)

--warning-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--warning-ink:

oklch(0.2404 0.0055 var(--brand-hue))

--destructive:

oklch(0.5771 0.2152 27.33)

--success-ink:

oklch(0.48 0.1699 149.2)

--destructive-ink:

oklch(0.465 0.2152 27.33)

--info-ink:

oklch(0.495 0.188 259.8)

--chart-1:

oklch(0.6056 0.2189 292.7)

--chart-2:

oklch(0.7176 0.1767 349.8)

--chart-3:

oklch(0.7505 0.1791 55.9)

--chart-4:

oklch(0.7137 0.1434 254.6)

--chart-5:

oklch(0.777 0.1521 181.9)

--radius:

1rem

--sidebar:

oklch(1 0 0)

--sidebar-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--sidebar-primary:

oklch(0.9192 0.2125 120.78)

--sidebar-primary-foreground:

oklch(0.3241 0.0723 125.5)

--sidebar-accent:

oklch(0.9542 0.0042 var(--brand-hue))

--sidebar-accent-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--sidebar-border:

oklch(0.9319 0.0052 var(--brand-hue))

--sidebar-ring:

var(--selected)

--code-text:

#24292e

--code-punc:

#24292e

--code-comment:

#6a737d

--code-kw:

#d73a49

--code-comp:

#6f42c1

--code-fn:

#6f42c1

--code-attr:

#6f42c1

--code-tag:

#22863a

--code-key:

#005cc5

--code-num:

#005cc5

--code-str:

#032f62

--code-gutter:

#b6bac0

oklch(0.2404 0.008 var(--brand-hue))

--paper-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--inverse:

oklch(0.9702 0.0027 var(--brand-hue))

--inverse-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--inverse-muted:

oklch(0.6118 0.0099 var(--brand-hue))

--surface:

oklch(0.205 0.004 var(--brand-hue))

--surface-card:

oklch(0.248 0.005 var(--brand-hue))

--surface-card-border:

oklch(1 0 0 / 8%)

--primary:

oklch(0.9192 0.2125 120.78)

--primary-foreground:

oklch(0.3241 0.0723 125.5)

--secondary:

oklch(0.2686 0.0072 var(--brand-hue))

--secondary-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--muted:

oklch(0.2686 0.0072 var(--brand-hue))

--muted-foreground:

oklch(0.715 0.0088 var(--brand-hue))

--accent:

oklch(0.2904 0.0072 var(--brand-hue))

--accent-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--border:

oklch(1 0 0 / 10%)

--input:

oklch(1 0 0 / 12%)

--ring:

var(--selected)

--info:

oklch(0.623 0.188 259.8)

--info-foreground:

oklch(1 0 0)

--selected:

oklch(0.64 0.17 var(--brand-hue))

--selected-foreground:

oklch(1 0 0)

--selected-ink:

color-mix(in oklab, var(--selected) 65%, var(--foreground))

--success:

oklch(0.6271 0.1699 149.2)

--success-foreground:

oklch(1 0 0)

--warning:

oklch(0.7686 0.1647 70.08)

--warning-foreground:

oklch(0.2404 0.0055 var(--brand-hue))

--warning-ink:

oklch(0.7686 0.1647 70.08)

--destructive:

oklch(0.704 0.1911 22.2)

--success-ink:

oklch(0.68 0.1699 149.2)

--destructive-ink:

oklch(0.81 0.1911 22.2)

--info-ink:

oklch(0.73 0.188 259.8)

--chart-1:

oklch(0.6056 0.2189 292.7)

--chart-2:

oklch(0.7176 0.1767 349.8)

--chart-3:

oklch(0.7505 0.1791 55.9)

--chart-4:

oklch(0.7137 0.1434 254.6)

--chart-5:

oklch(0.777 0.1521 181.9)

--sidebar:

oklch(0.2404 0.0055 var(--brand-hue))

--sidebar-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--sidebar-primary:

oklch(0.9192 0.2125 120.78)

--sidebar-primary-foreground:

oklch(0.3241 0.0723 125.5)

--sidebar-accent:

oklch(0.2686 0.0072 var(--brand-hue))

--sidebar-accent-foreground:

oklch(0.9702 0.0027 var(--brand-hue))

--sidebar-border:

oklch(1 0 0 / 10%)

--sidebar-ring:

var(--selected)

--ease-spring-swap:

var(--ease-spring-swap)

--ease-spring-weighted:

var(--ease-spring-weighted)

--ease-spring-overshoot:

var(--ease-spring-overshoot)

--ease-spring-bouncy:

var(--ease-spring-bouncy)

--ease-spring-release:

var(--ease-spring-release)

--ease-spring-editorial:

var(--ease-spring-editorial)

--ease-spring:

var(--ease-spring)

--animate-shake:

shake 450ms var(--ease-out-expo)

--animate-nudge:

nudge 600ms var(--ease-out-expo)

--animate-pulse-ring:

pulse-ring 1600ms var(--ease-in-out-circ) infinite

--animate-shimmer:

shimmer 2500ms linear infinite

--animate-ripple:

ripple 1600ms var(--ease-out-expo)

--animate-travel:

travel-bounce var(--duration-travel) var(--ease-out-back), travel-squish var(--duration-travel) var(--ease-in-out-circ)

--animate-travel-slide:

travel-slide var(--duration-travel) var(--ease-out-back), travel-slide-squish var(--duration-travel) var(--ease-in-out-circ)

--font-heading:

var(--font-sans)

--font-sans:

'Geist Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

--font-mono:

'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace

--color-sidebar-ring:

var(--sidebar-ring)

--color-sidebar-border:

var(--sidebar-border)

--color-sidebar-accent-foreground:

var(--sidebar-accent-foreground)

--color-sidebar-accent:

var(--sidebar-accent)

--color-sidebar-primary-foreground:

var(--sidebar-primary-foreground)

--color-sidebar-primary:

var(--sidebar-primary)

--color-sidebar-foreground:

var(--sidebar-foreground)

--color-sidebar:

var(--sidebar)

--color-chart-5:

var(--chart-5)

--color-chart-4:

var(--chart-4)

--color-chart-3:

var(--chart-3)

--color-chart-2:

var(--chart-2)

--color-chart-1:

var(--chart-1)

--color-ring:

var(--ring)

--color-input:

var(--input)

--color-border:

var(--border)

--color-destructive:

var(--destructive)

--color-destructive-ink:

var(--destructive-ink)

--color-accent-foreground:

var(--accent-foreground)

--color-accent:

var(--accent)

--color-muted-foreground:

var(--muted-foreground)

--color-muted:

var(--muted)

--color-secondary-foreground:

var(--secondary-foreground)

--color-secondary:

var(--secondary)

--color-primary-foreground:

var(--primary-foreground)

--color-primary:

var(--primary)

--color-popover-foreground:

var(--popover-foreground)

--color-popover:

var(--popover)

--color-card-foreground:

var(--card-foreground)

--color-card:

var(--card)

--color-foreground:

var(--foreground)

--color-background:

var(--background)

--color-info:

var(--info)

--color-info-foreground:

var(--info-foreground)

--color-info-ink:

var(--info-ink)

--color-selected:

var(--selected)

--color-selected-foreground:

var(--selected-foreground)

--color-selected-ink:

var(--selected-ink)

--color-switch-track:

var(--switch-track)

--color-success:

var(--success)

--color-success-foreground:

var(--success-foreground)

--color-success-ink:

var(--success-ink)

--color-warning:

var(--warning)

--color-warning-foreground:

var(--warning-foreground)

--color-warning-ink:

var(--warning-ink)

--color-paper:

var(--paper)

--color-paper-foreground:

var(--paper-foreground)

--color-inverse:

var(--inverse)

--color-inverse-foreground:

var(--inverse-foreground)

--color-inverse-muted:

var(--inverse-muted)

--radius-sm:

calc(var(--radius) * 0.6)

--radius-md:

calc(var(--radius) * 0.8)

--radius-lg:

var(--radius)

--radius-xl:

calc(var(--radius) * 1.4)

--radius-2xl:

calc(var(--radius) * 1.8)

--radius-3xl:

calc(var(--radius) * 2.2)

--radius-4xl:

calc(var(--radius) * 2.6)

--radius-box-16:

0.3rem

--radius-box-20:

0.375rem

--radius-box-24:

0.4375rem

--radius-box-28:

0.5625rem

--radius-box-32:

0.625rem

--radius-box-36:

0.6875rem

--radius-box-40:

0.8125rem

--radius-box-44:

0.9375rem

--radius-box-48:

0.875rem

--radius-box-56:

1rem

--radius-box-64:

1.1875rem

--shadow-hairline:

0 1px 2px oklch(0.216 0.006 56 / 0.04), 0 1px 3px -1px oklch(0.216 0.006 56 / 0.03)

--shadow-xs:

0 1px 2px oklch(0.216 0.006 56 / 0.05), 0 2px 4px -1px oklch(0.216 0.006 56 / 0.06)

--shadow-soft:

0 1px 3px oklch(0.216 0.006 56 / 0.035), 0 6px 16px -4px oklch(0.216 0.006 56 / 0.05)

--shadow-tile:

0 1px 2px oklch(0.216 0.006 56 / 0.05), 0 3px 10px -2px oklch(0.216 0.006 56 / 0.06)

--shadow-card:

0 1px 2px oklch(0.216 0.006 56 / 0.03), 0 10px 30px -8px oklch(0.216 0.006 56 / 0.07)

--shadow-float:

0 4px 12px oklch(0.216 0.006 56 / 0.06), 0 24px 60px -16px oklch(0.216 0.006 56 / 0.28)

--color-surface:

var(--surface)

--color-surface-card:

var(--surface-card)

--color-surface-card-border:

var(--surface-card-border)

--shadow-surface-card:

0 1px 2px 0 oklch(0.216 0.006 56 / 0.05)

--text-micro:

var(--text-micro)

--text-caption-sm:

var(--text-caption-sm)

--text-caption:

var(--text-caption)

--text-body-sm:

var(--text-body-sm)

--text-body:

var(--text-body)

--text-body-md:

var(--text-body-md)

--text-body-lg:

var(--text-body-lg)

--text-lead:

var(--text-lead)

--tracking-snug:

var(--tracking-snug)

--tracking-title:

var(--tracking-title)