[{"slug":"dashboard-01","title":"Analytics dashboard","category":"Workspaces","description":"An app shell with a sidebar, stat cards and a chart.","free":false,"thumbnail":"previews/dashboard-01.jpeg","featured":0},{"slug":"chart-area-interactive","title":"Interactive area chart","category":"Data","description":"Compare trends across a selectable time range.","free":false,"thumbnail":"previews/chart-area-interactive.jpeg","featured":1},{"slug":"contribution-graph","title":"Activity heatmap","category":"Data","description":"Show activity patterns across a calendar grid.","free":true,"thumbnail":"previews/kibo--contribution-graph.jpeg","featured":2},{"slug":"chart-bar-interactive","title":"Interactive bar chart","category":"Data","description":"Switch between two series on a dense bar chart.","free":false,"thumbnail":"previews/chart-bar-interactive.jpeg","featured":3},{"slug":"table","title":"Data table","category":"Data","description":"Rows of records with aligned columns and a total.","free":false,"thumbnail":"previews/table.jpeg","featured":4},{"slug":"login-03","title":"Sign-in screen","category":"Forms","description":"A centered sign-in card with social options.","free":false,"thumbnail":"previews/login-03.jpeg","featured":5},{"slug":"chart-pie-donut-text","title":"Donut chart with total","category":"Data","description":"A donut chart with the headline number in the middle.","free":false,"thumbnail":"previews/chart-pie-donut-text.jpeg","featured":6},{"slug":"chart-line-interactive","title":"Interactive line chart","category":"Data","description":"Switch between two series on a line chart.","free":false,"thumbnail":"previews/chart-line-interactive.jpeg","featured":7},{"slug":"kanban","title":"Kanban workspace","category":"Workspaces","description":"A board for moving work between stages.","free":false,"thumbnail":"previews/kibo--kanban.jpeg","featured":8},{"slug":"gantt","title":"Project timeline","category":"Workspaces","description":"Plan work across a shared timeline.","free":false,"thumbnail":"previews/kibo--gantt.jpeg","featured":9},{"slug":"command","title":"Command palette","category":"Navigation","description":"Search and select a command from the keyboard.","free":true,"thumbnail":"previews/command.jpeg","featured":10},{"slug":"editor","title":"Rich text editor","category":"Forms","description":"Compose and format content inline.","free":false,"thumbnail":"previews/kibo--editor.jpeg","featured":11},{"slug":"color-picker","title":"Color picker","category":"Forms","description":"Choose and enter a precise color.","free":false,"thumbnail":"previews/kibo--color-picker.jpeg","featured":12},{"slug":"sidebar-07","title":"App sidebar","category":"Navigation","description":"A collapsible sidebar with grouped navigation.","free":false,"thumbnail":"previews/sidebar-07.jpeg","featured":13},{"slug":"code-block","title":"Code block","category":"Utilities","description":"Show source code with a file header and copy action.","free":false,"thumbnail":"previews/kibo--code-block.jpeg","featured":14},{"slug":"calendar","title":"Calendar","category":"Forms","description":"Pick a date from a month view.","free":false,"thumbnail":"previews/calendar.jpeg","featured":15,"focus":[0.13,0.25,1.46]},{"slug":"image-comparison","title":"Image comparison","category":"Media","description":"Drag to compare two images.","free":false,"thumbnail":"previews/motion--image-comparison.jpeg","featured":16},{"slug":"tree","title":"File tree","category":"Data","description":"Browse nested folders and files.","free":false,"thumbnail":"previews/kibo--tree.jpeg","featured":17},{"slug":"veil-pricing-2","title":"Usage-based pricing","category":"Sections","description":"Present four usage tiers with request allowances, pricing, and overage terms.","free":false,"thumbnail":"previews/tailark--veil-pricing-2.jpeg","featured":null},{"slug":"veil-faqs-2","title":"Split FAQ accordion","category":"Sections","description":"Keep a contact link alongside a keyboard-accessible list of common questions.","free":false,"thumbnail":"previews/tailark--veil-faqs-2.jpeg","featured":null},{"slug":"veil-comparator-2","title":"Free vs. Pro comparison","category":"Sections","description":"Compare plan features side by side and give each plan its own action.","free":false,"thumbnail":"previews/tailark--veil-comparator-2.jpeg","featured":null},{"slug":"dusk-footer-1","title":"Newsletter footer","category":"Sections","description":"Group product, company, and legal links alongside an email signup form.","free":false,"thumbnail":"previews/tailark--dusk-footer-1.jpeg","featured":null},{"slug":"marketing-hero-analytics","title":"Marketing Hero Analytics","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--marketing-hero-analytics.jpeg","featured":null},{"slug":"marketing-feature-code","title":"Marketing Feature Code","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--marketing-feature-code.jpeg","featured":null},{"slug":"feature-sticky-section","title":"Feature Sticky Section","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--feature-sticky-section.jpeg","featured":null},{"slug":"tilt","title":"3D tilt","category":"Motion","description":"Tilt a card in response to the pointer.","free":false,"thumbnail":"previews/motion--tilt.jpeg","featured":null},{"slug":"animated-beam","title":"Animated connection beam","category":"Motion","description":"Animate a connector between elements.","free":false,"thumbnail":"previews/magic--animated-beam.jpeg","featured":null},{"slug":"spotlight","title":"Pointer spotlight","category":"Motion","description":"Move a soft highlight with the pointer.","free":false,"thumbnail":"previews/motion--spotlight.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"blur-fade","title":"Blur reveal","category":"Motion","description":"Reveal content with a short blur and fade.","free":false,"thumbnail":"previews/magic--blur-fade.jpeg","featured":null},{"slug":"workspace-billing-overview","title":"Workspace billing overview","category":"Sections","description":"An account billing section with an itemized current cycle and payment method management.","free":false,"thumbnail":"previews/tremor--workspace-billing-overview.jpeg","featured":null},{"slug":"billing-forecast-chart","title":"Billing forecast chart","category":"Data","description":"Show actual and forecasted spend next to invoice details and a billing period selector.","free":false,"thumbnail":"previews/tremor--billing-forecast-chart.jpeg","featured":null},{"slug":"token-usage-kpis","title":"Token usage KPI cards","category":"Data","description":"Compare prompt and completion token usage across models with a set of progress-bar KPI cards.","free":false,"thumbnail":"previews/tremor--token-usage-kpis.jpeg","featured":null},{"slug":"halftone-background","title":"Halftone Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--halftone-background.jpeg","featured":null},{"slug":"lightbox-grid","title":"Lightbox Grid","category":"Layout","description":"","free":false,"thumbnail":"previews/kokonut--lightbox-grid.jpeg","featured":null},{"slug":"dither-image","title":"Dither Image","category":"Media","description":"","free":false,"thumbnail":"previews/cult--dither-image.jpeg","featured":null},{"slug":"dither-field","title":"Dither Field","category":"Forms","description":"","free":false,"thumbnail":"previews/magic--dither-field.jpeg","featured":null},{"slug":"striped-pattern","title":"Striped Pattern","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--striped-pattern.jpeg","featured":null},{"slug":"contact-sheet","title":"Contact Sheet","category":"Overlays","description":"","free":false,"thumbnail":"previews/kokonut--contact-sheet.jpeg","featured":null},{"slug":"rain-glass-background","title":"Rain Glass Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--rain-glass-background.jpeg","featured":null},{"slug":"background-paths","title":"Background Paths","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--background-paths.jpeg","featured":null},{"slug":"photo-straighten","title":"Photo Straighten","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--photo-straighten.jpeg","featured":null},{"slug":"animated-group","title":"Animated Group","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--animated-group.jpeg","featured":null},{"slug":"dot-field","title":"Dot Field","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--dot-field.jpeg","featured":null},{"slug":"flickering-grid","title":"Flickering Grid","category":"Layout","description":"","free":false,"thumbnail":"previews/magic--flickering-grid.jpeg","featured":null},{"slug":"hero-dithering","title":"Hero Dithering","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--hero-dithering.jpeg","featured":null},{"slug":"shape-hero","title":"Shape Hero","category":"Sections","description":"","free":false,"thumbnail":"previews/kokonut--shape-hero.jpeg","featured":null},{"slug":"pixel-image","title":"Pixel Image","category":"Media","description":"","free":false,"thumbnail":"previews/magic--pixel-image.jpeg","featured":null},{"slug":"texture-overlay","title":"Texture Overlay","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--texture-overlay.jpeg","featured":null},{"slug":"topo-background","title":"Topo Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--topo-background.jpeg","featured":null},{"slug":"backlight","title":"Backlight","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--backlight.jpeg","featured":null},{"slug":"organic-card","title":"Organic Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--organic-card.jpeg","featured":null},{"slug":"lightboard","title":"Lightboard","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--lightboard.jpeg","featured":null},{"slug":"hero-static-radial-gradient","title":"Hero Static Radial Gradient","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--hero-static-radial-gradient.jpeg","featured":null},{"slug":"tweet-grid","title":"Tweet Grid","category":"Layout","description":"","free":false,"thumbnail":"previews/cult--tweet-grid.jpeg","featured":null},{"slug":"edge-blur","title":"Edge Blur","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--edge-blur.jpeg","featured":null},{"slug":"focal-point-picker","title":"Focal Point Picker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--focal-point-picker.jpeg","featured":null},{"slug":"uptime-card","title":"Uptime Card","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--uptime-card.jpeg","featured":null},{"slug":"hero-video-dialog","title":"Hero Video Dialog","category":"Overlays","description":"","free":false,"thumbnail":"previews/magic--hero-video-dialog.jpeg","featured":null},{"slug":"organic-card-small","title":"Organic Card Small","category":"Media","description":"","free":false,"thumbnail":"previews/cult--organic-card-small.jpeg","featured":null},{"slug":"tweet-card","title":"Tweet Card","category":"Media","description":"","free":false,"thumbnail":"previews/magic--tweet-card.jpeg","featured":null},{"slug":"code-comparison","title":"Code Comparison","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--code-comparison.jpeg","featured":null},{"slug":"p-scroll-area-3","title":"Scroll area with both directions","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-scroll-area-3.jpeg","featured":null},{"slug":"caustics-background","title":"Caustics Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--caustics-background.jpeg","featured":null},{"slug":"flow-field","title":"Wind","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--flow-field.jpeg","featured":null},{"slug":"terminal-animation","title":"Terminal Animation","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--terminal-animation.jpeg","featured":null},{"slug":"family-drawer","title":"Family Drawer","category":"Overlays","description":"","free":false,"thumbnail":"previews/cult--family-drawer.jpeg","featured":null},{"slug":"ai-citations","title":"AI Inline Citations","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-citations.jpeg","featured":null},{"slug":"clip-trimmer","title":"Clip Trimmer","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--clip-trimmer.jpeg","featured":null},{"slug":"lens","title":"Lens","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--lens.jpeg","featured":null},{"slug":"scroll-index","title":"Scroll Index","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--scroll-index.jpeg","featured":null},{"slug":"illustration-card-grid","title":"Illustration Card Grid","category":"Media","description":"","free":false,"thumbnail":"previews/cult--illustration-card-grid.jpeg","featured":null},{"slug":"halo-card","title":"Halo Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--halo-card.jpeg","featured":null},{"slug":"ai-inline-edit","title":"AI Inline Edit","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-inline-edit.jpeg","featured":null},{"slug":"accordion","title":"Accordion","category":"Layout","description":"Expand one section at a time.","free":true,"thumbnail":"previews/accordion.jpeg","featured":null},{"slug":"noise-texture","title":"Noise Texture","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--noise-texture.jpeg","featured":null},{"slug":"minimal-card","title":"Minimal Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--minimal-card.jpeg","featured":null},{"slug":"glyph-matrix","title":"Glyph Matrix","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--glyph-matrix.jpeg","featured":null},{"slug":"border-beam-card","title":"Border Beam Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--border-beam-card.jpeg","featured":null},{"slug":"metal-button","title":"Metal Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--metal-button.jpeg","featured":null},{"slug":"timezone-planner","title":"Time Zone Planner","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--timezone-planner.jpeg","featured":null},{"slug":"p-table-6","title":"CardFrame with TanStack Table and checkboxes","category":"Data","description":"","free":false,"thumbnail":"previews/coss--p-table-6.jpeg","featured":null},{"slug":"list","title":"list","category":"Data","description":"","free":false,"thumbnail":"previews/kibo--list.jpeg","featured":null},{"slug":"p-table-7","title":"CardFrame with card-style table","category":"Data","description":"","free":false,"thumbnail":"previews/coss--p-table-7.jpeg","featured":null},{"slug":"p-table-1","title":"Basic table","category":"Data","description":"","free":false,"thumbnail":"previews/coss--p-table-1.jpeg","featured":null},{"slug":"border-beam-input","title":"Border Beam Input","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--border-beam-input.jpeg","featured":null},{"slug":"p-table-2","title":"Frame with card-style table","category":"Data","description":"","free":false,"thumbnail":"previews/coss--p-table-2.jpeg","featured":null},{"slug":"alert","title":"Alert","category":"Feedback","description":"","free":false,"thumbnail":"previews/alert.jpeg","featured":null,"focus":[0.21,0.25,1.46]},{"slug":"apple-keyboard","title":"Apple Keyboard","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--apple-keyboard.jpeg","featured":null},{"slug":"intro-disclosure","title":"Intro Disclosure","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--intro-disclosure.jpeg","featured":null},{"slug":"p-table-5","title":"Card-style table variant","category":"Data","description":"","free":false,"thumbnail":"previews/coss--p-table-5.jpeg","featured":null},{"slug":"border-beam-button","title":"Border Beam Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--border-beam-button.jpeg","featured":null},{"slug":"field","title":"Field","category":"Forms","description":"","free":false,"thumbnail":"previews/field.jpeg","featured":null},{"slug":"pixel-paragraph-words","title":"Pixel Paragraph Words","category":"Data","description":"","free":false,"thumbnail":"previews/cult--pixel-paragraph-words.jpeg","featured":null},{"slug":"vote-tally","title":"Vote Tally","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--vote-tally.jpeg","featured":null},{"slug":"pixel-paragraph-words-inverse","title":"Pixel Paragraph Words Inverse","category":"Data","description":"","free":false,"thumbnail":"previews/cult--pixel-paragraph-words-inverse.jpeg","featured":null},{"slug":"svg-shapes","title":"Svg Shapes","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--svg-shapes.jpeg","featured":null},{"slug":"dotted-map","title":"Dotted Map","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--dotted-map.jpeg","featured":null},{"slug":"ai-send","title":"AI Send","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-send.jpeg","featured":null},{"slug":"ai-redact","title":"AI Redact","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-redact.jpeg","featured":null},{"slug":"grid-beam","title":"Grid Beam","category":"Layout","description":"","free":false,"thumbnail":"previews/cult--grid-beam.jpeg","featured":null},{"slug":"ai-branches","title":"AI Conversation Branches","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-branches.jpeg","featured":null},{"slug":"floating-3d-particles","title":"Floating 3D Particles","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--floating-3d-particles.jpeg","featured":null},{"slug":"warp-background","title":"Warp Background","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--warp-background.jpeg","featured":null},{"slug":"chart-bar-label-custom","title":"Chart Bar Label Custom","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-label-custom.jpeg","featured":null},{"slug":"navigation-menu","title":"Navigation Menu","category":"Navigation","description":"","free":false,"thumbnail":"previews/navigation-menu.jpeg","featured":null},{"slug":"spoiler-text","title":"Spoiler Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--spoiler-text.jpeg","featured":null},{"slug":"svg-bands","title":"Svg Bands","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--svg-bands.jpeg","featured":null},{"slug":"hero-heatmap","title":"Hero Heatmap","category":"Data","description":"","free":false,"thumbnail":"previews/cult--hero-heatmap.jpeg","featured":null},{"slug":"feature-voting","title":"Feature Voting","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--feature-voting.jpeg","featured":null},{"slug":"ai-handoff","title":"AI Handoff","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-handoff.jpeg","featured":null},{"slug":"gradient-heading","title":"Gradient Heading","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--gradient-heading.jpeg","featured":null},{"slug":"bg-image-texture","title":"Bg Image Texture","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--bg-image-texture.jpeg","featured":null},{"slug":"signup-03","title":"Signup 03","category":"Forms","description":"","free":false,"thumbnail":"previews/signup-03.jpeg","featured":null},{"slug":"svg-shapes-animated","title":"Svg Shapes Animated","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--svg-shapes-animated.jpeg","featured":null},{"slug":"fluted-glass","title":"Fluted Glass","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--fluted-glass.jpeg","featured":null},{"slug":"ai-schedule","title":"AI Schedule","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-schedule.jpeg","featured":null},{"slug":"hero-liquid-metal","title":"Hero Liquid Metal","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--hero-liquid-metal.jpeg","featured":null},{"slug":"rolling-number","title":"Rolling Number","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--rolling-number.jpeg","featured":null},{"slug":"shadow-text","title":"Shadow Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--shadow-text.jpeg","featured":null},{"slug":"halo-search","title":"Halo Search","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--halo-search.jpeg","featured":null},{"slug":"loading-carousel","title":"Loading Carousel","category":"Feedback","description":"","free":false,"thumbnail":"previews/cult--loading-carousel.jpeg","featured":null},{"slug":"youtube-video-player","title":"Youtube Video Player","category":"Media","description":"","free":false,"thumbnail":"previews/cult--youtube-video-player.jpeg","featured":null},{"slug":"pixel-heading-character","title":"Pixel Heading Character","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--pixel-heading-character.jpeg","featured":null},{"slug":"ai-checkout","title":"AI Checkout","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-checkout.jpeg","featured":null},{"slug":"marker-text","title":"Marker Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--marker-text.jpeg","featured":null},{"slug":"neumorph-button","title":"Neumorph Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--neumorph-button.jpeg","featured":null},{"slug":"retro-grid","title":"Retro Grid","category":"Layout","description":"","free":false,"thumbnail":"previews/magic--retro-grid.jpeg","featured":null},{"slug":"chart-area-stacked-expand","title":"Chart Area Stacked Expand","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-stacked-expand.jpeg","featured":null},{"slug":"checkbox","title":"Checkbox","category":"Forms","description":"Toggle individual choices with clear state.","free":true,"thumbnail":"previews/checkbox.jpeg","featured":null},{"slug":"chart-line-multiple","title":"Chart Line Multiple","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-multiple.jpeg","featured":null},{"slug":"halo-toast","title":"Halo Toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/cult--halo-toast.jpeg","featured":null},{"slug":"qr-code","title":"qr-code","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--qr-code.jpeg","featured":null},{"slug":"activity-terrain","title":"Activity Terrain","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--activity-terrain.jpeg","featured":null},{"slug":"chart-bar-multiple","title":"Chart Bar Multiple","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-multiple.jpeg","featured":null},{"slug":"slot-picker","title":"Slot Picker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--slot-picker.jpeg","featured":null},{"slug":"kanban-board","title":"Kanban Board","category":"Data","description":"","free":false,"thumbnail":"previews/cult--kanban-board.jpeg","featured":null},{"slug":"globe","title":"Globe","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--globe.jpeg","featured":null},{"slug":"chart-area-gradient","title":"Chart Area Gradient","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-gradient.jpeg","featured":null},{"slug":"chart-pie-stacked","title":"Chart Pie Stacked","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-stacked.jpeg","featured":null},{"slug":"ai-memory","title":"AI Memory","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-memory.jpeg","featured":null},{"slug":"chart-area-legend","title":"Chart Area Legend","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-legend.jpeg","featured":null},{"slug":"metric-card","title":"Metric Card","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--metric-card.jpeg","featured":null},{"slug":"ink-background","title":"Ink Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--ink-background.jpeg","featured":null},{"slug":"dialog","title":"Dialog","category":"Overlays","description":"","free":false,"thumbnail":"previews/dialog.jpeg","featured":null},{"slug":"chart-area-icons","title":"Chart Area Icons","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-icons.jpeg","featured":null},{"slug":"halo-notification","title":"Halo Notification","category":"Feedback","description":"","free":false,"thumbnail":"previews/cult--halo-notification.jpeg","featured":null},{"slug":"ai-code-run","title":"AI Code Run","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-code-run.jpeg","featured":null},{"slug":"chart-bar-active","title":"Chart Bar Active","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-active.jpeg","featured":null},{"slug":"organic-button","title":"Organic Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--organic-button.jpeg","featured":null},{"slug":"chart-bar-mixed","title":"Chart Bar Mixed","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-mixed.jpeg","featured":null},{"slug":"chart-bar-stacked","title":"Chart Bar Stacked","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-stacked.jpeg","featured":null},{"slug":"halo-progress","title":"Halo Progress","category":"Feedback","description":"","free":false,"thumbnail":"previews/cult--halo-progress.jpeg","featured":null},{"slug":"halo-badge","title":"Halo Badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/cult--halo-badge.jpeg","featured":null},{"slug":"currency-transfer","title":"Currency Transfer","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--currency-transfer.jpeg","featured":null},{"slug":"card","title":"Card","category":"Media","description":"","free":false,"thumbnail":"previews/card.jpeg","featured":null},{"slug":"marquee","title":"Marquee","category":"Media","description":"","free":false,"thumbnail":"previews/magic--marquee.jpeg","featured":null},{"slug":"shadow-card","title":"Shadow Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--shadow-card.jpeg","featured":null},{"slug":"boarding-pass","title":"Boarding Pass","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--boarding-pass.jpeg","featured":null},{"slug":"halo-select","title":"Halo Select","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--halo-select.jpeg","featured":null},{"slug":"chart-line-label-custom","title":"Chart Line Label Custom","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-label-custom.jpeg","featured":null},{"slug":"drape-background","title":"Drape Background","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--drape-background.jpeg","featured":null,"focus":[0.5,0.5,1.48]},{"slug":"feature-poll","title":"Feature Poll","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--feature-poll.jpeg","featured":null},{"slug":"chart-area-stacked","title":"Chart Area Stacked","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-stacked.jpeg","featured":null},{"slug":"chart-bar-horizontal","title":"Chart Bar Horizontal","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-horizontal.jpeg","featured":null},{"slug":"halo-field","title":"Halo Field","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--halo-field.jpeg","featured":null},{"slug":"synced-transcript","title":"Synced Transcript","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--synced-transcript.jpeg","featured":null},{"slug":"chart-pie-donut-active","title":"Chart Pie Donut Active","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-donut-active.jpeg","featured":null},{"slug":"chart-pie-separator-none","title":"Chart Pie Separator None","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-separator-none.jpeg","featured":null},{"slug":"sheet","title":"Sheet","category":"Overlays","description":"","free":false,"thumbnail":"previews/sheet.jpeg","featured":null},{"slug":"p-field-5","title":"Show field validity state","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-5.jpeg","featured":null},{"slug":"file-icons","title":"File Icons","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--file-icons.jpeg","featured":null},{"slug":"cutout-card","title":"Cutout Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--cutout-card.jpeg","featured":null},{"slug":"chart-pie-label-custom","title":"Chart Pie Label Custom","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-label-custom.jpeg","featured":null},{"slug":"wizard-expandable","title":"Wizard Expandable","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--wizard-expandable.jpeg","featured":null},{"slug":"ai-model-selector","title":"AI Model Selector","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--ai-model-selector.jpeg","featured":null},{"slug":"chart-bar-label","title":"Chart Bar Label","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-label.jpeg","featured":null},{"slug":"chart-area-axes","title":"Chart Area Axes","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-axes.jpeg","featured":null},{"slug":"pointer","title":"Pointer","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--pointer.jpeg","featured":null},{"slug":"chart-pie-donut","title":"Chart Pie Donut","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-donut.jpeg","featured":null},{"slug":"chart-line-label","title":"Chart Line Label","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-label.jpeg","featured":null},{"slug":"ai-order-status","title":"AI Order Status","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-order-status.jpeg","featured":null},{"slug":"tabs-illustration-vercel","title":"Tabs Illustration Vercel","category":"Navigation","description":"","free":false,"thumbnail":"previews/cult--tabs-illustration-vercel.jpeg","featured":null},{"slug":"chart-pie-label-list","title":"Chart Pie Label List","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-label-list.jpeg","featured":null},{"slug":"reel","title":"reel","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--reel.jpeg","featured":null},{"slug":"bento-grid","title":"Bento Grid","category":"Layout","description":"","free":false,"thumbnail":"previews/magic--bento-grid.jpeg","featured":null},{"slug":"halo-tabs","title":"Halo Tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/cult--halo-tabs.jpeg","featured":null},{"slug":"ai-connect","title":"AI Connect","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-connect.jpeg","featured":null},{"slug":"transition-panel","title":"Transition Panel","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--transition-panel.jpeg","featured":null},{"slug":"choice-poll","title":"Choice Poll","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--choice-poll.jpeg","featured":null},{"slug":"seat-map","title":"Seat Map","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--seat-map.jpeg","featured":null},{"slug":"chart-pie-interactive","title":"Chart Pie Interactive","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-interactive.jpeg","featured":null},{"slug":"timer","title":"Timer","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--timer.jpeg","featured":null},{"slug":"halo-dropzone","title":"Halo Dropzone","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--halo-dropzone.jpeg","featured":null},{"slug":"carousel-cards","title":"Momentum Rail","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--carousel-cards.jpeg","featured":null},{"slug":"chart-pie-label","title":"Chart Pie Label","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-label.jpeg","featured":null},{"slug":"alert-dialog","title":"Alert Dialog","category":"Feedback","description":"","free":false,"thumbnail":"previews/alert-dialog.jpeg","featured":null},{"slug":"chart-line-dots-custom","title":"Chart Line Dots Custom","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-dots-custom.jpeg","featured":null},{"slug":"prompt-composer","title":"Prompt Composer","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--prompt-composer.jpeg","featured":null},{"slug":"tabs","title":"Tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/tabs.jpeg","featured":null},{"slug":"location-picker","title":"Location Picker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--location-picker.jpeg","featured":null},{"slug":"chart-line-dots-colors","title":"Chart Line Dots Colors","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-dots-colors.jpeg","featured":null},{"slug":"chart-bar-negative","title":"Chart Bar Negative","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-negative.jpeg","featured":null},{"slug":"chart-pie-simple","title":"Chart Pie Simple","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-simple.jpeg","featured":null},{"slug":"poll-widget","title":"Poll Widget","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--poll-widget.jpeg","featured":null},{"slug":"light-rays","title":"Light Rays","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--light-rays.jpeg","featured":null},{"slug":"logo-carousel","title":"Logo Carousel","category":"Media","description":"","free":false,"thumbnail":"previews/cult--logo-carousel.jpeg","featured":null},{"slug":"chart-area-linear","title":"Chart Area Linear","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-linear.jpeg","featured":null},{"slug":"stay-picker","title":"Stay Picker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--stay-picker.jpeg","featured":null},{"slug":"spending-ring","title":"Spending Ring","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--spending-ring.jpeg","featured":null},{"slug":"chart-line-dots","title":"Chart Line Dots","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-dots.jpeg","featured":null},{"slug":"scroll-based-velocity","title":"Scroll Based Velocity","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--scroll-based-velocity.jpeg","featured":null},{"slug":"apple-activity-card","title":"Apple Activity Card","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--apple-activity-card.jpeg","featured":null},{"slug":"save-status","title":"Save Status","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--save-status.jpeg","featured":null},{"slug":"ai-token-alternatives","title":"AI Token Alternatives","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-token-alternatives.jpeg","featured":null},{"slug":"halo-button","title":"Halo Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--halo-button.jpeg","featured":null},{"slug":"chart-area-default","title":"Chart Area Default","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-default.jpeg","featured":null},{"slug":"chart-line-linear","title":"Chart Line Linear","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-linear.jpeg","featured":null},{"slug":"tip-selector","title":"Tip Selector","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--tip-selector.jpeg","featured":null},{"slug":"pixel-heading-word","title":"Pixel Heading Word","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--pixel-heading-word.jpeg","featured":null},{"slug":"dropdown-menu","title":"Dropdown Menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/dropdown-menu.jpeg","featured":null},{"slug":"texture-card","title":"Texture Card","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--texture-card.jpeg","featured":null},{"slug":"avatar-picker","title":"Avatar Picker","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--avatar-picker.jpeg","featured":null},{"slug":"ai-agent-lanes","title":"AI Agent Lanes","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-agent-lanes.jpeg","featured":null},{"slug":"chart-bar-default","title":"Chart Bar Default","category":"Data","description":"","free":false,"thumbnail":"previews/chart-bar-default.jpeg","featured":null},{"slug":"popover","title":"Popover","category":"Overlays","description":"","free":false,"thumbnail":"previews/popover.jpeg","featured":null,"focus":[0.17,0.24,1.49]},{"slug":"video-player","title":"video-player","category":"Media","description":"","free":false,"thumbnail":"previews/kibo--video-player.jpeg","featured":null},{"slug":"feature-carousel","title":"Feature Carousel","category":"Media","description":"","free":false,"thumbnail":"previews/cult--feature-carousel.jpeg","featured":null},{"slug":"chart-line-default","title":"Chart Line Default","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-default.jpeg","featured":null},{"slug":"chart-area-step","title":"Chart Area Step","category":"Data","description":"","free":false,"thumbnail":"previews/chart-area-step.jpeg","featured":null},{"slug":"sortable-list","title":"Sortable List","category":"Data","description":"","free":false,"thumbnail":"previews/cult--sortable-list.jpeg","featured":null},{"slug":"context-menu","title":"Context Menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/context-menu.jpeg","featured":null},{"slug":"distorted-glass","title":"Distorted Glass","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--distorted-glass.jpeg","featured":null},{"slug":"inline-alert","title":"Inline Alert","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--inline-alert.jpeg","featured":null},{"slug":"drawer","title":"Drawer","category":"Overlays","description":"","free":false,"thumbnail":"previews/drawer.jpeg","featured":null},{"slug":"hover-video-player","title":"Hover Video Player","category":"Media","description":"","free":false,"thumbnail":"previews/cult--hover-video-player.jpeg","featured":null},{"slug":"chart-pie-legend","title":"Chart Pie Legend","category":"Data","description":"","free":false,"thumbnail":"previews/chart-pie-legend.jpeg","featured":null},{"slug":"stripe-bg-guides","title":"Stripe Bg Guides","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--stripe-bg-guides.jpeg","featured":null},{"slug":"cart-button","title":"Cart Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--cart-button.jpeg","featured":null},{"slug":"ai-message-queue","title":"AI Message Queue","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-message-queue.jpeg","featured":null},{"slug":"empty","title":"Empty","category":"Feedback","description":"","free":false,"thumbnail":"previews/empty.jpeg","featured":null,"focus":[0.5,0.3,1.54]},{"slug":"pill","title":"pill","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--pill.jpeg","featured":null},{"slug":"chart-line-step","title":"Chart Line Step","category":"Data","description":"","free":false,"thumbnail":"previews/chart-line-step.jpeg","featured":null},{"slug":"glare-hover","title":"Glare Hover","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--glare-hover.jpeg","featured":null},{"slug":"text-gif","title":"Text Gif","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--text-gif.jpeg","featured":null},{"slug":"tear-button","title":"Tear Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--tear-button.jpeg","featured":null},{"slug":"collapsible","title":"Collapsible","category":"Layout","description":"","free":false,"thumbnail":"previews/collapsible.jpeg","featured":null,"focus":[0.18,0.15,2.16]},{"slug":"p-card-1","title":"A basic card with header and footer","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-card-1.jpeg","featured":null},{"slug":"ai-blob-warp","title":"Ai Blob Warp","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--ai-blob-warp.jpeg","featured":null},{"slug":"ai-context-meter","title":"AI Context Meter","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--ai-context-meter.jpeg","featured":null},{"slug":"expandable-screen","title":"Expandable Screen","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--expandable-screen.jpeg","featured":null},{"slug":"apple-iphone-17-pro","title":"Apple Iphone 17 Pro","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--apple-iphone-17-pro.jpeg","featured":null},{"slug":"halo-input","title":"Halo Input","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--halo-input.jpeg","featured":null},{"slug":"glitch-text","title":"Glitch Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--glitch-text.jpeg","featured":null},{"slug":"neon-gradient-card","title":"Neon Gradient Card","category":"Media","description":"","free":false,"thumbnail":"previews/magic--neon-gradient-card.jpeg","featured":null},{"slug":"p-frame-3","title":"Frame with multiple separated panels","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-frame-3.jpeg","featured":null,"focus":[0.27,0.5,1.42]},{"slug":"ai-attachment","title":"AI Attachment","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-attachment.jpeg","featured":null},{"slug":"scroll-area","title":"Scroll Area","category":"Layout","description":"","free":false,"thumbnail":"previews/scroll-area.jpeg","featured":null,"focus":[0.07,0.26,1.35]},{"slug":"input-group","title":"Input Group","category":"Forms","description":"","free":false,"thumbnail":"previews/input-group.jpeg","featured":null,"focus":[0.2,0.26,1.39]},{"slug":"halo-switch","title":"Halo Switch","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--halo-switch.jpeg","featured":null},{"slug":"comic-text","title":"Comic Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--comic-text.jpeg","featured":null,"focus":[0.51,0.51,1.57]},{"slug":"analytics-chart","title":"Analytics Chart","category":"Data","description":"","free":false,"thumbnail":"previews/cult--analytics-chart.jpeg","featured":null},{"slug":"choicebox","title":"choicebox","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--choicebox.jpeg","featured":null},{"slug":"menubar","title":"Menubar","category":"Navigation","description":"","free":false,"thumbnail":"previews/menubar.jpeg","featured":null,"focus":[0.12,0.2,1.87]},{"slug":"interactive-grid-pattern","title":"Interactive Grid Pattern","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--interactive-grid-pattern.jpeg","featured":null,"focus":[0.5,0.82,2.1]},{"slug":"item","title":"Item","category":"Utilities","description":"","free":false,"thumbnail":"previews/item.jpeg","featured":null,"focus":[0.23,0.13,1.59]},{"slug":"texture-button","title":"Texture Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--texture-button.jpeg","featured":null},{"slug":"hexagon-pattern","title":"Hexagon Pattern","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--hexagon-pattern.jpeg","featured":null,"focus":[0.5,0.63,3.4]},{"slug":"empty-state","title":"Empty State","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--empty-state.jpeg","featured":null},{"slug":"deck","title":"deck","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--deck.jpeg","featured":null},{"slug":"bg-animate-button","title":"Bg Animate Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--bg-animate-button.jpeg","featured":null},{"slug":"ai-tool-calls","title":"AI Tool Calls","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-tool-calls.jpeg","featured":null},{"slug":"ai-instructions","title":"Ai Instructions","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--ai-instructions.jpeg","featured":null},{"slug":"p-field-18","title":"Complete form built with field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-18.jpeg","featured":null},{"slug":"halo-segmented","title":"Halo Segmented","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--halo-segmented.jpeg","featured":null},{"slug":"shine-border","title":"Shine Border","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--shine-border.jpeg","featured":null},{"slug":"illustration-globe-vercel","title":"Illustration Globe Vercel","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--illustration-globe-vercel.jpeg","featured":null,"focus":[0.5,0.78,1.38]},{"slug":"fieldset","title":"Fieldset","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--fieldset.jpeg","featured":null},{"slug":"p-fieldset-1","title":"Fieldset with multiple fields","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-fieldset-1.jpeg","featured":null},{"slug":"hover-card","title":"Hover Card","category":"Overlays","description":"","free":false,"thumbnail":"previews/hover-card.jpeg","featured":null,"focus":[0.16,0.14,2.38]},{"slug":"relative-time","title":"relative-time","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--relative-time.jpeg","featured":null,"focus":[0.5,0.5,1.69]},{"slug":"border-beam","title":"Border Beam","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--border-beam.jpeg","featured":null},{"slug":"speech-bubble","title":"Speech Bubble","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--speech-bubble.jpeg","featured":null},{"slug":"apple-watch-ultra","title":"Apple Watch Ultra","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--apple-watch-ultra.jpeg","featured":null},{"slug":"p-scroll-area-1","title":"Basic scroll area","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-scroll-area-1.jpeg","featured":null},{"slug":"apple-pro-display-xdr","title":"Apple Pro Display Xdr","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--apple-pro-display-xdr.jpeg","featured":null},{"slug":"canvas-fractal-grid","title":"Canvas Fractal Grid","category":"Sections","description":"","free":false,"thumbnail":"previews/cult--canvas-fractal-grid.jpeg","featured":null},{"slug":"animated-grid-pattern","title":"Animated Grid Pattern","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--animated-grid-pattern.jpeg","featured":null},{"slug":"halo-toggle-group","title":"Halo Toggle Group","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--halo-toggle-group.jpeg","featured":null},{"slug":"card-flip","title":"Flick Card","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--card-flip.jpeg","featured":null},{"slug":"p-scroll-area-4","title":"Scroll area with fading edges","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-scroll-area-4.jpeg","featured":null},{"slug":"credit-card","title":"credit-card","category":"Media","description":"","free":false,"thumbnail":"previews/kibo--credit-card.jpeg","featured":null},{"slug":"p-checkbox-group-4","title":"Nested checkbox group with parent","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-group-4.jpeg","featured":null,"focus":[0.52,0.5,1.33]},{"slug":"floating-panel","title":"Floating Panel","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--floating-panel.jpeg","featured":null},{"slug":"folded-card","title":"Folded Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--folded-card.jpeg","featured":null},{"slug":"shift-card","title":"Shift Card","category":"Media","description":"","free":false,"thumbnail":"previews/cult--shift-card.jpeg","featured":null},{"slug":"magic-card","title":"Magic Card","category":"Media","description":"","free":false,"thumbnail":"previews/magic--magic-card.jpeg","featured":null},{"slug":"combobox","title":"Combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/combobox.jpeg","featured":null,"focus":[0.11,0.22,1.7]},{"slug":"particles","title":"Particles","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--particles.jpeg","featured":null},{"slug":"morph-surface","title":"Morph Surface","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--morph-surface.jpeg","featured":null},{"slug":"file-tree","title":"File Tree","category":"Data","description":"","free":false,"thumbnail":"previews/magic--file-tree.jpeg","featured":null},{"slug":"text-3d-flip","title":"Text 3D Flip","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--text-3d-flip.jpeg","featured":null},{"slug":"infinite-slider","title":"Infinite Slider","category":"Forms","description":"","free":false,"thumbnail":"previews/motion--infinite-slider.jpeg","featured":null},{"slug":"stack-panel","title":"Stack Panel","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--stack-panel.jpeg","featured":null},{"slug":"p-skeleton-1","title":"Basic skeleton","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-skeleton-1.jpeg","featured":null},{"slug":"liquid-glass-card","title":"Now Playing","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--liquid-glass-card.jpeg","featured":null},{"slug":"line-shadow-text","title":"Line Shadow Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--line-shadow-text.jpeg","featured":null},{"slug":"sonner","title":"Sonner","category":"Utilities","description":"","free":false,"thumbnail":"previews/sonner.jpeg","featured":null},{"slug":"ai-tool-approval","title":"AI Tool Approval","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-tool-approval.jpeg","featured":null},{"slug":"ai-diff-review","title":"AI Diff Review","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-diff-review.jpeg","featured":null},{"slug":"snippet","title":"snippet","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--snippet.jpeg","featured":null,"focus":[0.26,0.5,1.68]},{"slug":"illustration-fluid-rendering","title":"Illustration Fluid Rendering","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--illustration-fluid-rendering.jpeg","featured":null},{"slug":"dropzone","title":"dropzone","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--dropzone.jpeg","featured":null,"focus":[0.5,0.51,1.57]},{"slug":"grid-pattern","title":"Grid Pattern","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--grid-pattern.jpeg","featured":null},{"slug":"p-calendar-3","title":"Calendar with date range selection","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-3.jpeg","featured":null},{"slug":"badge","title":"Badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/badge.jpeg","featured":null,"focus":[0.16,0.06,2.44]},{"slug":"illustration-graph","title":"Illustration Graph","category":"Data","description":"","free":false,"thumbnail":"previews/cult--illustration-graph.jpeg","featured":null},{"slug":"split-flap-text","title":"Split Flap Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--split-flap-text.jpeg","featured":null},{"slug":"ripple","title":"Ripple","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--ripple.jpeg","featured":null,"focus":[0.5,0.4,2.38]},{"slug":"p-accordion-4","title":"Controlled accordion","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-accordion-4.jpeg","featured":null},{"slug":"p-calendar-6","title":"Calendar with Combobox dropdown for month/year","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-6.jpeg","featured":null},{"slug":"p-calendar-5","title":"Calendar with custom Select dropdown for month/year","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-5.jpeg","featured":null},{"slug":"security-checkpoint","title":"Security Checkpoint","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--security-checkpoint.jpeg","featured":null},{"slug":"p-calendar-4","title":"Calendar with month/year dropdown navigation","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-4.jpeg","featured":null},{"slug":"amount-pad","title":"Amount Pad","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--amount-pad.jpeg","featured":null},{"slug":"separator","title":"Separator","category":"Layout","description":"","free":false,"thumbnail":"previews/separator.jpeg","featured":null,"focus":[0.14,0.1,3.03]},{"slug":"merging-bubbles","title":"Merging Bubbles","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--merging-bubbles.jpeg","featured":null},{"slug":"p-empty-1","title":"Empty state with icon and actions","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-empty-1.jpeg","featured":null,"focus":[0.49,0.51,1.73]},{"slug":"p-calendar-2","title":"Calendar with custom cell size","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-2.jpeg","featured":null},{"slug":"p-calendar-1","title":"Basic calendar","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-calendar-1.jpeg","featured":null},{"slug":"page-flip","title":"Page Flip","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--page-flip.jpeg","featured":null},{"slug":"p-accordion-1","title":"Basic accordion","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-accordion-1.jpeg","featured":null},{"slug":"dynamic-island","title":"Dynamic Island","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--dynamic-island.jpeg","featured":null},{"slug":"shader-lens-blur","title":"Shader Lens Blur","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--shader-lens-blur.jpeg","featured":null},{"slug":"animated-list","title":"Animated List","category":"Data","description":"","free":false,"thumbnail":"previews/magic--animated-list.jpeg","featured":null,"focus":[0.42,0.29,1.61]},{"slug":"prompt-library","title":"Prompt Library","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--prompt-library.jpeg","featured":null},{"slug":"mac-screen","title":"Mac Screen","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--mac-screen.jpeg","featured":null},{"slug":"comparison","title":"comparison","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--comparison.jpeg","featured":null},{"slug":"orbiting-circles","title":"Orbiting Circles","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--orbiting-circles.jpeg","featured":null},{"slug":"mock-browser-window","title":"Mock Browser Window","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--mock-browser-window.jpeg","featured":null},{"slug":"smooth-tab","title":"Swipe Tabs","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--smooth-tab.jpeg","featured":null},{"slug":"banner","title":"banner","category":"Sections","description":"","free":false,"thumbnail":"previews/kibo--banner.jpeg","featured":null},{"slug":"ai-autocomplete","title":"AI Autocomplete","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-autocomplete.jpeg","featured":null},{"slug":"kinetic-text","title":"Kinetic Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--kinetic-text.jpeg","featured":null},{"slug":"expandable","title":"Expandable","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--expandable.jpeg","featured":null},{"slug":"p-frame-1","title":"Basic frame","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-frame-1.jpeg","featured":null,"focus":[0.27,0.5,1.69]},{"slug":"frame","title":"Frame","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--frame.jpeg","featured":null,"focus":[0.27,0.5,1.69]},{"slug":"video-text","title":"Video Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--video-text.jpeg","featured":null},{"slug":"card-stack","title":"Throw Deck","category":"Media","description":"","free":false,"thumbnail":"previews/kokonut--card-stack.jpeg","featured":null,"focus":[0.5,0.62,1.37]},{"slug":"aurora-text","title":"Aurora Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--aurora-text.jpeg","featured":null},{"slug":"receipt-printer","title":"Receipt Printer","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--receipt-printer.jpeg","featured":null,"focus":[0.5,0.31,1.54]},{"slug":"aspect-ratio","title":"Aspect Ratio","category":"Layout","description":"","free":false,"thumbnail":"previews/shadcn--aspect-ratio.jpeg","featured":null},{"slug":"ai-prompt","title":"AI Input Selector","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-prompt.jpeg","featured":null},{"slug":"icon-cloud","title":"Icon Cloud","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--icon-cloud.jpeg","featured":null},{"slug":"morphing-dialog","title":"Morphing Dialog","category":"Overlays","description":"","free":false,"thumbnail":"previews/motion--morphing-dialog.jpeg","featured":null},{"slug":"direction-aware-tabs","title":"Direction Aware Tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/cult--direction-aware-tabs.jpeg","featured":null,"focus":[0.5,0.65,1.42]},{"slug":"ai-input-search","title":"AI Input Search","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--ai-input-search.jpeg","featured":null},{"slug":"illustration-comment-bubble","title":"Illustration Comment Bubble","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--illustration-comment-bubble.jpeg","featured":null,"focus":[0.5,0.69,1.43]},{"slug":"p-separator-1","title":"Separator with horizontal and vertical orientations","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-separator-1.jpeg","featured":null,"focus":[0.48,0.5,1.53]},{"slug":"ai-loading","title":"AI State Loading","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--ai-loading.jpeg","featured":null},{"slug":"plucked-text","title":"Plucked Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--plucked-text.jpeg","featured":null},{"slug":"notification-stack","title":"Notification Stack","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--notification-stack.jpeg","featured":null},{"slug":"sandbox","title":"sandbox","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--sandbox.jpeg","featured":null,"focus":[0.25,0.31,1.53]},{"slug":"meteors","title":"Meteors","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--meteors.jpeg","featured":null},{"slug":"select","title":"Select","category":"Forms","description":"","free":false,"thumbnail":"previews/select.jpeg","featured":null,"focus":[0.07,0.18,2.16]},{"slug":"copy-button","title":"Copy Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--copy-button.jpeg","featured":null,"focus":[0.5,0.67,1.43]},{"slug":"attract-button","title":"Magnet Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--attract-button.jpeg","featured":null,"focus":[0.5,0.5,1.7]},{"slug":"promise-toast","title":"Promise Toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--promise-toast.jpeg","featured":null},{"slug":"highlighter","title":"Highlighter","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--highlighter.jpeg","featured":null},{"slug":"typewriter","title":"Typewriter","category":"Motion","description":"","free":false,"thumbnail":"previews/cult--typewriter.jpeg","featured":null},{"slug":"avatar-stack","title":"avatar-stack","category":"Media","description":"","free":false,"thumbnail":"previews/kibo--avatar-stack.jpeg","featured":null,"focus":[0.5,0.5,2.84]},{"slug":"p-composer-2","title":"Composer with asynchronous mention suggestions","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-2.jpeg","featured":null},{"slug":"illustration-cursor","title":"Illustration Cursor","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--illustration-cursor.jpeg","featured":null,"focus":[0.5,0.64,1.78]},{"slug":"marking-menu","title":"Marking Menu","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--marking-menu.jpeg","featured":null},{"slug":"p-accordion-3","title":"Accordion allowing multiple panels open","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-accordion-3.jpeg","featured":null},{"slug":"p-accordion-2","title":"Accordion with one panel open","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-accordion-2.jpeg","featured":null},{"slug":"confetti","title":"Confetti","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--confetti.jpeg","featured":null},{"slug":"liquid-slider","title":"Liquid Slider","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--liquid-slider.jpeg","featured":null},{"slug":"image-zoom","title":"image-zoom","category":"Media","description":"","free":false,"thumbnail":"previews/kibo--image-zoom.jpeg","featured":null,"focus":[0.5,0.5,1.85]},{"slug":"p-switch-4","title":"Switch card","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-switch-4.jpeg","featured":null},{"slug":"agent-suggest-card-stack","title":"Agent Suggest Card Stack","category":"Media","description":"","free":false,"thumbnail":"previews/cult--agent-suggest-card-stack.jpeg","featured":null,"focus":[0.5,0.67,1.57]},{"slug":"circuit-board","title":"Circuit Board","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--circuit-board.jpeg","featured":null,"focus":[0.52,0.39,1.67]},{"slug":"loader","title":"Loader","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--loader.jpeg","featured":null},{"slug":"p-otp-field-9","title":"OTP field with placeholder hints","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-9.jpeg","featured":null},{"slug":"side-panel","title":"Side Panel","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--side-panel.jpeg","featured":null,"focus":[0.25,0.68,1.64]},{"slug":"avatar","title":"Avatar","category":"Media","description":"","free":false,"thumbnail":"previews/avatar.jpeg","featured":null,"focus":[0.16,0.04,3.4]},{"slug":"p-checkbox-3","title":"Checkbox with description","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-3.jpeg","featured":null},{"slug":"radio-group","title":"Radio Group","category":"Forms","description":"","free":false,"thumbnail":"previews/radio-group.jpeg","featured":null,"focus":[0.07,0.09,3.4]},{"slug":"p-checkbox-4","title":"Card-style checkbox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-4.jpeg","featured":null},{"slug":"announcement","title":"announcement","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--announcement.jpeg","featured":null,"focus":[0.5,0.5,1.92]},{"slug":"button-group","title":"Button group","category":"Buttons","description":"Group related actions on a shared control.","free":true,"thumbnail":"previews/button-group.jpeg","featured":null,"focus":[0.19,0.04,2.41]},{"slug":"spinner","title":"Spinner","category":"Feedback","description":"","free":false,"thumbnail":"previews/spinner.jpeg","featured":null,"focus":[0.18,0.05,2.46]},{"slug":"mini-calendar","title":"Mini calendar","category":"Forms","description":"Pick a day in a compact calendar.","free":false,"thumbnail":"previews/kibo--mini-calendar.jpeg","featured":null,"focus":[0.5,0.5,1.34]},{"slug":"status-island","title":"Status Island","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--status-island.jpeg","featured":null},{"slug":"p-select-11","title":"Select in form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-11.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"liquid-gauge","title":"Liquid Gauge","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--liquid-gauge.jpeg","featured":null},{"slug":"textarea","title":"Textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/shadcn--textarea.jpeg","featured":null,"focus":[0.1,0.07,3.4]},{"slug":"file-upload","title":"File Upload","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--file-upload.jpeg","featured":null,"focus":[0.5,0.51,2.59]},{"slug":"resizable","title":"Resizable","category":"Layout","description":"","free":false,"thumbnail":"previews/resizable.jpeg","featured":null,"focus":[0.23,0.13,2.38]},{"slug":"image-crop","title":"image-crop","category":"Media","description":"","free":false,"thumbnail":"previews/kibo--image-crop.jpeg","featured":null,"focus":[0.39,0.5,2.46]},{"slug":"cradle-text","title":"Cradle Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--cradle-text.jpeg","featured":null},{"slug":"glimpse","title":"glimpse","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--glimpse.jpeg","featured":null,"focus":[0.5,0.5,2.03]},{"slug":"gradient-button","title":"Gradient Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--gradient-button.jpeg","featured":null,"focus":[0.5,0.49,1.63]},{"slug":"scroll-progress","title":"Scroll Progress","category":"Feedback","description":"","free":false,"thumbnail":"previews/magic--scroll-progress.jpeg","featured":null},{"slug":"label","title":"Label","category":"Utilities","description":"","free":false,"thumbnail":"previews/label.jpeg","featured":null},{"slug":"p-alert-3","title":"Alert with icon and action buttons","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-alert-3.jpeg","featured":null},{"slug":"cursor","title":"Cursor","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--cursor.jpeg","featured":null,"focus":[0.5,0.5,1.7]},{"slug":"breadcrumb","title":"Breadcrumb","category":"Navigation","description":"","free":false,"thumbnail":"previews/breadcrumb.jpeg","featured":null},{"slug":"p-toast-2","title":"Stacked toasts by semantic type (success, error, info, warning)","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-2.jpeg","featured":null},{"slug":"status","title":"status","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--status.jpeg","featured":null},{"slug":"squiggle-arrow","title":"Squiggle Arrow","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--squiggle-arrow.jpeg","featured":null},{"slug":"toolbar","title":"Tool Dock","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--toolbar.jpeg","featured":null,"focus":[0.5,0.84,1.77]},{"slug":"dock","title":"Dock","category":"Navigation","description":"","free":false,"thumbnail":"previews/magic--dock.jpeg","featured":null,"focus":[0.5,0.49,1.6]},{"slug":"neumorph-eyebrow","title":"Neumorph Eyebrow","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--neumorph-eyebrow.jpeg","featured":null,"focus":[0.5,0.67,3.28]},{"slug":"ticker","title":"ticker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--ticker.jpeg","featured":null,"focus":[0.5,0.5,2.13]},{"slug":"morphing-text","title":"Morphing Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--morphing-text.jpeg","featured":null},{"slug":"pagination","title":"Pagination","category":"Navigation","description":"","free":false,"thumbnail":"previews/pagination.jpeg","featured":null,"focus":[0.5,0.04,2.03]},{"slug":"text-roll","title":"Text Roll","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-roll.jpeg","featured":null,"focus":[0.5,0.51,1.41]},{"slug":"helpful-rating","title":"Helpful Rating","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--helpful-rating.jpeg","featured":null,"focus":[0.5,0.49,1.39]},{"slug":"swoosh-text","title":"Extruded Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--swoosh-text.jpeg","featured":null,"focus":[0.51,0.51,1.57]},{"slug":"progressive-blur","title":"Progressive Blur","category":"Feedback","description":"","free":false,"thumbnail":"previews/magic--progressive-blur.jpeg","featured":null,"focus":[0.5,0.39,1.57]},{"slug":"p-switch-3","title":"Switch with description","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-switch-3.jpeg","featured":null},{"slug":"hold-button","title":"Hold Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--hold-button.jpeg","featured":null,"focus":[0.5,0.5,2.08]},{"slug":"tooltip","title":"Tooltip","category":"Overlays","description":"","free":false,"thumbnail":"previews/tooltip.jpeg","featured":null,"focus":[0.07,0.08,3.4]},{"slug":"carousel","title":"Carousel","category":"Media","description":"","free":false,"thumbnail":"previews/carousel.jpeg","featured":null,"focus":[0.26,0.32,3.04]},{"slug":"p-textarea-6","title":"Textarea in form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-6.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"p-avatar-3","title":"Avatars with different sizes","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-3.jpeg","featured":null,"focus":[0.5,0.48,1.8]},{"slug":"p-sheet-3","title":"Sheet position","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-sheet-3.jpeg","featured":null},{"slug":"card-field","title":"Card Field","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--card-field.jpeg","featured":null},{"slug":"input","title":"Input","category":"Forms","description":"","free":false,"thumbnail":"previews/shadcn--input.jpeg","featured":null,"focus":[0.04,0.04,3.4]},{"slug":"p-otp-field-4","title":"OTP field with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-4.jpeg","featured":null,"focus":[0.5,0.5,1.76]},{"slug":"p-form-2","title":"Form with zod validation","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-form-2.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"command-button","title":"Command Button","category":"Navigation","description":"","free":false,"thumbnail":"previews/kokonut--command-button.jpeg","featured":null},{"slug":"p-checkbox-group-5","title":"Checkbox group form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-group-5.jpeg","featured":null,"focus":[0.5,0.51,1.95]},{"slug":"p-otp-field-7","title":"OTP field with auto validation","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-7.jpeg","featured":null,"focus":[0.5,0.5,2.11]},{"slug":"p-alert-2","title":"Alert with icon","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-alert-2.jpeg","featured":null,"focus":[0.31,0.5,1.38]},{"slug":"p-combobox-11","title":"Combobox form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-11.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"p-checkbox-5","title":"Checkbox form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-5.jpeg","featured":null,"focus":[0.5,0.5,1.87]},{"slug":"team-selector","title":"Team Selector","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--team-selector.jpeg","featured":null},{"slug":"toggle","title":"Toggle","category":"Forms","description":"","free":false,"thumbnail":"previews/toggle.jpeg","featured":null,"focus":[0.07,0.04,3.4]},{"slug":"native-select","title":"Native Select","category":"Forms","description":"","free":false,"thumbnail":"previews/native-select.jpeg","featured":null,"focus":[0.08,0.04,3.4]},{"slug":"p-field-14","title":"Field with radio group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-14.jpeg","featured":null,"focus":[0.46,0.5,2.03]},{"slug":"p-field-10","title":"Field with textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-10.jpeg","featured":null,"focus":[0.5,0.5,1.6]},{"slug":"switch","title":"Switch","category":"Forms","description":"","free":false,"thumbnail":"previews/switch.jpeg","featured":null},{"slug":"pull-cord","title":"Pull Cord","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--pull-cord.jpeg","featured":null},{"slug":"p-combobox-12","title":"Combobox multiple form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-12.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"p-switch-5","title":"Switch in form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-switch-5.jpeg","featured":null,"focus":[0.5,0.5,2]},{"slug":"p-autocomplete-13","title":"Autocomplete form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-13.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"infinity-track","title":"Infinity Track","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--infinity-track.jpeg","featured":null,"focus":[0.5,0.5,2.98]},{"slug":"p-alert-1","title":"Basic alert","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-alert-1.jpeg","featured":null,"focus":[0.29,0.5,1.51]},{"slug":"rating","title":"rating","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--rating.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"avatar-circles","title":"Avatar Circles","category":"Media","description":"","free":false,"thumbnail":"previews/magic--avatar-circles.jpeg","featured":null,"focus":[0.5,0.5,2.38]},{"slug":"tags","title":"tags","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--tags.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"detent-dial","title":"Detent Dial","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--detent-dial.jpeg","featured":null},{"slug":"stories","title":"stories","category":"Utilities","description":"","free":false,"thumbnail":"previews/kibo--stories.jpeg","featured":null,"focus":[0.13,0.62,2.37]},{"slug":"dot-pattern","title":"Dot Pattern","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--dot-pattern.jpeg","featured":null,"focus":[0.51,0.61,1.66]},{"slug":"cosmic-button","title":"Cosmic Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--cosmic-button.jpeg","featured":null,"focus":[0.5,0.68,1.81]},{"slug":"button","title":"Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/button.jpeg","featured":null,"focus":[0.07,0.04,3.4]},{"slug":"collab-avatar","title":"Collab Avatar","category":"Media","description":"","free":false,"thumbnail":"previews/cult--collab-avatar.jpeg","featured":null,"focus":[0.5,0.68,2.49]},{"slug":"bell-button","title":"Bell Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--bell-button.jpeg","featured":null},{"slug":"p-kbd-1","title":"Keyboard shortcuts display","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--p-kbd-1.jpeg","featured":null,"focus":[0.5,0.5,1.63]},{"slug":"kbd","title":"Kbd","category":"Utilities","description":"","free":false,"thumbnail":"previews/kbd.jpeg","featured":null,"focus":[0.5,0.08,3.4]},{"slug":"terminal","title":"Terminal","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--terminal.jpeg","featured":null,"focus":[0.28,0.2,2.38]},{"slug":"dialog-stack","title":"Stacked dialogs","category":"Overlays","description":"Handle a follow-up action in a nested dialog.","free":false,"thumbnail":"previews/kibo--dialog-stack.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"sparkles-text","title":"Sparkles Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--sparkles-text.jpeg","featured":null,"focus":[0.5,0.52,1.64]},{"slug":"p-input-group-17","title":"Input group with textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-17.jpeg","featured":null,"focus":[0.5,0.5,1.37]},{"slug":"p-field-9","title":"Field with multiple selection combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-9.jpeg","featured":null,"focus":[0.43,0.5,2.44]},{"slug":"p-radio-group-5","title":"Radio group in form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-radio-group-5.jpeg","featured":null,"focus":[0.5,0.51,1.95]},{"slug":"text-reveal","title":"Text Reveal","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--text-reveal.jpeg","featured":null,"focus":[0.37,0.93,1.43]},{"slug":"text-effect","title":"Text reveal","category":"Motion","description":"Bring a headline into view in a controlled sequence.","free":false,"thumbnail":"previews/motion--text-effect.jpeg","featured":null,"focus":[0.5,0.5,1.31]},{"slug":"input-otp","title":"Input Otp","category":"Forms","description":"","free":false,"thumbnail":"previews/shadcn--input-otp.jpeg","featured":null},{"slug":"toggle-group","title":"Toggle Group","category":"Forms","description":"","free":false,"thumbnail":"previews/shadcn--toggle-group.jpeg","featured":null,"focus":[0.08,0.04,3.4]},{"slug":"theme-switcher","title":"theme-switcher","category":"Forms","description":"","free":false,"thumbnail":"previews/kibo--theme-switcher.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-form-1","title":"Input in a form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-form-1.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"fluid-ai-workloads","title":"Fluid Ai Workloads","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--fluid-ai-workloads.jpeg","featured":null,"focus":[0.52,0.67,2.13]},{"slug":"gradient-button-group","title":"Gradient Button Group","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--gradient-button-group.jpeg","featured":null},{"slug":"p-field-11","title":"Field with select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-11.jpeg","featured":null,"focus":[0.49,0.5,1.66]},{"slug":"slider","title":"Slider","category":"Forms","description":"","free":false,"thumbnail":"previews/shadcn--slider.jpeg","featured":null},{"slug":"p-toolbar-1","title":"Toolbar with toggles, buttons, and select","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-toolbar-1.jpeg","featured":null},{"slug":"gateway-endpoint-illustration","title":"Gateway Endpoint Illustration","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--gateway-endpoint-illustration.jpeg","featured":null,"focus":[0.5,0.67,1.83]},{"slug":"signature-pad","title":"Signature Pad","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--signature-pad.jpeg","featured":null},{"slug":"profile-dropdown","title":"Account Menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/kokonut--profile-dropdown.jpeg","featured":null,"focus":[0.49,0.17,1.96]},{"slug":"p-number-field-10","title":"Number field in form","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-10.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"wheel-picker","title":"Wheel Picker","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--wheel-picker.jpeg","featured":null,"focus":[0.5,0.5,1.8]},{"slug":"glow-effect","title":"Glow Effect","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--glow-effect.jpeg","featured":null},{"slug":"p-field-17","title":"Field with number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-17.jpeg","featured":null,"focus":[0.49,0.5,1.68]},{"slug":"skeleton","title":"Skeleton","category":"Feedback","description":"","free":false,"thumbnail":"previews/shadcn--skeleton.jpeg","featured":null},{"slug":"p-textarea-5","title":"Textarea with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-5.jpeg","featured":null,"focus":[0.5,0.5,1.6]},{"slug":"p-composer-12","title":"Composer with colon emoji suggestions that insert plain text","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-12.jpeg","featured":null},{"slug":"p-checkbox-group-3","title":"Checkbox group with parent checkbox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-group-3.jpeg","featured":null,"focus":[0.52,0.5,2.95]},{"slug":"collab-toolbar","title":"Collab Toolbar","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--collab-toolbar.jpeg","featured":null,"focus":[0.5,0.68,2.01]},{"slug":"shimmer-button","title":"Shimmer Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--shimmer-button.jpeg","featured":null,"focus":[0.5,0.5,2.31]},{"slug":"progress","title":"Progress","category":"Feedback","description":"","free":false,"thumbnail":"previews/shadcn--progress.jpeg","featured":null},{"slug":"number-ticker","title":"Number Ticker","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--number-ticker.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-field-1","title":"Field with description","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-1.jpeg","featured":null,"focus":[0.4,0.5,3.33]},{"slug":"p-number-field-9","title":"Number field with step","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-9.jpeg","featured":null,"focus":[0.49,0.49,1.68]},{"slug":"gateway-route-illustration","title":"Gateway Route Illustration","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--gateway-route-illustration.jpeg","featured":null,"focus":[0.5,0.68,2.91]},{"slug":"morphic-navbar","title":"Split Nav","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--morphic-navbar.jpeg","featured":null},{"slug":"p-drawer-4","title":"Inset variant drawers for all four positions","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-4.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-drawer-5","title":"Straight variant drawers for all four positions","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-5.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"accordion-loader","title":"Accordion Loader","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--accordion-loader.jpeg","featured":null,"focus":[0.5,0.5,2.08]},{"slug":"p-field-3","title":"Field in disabled state","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-3.jpeg","featured":null,"focus":[0.43,0.5,2.38]},{"slug":"p-checkbox-2","title":"Disabled checkbox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-2.jpeg","featured":null,"focus":[0.5,0.5,1.87]},{"slug":"p-otp-field-6","title":"OTP field with custom sanitization","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"gateway-svg-illustration","title":"Gateway Svg Illustration","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--gateway-svg-illustration.jpeg","featured":null,"focus":[0.5,0.7,2.38]},{"slug":"p-composer-5","title":"Composer with a custom suggestion list","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-5.jpeg","featured":null},{"slug":"spinning-text","title":"Spinning Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--spinning-text.jpeg","featured":null,"focus":[0.5,0.5,2.63]},{"slug":"safari","title":"Safari","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--safari.jpeg","featured":null},{"slug":"p-select-10","title":"Select with object values","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-10.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-input-group-4","title":"Input group with end text","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-4.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-input-5","title":"File input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-5.jpeg","featured":null,"focus":[0.46,0.5,2.23]},{"slug":"rainbow-button","title":"Rainbow Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--rainbow-button.jpeg","featured":null,"focus":[0.5,0.5,2.39]},{"slug":"onboarding","title":"Onboarding","category":"Utilities","description":"","free":false,"thumbnail":"previews/cult--onboarding.jpeg","featured":null,"focus":[0.5,0.68,2.4]},{"slug":"p-composer-3","title":"Composer pinned below scrollable drawer content","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-3.jpeg","featured":null,"focus":[0.5,0.5,2.57]},{"slug":"p-textarea-2","title":"Small textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-2.jpeg","featured":null,"focus":[0.51,0.51,1.67]},{"slug":"p-composer-6","title":"Composer with distinct person, team, and action chips","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-6.jpeg","featured":null},{"slug":"p-textarea-3","title":"Large textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-3.jpeg","featured":null,"focus":[0.51,0.51,1.68]},{"slug":"p-field-8","title":"Field with combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-8.jpeg","featured":null,"focus":[0.49,0.5,1.66]},{"slug":"pulsating-button","title":"Pulsating Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--pulsating-button.jpeg","featured":null,"focus":[0.5,0.5,2.31]},{"slug":"p-group-6","title":"Group with default button","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-6.jpeg","featured":null,"focus":[0.5,0.5,2.11]},{"slug":"p-field-13","title":"Field with checkbox group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-13.jpeg","featured":null,"focus":[0.5,0.5,3.02]},{"slug":"p-select-7","title":"Multiple select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-7.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"iphone","title":"iPhone","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--iphone.jpeg","featured":null},{"slug":"p-input-7","title":"Input with button using Group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-7.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-toast-6","title":"Stacked toasts with varying content height","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-6.jpeg","featured":null,"focus":[0.5,0.5,2.85]},{"slug":"p-combobox-9","title":"Combobox with multiple selection","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-9.jpeg","featured":null,"focus":[0.44,0.5,2.62]},{"slug":"p-group-4","title":"Large group","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-4.jpeg","featured":null,"focus":[0.5,0.5,2.27]},{"slug":"p-select-3","title":"Large select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-3.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"animated-gradient-text","title":"Animated Gradient Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--animated-gradient-text.jpeg","featured":null,"focus":[0.5,0.5,1.88]},{"slug":"p-meter-4","title":"Meter with range","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-meter-4.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"composer","title":"Composer","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--composer.jpeg","featured":null},{"slug":"p-composer-4","title":"Composer surface with a native textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-4.jpeg","featured":null},{"slug":"p-date-picker-4","title":"Date picker with presets","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-4.jpeg","featured":null,"focus":[0.45,0.5,2.45]},{"slug":"p-input-6","title":"Input with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-6.jpeg","featured":null,"focus":[0.41,0.49,2.93]},{"slug":"p-field-7","title":"Field with autocomplete","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-7.jpeg","featured":null,"focus":[0.39,0.5,3.4]},{"slug":"ai-voice","title":"AI Voice","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--ai-voice.jpeg","featured":null,"focus":[0.5,0.52,1.8]},{"slug":"p-select-2","title":"Small select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-2.jpeg","featured":null,"focus":[0.5,0.5,1.72]},{"slug":"p-date-picker-3","title":"Date picker with field and dropdown navigation","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-3.jpeg","featured":null,"focus":[0.38,0.49,3.4]},{"slug":"p-input-group-8","title":"Input group with icon button","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-8.jpeg","featured":null,"focus":[0.5,0.5,1.72]},{"slug":"p-group-2","title":"Group with input","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-2.jpeg","featured":null,"focus":[0.5,0.5,1.96]},{"slug":"p-group-3","title":"Small group","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-3.jpeg","featured":null,"focus":[0.5,0.5,2.56]},{"slug":"p-progress-3","title":"Progress with formatted value","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-progress-3.jpeg","featured":null,"focus":[0.5,0.51,1.59]},{"slug":"p-select-23","title":"Select with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-23.jpeg","featured":null,"focus":[0.49,0.5,1.66]},{"slug":"p-field-12","title":"Field with checkbox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-12.jpeg","featured":null,"focus":[0.49,0.5,2.11]},{"slug":"p-combobox-14","title":"Combobox multiple with start addon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-14.jpeg","featured":null,"focus":[0.44,0.5,2.62]},{"slug":"p-group-12","title":"Group with input group","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-12.jpeg","featured":null,"focus":[0.5,0.5,1.68]},{"slug":"p-scroll-area-2","title":"Horizontal scroll area","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-scroll-area-2.jpeg","featured":null},{"slug":"hyper-text","title":"Hyper Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--hyper-text.jpeg","featured":null,"focus":[0.5,0.5,2.28]},{"slug":"p-breadcrumb-2","title":"Breadcrumb with custom separator","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-breadcrumb-2.jpeg","featured":null,"focus":[0.5,0.5,1.55]},{"slug":"p-field-6","title":"Input group with field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-6.jpeg","featured":null,"focus":[0.49,0.49,1.65]},{"slug":"p-input-group-10","title":"Input group with badge","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-10.jpeg","featured":null,"focus":[0.5,0.5,1.73]},{"slug":"p-combobox-5","title":"Combobox with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-5.jpeg","featured":null,"focus":[0.49,0.49,1.66]},{"slug":"p-meter-1","title":"Basic meter","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-meter-1.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"meter","title":"Meter","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--meter.jpeg","featured":null,"focus":[0.5,0.5,1.58]},{"slug":"dia-text-reveal","title":"Dia Text Reveal","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--dia-text-reveal.jpeg","featured":null,"focus":[0.5,0.5,2.98]},{"slug":"p-select-9","title":"Select options with icon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-9.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-composer-1","title":"Composer with people, teams, and slash suggestions","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-1.jpeg","featured":null},{"slug":"p-input-group-9","title":"Input group with button","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-9.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"dynamic-text","title":"Dynamic Text","category":"Motion","description":"","free":false,"thumbnail":"previews/kokonut--dynamic-text.jpeg","featured":null,"focus":[0.5,0.5,2.91]},{"slug":"p-field-2","title":"Field with required indicator","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-2.jpeg","featured":null,"focus":[0.39,0.49,3.4]},{"slug":"p-progress-2","title":"Progress with label and value","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-progress-2.jpeg","featured":null,"focus":[0.5,0.51,1.58]},{"slug":"p-composer-7","title":"Contenteditable composer with Send beside a short draft","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-7.jpeg","featured":null},{"slug":"p-composer-8","title":"Textarea composer with Send beside a short draft","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-composer-8.jpeg","featured":null},{"slug":"p-field-16","title":"Field with slider","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-16.jpeg","featured":null,"focus":[0.41,0.5,2.98]},{"slug":"p-drawer-6","title":"Scrollable content with terms and conditions","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-6.jpeg","featured":null,"focus":[0.5,0.5,3.35]},{"slug":"p-scroll-area-5","title":"Horizontal scroll area with scrollbar gutter","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-scroll-area-5.jpeg","featured":null},{"slug":"animated-background","title":"Animated Background","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--animated-background.jpeg","featured":null,"focus":[0.5,0.83,2.78]},{"slug":"p-checkbox-group-2","title":"Checkbox group with disabled items","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-group-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-group-7","title":"Group with start text","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-7.jpeg","featured":null,"focus":[0.42,0.5,2.98]},{"slug":"p-select-6","title":"Select with groups","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-6.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-select-5","title":"Select without item alignment","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-5.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-combobox-10","title":"Combobox with input inside popup","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-10.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-drawer-15","title":"Chat composer pinned above the mobile keyboard","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-15.jpeg","featured":null,"focus":[0.5,0.5,3.38]},{"slug":"p-date-picker-2","title":"Date range picker","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-2.jpeg","featured":null,"focus":[0.42,0.5,2.99]},{"slug":"action-search-bar","title":"Command Palette","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--action-search-bar.jpeg","featured":null},{"slug":"p-combobox-4","title":"Large combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-4.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-context-menu-6","title":"Context menu with icons","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-7","title":"Context menu with radio group","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-8","title":"Context menu with switch checkbox items","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-8.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-1","title":"Basic context menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-4","title":"Context menu with checkbox items","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-5","title":"Context menu with group labels","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-2","title":"Context menu with link items","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-context-menu-3","title":"Nested context menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-context-menu-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-autocomplete-5","title":"Autocomplete with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-5.jpeg","featured":null,"focus":[0.39,0.49,3.4]},{"slug":"p-drawer-9","title":"Bottom drawer with snap points","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-9.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"border-trail","title":"Border Trail","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--border-trail.jpeg","featured":null},{"slug":"p-autocomplete-12","title":"Autocomplete with async items loading","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-12.jpeg","featured":null,"focus":[0.44,0.5,2.63]},{"slug":"smooth-cursor","title":"Smooth Cursor","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--smooth-cursor.jpeg","featured":null,"focus":[0.5,0.5,2.47]},{"slug":"android","title":"Android","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--android.jpeg","featured":null},{"slug":"p-combobox-3","title":"Small combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-3.jpeg","featured":null,"focus":[0.5,0.5,1.72]},{"slug":"p-group-5","title":"Group with disabled button","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-5.jpeg","featured":null,"focus":[0.5,0.5,2.38]},{"slug":"p-checkbox-1","title":"Basic checkbox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-1.jpeg","featured":null,"focus":[0.52,0.5,2.11]},{"slug":"p-slider-2","title":"Slider with label and value","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-slider-2.jpeg","featured":null,"focus":[0.5,0.51,1.59]},{"slug":"p-textarea-1","title":"Basic textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-1.jpeg","featured":null,"focus":[0.51,0.51,1.68]},{"slug":"p-drawer-7","title":"Nested bottom drawers with centered content","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-input-group-5","title":"Input group with start and end text","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-5.jpeg","featured":null,"focus":[0.5,0.5,1.76]},{"slug":"animated-shiny-text","title":"Animated Shiny Text","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--animated-shiny-text.jpeg","featured":null,"focus":[0.5,0.5,2.22]},{"slug":"p-slider-4","title":"Slider with reference labels","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-slider-4.jpeg","featured":null,"focus":[0.5,0.5,1.59]},{"slug":"p-autocomplete-4","title":"Large autocomplete","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-4.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"slide-text-button","title":"Slide Text Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--slide-text-button.jpeg","featured":null,"focus":[0.5,0.5,1.88]},{"slug":"p-slider-5","title":"Slider with ticks","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-slider-5.jpeg","featured":null,"focus":[0.5,0.5,1.62]},{"slug":"p-group-1","title":"Basic group","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-1.jpeg","featured":null,"focus":[0.5,0.5,2.38]},{"slug":"group","title":"Group","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--group.jpeg","featured":null,"focus":[0.5,0.5,2.38]},{"slug":"slide-to-confirm","title":"Slide to Confirm","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--slide-to-confirm.jpeg","featured":null,"focus":[0.43,0.5,1.7]},{"slug":"square-accordion","title":"Square Accordion","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--square-accordion.jpeg","featured":null,"focus":[0.5,0.5,2.98]},{"slug":"p-dialog-5","title":"Dialog with long content","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-5.jpeg","featured":null,"focus":[0.5,0.5,3.13]},{"slug":"text-morph","title":"Text Morph","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-morph.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-switch-2","title":"Disabled switch","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-switch-2.jpeg","featured":null,"focus":[0.53,0.5,3.4]},{"slug":"p-combobox-13","title":"Combobox with start addon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-13.jpeg","featured":null,"focus":[0.5,0.5,1.74]},{"slug":"p-tabs-2","title":"Tabs with underline","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-2.jpeg","featured":null,"focus":[0.49,0.49,2.59]},{"slug":"p-popover-2","title":"Popover with close button","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-popover-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"square-grid","title":"Square Grid","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--square-grid.jpeg","featured":null,"focus":[0.5,0.5,2.98]},{"slug":"p-pagination-1","title":"Pagination example","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-pagination-1.jpeg","featured":null,"focus":[0.5,0.5,1.39]},{"slug":"p-avatar-4","title":"Avatars with different radii","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-4.jpeg","featured":null,"focus":[0.5,0.5,3.16]},{"slug":"p-group-13","title":"Group with menu","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-13.jpeg","featured":null,"focus":[0.5,0.5,3.26]},{"slug":"p-toggle-2","title":"Toggle with outline","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-autocomplete-3","title":"Small autocomplete","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-3.jpeg","featured":null,"focus":[0.39,0.5,3.4]},{"slug":"p-toast-4","title":"Stacked toast with primary action (undo)","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-number-field-5","title":"Number field with label","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-5.jpeg","featured":null,"focus":[0.49,0.49,1.68]},{"slug":"p-number-field-6","title":"Number field with scrub","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-6.jpeg","featured":null,"focus":[0.49,0.49,1.68]},{"slug":"p-date-picker-5","title":"Date picker with input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-5.jpeg","featured":null,"focus":[0.41,0.5,3.38]},{"slug":"p-field-4","title":"Field showing validation error","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-4.jpeg","featured":null,"focus":[0.39,0.49,3.4]},{"slug":"p-group-10","title":"Nested groups","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-10.jpeg","featured":null,"focus":[0.5,0.5,1.91]},{"slug":"p-toast-10","title":"Deduplicated success toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-10.jpeg","featured":null,"focus":[0.5,0.51,3.27]},{"slug":"p-tabs-3","title":"Vertical tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-3.jpeg","featured":null,"focus":[0.44,0.5,1.85]},{"slug":"p-toast-3","title":"Loading-state stacked toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-checkbox-group-1","title":"Basic checkbox group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-checkbox-group-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"checkbox-group","title":"Checkbox Group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--checkbox-group.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-select-8","title":"Select with icon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-8.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"particle-button","title":"Particle Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--particle-button.jpeg","featured":null,"focus":[0.49,0.5,2.11]},{"slug":"three-d-carousel","title":"Three D Carousel","category":"Media","description":"","free":false,"thumbnail":"previews/cult--three-d-carousel.jpeg","featured":null},{"slug":"p-combobox-6","title":"Combobox auto highlighting the first option","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-6.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"morphing-popover","title":"Morphing Popover","category":"Overlays","description":"","free":false,"thumbnail":"previews/motion--morphing-popover.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"toolbar-expandable","title":"Toolbar Expandable","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--toolbar-expandable.jpeg","featured":null,"focus":[0.5,0.83,2.83]},{"slug":"p-avatar-5","title":"Overlapping avatar group","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-tabs-1","title":"Segmented control built with tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-1.jpeg","featured":null,"focus":[0.5,0.49,2.78]},{"slug":"p-input-group-14","title":"Large input group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-14.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-input-group-3","title":"Input group with start text","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-3.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"animated-circular-progress-bar","title":"Animated Circular Progress Bar","category":"Feedback","description":"","free":false,"thumbnail":"previews/magic--animated-circular-progress-bar.jpeg","featured":null,"focus":[0.53,0.43,3.08]},{"slug":"p-autocomplete-9","title":"Autocomplete with trigger and clear buttons","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-9.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-alert-dialog-2","title":"Alert dialog with bare footer","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-alert-dialog-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-combobox-7","title":"Combobox with clear button","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-7.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-input-3","title":"Large input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-3.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-input-group-13","title":"Small input group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-13.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-tabs-15","title":"Large segmented control built with tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-15.jpeg","featured":null,"focus":[0.5,0.49,2.63]},{"slug":"p-select-4","title":"Disabled select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-4.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-combobox-18","title":"Combobox with select trigger","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-18.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-tabs-14","title":"Small segmented control built with tabs","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-14.jpeg","featured":null,"focus":[0.5,0.49,2.94]},{"slug":"p-input-2","title":"Small input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-2.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-tabs-4","title":"Vertical tabs with underline","category":"Navigation","description":"","free":false,"thumbnail":"previews/coss--p-tabs-4.jpeg","featured":null,"focus":[0.43,0.49,1.73]},{"slug":"p-toast-5","title":"Promise-based stacked toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-collapsible-1","title":"Basic collapsible","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-collapsible-1.jpeg","featured":null,"focus":[0.5,0.51,2.68]},{"slug":"p-avatar-16","title":"Avatar group with a count and the last avatar on top","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-16.jpeg","featured":null,"focus":[0.49,0.5,3.4]},{"slug":"p-date-picker-1","title":"Basic date picker","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-1.jpeg","featured":null,"focus":[0.39,0.5,3.4]},{"slug":"p-date-picker-6","title":"Date picker that closes on select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-date-picker-6.jpeg","featured":null,"focus":[0.39,0.5,3.4]},{"slug":"p-drawer-11","title":"Mobile menu drawer from the left","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-11.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-autocomplete-7","title":"Autocomplete auto highlighting the first option","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-7.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"p-autocomplete-6","title":"Autocomplete autofilling the input with the highlighted item","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-6.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"p-autocomplete-8","title":"Autocomplete with clear button","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-8.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"p-group-14","title":"Group with select","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-14.jpeg","featured":null,"focus":[0.5,0.5,1.53]},{"slug":"p-combobox-8","title":"Combobox with grouped items","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-8.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-group-11","title":"Group with popup","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-11.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"word-rotate","title":"Word Rotate","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--word-rotate.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-field-15","title":"Field with toggle switch","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-field-15.jpeg","featured":null,"focus":[0.53,0.5,3.33]},{"slug":"p-group-8","title":"Group with end text","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-8.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-popover-1","title":"Popover with a form","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-popover-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"conveyor-loop","title":"Conveyor Loop","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--conveyor-loop.jpeg","featured":null,"focus":[0.5,0.5,3.31]},{"slug":"p-button-16","title":"Button with icon","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-16.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-meter-3","title":"Meter with formatted value","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-meter-3.jpeg","featured":null,"focus":[0.5,0.5,1.59]},{"slug":"p-textarea-4","title":"Disabled textarea","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-textarea-4.jpeg","featured":null,"focus":[0.51,0.51,1.68]},{"slug":"p-autocomplete-10","title":"Autocomplete with grouped items","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-10.jpeg","featured":null,"focus":[0.38,0.5,3.4]},{"slug":"p-autocomplete-11","title":"Autocomplete with limited number of results","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-11.jpeg","featured":null,"focus":[0.38,0.5,3.4]},{"slug":"p-number-field-8","title":"Number field with formatted value","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-8.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-input-group-6","title":"Input group with number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-6.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"text-animate","title":"Text Animate","category":"Motion","description":"","free":false,"thumbnail":"previews/magic--text-animate.jpeg","featured":null,"focus":[0.5,0.5,3.11]},{"slug":"p-drawer-1","title":"Simple bottom drawer with close button","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-combobox-1","title":"Basic combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-1.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-input-group-15","title":"Disabled input group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-15.jpeg","featured":null,"focus":[0.5,0.5,1.74]},{"slug":"p-dialog-6","title":"Dialog with bare footer","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-6.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-dialog-1","title":"Dialog with form","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-1.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-number-field-2","title":"Small number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-2.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-number-field-3","title":"Large number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-3.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-toast-1","title":"Default stacked toast with title and description","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"toast","title":"Toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--toast.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"interactive-hover-button","title":"Interactive Hover Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--interactive-hover-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-input-group-2","title":"Input group with end icon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-2.jpeg","featured":null,"focus":[0.5,0.5,1.74]},{"slug":"p-dialog-3","title":"Nested dialogs","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-3.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-sheet-1","title":"Basic sheet","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-sheet-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-sheet-2","title":"Sheet inset","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-sheet-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"text-shimmer-wave","title":"Text Shimmer Wave","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-shimmer-wave.jpeg","featured":null,"focus":[0.5,0.5,2.77]},{"slug":"type-writer","title":"Typing Text","category":"Utilities","description":"","free":false,"thumbnail":"previews/kokonut--type-writer.jpeg","featured":null,"focus":[0.3,0.49,3.4]},{"slug":"cool-mode","title":"Cool Mode","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--cool-mode.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"popover-form","title":"Popover Form","category":"Forms","description":"","free":false,"thumbnail":"previews/cult--popover-form.jpeg","featured":null,"focus":[0.5,0.4,3.4]},{"slug":"p-switch-1","title":"Basic switch","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-switch-1.jpeg","featured":null,"focus":[0.53,0.5,3.4]},{"slug":"p-combobox-2","title":"Disabled combobox","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-combobox-2.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"p-input-group-16","title":"Input group with loading spinner","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-16.jpeg","featured":null,"focus":[0.5,0.5,1.76]},{"slug":"segmented-control","title":"Segmented Control","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--segmented-control.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"autocomplete","title":"Autocomplete","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--autocomplete.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"p-autocomplete-1","title":"Basic autocomplete","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-1.jpeg","featured":null,"focus":[0.4,0.5,3.4]},{"slug":"text-shimmer","title":"Text Shimmer","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-shimmer.jpeg","featured":null,"focus":[0.5,0.5,2.83]},{"slug":"p-otp-field-3","title":"OTP field with separator","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-3.jpeg","featured":null},{"slug":"p-menu-4","title":"Menu with radio group","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-8","title":"Menu close on click","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-8.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-1","title":"Basic menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-dialog-2","title":"Dialog opened from menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"menu","title":"Menu","category":"Utilities","description":"","free":false,"thumbnail":"previews/coss--menu.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-3","title":"Menu with checkbox","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-9","title":"Menu with checkbox items as switches","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-9.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-6","title":"Menu with group labels","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-5","title":"Menu with link","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-7","title":"Nested menu","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"magnetic","title":"Magnetic","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--magnetic.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toast-8","title":"Anchored error toast after async failure","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-8.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-select-1","title":"Basic select","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-select-1.jpeg","featured":null,"focus":[0.5,0.5,1.75]},{"slug":"shiny-button","title":"Shiny Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--shiny-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-7","title":"Toggle icon group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"in-view","title":"In View","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--in-view.jpeg","featured":null,"focus":[0.5,0.17,3.4]},{"slug":"toolbar-dynamic","title":"Dynamic toolbar","category":"Navigation","description":"Switch between actions in a compact toolbar.","free":false,"thumbnail":"previews/motion--toolbar-dynamic.jpeg","featured":null,"focus":[0.5,0.83,3.4]},{"slug":"p-toggle-5","title":"Large toggle","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"sliding-number","title":"Sliding Number","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--sliding-number.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"typing-animation","title":"Typing Animation","category":"Utilities","description":"","free":false,"thumbnail":"previews/magic--typing-animation.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-input-group-1","title":"Basic input group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-group-1.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-button-18","title":"Custom loading button with manual Spinner","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-18.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"ripple-button","title":"Ripple Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/magic--ripple-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-otp-field-2","title":"Large OTP field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-2.jpeg","featured":null},{"slug":"p-button-11","title":"Extra-large button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-11.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"save-button","title":"Save Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--save-button.jpeg","featured":null,"focus":[0.5,0.24,3.4]},{"slug":"p-dialog-4","title":"Dialog with close confirmation","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-dialog-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-input-4","title":"Disabled input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-4.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-button-4","title":"Destructive button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-10","title":"Large button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-10.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-drawer-12","title":"Responsive edit profile: dialog on desktop, drawer on mobile","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-drawer-12.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-autocomplete-2","title":"Disabled autocomplete","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-autocomplete-2.jpeg","featured":null},{"slug":"p-toggle-4","title":"Small toggle","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-6","title":"Disabled toggle","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-number-field-7","title":"Number field with range","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-7.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-button-3","title":"Secondary button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-input-1","title":"Basic input","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-input-1.jpeg","featured":null,"focus":[0.37,0.5,3.4]},{"slug":"p-tooltip-1","title":"Basic tooltip","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-tooltip-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-menu-2","title":"Menu with hover","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-menu-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-41","title":"Button using the built-in loading prop","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-41.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-4","title":"Toggle group with outline","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-group-9","title":"Vertical group","category":"Layout","description":"","free":false,"thumbnail":"previews/coss--p-group-9.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-9","title":"Small button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-9.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-5","title":"Vertical toggle group with outline","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-5.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"preview-card","title":"Preview Card","category":"Media","description":"","free":false,"thumbnail":"previews/coss--preview-card.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-preview-card-1","title":"Preview card with popup","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-preview-card-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-skeleton-2","title":"Skeleton only","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-skeleton-2.jpeg","featured":null},{"slug":"smooth-drawer","title":"Smooth Drawer","category":"Overlays","description":"","free":false,"thumbnail":"previews/kokonut--smooth-drawer.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-1","title":"Default button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-number-field-4","title":"Disabled number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-4.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"ai-text-loading","title":"AI Text Loading","category":"Feedback","description":"","free":false,"thumbnail":"previews/kokonut--ai-text-loading.jpeg","featured":null,"focus":[0.5,0.5,2.84]},{"slug":"p-otp-field-1","title":"Basic OTP field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-otp-field-1.jpeg","featured":null},{"slug":"otp-field","title":"Otp Field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--otp-field.jpeg","featured":null},{"slug":"p-badge-10","title":"Large badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-10.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-3","title":"Large toggle group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-5","title":"Destructive outline button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-5.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-button-8","title":"Extra-small button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-8.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"morph-popover","title":"Morph Popover","category":"Overlays","description":"","free":false,"thumbnail":"previews/kokonut--morph-popover.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-2","title":"Small toggle group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-8","title":"Multiple selection toggle group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-8.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-9","title":"Toggle group with tooltips","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-9.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-slider-3","title":"Disabled slider","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-slider-3.jpeg","featured":null,"focus":[0.4,0.5,3.38]},{"slug":"p-button-2","title":"Outline button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-group-7","title":"Toggle group with disabled item","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"analyzing-image","title":"Analyzing Image","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--analyzing-image.jpeg","featured":null,"focus":[0.5,0.5,2.79]},{"slug":"disclosure","title":"Disclosure","category":"Utilities","description":"","free":false,"thumbnail":"previews/motion--disclosure.jpeg","featured":null,"focus":[0.33,0.5,3.4]},{"slug":"p-badge-11","title":"Badge with icon","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-11.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-4","title":"Destructive badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-4.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-number-field-1","title":"Basic number field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-number-field-1.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-toggle-group-6","title":"Disabled toggle group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"number-field","title":"Number Field","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--number-field.jpeg","featured":null,"focus":[0.5,0.5,1.78]},{"slug":"p-toast-12","title":"Anchored deduplicated success toast","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-12.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-12","title":"Disabled button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-12.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toast-7","title":"Anchored tooltip-style toast after copy","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-toast-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"undo-button","title":"Undo Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--undo-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-12","title":"Badge with link","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-12.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-1","title":"Basic badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-17","title":"Link rendered as button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-17.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-3","title":"Toggle with icon","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-avatar-1","title":"Avatar with image and fallback","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-toggle-1","title":"Basic toggle","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"switch-button","title":"Switch Button","category":"Forms","description":"","free":false,"thumbnail":"previews/kokonut--switch-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-2","title":"Outline badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-2.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"v0-button","title":"V0 Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/kokonut--v0-button.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-8","title":"Error badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-8.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-badge-5","title":"Info badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-5.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-slider-1","title":"Basic slider","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-slider-1.jpeg","featured":null,"focus":[0.41,0.5,3.02]},{"slug":"p-button-6","title":"Ghost button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-6.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-9","title":"Small badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-9.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-badge-6","title":"Success badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-6.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-badge-3","title":"Secondary badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-3.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"p-toggle-group-1","title":"Basic toggle group","category":"Forms","description":"","free":false,"thumbnail":"previews/coss--p-toggle-group-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-tooltip-3","title":"Toggle group animated tooltip","category":"Overlays","description":"","free":false,"thumbnail":"previews/coss--p-tooltip-3.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-7","title":"Warning badge","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-7.jpeg","featured":null,"focus":[0.5,0.51,3.4]},{"slug":"animated-number","title":"Animated Number","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--animated-number.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-15","title":"Large icon button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-15.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"animated-theme-toggler","title":"Theme Toggler","category":"Forms","description":"","free":false,"thumbnail":"previews/magic--animated-theme-toggler.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-14","title":"Small icon button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-14.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-button-13","title":"Icon button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-13.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"bg-media","title":"Bg Media","category":"Media","description":"","free":false,"thumbnail":"previews/cult--bg-media.jpeg","featured":null},{"slug":"family-button","title":"Family Button","category":"Buttons","description":"","free":false,"thumbnail":"previews/cult--family-button.jpeg","featured":null},{"slug":"p-button-7","title":"Link button","category":"Buttons","description":"","free":false,"thumbnail":"previews/coss--p-button-7.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-badge-13","title":"Badge with count","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-badge-13.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-avatar-2","title":"Fallback-only avatar","category":"Media","description":"","free":false,"thumbnail":"previews/coss--p-avatar-2.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"p-spinner-1","title":"Basic spinner","category":"Feedback","description":"","free":false,"thumbnail":"previews/coss--p-spinner-1.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"symmetric-wave","title":"Symmetric Wave","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--symmetric-wave.jpeg","featured":null,"focus":[0.5,0.5,3.38]},{"slug":"classic","title":"Classic","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--classic.jpeg","featured":null,"focus":[0.5,0.5,3]},{"slug":"wandering-eyes","title":"Wandering Eyes","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--wandering-eyes.jpeg","featured":null,"focus":[0.48,0.5,3.4]},{"slug":"spokes","title":"Spokes","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--spokes.jpeg","featured":null,"focus":[0.5,0.5,3.25]},{"slug":"clock-ring","title":"Clock Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--clock-ring.jpeg","featured":null,"focus":[0.5,0.5,3.19]},{"slug":"text-dots","title":"Text Dots","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--text-dots.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"infinity-square-snake","title":"Infinity Square Snake","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--infinity-square-snake.jpeg","featured":null,"focus":[0.55,0.44,3.4]},{"slug":"text-blink","title":"Text Blink","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--text-blink.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"ring","title":"Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--ring.jpeg","featured":null,"focus":[0.5,0.5,3.34]},{"slug":"infinity","title":"Infinity","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--infinity.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"wave","title":"Wave","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--wave.jpeg","featured":null,"focus":[0.48,0.5,3.4]},{"slug":"morphing-infinity","title":"Morphing Infinity","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--morphing-infinity.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"text-scramble","title":"Text Scramble","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-scramble.jpeg","featured":null,"focus":[0.15,0.5,3.4]},{"slug":"fade-arc","title":"Fade Arc","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--fade-arc.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"swirling","title":"Swirling","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--swirling.jpeg","featured":null,"focus":[0.5,0.5,3.31]},{"slug":"square-snake","title":"Square Snake","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--square-snake.jpeg","featured":null,"focus":[0.53,0.52,3.4]},{"slug":"dots-ring","title":"Dots Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--dots-ring.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"orbit-ring","title":"Orbit Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--orbit-ring.jpeg","featured":null,"focus":[0.5,0.51,3]},{"slug":"dash-ring","title":"Dash Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--dash-ring.jpeg","featured":null,"focus":[0.49,0.53,3.4]},{"slug":"twin-orbit","title":"Twin Orbit","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--twin-orbit.jpeg","featured":null,"focus":[0.51,0.53,3.4]},{"slug":"pulse","title":"Pulse","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--pulse.jpeg","featured":null,"focus":[0.5,0.5,3.19]},{"slug":"bobbing-dots","title":"Bobbing Dots","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--bobbing-dots.jpeg","featured":null,"focus":[0.5,0.52,3.4]},{"slug":"dual-arc","title":"Dual Arc","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--dual-arc.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"text-loop","title":"Text Loop","category":"Motion","description":"","free":false,"thumbnail":"previews/motion--text-loop.jpeg","featured":null,"focus":[0.17,0.51,3.34]},{"slug":"concentric-ring","title":"Concentric Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--concentric-ring.jpeg","featured":null,"focus":[0.5,0.5,3.25]},{"slug":"satellite-ring","title":"Satellite Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--satellite-ring.jpeg","featured":null,"focus":[0.5,0.5,3.25]},{"slug":"pulsating-dots","title":"Pulsating Dots","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--pulsating-dots.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"arc","title":"Arc","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--arc.jpeg","featured":null,"focus":[0.47,0.52,3.4]},{"slug":"spiral","title":"Spiral","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--spiral.jpeg","featured":null,"focus":[0.48,0.49,3.4]},{"slug":"typing","title":"Typing","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--typing.jpeg","featured":null,"focus":[0.5,0.49,3.4]},{"slug":"dots","title":"Dots","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--dots.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"triple-dot-spinner","title":"Triple Dot Spinner","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--triple-dot-spinner.jpeg","featured":null,"focus":[0.5,0.5,3.37]},{"slug":"bars","title":"Bars","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--bars.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"bouncing-dots","title":"Bouncing Dots","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--bouncing-dots.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"quarter-ring","title":"Quarter Ring","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--quarter-ring.jpeg","featured":null,"focus":[0.48,0.48,3.4]},{"slug":"comet-spinner","title":"Comet Spinner","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--comet-spinner.jpeg","featured":null,"focus":[0.53,0.4,3.4]},{"slug":"pulse-dot","title":"Pulse Dot","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--pulse-dot.jpeg","featured":null,"focus":[0.5,0.5,3.4]},{"slug":"diamond","title":"Diamond","category":"Feedback","description":"","free":false,"thumbnail":"previews/loading--diamond.jpeg","featured":null,"focus":[0.5,0.47,3.4]},{"slug":"p-autocomplete-16","title":"Address autocomplete with Google Maps Places API","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-otp-field-8","title":"Alphanumeric OTP field","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-toast-13","title":"Anchored deduplicated error toast","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-popover-3","title":"Animated popovers","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"attachment","title":"Attachment","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-2","title":"Authentication card with actions","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-3","title":"Authentication card with separators","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-21","title":"Auto width select","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-21","title":"Avatar group with a tooltip per member","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-15","title":"Avatar group with the last avatar on top","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-17","title":"Avatar rendered as a button","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-18","title":"Avatar rendered as a link","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-20","title":"Avatar with a tooltip","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-7","title":"Avatar with emerald status dot","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-8","title":"Avatar with muted status dot","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-10","title":"Avatar with notification badge","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-6","title":"Avatar with user icon fallback","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-12","title":"Avatar with verified badge","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-19","title":"Avatars sized from a parent element","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-20","title":"Back link button with chevron","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-15","title":"Badge with number after text","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"base-select","title":"Base Select","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"base-tooltip","title":"Base Tooltip","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-progress-1","title":"Basic progress bar","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-1","title":"Basic radio group","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"bg-animated-fractal-dot-grid","title":"Bg Animated Fractal Dot Grid","category":"Sections","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"bg-animated-gradient","title":"Bg Animated Gradient","category":"Motion","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-toggle-8","title":"Bookmark toggle with tooltip and success toast","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-2","title":"Bottom drawer without drag bar","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-6","title":"Breadcrumb with dot separators","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-4","title":"Breadcrumb with folders icon menu","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-3","title":"Breadcrumb with home icon for home link only","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-5","title":"Breadcrumb with icons before text","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-1","title":"Breadcrumb with menu example","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-breadcrumb-7","title":"Breadcrumb with select dropdown","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"bubble","title":"Bubble","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-27","title":"Button group with QR code icon and sign in","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-30","title":"Button with animated arrow on hover","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-34","title":"Button with animated status dot","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-28","title":"Button with avatar","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-31","title":"Button with keyboard shortcut indicator","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-32","title":"Button with notification badge","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-25","title":"Calendar with 24-hour autocomplete time input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-15","title":"Calendar with current month button","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-17","title":"Calendar with date input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-20","title":"Calendar with date presets","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-7","title":"Calendar with disabled dates","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-8","title":"Calendar with multiple date selection","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-11","title":"Calendar with right-aligned navigation","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-9","title":"Calendar with rounded day buttons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-10","title":"Calendar with rounded range selection style","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-18","title":"Calendar with time input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-19","title":"Calendar with time slots (appointment picker)","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-16","title":"Calendar with today button","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-12","title":"Calendar with week numbers","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-13","title":"Calendar with year-only combobox dropdown","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-14","title":"Calendar without arrow navigation (dropdown only)","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-8","title":"Card within a frame and footer","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-10","title":"Card within a frame with header and footer","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-21","title":"Card-style button with heading and description","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-11","title":"CardFrame with header action","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-table-8","title":"CardFrame with TanStack Table, sorting, and pagination","category":"Data","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"chart","title":"Chart","category":"Data","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"chat","title":"Chat","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-29","title":"Chat input with voice and send buttons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"client-tweet-card","title":"Client Tweet Card","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-27","title":"Code snippet input with language selector","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-10","title":"Color palette radio cards in a four-column grid","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-24","title":"Color palette select with three-color swatches","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-combobox-19","title":"Combobox multiple with stacked chips","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-combobox-20","title":"Combobox multiple with stacked divided chips","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-command-2","title":"Command palette with AI assistant","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-command-1","title":"Command palette with dialog","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-composer-11","title":"Compact rounded adaptive composer with a circular send button","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-composer-10","title":"Composer with leading buttons for mentions and slash actions","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-36","title":"Copy button with feedback","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-switch-6","title":"Custom size switch","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-date-picker-8","title":"Date picker with select-like trigger","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-toast-11","title":"Deduplicated error toast","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"direction","title":"Direction","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-22","title":"Directional pad control buttons","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-2","title":"Disabled radio group","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-40","title":"Download button with progress and cancel action","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-3","title":"Drawer with close button","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-10","title":"Edit profile form with default and bare footer variants","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-16","title":"Emoji rating slider","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-20","title":"Equalizer with vertical sliders","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-alert-7","title":"Error alert","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-19","title":"Expandable show more/less toggle button","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"form","title":"Form","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-frame-2","title":"Frame with collapsible content and delete button","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-frame-4","title":"Frame with multiple stacked panels","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-4","title":"Framed card with footer","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-5","title":"Framed card with header","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-6","title":"Framed card with header and footer","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-card-7","title":"Framed card with no rounded bottom","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-14","title":"Full rounded badge (pill)","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-16","title":"Group with add button and input","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-23","title":"Group with filter label, combobox multi-select, and remove button","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-17","title":"Group with input and currency text","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-19","title":"Group with input and select","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-20","title":"Group with input and text button","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-15","title":"Group with search","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-18","title":"Group with select and input","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-group-22","title":"Group with two number inputs for range","category":"Layout","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-39","title":"Hamburger menu button with animated icon","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"hero-color-panel","title":"Hero Color Panel","category":"Sections","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-35","title":"Icon-only copy button with feedback","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-alert-4","title":"Info alert","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-10","title":"Input group mimicking a URL bar","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-18","title":"Input group with badge and menu","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-24","title":"Input group with character counter","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-22","title":"Input group with clear button","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-16","title":"Input group with end loading spinner","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-7","title":"Input group with end tooltip","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-12","title":"Input group with inner label","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-11","title":"Input group with keyboard shortcut","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-20","title":"Input group with search icon","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-12","title":"Input group with start loading spinner","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-21","title":"Input group with start tooltip","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-18","title":"Input with characters remaining counter","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-15","title":"Input with custom border and background","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-13","title":"Input with label and required indicator","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-14","title":"Input with optional label","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-8","title":"Input with start text and end tooltip","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-14","title":"Large overlapping avatar group","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-9","title":"Large segmented control built with a radio group","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-navigation-3","title":"Large segmented navigation built with links","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-14","title":"Left drawer with swipe area","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-toast-9","title":"Long-running promise toast with cancel","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"marker","title":"Marker","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-otp-field-10","title":"Masked OTP field","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"message","title":"Message","category":"Utilities","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-28","title":"Message composer with attachment buttons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"message-scroller","title":"Message Scroller","category":"Motion","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-19","title":"Mini editor built with input group and toggle","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-date-picker-7","title":"Multiple dates picker","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-8","title":"Nested right drawers with inset variant","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-21","title":"Object position sliders with reset","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-23","title":"Outline like button with count","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-pagination-2","title":"Pagination with previous and next buttons only","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-pagination-3","title":"Pagination with select, and previous and next buttons","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-33","title":"Paired buttons (Cancel/Save)","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-26","title":"Password input with strength indicator","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-9","title":"Password input with toggle visibility","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-autocomplete-15","title":"Pill-shaped autocomplete","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-29","title":"Pill-shaped button with rounded-full styling","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-combobox-15","title":"Pill-shaped combobox","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-19","title":"Pill-shaped input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-number-field-11","title":"Pill-shaped number field","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-15","title":"Pill-shaped select trigger","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-15","title":"Price range slider","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-22","title":"Price slider with histogram","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-24","title":"Pricing calendar with custom day buttons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-4","title":"Radio group card","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-3","title":"Radio group with description","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-21","title":"Range calendar with date presets","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-7","title":"Range slider","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-9","title":"Range slider with collision behavior none","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-10","title":"Range slider with collision behavior swap","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-13","title":"Range slider with inputs","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-17","title":"Read-only input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-10","title":"Read-only textarea","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-20","title":"Removable badge","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-drawer-13","title":"Responsive actions menu: menu on desktop, drawer on mobile","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-20","title":"Rich select with avatars and usernames","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-37","title":"Rotating icon button (FAB-style toggle)","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-composer-9","title":"Rounded adaptive composer with circular actions","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-11","title":"Rounded avatar with notification badge","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-9","title":"Rounded avatar with top-right emerald status","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-input-group-23","title":"Search input group with loader and voice button","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-8","title":"Segmented control built with a radio group","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-navigation-1","title":"Segmented navigation built with links","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-19","title":"Select with avatars","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-17","title":"Select with country flags","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-22","title":"Select with custom border and background","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-18","title":"Select with description in options only","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-12","title":"Select with disabled items","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-16","title":"Select with left text label","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-19","title":"Selectable badge with checkbox","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-13","title":"Shorter textarea with fixed height","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"sidebar","title":"Sidebar","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-meter-2","title":"Simple meter","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-23","title":"Slider in form","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-8","title":"Slider with 3 thumbs","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-11","title":"Slider with icons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-14","title":"Slider with increment and decrement buttons","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-12","title":"Slider with input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-6","title":"Slider with labels above","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-avatar-13","title":"Small overlapping avatar group","category":"Media","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-7","title":"Small segmented control built with a radio group","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-navigation-2","title":"Small segmented navigation built with links","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-38","title":"Social login buttons (Google, X, GitHub)","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-24","title":"Social login icon buttons","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-popover-4","title":"Split button with popover to confirm multiple occurrences","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-button-26","title":"Star button with count badge","category":"Buttons","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-18","title":"Status badge - Failed","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-16","title":"Status badge - Paid","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-badge-17","title":"Status badge - Pending","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-14","title":"Status select with colored dot","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-alert-5","title":"Success alert","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-table-3","title":"Table with TanStack Table and checkboxes","category":"Data","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-table-4","title":"Table with TanStack Table, sorting, and pagination","category":"Data","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-10","title":"Tabs with count badge","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-5","title":"Tabs with full rounded triggers","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-6","title":"Tabs with icon before name","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-7","title":"Tabs with icon before name and underline","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-8","title":"Tabs with icon only","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-12","title":"Tabs with icon only and count badge","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-13","title":"Tabs with icon only and grouped tooltips","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-9","title":"Tabs with underline and icon on top","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-12","title":"Textarea field with required indicator","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-15","title":"Textarea with button aligned left","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-14","title":"Textarea with button aligned right","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-11","title":"Textarea with characters remaining counter","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-9","title":"Textarea with custom border and background","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-7","title":"Textarea with label and required indicator","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-textarea-8","title":"Textarea with optional label","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-radio-group-6","title":"Theme selector with image cards","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-23","title":"Three months calendar","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-combobox-16","title":"Timezone combobox","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-combobox-17","title":"Timezone combobox with search input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-select-13","title":"Timezone select","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-calendar-22","title":"Two months calendar","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-date-picker-9","title":"Two months calendar with range date","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tooltip-4","title":"Vertical group with animated tooltip","category":"Overlays","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-18","title":"Vertical range slider","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-17","title":"Vertical slider","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-slider-19","title":"Vertical slider with input","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-tabs-11","title":"Vertical tabs with underline and icon before name","category":"Navigation","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-alert-6","title":"Warning alert","category":"Feedback","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-switch-9","title":"Weekly availability editor with From/To labeled time groups","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-switch-8","title":"Weekly availability editor with grouped time range controls","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null},{"slug":"p-switch-7","title":"Weekly availability editor with time range combobox pickers","category":"Forms","description":"","free":false,"thumbnail":null,"featured":null}]