{"$schema":"https://ui.shadcn.com/schema/registry.json","name":"chewypixel","homepage":"https://chewypixel.io/components","items":[{"name":"segmented-control","type":"registry:ui","title":"Segmented Control","description":"Mutually exclusive options with a highlight that slides to the selected one.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/segmented-control.tsx","type":"registry:ui"}]},{"name":"tabs","type":"registry:ui","title":"Tabs","description":"Underline tabs. The underline slides to the active tab and resizes to fit its label.","dependencies":["@radix-ui/react-tabs@^1.1.21","motion@^14.0.0"],"files":[{"path":"components/ui/tabs.tsx","type":"registry:ui"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}]},{"name":"switch","type":"registry:ui","title":"Switch","description":"A switch whose thumb springs across when toggled and stretches while pressed.","dependencies":["@radix-ui/react-switch@^1.3.7","motion@^14.0.0"],"files":[{"path":"components/ui/switch.tsx","type":"registry:ui"}]},{"name":"checkbox","type":"registry:ui","title":"Checkbox","description":"A checkbox that draws its check mark and squishes when pressed.","dependencies":["@radix-ui/react-checkbox@^1.3.11","motion@^14.0.0"],"files":[{"path":"components/ui/checkbox.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}]},{"name":"status","type":"registry:ui","title":"Status","description":"A colored dot and a label for showing state, with an optional pulse.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/status.tsx","type":"registry:ui"}],"cssVars":{"theme":{"color-status-success":"var(--status-success)","color-status-success-text":"var(--status-success-text)","color-status-warning":"var(--status-warning)","color-status-warning-text":"var(--status-warning-text)","color-status-info":"var(--status-info)","color-status-info-text":"var(--status-info-text)","color-status-danger":"var(--status-danger)","color-status-danger-text":"var(--status-danger-text)","color-status-neutral":"var(--status-neutral)"},"light":{"status-success":"oklch(0.66 0.13 172)","status-success-text":"oklch(0.55 0.11 172)","status-warning":"oklch(0.74 0.16 70)","status-warning-text":"oklch(0.56 0.14 58)","status-info":"oklch(0.6 0.2 266)","status-info-text":"oklch(0.5 0.21 266)","status-danger":"oklch(0.64 0.21 22)","status-danger-text":"oklch(0.56 0.2 24)","status-neutral":"oklch(0.72 0.025 280)"},"dark":{"status-success":"oklch(0.72 0.155 162)","status-success-text":"oklch(0.8 0.14 165)","status-warning":"oklch(0.79 0.16 75)","status-warning-text":"oklch(0.84 0.14 80)","status-info":"oklch(0.64 0.19 258)","status-info-text":"oklch(0.76 0.12 255)","status-danger":"oklch(0.65 0.21 22)","status-danger-text":"oklch(0.74 0.155 22)","status-neutral":"oklch(0.6 0.014 270)"}}},{"name":"animated-number","type":"registry:ui","title":"Animated Number","description":"A number that counts to its new value when it changes.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/animated-number.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}]},{"name":"radio-group","type":"registry:ui","title":"Radio Group","description":"Radio buttons that squish when pressed, with a dot that springs in when picked.","dependencies":["@radix-ui/react-radio-group@^1.4.7","motion@^14.0.0"],"files":[{"path":"components/ui/radio-group.tsx","type":"registry:ui"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}]},{"name":"tooltip","type":"registry:ui","title":"Tooltip","description":"A tooltip on a frosted panel that scales in from its trigger and fades out when you move away.","dependencies":["@radix-ui/react-tooltip@^1.2.16","motion@^14.0.0"],"files":[{"path":"components/ui/tooltip.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"dialog","type":"registry:ui","title":"Dialog","description":"A dialog that springs up over a light overlay and animates out before it closes.","dependencies":["@radix-ui/react-dialog@^1.1.23","@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/dialog.tsx","type":"registry:ui"},{"path":"components/ui/close-button.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"sheet","type":"registry:ui","title":"Sheet","description":"A side panel that slides in from any edge of the screen over a light overlay.","dependencies":["@radix-ui/react-dialog@^1.1.23","@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/sheet.tsx","type":"registry:ui"},{"path":"components/ui/close-button.tsx","type":"registry:ui"},{"path":"components/ui/dialog.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"dropdown-menu","type":"registry:ui","title":"Dropdown Menu","description":"A frosted menu that scales out of its trigger and animates out when it closes.","dependencies":["@radix-ui/react-dropdown-menu@^2.1.24","@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/dropdown-menu.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"command","type":"registry:ui","title":"Command","description":"A command palette whose highlight glides between results as you move through them.","dependencies":["@radix-ui/react-dialog@^1.1.23","@untitledui/icons@^0.0.23","cmdk@^1.1.1","motion@^14.0.0"],"files":[{"path":"components/ui/command.tsx","type":"registry:ui"},{"path":"components/ui/dialog.tsx","type":"registry:ui"},{"path":"components/ui/kbd.tsx","type":"registry:ui"},{"path":"components/ui/close-button.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility eyebrow":{"font-size":"11px","font-weight":"600","letter-spacing":"0.05em","text-transform":"uppercase"},"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"collapsible","type":"registry:ui","title":"Collapsible","description":"A section that opens and closes by animating its height.","dependencies":["@radix-ui/react-collapsible@^1.1.20","motion@^14.0.0"],"files":[{"path":"components/ui/collapsible.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}]},{"name":"image-lightbox","type":"registry:ui","title":"Image Lightbox","description":"A thumbnail that flies out to a larger view in the middle of the screen, over a lightly blurred page.","dependencies":["@radix-ui/react-dialog@^1.1.23","@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/image-lightbox.tsx","type":"registry:ui"},{"path":"components/ui/close-button.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"select","type":"registry:ui","title":"Select","description":"A select whose list pops open on a frosted panel, with a soft halo on the trigger while it's open.","dependencies":["@radix-ui/react-select@^2.3.7","@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/select.tsx","type":"registry:ui"},{"path":"lib/field.ts","type":"registry:lib"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility field-halo":{"border-color":"color-mix(in oklab, var(--foreground) 40%, transparent)","box-shadow":"0 0 0 3px color-mix(in oklab, var(--foreground) 9%, transparent)"},"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"popover","type":"registry:ui","title":"Popover","description":"A frosted panel that scales in from its trigger and animates out before it closes.","dependencies":["@radix-ui/react-popover@^1.1.23","motion@^14.0.0"],"files":[{"path":"components/ui/popover.tsx","type":"registry:ui"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"date-picker","type":"registry:ui","title":"Date Picker","description":"A date field that opens a calendar. Months slide in the direction you page, and arrow keys move between days.","dependencies":["@radix-ui/react-popover@^1.1.23","@radix-ui/react-slot@^1.3.3","@untitledui/icons@^0.0.23","class-variance-authority@^0.7.1","dayjs@^1.11.23","motion@^14.0.0"],"files":[{"path":"components/ui/calendar.tsx","type":"registry:ui"},{"path":"components/ui/button.tsx","type":"registry:ui"},{"path":"components/ui/popover.tsx","type":"registry:ui"},{"path":"lib/field.ts","type":"registry:lib"},{"path":"lib/motion.ts","type":"registry:lib"},{"path":"hooks/use-controllable-state.ts","type":"registry:hook"}],"cssVars":{"theme":{"shadow-float":"0 16px 36px -12px oklch(0 0 0 / 0.2), 0 2px 6px -2px oklch(0 0 0 / 0.08)"}},"css":{"@utility field-halo":{"border-color":"color-mix(in oklab, var(--foreground) 40%, transparent)","box-shadow":"0 0 0 3px color-mix(in oklab, var(--foreground) 9%, transparent)"},"@utility eyebrow":{"font-size":"11px","font-weight":"600","letter-spacing":"0.05em","text-transform":"uppercase"},"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}},{"name":"password-input","type":"registry:ui","title":"Password Input","description":"A password field with a button that shows or hides what you typed. The eye icon swaps with a quick pop.","dependencies":["@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/password-input.tsx","type":"registry:ui"},{"path":"components/ui/input.tsx","type":"registry:ui"},{"path":"lib/field.ts","type":"registry:lib"}],"css":{"@utility field-halo":{"border-color":"color-mix(in oklab, var(--foreground) 40%, transparent)","box-shadow":"0 0 0 3px color-mix(in oklab, var(--foreground) 9%, transparent)"},"@utility field-halo-invalid":{"box-shadow":"0 0 0 3px color-mix(in oklab, var(--destructive) 18%, transparent)"}}},{"name":"code-input","type":"registry:ui","title":"Code Input","description":"One box per digit for verification codes, with a blinking caret in the next box. Pasting a code and autofill from SMS both work.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/code-input.tsx","type":"registry:ui"},{"path":"lib/field.ts","type":"registry:lib"}],"css":{"@utility field-halo":{"border-color":"color-mix(in oklab, var(--foreground) 40%, transparent)","box-shadow":"0 0 0 3px color-mix(in oklab, var(--foreground) 9%, transparent)"}}},{"name":"copy-button","type":"registry:ui","title":"Copy Button","description":"An icon button that copies text. The copy icon pops into a check, then back.","dependencies":["@radix-ui/react-slot@^1.3.3","@untitledui/icons@^0.0.23","class-variance-authority@^0.7.1","motion@^14.0.0"],"files":[{"path":"components/ui/copy-button.tsx","type":"registry:ui"},{"path":"components/ui/button.tsx","type":"registry:ui"}]},{"name":"shimmer","type":"registry:ui","title":"Shimmer","description":"Text with a band of light sweeping across it, for loading and thinking states.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/shimmer.tsx","type":"registry:ui"}]},{"name":"status-graphic","type":"registry:ui","title":"Status Graphic","description":"Illustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.","dependencies":["@untitledui/icons@^0.0.23","motion@^14.0.0"],"files":[{"path":"components/ui/status-graphic.tsx","type":"registry:ui"}]},{"name":"avatar-group","type":"registry:ui","title":"Avatar Group","description":"Overlapping avatars with a +N count once there are more than fit.","dependencies":[],"files":[{"path":"components/ui/avatar-group.tsx","type":"registry:ui"}]},{"name":"typing-indicator","type":"registry:ui","title":"Typing Indicator","description":"Three dots that bob in turn while someone is typing.","dependencies":["motion@^14.0.0"],"files":[{"path":"components/ui/typing-indicator.tsx","type":"registry:ui"}]},{"name":"emoji-picker","type":"registry:ui","title":"Emoji Picker","description":"A searchable emoji picker with categories and a preview of the emoji you're on.","dependencies":["@untitledui/icons@^0.0.23","frimousse@^0.4.0"],"files":[{"path":"components/ui/emoji-picker.tsx","type":"registry:ui"}],"css":{"@utility eyebrow":{"font-size":"11px","font-weight":"600","letter-spacing":"0.05em","text-transform":"uppercase"},"@utility frosted":{"background-color":"color-mix(in oklab, var(--popover) 65%, transparent)","backdrop-filter":"blur(20px) saturate(1.6)"}}}]}