{"generated":"2026-10-10T06:29","stats":{"total":10849,"ui_items":10715,"resources":134,"by_kind":{"component":6393,"motion":1875,"section":1167,"theme":620,"page":323,"layout":140,"resource":134,"interaction":63,"primitive":60,"lib":46,"toy":20,"tool":7,"shell":1},"by_source":{"21st":9502,"arc":238,"opensourceui":207,"spaceui":200,"kinetics":152,"shadcn-ui":135,"easyui":108,"kobra":86,"uselayouts":64,"bencho":63,"toolcraft":29,"siso-shell":24,"feralui":20,"devigner":14,"siso":7},"by_status":{"curated":0,"picked":31,"ours":31,"rated":303,"reviewed":1285,"indexed":9199},"by_group":{"motion":2020,"data-display":1512,"marketing":1079,"inputs":902,"actions":677,"navigation":659,"themes":620,"media":558,"overlays":461,"other":402,"data-viz":385,"layout":379,"pages":297,"status":294,"ai-agent":193,"flows":164,"unsorted":66,"lib":40,"tools":7},"by_signal":{},"bookmarked":0,"gone_through":1650,"left_in_corpus":9065,"with_live_preview":735,"frontier_open":0,"frontier_by_area":{},"categories":118,"coverage":[{"category":"motion/background","section":"Marketing Blocks","label":"Backgrounds","total":726,"gone":52,"curated":0,"picked":0},{"category":"themes/shadcn","section":"Templates & Themes","label":"Themes","total":620,"gone":0,"curated":0,"picked":0},{"category":"actions/button","section":"UI Components","label":"Buttons","total":452,"gone":80,"curated":0,"picked":0},{"category":"data-display/card","section":"UI Components","label":"Cards","total":429,"gone":34,"curated":0,"picked":0},{"category":"other","section":"UI Components","label":"Unsorted","total":402,"gone":22,"curated":0,"picked":0},{"category":"motion/text-effect","section":"Marketing Blocks","label":"Texts","total":391,"gone":39,"curated":0,"picked":0},{"category":"marketing/hero","section":"Marketing Blocks","label":"Heroes","total":368,"gone":0,"curated":0,"picked":0},{"category":"pages/templates","section":"Templates & Themes","label":"Templates","total":297,"gone":0,"curated":0,"picked":0},{"category":"status/loader","section":"UI Components","label":"Spinner Loaders","total":270,"gone":18,"curated":0,"picked":1},{"category":"data-viz/chart","section":"UI Components","label":"Charts & Data Viz","total":227,"gone":93,"curated":0,"picked":0},{"category":"inputs/form-field","section":"UI Components","label":"Forms","total":220,"gone":76,"curated":0,"picked":0},{"category":"motion/shader","section":"Marketing Blocks","label":"Shaders","total":210,"gone":0,"curated":0,"picked":0},{"category":"media/gallery","section":"Marketing Blocks","label":"Galleries","total":200,"gone":16,"curated":0,"picked":0},{"category":"navigation/menu","section":"UI Components","label":"Dropdowns & Menus","total":184,"gone":28,"curated":0,"picked":0},{"category":"actions/switch","section":"UI Components","label":"Toggles & Switches","total":165,"gone":36,"curated":0,"picked":1},{"category":"marketing/features","section":"Marketing Blocks","label":"Features","total":164,"gone":1,"curated":0,"picked":0},{"category":"flows/sign-in","section":"UI Components","label":"Sign Ins & Sign Ups","total":159,"gone":34,"curated":0,"picked":0},{"category":"motion/cursor","section":"UI Components","label":"Cursors","total":150,"gone":6,"curated":0,"picked":0},{"category":"motion/ascii","section":"Marketing Blocks","label":"ASCII Art","total":144,"gone":0,"curated":0,"picked":0},{"category":"layout/bento-grid","section":"UI Components","label":"Grids & Bento","total":134,"gone":6,"curated":0,"picked":0},{"category":"data-display/badge","section":"UI Components","label":"Badges","total":128,"gone":36,"curated":0,"picked":0},{"category":"media/carousel","section":"UI Components","label":"Carousels","total":127,"gone":14,"curated":0,"picked":0},{"category":"marketing/pricing","section":"Marketing Blocks","label":"Pricing Sections","total":127,"gone":0,"curated":0,"picked":0},{"category":"ai-agent/composer","section":"AI & Agents","label":"AI Chats & Composers","total":124,"gone":16,"curated":0,"picked":1},{"category":"media/player","section":"Marketing Blocks","label":"Videos","total":123,"gone":11,"curated":0,"picked":0},{"category":"data-display/stat","section":"Marketing Blocks","label":"Stats & KPIs","total":120,"gone":29,"curated":0,"picked":1},{"category":"layout/scroll-area","section":"Marketing Blocks","label":"Scroll Areas","total":120,"gone":17,"curated":0,"picked":0},{"category":"inputs/select","section":"UI Components","label":"Selects","total":114,"gone":31,"curated":0,"picked":0},{"category":"overlays/dialog","section":"UI Components","label":"Dialogs / Modals","total":114,"gone":22,"curated":0,"picked":1},{"category":"data-display/calendar","section":"UI Components","label":"Calendars","total":113,"gone":27,"curated":0,"picked":0},{"category":"motion/gradient","section":"Marketing Blocks","label":"Gradients","total":109,"gone":0,"curated":0,"picked":0},{"category":"data-display/table","section":"UI Components","label":"Tables","total":108,"gone":26,"curated":0,"picked":1},{"category":"inputs/slider","section":"UI Components","label":"Sliders","total":108,"gone":19,"curated":0,"picked":1},{"category":"overlays/toast","section":"UI Components","label":"Notifications & Toasts","total":105,"gone":39,"curated":0,"picked":2},{"category":"data-display/avatar","section":"UI Components","label":"Avatars","total":101,"gone":28,"curated":0,"picked":2},{"category":"data-display/accordion","section":"UI Components","label":"Accordions","total":101,"gone":19,"curated":0,"picked":0},{"category":"navigation/top-nav","section":"Marketing Blocks","label":"Navigation Menus","total":100,"gone":15,"curated":0,"picked":0},{"category":"data-viz/progress-bar","section":"UI Components","label":"Progress","total":97,"gone":21,"curated":0,"picked":0},{"category":"navigation/tabs","section":"UI Components","label":"Tabs","total":93,"gone":14,"curated":0,"picked":1},{"category":"motion/number-ticker","section":"UI Components","label":"Numbers","total":93,"gone":17,"curated":0,"picked":0},{"category":"marketing/cta","section":"Marketing Blocks","label":"Calls to Action","total":88,"gone":0,"curated":0,"picked":0},{"category":"data-display/list","section":"UI Components","label":"Lists","total":87,"gone":24,"curated":0,"picked":0},{"category":"data-display/timeline","section":"Marketing Blocks","label":"Timelines","total":86,"gone":35,"curated":0,"picked":1},{"category":"marketing/testimonials","section":"Marketing Blocks","label":"Testimonials","total":86,"gone":0,"curated":0,"picked":0},{"category":"overlays/alert-banner","section":"UI Components","label":"Alerts","total":81,"gone":17,"curated":0,"picked":0},{"category":"inputs/file-upload","section":"UI Components","label":"File Uploads","total":80,"gone":26,"curated":0,"picked":0},{"category":"data-display/empty-state","section":"UI Components","label":"Empty States","total":79,"gone":6,"curated":0,"picked":1},{"category":"navigation/sidebar","section":"UI Components","label":"Sidebars","total":79,"gone":30,"curated":0,"picked":0},{"category":"inputs/textarea","section":"UI Components","label":"Text Areas","total":75,"gone":17,"curated":0,"picked":0},{"category":"media/icon","section":"UI Components","label":"Icons","total":75,"gone":8,"curated":0,"picked":0},{"category":"marketing/footer","section":"Marketing Blocks","label":"Footers","total":75,"gone":0,"curated":0,"picked":0},{"category":"overlays/tooltip","section":"UI Components","label":"Tooltips","total":73,"gone":11,"curated":0,"picked":1},{"category":"motion/border","section":"Marketing Blocks","label":"Borders","total":73,"gone":0,"curated":0,"picked":0},{"category":"ai-agent","section":"AI & Agents","label":"AI Components","total":67,"gone":46,"curated":0,"picked":0},{"category":"unsorted","section":"UI Components","label":"Unsorted","total":66,"gone":66,"curated":0,"picked":0},{"category":"navigation/wizard-steps","section":"Marketing Blocks","label":"Steppers","total":65,"gone":8,"curated":0,"picked":0},{"category":"layout/dashboard","section":"UI Components","label":"Dashboards","total":65,"gone":4,"curated":0,"picked":0},{"category":"inputs/checkbox","section":"UI Components","label":"Checkboxes","total":64,"gone":12,"curated":0,"picked":0},{"category":"navigation/dock","section":"Marketing Blocks","label":"Docks","total":63,"gone":15,"curated":0,"picked":0},{"category":"data-display/profile","section":"UI Components","label":"Profiles","total":61,"gone":1,"curated":0,"picked":0},{"category":"inputs/search","section":"UI Components","label":"Search Bars","total":59,"gone":15,"curated":0,"picked":0},{"category":"overlays/popover","section":"UI Components","label":"Popovers","total":58,"gone":13,"curated":0,"picked":1},{"category":"motion/marquee","section":"Marketing Blocks","label":"Marquees","total":58,"gone":0,"curated":0,"picked":0},{"category":"inputs/radio","section":"UI Components","label":"Radio Groups","total":50,"gone":9,"curated":0,"picked":0},{"category":"layout/page-shell","section":"UI Components","label":"Page Shells","total":49,"gone":40,"curated":0,"picked":0},{"category":"actions/link","section":"UI Components","label":"Links","total":49,"gone":0,"curated":0,"picked":0},{"category":"inputs/date-picker","section":"UI Components","label":"Date Pickers","total":48,"gone":21,"curated":0,"picked":1},{"category":"navigation/pagination","section":"UI Components","label":"Paginations","total":43,"gone":6,"curated":0,"picked":0},{"category":"data-viz/map","section":"Marketing Blocks","label":"Maps","total":42,"gone":8,"curated":0,"picked":0},{"category":"marketing/faq","section":"Marketing Blocks","label":"FAQs","total":41,"gone":1,"curated":0,"picked":0},{"category":"lib/hook","section":"Marketing Blocks","label":"Hooks","total":40,"gone":0,"curated":0,"picked":0},{"category":"marketing/team","section":"Marketing Blocks","label":"Team Sections","total":40,"gone":1,"curated":0,"picked":0},{"category":"data-display/tree","section":"UI Components","label":"File Trees","total":38,"gone":7,"curated":0,"picked":1},{"category":"motion/globe","section":"UI Components","label":"Globes","total":36,"gone":0,"curated":0,"picked":0},{"category":"inputs/color-picker","section":"UI Components","label":"Color Pickers","total":31,"gone":18,"curated":0,"picked":0},{"category":"motion/tilt-3d","section":"Motion","label":"Tilt & 3D","total":30,"gone":16,"curated":0,"picked":0},{"category":"marketing/announcement","section":"Marketing Blocks","label":"Announcements","total":30,"gone":1,"curated":0,"picked":0},{"category":"media/card-stack","section":"UI Components","label":"Card Stacks","total":29,"gone":23,"curated":0,"picked":0},{"category":"data-display/kanban","section":"UI Components","label":"Kanban Boards","total":23,"gone":10,"curated":0,"picked":0},{"category":"navigation/command-palette","section":"UI Components","label":"Command Palettes","total":21,"gone":20,"curated":0,"picked":1},{"category":"marketing/comparison","section":"Marketing Blocks","label":"Comparisons","total":21,"gone":1,"curated":0,"picked":0},{"category":"marketing/logos","section":"Marketing Blocks","label":"Clients","total":20,"gone":0,"curated":0,"picked":0},{"category":"data-viz/gauge","section":"UI Components","label":"Gauges","total":19,"gone":14,"curated":0,"picked":0},{"category":"marketing","section":"Marketing Blocks","label":"Other blocks","total":19,"gone":11,"curated":0,"picked":0},{"category":"overlays/sheet","section":"UI Components","label":"Sheets & Drawers","total":17,"gone":17,"curated":0,"picked":2},{"category":"inputs/time-picker","section":"UI Components","label":"Time Pickers","total":14,"gone":11,"curated":0,"picked":0},{"category":"status/skeleton","section":"UI Components","label":"Skeletons","total":13,"gone":9,"curated":0,"picked":1},{"category":"data-display/code-block","section":"UI Components","label":"Code Blocks","total":13,"gone":7,"curated":0,"picked":0},{"category":"inputs/rating","section":"UI Components","label":"Ratings","total":12,"gone":7,"curated":0,"picked":0},{"category":"layout/split-pane","section":"UI Components","label":"Split Panes","total":11,"gone":10,"curated":0,"picked":0},{"category":"inputs/otp-input","section":"UI Components","label":"OTP Inputs","total":11,"gone":10,"curated":0,"picked":0},{"category":"status/status-dot","section":"UI Components","label":"Status Dots","total":11,"gone":6,"curated":0,"picked":0},{"category":"data-display/gamification","section":"UI Components","label":"Leaderboards & Rewards","total":11,"gone":1,"curated":0,"picked":0},{"category":"navigation/breadcrumb","section":"UI Components","label":"Breadcrumbs","total":10,"gone":5,"curated":0,"picked":1},{"category":"data-display/chat-thread","section":"AI & Agents","label":"Chat Threads","total":9,"gone":7,"curated":0,"picked":1},{"category":"actions/copy-button","section":"UI Components","label":"Copy Buttons","total":7,"gone":4,"curated":0,"picked":0},{"category":"inputs/combobox","section":"UI Components","label":"Comboboxes","total":7,"gone":7,"curated":0,"picked":0},{"category":"overlays/hover-card","section":"UI Components","label":"Hover Cards","total":6,"gone":6,"curated":0,"picked":1},{"category":"flows/settings","section":"UI Components","label":"Settings","total":5,"gone":4,"curated":0,"picked":0},{"category":"overlays/context-menu","section":"UI Components","label":"Context Menus","total":4,"gone":4,"curated":0,"picked":0},{"category":"actions/segmented-control","section":"UI Components","label":"Segmented Controls","total":4,"gone":3,"curated":0,"picked":0},{"category":"media/image-compare","section":"UI Components","label":"Image Compare","total":4,"gone":4,"curated":0,"picked":0},{"category":"data-display/diff","section":"UI Components","label":"Diffs","total":4,"gone":3,"curated":0,"picked":0},{"category":"inputs/date-range","section":"UI Components","label":"Date Ranges","total":3,"gone":3,"curated":0,"picked":1},{"category":"inputs/tag-input","section":"UI Components","label":"Tag Inputs","total":2,"gone":2,"curated":0,"picked":0},{"category":"inputs/number-input","section":"UI Components","label":"Number Inputs","total":2,"gone":2,"curated":0,"picked":0},{"category":"overlays/lightbox","section":"UI Components","label":"Lightboxes","total":2,"gone":2,"curated":0,"picked":0},{"category":"tools/image-gen","section":"SISO","label":"Image Generation","total":2,"gone":2,"curated":0,"picked":0},{"category":"tools/pick","section":"SISO","label":"Pickers","total":2,"gone":2,"curated":0,"picked":0},{"category":"tools/check","section":"SISO","label":"Checks","total":2,"gone":2,"curated":0,"picked":0},{"category":"data-display/json-viewer","section":"UI Components","label":"JSON Viewers","total":1,"gone":1,"curated":0,"picked":0},{"category":"overlays/notifications","section":"UI Components","label":"Notification Centres","total":1,"gone":1,"curated":0,"picked":1},{"category":"inputs/period-filter","section":"UI Components","label":"Period Filters","total":1,"gone":1,"curated":0,"picked":1},{"category":"ai-agent/run","section":"AI & Agents","label":"Agent Runs","total":1,"gone":1,"curated":0,"picked":1},{"category":"ai-agent/response","section":"AI & Agents","label":"AI Responses","total":1,"gone":1,"curated":0,"picked":1},{"category":"inputs/tuning-panel","section":"UI Components","label":"Tuning Panels","total":1,"gone":1,"curated":0,"picked":1},{"category":"navigation/table-of-contents","section":"UI Components","label":"Tables of Contents","total":1,"gone":0,"curated":0,"picked":0},{"category":"tools/compose","section":"SISO","label":"Compose","total":1,"gone":1,"curated":0,"picked":0}],"good_not_curated":["21st:0xUrvish__inline-edit","21st:appvibed01__split-flap-metrics-board","21st:ln-dev7__post-scheduler","21st:ravikatiyar162__delivery-scheduler","21st:ruixen.ui__daily-timeline-scheduler","21st:aghasisahakyan1__live-feed","21st:andrewlu0__filters","21st:jatin-yadav05__analytics-bento","21st:kokonutd__action-search-bar","21st:ruixen.ui__gradient-chat-input","21st:saurabh10102__be-ui-expanable-action-bar","21st:saurabh10102__be-ui-file-upload"],"left_to_find":["motion/background","themes/shadcn","actions/button","data-display/card","other","motion/text-effect","marketing/hero","pages/templates","data-viz/chart","inputs/form-field","motion/shader","media/gallery","navigation/menu","marketing/features","flows/sign-in","motion/cursor","motion/ascii","layout/bento-grid","data-display/badge","media/carousel","marketing/pricing","media/player","layout/scroll-area","inputs/select"],"authors":1247},"kinds":["component","section","page","theme","shell","layout","motion","interaction","primitive","toy","lib","tool","resource"],"kind_labels":{"component":"Components","section":"Sections","page":"Pages & templates","theme":"Themes","shell":"Shells","layout":"Layouts & dashboards","motion":"Motion & backgrounds","interaction":"Interactions","primitive":"Primitives","toy":"Toys","lib":"Hooks & libs","tool":"Tools","resource":"Discover"},"statuses":["curated","picked","ours","rated","reviewed","indexed"],"public":true,"hub_path":null,"nav":[{"section":"Templates & Themes","items":[{"label":"Templates","categories":["pages/templates"],"n":297,"his":0},{"label":"Themes","categories":["themes/shadcn"],"n":620,"his":0}]},{"section":"Marketing Blocks","items":[{"label":"ASCII Art","categories":["motion/ascii"],"n":144,"his":0},{"label":"Announcements","categories":["marketing/announcement"],"n":30,"his":0},{"label":"Backgrounds","categories":["motion/background"],"n":726,"his":0},{"label":"Borders","categories":["motion/border"],"n":73,"his":0},{"label":"Calls to Action","categories":["marketing/cta"],"n":88,"his":0},{"label":"Clients","categories":["marketing/logos"],"n":20,"his":0},{"label":"Comparisons","categories":["marketing/comparison"],"n":21,"his":0},{"label":"Docks","categories":["navigation/dock"],"n":63,"his":0},{"label":"FAQs","categories":["marketing/faq"],"n":41,"his":0},{"label":"Features","categories":["marketing/features"],"n":164,"his":0},{"label":"Footers","categories":["marketing/footer"],"n":75,"his":0},{"label":"Galleries","categories":["media/gallery"],"n":200,"his":0},{"label":"Gradients","categories":["motion/gradient"],"n":109,"his":0},{"label":"Heroes","categories":["marketing/hero"],"n":368,"his":0},{"label":"Hooks","categories":["lib/hook"],"n":40,"his":0},{"label":"Maps","categories":["data-viz/map"],"n":42,"his":0},{"label":"Marquees","categories":["motion/marquee"],"n":58,"his":0},{"label":"Navigation Menus","categories":["navigation/top-nav"],"n":100,"his":0},{"label":"Pricing Sections","categories":["marketing/pricing"],"n":127,"his":0},{"label":"Scroll Areas","categories":["layout/scroll-area"],"n":120,"his":0},{"label":"Shaders","categories":["motion/shader"],"n":210,"his":0},{"label":"Stats & KPIs","categories":["data-display/stat"],"n":120,"his":0},{"label":"Steppers","categories":["navigation/wizard-steps"],"n":65,"his":0},{"label":"Team Sections","categories":["marketing/team"],"n":40,"his":0},{"label":"Testimonials","categories":["marketing/testimonials"],"n":86,"his":0},{"label":"Texts","categories":["motion/text-effect"],"n":391,"his":0},{"label":"Timelines","categories":["data-display/timeline"],"n":86,"his":0},{"label":"Videos","categories":["media/player"],"n":123,"his":0},{"label":"Other blocks","categories":["marketing"],"n":19,"his":0}]},{"section":"UI Components","items":[{"label":"Accordions","categories":["data-display/accordion"],"n":101,"his":0},{"label":"Alerts","categories":["overlays/alert-banner"],"n":81,"his":0},{"label":"Avatars","categories":["data-display/avatar"],"n":101,"his":0},{"label":"Badges","categories":["data-display/badge"],"n":128,"his":0},{"label":"Breadcrumbs","categories":["navigation/breadcrumb"],"n":10,"his":0},{"label":"Buttons","categories":["actions/button"],"n":452,"his":0},{"label":"Calendars","categories":["data-display/calendar"],"n":113,"his":0},{"label":"Card Stacks","categories":["media/card-stack"],"n":29,"his":0},{"label":"Cards","categories":["data-display/card"],"n":429,"his":0},{"label":"Carousels","categories":["media/carousel"],"n":127,"his":0},{"label":"Charts & Data Viz","categories":["data-viz/chart"],"n":227,"his":0},{"label":"Checkboxes","categories":["inputs/checkbox"],"n":64,"his":0},{"label":"Code Blocks","categories":["data-display/code-block"],"n":13,"his":0},{"label":"Color Pickers","categories":["inputs/color-picker"],"n":31,"his":0},{"label":"Comboboxes","categories":["inputs/combobox"],"n":7,"his":0},{"label":"Command Palettes","categories":["navigation/command-palette"],"n":21,"his":0},{"label":"Context Menus","categories":["overlays/context-menu"],"n":4,"his":0},{"label":"Copy Buttons","categories":["actions/copy-button"],"n":7,"his":0},{"label":"Cursors","categories":["motion/cursor"],"n":150,"his":0},{"label":"Dashboards","categories":["layout/dashboard"],"n":65,"his":0},{"label":"Date Pickers","categories":["inputs/date-picker"],"n":48,"his":0},{"label":"Date Ranges","categories":["inputs/date-range"],"n":3,"his":0},{"label":"Dialogs / Modals","categories":["overlays/dialog"],"n":114,"his":0},{"label":"Diffs","categories":["data-display/diff"],"n":4,"his":0},{"label":"Dropdowns & Menus","categories":["navigation/menu"],"n":184,"his":0},{"label":"Empty States","categories":["data-display/empty-state"],"n":79,"his":0},{"label":"File Trees","categories":["data-display/tree"],"n":38,"his":0},{"label":"File Uploads","categories":["inputs/file-upload"],"n":80,"his":0},{"label":"Forms","categories":["inputs/form-field"],"n":220,"his":0},{"label":"Gauges","categories":["data-viz/gauge"],"n":19,"his":0},{"label":"Globes","categories":["motion/globe"],"n":36,"his":0},{"label":"Grids & Bento","categories":["layout/bento-grid"],"n":134,"his":0},{"label":"Hover Cards","categories":["overlays/hover-card"],"n":6,"his":0},{"label":"Icons","categories":["media/icon"],"n":75,"his":0},{"label":"Image Compare","categories":["media/image-compare"],"n":4,"his":0},{"label":"JSON Viewers","categories":["data-display/json-viewer"],"n":1,"his":0},{"label":"Kanban Boards","categories":["data-display/kanban"],"n":23,"his":0},{"label":"Leaderboards & Rewards","categories":["data-display/gamification"],"n":11,"his":0},{"label":"Lightboxes","categories":["overlays/lightbox"],"n":2,"his":0},{"label":"Links","categories":["actions/link"],"n":49,"his":0},{"label":"Lists","categories":["data-display/list"],"n":87,"his":0},{"label":"Notification Centres","categories":["overlays/notifications"],"n":1,"his":0},{"label":"Notifications & Toasts","categories":["overlays/toast"],"n":105,"his":0},{"label":"Number Inputs","categories":["inputs/number-input"],"n":2,"his":0},{"label":"Numbers","categories":["motion/number-ticker"],"n":93,"his":0},{"label":"OTP Inputs","categories":["inputs/otp-input"],"n":11,"his":0},{"label":"Page Shells","categories":["layout/page-shell"],"n":49,"his":0},{"label":"Paginations","categories":["navigation/pagination"],"n":43,"his":0},{"label":"Period Filters","categories":["inputs/period-filter"],"n":1,"his":0},{"label":"Popovers","categories":["overlays/popover"],"n":58,"his":0},{"label":"Profiles","categories":["data-display/profile"],"n":61,"his":0},{"label":"Progress","categories":["data-viz/progress-bar"],"n":97,"his":0},{"label":"Radio Groups","categories":["inputs/radio"],"n":50,"his":0},{"label":"Ratings","categories":["inputs/rating"],"n":12,"his":0},{"label":"Search Bars","categories":["inputs/search"],"n":59,"his":0},{"label":"Segmented Controls","categories":["actions/segmented-control"],"n":4,"his":0},{"label":"Selects","categories":["inputs/select"],"n":114,"his":0},{"label":"Settings","categories":["flows/settings"],"n":5,"his":0},{"label":"Sheets & Drawers","categories":["overlays/sheet"],"n":17,"his":0},{"label":"Sidebars","categories":["navigation/sidebar"],"n":79,"his":0},{"label":"Sign Ins & Sign Ups","categories":["flows/sign-in"],"n":159,"his":0},{"label":"Skeletons","categories":["status/skeleton"],"n":13,"his":0},{"label":"Sliders","categories":["inputs/slider"],"n":108,"his":0},{"label":"Spinner Loaders","categories":["status/loader"],"n":270,"his":0},{"label":"Split Panes","categories":["layout/split-pane"],"n":11,"his":0},{"label":"Status Dots","categories":["status/status-dot"],"n":11,"his":0},{"label":"Tables","categories":["data-display/table"],"n":108,"his":0},{"label":"Tables of Contents","categories":["navigation/table-of-contents"],"n":1,"his":0},{"label":"Tabs","categories":["navigation/tabs"],"n":93,"his":0},{"label":"Tag Inputs","categories":["inputs/tag-input"],"n":2,"his":0},{"label":"Text Areas","categories":["inputs/textarea"],"n":75,"his":0},{"label":"Time Pickers","categories":["inputs/time-picker"],"n":14,"his":0},{"label":"Toggles & Switches","categories":["actions/switch"],"n":165,"his":0},{"label":"Tooltips","categories":["overlays/tooltip"],"n":73,"his":0},{"label":"Tuning Panels","categories":["inputs/tuning-panel"],"n":1,"his":0},{"label":"Unsorted","categories":["other","unsorted"],"n":468,"his":0}]},{"section":"AI & Agents","items":[{"label":"AI Chats & Composers","categories":["ai-agent/composer"],"n":124,"his":0},{"label":"AI Components","categories":["ai-agent"],"n":67,"his":0},{"label":"AI Responses","categories":["ai-agent/response"],"n":1,"his":0},{"label":"Agent Runs","categories":["ai-agent/run"],"n":1,"his":0},{"label":"Chat Threads","categories":["data-display/chat-thread"],"n":9,"his":0}]},{"section":"Motion","items":[{"label":"Tilt & 3D","categories":["motion/tilt-3d"],"n":30,"his":0}]},{"section":"SISO","items":[{"label":"Checks","categories":["tools/check"],"n":2,"his":0},{"label":"Compose","categories":["tools/compose"],"n":1,"his":0},{"label":"Image Generation","categories":["tools/image-gen"],"n":2,"his":0},{"label":"Pickers","categories":["tools/pick"],"n":2,"his":0}]}],"groups":{"actions":{"actions/button":452,"actions/switch":165,"actions/link":49,"actions/copy-button":7,"actions/segmented-control":4},"navigation":{"navigation/menu":184,"navigation/top-nav":100,"navigation/tabs":93,"navigation/sidebar":79,"navigation/wizard-steps":65,"navigation/dock":63,"navigation/pagination":43,"navigation/command-palette":21,"navigation/breadcrumb":10,"navigation/table-of-contents":1},"overlays":{"overlays/dialog":114,"overlays/toast":105,"overlays/alert-banner":81,"overlays/tooltip":73,"overlays/popover":58,"overlays/sheet":17,"overlays/hover-card":6,"overlays/context-menu":4,"overlays/lightbox":2,"overlays/notifications":1},"data-display":{"data-display/card":429,"data-display/badge":128,"data-display/stat":120,"data-display/calendar":113,"data-display/table":108,"data-display/avatar":101,"data-display/accordion":101,"data-display/list":87,"data-display/timeline":86,"data-display/empty-state":79,"data-display/profile":61,"data-display/tree":38,"data-display/kanban":23,"data-display/code-block":13,"data-display/gamification":11,"data-display/chat-thread":9,"data-display/diff":4,"data-display/json-viewer":1},"inputs":{"inputs/form-field":220,"inputs/select":114,"inputs/slider":108,"inputs/file-upload":80,"inputs/textarea":75,"inputs/checkbox":64,"inputs/search":59,"inputs/radio":50,"inputs/date-picker":48,"inputs/color-picker":31,"inputs/time-picker":14,"inputs/rating":12,"inputs/otp-input":11,"inputs/combobox":7,"inputs/date-range":3,"inputs/tag-input":2,"inputs/number-input":2,"inputs/period-filter":1,"inputs/tuning-panel":1},"data-viz":{"data-viz/chart":227,"data-viz/progress-bar":97,"data-viz/map":42,"data-viz/gauge":19},"status":{"status/loader":270,"status/skeleton":13,"status/status-dot":11},"motion":{"motion/background":726,"motion/text-effect":391,"motion/shader":210,"motion/cursor":150,"motion/ascii":144,"motion/gradient":109,"motion/number-ticker":93,"motion/border":73,"motion/marquee":58,"motion/globe":36,"motion/tilt-3d":30},"layout":{"layout/bento-grid":134,"layout/scroll-area":120,"layout/dashboard":65,"layout/page-shell":49,"layout/split-pane":11},"media":{"media/gallery":200,"media/carousel":127,"media/player":123,"media/icon":75,"media/card-stack":29,"media/image-compare":4},"ai-agent":{"ai-agent/composer":124,"ai-agent":67,"ai-agent/run":1,"ai-agent/response":1},"unsorted":{"unsorted":66},"marketing":{"marketing/hero":368,"marketing/features":164,"marketing/pricing":127,"marketing/cta":88,"marketing/testimonials":86,"marketing/footer":75,"marketing/faq":41,"marketing/team":40,"marketing/announcement":30,"marketing/comparison":21,"marketing/logos":20,"marketing":19},"flows":{"flows/sign-in":159,"flows/settings":5},"other":{"other":402},"lib":{"lib/hook":40},"discover":{"discover/21st-libraries":134},"pages":{"pages/templates":297},"themes":{"themes/shadcn":620},"tools":{"tools/image-gen":2,"tools/pick":2,"tools/check":2,"tools/compose":1}},"items":[{"id":"arc:button","t":"Button","d":"A clear, responsive action with quiet secondary states.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/button","pc":"Arc","lv":1},{"id":"arc:action-button","t":"Action button","d":"A compact button for frequent toolbar actions.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/action-button","pc":"Arc","lv":1},{"id":"arc:split-button","t":"Split button","d":"A primary action with a menu of nearby alternatives.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/split-button","pc":"Arc","lv":1},{"id":"arc:button-group","t":"Button group","d":"Related actions joined into one surface with hairline dividers: a hover highlight glides between segments, the pressed one answers in place, and an attached menu can close the row.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/button-group","pc":"Arc","lv":1},{"id":"arc:floating-button-group","t":"Floating button group","d":"Separate soft buttons in a quiet tray, with one shared highlight that morphs from button to button as you move, and a pressed state that settles in place.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/floating-button-group","pc":"Arc","lv":1},{"id":"arc:expanding-button-group","t":"Expanding button group","d":"Icon buttons in a compact group: the one you point at or focus grows to reveal its label while its neighbours slide aside, and an action confirms in place.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/expanding-button-group","pc":"Arc","lv":1},{"id":"arc:dropdown-menu","t":"Dropdown menu","d":"A focused list of actions anchored to a trigger.","k":"component","s":"arc","c":"navigation/menu","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/dropdown-menu","pc":"Arc","lv":1},{"id":"arc:context-menu","t":"Context menu","d":"Secondary actions kept close to the selected object.","k":"component","s":"arc","c":"overlays/context-menu","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/context-menu","pc":"Arc","lv":1},{"id":"arc:copy-button","t":"Copy button","d":"Copy a value with immediate confirmation.","k":"component","s":"arc","c":"actions/copy-button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/copy-button","pc":"Arc","lv":1},{"id":"arc:drawer","t":"Drawer","d":"A temporary side surface for focused work.","k":"component","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/drawer","pc":"Arc","lv":1},{"id":"arc:theme-switch","t":"Theme switcher","d":"Four smooth ways to move between light and dark appearance.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/theme-switch","pc":"Arc","lv":1},{"id":"arc:theme-switch-eclipse","t":"Eclipse","d":"The next appearance crosses the page like an eclipse.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/theme-switch-eclipse","pc":"Arc","lv":1},{"id":"arc:theme-switch-split","t":"Split","d":"The next appearance opens from a slim center seam.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/theme-switch-split","pc":"Arc","lv":1},{"id":"arc:theme-switch-rise","t":"Rise","d":"The next appearance rises into place.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/theme-switch-rise","pc":"Arc","lv":1},{"id":"arc:avatar","t":"Avatar","d":"A compact identity marker for people and accounts.","k":"component","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/avatar","pc":"Arc","lv":1},{"id":"arc:avatar-group","t":"Avatar group","d":"Show a team or set of contributors in a small space.","k":"component","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/avatar-group","pc":"Arc","lv":1},{"id":"arc:input","t":"Input","d":"A single line field with clear labels and useful states.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/input","pc":"Arc","lv":1},{"id":"arc:textarea","t":"Textarea","d":"A multiline field for notes, descriptions, and longer text.","k":"component","s":"arc","c":"inputs/textarea","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/textarea","pc":"Arc","lv":1},{"id":"arc:select","t":"Select","d":"A compact choice field with a keyboard friendly menu.","k":"component","s":"arc","c":"inputs/select","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/select","pc":"Arc","lv":1},{"id":"arc:combobox","t":"Combobox","d":"Search and select from a list without leaving the field.","k":"component","s":"arc","c":"inputs/combobox","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/combobox","pc":"Arc","lv":1},{"id":"arc:checkbox","t":"Checkbox","d":"A binary choice with a precise, legible state.","k":"component","s":"arc","c":"inputs/checkbox","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/checkbox","pc":"Arc","lv":1},{"id":"arc:switch","t":"Switch","d":"A tactile toggle for settings that take effect immediately.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/switch","pc":"Arc","lv":1},{"id":"arc:multi-select","t":"Multi-select","d":"Select several values while keeping the field readable.","k":"component","s":"arc","c":"inputs/tag-input","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/multi-select","pc":"Arc","lv":1},{"id":"arc:number-field","t":"Number field","d":"Enter a bounded number with clear increment controls.","k":"component","s":"arc","c":"inputs/number-input","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/number-field","pc":"Arc","lv":1},{"id":"arc:password-field","t":"Password field","d":"Capture sensitive text with a visible reveal control.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/password-field","pc":"Arc","lv":1},{"id":"arc:search-field","t":"Search field","d":"A recognizable search entry point with clear affordances.","k":"component","s":"arc","c":"inputs/search","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/search-field","pc":"Arc","lv":1},{"id":"arc:tag-input","t":"Tag input","d":"Turn short text values into removable tags.","k":"component","s":"arc","c":"data-display/badge","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/tag-input","pc":"Arc","lv":1},{"id":"arc:file-dropzone","t":"File dropzone","d":"A generous target for dropping one or more files.","k":"component","s":"arc","c":"inputs/file-upload","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/file-dropzone","pc":"Arc","lv":1},{"id":"arc:radio-group","t":"Radio group","d":"Choose one option from a visible set.","k":"component","s":"arc","c":"inputs/radio","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/radio-group","pc":"Arc","lv":1},{"id":"arc:segmented-control","t":"Segmented control","d":"Switch between a small set of related views.","k":"component","s":"arc","c":"actions/segmented-control","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/segmented-control","pc":"Arc","lv":1},{"id":"arc:calendar","t":"Calendar","d":"Browse dates in a clear, compact month view.","k":"component","s":"arc","c":"inputs/date-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/calendar","pc":"Arc","lv":1},{"id":"arc:date-picker","t":"Date picker","d":"Choose a date without losing context.","k":"component","s":"arc","c":"inputs/date-picker","g":"inputs","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/date-picker","pc":"Arc","lv":1},{"id":"arc:time-picker","t":"Time picker","d":"Choose a time with sensible keyboard behavior.","k":"component","s":"arc","c":"inputs/time-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/time-picker","pc":"Arc","lv":1},{"id":"arc:accordion","t":"Accordion","d":"Progressively reveal supporting information in place.","k":"component","s":"arc","c":"data-display/accordion","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/accordion","pc":"Arc","lv":1},{"id":"arc:dialog","t":"Dialog","d":"A focused surface for decisions that need attention.","k":"component","s":"arc","c":"overlays/dialog","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/dialog","pc":"Arc","lv":1},{"id":"arc:popover","t":"Popover","d":"A small anchored surface for contextual information.","k":"component","s":"arc","c":"overlays/popover","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/popover","pc":"Arc","lv":1},{"id":"arc:tooltip","t":"Tooltip","d":"Short supporting text for unfamiliar controls.","k":"component","s":"arc","c":"overlays/tooltip","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/tooltip","pc":"Arc","lv":1},{"id":"arc:tabs","t":"Tabs","d":"Switch between related content in the same context.","k":"component","s":"arc","c":"navigation/tabs","g":"navigation","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/tabs","pc":"Arc","lv":1},{"id":"arc:expandable-card","t":"Expandable card","d":"Give a dense card more room when requested.","k":"component","s":"arc","c":"data-display/card","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/expandable-card","pc":"Arc","lv":1},{"id":"arc:breadcrumb","t":"Breadcrumb","d":"Show where a page sits in a hierarchy.","k":"component","s":"arc","c":"navigation/breadcrumb","g":"navigation","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/breadcrumb","pc":"Arc","lv":1},{"id":"arc:alert","t":"Alert","d":"A persistent message that helps people recover or continue.","k":"component","s":"arc","c":"overlays/alert-banner","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/alert","pc":"Arc","lv":1},{"id":"arc:toast","t":"Toast","d":"Brief confirmation for a completed background action.","k":"component","s":"arc","c":"overlays/toast","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/toast","pc":"Arc","lv":1},{"id":"arc:progress","t":"Progress","d":"Show how much of a known task is complete.","k":"component","s":"arc","c":"data-viz/progress-bar","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/progress","pc":"Arc","lv":1},{"id":"arc:skeleton","t":"Skeleton","d":"Reserve space while content is still loading.","k":"component","s":"arc","c":"status/skeleton","g":"status","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/skeleton","pc":"Arc","lv":1},{"id":"arc:badge","t":"Badge","d":"A small label for status, category, or metadata.","k":"component","s":"arc","c":"data-display/badge","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/badge","pc":"Arc","lv":1},{"id":"arc:card","t":"Card","d":"A contained group of related content and actions.","k":"component","s":"arc","c":"data-display/card","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/card","pc":"Arc","lv":1},{"id":"arc:metric-card","t":"Metric card","d":"A compact summary for a number that needs context.","k":"component","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/metric-card","pc":"Arc","lv":1},{"id":"arc:empty-state","t":"Empty state","d":"A useful next step when there is nothing to show yet.","k":"component","s":"arc","c":"data-display/empty-state","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/empty-state","pc":"Arc","lv":1},{"id":"arc:tree-view","t":"Tree view","d":"Navigate nested folders and structured content.","k":"component","s":"arc","c":"data-display/tree","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/tree-view","pc":"Arc","lv":1},{"id":"arc:pagination","t":"Pagination","d":"Move through a long collection with clear bounds.","k":"component","s":"arc","c":"navigation/pagination","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/pagination","pc":"Arc","lv":1},{"id":"arc:filter-toolbar","t":"Filter toolbar","d":"Keep collection filters close and easy to reset.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/filter-toolbar","pc":"Arc","lv":1},{"id":"arc:sortable-data-table","t":"Sortable data table","d":"Compare structured records with sortable columns.","k":"component","s":"arc","c":"data-display/table","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/sortable-data-table","pc":"Arc","lv":1},{"id":"arc:sparkline","t":"Sparkline","d":"Show a compact trend beside a value.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/sparkline","pc":"Arc","lv":1},{"id":"arc:gauge","t":"Gauge","d":"Show a value against a known range.","k":"component","s":"arc","c":"data-viz/gauge","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/gauge","pc":"Arc","lv":1},{"id":"arc:animated-counter","t":"Animated counter","d":"Give changing totals a clear sense of movement.","k":"component","s":"arc","c":"motion/number-ticker","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/animated-counter","pc":"Arc","lv":1},{"id":"arc:code-block","t":"Code block","d":"Present code with legible hierarchy and copy access.","k":"component","s":"arc","c":"data-display/code-block","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/code-block","pc":"Arc","lv":1},{"id":"arc:text-reveal","t":"Text reveal","d":"Reveal a short piece of content with restrained motion.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/text-reveal","pc":"Arc","lv":1},{"id":"arc:in-view-title","t":"In-view title","d":"Bring a section title in as it scrolls into view.","k":"component","s":"arc","c":"layout/scroll-area","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/in-view-title","pc":"Arc","lv":1},{"id":"arc:text-morph","t":"Text morph","d":"Morph a label into its next state, letter by letter.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/text-morph","pc":"Arc","lv":1},{"id":"arc:text-shimmer","t":"Text shimmer","d":"Show ongoing work with a calm light across the words.","k":"component","s":"arc","c":"status/loader","g":"status","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/text-shimmer","pc":"Arc","lv":1},{"id":"arc:hold-to-confirm","t":"Hold to confirm","d":"Confirm a destructive action by holding, not tapping.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/hold-to-confirm","pc":"Arc","lv":1},{"id":"arc:swipe-actions","t":"Swipe actions","d":"Reveal row actions with a swipe, or from the same actions in a menu.","k":"component","s":"arc","c":"media/card-stack","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/swipe-actions","pc":"Arc","lv":1},{"id":"arc:slider","t":"Slider","d":"Pick a value or a range on a track that follows your finger.","k":"component","s":"arc","c":"inputs/slider","g":"inputs","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/slider","pc":"Arc","lv":1},{"id":"arc:inline-edit","t":"Inline edit","d":"Rename in place: the text becomes a field without moving.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/inline-edit","pc":"Arc","lv":1},{"id":"arc:expanding-search","t":"Expanding search","d":"An icon that morphs into a search field with results beneath it.","k":"component","s":"arc","c":"inputs/search","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/expanding-search","pc":"Arc","lv":1},{"id":"arc:chip-group","t":"Chip group","d":"Filter by a few facets with chips that morph as you pick them.","k":"component","s":"arc","c":"data-display/badge","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/chip-group","pc":"Arc","lv":1},{"id":"arc:password-strength","t":"Password strength","d":"Show how strong a new password is while it is typed.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/password-strength","pc":"Arc","lv":1},{"id":"arc:bottom-sheet","t":"Bottom sheet","d":"A sheet that rests at a peek or full height and follows your finger.","k":"component","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/bottom-sheet","pc":"Arc","lv":1},{"id":"arc:hover-card","t":"Hover card","d":"Preview a person or link on hover or focus without leaving the page.","k":"component","s":"arc","c":"overlays/hover-card","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/hover-card","pc":"Arc","lv":1},{"id":"arc:resizable-panels","t":"Resizable panels","d":"Trade space between panes by dragging the divider between them.","k":"component","s":"arc","c":"layout/split-pane","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/resizable-panels","pc":"Arc","lv":1},{"id":"arc:toast-stack","t":"Toast stack","d":"Stack short results at the edge until you reach for them.","k":"component","s":"arc","c":"overlays/toast","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/toast-stack","pc":"Arc","lv":1},{"id":"arc:usage-meter","t":"Usage meter","d":"Show what fills an allowance and how close it is to the limit.","k":"component","s":"arc","c":"data-viz/gauge","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/usage-meter","pc":"Arc","lv":1},{"id":"arc:image-compare","t":"Image compare","d":"Drag a divider across two images to see what changed.","k":"component","s":"arc","c":"media/image-compare","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/image-compare","pc":"Arc","lv":1},{"id":"arc:carousel","t":"Carousel","d":"Browse a row of slides by dragging, flicking, or arrowing through them.","k":"component","s":"arc","c":"media/carousel","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/carousel","pc":"Arc","lv":1},{"id":"arc:card-stack","t":"Card stack","d":"Review a deck one card at a time, with a throw and an undo.","k":"component","s":"arc","c":"media/card-stack","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/card-stack","pc":"Arc","lv":1},{"id":"arc:morph-nav","t":"Morph nav","d":"A navigation bar that morphs into rich menus, search, and a compact state as one surface.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/morph-nav","pc":"Arc"},{"id":"arc:dock","t":"Dock","d":"A floating tool dock with a gliding label, a springy selection, and trays that grow out of it.","k":"component","s":"arc","c":"navigation/dock","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/dock","pc":"Arc"},{"id":"arc:wallet-stack","t":"Wallet stack","d":"Fan a stack of cards and lift one out to see its activity.","k":"component","s":"arc","c":"media/card-stack","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/wallet-stack","pc":"Arc"},{"id":"arc:liquid-tab-bar","t":"Liquid tab bar","d":"Tabs with a liquid selection that stretches between them and fills in icons as it passes.","k":"component","s":"arc","c":"navigation/tabs","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/liquid-tab-bar","pc":"Arc"},{"id":"arc:now-playing","t":"Now playing","d":"Grow a mini player into the full player in one continuous morph.","k":"component","s":"arc","c":"media/player","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/now-playing","pc":"Arc"},{"id":"arc:photo-grid","t":"Photo grid","d":"Pinch through zoom levels and open any photo straight from its cell.","k":"component","s":"arc","c":"media/gallery","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/photo-grid","pc":"Arc"},{"id":"arc:control-center","t":"Control center","d":"Workspace quick settings: tiles that morph into detail, a duration dial, and rubber-banded meters.","k":"component","s":"arc","c":"data-viz/gauge","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/control-center","pc":"Arc"},{"id":"arc:cover-flow","t":"Cover flow","d":"A depth rail of images you can throw, with soft grounded shadows and a quiet reflection.","k":"component","s":"arc","c":"navigation/sidebar","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/cover-flow","pc":"Arc"},{"id":"arc:activity-rings","t":"Activity rings","d":"Daily goals as tick rings that sweep, count up, and trace a second lap past 100%.","k":"component","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/activity-rings","pc":"Arc"},{"id":"arc:bar-chart","t":"Bar chart","d":"Compare one measure across days and scrub any bar for its value.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/bar-chart","pc":"Arc","lv":1},{"id":"arc:activity-heatmap","t":"Activity heatmap","d":"See a year of activity at a glance, one square per day.","k":"component","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/activity-heatmap","pc":"Arc","lv":1},{"id":"arc:timeline","t":"Timeline","d":"Follow what happened, newest first, grouped by day.","k":"component","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/timeline","pc":"Arc","lv":1},{"id":"arc:stretch-refresh","t":"Stretch refresh","d":"Pull a feed down and a line stretches to tell you when to let go.","k":"component","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/stretch-refresh","pc":"Arc"},{"id":"arc:orbit-menu","t":"Orbit menu","d":"Hold a button and its actions orbit out, ready to pick with a drag.","k":"component","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/orbit-menu","pc":"Arc"},{"id":"arc:time-dial","t":"Time dial","d":"Spin a dial to pick an hour and see which team cities are at work.","k":"component","s":"arc","c":"data-viz/gauge","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/time-dial","pc":"Arc"},{"id":"arc:booking-pill","t":"Booking pill","d":"One pill that reshapes through party size, date, time, and a ticket.","k":"component","s":"arc","c":"data-display/badge","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/booking-pill","pc":"Arc"},{"id":"arc:voice-recorder","t":"Voice recorder","d":"Record with a live waveform, review and scrub, then send the take into the thread.","k":"component","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/voice-recorder","pc":"Arc"},{"id":"arc:user-menu","t":"User menu","d":"Your account, settings, theme, and sign out behind the avatar. Opens as a bottom sheet on phones.","k":"component","s":"arc","c":"navigation/menu","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/user-menu","pc":"Arc","lv":1},{"id":"arc:data-grid","t":"Data grid","d":"A spreadsheet grid with range selection, inline editing, a fill handle, and animated sorting.","k":"component","s":"arc","c":"data-display/table","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/data-grid","pc":"Arc"},{"id":"arc:lightbox-gallery","t":"Lightbox gallery","d":"A masonry grid where photos zoom from their slot into a viewer you can swipe, pinch, and drag away.","k":"component","s":"arc","c":"overlays/lightbox","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/lightbox-gallery","pc":"Arc"},{"id":"arc:stepper","t":"Stepper","d":"Show where a person is in a multi-step flow and what is done.","k":"component","s":"arc","c":"navigation/wizard-steps","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/stepper","pc":"Arc","lv":1},{"id":"arc:morph-loader","t":"Morph loader","d":"Tiny loaders that morph between shapes and fold into a check or a cross when done.","k":"component","s":"arc","c":"status/loader","g":"status","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/morph-loader","pc":"Arc"},{"id":"arc:voice-orb","t":"Voice orb","d":"A voice mode orb that listens, thinks, and speaks, with a live transcript and call controls.","k":"component","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/voice-orb","pc":"Arc"},{"id":"arc:signature-pad","t":"Signature pad","d":"Smooth ink that thins with speed, with undo, replay, and PNG or SVG export.","k":"component","s":"arc","c":"unsorted","g":"unsorted","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/signature-pad","pc":"Arc","lv":1},{"id":"arc:date-range-picker","t":"Date range picker","d":"A range picker that grows from its trigger into two months with presets and a stretching range highlight.","k":"component","s":"arc","c":"inputs/date-range","g":"inputs","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/date-range-picker","pc":"Arc","lv":1},{"id":"arc:color-picker","t":"Color picker","d":"A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.","k":"component","s":"arc","c":"inputs/color-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/color-picker","pc":"Arc","lv":1},{"id":"arc:morph-select","t":"Morph select","d":"A select whose trigger grows into the list, with a gliding highlight and type-ahead.","k":"component","s":"arc","c":"inputs/select","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/morph-select","pc":"Arc","lv":1},{"id":"arc:action-morph","t":"Action morph","d":"A floating button that morphs into a quick-action menu, then an inline form, then back with a check.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/action-morph","pc":"Arc"},{"id":"arc:share-sheet","t":"Share sheet","d":"A Share button that opens into a panel with copy link, access level, channels, and people to send to.","k":"component","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/share-sheet","pc":"Arc"},{"id":"arc:line-chart","t":"Line chart","d":"A multi-series line chart with a gliding crosshair, legend toggles, and paths that morph between ranges.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/line-chart","pc":"Arc","lv":1},{"id":"arc:donut-chart","t":"Donut chart","d":"A donut whose arcs morph between datasets, with the active value rolling into the center.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/donut-chart","pc":"Arc","lv":1},{"id":"arc:streamgraph","t":"Streamgraph","d":"Layered streams on a wiggle baseline that morph between ranges, with a layer you can isolate and read week by week.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/streamgraph","pc":"Arc","lv":1},{"id":"arc:brush-chart","t":"Brush chart","d":"A dense time series with an overview strip: drag a window to zoom, resize it by its handles, and read events in place.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/brush-chart","pc":"Arc","lv":1},{"id":"arc:race-bar-chart","t":"Race bar chart","d":"A ranking over time: bars overtake each other on springs, values count up, and a timeline you can play or scrub.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/race-bar-chart","pc":"Arc"},{"id":"arc:ridgeline","t":"Ridgeline","d":"Overlapping distributions, one ridge per group: hover to lift a ridge and read its quartiles, switch datasets and every curve morphs.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/ridgeline","pc":"Arc","lv":1},{"id":"arc:treemap","t":"Treemap","d":"A squarified treemap: click to drill and the tiles grow to fill the view, with a breadcrumb back and metrics that morph every tile.","k":"component","s":"arc","c":"data-display/tree","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/treemap","pc":"Arc","lv":1},{"id":"arc:sunburst","t":"Sunburst","d":"A hierarchy in rings: click a segment and every arc swings around it as the new centre, with a breadcrumb back and a rolling total.","k":"component","s":"arc","c":"navigation/breadcrumb","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/sunburst","pc":"Arc"},{"id":"arc:sankey-flow","t":"Sankey flow","d":"Flows between stages as ribbons with drifting particles; hover any node or ribbon to pour its share through the whole journey.","k":"component","s":"arc","c":"motion/background","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/sankey-flow","pc":"Arc"},{"id":"arc:waffle-chart","t":"Waffle chart","d":"A ten by ten unit chart where every cell is one percent, and cells fly to their new group when the data changes.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/waffle-chart","pc":"Arc","lv":1},{"id":"arc:funnel-chart","t":"Funnel chart","d":"A tapered conversion funnel with drop-off at every step, a device split that morphs the band, and dots that stream through it.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/funnel-chart","pc":"Arc"},{"id":"arc:radar-chart","t":"Radar chart","d":"Two or three profiles on one web: shapes morph when you swap a profile, and a sweep across the axes compares values in place.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/radar-chart","pc":"Arc"},{"id":"arc:realtime-stream","t":"Realtime stream","d":"A live line that scrolls at 60fps as readings arrive, holds still on hover to read, and pops a marker on every anomaly.","k":"component","s":"arc","c":"inputs/time-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/realtime-stream","pc":"Arc"},{"id":"arc:slope-chart","t":"Slope chart","d":"Before and after on two axes: lines draw in, rank moves sit beside each value, and switching datasets slides every line to its new slope.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/slope-chart","pc":"Arc","lv":1},{"id":"arc:countdown","t":"Countdown","d":"A launch countdown with rolling digits that morphs into a live state at zero.","k":"component","s":"arc","c":"motion/number-ticker","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/countdown","pc":"Arc","lv":1},{"id":"arc:announcement-bar","t":"Announcement bar","d":"A top banner that rotates messages, counts down, and collapses smoothly when dismissed.","k":"component","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/announcement-bar","pc":"Arc","lv":1},{"id":"arc:json-viewer","t":"JSON viewer","d":"A collapsible JSON tree with search, paging for long arrays, and copy value or path.","k":"component","s":"arc","c":"data-display/json-viewer","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/json-viewer","pc":"Arc","lv":1},{"id":"arc:product-gallery","t":"Product gallery","d":"A product gallery with a hover magnifier, gliding thumbnails, and color and size variants that crossfade photos.","k":"component","s":"arc","c":"media/gallery","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/product-gallery","pc":"Arc"},{"id":"arc:sheet-stack","t":"Sheet stack","d":"Nested sheets that stack with depth, drag to dismiss, and become stacked dialogs on wide screens.","k":"component","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/sheet-stack","pc":"Arc"},{"id":"arc:phone-input","t":"Phone input","d":"A phone field with a country picker, formatting as you type, and E.164 output.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/phone-input","pc":"Arc","lv":1},{"id":"arc:money-input","t":"Money input","d":"A currency field with live grouping, stable width, rolling digits, and minor-unit output.","k":"component","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/money-input","pc":"Arc","lv":1},{"id":"arc:shortcut-recorder","t":"Shortcut recorder","d":"Record key combinations into key caps, with conflict warnings, Kbd, and a searchable cheatsheet.","k":"component","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/shortcut-recorder","pc":"Arc","lv":1},{"id":"arc:confirm-morph","t":"Confirm morph","d":"A destructive button that morphs into an inline confirmation, a spinner, and a result with undo.","k":"component","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/confirm-morph","pc":"Arc","lv":1},{"id":"arc:mention-input","t":"Mention input","d":"A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.","k":"component","s":"arc","c":"inputs/combobox","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/mention-input","pc":"Arc","lv":1},{"id":"arc:chat-thread","t":"Chat thread","d":"A chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.","k":"component","s":"arc","c":"data-display/chat-thread","g":"data-display","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/chat-thread","pc":"Arc","lv":1},{"id":"arc:rich-text-editor","t":"Rich text editor","d":"A lightweight editor with markdown shortcuts, a floating toolbar, a slash menu, and HTML and markdown output.","k":"component","s":"arc","c":"inputs/textarea","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/rich-text-editor","pc":"Arc","lv":1},{"id":"arc:billing-toggle","t":"Billing toggle","d":"A monthly and yearly switch with a savings badge and prices that roll to the new amount.","k":"component","s":"arc","c":"actions/switch","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/billing-toggle","pc":"Arc","lv":1},{"id":"arc:scroll-area","t":"Scroll area","d":"A native scroll container with thin overlay scrollbars and edge fades that appear only when content overflows.","k":"component","s":"arc","c":"layout/scroll-area","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/scroll-area","pc":"Arc","lv":1},{"id":"arc:radio-cards","t":"Radio cards","d":"Selectable option cards with a sliding selection ring, price and description slots, and radio keyboard behavior.","k":"component","s":"arc","c":"inputs/radio","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/radio-cards","pc":"Arc","lv":1},{"id":"arc:comment-thread","t":"Comment thread","d":"Threaded comments with replies, reactions, mentions, inline edit, and resolve.","k":"component","s":"arc","c":"data-display/chat-thread","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/comment-thread","pc":"Arc","lv":1},{"id":"arc:dot-grid","t":"Dot grid","d":"A dot field that bulges around the cursor like a lens and ripples from every click.","k":"component","s":"arc","c":"layout/page-shell","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/dot-grid","pc":"Arc"},{"id":"arc:slot-text","t":"Slot text","d":"Text and numbers that spin into their new value on staggered slot machine reels.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/slot-text","pc":"Arc","lv":1},{"id":"arc:page-curl","t":"Page curl","d":"A small magazine you read by dragging page corners, with a real fold, lit curl, and flick to turn.","k":"component","s":"arc","c":"motion/tilt-3d","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/page-curl","pc":"Arc"},{"id":"arc:glass-card","t":"Glass card","d":"A glass info panel over a photo whose rim catches a pointer-following highlight while the card tilts; tap to morph it into a detail sheet.","k":"component","s":"arc","c":"data-display/card","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/glass-card","pc":"Arc"},{"id":"arc:glass-tabbar","t":"Glass tab bar","d":"A floating Liquid Glass tab bar that refracts what scrolls beneath it, with a glass lens that glides, magnifies and can be dragged between tabs, and an optional search bubble; it c","k":"component","s":"arc","c":"navigation/tabs","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/glass-tabbar","pc":"Arc"},{"id":"arc:skeleton-morph","t":"Skeleton morph","d":"Loading skeletons that grow into the real content, block by block, instead of swapping.","k":"component","s":"arc","c":"status/skeleton","g":"status","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/skeleton-morph","pc":"Arc"},{"id":"arc:orbit-logos","t":"Orbit logos","d":"An integrations showcase with brand logos orbiting your product mark on tilted rings. Hover or focus one to rest the orbit, draw a connection, and see what it does.","k":"component","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/orbit-logos","pc":"Arc"},{"id":"arc:sand-text","t":"Sand text","d":"A headline made of sand that pours into the letters, crumbles where the cursor digs, and heals itself.","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/sand-text","pc":"Arc"},{"id":"arc:gravity-well","t":"Gravity well","d":"A grid of tiles that bends toward the cursor like spacetime, with a click that sends a shockwave through it.","k":"component","s":"arc","c":"inputs/time-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/gravity-well","pc":"Arc"},{"id":"arc:data-flow","t":"Data flow","d":"Data flow illustration. Sources (app, database, events) are on the left, a processing core with a live count sits in the middle, and destinations (warehouse, dashboard, alerts) are","k":"component","s":"arc","c":"data-display/kanban","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/data-flow","pc":"Arc"},{"id":"arc:payment-flow","t":"Payment flow","d":"A card tap goes to a processor, then the network, then the bank and back with authorization, then settlement; each hop lights up with a status label and the amount travels as a chi","k":"component","s":"arc","c":"data-display/badge","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/payment-flow","pc":"Arc"},{"id":"arc:date-reel","t":"Date reel","d":"A 3D wheel date and time picker (like iOS reels) with momentum scrolling, snapping, curved perspective, and full keyboard support.","k":"component","s":"arc","c":"inputs/date-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/date-reel","pc":"Arc"},{"id":"arc:multi-region-failover","t":"Multi-region failover","d":"Animated multi-region failover on a 2.5D stage: users stream requests through a global load balancer to two regions; the primary degrades, fails three health checks, traffic shifts","k":"component","s":"arc","c":"layout/split-pane","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/multi-region-failover","pc":"Arc"},{"id":"arc:vector-search","t":"Vector search","d":"Documents drop onto a tilted embedding plane and fold into points that cluster by topic; the index links neighbours, a query is typed, embedded and lowered onto the plane, a signal","k":"component","s":"arc","c":"inputs/search","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/vector-search","pc":"Arc"},{"id":"arc:typewriter-terminal","t":"Typewriter terminal","d":"A terminal that types a scripted CLI session with a seeded human cadence, colors the shell syntax, and streams output lines, progress bars and spinners, with a scrubber, play/pause","k":"component","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/typewriter-terminal","pc":"Arc"},{"id":"arc:link-unfurl","t":"Link unfurl","d":"A composer where pasting a URL shows a loading shimmer on the link, then unfurls it into a rich preview card with title, image and favicon in one morph, which can be collapsed back","k":"component","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/link-unfurl","pc":"Arc"},{"id":"arc:release-readiness","t":"Release readiness","d":"A launch checklist that keeps prerequisites, progress, and the final action together.","k":"section","s":"arc","c":"data-viz/progress-bar","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/release-readiness","pc":"Arc"},{"id":"arc:signup-form","t":"Sign up form","d":"An account creation flow with field validation, password strength, and a clear completion state.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/signup-form","pc":"Arc","lv":1},{"id":"arc:wallet-card","t":"Wallet card","d":"A compact account view with balance, recent activity, and focused money actions.","k":"section","s":"arc","c":"data-display/card","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/wallet-card","pc":"Arc"},{"id":"arc:logo-marquee","t":"Logo marquee","d":"A quiet, continuously moving row of brand marks with a pause control.","k":"section","s":"arc","c":"marketing","g":"marketing","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/logo-marquee","pc":"Arc","lv":1},{"id":"arc:team-directory","t":"Team directory","d":"Searchable people, team filters, and a focused profile panel.","k":"section","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/team-directory","pc":"Arc"},{"id":"arc:project-board","t":"Project board","d":"A living workflow board for moving work between stages.","k":"section","s":"arc","c":"data-display/kanban","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/project-board","pc":"Arc"},{"id":"arc:invoice-studio","t":"Invoice studio","d":"An editable invoice with live totals and a clear save flow.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/invoice-studio","pc":"Arc"},{"id":"arc:plan-comparison","t":"Plan comparison","d":"Compare meaningful differences between plans and billing periods.","k":"section","s":"arc","c":"data-display/diff","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/plan-comparison","pc":"Arc","lv":1},{"id":"arc:availability-picker","t":"Availability picker","d":"Find a meeting time across people and see the choice come together.","k":"section","s":"arc","c":"inputs/select","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/availability-picker","pc":"Arc"},{"id":"arc:metrics-dashboard","t":"Metrics dashboard","d":"A dense analytics view with KPI tabs, one inspectable chart, and top pages and sources.","k":"section","s":"arc","c":"data-display/kanban","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/metrics-dashboard","pc":"Arc"},{"id":"arc:media-player","t":"Media player","d":"An audio player with a living playlist and complete playback controls.","k":"section","s":"arc","c":"media/player","g":"media","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/media-player","pc":"Arc"},{"id":"arc:support-conversation","t":"Support conversation","d":"A responsive message thread with useful quick replies and live feedback.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/support-conversation","pc":"Arc"},{"id":"arc:inbox-triage","t":"Inbox triage","d":"Process a focused inbox with archive, snooze, and restore actions.","k":"section","s":"arc","c":"unsorted","g":"unsorted","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/inbox-triage","pc":"Arc"},{"id":"arc:command-palette","t":"Command palette","d":"A complete keyboard driven action surface with search, grouped results, and shortcuts.","k":"section","s":"arc","c":"navigation/command-palette","g":"navigation","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/blocks/command-palette","pc":"Arc","lv":1},{"id":"arc:notification-center","t":"Notification center","d":"A home for updates with read state, grouped information, and animated disclosure.","k":"section","s":"arc","c":"overlays/notifications","g":"overlays","a":"Arc","st":"picked","pl":"https://uiarc.dev/components/blocks/notification-center","pc":"Arc","lv":1},{"id":"arc:file-upload","t":"File upload","d":"A complete file selection flow with constraints, progress, and error feedback.","k":"section","s":"arc","c":"inputs/file-upload","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/file-upload","pc":"Arc","lv":1},{"id":"arc:otp-input","t":"OTP input","d":"A six digit verification flow with paste support and keyboard navigation.","k":"section","s":"arc","c":"inputs/otp-input","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/otp-input","pc":"Arc","lv":1},{"id":"arc:multi-step-form","t":"Multi-step form","d":"A guided form that presents one decision at a time and preserves progress.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/multi-step-form","pc":"Arc"},{"id":"arc:team-showcase","t":"Team showcase","d":"An image led team introduction with profiles that open in place.","k":"section","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/team-showcase","pc":"Arc"},{"id":"arc:testimonial-stage","t":"Studio perspectives","d":"Portrait led editorial stories with a focused reading state.","k":"section","s":"arc","c":"marketing","g":"marketing","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/testimonial-stage","pc":"Arc"},{"id":"arc:changelog-feed","t":"Changelog feed","d":"Release notes you can filter, open in place, and scroll through month by month.","k":"section","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/changelog-feed","pc":"Arc","lv":1},{"id":"arc:usage-pricing","t":"Usage pricing","d":"A pricing calculator that finds your plan as you drag seats and traffic.","k":"section","s":"arc","c":"marketing","g":"marketing","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/usage-pricing","pc":"Arc"},{"id":"arc:ai-composer","t":"AI composer","d":"A focused assistant thread where messages lift out of the composer and replies stream in.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/ai-composer","pc":"Arc"},{"id":"arc:sign-in","t":"Sign in","d":"A sign in card that morphs from email to a six digit code to your account.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/sign-in","pc":"Arc","lv":1},{"id":"arc:workspace-sidebar","t":"Workspace sidebar","d":"A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.","k":"section","s":"arc","c":"navigation/sidebar","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/workspace-sidebar","pc":"Arc"},{"id":"arc:settings-page","t":"Settings page","d":"Account settings with a gliding section nav and a save bar that morphs in as you edit.","k":"section","s":"arc","c":"flows/settings","g":"flows","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/settings-page","pc":"Arc"},{"id":"arc:sidebar-rail","t":"Sidebar rail","d":"An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.","k":"section","s":"arc","c":"navigation/sidebar","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/sidebar-rail","pc":"Arc"},{"id":"arc:docs-sidebar","t":"Docs sidebar","d":"A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.","k":"section","s":"arc","c":"navigation/sidebar","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/docs-sidebar","pc":"Arc"},{"id":"arc:integrations","t":"Integrations","d":"An integrations directory where Connect morphs to Connected and the filters recount as you go.","k":"section","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/integrations","pc":"Arc"},{"id":"arc:billing-overview","t":"Billing overview","d":"A billing page where the plan card morphs into a picker and usage, invoices, and card follow.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/billing-overview","pc":"Arc"},{"id":"arc:api-keys","t":"API keys","d":"API key management where Create key unfolds into its form and each secret is shown once.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/api-keys","pc":"Arc"},{"id":"arc:inbox-sidebar","t":"Inbox sidebar","d":"A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.","k":"section","s":"arc","c":"navigation/sidebar","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/inbox-sidebar","pc":"Arc"},{"id":"arc:team-members","t":"Team members","d":"A members list where typed emails turn into chips and fly into pending invites as seats roll.","k":"section","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/team-members","pc":"Arc"},{"id":"arc:page-header","t":"Page header","d":"A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.","k":"section","s":"arc","c":"navigation/top-nav","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/page-header","pc":"Arc","lv":1},{"id":"arc:revenue-explorer","t":"Revenue explorer","d":"A SaaS revenue chart you zoom with a brush while paths, axes and figures glide to the range.","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/revenue-explorer","pc":"Arc"},{"id":"arc:journey-flow","t":"Journey flow","d":"A Sankey of user journeys whose flows morph by channel and trace a cohort on hover.","k":"section","s":"arc","c":"motion/text-effect","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/journey-flow","pc":"Arc"},{"id":"arc:empty-states","t":"Empty states","d":"Four empty states in one illustration whose shapes morph between scenes as you switch tabs.","k":"section","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/empty-states","pc":"Arc","lv":1},{"id":"arc:login-centered","t":"Centered login","d":"A passkey-first login card on a quiet ring backdrop that morphs through email and code.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/login-centered","pc":"Arc","lv":1},{"id":"arc:login-immersive","t":"Immersive login","d":"A glass magic link card over dusk photography that folds its envelope shut once sent.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/login-immersive","pc":"Arc"},{"id":"arc:security-settings","t":"Security settings","d":"An account security page with guided two-factor setup, password change and active sessions.","k":"section","s":"arc","c":"flows/settings","g":"flows","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/security-settings","pc":"Arc"},{"id":"arc:cancel-flow","t":"Cancel flow","d":"A cancellation flow that answers each reason with a tailored offer and a calm hold-to-cancel.","k":"section","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/cancel-flow","pc":"Arc"},{"id":"arc:login-split","t":"Login split","d":"A full screen split login: an email-first form that morphs into a password step beside a photo.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/login-split","pc":"Arc"},{"id":"arc:cohort-retention","t":"Cohort retention","d":"A cohort retention triangle that morphs into retention curves and rewashes by segment.","k":"section","s":"arc","c":"actions/segmented-control","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/cohort-retention","pc":"Arc"},{"id":"arc:support-widget","t":"Support widget","d":"An in-app help launcher that grows into live article search, reading, and a chat with your team.","k":"section","s":"arc","c":"data-display/chat-thread","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/support-widget","pc":"Arc"},{"id":"arc:usage-forecast","t":"Usage forecast","d":"A billing period usage chart with a forecast cone and a draggable budget that dates the crossing.","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/usage-forecast","pc":"Arc"},{"id":"arc:mrr-waterfall","t":"MRR waterfall","d":"An MRR bridge whose floating bars morph by period and open the accounts behind each move.","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/mrr-waterfall","pc":"Arc"},{"id":"arc:webhooks","t":"Webhooks","d":"A webhooks console with delivery history, a payload inspector and retries that roll the rate.","k":"section","s":"arc","c":"unsorted","g":"unsorted","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/webhooks","pc":"Arc"},{"id":"arc:roles-permissions","t":"Roles and permissions","d":"A permissions matrix with group toggles that ripple, role duplication and a review bar.","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/roles-permissions","pc":"Arc"},{"id":"arc:metric-explorer","t":"Metric explorer","d":"KPI cards that open into a scrubbable chart and morph between metrics and ranges.","k":"section","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/metric-explorer","pc":"Arc"},{"id":"arc:activity-terrain","t":"Activity terrain","d":"A 3D terrain of hourly activity you can orbit, zoom, fly into and flatten into a heatmap.","k":"section","s":"arc","c":"data-display/timeline","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/activity-terrain","pc":"Arc"},{"id":"arc:revenue-globe","t":"Revenue globe","d":"A dotted globe where live payments arc home to headquarters, with a replayable day.","k":"section","s":"arc","c":"unsorted","g":"unsorted","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/revenue-globe","pc":"Arc"},{"id":"arc:customer-galaxy","t":"Customer galaxy","d":"2,400 accounts as a drifting galaxy that spirals into clusters by plan, region or health.","k":"section","s":"arc","c":"motion/number-ticker","g":"motion","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/customer-galaxy","pc":"Arc"},{"id":"arc:semantic-zoom","t":"Semantic zoom","d":"An infinite-zoom map of a company that reveals teams, projects, tasks and people as you fly in.","k":"section","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/semantic-zoom","pc":"Arc"},{"id":"arc:layout-morph","t":"Layout morph","d":"A 24 card gallery that flies between grid, masonry, list, fan, carousel and a 3D helix.","k":"section","s":"arc","c":"layout/page-shell","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/layout-morph","pc":"Arc"},{"id":"arc:agent-run","t":"Agent run","d":"A live AI agent run: steps stream in, tool calls expand, a diff waits for approval, and it all folds into a result.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/agent-run","pc":"Arc"},{"id":"arc:week-calendar","t":"Week calendar","d":"A week calendar where you drag to create, move, and resize events, with color coded calendars, day and agenda views, and swipes on phones.","k":"section","s":"arc","c":"inputs/date-picker","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/week-calendar","pc":"Arc"},{"id":"arc:scroll-story","t":"Scroll story","d":"A feature section where scrolling the copy drives a pinned product view through each step.","k":"section","s":"arc","c":"layout/scroll-area","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/scroll-story","pc":"Arc"},{"id":"arc:spotlight-grid","t":"Spotlight grid","d":"A feature grid where light follows the pointer, cards play live demos, and a click morphs a card into its detail.","k":"section","s":"arc","c":"navigation/command-palette","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/spotlight-grid","pc":"Arc"},{"id":"arc:invite-people","t":"Invite people","d":"Invite teammates with roles, bulk paste validation, a seat meter, and avatars that fly into a pending list.","k":"section","s":"arc","c":"data-display/avatar","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/invite-people","pc":"Arc"},{"id":"arc:cart-drawer","t":"Cart drawer","d":"Products fly into the cart, counts roll, and a drawer handles quantities, shipping progress, and checkout.","k":"section","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/cart-drawer","pc":"Arc"},{"id":"arc:pricing-calculator","t":"Pricing calculator","d":"A seat slider and billing toggle drive plan cards with rolling prices and a moving recommended badge.","k":"section","s":"arc","c":"marketing","g":"marketing","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/pricing-calculator","pc":"Arc"},{"id":"arc:ai-chat","t":"AI chat","d":"A complete AI chat with streamed markdown answers, folding reasoning, tool chips, citations, and a model switcher.","k":"section","s":"arc","c":"ai-agent","g":"ai-agent","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/ai-chat","pc":"Arc"},{"id":"arc:checkout-summary","t":"Checkout summary","d":"An order summary with a promo code that becomes a chip, discount and tax lines, and pay button states.","k":"section","s":"arc","c":"data-display/code-block","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/checkout-summary","pc":"Arc"},{"id":"arc:site-header","t":"Site header","d":"A sticky website header that turns solid on scroll, with a gliding active link, mega menu panels, and a mobile sheet.","k":"section","s":"arc","c":"navigation/top-nav","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/site-header","pc":"Arc","lv":1},{"id":"arc:site-footer","t":"Site footer","d":"A website footer with link columns and newsletter, a minimal layout, and a large fading Arc mark.","k":"section","s":"arc","c":"marketing","g":"marketing","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/site-footer","pc":"Arc","lv":1},{"id":"arc:hero-section","t":"Hero section","d":"Three full screen SaaS heroes: a live dashboard rising from the bottom edge over a drifting mesh, a workflow graph that routes sample events node by node, and editorial type over a","k":"section","s":"arc","c":"layout/page-shell","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/hero-section","pc":"Arc","lv":1},{"id":"arc:faq-section","t":"FAQ section","d":"FAQs as an accordion, a topic rail, or a searchable list that highlights matches.","k":"section","s":"arc","c":"data-display/accordion","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/faq-section","pc":"Arc","lv":1},{"id":"arc:contact-section","t":"Contact section","d":"A validated contact form that morphs into a confirmation, support channels, and office cards with local times.","k":"section","s":"arc","c":"layout/page-shell","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/contact-section","pc":"Arc","lv":1},{"id":"arc:settings-command","t":"Settings command","d":"Workspace settings where a search field grows into a palette that flies you to any setting.","k":"section","s":"arc","c":"navigation/command-palette","g":"navigation","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/settings-command","pc":"Arc"},{"id":"arc:usage-billing","t":"Usage billing","d":"A usage based billing dashboard with a projected spend line, meters against limits, alerts, and an upgrade that morphs into a confirm sheet.","k":"section","s":"arc","c":"overlays/sheet","g":"overlays","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/usage-billing","pc":"Arc"},{"id":"arc:ai-side-panel","t":"AI side panel","d":"An assistant docked beside a page that streams answers, pulls context chips from it, and applies changes with a highlight.","k":"section","s":"arc","c":"layout/split-pane","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/ai-side-panel","pc":"Arc"},{"id":"arc:kpi-drilldown","t":"KPI drilldown","d":"KPI cards that expand into a full detail chart with period comparison and a breakdown table, then fold back.","k":"section","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/kpi-drilldown","pc":"Arc"},{"id":"arc:blog-grid","t":"Blog grid","d":"A blog index with a featured post, category filter, post cards, pagination and an in-place reader.","k":"section","s":"arc","c":"layout/page-shell","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/blog-grid","pc":"Arc","lv":1},{"id":"arc:comparison-table","t":"Comparison table","d":"An us versus them table with a sticky header, a highlighted column, and a stacked phone view.","k":"section","s":"arc","c":"data-display/table","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/comparison-table","pc":"Arc","lv":1},{"id":"arc:feature-bento","t":"Feature bento","d":"A six cell feature bento where small, real product UI acts each feature out on hover.","k":"section","s":"arc","c":"layout/bento-grid","g":"layout","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/feature-bento","pc":"Arc"},{"id":"arc:stats-band","t":"Stats band","d":"Headline numbers that count up in view, each with a tiny visual that proves it and a context line on hover, plain or in a hairline grid.","k":"section","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/stats-band","pc":"Arc","lv":1},{"id":"arc:cta-section","t":"CTA section","d":"A call to action as a centered closing section, a split beside a setup card that completes itself, or a dismissible banner.","k":"section","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/cta-section","pc":"Arc","lv":1},{"id":"arc:newsletter-signup","t":"Newsletter signup","d":"An email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/newsletter-signup","pc":"Arc","lv":1},{"id":"arc:product-listing","t":"Product listing","d":"A storefront grid with price, color and size filters, a sort menu, hover photo swaps, and quick add with a size row.","k":"section","s":"arc","c":"data-display/list","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/product-listing","pc":"Arc"},{"id":"arc:product-detail","t":"Product detail","d":"A product page with a swipeable gallery, finish and size variants, add to bag that confirms in place, shipping, a reviews summary, and details.","k":"section","s":"arc","c":"actions/button","g":"actions","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/product-detail","pc":"Arc"},{"id":"arc:hero-signup","t":"Hero signup","d":"A full screen waitlist hero on a soft, drifting mesh gradient: the email field validates as you type and its button grows into the confirmation with your place in line.","k":"section","s":"arc","c":"inputs/form-field","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/hero-signup","pc":"Arc"},{"id":"arc:search-results","t":"Search results","d":"A faceted workspace search page with suggestions, facet counts that follow the query, filter chips, mixed doc, person and file results with highlighted matches, a gliding keyboard ","k":"section","s":"arc","c":"inputs/search","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/search-results","pc":"Arc"},{"id":"arc:market-terminal","t":"Market terminal","d":"A trading terminal with a canvas candlestick chart, volume, moving averages, crosshair OHLC readout, wheel, drag and pinch zoom, a live watchlist with sparklines and flashing price","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/market-terminal","pc":"Arc"},{"id":"arc:budget-variance","t":"Budget variance","d":"Budget against actual operating spend by department as aligned bullet charts, with favorable and unfavorable variance, a month, quarter and year to date switch that springs every b","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/budget-variance","pc":"Arc"},{"id":"arc:choropleth-explorer","t":"Choropleth explorer","d":"A filled-region map that shades every state or region by revenue, growth or penetration on a stepped scale, with a country switch (United States, Canada, Brazil, United Kingdom, Fr","k":"section","s":"arc","c":"data-display/stat","g":"data-display","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/choropleth-explorer","pc":"Arc"},{"id":"arc:small-multiples","t":"Small multiples","d":"A trellis of small line charts that reads as one chart, with a synced crosshair, a shared or independent y scale that springs the axes, sorting with a FLIP reorder, a ghost of the ","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/small-multiples","pc":"Arc"},{"id":"arc:connected-scatter","t":"Connected scatter","d":"A connected scatterplot of monthly CAC against LTV where the path draws itself in, a scrubber moves a head along the curve, and a channel switch morphs the path against a shaded 3x","k":"section","s":"arc","c":"inputs/slider","g":"inputs","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/connected-scatter","pc":"Arc"},{"id":"arc:line-replay","t":"Line replay","d":"A time replay line chart that draws a day of traffic with a moving playhead, a value label on the tip, a scrubber, speed control and key moments annotated as the playhead passes th","k":"section","s":"arc","c":"data-viz/chart","g":"data-viz","a":"Arc","st":"reviewed","pl":"https://uiarc.dev/components/blocks/line-replay","pc":"Arc"},{"id":"spaceui:block-card-info-1","t":"Craft & Audience Cards","d":"Interactive showcase of service and audience craft cards with custom gradient icons.","k":"section","s":"spaceui","c":"data-display/card","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-card-info-2","t":"Philosophy & Principles Cards","d":"Interactive showcase of core philosophy and value cards with custom gradient icons.","k":"section","s":"spaceui","c":"data-display/card","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-community-wall-1","t":"Community Wall","d":"Interactive draggable infinite canvas community wall with radial bloom distribution, card patterns, collision avoidance, tilt controls, and note submission modal.","k":"section","s":"spaceui","c":"overlays/dialog","g":"overlays","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-dither-carousel","t":"Dither Carousel Block","d":"3D cylindrical spiral carousel in WebGL2 with curved cards, axial directional blur, and matrix dither pattern.","k":"section","s":"spaceui","c":"media/carousel","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/dither-carousel","pc":"Space UI","lv":1},{"id":"spaceui:block-eleven-labs","t":"Eleven Labs Landing","d":"ElevenLabs-inspired landing page block with a live audio-reactive orb hero.","k":"section","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/eleven-labs","pc":"Space UI","lv":1},{"id":"spaceui:block-interactive-fun-facts","t":"Interactive 3D Fun Facts Game","d":"Interactive 3D stacked deck quiz game block with True/False feedback, live score and dialog summary.","k":"section","s":"spaceui","c":"motion/tilt-3d","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/interactive-fun-facts","pc":"Space UI","lv":1},{"id":"spaceui:block-interactive-grid-hero-1","t":"Interactive Grid Hero","d":"Interactive proximity-reactive grid canvas that dynamically rounds and insets cells on cursor movement with custom shape controls.","k":"section","s":"spaceui","c":"layout/page-shell","g":"layout","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-lens-carousel","t":"Lens Carousel Block","d":"Vertical WebGL lens gallery. Scroll-linked image planes from Immersive Lens.","k":"section","s":"spaceui","c":"media/carousel","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/lens-carousel","pc":"Space UI","lv":1},{"id":"spaceui:block-liquid-gooey-carousel","t":"Liquid Gooey Carousel Block","d":"Smooth-minimum signed distance field WebGL2 carousel with liquid fusing cards that pull organic metaball strands when separated.","k":"section","s":"spaceui","c":"media/carousel","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/liquid-gooey-carousel","pc":"Space UI","lv":1},{"id":"spaceui:block-prism-carousel","t":"Prism Carousel Block","d":"Continuous image strip rendered to an offscreen texture and sampled through a thick optical glass lens shader with radial refraction and chromatic aberration.","k":"section","s":"spaceui","c":"media/carousel","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/prism-carousel","pc":"Space UI","lv":1},{"id":"spaceui:block-showcase-gallery","t":"Showcase Gallery Block","d":"Bento gallery of stills and looping videos in two-tone frames. Videos play only while on screen; tiles cascade in as they scroll into view.","k":"section","s":"spaceui","c":"media/gallery","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/showcase-gallery","pc":"Space UI","lv":1},{"id":"spaceui:block-sign-in","t":"Sign In Page 1","d":"Interactive demo showcasing the Sign In Page 1 component.","k":"section","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/sign-in","pc":"Space UI","lv":1},{"id":"spaceui:block-stats-blog","t":"Blog & Content Stats Block","d":"Content publication metrics including total articles, words written, reader messages, and reading time.","k":"section","s":"spaceui","c":"data-display/stat","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-stats-engagement","t":"Engagement & Community Activity Block","d":"Comprehensive reader engagement showcase with top articles, interactive emoji reaction counters, category tags, and changelog updates.","k":"section","s":"spaceui","c":"data-display/timeline","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-stats-general","t":"General Stats Metrics Block","d":"Interactive metric overview cards with floating spring emoji decorations and semantic color accents.","k":"section","s":"spaceui","c":"data-display/stat","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-stats-github","t":"GitHub & Open-Source Activity Block","d":"Interactive GitHub contribution activity heatmap graph with metrics for stars, forks, and commits.","k":"section","s":"spaceui","c":"data-display/timeline","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:block-stats-performance","t":"Performance & Lighthouse Block","d":"Lighthouse audit results dashboard featuring mobile & desktop scores with radar chart visuals.","k":"section","s":"spaceui","c":"data-display/stat","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-backgrounds-bubble","t":"Bubble Background","d":"An interactive background featuring smoothly animated gradient bubbles, creating a playful, dynamic, and visually engaging backdrop.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-backgrounds-gradient","t":"Gradient Background","d":"A background component featuring a subtle yet engaging animated gradient effect, smoothly transitioning colors to enhance visual depth.","k":"component","s":"spaceui","c":"inputs/color-picker","g":"inputs","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-aurora-glow-button","t":"Aurora Glow Button","d":"A button with a hover-reactive radial aurora gradient, an animated conic-gradient border, and a rotating shine sweep — powered by animatable CSS custom properties.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/aurora-glow-button","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-button-squircle","t":"Button Squircle","d":"Tactile squircle button and badge components featuring dynamic curvature morphing on hover from the original portfolio design.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/button-squircle","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-glass-button","t":"Glass Button","d":"A glassmorphic button built on top of Button Squircle — backdrop blur, layered inset highlights and a hover shine sweep.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/glass-button","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-like-button","t":"Like Button","d":"A like button with burst particles, a ripple ring, a spring-animated heart, and a smooth NumberFlow count transition.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/like-button","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-pixel-fill-button","t":"Pixel Fill Button","d":"An interactive button whose background fills with square matrix pixels radiating from the cursor entry point on hover.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/pixel-fill-button","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-rainbow-glow-button","t":"Rainbow Glow Button","d":"An interactive dark pill button with 6 orbiting colorful blurred orbs and an aura reveal on hover.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/rainbow-glow-button","pc":"Space UI","lv":1},{"id":"spaceui:components-orb-bloop","t":"Bloop Orb","d":"Compact audio-reactive bloop orb shader.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-orb-loading","t":"Loading Orb","d":"Procedural matrix pixel grid loader with Tailwind styling, motion presets, and companion status banner.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-orb-smooth","t":"Smooth Orb","d":"Audio-reactive smooth orb with a WebGPU fluid simulation.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-orb-thinking","t":"Thinking Orb","d":"Interactive Canvas 3D particle loader orbs featuring 9 procedural cognitive states.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-cloud","t":"Cloud","d":"Interactive volumetric cloud material rendered as a full-bleed shader surface.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-fluid-crossfade","t":"Fluid Crossfade","d":"A dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-fluid-distortion-image","t":"Fluid Distortion Image","d":"An interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.","k":"component","s":"spaceui","c":"media/gallery","g":"media","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-fluid-dither-crossfade","t":"Fluid Dither Crossfade","d":"A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-heat-shade","t":"Heat Shade","d":"WebGPU fbm heat field with ember and hot tints along a moving boundary.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-liquid-mask-crossfade","t":"Liquid Mask Crossfade","d":"A WebGL shader component featuring interactive liquid cursor mask crossfade with dynamic trail, refraction, and parallax effects.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-mesh-gradient","t":"Mesh Gradient","d":"Dynamic WebGL mesh gradient shader background featuring fluid swirls, configurable color stops, distortion turbulence, and film grain overlay.","k":"component","s":"spaceui","c":"inputs/color-picker","g":"inputs","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-paper-shader","t":"Paper Shader","d":"Paper Shaders WebGL2 canvas driven by a fragment shader and live uniforms.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-pixel-reveal-image","t":"Pixel Reveal Image","d":"A WebGL shader image reveal component with dynamic pixel matrix wave and customizable neon accent border on scroll.","k":"component","s":"spaceui","c":"media/gallery","g":"media","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-silk-flare","t":"Silk Flare","d":"WebGPU single-pass composite shader fusing silky mesh warp gradients and rising thermodynamic heat flares.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-shader-silk-gradient","t":"Silk Gradient","d":"WebGPU silk mesh gradient. Three colors, warp, grain.","k":"component","s":"spaceui","c":"inputs/color-picker","g":"inputs","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-adaptive-density-grid","t":"Adaptive Density Grid","d":"A fluid polymorphic grid with physics-based velocity spring pill tabs, cinematic staggered reflow transitions, and memory-optimized layout shifts.","k":"component","s":"spaceui","c":"layout/page-shell","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/adaptive-density-grid","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-animoji","t":"Textmoji Animated","d":"Renders every Unicode emoji in a string as an animated image sized to the surrounding text.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/animoji","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-autoscale-input","t":"Autoscale Input","d":"Input that grows and shrinks its type to fit the available width, with locale number formatting.","k":"component","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/autoscale-input","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-avatar-extended","t":"Avatar Extended","d":"Extended avatar components with badges, indicators, and logos.","k":"component","s":"spaceui","c":"data-display/avatar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/avatar-extended","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-avatar-group","t":"Avatar Group","d":"Avatar group stacking and overlapping system.","k":"component","s":"spaceui","c":"data-display/avatar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/avatar-group","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-badge-squircle","t":"Badge Squircle","d":"Tactile squircle badge component with Base UI polymorphic rendering and dynamic curvature morphing.","k":"component","s":"spaceui","c":"data-display/badge","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/badge-squircle","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-blur-reveal-text","t":"Blur Reveal Text","d":"Progressive, buttery smooth word, character, or line-by-line blur reveal animation with viewport triggers.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/blur-reveal-text","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-bouncy-accordion","t":"Bouncy Accordion","d":"Spring accordion that splits rounded rows when a panel opens.","k":"component","s":"spaceui","c":"data-display/accordion","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/bouncy-accordion","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-chroma-palette","t":"Chroma Palette","d":"Perceptually uniform color generator and interactive swatch palette with organic gooey fluid morph and one-click copy.","k":"component","s":"spaceui","c":"inputs/color-picker","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/chroma-palette","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-copy","t":"Copy Button","d":"A copy-to-clipboard button with animated icon transition.","k":"component","s":"spaceui","c":"actions/copy-button","g":"actions","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid","t":"Data Grid","d":"Data Grid component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/data-grid","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-data-grid-column-filter","t":"Data Grid Column Filter","d":"Data Grid Column Filter component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-column-header","t":"Data Grid Column Header","d":"Data Grid Column Header component for Space UI.","k":"component","s":"spaceui","c":"navigation/top-nav","g":"navigation","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-column-visibility","t":"Data Grid Column Visibility","d":"Data Grid Column Visibility component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-pagination","t":"Data Grid Pagination","d":"Data Grid Pagination component for Space UI.","k":"component","s":"spaceui","c":"navigation/pagination","g":"navigation","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-scroll-area","t":"Data Grid Scroll Area","d":"Data Grid Scroll Area component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-table","t":"Data Grid Table","d":"Data Grid Table component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-table-dnd","t":"Data Grid Table Dnd","d":"Data Grid Table Dnd component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-table-dnd-rows","t":"Data Grid Table Dnd Rows","d":"Data Grid Table Dnd Rows component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-data-grid-table-virtual","t":"Data Grid Table Virtual","d":"Data Grid Table Virtual component for Space UI.","k":"component","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-date-selector","t":"Date Selector","d":"Date Selector component for Space UI.","k":"component","s":"spaceui","c":"inputs/period-filter","g":"inputs","a":"Space UI","st":"picked","pl":"https://www.spaceui.one/components/date-selector","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-detachable-accordion","t":"Detachable Accordion","d":"An interactive accordion with spring motion where the expanded item physically detaches with animated gaps and rounded corners.","k":"component","s":"spaceui","c":"data-display/accordion","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/detachable-accordion","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-dirt-carousel","t":"Dirt Carousel","d":"3D ring carousel with drag, snap, auto-rotate, and a live control panel.","k":"component","s":"spaceui","c":"media/carousel","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/dirt-carousel","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-doodle-callout","t":"Doodle Callout","d":"A hand-drawn arrow that draws itself in next to a handwritten label that pops in letter by letter, replaying on a loop.","k":"component","s":"spaceui","c":"overlays/popover","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/doodle-callout","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-event-calendar","t":"Event Calendar","d":"Event Calendar component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/event-calendar","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-event-calendar-agenda-view","t":"Event Calendar Agenda View","d":"Event Calendar Agenda View component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-content","t":"Event Calendar Content","d":"Event Calendar Content component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-dnd","t":"Event Calendar Dnd","d":"Event Calendar Dnd component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-event","t":"Event Calendar Event","d":"Event Calendar Event component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-i18n","t":"Event Calendar I18n","d":"Event Calendar I18n component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-lib","t":"Event Calendar Lib","d":"Utility and configuration helper for Event Calendar Lib.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-month-view","t":"Event Calendar Month View","d":"Event Calendar Month View component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-nav","t":"Event Calendar Nav","d":"Event Calendar Nav component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-recurrence","t":"Event Calendar Recurrence","d":"Event Calendar Recurrence component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-resource-view","t":"Event Calendar Resource View","d":"Event Calendar Resource View component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-time-grid","t":"Event Calendar Time Grid","d":"Event Calendar Time Grid component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-event-calendar-types","t":"Event Calendar Types","d":"Event Calendar Types component for Space UI.","k":"component","s":"spaceui","c":"data-display/calendar","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-filters","t":"Filters","d":"Filters component for Space UI.","k":"component","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/filters","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-flip-text","t":"Flip Text","d":"Per-character 3D dual-face flip animation with a sine-eased stagger wave across the text.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/flip-text","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-fluid-countdown","t":"Fluid Countdown","d":"Full-screen countdown timer with fluid rolling digits, play/pause and reset controls, and auto-loop.","k":"component","s":"spaceui","c":"motion/number-ticker","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/fluid-countdown","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-frost-blurred","t":"Frost Blurred","d":"Stacked, masked backdrop-filter layers that frost content along an edge.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/frost-blurred","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-github-activity","t":"GitHub Activity","d":"An interactive GitHub ecosystem showcase featuring stars, forks, and commits KPI cards with floating particles and a 52-week contribution heatmap matrix.","k":"component","s":"spaceui","c":"data-display/timeline","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/github-activity","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-gooey-blobs","t":"Gooey Blobs","d":"Two draggable blobs that merge into one liquid shape via an SVG gooey filter.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-gooey-info-popover","t":"Gooey Info Popover","d":"A round trigger that gooey-morphs into an info panel on hover.","k":"component","s":"spaceui","c":"overlays/popover","g":"overlays","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-gooey-slots-tooltip","t":"Gooey Slots Tooltip","d":"A round trigger that gooey-expands upward into a rich content card on hover.","k":"component","s":"spaceui","c":"overlays/tooltip","g":"overlays","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-gooey-text-reveal","t":"Gooey Text Reveal","d":"Line-by-line blur reveal with a gooey SVG edge filter, driven by GSAP SplitText — plays immediately, on scroll, or scrubbed to scroll position.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/gooey-text-reveal","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-gooey-tooltip","t":"Gooey Tooltip","d":"A tooltip bubble that mouse-follows and gooey-connects to its trigger button on hover.","k":"component","s":"spaceui","c":"overlays/tooltip","g":"overlays","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-gradient-file-upload","t":"Gradient File Upload","d":"A refined upload surface with an animated glowing beam border, dynamic radial feedback, file extension badges, and multi-state progress indicators.","k":"component","s":"spaceui","c":"inputs/color-picker","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/gradient-file-upload","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-handle-reel","t":"Handle Reel","d":"Kinetic tumbler reel of usernames, handles, or subdomains past a prefix that decelerates and settles with momentum.","k":"component","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/handle-reel","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-icon-stack","t":"Icon Stack","d":"Icon Stack component for Space UI.","k":"component","s":"spaceui","c":"media/card-stack","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/icon-stack","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-image-dark","t":"Image Dark","d":"An adaptive image component that dynamically switches between light and dark mode sources using standard img elements.","k":"component","s":"spaceui","c":"media/gallery","g":"media","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/image-dark","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-interactive-checklist","t":"Interactive Checklist","d":"Tactile checklist with spring checkmarks, animated strike-through lines, and completion progress.","k":"component","s":"spaceui","c":"data-display/list","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/interactive-checklist","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-interest-picker","t":"Interest Picker","d":"A draggable row-packed interest picker with emoji burst on select, squircle buttons, and a glass clear action.","k":"component","s":"spaceui","c":"inputs/select","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/interest-picker","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-item","t":"Item","d":"Composable Item primitive with media, content, title, and description slots for lists and rows.","k":"component","s":"spaceui","c":"data-display/list","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:components-spaceui-kanban","t":"Kanban","d":"Kanban component for Space UI.","k":"component","s":"spaceui","c":"data-display/kanban","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/kanban","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-liquid-metal-border","t":"Liquid Metal Border","d":"Liquid metal shader as a border wrap around any registry component.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/liquid-metal-border","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-liquid-sortable-list","t":"Liquid Sortable List","d":"Smooth drag-and-drop sortable team list with generative avatars, spring reordering, and tactile feedback.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/liquid-sortable-list","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-liquid-switch","t":"Liquid Switch","d":"Elastic toggle switch with velocity-based organic stretch and spring return physics.","k":"component","s":"spaceui","c":"actions/switch","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/liquid-switch","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-member-selector","t":"Member Selector","d":"An interactive participant and member avatar selector with dynamic row layout, animated selection badges, quick-add button, and searchable popover.","k":"component","s":"spaceui","c":"inputs/select","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/member-selector","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-morph-icon","t":"Morph Icon","d":"An animated morphing icon transition wrapper supporting motion presets like blur-scale, rotate-scale, flip, and spring.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/morph-icon","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-morphing-area","t":"Morphing Area","d":"Adaptive aspect ratio frame with constant-area surface morphing for any child element, image, or media.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/morphing-area","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-morphing-command-bar","t":"Morphing Command Bar","d":"Elastic command bar that expands seamlessly from passive state to active input with integrated action trigger.","k":"component","s":"spaceui","c":"navigation/command-palette","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/morphing-command-bar","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-morphing-search-pill","t":"Morphing Search Pill","d":"Adaptive search pill that expands smoothly from a compact button into a full input field.","k":"component","s":"spaceui","c":"data-display/badge","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/morphing-search-pill","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-morphing-text","t":"Morphing Text","d":"Dynamic character-level FLIP morphing animation between words or phrases with accessible screen-reader support.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/morphing-text","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-notification-list","t":"Notification List","d":"A fun notification list with animated stacking and cards that expand as you interact.","k":"component","s":"spaceui","c":"overlays/toast","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/notification-list","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-phone-input","t":"Phone Input","d":"Phone Input component for Space UI.","k":"component","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/phone-input","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-pin-list","t":"Pin List","d":"A playful list for pinning and unpinning items, with smooth animated transitions as items move between groups.","k":"component","s":"spaceui","c":"data-display/list","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/pin-list","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-pixel-reveal-text","t":"Pixel Reveal Text","d":"A typography shader component that materializes text out of pixel matrix noise with neon contour highlights on scroll.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/pixel-reveal-text","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-rating","t":"Rating","d":"Rating component for Space UI.","k":"component","s":"spaceui","c":"inputs/rating","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/rating","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-resizable","t":"Resizable","d":"Resizable component for Space UI.","k":"component","s":"spaceui","c":"layout/split-pane","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/resizable","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-scatter-text","t":"Scatter Text","d":"A text input whose content scatters into drifting canvas grains on submit.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/scatter-text","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-scroll-manifesto","t":"Scroll Manifesto","d":"A pinned statement that comes into focus word by word as you scroll: each word rises, sharpens and lights up.","k":"component","s":"spaceui","c":"layout/scroll-area","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/scroll-manifesto","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-scroll-text-reveal","t":"Scroll Text Reveal","d":"Progressive character or word color/opacity reveal driven by scroll progress.","k":"component","s":"spaceui","c":"layout/scroll-area","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/scroll-text-reveal","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-scrollspy","t":"Scrollspy","d":"Scrollspy component for Space UI.","k":"component","s":"spaceui","c":"layout/scroll-area","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/scrollspy","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-section-scrollspy","t":"Section Scrollspy","d":"Floating section scrollbar that tracks the active heading as you scroll.","k":"component","s":"spaceui","c":"layout/scroll-area","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/section-scrollspy","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-silk-border","t":"Silk Border","d":"Fluid WebGPU silk mesh gradient wrapper with preset themes and CSS fallback.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/silk-border","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-slide-to-confirm","t":"Slide To Confirm","d":"Tactile slide-to-action control with spring physics and inertia confirmation.","k":"component","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/slide-to-confirm","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-slosh-slider","t":"Slosh Slider","d":"Liquid fill slider with viscosity, momentum, and tilt.","k":"component","s":"spaceui","c":"inputs/slider","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/slosh-slider","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-smooth-slider","t":"Smooth Slider","d":"A continuous slider with a filled track, tick dots, and a draggable thumb.","k":"component","s":"spaceui","c":"inputs/slider","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/smooth-slider","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-sortable","t":"Sortable","d":"Sortable component for Space UI.","k":"component","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/sortable","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-status-badge","t":"Status Badge","d":"An interactive status badge with animated indicator, status color mapping, and inline or stacked layout modes.","k":"component","s":"spaceui","c":"data-display/badge","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/status-badge","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-team-roster-selector","t":"Team Roster Selector","d":"Interactive team roster selection list with generative avatars, spring hover pill, and multi-select state.","k":"component","s":"spaceui","c":"data-display/avatar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/team-roster-selector","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-textmoji","t":"Textmoji","d":"Renders every Unicode emoji in a string as an image sized to the surrounding text. Includes Animoji, the same for animated emoji styles.","k":"component","s":"spaceui","c":"motion/text-effect","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/textmoji","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-theme-toggle","t":"Theme Toggle","d":"View-transition theme toggle with circle, rectangle, polygon, and blur reveals.","k":"component","s":"spaceui","c":"actions/switch","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/theme-toggle","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-tick-slider","t":"Tick Slider","d":"A scrubber drawn as a row of tick marks, with a real range input underneath for keyboard and screen reader support.","k":"component","s":"spaceui","c":"inputs/slider","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/tick-slider","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-timeline","t":"Timeline","d":"Timeline component for Space UI.","k":"component","s":"spaceui","c":"data-display/timeline","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/timeline","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-tournament-bracket","t":"Tournament Bracket","d":"Animated knockout bracket with round navigation and live match states.","k":"component","s":"spaceui","c":"data-display/stat","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/tournament-bracket","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-user-presence-avatar","t":"User Presence Avatar","d":"A compact avatar group for showing online and offline users, with smooth animated transitions when presence changes.","k":"component","s":"spaceui","c":"data-display/avatar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/user-presence-avatar","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-velocity-hover-preview","t":"Velocity Hover Preview","d":"An interactive list component projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block dissolve crossfading.","k":"component","s":"spaceui","c":"motion/background","g":"motion","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/blocks/velocity-hover-preview","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-voice-chat-widget","t":"Voice Chat Widget","d":"An expandable voice chat pill with procedural avatars and squishmoji participants, animated speaking indicators, and a smooth pill-to-panel transition.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/voice-chat-widget","pc":"Space UI","lv":1},{"id":"spaceui:components-spaceui-words-preloader","t":"Words Preloader","d":"Typography preloader that cycles greetings then wipes away with a curved SVG mask.","k":"component","s":"spaceui","c":"status/loader","g":"status","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/components/words-preloader","pc":"Space UI","lv":1},{"id":"spaceui:interactions-agent-pipeline","t":"Agent Pipeline","d":"An interactive multi-agent pipeline visualization with real-time physics, event logs, and playback controls.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:interactions-agent-usage-card","t":"Agent Usage Card","d":"An interactive agent status and usage card with segmented progress tracking, live telemetry hours advancement, morph icon controls, squircle buttons, squishmoji status avatar, and ","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:interactions-currency-converter","t":"Currency Converter","d":"An interactive currency converter and token swap card with real-time exchange rates, NumberFlow spring animations, Space UI Select with flags, and a liquid metal squircle button.","k":"component","s":"spaceui","c":"inputs/time-picker","g":"inputs","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:interactions-deploy-pipeline","t":"Deploy Pipeline","d":"A self-playing deploy pipeline that advances on its own, pauses on hover, and reveals per-step detail — drop it in to turn a static log into a living status feed.","k":"component","s":"spaceui","c":"data-display/timeline","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:interactions-realtime-voice","t":"Realtime Voice","d":"An interactive conversational AI voice interface built with Frame, Card, Squishmoji, Bloop Orb, and audio frequency ripples.","k":"component","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:interactions-status-badge-glow","t":"Status Badge Glow","d":"An interactive status monitor with glowing radial reflections, spring-animated status transitions, and staggered character animations for pending, success, and failed states.","k":"component","s":"spaceui","c":"data-display/badge","g":"data-display","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:primitives-accordion","t":"Accordion","d":"Accessible Accordion primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/accordion","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/accordion","pc":"Space UI","lv":1},{"id":"spaceui:primitives-alert","t":"Alert","d":"Accessible Alert primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/alert-banner","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/alert","pc":"Space UI","lv":1},{"id":"spaceui:primitives-alert-dialog","t":"Alert Dialog","d":"Accessible Alert Dialog primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/dialog","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/alert-dialog","pc":"Space UI","lv":1},{"id":"spaceui:primitives-aspect-ratio","t":"Aspect Ratio","d":"Accessible Aspect Ratio primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/aspect-ratio","pc":"Space UI","lv":1},{"id":"spaceui:primitives-autocomplete","t":"Autocomplete","d":"Accessible Autocomplete primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/combobox","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/autocomplete","pc":"Space UI","lv":1},{"id":"spaceui:primitives-avatar","t":"Avatar","d":"Accessible Avatar primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/avatar","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/avatar","pc":"Space UI","lv":1},{"id":"spaceui:primitives-badge","t":"Badge","d":"Accessible Badge primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/badge","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/badge","pc":"Space UI","lv":1},{"id":"spaceui:primitives-breadcrumb","t":"Breadcrumb","d":"Accessible Breadcrumb primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/breadcrumb","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/breadcrumb","pc":"Space UI","lv":1},{"id":"spaceui:primitives-button","t":"Button","d":"Accessible Button primitive component for Space UI.","k":"primitive","s":"spaceui","c":"actions/button","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/button","pc":"Space UI","lv":1},{"id":"spaceui:primitives-calendar","t":"Calendar","d":"Accessible Calendar primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/date-picker","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/calendar","pc":"Space UI","lv":1},{"id":"spaceui:primitives-card","t":"Card","d":"Accessible Card primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/card","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/card","pc":"Space UI","lv":1},{"id":"spaceui:primitives-checkbox","t":"Checkbox","d":"Accessible Checkbox primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/checkbox","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/checkbox","pc":"Space UI","lv":1},{"id":"spaceui:primitives-checkbox-group","t":"Checkbox Group","d":"Accessible Checkbox Group primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/checkbox","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/checkbox-group","pc":"Space UI","lv":1},{"id":"spaceui:primitives-collapsible","t":"Collapsible","d":"Accessible Collapsible primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/accordion","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/collapsible","pc":"Space UI","lv":1},{"id":"spaceui:primitives-combobox","t":"Combobox","d":"Accessible Combobox primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/combobox","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/combobox","pc":"Space UI","lv":1},{"id":"spaceui:primitives-command","t":"Command","d":"Accessible Command primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/command-palette","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/command","pc":"Space UI","lv":1},{"id":"spaceui:primitives-context-menu","t":"Context Menu","d":"Accessible Context Menu primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/context-menu","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/context-menu","pc":"Space UI","lv":1},{"id":"spaceui:primitives-dialog","t":"Dialog","d":"Accessible Dialog primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/dialog","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/dialog","pc":"Space UI","lv":1},{"id":"spaceui:primitives-direction","t":"Direction","d":"Accessible Direction primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pc":"Space UI"},{"id":"spaceui:primitives-drawer","t":"Drawer","d":"Accessible Drawer primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/sheet","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/drawer","pc":"Space UI","lv":1},{"id":"spaceui:primitives-empty","t":"Empty","d":"Accessible Empty primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/empty-state","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/empty","pc":"Space UI","lv":1},{"id":"spaceui:primitives-field","t":"Field","d":"Accessible Field primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/field","pc":"Space UI","lv":1},{"id":"spaceui:primitives-fieldset","t":"Fieldset","d":"Accessible Fieldset primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/fieldset","pc":"Space UI","lv":1},{"id":"spaceui:primitives-form","t":"Form","d":"Accessible Form primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/form","pc":"Space UI","lv":1},{"id":"spaceui:primitives-frame","t":"Frame","d":"Accessible Frame primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/frame","pc":"Space UI","lv":1},{"id":"spaceui:primitives-group","t":"Group","d":"Accessible Group primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/group","pc":"Space UI","lv":1},{"id":"spaceui:primitives-input","t":"Input","d":"Accessible Input primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/input","pc":"Space UI","lv":1},{"id":"spaceui:primitives-input-group","t":"Input Group","d":"Accessible Input Group primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/input-group","pc":"Space UI","lv":1},{"id":"spaceui:primitives-kbd","t":"Kbd","d":"Accessible Kbd primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/kbd","pc":"Space UI","lv":1},{"id":"spaceui:primitives-label","t":"Label","d":"Accessible Label primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/form-field","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/label","pc":"Space UI","lv":1},{"id":"spaceui:primitives-link","t":"Link","d":"Accessible Link primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/link","pc":"Space UI","lv":1},{"id":"spaceui:primitives-menu","t":"Menu","d":"Accessible Menu primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/menu","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/menu","pc":"Space UI","lv":1},{"id":"spaceui:primitives-menubar","t":"Menubar","d":"Accessible Menubar primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/top-nav","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/menubar","pc":"Space UI","lv":1},{"id":"spaceui:primitives-meter","t":"Meter","d":"Accessible Meter primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-viz/gauge","g":"data-viz","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/meter","pc":"Space UI","lv":1},{"id":"spaceui:primitives-navigation-menu","t":"Navigation Menu","d":"Accessible Navigation Menu primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/top-nav","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/navigation-menu","pc":"Space UI","lv":1},{"id":"spaceui:primitives-number-field","t":"Number Field","d":"Accessible Number Field primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/number-input","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/number-field","pc":"Space UI","lv":1},{"id":"spaceui:primitives-otp-field","t":"Otp Field","d":"Accessible Otp Field primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/otp-input","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/otp-field","pc":"Space UI","lv":1},{"id":"spaceui:primitives-pagination","t":"Pagination","d":"Accessible Pagination primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/pagination","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/pagination","pc":"Space UI","lv":1},{"id":"spaceui:primitives-popover","t":"Popover","d":"Accessible Popover primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/popover","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/popover","pc":"Space UI","lv":1},{"id":"spaceui:primitives-preview-card","t":"Preview Card","d":"Accessible Preview Card primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/hover-card","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/preview-card","pc":"Space UI","lv":1},{"id":"spaceui:primitives-preview-link-card","t":"Base Preview Link Card","d":"Displays a preview image of a link when hovered.","k":"primitive","s":"spaceui","c":"overlays/hover-card","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/preview-link-card","pc":"Space UI","lv":1},{"id":"spaceui:primitives-progress","t":"Progress","d":"Accessible Progress primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-viz/progress-bar","g":"data-viz","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/progress","pc":"Space UI","lv":1},{"id":"spaceui:primitives-radio-group","t":"Radio Group","d":"Accessible Radio Group primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/radio","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/radio-group","pc":"Space UI","lv":1},{"id":"spaceui:primitives-scroll-area","t":"Scroll Area","d":"Accessible Scroll Area primitive component for Space UI.","k":"primitive","s":"spaceui","c":"layout/scroll-area","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/scroll-area","pc":"Space UI","lv":1},{"id":"spaceui:primitives-select","t":"Select","d":"Accessible Select primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/select","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/select","pc":"Space UI","lv":1},{"id":"spaceui:primitives-separator","t":"Separator","d":"Accessible Separator primitive component for Space UI.","k":"primitive","s":"spaceui","c":"unsorted","g":"unsorted","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/separator","pc":"Space UI","lv":1},{"id":"spaceui:primitives-sheet","t":"Sheet","d":"Accessible Sheet primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/sheet","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/sheet","pc":"Space UI","lv":1},{"id":"spaceui:primitives-sidebar","t":"Sidebar","d":"Accessible Sidebar primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/sidebar","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/sidebar","pc":"Space UI","lv":1},{"id":"spaceui:primitives-skeleton","t":"Skeleton","d":"Accessible Skeleton primitive component for Space UI.","k":"primitive","s":"spaceui","c":"status/skeleton","g":"status","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/skeleton","pc":"Space UI","lv":1},{"id":"spaceui:primitives-slider","t":"Slider","d":"Accessible Slider primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/slider","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/slider","pc":"Space UI","lv":1},{"id":"spaceui:primitives-spinner","t":"Spinner","d":"Accessible Spinner primitive component for Space UI.","k":"primitive","s":"spaceui","c":"status/loader","g":"status","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/spinner","pc":"Space UI","lv":1},{"id":"spaceui:primitives-switch","t":"Switch","d":"Accessible Switch primitive component for Space UI.","k":"primitive","s":"spaceui","c":"actions/switch","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/switch","pc":"Space UI","lv":1},{"id":"spaceui:primitives-table","t":"Table","d":"Accessible Table primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-display/table","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/table","pc":"Space UI","lv":1},{"id":"spaceui:primitives-tabs","t":"Tabs","d":"Accessible Tabs primitive component for Space UI.","k":"primitive","s":"spaceui","c":"navigation/tabs","g":"navigation","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/tabs","pc":"Space UI","lv":1},{"id":"spaceui:primitives-textarea","t":"Textarea","d":"Accessible Textarea primitive component for Space UI.","k":"primitive","s":"spaceui","c":"inputs/textarea","g":"inputs","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/textarea","pc":"Space UI","lv":1},{"id":"spaceui:primitives-toast","t":"Toast","d":"Accessible Toast primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/toast","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/toast","pc":"Space UI","lv":1},{"id":"spaceui:primitives-toggle","t":"Toggle","d":"Accessible Toggle primitive component for Space UI.","k":"primitive","s":"spaceui","c":"actions/switch","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/toggle","pc":"Space UI","lv":1},{"id":"spaceui:primitives-toggle-group","t":"Toggle Group","d":"Accessible Toggle Group primitive component for Space UI.","k":"primitive","s":"spaceui","c":"actions/switch","g":"actions","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/toggle-group","pc":"Space UI","lv":1},{"id":"spaceui:primitives-toolbar","t":"Toolbar","d":"Accessible Toolbar primitive component for Space UI.","k":"primitive","s":"spaceui","c":"data-viz/chart","g":"data-viz","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/toolbar","pc":"Space UI","lv":1},{"id":"spaceui:primitives-tooltip","t":"Tooltip","d":"Accessible Tooltip primitive component for Space UI.","k":"primitive","s":"spaceui","c":"overlays/tooltip","g":"overlays","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/primitives/tooltip","pc":"Space UI","lv":1},{"id":"spaceui:template-ai-chat-workspace","t":"AI Chat Workspace","d":"Full-featured AI Studio chat workspace template featuring conversational threads, multi-model selection, real-time token tracking, reasoning trace, code execution viewer, and dark ","k":"page","s":"spaceui","c":"ai-agent","g":"ai-agent","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/templates/ai-chat-workspace","pc":"Space UI","lv":1},{"id":"spaceui:template-immersive-lens","t":"Immersive Lens Portfolio","d":"Full-page immersive photography template with Three.js WebGL distortion, inertial dragging, and GSAP lightbox.","k":"page","s":"spaceui","c":"layout/page-shell","g":"layout","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/templates/immersive-lens","pc":"Space UI","lv":1},{"id":"spaceui:template-stats","t":"Portfolio Statistics & Analytics Template","d":"Comprehensive portfolio statistics dashboard template featuring general metrics, audience engagement, content analytics, GitHub heatmap, and Lighthouse scores.","k":"page","s":"spaceui","c":"data-display/stat","g":"data-display","a":"Space UI","st":"reviewed","pl":"https://www.spaceui.one/templates/stats","pc":"Space UI","lv":1},{"id":"kobra:accordion","t":"Accordion","d":"Vertically stacked disclosure sections.","k":"component","s":"kobra","c":"data-display/accordion","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/accordion","pc":"Kobra"},{"id":"kobra:advertisement","t":"Advertisement","d":"A sponsor slot that turns through its ads on a line that fills.","k":"component","s":"kobra","c":"unsorted","g":"unsorted","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/advertisement","pc":"Kobra"},{"id":"kobra:ai-editor","t":"AI Editor","d":"A document an agent edits alongside you.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/ai-editor","pc":"Kobra"},{"id":"kobra:alert","t":"Alert","d":"A callout for important contextual information.","k":"component","s":"kobra","c":"overlays/alert-banner","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/alert","pc":"Kobra"},{"id":"kobra:aspect-ratio","t":"Aspect Ratio","d":"Keeps content within a fixed ratio.","k":"component","s":"kobra","c":"unsorted","g":"unsorted","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/aspect-ratio","pc":"Kobra"},{"id":"kobra:avatar","t":"Avatar","d":"An image or fallback representing a person.","k":"component","s":"kobra","c":"data-display/avatar","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/avatar","pc":"Kobra"},{"id":"kobra:badge","t":"Badge","d":"A compact status or category label.","k":"component","s":"kobra","c":"data-display/badge","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/badge","pc":"Kobra"},{"id":"kobra:breadcrumb","t":"Breadcrumb","d":"A hierarchical navigation trail.","k":"component","s":"kobra","c":"navigation/breadcrumb","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/breadcrumb","pc":"Kobra"},{"id":"kobra:button","t":"Button","d":"A control that triggers an action.","k":"component","s":"kobra","c":"actions/button","g":"actions","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/button","pc":"Kobra"},{"id":"kobra:calendar","t":"Calendar","d":"A date selection calendar.","k":"component","s":"kobra","c":"inputs/date-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/calendar","pc":"Kobra"},{"id":"kobra:card","t":"Card","d":"A surface grouping related content.","k":"component","s":"kobra","c":"data-display/card","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/card","pc":"Kobra"},{"id":"kobra:halftone-dots","t":"Halftone Dots","d":"An image rebuilt as a field of dots that morph between pictures.","k":"component","s":"kobra","c":"motion/background","g":"motion","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/halftone-dots","pc":"Kobra"},{"id":"kobra:logo-carousel","t":"Logo Carousel","d":"A wall of logos, shown a few at a time.","k":"component","s":"kobra","c":"media/carousel","g":"media","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/logo-carousel","pc":"Kobra"},{"id":"kobra:carousel","t":"Carousel","d":"A horizontally navigable content collection, built on Embla.","k":"component","s":"kobra","c":"media/carousel","g":"media","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/carousel","pc":"Kobra"},{"id":"kobra:chart","t":"Chart","d":"Composable data visualizations, from Evil Charts.","k":"component","s":"kobra","c":"data-viz/chart","g":"data-viz","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/chart","pc":"Kobra"},{"id":"kobra:checkbox","t":"Checkbox","d":"A binary or indeterminate selection control.","k":"component","s":"kobra","c":"inputs/checkbox","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/checkbox","pc":"Kobra"},{"id":"kobra:collapsible","t":"Collapsible","d":"An expandable content region.","k":"component","s":"kobra","c":"data-display/accordion","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/collapsible","pc":"Kobra"},{"id":"kobra:color-palette","t":"Color Palette","d":"A wheel of nineteen swatches, hue around and saturation inward.","k":"component","s":"kobra","c":"inputs/color-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/color-palette","pc":"Kobra"},{"id":"kobra:color-picker","t":"Color Picker","d":"A gradient and solid picker, with draggable stops and a hex field.","k":"component","s":"kobra","c":"inputs/color-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/color-picker","pc":"Kobra"},{"id":"kobra:combobox","t":"Combobox","d":"A searchable option picker.","k":"component","s":"kobra","c":"inputs/combobox","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/combobox","pc":"Kobra"},{"id":"kobra:multi-select","t":"Multi Select","d":"Several values picked from one list, as chips.","k":"component","s":"kobra","c":"inputs/tag-input","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/multi-select","pc":"Kobra"},{"id":"kobra:command-menu","t":"Command Menu","d":"A fast, nested command menu powered by kmenu.","k":"component","s":"kobra","c":"navigation/command-palette","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/command-menu","pc":"Kobra"},{"id":"kobra:context-menu","t":"Context Menu","d":"Actions opened from a secondary click.","k":"component","s":"kobra","c":"overlays/context-menu","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/context-menu","pc":"Kobra"},{"id":"kobra:dialog","t":"Dialog","d":"A modal window over the current page, and the alert dialog that confirms.","k":"component","s":"kobra","c":"overlays/dialog","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/dialog","pc":"Kobra"},{"id":"kobra:drawer","t":"Drawer","d":"A panel that slides from an edge, built on Vaul.","k":"component","s":"kobra","c":"overlays/sheet","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/drawer","pc":"Kobra"},{"id":"kobra:dropdown-menu","t":"Dropdown Menu","d":"A menu opened from a trigger.","k":"component","s":"kobra","c":"navigation/menu","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/dropdown-menu","pc":"Kobra"},{"id":"kobra:empty","t":"Empty","d":"An empty-state layout with guidance.","k":"component","s":"kobra","c":"data-display/empty-state","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/empty","pc":"Kobra"},{"id":"kobra:form","t":"Form","d":"Validated form composition.","k":"component","s":"kobra","c":"inputs/form-field","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/form","pc":"Kobra"},{"id":"kobra:hover-card","t":"Hover Card","d":"Rich content revealed on hover.","k":"component","s":"kobra","c":"overlays/hover-card","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/hover-card","pc":"Kobra"},{"id":"kobra:lightbox","t":"Lightbox","d":"Photos in justified rows that open with a ripple zoom.","k":"component","s":"kobra","c":"overlays/lightbox","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/lightbox","pc":"Kobra"},{"id":"kobra:input","t":"Input","d":"A text input with its label, description and attached controls.","k":"component","s":"kobra","c":"inputs/form-field","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/input","pc":"Kobra"},{"id":"kobra:input-otp","t":"Input OTP","d":"A segmented one-time-code input, built on input-otp.","k":"component","s":"kobra","c":"inputs/otp-input","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/input-otp","pc":"Kobra"},{"id":"kobra:input-dissolve","t":"Input Dissolve","d":"A field that carries its value away once it is spent.","k":"component","s":"kobra","c":"inputs/form-field","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/input-dissolve","pc":"Kobra"},{"id":"kobra:item","t":"Item","d":"A flexible row for lists and settings.","k":"component","s":"kobra","c":"data-display/list","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/item","pc":"Kobra"},{"id":"kobra:menubar","t":"Menubar","d":"A persistent horizontal application menu.","k":"component","s":"kobra","c":"navigation/top-nav","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/menubar","pc":"Kobra"},{"id":"kobra:navigation-menu","t":"Navigation Menu","d":"A collection of navigation links.","k":"component","s":"kobra","c":"navigation/top-nav","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/navigation-menu","pc":"Kobra"},{"id":"kobra:pagination","t":"Pagination","d":"Controls for moving through pages.","k":"component","s":"kobra","c":"navigation/pagination","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/pagination","pc":"Kobra"},{"id":"kobra:popover","t":"Popover","d":"Floating content anchored to a trigger.","k":"component","s":"kobra","c":"overlays/popover","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/popover","pc":"Kobra"},{"id":"kobra:progress","t":"Progress","d":"The completion state of a task.","k":"component","s":"kobra","c":"data-viz/progress-bar","g":"data-viz","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/progress","pc":"Kobra"},{"id":"kobra:qr-code","t":"QR Code","d":"A scannable code in dots that ripples each time what it encodes changes.","k":"component","s":"kobra","c":"data-display/code-block","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/qr-code","pc":"Kobra"},{"id":"kobra:radio-group","t":"Radio Group","d":"A single choice from several options.","k":"component","s":"kobra","c":"inputs/radio","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/radio-group","pc":"Kobra"},{"id":"kobra:resizable","t":"Resizable","d":"Panels separated by a draggable handle.","k":"component","s":"kobra","c":"layout/split-pane","g":"layout","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/resizable","pc":"Kobra"},{"id":"kobra:scroll-area","t":"Scroll Area","d":"A custom cross-browser scroll container.","k":"component","s":"kobra","c":"layout/scroll-area","g":"layout","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/scroll-area","pc":"Kobra"},{"id":"kobra:select","t":"Select","d":"An option picker, as a styled menu or the native control.","k":"component","s":"kobra","c":"inputs/select","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/select","pc":"Kobra"},{"id":"kobra:separator","t":"Separator","d":"A visual divider between content.","k":"component","s":"kobra","c":"unsorted","g":"unsorted","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/separator","pc":"Kobra"},{"id":"kobra:sheet","t":"Sheet","d":"A dialog that enters from an edge.","k":"component","s":"kobra","c":"overlays/sheet","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/sheet","pc":"Kobra"},{"id":"kobra:sidebar","t":"Sidebar","d":"A composable application sidebar.","k":"component","s":"kobra","c":"navigation/sidebar","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/sidebar","pc":"Kobra"},{"id":"kobra:skeleton","t":"Skeleton","d":"A placeholder shown while content loads.","k":"component","s":"kobra","c":"status/skeleton","g":"status","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/skeleton","pc":"Kobra"},{"id":"kobra:slider","t":"Slider","d":"A value selected along a range, with a liquid handle from Gooey.","k":"component","s":"kobra","c":"inputs/slider","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/slider","pc":"Kobra"},{"id":"kobra:sound","t":"Sound","d":"The cue every control answers a press with, built on Web Kits Audio.","k":"component","s":"kobra","c":"media/player","g":"media","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/sound","pc":"Kobra"},{"id":"kobra:toast","t":"Toast","d":"Stacked status notifications with progress and actions.","k":"component","s":"kobra","c":"overlays/toast","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/toast","pc":"Kobra"},{"id":"kobra:spinner","t":"Spinner","d":"An indeterminate loading indicator.","k":"component","s":"kobra","c":"status/loader","g":"status","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/spinner","pc":"Kobra"},{"id":"kobra:switch","t":"Switch","d":"A control for toggling a setting.","k":"component","s":"kobra","c":"actions/switch","g":"actions","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/switch","pc":"Kobra"},{"id":"kobra:table","t":"Table","d":"Rows and columns of structured data.","k":"component","s":"kobra","c":"data-display/table","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/table","pc":"Kobra"},{"id":"kobra:crm-table","t":"CRM Table","d":"Accounts with owners, pipeline and win odds, in resizable columns.","k":"component","s":"kobra","c":"data-display/table","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/crm-table","pc":"Kobra"},{"id":"kobra:grouped-table","t":"Grouped Table","d":"Issues grouped by status, in a table whose columns glide into each row as you narrow it.","k":"component","s":"kobra","c":"data-display/table","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/grouped-table","pc":"Kobra"},{"id":"kobra:tabs","t":"Tabs","d":"Layered content selected by tab.","k":"component","s":"kobra","c":"navigation/tabs","g":"navigation","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/tabs","pc":"Kobra"},{"id":"kobra:textarea","t":"Textarea","d":"A multiline text input.","k":"component","s":"kobra","c":"inputs/textarea","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/textarea","pc":"Kobra"},{"id":"kobra:toggle-group","t":"Toggle Group","d":"A two-state control, alone or conjoined into a bar.","k":"component","s":"kobra","c":"actions/switch","g":"actions","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/toggle-group","pc":"Kobra"},{"id":"kobra:filter-chips","t":"Filter Chips","d":"Filter chips that join into one track as neighbors are chosen, after Spotify’s library.","k":"component","s":"kobra","c":"data-display/badge","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/filter-chips","pc":"Kobra"},{"id":"kobra:tooltip","t":"Tooltip","d":"A concise label shown on hover or focus.","k":"component","s":"kobra","c":"overlays/tooltip","g":"overlays","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/tooltip","pc":"Kobra"},{"id":"kobra:kbd","t":"Kbd","d":"Keyboard input and shortcut hints.","k":"component","s":"kobra","c":"data-display/kanban","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/kbd","pc":"Kobra"},{"id":"kobra:direction","t":"Direction","d":"Turns every component right to left, for Arabic and other RTL scripts.","k":"component","s":"kobra","c":"unsorted","g":"unsorted","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/direction","pc":"Kobra"},{"id":"kobra:attachment","t":"Attachment","d":"A compact file attachment presentation.","k":"component","s":"kobra","c":"inputs/file-upload","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/attachment","pc":"Kobra"},{"id":"kobra:magnetic-dropzone","t":"Magnetic Dropzone","d":"A drop target that leans toward the file you are carrying.","k":"component","s":"kobra","c":"inputs/file-upload","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/magnetic-dropzone","pc":"Kobra"},{"id":"kobra:conversation","t":"Conversation","d":"Messages from both sides of a chat.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/conversation","pc":"Kobra"},{"id":"kobra:marker","t":"Marker","d":"A labeled point or status marker.","k":"component","s":"kobra","c":"data-display/stat","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/marker","pc":"Kobra"},{"id":"kobra:message","t":"Message","d":"A structured conversation message.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/message","pc":"Kobra"},{"id":"kobra:message-scroller","t":"Message Scroller","d":"Conversation scrolling with edge controls.","k":"component","s":"kobra","c":"layout/scroll-area","g":"layout","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/message-scroller","pc":"Kobra"},{"id":"kobra:video","t":"Video","d":"A video player built on Loomix, with liquid glass controls.","k":"component","s":"kobra","c":"media/player","g":"media","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/video","pc":"Kobra"},{"id":"kobra:reasoning-steps","t":"Reasoning Steps","d":"A model working before it answers.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/reasoning-steps","pc":"Kobra"},{"id":"kobra:file-diff","t":"File Diff","d":"Changes an agent proposes to a file.","k":"component","s":"kobra","c":"data-display/diff","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/file-diff","pc":"Kobra"},{"id":"kobra:image-generation","t":"Image Generation","d":"A canvas forming while an image is generated.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/image-generation","pc":"Kobra"},{"id":"kobra:streaming-text","t":"Streaming Text","d":"A reply arriving a token at a time.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/streaming-text","pc":"Kobra"},{"id":"kobra:inline-citations","t":"Inline Citations","d":"Sources cited inside a reply.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/inline-citations","pc":"Kobra"},{"id":"kobra:code-block","t":"Code Block","d":"Syntax-highlighted code with actions.","k":"component","s":"kobra","c":"data-display/code-block","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/code-block","pc":"Kobra"},{"id":"kobra:task-list","t":"Task List","d":"A task list an agent works through.","k":"component","s":"kobra","c":"data-display/list","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/task-list","pc":"Kobra"},{"id":"kobra:chat-input","t":"Chat Input","d":"A composer for prompting an agent, built on Voice Glow and ElevenLabs UI.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/chat-input","pc":"Kobra"},{"id":"kobra:plan-card","t":"Plan Card","d":"A plan an agent is asking to run.","k":"component","s":"kobra","c":"ai-agent","g":"ai-agent","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/plan-card","pc":"Kobra"},{"id":"kobra:question-card","t":"Question Card","d":"A question an agent needs answered before it continues.","k":"component","s":"kobra","c":"data-display/card","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/question-card","pc":"Kobra"},{"id":"kobra:hijri","t":"Hijri","d":"The Umm al-Qura months for the calendar, from the browser’s own tables.","k":"lib","s":"kobra","c":"inputs/date-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/hijri","pc":"Kobra"},{"id":"kobra:hijri-civil","t":"Hijri civil","d":"The arithmetic Hijri months for the calendar, a fixed 30-year cycle rather than a published table.","k":"lib","s":"kobra","c":"data-display/table","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/hijri-civil","pc":"Kobra"},{"id":"kobra:persian","t":"Persian","d":"The solar Hijri months Iran and Afghanistan keep, from the browser’s own tables.","k":"lib","s":"kobra","c":"data-display/list","g":"data-display","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/persian","pc":"Kobra"},{"id":"kobra:buddhist","t":"Buddhist","d":"Thailand’s Buddhist era for the calendar: the Gregorian months, the years counted 543 ahead.","k":"lib","s":"kobra","c":"inputs/date-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/buddhist","pc":"Kobra"},{"id":"kobra:minguo","t":"Minguo","d":"Taiwan’s Minguo years for the calendar: the Gregorian months, the years counted from 1912.","k":"lib","s":"kobra","c":"inputs/date-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/minguo","pc":"Kobra"},{"id":"kobra:japanese","t":"Japanese","d":"Japan’s imperial eras for the calendar: the Gregorian months, the years counted by era.","k":"lib","s":"kobra","c":"inputs/date-picker","g":"inputs","a":"Kobra","st":"reviewed","pl":"https://kobra.systems/components/japanese","pc":"Kobra"},{"id":"uselayouts:3d-book","t":"3D Book","d":"An interactive 3D book component with page flip animations.","k":"component","s":"uselayouts","c":"motion/tilt-3d","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/3d-book","pc":"uselayouts","lv":1},{"id":"uselayouts:accessible-action","t":"Accessible Action","d":"Interactive draggable card stack with 3D tilt, swipe-to-back gestures, click interactions, random rotation, and smooth spring animations.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/accessible-action","pc":"uselayouts","lv":1},{"id":"uselayouts:accordionos","t":"AccordionOS","d":"Interactive accordion showcase with animated content, image transitions, hover effects, keyboard navigation, autoplay, and responsive design.","k":"component","s":"uselayouts","c":"data-display/accordion","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/accordionos","pc":"uselayouts","lv":1},{"id":"uselayouts:analog-stick","t":"Analog Stick","d":"A metallic stick that tilts into the press. Hover a quadrant and the cap leans, the shadow shifts, and the matching arrow goes amber.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/analog-stick","pc":"uselayouts","lv":1},{"id":"uselayouts:animated-collection","t":"Animated Collection","d":"A collection of items with smooth layout transitions and animations.","k":"component","s":"uselayouts","c":"layout/page-shell","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/animated-collection","pc":"uselayouts","lv":1},{"id":"uselayouts:bento-card","t":"Bento Card","d":"An interactive bento card with animated tabs and workspace preview.","k":"component","s":"uselayouts","c":"layout/bento-grid","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/bento-card","pc":"uselayouts","lv":1},{"id":"uselayouts:bottom-menu","t":"Bottom Menu","d":"A floating bottom navigation menu with smooth interactions.","k":"component","s":"uselayouts","c":"navigation/menu","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/bottom-menu","pc":"uselayouts","lv":1},{"id":"uselayouts:bucket","t":"Bucket","d":"An interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.","k":"component","s":"uselayouts","c":"data-display/badge","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/bucket","pc":"uselayouts","lv":1},{"id":"uselayouts:card-folder","t":"Card Folder","d":"This component creates an animated folder-style card with a background image, floating 3D object, hover effects, and customizable colors and text. You can easily change the images,","k":"component","s":"uselayouts","c":"motion/tilt-3d","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/card-folder","pc":"uselayouts","lv":1},{"id":"uselayouts:client-card","t":"Client Card","d":"A client CRM card with payment and deadline rings, plus a morphing avatar stack.","k":"component","s":"uselayouts","c":"data-display/card","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/client-card","pc":"uselayouts","lv":1},{"id":"uselayouts:confidential-folder","t":"Confidential Folder","d":"A charcoal sleeve that pulls a letter out, flips it, and lands it in front of you.","k":"component","s":"uselayouts","c":"motion/tilt-3d","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/confidential-folder","pc":"uselayouts","lv":1},{"id":"uselayouts:corner-video","t":"Corner Video","d":"A compact corner video player with smooth open/close morphing, autoplay, mute, enlarge, hover controls, and video scrubbing.","k":"component","s":"uselayouts","c":"media/player","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/corner-video","pc":"uselayouts","lv":1},{"id":"uselayouts:coverflow-drag","t":"Coverflow Drag","d":"A drag coverflow of portraits that scale, dim, and snap as you swipe.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/coverflow-drag","pc":"uselayouts","lv":1},{"id":"uselayouts:create-menu","t":"Create Menu","d":"A Start Creating pill that springs open into a list of create actions.","k":"component","s":"uselayouts","c":"navigation/menu","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/create-menu","pc":"uselayouts","lv":1},{"id":"uselayouts:curve-drawer","t":"Curve Drawer","d":"Side drawers whose inner edge starts as a bulge and morphs into a straight line as the panel settles.","k":"component","s":"uselayouts","c":"overlays/sheet","g":"overlays","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/curve-drawer","pc":"uselayouts","lv":1},{"id":"uselayouts:day-picker","t":"Day Picker","d":"A custom day picker component with smooth animations.","k":"component","s":"uselayouts","c":"inputs/date-picker","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/day-picker","pc":"uselayouts","lv":1},{"id":"uselayouts:delete-button","t":"Delete Button","d":"A confirmation button with smooth icon transitions.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/delete-button","pc":"uselayouts","lv":1},{"id":"uselayouts:discover-button","t":"Discover Button","d":"An interactive button with expanding discovery state.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/discover-button","pc":"uselayouts","lv":1},{"id":"uselayouts:discrete-tabs","t":"Discrete Tabs","d":"A tab component with discrete sliding animations.","k":"component","s":"uselayouts","c":"navigation/tabs","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/discrete-tabs","pc":"uselayouts","lv":1},{"id":"uselayouts:drawer-buttons","t":"Drawer Buttons","d":"Two buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields stagger in.","k":"component","s":"uselayouts","c":"overlays/sheet","g":"overlays","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/drawer-buttons","pc":"uselayouts","lv":1},{"id":"uselayouts:dynamic-grid-gallery","t":"Dynamic Grid Gallery","d":"A 3×2 photo grid that grows the hovered row and column so one still takes the stage.","k":"component","s":"uselayouts","c":"media/gallery","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/dynamic-grid-gallery","pc":"uselayouts","lv":1},{"id":"uselayouts:dynamic-toolbar","t":"Dynamic Toolbar","d":"A toolbar that adapts its size and layout based on content.","k":"component","s":"uselayouts","c":"data-viz/chart","g":"data-viz","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/dynamic-toolbar","pc":"uselayouts","lv":1},{"id":"uselayouts:editorial-deck","t":"Editorial Deck","d":"A stacked editorial story deck. Drag the front card and it springs back into the pile.","k":"component","s":"uselayouts","c":"inputs/textarea","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/editorial-deck","pc":"uselayouts","lv":1},{"id":"uselayouts:empty-testimonial","t":"Empty Testimonial","d":"An interactive empty state for testimonials with a playful folder animation.","k":"component","s":"uselayouts","c":"data-display/empty-state","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/empty-testimonial","pc":"uselayouts","lv":1},{"id":"uselayouts:expandable-gallery","t":"Expandable Gallery","d":"A photo gallery with smooth item expansion.","k":"component","s":"uselayouts","c":"media/gallery","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/expandable-gallery","pc":"uselayouts","lv":1},{"id":"uselayouts:feature-carousel","t":"Feature Carousel","d":"A smooth carousel for showcasing product features.","k":"component","s":"uselayouts","c":"media/carousel","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/feature-carousel","pc":"uselayouts","lv":1},{"id":"uselayouts:filter-interaction","t":"Filter Interaction","d":"Interactive list items with hover and focus effects.","k":"component","s":"uselayouts","c":"data-display/list","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/filter-interaction","pc":"uselayouts","lv":1},{"id":"uselayouts:fluid-expanding-grid","t":"Fluid Expanding Grid","d":"A responsive gallery grid that fluidly shifts and expands items using motion layout.","k":"component","s":"uselayouts","c":"layout/page-shell","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/fluid-expanding-grid","pc":"uselayouts","lv":1},{"id":"uselayouts:focus-testimonials","t":"Focus Testimonials","d":"Interactive testimonial section with hover-based focus effects, animated author tooltips, and expandable testimonials.","k":"component","s":"uselayouts","c":"marketing","g":"marketing","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/focus-testimonials","pc":"uselayouts","lv":1},{"id":"uselayouts:folder-interaction","t":"Folder Interaction","d":"A folder management system with drag-and-drop-like feel.","k":"component","s":"uselayouts","c":"motion/tilt-3d","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/folder-interaction","pc":"uselayouts","lv":1},{"id":"uselayouts:get-in-touch","t":"Get In Touch","d":"A glossy contact pill. Hover and the label lifts away so a portrait and YOU merge, then Let’s Talk! writes in.","k":"component","s":"uselayouts","c":"data-display/badge","g":"data-display","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/get-in-touch","pc":"uselayouts","lv":1},{"id":"uselayouts:holographic-referral-card","t":"Holographic Referral Card","d":"A dark invite card that tilts in 3D with the pointer. A holographic glow follows. Touch stays still. Tab for a quiet glow.","k":"component","s":"uselayouts","c":"data-viz/chart","g":"data-viz","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/holographic-referral-card","pc":"uselayouts","lv":1},{"id":"uselayouts:gooey-navbar","t":"Gooey Navbar","d":"A pill nav that melts into its neighbor when you hover — liquid bridges, active dot.","k":"component","s":"uselayouts","c":"navigation/top-nav","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/gooey-navbar","pc":"uselayouts","lv":1},{"id":"uselayouts:infinite-grid","t":"Infinite Canvas","d":"A free-panning product canvas that tiles forever — drag, scroll, and skim an endless grid of images and captions.","k":"component","s":"uselayouts","c":"layout/page-shell","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/infinite-grid","pc":"uselayouts","lv":1},{"id":"uselayouts:inline-edit","t":"Inline Edit","d":"An input that switches between read and edit modes.","k":"component","s":"uselayouts","c":"inputs/form-field","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/inline-edit","pc":"uselayouts","lv":1},{"id":"uselayouts:liquid-index","t":"Liquid Index","d":"A feature list whose hover badge is a WebGL liquid gradient that tracks the row.","k":"component","s":"uselayouts","c":"motion/background","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/liquid-index","pc":"uselayouts","lv":1},{"id":"uselayouts:magnified-bento","t":"Magnified Bento","d":"A bento card component with a draggable magnifying lens effect over scrolling chips.","k":"component","s":"uselayouts","c":"layout/bento-grid","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/magnified-bento","pc":"uselayouts","lv":1},{"id":"uselayouts:morphing-input","t":"Morphing Input","d":"An input field that morphs between different states.","k":"component","s":"uselayouts","c":"inputs/form-field","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/morphing-input","pc":"uselayouts","lv":1},{"id":"uselayouts:multi-step-form","t":"Multi Step Form","d":"A dynamic, animated multi-step form with validation.","k":"component","s":"uselayouts","c":"inputs/form-field","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/multi-step-form","pc":"uselayouts","lv":1},{"id":"uselayouts:overlapping-slider","t":"Overlapping Slider","d":"A full-width landing row of portrait cards. They sit flat until you move — then the card on the left scales back.","k":"component","s":"uselayouts","c":"inputs/slider","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/overlapping-slider","pc":"uselayouts","lv":1},{"id":"uselayouts:perspective-text-scroll","t":"Perspective Text Scroll","d":"A polished example interaction built with React and Motion.","k":"component","s":"uselayouts","c":"layout/scroll-area","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/perspective-text-scroll","pc":"uselayouts","lv":1},{"id":"uselayouts:photo-albums","t":"Photo Albums","d":"Tilted album stacks that expand into a shared-element photo grid.","k":"component","s":"uselayouts","c":"media/gallery","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/photo-albums","pc":"uselayouts","lv":1},{"id":"uselayouts:paper-shred-button","t":"Paper Shred Button","d":"Hover Delete and a page appears above it. Click and the page clips away while paper strips draw in below. After a few seconds it resets so you can shred again.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/paper-shred-button","pc":"uselayouts","lv":1},{"id":"uselayouts:polaroid-drag","t":"Polaroid Drag","d":"Draggable Polaroid photo gallery with realistic tilt, stacking, smooth animations, and customizable captions, sizes, and decorations.","k":"component","s":"uselayouts","c":"media/gallery","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/polaroid-drag","pc":"uselayouts","lv":1},{"id":"uselayouts:polaroid-stack","t":"Polaroid Stack","d":"Seven Polaroids sit in a pile. Hover and they fan into an arc from one corner.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/polaroid-stack","pc":"uselayouts","lv":1},{"id":"uselayouts:pop-tilt-cards","t":"Pop Tilt Cards","d":"Interactive tilt card deck with smooth hover animations, 3D popping effects, images, links, and customizable card styling.","k":"component","s":"uselayouts","c":"motion/tilt-3d","g":"motion","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/pop-tilt-cards","pc":"uselayouts","lv":1},{"id":"uselayouts:pricing-card","t":"Pricing Card","d":"A focused pricing card layout with clear hierarchy.","k":"component","s":"uselayouts","c":"marketing","g":"marketing","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/pricing-card","pc":"uselayouts","lv":1},{"id":"uselayouts:prompt-box","t":"Prompt Box","d":"A collapsed chat composer that expands into a textarea with a model menu and send control.","k":"component","s":"uselayouts","c":"ai-agent/composer","g":"ai-agent","a":"uselayouts","st":"picked","pl":"https://uselayouts.com/docs/components/prompt-box","pc":"uselayouts","lv":1},{"id":"uselayouts:rolling-card-stack","t":"Rolling Card Stack","d":"It’s a responsive, animated rolling card stack component built with React, TypeScript, Tailwind CSS, and Framer Motion. It supports desktop/mobile layouts, swipe and keyboard navig","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/rolling-card-stack","pc":"uselayouts","lv":1},{"id":"uselayouts:save-button","t":"Save Button","d":"A button with animated states for idle, loading, and success.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/save-button","pc":"uselayouts","lv":1},{"id":"uselayouts:scan-document","t":"Scan Document","d":"Click Scan and a page unfolds, flips, and a glowing bar reads it. Done holds, then it resets.","k":"component","s":"uselayouts","c":"data-viz/chart","g":"data-viz","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/scan-document","pc":"uselayouts","lv":1},{"id":"uselayouts:scroll-split-cards","t":"Scroll Split Cards","d":"One photograph that splits into three panels as you scroll, then flips to copy.","k":"component","s":"uselayouts","c":"layout/split-pane","g":"layout","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/scroll-split-cards","pc":"uselayouts","lv":1},{"id":"uselayouts:scroll-stack-deck","t":"Scroll Stack Deck","d":"Scroll-linked project cards that pin in the viewport and stack, scale, and settle as you move down the page.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/scroll-stack-deck","pc":"uselayouts","lv":1},{"id":"uselayouts:set-timer","t":"Set Timer","d":"A dark timer pill that morphs into a minute wheel picker, then into a running timer with pause, cancel, and a rounded-rectangle progress border.","k":"component","s":"uselayouts","c":"inputs/time-picker","g":"inputs","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/set-timer","pc":"uselayouts","lv":1},{"id":"uselayouts:shake-testimonial-card","t":"Shake Testimonial Card","d":"An eye-catching testimonial card with playful animations.","k":"component","s":"uselayouts","c":"marketing","g":"marketing","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/shake-testimonial-card","pc":"uselayouts","lv":1},{"id":"uselayouts:slide-subscribe","t":"Slide Subscribe","d":"Pick a billing period, then slide to start a trial.","k":"component","s":"uselayouts","c":"unsorted","g":"unsorted","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/slide-subscribe","pc":"uselayouts","lv":1},{"id":"uselayouts:smooth-dropdown","t":"Smooth Dropdown","d":"A dropdown menu with premium layout transitions.","k":"component","s":"uselayouts","c":"navigation/menu","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/smooth-dropdown","pc":"uselayouts","lv":1},{"id":"uselayouts:stack-scroll-reveal","t":"Stack Scroll Reveal","d":"Scroll-linked case-study cards that pin in the viewport and peel, scale, and fade as you move down the page.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/stack-scroll-reveal","pc":"uselayouts","lv":1},{"id":"uselayouts:stacked-list","t":"Stacked List","d":"An expandable list widget with a stacked layout and smooth morphing transitions.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/stacked-list","pc":"uselayouts","lv":1},{"id":"uselayouts:stacked-outline-text","t":"Stacked Outline Text","d":"Heavy outlined type you can drag. Speed leaves a stacked white-on-black trail that springs back when you stop.","k":"component","s":"uselayouts","c":"media/card-stack","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/stacked-outline-text","pc":"uselayouts","lv":1},{"id":"uselayouts:theme-toggle","t":"Theme Toggle","d":"A physical switch with a dotted grip. Click and the knob slides across a recessed track.","k":"component","s":"uselayouts","c":"actions/switch","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/theme-toggle","pc":"uselayouts","lv":1},{"id":"uselayouts:tactile-button","t":"Tactile Button","d":"A liquid-glass rocker that tilts into its well when you press it.","k":"component","s":"uselayouts","c":"actions/button","g":"actions","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/tactile-button","pc":"uselayouts","lv":1},{"id":"uselayouts:vertical-tabs","t":"Vertical Tabs","d":"A vertical tab interaction with smooth content switching.","k":"component","s":"uselayouts","c":"navigation/tabs","g":"navigation","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/vertical-tabs","pc":"uselayouts","lv":1},{"id":"uselayouts:wheel-carousel","t":"Wheel Carousel","d":"This component creates a smooth wheel-style carousel with photos and selectable items. It supports drag, scroll, keyboard controls, snapping, momentum, themes, image crossfades, an","k":"component","s":"uselayouts","c":"media/carousel","g":"media","a":"uselayouts","st":"reviewed","pl":"https://uselayouts.com/docs/components/wheel-carousel","pc":"uselayouts","lv":1},{"id":"devigner:contact-lens","t":"Contact Lens","d":"A dim contact line with an icon row: hover an icon and its part of the line lifts and lights up under a label, click to copy it.","k":"component","s":"devigner","c":"inputs/form-field","g":"inputs","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/contact-lens","pc":"Devigner","lv":1},{"id":"devigner:copy-button","t":"Copy Button","d":"Copies text in one click, then turns green and retypes its label to Copied.","k":"component","s":"devigner","c":"actions/copy-button","g":"actions","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/copy-button","pc":"Devigner","lv":1},{"id":"devigner:nav-notch","t":"Nav Notch","d":"A row of small notches that works as a navigation bar: the one under the pointer opens into a labelled chip and its neighbours swell around it like a lens.","k":"component","s":"devigner","c":"navigation/top-nav","g":"navigation","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/nav-notch","pc":"Devigner","lv":1},{"id":"devigner:liquid-glass","t":"Liquid Glass","d":"An iOS 27 style glass menu whose rim bends the page behind it: a pill that swells into a squircle panel of rows and melts back once you pick one.","k":"component","s":"devigner","c":"motion/background","g":"motion","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/liquid-glass","pc":"Devigner","lv":1},{"id":"devigner:slider","t":"Slider","d":"A slider whose fill heats from yellow to red as it grows, with a glass thumb that opens to show the value while you drag.","k":"component","s":"devigner","c":"inputs/slider","g":"inputs","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/slider","pc":"Devigner","lv":1},{"id":"devigner:file-upload","t":"File Upload","d":"An upload panel whose files drip out of the dropzone as liquid, then queue, pause, fail and retry in compact cards before you submit them.","k":"component","s":"devigner","c":"inputs/file-upload","g":"inputs","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/file-upload","pc":"Devigner","lv":1},{"id":"devigner:goo-switch","t":"Goo Switch","d":"A switch whose thumb is a drop of liquid: it trails a tail when it moves and stretches over the edge when you pull it too far.","k":"component","s":"devigner","c":"actions/switch","g":"actions","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/goo-switch","pc":"Devigner","lv":1},{"id":"devigner:inline-time-edit","t":"Inline Time Edit","d":"A 2:30 that splits into hour and minute fields when you edit it, then folds back.","k":"component","s":"devigner","c":"inputs/time-picker","g":"inputs","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/inline-time-edit","pc":"Devigner","lv":1},{"id":"devigner:date-range-picker","t":"Date Range Picker","d":"A calendar that shows the range before you commit to it, with presets.","k":"component","s":"devigner","c":"inputs/date-range","g":"inputs","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/date-range-picker","pc":"Devigner","lv":1},{"id":"devigner:chart-card","t":"Chart Card","d":"A stats card whose bars show their value as you move across them.","k":"component","s":"devigner","c":"data-viz/chart","g":"data-viz","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/chart-card","pc":"Devigner","lv":1},{"id":"devigner:delete-button","t":"Delete Button","d":"Asks before it deletes, waits for your API call, then shows a tick.","k":"component","s":"devigner","c":"actions/button","g":"actions","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/delete-button","pc":"Devigner","lv":1},{"id":"devigner:menu-dock","t":"Menu Dock","d":"A dock that grows into its own menus, nested as deep as you need.","k":"component","s":"devigner","c":"navigation/dock","g":"navigation","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/menu-dock","pc":"Devigner","lv":1},{"id":"devigner:timeline","t":"Timeline","d":"The active step slides off the rail, and the line bends to follow it.","k":"component","s":"devigner","c":"data-display/timeline","g":"data-display","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/timeline","pc":"Devigner","lv":1},{"id":"devigner:magnetic-button","t":"Magnetic Button","d":"Leans toward your cursor before you reach it, then lets go with a wobble.","k":"component","s":"devigner","c":"actions/button","g":"actions","a":"Devigner","st":"reviewed","pl":"https://ui.devigner.cc/components/magnetic-button","pc":"Devigner","lv":1},{"id":"easyui:ai-agent-activity","t":"AI Agent Activity","d":"A timeline component for tracking AI agent reasoning, tool calls, API queries, database fetches, and execution states with inspectable parameters and results.","k":"component","s":"easyui","c":"ai-agent/run","g":"ai-agent","a":"EasyUI","st":"picked","pl":"https://www.easyui.site/components/ai-agent-activity","pc":"EasyUI","lv":1},{"id":"easyui:ai-response","t":"AI Response","d":"A production-ready, accessible AI response component supporting streaming markdown, syntax-styled code blocks, citations, feedback actions, and tool execution status.","k":"component","s":"easyui","c":"ai-agent/response","g":"ai-agent","a":"EasyUI","st":"picked","pl":"https://www.easyui.site/components/ai-response","pc":"EasyUI","lv":1},{"id":"easyui:activity-feed","t":"Activity Feed","d":"A developer telemetry and audit log stream featuring category filtering, live real-time event simulation with Framer Motion slide insertions, and expandable JSON payloads.","k":"component","s":"easyui","c":"data-display/timeline","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/activity-feed","pc":"EasyUI","lv":1},{"id":"easyui:advanced-data-table","t":"Advanced Data Table","d":"A powerful, accessible data table component with multi-column sorting, faceted filters, global search, row selection, bulk actions, expandable sub-rows, and pagination.","k":"component","s":"easyui","c":"data-display/table","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/advanced-data-table","pc":"EasyUI","lv":1},{"id":"easyui:airport-matrix-clock","t":"Airport Matrix Clock","d":"A live world clock that renders local times and city names as crisp dot-matrix characters with restrained, character-level rolling transitions.","k":"component","s":"easyui","c":"motion/number-ticker","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/airport-matrix-clock","pc":"EasyUI","lv":1},{"id":"easyui:animated-file-upload","t":"Animated File Upload","d":"A minimal, physical drag-and-drop file uploader with smooth drop reaction, independent file upload tracking, progressive state morphing, and accessible retry flows.","k":"component","s":"easyui","c":"inputs/file-upload","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/animated-file-upload","pc":"EasyUI","lv":1},{"id":"easyui:animated-number","t":"Animated Number Morph","d":"An Apple-grade smooth rolling digit counter that independently morphs individual numerical columns with physics-based springs, locale commas, currencies, and compact notation.","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/animated-number","pc":"EasyUI","lv":1},{"id":"easyui:animated-tabs","t":"Animated Tabs","d":"A tabbed switcher with physical pill indicator sliding smoothly between active items with content cross-fades.","k":"component","s":"easyui","c":"navigation/tabs","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/animated-tabs","pc":"EasyUI","lv":1},{"id":"easyui:avatar-stack","t":"Avatar Stack","d":"An interactive, stacked facepile of overlapping avatars that smoothly elevates and scales the hovered avatar to the front with spring physics, revealing the full image and name too","k":"component","s":"easyui","c":"data-display/avatar","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/avatar-stack","pc":"EasyUI","lv":1},{"id":"easyui:batch-gesture-tray","t":"Batch Gesture Tray","d":"A touch-ready contextual tray that slides into view upon item selection, presenting bulk actions and real-time count telemetry.","k":"component","s":"easyui","c":"inputs/time-picker","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/batch-gesture-tray","pc":"EasyUI","lv":1},{"id":"easyui:book-call-button","t":"Book Call Button","d":"A premium \"Book a call\" pill with a green expanding capsule. At rest, a 36% accent capsule holds a dotted arrow + label; on hover, the capsule fills the pill, the label slides out,","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/book-call-button","pc":"EasyUI","lv":1},{"id":"easyui:branching-submenu","t":"Branching Submenu","d":"A spatial submenu that connects parent options to child actions with staged branch motion.","k":"component","s":"easyui","c":"navigation/menu","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/branching-submenu","pc":"EasyUI","lv":1},{"id":"easyui:button","t":"Button","d":"A versatile, production-ready button system with 8 visual variants, 4 sizes, loading spinner states, icon slots, and spring tap feedback.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/button","pc":"EasyUI","lv":1},{"id":"easyui:car-smoke-page-transition","t":"Car Smoke Page Transition","d":"A cinematic page transition where a speeding car crosses the screen, leaving a smoke trail before transitioning to the next page.","k":"component","s":"easyui","c":"navigation/sidebar","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/car-smoke-page-transition","pc":"EasyUI","lv":1},{"id":"easyui:chat","t":"Chat","d":"A production-grade conversational chat component with thread history sidebar, rich message rendering, status indicators, file attachments, and auto-expanding composer.","k":"component","s":"easyui","c":"data-display/chat-thread","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/chat","pc":"EasyUI","lv":1},{"id":"easyui:circular-orbit","t":"Circular Orbit","d":"A circular gallery of image tiles orbiting around a centered title. All motion runs on a single MotionValue driven by useAnimationFrame, so no React renders per frame.","k":"component","s":"easyui","c":"ai-agent","g":"ai-agent","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/circular-orbit","pc":"EasyUI","lv":1},{"id":"easyui:code-snippet-deck","t":"Code Snippet Deck","d":"An interactive multi-runtime developer code snippet deck with runtime switching (cURL, TypeScript, Python, Go, Rust), live dynamic parameter customizations, and line highlighting.","k":"component","s":"easyui","c":"data-display/code-block","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/code-snippet-deck","pc":"EasyUI","lv":1},{"id":"easyui:command-menu","t":"Command Menu","d":"A global keyboard-first command palette with fuzzy filtering, category badges, and keyboard arrow controls.","k":"component","s":"easyui","c":"navigation/command-palette","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/command-menu","pc":"EasyUI","lv":1},{"id":"easyui:cursor-follower","t":"Cursor Follower","d":"A smooth spring-based cursor follower with customizable physics, velocity scaling, and custom child icons or badges.","k":"component","s":"easyui","c":"motion/cursor","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/cursor-follower","pc":"EasyUI","lv":1},{"id":"easyui:density-lens","t":"Density Lens","d":"An interactive floating lens that tracks pointer movement to reveal high-density data, magnified details, or alternative views.","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/density-lens","pc":"EasyUI","lv":1},{"id":"easyui:dependency-trace","t":"Dependency Trace","d":"An interactive SVG node graph that maps and dynamically traces relationship connections with directional bezier curves.","k":"component","s":"easyui","c":"data-viz/chart","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/dependency-trace","pc":"EasyUI","lv":1},{"id":"easyui:depth-corridor","t":"Depth Corridor","d":"A 3D spatial layer stack with receding perspective depth, progressive focal blurs, and pointer parallax motion.","k":"component","s":"easyui","c":"data-viz/progress-bar","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/depth-corridor","pc":"EasyUI","lv":1},{"id":"easyui:directional-tooltip","t":"DirectionalTooltip","d":"A tooltip that appears from the direction it originates — it starts a small distance outside the trigger in its preferred direction and springs inward, so it feels like it material","k":"component","s":"easyui","c":"overlays/tooltip","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/directional-tooltip","pc":"EasyUI","lv":1},{"id":"easyui:dot-field","t":"Dot Field","d":"High-performance lightweight static Canvas dot matrix background with dynamic gradient coloring and responsive density scaling.","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/dot-field","pc":"EasyUI","lv":1},{"id":"easyui:dot-shader","t":"Dot Shader","d":"A GPU-accelerated interactive dot matrix background shader with magnetic cursor repulsion, proximity illumination glow, dynamic lens scaling, and ambient wave motion.","k":"component","s":"easyui","c":"motion/background","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/dot-shader","pc":"EasyUI","lv":1},{"id":"easyui:drag-to-confirm","t":"Drag to Confirm","d":"A physical drag-to-confirm slider for high-stakes and destructive actions, equipped with elastic spring snapback physics, progressive track illumination, and accessible keyboard fa","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/drag-to-confirm","pc":"EasyUI","lv":1},{"id":"easyui:draw-checkbox","t":"DrawCheckbox","d":"A checkbox whose checkmark draws itself (path length animation) and settles with a tiny overshoot. The box scales from 0.9 -> 1.04 -> 1.0 for a tactile snap feel.","k":"component","s":"easyui","c":"inputs/checkbox","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/draw-checkbox","pc":"EasyUI","lv":1},{"id":"easyui:dynamic-island","t":"Dynamic Island","d":"A physical morphing island component that smoothly transitions between a compact indicator, interactive summary, profile card, and social dock with spring physics.","k":"component","s":"easyui","c":"navigation/dock","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/dynamic-island","pc":"EasyUI","lv":1},{"id":"easyui:evil-eye","t":"Evil Eye","d":"A hanging navy amulet disc with concentric sky-blue and white rings that swings with realistic inertia in response to the pointer, painted as a layered SVG and driven by a single s","k":"component","s":"easyui","c":"motion/cursor","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/evil-eye","pc":"EasyUI","lv":1},{"id":"easyui:expandable-data-row","t":"Expandable Data Row","d":"A polished table component with fluid accordion row unfolding, revealing deep metadata, audit activity feeds, and quick actions, with automatic card restructuring on mobile viewpor","k":"component","s":"easyui","c":"data-display/list","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/expandable-data-row","pc":"EasyUI","lv":1},{"id":"easyui:expandable-search","t":"Expandable Search","d":"A compact search pill that smoothly widens on focus with shortcut hint pills and clear button.","k":"component","s":"easyui","c":"inputs/search","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/expandable-search","pc":"EasyUI","lv":1},{"id":"easyui:faq","t":"FAQ","d":"An expandable accordion FAQ component with smooth spring height calculation, single/multi-open modes, category filtering, search, and full ARIA keyboard accessibility.","k":"component","s":"easyui","c":"data-display/accordion","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/faq","pc":"EasyUI","lv":1},{"id":"easyui:floating-action-dock","t":"Floating Action Dock","d":"A floating quick-action toolbar inspired by macOS dock physics with smooth magnification and subtle tooltips.","k":"component","s":"easyui","c":"navigation/dock","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/floating-action-dock","pc":"EasyUI","lv":1},{"id":"easyui:focus-mode","t":"Focus Mode","d":"An atmospheric focus-mode interaction that isolates selected cards or sections by smoothly dimming surrounding distractions with zero layout shift, tactile spring scaling, and Esca","k":"component","s":"easyui","c":"inputs/select","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/focus-mode","pc":"EasyUI","lv":1},{"id":"easyui:form","t":"Form","d":"A modular, composable form system with accessible inputs, textareas, custom selects, checkboxes, radio groups, switches, and animated validation messages.","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/form","pc":"EasyUI","lv":1},{"id":"easyui:glass-navbar","t":"Glass Navbar","d":"A modern, responsive glassmorphic navbar with smooth spring navigation pills, mobile menu drawer, and keyboard accessibility.","k":"component","s":"easyui","c":"navigation/top-nav","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/glass-navbar","pc":"EasyUI","lv":1},{"id":"easyui:glitch-text","t":"Glitch Text","d":"A multi-modal cybernetic glitch typography component featuring 5 distinct animation variants (RGB split chromatic aberration, cyberpunk clip-slicing, analog VHS tracking loss, matr","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/glitch-text","pc":"EasyUI","lv":1},{"id":"easyui:glyph-matrix","t":"Glyph Matrix","d":"A high-performance, canvas-driven Matrix digital rain background effect featuring streaming Katakana and numeric glyphs, glowing head highlights, decaying phosphor trails, and inte","k":"component","s":"easyui","c":"ai-agent","g":"ai-agent","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/glyph-matrix","pc":"EasyUI","lv":1},{"id":"easyui:gooey-menu","t":"Gooey Menu","d":"A tactile liquid dropdown menu with organic SVG metaball fusion filter and spring-driven extrusion animation.","k":"component","s":"easyui","c":"navigation/menu","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/gooey-menu","pc":"EasyUI","lv":1},{"id":"easyui:gravity-particle-burst","t":"Gravity Particle Burst","d":"A pointer-triggered canvas particle burst with velocity, gravity, friction, and short-lived physical follow-through.","k":"component","s":"easyui","c":"motion/cursor","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/gravity-particle-burst","pc":"EasyUI","lv":1},{"id":"easyui:hamburger-menu","t":"Hamburger Menu","d":"An iconic three-line menu toggle that transforms smoothly into a symmetrical close symbol.","k":"component","s":"easyui","c":"navigation/menu","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/hamburger-menu","pc":"EasyUI","lv":1},{"id":"easyui:ios-search-bar","t":"iOS-style Search Bar","d":"A minimalist search pill that smoothly expands on focus and reveals quick-clear controls with spring animation.","k":"component","s":"easyui","c":"data-viz/chart","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/ios-search-bar","pc":"EasyUI","lv":1},{"id":"easyui:interactive-timeline","t":"Interactive Timeline","d":"A developer-focused milestone and deployment timeline featuring dynamic progress lines, pulsating status nodes, expandable telemetry cards, and commit hash copy.","k":"component","s":"easyui","c":"data-display/timeline","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/interactive-timeline","pc":"EasyUI","lv":1},{"id":"easyui:intro-loader","t":"Intro Loader","d":"An Apple-inspired multilingual welcome splash and intro loader that rapidly cycles localized greetings with fluid blur transitions, progress tracking, and accessible skip controls.","k":"component","s":"easyui","c":"status/loader","g":"status","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/intro-loader","pc":"EasyUI","lv":1},{"id":"easyui:liquid-ripple-button","t":"Liquid Ripple Button","d":"A tactile button whose pointer-origin ripple and subtle wave layer make press feedback feel fluid.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/liquid-ripple-button","pc":"EasyUI","lv":1},{"id":"easyui:liquid-toggle","t":"Liquid Toggle","d":"A toggle with a liquid/blob-like transition. The internal shape deforms organically as it travels from off to on — stretching along the travel axis and settling into a natural blob","k":"component","s":"easyui","c":"actions/switch","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/liquid-toggle","pc":"EasyUI","lv":1},{"id":"easyui:loader","t":"Loader","d":"A minimal, purpose-driven loading indicator with 4 calm, non-anxious motion variants.","k":"component","s":"easyui","c":"status/loader","g":"status","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/loader","pc":"EasyUI","lv":1},{"id":"easyui:lock-input","t":"LockInput","d":"A text input whose focus state subtly \"locks\" into place — a focus ring scales in from the center and the border tweens to active, giving the impression that the input snaps closed","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/lock-input","pc":"EasyUI","lv":1},{"id":"easyui:login","t":"Login","d":"A production-ready authentication card built with the EasyUI form system, featuring password show/hide, remember me, validation states, and social logins.","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/login","pc":"EasyUI","lv":1},{"id":"easyui:mac-os-folder-cards","t":"macOS Folder Cards","d":"An authentic porcelain-white macOS Finder folder icon that unrolls interactive cards with fluid Apple spring physics.","k":"component","s":"easyui","c":"motion/tilt-3d","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/mac-os-folder-cards","pc":"EasyUI","lv":1},{"id":"easyui:magnetic-button","t":"Magnetic Button","d":"A responsive button with subtle proximity-based physics that pulls towards the cursor on hover and snaps back on departure.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/magnetic-button","pc":"EasyUI","lv":1},{"id":"easyui:meteors","t":"Meteors","d":"A lightweight, highly aesthetic animated meteor shower effect that streams diagonal glowing celestial light beams across cards, badges, hero containers, and call-to-action sections","k":"component","s":"easyui","c":"data-display/badge","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/meteors","pc":"EasyUI","lv":1},{"id":"easyui:metric-hud","t":"Metric HUD","d":"An interactive developer telemetry card featuring hardware-accelerated SVG sparklines, pointer-scrubbing point inspection, spring-animated time range morphing, and delta indicators","k":"component","s":"easyui","c":"data-display/stat","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/metric-hud","pc":"EasyUI","lv":1},{"id":"easyui:morphing-blob","t":"Morphing Blob","d":"An ambient, accessible SVG blob background that continuously morphs with spring physics and subtly follows the cursor for a fluid, interactive visual effect.","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/morphing-blob","pc":"EasyUI","lv":1},{"id":"easyui:morphing-button","t":"Morphing Button","d":"A layout-stable interactive action button that smoothly transitions between Idle, Loading, Success, and Error states without jarring jumps or dimension shifts.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/morphing-button","pc":"EasyUI","lv":1},{"id":"easyui:morphing-dialog","t":"Morphing Dialog","d":"An expandable card trigger that fluidly morphs into a centered dialog without jarring popup animations.","k":"component","s":"easyui","c":"overlays/dialog","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/morphing-dialog","pc":"EasyUI","lv":1},{"id":"easyui:morphing-icon","t":"Morphing Icon","d":"An animated micro-interaction wrapper that smoothly morphs between two icon states with coordinated rotation, scale, and cross-fade transitions.","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/morphing-icon","pc":"EasyUI","lv":1},{"id":"easyui:morphing-shape-loader","t":"Morphing Shape Loader","d":"A loading indicator that continuously morphs between configurable SVG shapes via real path interpolation. The transition is a genuine geometric morph — never a fade out / in.","k":"component","s":"easyui","c":"status/loader","g":"status","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/morphing-shape-loader","pc":"EasyUI","lv":1},{"id":"easyui:neon-edge-button","t":"Neon Edge Button","d":"A button with a restrained light source travelling around the border while the label remains primary.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/neon-edge-button","pc":"EasyUI","lv":1},{"id":"easyui:nimbu-mirchi","t":"Nimbu Mirchi","d":"A hanging lemon-and-green-chilli charm that swings with realistic inertia in response to the pointer, built from layered physical springs rather than a single rigid illustration.","k":"component","s":"easyui","c":"motion/cursor","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/nimbu-mirchi","pc":"EasyUI","lv":1},{"id":"easyui:not-found","t":"Not Found","d":"A minimal, production-ready 404 / route error component featuring floating spring-physics proximity displacement on individual glyphs, clear typography hierarchy, and accessible re","k":"component","s":"easyui","c":"data-viz/chart","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/not-found","pc":"EasyUI","lv":1},{"id":"easyui:notification-bell","t":"Notification Bell","d":"An interactive notification trigger with animated badge counter, arrival shake feedback, and dropdown panel.","k":"component","s":"easyui","c":"overlays/toast","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/notification-bell","pc":"EasyUI","lv":1},{"id":"easyui:notification-stack","t":"Notification Stack","d":"A stacked notification card system with physical spring stacking elevation, swipe-to-dismiss drag, and simulation triggers.","k":"component","s":"easyui","c":"overlays/toast","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/notification-stack","pc":"EasyUI","lv":1},{"id":"easyui:orbital-loading-ring","t":"Orbital Loading Ring","d":"A lightweight loading indicator with layered rings and orbiting particles that communicate active processing.","k":"component","s":"easyui","c":"ai-agent","g":"ai-agent","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/orbital-loading-ring","pc":"EasyUI","lv":1},{"id":"easyui:origin-dropdown","t":"OriginDropdown","d":"A dropdown with origin-aware expansion — the menu materializes from the chosen side with a slight scale and an inward translation, so its perceived origin is the trigger edge close","k":"component","s":"easyui","c":"navigation/menu","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/origin-dropdown","pc":"EasyUI","lv":1},{"id":"easyui:otp-input","t":"OTP Input","d":"An accessible one-time-passcode input made of auto-advancing digit boxes, each with a spring-driven pop animation on entry, built with Framer Motion and Tailwind CSS.","k":"component","s":"easyui","c":"inputs/otp-input","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/otp-input","pc":"EasyUI","lv":1},{"id":"easyui:particle-delete","t":"Particle Delete","d":"Premium physics-driven particle dissolution delete animation that rasterizes components into thousands of authentic tiny pixels and disperses them smoothly before state removal.","k":"component","s":"easyui","c":"data-display/stat","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/particle-delete","pc":"EasyUI","lv":1},{"id":"easyui:payment-receipt-printer","t":"Payment Receipt Printer","d":"An animated payment and order receipt printer component for React featuring realistic thermal paper extrusion, chassis micro-vibration, customizable receipt itemization, and replay","k":"component","s":"easyui","c":"data-display/list","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/payment-receipt-printer","pc":"EasyUI","lv":1},{"id":"easyui:payment-status","t":"Payment Status","d":"A calm, Apple-grade payment confirmation card with animated SVG path checkmark drawing, staged verification lifecycle transitions, receipt inspection, and failure recovery.","k":"component","s":"easyui","c":"data-display/stat","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/payment-status","pc":"EasyUI","lv":1},{"id":"easyui:peek-card","t":"Peek Card","d":"An origin-anchored contextual preview popover that emerges directly from target triggers on hover or tap with smart collision edge detection and rich metadata summaries.","k":"component","s":"easyui","c":"overlays/hover-card","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/peek-card","pc":"EasyUI","lv":1},{"id":"easyui:pill-navigation","t":"Pill Navigation","d":"A restrained segmented navigation control with shared pill layout morphing and nested submenu dropdown support.","k":"component","s":"easyui","c":"data-display/badge","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/pill-navigation","pc":"EasyUI","lv":1},{"id":"easyui:press-button","t":"PressButton","d":"A button that compresses slightly on press and settles with a tiny natural overshoot for a tactile, physical feel.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/press-button","pc":"EasyUI","lv":1},{"id":"easyui:pricing","t":"Pricing","d":"A minimal two-tier pricing component for EasyUI. Native to the existing design system, fully theme-aware, with a quiet Free tier and a slightly more attractive Pro tier — without r","k":"component","s":"easyui","c":"marketing","g":"marketing","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/pricing","pc":"EasyUI","lv":1},{"id":"easyui:profile-card","t":"Profile Card","d":"A premium dark social profile card with a painted blue cover-art panel, action row, and a detail panel with avatar, verified name, bio, follower stats, and outbound website link.","k":"component","s":"easyui","c":"inputs/file-upload","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/profile-card","pc":"EasyUI","lv":1},{"id":"easyui:pull-to-refresh","t":"Pull to Refresh","d":"A physical pull-to-refresh component and container featuring realistic elastic resistance curves, smooth cubic bezier line chart visualization with interactive point scrubbing, hig","k":"component","s":"easyui","c":"data-display/stat","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/pull-to-refresh","pc":"EasyUI","lv":1},{"id":"easyui:rainbow-button","t":"Rainbow Button","d":"A vibrant button featuring an animated chromatic rainbow gradient border, dynamic 3D surface reflections, and an ambient blurred rainbow underglow.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/rainbow-button","pc":"EasyUI","lv":1},{"id":"easyui:recovery-ledger","t":"Recovery Ledger","d":"An archival audit timeline and state recovery ledger with chronological snapshot markers, diff inspection, and one-click rollback triggers.","k":"component","s":"easyui","c":"data-display/timeline","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/recovery-ledger","pc":"EasyUI","lv":1},{"id":"easyui:reveal-card","t":"Reveal Card","d":"A high-definition product card with smooth cursor-driven 3D perspective rotation, dynamic glare, and revealed content.","k":"component","s":"easyui","c":"motion/text-effect","g":"motion","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/reveal-card","pc":"EasyUI","lv":1},{"id":"easyui:rocket-party-popper","t":"Rocket Party Popper","d":"An interactive black rocket launch that blasts into a colorful party popper confetti shower to reveal celebratory milestones.","k":"component","s":"easyui","c":"inputs/color-picker","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/rocket-party-popper","pc":"EasyUI","lv":1},{"id":"easyui:scroll-progress-nav","t":"Scroll Progress Navigation","d":"A floating table-of-contents navigation pill that tracks scroll depth, dynamically morphs between resting and floating states, highlights active sections, and enables smooth scroll","k":"component","s":"easyui","c":"data-viz/progress-bar","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/scroll-progress-nav","pc":"EasyUI","lv":1},{"id":"easyui:scrollvelocitytext","t":"Scroll Velocity Text","d":"A direction-aware kinetic typography component that smoothly expands letter-spacing and scale on downward scroll, and winds back on upward scroll, with zero per-frame React re-rend","k":"component","s":"easyui","c":"layout/scroll-area","g":"layout","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/scrollvelocitytext","pc":"EasyUI","lv":1},{"id":"easyui:selection-basket","t":"Selection Basket","d":"A floating bulk-action toolbar that smoothly rises from the bottom of the screen when multiple dataset items are selected, supporting batch operations, horizontal scrolling, and cl","k":"component","s":"easyui","c":"inputs/select","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/selection-basket","pc":"EasyUI","lv":1},{"id":"easyui:settle-modal","t":"SettleModal","d":"A modal whose content has a tiny scale/settle instead of a generic fade. The panel scales 0.94 -> 1.02 -> 1.0 with a small y travel, then the inner content layers its own gentle se","k":"component","s":"easyui","c":"overlays/dialog","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/settle-modal","pc":"EasyUI","lv":1},{"id":"easyui:shooting-stars","t":"Shooting Stars","d":"A high-performance deep-space cosmos background featuring multi-depth twinkling celestial stars, glowing atmospheric nebula clouds, and cinematic shooting stars with luminous head ","k":"component","s":"easyui","c":"inputs/rating","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/shooting-stars","pc":"EasyUI","lv":1},{"id":"easyui:sign-up","t":"Sign Up","d":"A comprehensive registration card with live password strength metrics, password confirmation matching, terms validation, and social onboarding.","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/sign-up","pc":"EasyUI","lv":1},{"id":"easyui:slide-pagination","t":"SlidePagination","d":"A pagination control where the active indicator slides between pages rather than instantly switching. The active background uses shared layoutId so the indicator visibly travels fr","k":"component","s":"easyui","c":"navigation/pagination","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/slide-pagination","pc":"EasyUI","lv":1},{"id":"easyui:small-floating-dock","t":"Small Floating Dock","d":"A minimal, gesture-responsive floating dock for quick access to 3-5 primary actions.","k":"component","s":"easyui","c":"navigation/dock","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/small-floating-dock","pc":"EasyUI","lv":1},{"id":"easyui:smart-comparison","t":"Smart Comparison","d":"An interactive feature matrix and SaaS tier comparison component featuring live difference filtering, collapsible specification categories, search indexing, and mobile card toggle.","k":"component","s":"easyui","c":"data-display/accordion","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/smart-comparison","pc":"EasyUI","lv":1},{"id":"easyui:smooth-accordion","t":"Smooth Accordion","d":"An accordion component with physics height transition, rotating chevron indicators, and accessible keyboard toggles.","k":"component","s":"easyui","c":"data-display/accordion","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/smooth-accordion","pc":"EasyUI","lv":1},{"id":"easyui:sparkles-core","t":"Sparkles Core","d":"A high-performance, zero-dependency particle sparkle canvas with multi-shape geometry (circles, radiant diamond stars, cross starlets), organic twinkling, interactive cursor repuls","k":"component","s":"easyui","c":"inputs/rating","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/sparkles-core","pc":"EasyUI","lv":1},{"id":"easyui:speed-warp","t":"Speed Warp","d":"A 3D perspective canvas starfield simulation that projects relativistic light streaks toward the viewer, creating an intense hyperspace or warp drive velocity effect.","k":"component","s":"easyui","c":"inputs/form-field","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/speed-warp","pc":"EasyUI","lv":1},{"id":"easyui:split-button","t":"Split Button","d":"A primary action fused with a chevron trigger that reveals related actions in a spring-timed dropdown, sharing a single pill silhouette.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/split-button","pc":"EasyUI","lv":1},{"id":"easyui:spotlight-card","t":"Spotlight Card","d":"A dark elevated surface that illuminates border and inner surfaces dynamically based on mouse pointer coordinates.","k":"component","s":"easyui","c":"navigation/command-palette","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/spotlight-card","pc":"EasyUI","lv":1},{"id":"easyui:spotlight-search","t":"Spotlight Search","d":"A global command palette and search overlay triggered by ⌘K featuring real-time fuzzy filtering, moving active highlight springs, kbd shortcuts, and full keyboard navigation.","k":"component","s":"easyui","c":"navigation/command-palette","g":"navigation","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/spotlight-search","pc":"EasyUI","lv":1},{"id":"easyui:spring-select","t":"SpringSelect","d":"A select dropdown whose menu follows the trigger with a tiny spring. The chevron rotates a hair past 180° before settling, and the panel slides down with a subtle overshoot.","k":"component","s":"easyui","c":"inputs/select","g":"inputs","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/spring-select","pc":"EasyUI","lv":1},{"id":"easyui:stack-unfold-panel","t":"Stack Unfold Panel","d":"A vertically stacked card deck that unfolds progressively with spring physics, shifting adjacent panels with zero layout jank.","k":"component","s":"easyui","c":"media/card-stack","g":"media","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/stack-unfold-panel","pc":"EasyUI","lv":1},{"id":"easyui:stacked-cards","t":"Stacked Cards","d":"A responsive, scroll-driven stacking cards component built with Tailwind CSS and Framer Motion. Cards start aligned in a column and stack gracefully on scroll without hijacking pag","k":"component","s":"easyui","c":"media/card-stack","g":"media","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/stacked-cards","pc":"EasyUI","lv":1},{"id":"easyui:sticky-pages","t":"Sticky Pages","d":"A pure static full-page sticky stacking scroll component where pages slide up and stack cleanly one over another without any tilting or distortion, before releasing smoothly into n","k":"component","s":"easyui","c":"data-display/stat","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/sticky-pages","pc":"EasyUI","lv":1},{"id":"easyui:story-card","t":"Story Cards","d":"A responsive, accessible story cards carousel for React applications built with Tailwind CSS and Framer Motion.","k":"component","s":"easyui","c":"data-display/card","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/story-card","pc":"EasyUI","lv":1},{"id":"easyui:stretch-switch","t":"StretchSwitch","d":"A toggle switch whose thumb stretches slightly while dragging or pressing, then snaps naturally to its destination via a snappy spring.","k":"component","s":"easyui","c":"actions/switch","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/stretch-switch","pc":"EasyUI","lv":1},{"id":"easyui:text-scramble-decoder","t":"Text Scramble Decoder","d":"A controlled text reveal that resolves scrambled glyphs into readable copy without changing the text semantics.","k":"component","s":"easyui","c":"data-display/code-block","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/text-scramble-decoder","pc":"EasyUI","lv":1},{"id":"easyui:thinking-orb","t":"Thinking Orb","d":"Minimalist monochrome spherical particle vortex with orbital physics, pure black-and-white luminous styling, and 9 cognitive state deformations.","k":"component","s":"easyui","c":"ai-agent","g":"ai-agent","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/thinking-orb","pc":"EasyUI","lv":1},{"id":"easyui:torque-dial","t":"Torque Dial","d":"A rotational control dial with realistic physical angular momentum, velocity tracking, and exponential friction deceleration.","k":"component","s":"easyui","c":"data-viz/gauge","g":"data-viz","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/torque-dial","pc":"EasyUI","lv":1},{"id":"easyui:typewriter-button","t":"Typewriter Button","d":"An interactive button that reveals its label character-by-character with optional synthesized mechanical audio feedback.","k":"component","s":"easyui","c":"actions/button","g":"actions","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/typewriter-button","pc":"EasyUI","lv":1},{"id":"easyui:undo-toast","t":"Undo Toast","d":"An advanced undo notification toast featuring an interactive progress countdown, pause-on-hover mechanics, action reversal animation, and versatile position anchoring.","k":"component","s":"easyui","c":"overlays/toast","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/undo-toast","pc":"EasyUI","lv":1},{"id":"easyui:unfold-accordion","t":"UnfoldAccordion","d":"An accordion whose content unfolds with the chevron and spacing moving together. The chevron rotates 180° while the content height expands and the inner content slides up to close ","k":"component","s":"easyui","c":"data-display/accordion","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/unfold-accordion","pc":"EasyUI","lv":1},{"id":"easyui:velocity-toast","t":"VelocityToast","d":"A toast that enters with velocity and settles, with a progress indicator that responds naturally — pauses on hover, resumes with no jump, and eases slightly in the final 10% so dis","k":"component","s":"easyui","c":"overlays/toast","g":"overlays","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/velocity-toast","pc":"EasyUI","lv":1},{"id":"easyui:wallet-card","t":"Wallet Card","d":"A premium dark wallet card with a blue radial-gradient surface, live balance display, iOS-style toggle, and a primary action button. The card surface responds to the pointer with a","k":"component","s":"easyui","c":"data-display/card","g":"data-display","a":"EasyUI","st":"reviewed","pl":"https://www.easyui.site/components/wallet-card","pc":"EasyUI","lv":1},{"id":"opensourceui:3d-button","t":"Tactile 3D","d":"Universal 3D button with tactile keycap shadows — pass any children (label, icon + label). Variants: solid, soft, muted. Sizes: sm, md, lg, icon. Press sinks the key in.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/3d-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:3d-icon-button","t":"Tactile 3D Icon","d":"Square 3D icon button — pass any icon as children and a required label for accessibility. Same solid / soft / muted materials as ThreeDButton.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/3d-icon-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:soft-ui-button","t":"Neumorphic Soft UI","d":"Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/soft-ui-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:inset-button","t":"Recessed Inset","d":"Recessed inset button — looks pressed into the surface. Light or dark variant. Pass any children.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/inset-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:soft-pill-button","t":"Floating Pill","d":"Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press.","k":"component","s":"opensourceui","c":"data-display/badge","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/soft-pill-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:depth-outline-button","t":"Depth Outline","d":"Premium outline button with layered float depth, a soft top lip, and a press-in sink — secondary CTA that still feels tactile. Pass any children.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/depth-outline-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sheen-pill-button","t":"Sheen Pill","d":"Frosted pill with layered shade veil, light band, and rim wire — hover brightens the sheen and clears the fill. Pass width, height, and highlight to tune the frame.","k":"component","s":"opensourceui","c":"data-display/badge","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sheen-pill-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:prism-depth-button","t":"Prism Depth","d":"Dark depth button with a cyan edge flare, rim glow, and layered core veil — pass any label as children.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/prism-depth-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dimple-switch","t":"Dimple Switch","d":"Tactile switch with a dimpled knob, metallic track, and amber on-state fill. Hidden checkbox drives the slide — controlled or uncontrolled.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dimple-switch","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:cinder-latch-button","t":"Cinder Latch","d":"Charcoal latch button with a warm ember under-glow, center groove, and face sheen — built for secure-action CTAs.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/cinder-latch-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:slate-chip-switch","t":"Slate Chip Switch","d":"Smooth pill chip switch with a white thumb and sky on-state fill — a cleaner alternative to textured toggles.","k":"component","s":"opensourceui","c":"data-display/badge","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/slate-chip-switch","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:linen-tab-button","t":"Linen Tab","d":"Woven linen tab with dashed stitch borders and a soft fold sheen — warm, editorial, and understated.","k":"component","s":"opensourceui","c":"navigation/tabs","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/linen-tab-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:slide-to-confirm-button","t":"Slide to Confirm","d":"Drag the knob across the track to commit an action — snaps back if you release early, locks green when confirmed. Great for irreversible or high-intent actions.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/slide-to-confirm-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:hold-to-delete-button","t":"Hold to Delete","d":"Press and hold as a fill sweeps across; release early to cancel, hold to the end to delete. Prevents accidental destructive taps.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/hold-to-delete-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:add-to-cart-button","t":"Add to Cart","d":"Raised 3D add-to-cart key that sinks in while adding, with gentle label crossfades, then pops back up in a solid emerald added state before resetting.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/add-to-cart-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:like-button","t":"Like Toggle","d":"Heart toggle that pops and scatters particles on the way up, with a live count. Pill fills rose when active — no glow, no gradient.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/like-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:copy-button","t":"Copy to Clipboard","d":"Copies text to the clipboard and cross-fades the copy icon into a check with a Copied label. Monospace value, resets on its own.","k":"component","s":"opensourceui","c":"data-display/kanban","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/copy-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:quantity-stepper-button","t":"Quantity Stepper","d":"Inline minus / count / plus control for carts and forms. Clamps between min and max, disables at the edges.","k":"component","s":"opensourceui","c":"navigation/wizard-steps","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/quantity-stepper-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:download-button","t":"Download with States","d":"Raised 3D download key that sinks while downloading — arrow morphs to spinner to check — then pops back up as a solid emerald done state.","k":"component","s":"opensourceui","c":"data-display/stat","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/download-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:follow-button","t":"Follow Toggle","d":"Social follow toggle — dark Follow pill becomes a quiet Following state with a user-check icon. Tap again to unfollow.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/follow-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:bookmark-save-button","t":"Bookmark Save","d":"Save for later — bookmark icon fills amber and label swaps to Saved. Square-ish control for articles and products.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/bookmark-save-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:segmented-toggle-button","t":"Segmented Control","d":"iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/segmented-toggle-button","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:analog-clock-roman","t":"Analog Clock — Roman","d":"A live analog clock dressed in roman numerals — classic dial, real moving hands. Swap the variant prop to match the mood of your layout.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/analog-clock-roman","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:analog-clock-minimal","t":"Analog Clock — Minimal","d":"Ticks and hands on a quiet face, nothing else. When you want the time to sit in the background without shouting over your UI.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/analog-clock-minimal","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:analog-clock-numeric","t":"Analog Clock — Numeric","d":"Arabic numerals and a live second hand on a clean analog dial. Readable from across the room, still far from a default system clock.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/analog-clock-numeric","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:wifi-toggle","t":"wifi-toggle","d":"The toggle you'd expect on an iPhone — network name, on/off switch, that familiar iOS weight. Drop it into any control panel or settings screen.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/wifi-toggle","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:voice-assistant","t":"voice-assistant","d":"Animated equalizer bars and a mic button that flip between idle and listening. Builds the voice-AI moment without building the whole assistant.","k":"component","s":"opensourceui","c":"ai-agent","g":"ai-agent","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/voice-assistant","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ios-earbuds","t":"ios-earbuds","d":"AirPods-style widget showing device name and connection status. Small, familiar, and perfect beside other iOS-style controls.","k":"component","s":"opensourceui","c":"data-display/stat","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ios-earbuds","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:recorder-face","t":"recorder-face","d":"A quirky record button with a mascot face, circular dial, and live timer. Tap to start and pause — feels like a tiny dedicated recorder app.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/recorder-face","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:battery-face","t":"battery-face","d":"Battery level as a character — arc ring, percentage, hours left, and a face that actually looks sad when you're running low.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/battery-face","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:compass","t":"compass","d":"A compass dial with labeled directions and a needle that follows device tilt. Pass a heading prop or let the browser handle orientation.","k":"component","s":"opensourceui","c":"data-viz/gauge","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/compass","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:bluetooth-face","t":"bluetooth-face","d":"A teal mascot face that reacts when Bluetooth connects or drops. Toggle on/off with an expression change — playful, but still reads as a real status widget.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/bluetooth-face","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:torch-face","t":"torch-face","d":"Yellow flashlight toggle with a face that lights up when the torch is on. Small detail, but the kind people notice on a control sheet.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/torch-face","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dnd-face","t":"dnd-face","d":"Focus mode as a purple moon mascot — tap to toggle DND and watch the expression shift. Makes a utilitarian setting feel a little human.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dnd-face","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ios-digital-clock","t":"ios-digital-clock","d":"Live HH:MM in an iOS squircle with subtle tick marks around the edge. The kind of clock tile you'd find on a lock screen.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ios-digital-clock","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ios-calender","t":"ios-calender","d":"Today's date in the classic iOS calendar tile — red weekday, big day number, month underneath. Updates live, no refresh needed.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ios-calender","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:stopwatch","t":"stopwatch","d":"Millisecond-precision stopwatch with reset, play-pause, and stop in a compact white widget. Running state shown with a small indicator dot.","k":"component","s":"opensourceui","c":"data-display/stat","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/stopwatch","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ios-map-location","t":"ios-map-location","d":"Map pin widget with your city name — simple location card in the iOS family. Good for travel apps, weather screens, or profile headers.","k":"component","s":"opensourceui","c":"data-viz/map","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ios-map-location","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:focus-breath","t":"focus-breath","d":"A breathing guide that pulses between inhale and exhale every four seconds. One tap to start — useful in wellness or focus flows.","k":"component","s":"opensourceui","c":"status/status-dot","g":"status","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/focus-breath","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:blob-profile","t":"blob-profile","d":"Profile card with an organic blob-shaped photo frame, name, verified check, and handle. Stands out from every circular-avatar layout on the web.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/blob-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:editorial-staff-profile","t":"editorial-staff-profile","d":"Numbered editorial roster row with serif name, uppercase role, and a square photo. Built for about pages and team indexes.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/editorial-staff-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:user-profile","t":"user-profile","d":"Author byline on warm editorial paper — square portrait, serif name, and text links. Built for personal sites and portfolio sidebars.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/user-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:contact-profile","t":"contact-profile","d":"Museum placard contact directory — mono labels, serif name, and typographic rows without icon clutter.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/contact-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:team-member-profile-grid","t":"team-member-profile-grid","d":"Responsive team grid with vertical portrait cards — section header plus name, role, bio, and profile link per member.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/team-member-profile-grid","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:mac-dock","t":"mac-dock","d":"Frosted macOS-style app dock with smooth hover lift, tooltips, and brand icons — Tailwind-only, no motion library.","k":"component","s":"opensourceui","c":"navigation/dock","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/mac-dock","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:app-dock","t":"app-dock","d":"Bottom app launcher dock matching MacDock shell, spacing, and hover lift — with active state and optional labels.","k":"component","s":"opensourceui","c":"navigation/dock","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/app-dock","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:editor-tool-dock","t":"editor-tool-dock","d":"Vertical editor tool dock using MacDock tile size, padding, and ease-smooth hover scale.","k":"component","s":"opensourceui","c":"navigation/dock","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/editor-tool-dock","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:presence-dock","t":"presence-dock","d":"Collaborator presence dock with MacDock-sized avatar tiles and expandable member list.","k":"component","s":"opensourceui","c":"navigation/dock","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/presence-dock","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:spotlight-bar","t":"spotlight-bar","d":"Spotlight-style command search in the frosted dock shell — keyboard nav and suggestions.","k":"component","s":"opensourceui","c":"navigation/command-palette","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/spotlight-bar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:step-count","t":"step-count","d":"Editorial step stat — light wide card, large number, goal in a quiet footer row. No progress bars or icons.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/step-count","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:pomodoro","t":"pomodoro","d":"Dark pomodoro timer — thin ring, split monospace time, tap to start or pause. Polished to match the DND card size and proportions.","k":"component","s":"opensourceui","c":"inputs/time-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/pomodoro","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:hydration","t":"hydration","d":"Tall bottle card — count at the top, water level rises inside a simple bottle outline. Tap to log a glass.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/hydration","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sleep-score","t":"sleep-score","d":"Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sleep-score","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:heart-rate","t":"heart-rate","d":"Heart rate in the DND face layout — mascot at the bottom, BPM above the dial, soft pulse on the ring.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/heart-rate","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:daily-activity-calendar","t":"daily-activity-calendar","d":"Month grid for the current month — today is highlighted in orange, with a short emerald streak on prior days. Pass activeDays or highlightDay to override.","k":"component","s":"opensourceui","c":"data-display/timeline","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/daily-activity-calendar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:month-picker-calendar","t":"month-picker-calendar","d":"Full month picker with prev/next navigation — tap any day to select it, today gets a quiet ring.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/month-picker-calendar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:week-strip-calendar","t":"week-strip-calendar","d":"Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/week-strip-calendar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:date-range-picker","t":"date-range-picker","d":"Travel-style date range picker — first tap sets check-in, second sets check-out, days between fill in.","k":"component","s":"opensourceui","c":"inputs/date-range","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/date-range-picker","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:team-members-table","t":"team-members-table","d":"Team members with profile photos, email, role, and status. Uses /profile-picture.png and /woman.png avatars.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/team-members-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:orders-table","t":"orders-table","d":"E-commerce orders table — sort by date, total, or status. The standard admin dashboard orders view.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/orders-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:users-select-table","t":"users-select-table","d":"Bulk-select users table with header checkbox and live selection count. Clean white admin pattern for permissions or exports.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/users-select-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:recent-transactions-table","t":"recent-transactions-table","d":"Stripe-style transaction list with positive and negative amounts and simple pagination.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/recent-transactions-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:tasks-table","t":"tasks-table","d":"Project tasks with checkboxes, assignee avatars, and due dates. Tap to mark complete.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/tasks-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:customers-table","t":"customers-table","d":"SaaS customer list with plan, last active, and MRR. Common billing dashboard table.","k":"component","s":"opensourceui","c":"data-display/table","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/customers-table","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:resource-links-panel","t":"resource-links-panel","d":"Resource link list with logo, name, description, and domain per row — same layout as the homepage Resources section. Copy and pass title + items.","k":"component","s":"opensourceui","c":"layout/split-pane","g":"layout","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/resource-links-panel","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:event-countdown-card","t":"event-countdown-card","d":"Live countdown to an event — days, hours, and minutes update every minute. Editorial typography, no ticker gimmicks.","k":"component","s":"opensourceui","c":"motion/number-ticker","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/event-countdown-card","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:booking-slot-calendar","t":"booking-slot-calendar","d":"Appointment booking flow — week strip on top, time slots below. Unavailable slots are crossed out, tap to book.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/booking-slot-calendar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:audio-recorder","t":"audio-recorder","d":"Dark recording card with title, date, animated red waveform, and elapsed time. Play and pause feel like a native voice memo app.","k":"component","s":"opensourceui","c":"media/player","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/audio-recorder","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:flight-arrival","t":"flight-arrival","d":"Countdown to landing with departure and arrival airports and a plane moving along a progress bar. Built for travel dashboards and trip widgets.","k":"component","s":"opensourceui","c":"data-display/kanban","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/flight-arrival","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:minimal-agenda","t":"minimal-agenda","d":"Today's tasks with times — tap a row to mark it done with a strikethrough and checkmark. Clean enough for a daily planner sidebar.","k":"component","s":"opensourceui","c":"data-display/calendar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/minimal-agenda","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ride-pickup","t":"ride-pickup","d":"Uber-style pickup card with brand, ETA, car illustration, and vehicle ID. The waiting-screen moment, ready to paste into a mobility app.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ride-pickup","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:electric-scooter","t":"electric-scooter","d":"Ride summary with scooter photo, distance, average speed, and duration. Leaf icon included — built for micro-mobility or fitness stats.","k":"component","s":"opensourceui","c":"data-display/stat","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/electric-scooter","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:laptop","t":"Apple Macbook","d":"MacBook Pro frame wrapping your screenshot — black lid and bezel with a gray outer frame and base. Pass variant=\"titanium\" for a titanium outer frame and base.","k":"component","s":"opensourceui","c":"motion/tilt-3d","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/laptop","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:phone","t":"Apple iPhone","d":"iPhone 15 Pro frame with Dynamic Island and a full-screen preview slot. Pass variant for purple, orange, white, titanium, or cherry finishes. Use visibleRatio to crop from the top,","k":"component","s":"opensourceui","c":"inputs/slider","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/phone","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ipad","t":"Apple iPad","d":"iPad Air frame with metallic bezel, top-edge buttons, and a full-screen preview slot. Pass variant for space gray, space black, silver, starlight, blue, purple, pink, or yellow fin","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ipad","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:apple-watch","t":"Apple Watch","d":"Apple Watch frame with sport band and a rounded display slot for your UI. Pass variant for black, silver, titanium, starlight, blue, gold, or rose finishes.","k":"component","s":"opensourceui","c":"unsorted","g":"unsorted","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/apple-watch","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:browser","t":"Apple Browser","d":"Desktop browser chrome with traffic lights and a URL bar framing your website screenshot. Pass theme for light, dark, or transparent chrome.","k":"component","s":"opensourceui","c":"data-display/list","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/browser","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ipod","t":"Apple iPod","d":"Classic iPod frame with a screen slot and click wheel — silver, black, white, pink, blue, green, or red finishes. Drop any UI into the screen area.","k":"component","s":"opensourceui","c":"unsorted","g":"unsorted","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ipod","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:polaroid-image","t":"polaroid-image","d":"Classic white polaroid with photo, caption, and date — slight tilt that straightens on hover. Nostalgic without feeling like a filter preset.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/polaroid-image","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:notepad","t":"notepad","d":"Sticky notepad with an italic quote, author line, and checkbox task list. Bookmark ribbon on top — good for editorial or productivity layouts.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/notepad","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:thermal-receipt","t":"thermal-receipt","d":"Monospace receipt with line items, tax, total, perforated edges, and a QR footer. Reads like paper from a real register.","k":"component","s":"opensourceui","c":"actions/button","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/thermal-receipt","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:weather-snapshot","t":"Weather Snapshot","d":"Compact weather card with temperature, highs/lows, humidity, and wind — clear or rain variants.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/weather-snapshot","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:instagram-post","t":"instagram-post","d":"Full Instagram post layout — header, square image, action icons, like count, caption, and timestamp. Looks native, props for your content.","k":"component","s":"opensourceui","c":"navigation/top-nav","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/instagram-post","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:threads-post","t":"threads-post","d":"Threads-style post with avatar thread line, text, optional image, and engagement counts. Like toggles on tap.","k":"component","s":"opensourceui","c":"data-display/chat-thread","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/threads-post","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:now-playing-bar","t":"now-playing-bar","d":"Compact dark player bar with artwork, track info, transport controls, and a scrubber. The footer bar every music app eventually needs.","k":"component","s":"opensourceui","c":"data-viz/chart","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/now-playing-bar","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:twitter-post","t":"twitter-post","d":"Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews.","k":"component","s":"opensourceui","c":"data-display/timeline","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/twitter-post","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:film-strip","t":"film-strip","d":"Horizontal 35mm strip with sprocket holes and multiple frames. Roll label up top — great for photo galleries and vintage layouts.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/film-strip","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:github-contribution","t":"github-contribution","d":"GitHub-style contribution heatmap with year selector, total count, and Less/More legend. Pulls real data when you pass a username.","k":"component","s":"opensourceui","c":"data-viz/chart","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/github-contribution","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:apple-notification","t":"apple-notification","d":"Frosted iOS notification with app name, sender, message, and avatar — dismisses with animation and can be triggered again via button.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/apple-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:toast-notification","t":"toast-notification","d":"Light snackbar with check icon — message, undo action, slides up on dismiss. For save confirmations and quick feedback.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/toast-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:email-notification","t":"email-notification","d":"Mail alert on the iOS grid — sender avatar, app name header, natural from: subject — preview body line.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/email-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:system-alert","t":"system-alert","d":"Settings-style iOS alert — amber app tile, title: description in one natural line. For storage, limits, and warnings.","k":"component","s":"opensourceui","c":"overlays/alert-banner","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/system-alert","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:chat-bubble-notification","t":"chat-bubble-notification","d":"Messenger-style bubble — small avatar, sender name, rounded message bubble with a flat tail corner.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/chat-bubble-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:deploy-notification","t":"deploy-notification","d":"Deploy alert on the iOS grid — Vercel triangle tile, short status line with project, branch, and duration.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/deploy-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:calendar-reminder-notification","t":"calendar-reminder-notification","d":"Calendar reminder on the iOS grid — red app tile, event name, and time until it starts.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/calendar-reminder-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:payment-notification","t":"payment-notification","d":"Payment received on the iOS grid — emerald tile, amount, and sender name.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/payment-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:incoming-call-notification","t":"incoming-call-notification","d":"Incoming call card — large avatar, caller name, FaceTime label, Accept and Decline buttons.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/incoming-call-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:delivery-notification","t":"delivery-notification","d":"Shipping update — package icon, delivery status, ETA, and order number in a compact row.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/delivery-notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:file-menu","t":"file-menu","d":"Folder icon you can right-click or tap to open a centered action menu — edit, duplicate, pin, move, delete. Keyboard-friendly item hints included.","k":"component","s":"opensourceui","c":"navigation/menu","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/file-menu","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:user-menu","t":"user-menu","d":"Account pill with avatar, name, and email that opens into profile, settings, messages, and sign out. The header dropdown every SaaS app needs, with keyboard shortcut labels.","k":"component","s":"opensourceui","c":"navigation/menu","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/user-menu","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:kebab-actions","t":"kebab-actions","d":"List row that expands inline — actions open inside the same card so widths always align.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/kebab-actions","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:share-menu","t":"share-menu","d":"Square icon trigger opens a horizontal brand rail — four social tiles in a row plus a full-width copy button.","k":"component","s":"opensourceui","c":"navigation/menu","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/share-menu","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:notification","t":"notification","d":"Square bell trigger with a gray inset tray — each notification is a small bordered card inside the panel.","k":"component","s":"opensourceui","c":"overlays/toast","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/notification","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:filter-sort","t":"filter-sort","d":"Native select-style box — dropdown is flush below the trigger with matching width and a left-border active state.","k":"component","s":"opensourceui","c":"navigation/menu","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/filter-sort","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:workspace-switcher","t":"workspace-switcher","d":"Rectangular org bar that expands inline — workspace list opens inside the same bordered box, not a floating panel.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/workspace-switcher","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:cinema-ticket","t":"cinema-ticket","d":"Split cinema ticket with film title, venue, screen, seats, show time, and a perforated stub. Dark ticket stock that feels printed, not flat.","k":"component","s":"opensourceui","c":"inputs/time-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/cinema-ticket","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:wallet-pass","t":"wallet-pass","d":"Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides.","k":"component","s":"opensourceui","c":"inputs/color-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/wallet-pass","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:credit-card-glass","t":"credit-card-glass","d":"Glassmorphism payment card with chip, masked number, holder name, and expiry. Glow on hover — fintech landing pages eat this up.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/credit-card-glass","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:drop-cap-editorial","t":"drop-cap-editorial","d":"Editorial quote block with a large drop-cap letter, body text, and author attribution. Magazine typography without opening InDesign.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/drop-cap-editorial","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:editorial-quote","t":"editorial-quote","d":"Pull quote with issue metadata and a highlighted word inside the line — author and role at the bottom. Built for case studies and long reads.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/editorial-quote","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:discord-chat","t":"discord-chat","d":"Dark Discord channel with server header, threaded messages, avatars, timestamps, and a send input. Community product mockups in one card.","k":"component","s":"opensourceui","c":"data-display/chat-thread","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/discord-chat","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:linked-in-profile","t":"linked-in-profile","d":"LinkedIn profile card with cover photo, avatar, headline, stats, bio, and Connect/Message buttons. Professional social, component-sized.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/linked-in-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:facebook-post","t":"facebook-post","d":"Facebook feed post with reactions, comments, share counts, optional image, and the full action bar. Familiar layout, your content.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/facebook-post","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:twitter-profile","t":"twitter-profile","d":"Twitter/X profile with cover, avatar, bio, location, website link, and follower counts. Follow button included.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/twitter-profile","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:event-ticket","t":"event-ticket","d":"Perforated event ticket with a cover-image date block and VIP pass details on the right. Concert, conference, or launch night — same component.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/event-ticket","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:flight-boarding","t":"flight-boarding","d":"Airline boarding pass with tear line, route codes, seat, gate, boarding time, and passenger name. Travel mockups that feel airport-real.","k":"component","s":"opensourceui","c":"data-display/kanban","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/flight-boarding","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:gallery-grid","t":"gallery-grid","d":"Album preview with title, subtitle, and a three-cell photo grid — last cell shows a +N overflow count. Portfolio and gallery index pages.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/gallery-grid","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:glass-overlay-image","t":"glass-overlay-image","d":"Full-bleed photo with frosted bottom panel — location, title, saved avatars, and Explore CTA. Like and share buttons float top-right.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/glass-overlay-image","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:photo-album","t":"photo-album","d":"Swipeable square photo carousel with place and date caption plus dot indicators. Swap in your own photos and tell a travel story.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/photo-album","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:magazine-cover","t":"magazine-cover","d":"Tall magazine cover with issue badge, category, title, author, and read time. Hover zoom on the cover image — editorial hero material.","k":"component","s":"opensourceui","c":"data-display/badge","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/magazine-cover","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:stacked-folder-card","t":"stacked-folder-card","d":"Three stacked folder cards with thick white borders and smooth hover rotation — back and middle peeks bring any card to the front.","k":"component","s":"opensourceui","c":"media/card-stack","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/stacked-folder-card","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ink-stamp-document","t":"Ink Stamp Document","d":"Paper filing card with reference metadata and a rotated approval stamp — contracts, invoices, and admin dashboards.","k":"component","s":"opensourceui","c":"ai-agent","g":"ai-agent","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ink-stamp-document","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:opensource-folder-tab-card","t":"opensource-folder-tab-card","d":"Folder tab card with black frame, top-half image, and dark panel showing library stats. Opensource App branding by default.","k":"component","s":"opensourceui","c":"navigation/tabs","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/opensource-folder-tab-card","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:journal-writing","t":"journal-writing","d":"Journal card with title, date header, editable textarea, live word count, and saving status. The writing flow, not just a static textarea mockup.","k":"component","s":"opensourceui","c":"navigation/top-nav","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/journal-writing","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:terminal-log","t":"terminal-log","d":"macOS terminal window with traffic-light dots, colored log lines, blinking cursor, and status footer. Dev tool aesthetic for changelogs or demos.","k":"component","s":"opensourceui","c":"data-display/timeline","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/terminal-log","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:keyboard-shortcuts","t":"keyboard-shortcuts","d":"Shortcut reference card with rendered key caps and a ⌘K header hint. Docs pages and onboarding modals use this constantly.","k":"component","s":"opensourceui","c":"data-display/kanban","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/keyboard-shortcuts","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:github-repo","t":"github-repo","d":"GitHub repo card with owner, description, language dot, star/fork counts, and a toggleable Star button. Open source landing pages, simplified.","k":"component","s":"opensourceui","c":"inputs/rating","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/github-repo","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:museum-placard","t":"Museum Placard","d":"Gallery exhibition label that flips to reveal curator notes and acquisition details. Art portfolios and culture sites love this interaction.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/museum-placard","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:gallery-wall","t":"Gallery Wall","d":"Gallery wall mat with cream matting, artwork preview, and caption block — clean exhibition styling.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/gallery-wall","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:linked-in-post","t":"linked-in-post","d":"LinkedIn feed post with headline, body text, link preview card, reaction counts, and like/comment/repost/send actions.","k":"component","s":"opensourceui","c":"data-display/timeline","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/linked-in-post","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:transform-box-frame","t":"Transform Box Frame","d":"Design-tool bounding box with separate line and handle colors — defaults to all black; pass lineColor and handleColor for dual-tone frames.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/transform-box-frame","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:transform-plus-frame","t":"Transform Plus Frame","d":"Bounding box with plus corner handles — thicker handle strokes than border lines. Defaults to all black; pass lineColor and handleColor for dual-tone frames.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/transform-plus-frame","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sticky-note-polaroid-frame","t":"Sticky Note Polaroid Frame","d":"Polaroid-style frame with a paper-clipped sticky note overlay — pass noteHeader, noteBody, noteFooter, and any image or video as children.","k":"component","s":"opensourceui","c":"navigation/top-nav","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sticky-note-polaroid-frame","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:hard-shadow-polaroid-frame","t":"Hard Shadow Polaroid Frame","d":"Polaroid frame with a crisp inner border, thick caption chin, and hard offset shadow — pass caption and any image or video as children.","k":"component","s":"opensourceui","c":"media/gallery","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/hard-shadow-polaroid-frame","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:circle-cut-frame","t":"Circle Cut Frame","d":"Ticket-style frame with circle-cut edges on all sides — defaults to white; pass width, height, frameColor, and any image, video, or content as children.","k":"component","s":"opensourceui","c":"inputs/color-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/circle-cut-frame","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:music-player","t":"music-player","d":"Full dark player card with cover art, album info, progress scrubber with times, and transport controls. Not a bar — the whole now-playing screen.","k":"component","s":"opensourceui","c":"media/player","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/music-player","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:photo-contact-sheet","t":"photo-contact-sheet","d":"Film contact sheet with a 2×2 numbered frame grid and roll label header. Photographer portfolio vibes, straight from the darkroom.","k":"component","s":"opensourceui","c":"overlays/sheet","g":"overlays","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/photo-contact-sheet","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:music-playlist","t":"music-playlist","d":"Playlist card with cover, header stats, and a track list where each row toggles play independently. One component, full playlist UI.","k":"component","s":"opensourceui","c":"media/player","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/music-playlist","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:stacked-cards-effect","t":"stacked-cards-effect","d":"Three skewed cards fanned behind a front hero card — hover brings subtle motion. Collection and portfolio layouts with depth, no Three.js required.","k":"component","s":"opensourceui","c":"media/card-stack","g":"media","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/stacked-cards-effect","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:retail-price-tag","t":"retail-price-tag","d":"Hanging store tag with discount badge, sale price, SKU, and barcode stripes. E-commerce editorial and product drops.","k":"component","s":"opensourceui","c":"data-display/badge","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/retail-price-tag","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:stamp-postcard","t":"stamp-postcard","d":"Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/stamp-postcard","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:progress-ring","t":"progress-ring","d":"Animated SVG ring with percentage label and clickable stage rows below. Defaults to Design/Development/Testing — pass your own milestones.","k":"component","s":"opensourceui","c":"data-viz/progress-bar","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/progress-ring","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:team-member","t":"team-member","d":"Full-bleed portrait card — hover reveals GitHub and mail buttons, role, name, and bio. About pages without the generic card grid.","k":"component","s":"opensourceui","c":"data-display/avatar","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/team-member","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:testimonial","t":"testimonial","d":"Auto-advancing testimonial carousel with stars, quote, avatar, and dot navigation. Social proof that moves on its own.","k":"component","s":"opensourceui","c":"marketing","g":"marketing","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/testimonial","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:toggle-pricing-cards","t":"toggle-pricing-cards","d":"Monthly and yearly billing toggle that updates three plan cards side by side — price and feature checklist included. SaaS pricing page, one paste away.","k":"component","s":"opensourceui","c":"actions/switch","g":"actions","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/toggle-pricing-cards","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:travel-postcard","t":"travel-postcard","d":"Vintage sepia postcard with map badge, greeting title, location, and author signature. Wanderlust landing pages and newsletter headers.","k":"component","s":"opensourceui","c":"data-display/card","g":"data-display","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/travel-postcard","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:slow-living-polaroid","t":"slow-living-polaroid","d":"Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/slow-living-polaroid","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:denim-product-editorial","t":"denim-product-editorial","d":"Fashion editorial with two square photos, rotated callout labels, and uppercase product description. Lookbook energy for apparel and accessories.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/denim-product-editorial","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:daily-motivation","t":"daily-motivation","d":"Editorial poster with multi-line headline, flower icon, tilted polaroid, and a GOOD DAY sticker. Morning routine apps and wellness newsletters.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/daily-motivation","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:cafe-menu-board","t":"Cafe Menu Board","d":"Dark chalkboard-style menu with cafe header, item notes, and amber price accents — hospitality and local brand sites.","k":"component","s":"opensourceui","c":"navigation/menu","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/cafe-menu-board","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:annotated-text","t":"annotated-text","d":"Hand-drawn text annotations — wavy underlines, highlights, arrows, brackets, and more. Pass variant and optional color to style any inline label or callout.","k":"component","s":"opensourceui","c":"motion/text-effect","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/annotated-text","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:otp-boxed-input","t":"otp-boxed-input","d":"Full email verification card with icon header, destination text, animated square cells, progress dots, shake-on-error, and resend countdown.","k":"component","s":"opensourceui","c":"inputs/otp-input","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/otp-boxed-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:otp-underline-input","t":"otp-underline-input","d":"Editorial underline OTP with serif heading and animated focus rules. Same edge-case handling as boxed — typing, delete, paste, and one-time-code autocomplete.","k":"component","s":"opensourceui","c":"inputs/otp-input","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/otp-underline-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:text-field-input","t":"text-field-input","d":"Standard labeled text field with hint and error states. Supports all native input types, required marker, disabled, and full a11y wiring.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/text-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:search-input","t":"search-input","d":"Search field with leading icon and clear button. Controlled or uncontrolled value, hidden native cancel, and keyboard-friendly reset.","k":"component","s":"opensourceui","c":"inputs/search","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/search-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:password-field-input","t":"password-field-input","d":"Password input with show/hide toggle, hint text, and error state. Keeps autocomplete defaults and accessible visibility control.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/password-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:textarea-field-input","t":"textarea-field-input","d":"Multiline field with live character count, max length guard, resize support, and the same label/hint/error pattern as text fields.","k":"component","s":"opensourceui","c":"inputs/textarea","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/textarea-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:input-group-field","t":"input-group-field","d":"Grouped input with prefix and suffix slots — URLs, currency, units. Wrapper border highlights on focus; inputs use border-only focus with ring-0.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/input-group-field","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:floating-label-field-input","t":"floating-label-field-input","d":"Outlined floating label that rests on the border notch when focused or filled — matches Material-style fields with autofill detection.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/floating-label-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:select-field-input","t":"select-field-input","d":"Custom listbox select with styled dropdown, keyboard navigation, click-outside close, and hidden input for native form posts.","k":"component","s":"opensourceui","c":"inputs/select","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/select-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:phone-field-input","t":"phone-field-input","d":"Phone field with dial-code prefix and live US-style formatting. Returns raw digits via onChange for validation and API calls.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/phone-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:checkbox-field-input","t":"checkbox-field-input","d":"Accessible checkbox with custom mark, inline label, hint, and error. Controlled or uncontrolled checked state.","k":"component","s":"opensourceui","c":"inputs/checkbox","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/checkbox-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:switch-field-input","t":"switch-field-input","d":"Toggle switch with role=switch, keyboard support, hidden input for forms, and label/hint/error layout.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/switch-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:combobox-field-input","t":"combobox-field-input","d":"Searchable combobox with filtered listbox, keyboard navigation, click-outside close, and hidden field for form posts.","k":"component","s":"opensourceui","c":"inputs/combobox","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/combobox-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:radio-group-field-input","t":"radio-group-field-input","d":"Card-style radio group for checkout and settings flows. Vertical or horizontal layout, descriptions, and arrow-key navigation.","k":"component","s":"opensourceui","c":"inputs/radio","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/radio-group-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:file-upload-field-input","t":"file-upload-field-input","d":"Card-style file upload with drag-and-drop zone, browse button, format/size hints, typed file rows, and remove actions.","k":"component","s":"opensourceui","c":"inputs/file-upload","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/file-upload-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:date-field-input","t":"date-field-input","d":"Custom calendar popover with month navigation, today shortcut, min/max limits, and styled day grid — no native browser picker.","k":"component","s":"opensourceui","c":"inputs/date-picker","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/date-field-input","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:login-form","t":"login-form","d":"Production login form with email/password validation, remember me, show password, loading state, and forgot-password link.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/login-form","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:signup-form","t":"signup-form","d":"Registration form with name, email, password strength rules, confirm password match, and required terms acceptance.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/signup-form","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:contact-form","t":"contact-form","d":"Contact form with honeypot spam guard, character count, field validation, loading state, and success confirmation screen.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/contact-form","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:newsletter-form","t":"newsletter-form","d":"Email subscribe form with inline button, validation, privacy note, and inline success message — built for footers and landing pages.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/newsletter-form","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:forgot-password-form","t":"forgot-password-form","d":"Password reset request form with email validation, loading state, success screen, and back-to-login navigation.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/forgot-password-form","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:apple-hello-loader","t":"Apple Hello Loader","d":"Apple-style greeting loader that cycles through hello, bonjour, hola, and more with a soft fade. Pass greetings, intervalMs, and fadeMs to tune the loop.","k":"component","s":"opensourceui","c":"status/loader","g":"status","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/apple-hello-loader","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:spin-loader","t":"Spin Loader","d":"Minimal spinning loader built on a lucide icon — defaults to Loader, but pass any icon prop. Sizes: sm, md, lg.","k":"component","s":"opensourceui","c":"status/loader","g":"status","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/spin-loader","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:text-loader","t":"Text Loader","d":"Animated text loader with a spinning color orb and staggered letter pulses. Pass text, variant, and textColor to match your UI.","k":"component","s":"opensourceui","c":"status/loader","g":"status","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/text-loader","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:aurora-background","t":"Aurora Background","d":"Soft aurora wash with lime, mint, cyan, and blue blobs over a warm paper base — wrap any page section or hero and pass children on top.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/aurora-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:coral-glow-background","t":"Coral Glow","d":"Warm aurora wash in rose, peach, coral, and gold over a blush paper base — beauty, lifestyle, and invitation hero sections.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/coral-glow-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:mint-lagoon-background","t":"Mint Lagoon","d":"Cool aurora wash in emerald, teal, cyan, and mint over a fresh white base — wellness, spa, and clean product launches.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/mint-lagoon-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sunset-bloom-background","t":"Sunset Bloom","d":"Golden-hour aurora with orange, rose, amber, and sun yellow blooms — events, photography, and warm brand storytelling.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sunset-bloom-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:honey-ember-background","t":"Honey Ember","d":"Cozy aurora glow in honey, amber, ember orange, and soft rose over warm ivory — food, bakery, and autumn campaigns.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/honey-ember-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:tropical-tide-background","t":"Tropical Tide","d":"Vibrant aurora wash in turquoise, lime, sky blue, and sea green — travel, resorts, and summer product drops.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/tropical-tide-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sunrise-horizon-background","t":"Sunrise Horizon","d":"Warm dawn sky with peach horizon bands, a soft sun glow, and cool teal lift at the base — editorial hero sections and landing pages.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sunrise-horizon-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:linen-weave-background","t":"Linen Weave","d":"Warm editorial linen with crosshatch weave, soft paper grain, and a gentle vignette — portfolios, magazines, and craft-brand pages.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/linen-weave-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:sand-drift-background","t":"Sand Drift","d":"Layered desert dunes in stone and amber tones with fine grain — travel, hospitality, and calm wellness layouts.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/sand-drift-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:frost-mesh-background","t":"Frost Mesh","d":"Cool frost-white mesh with teal and emerald corner washes — SaaS dashboards, health apps, and minimal product launches.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/frost-mesh-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:terrazzo-fragment-background","t":"Terrazzo Fragment","d":"Stone terrazzo base with scattered rose, teal, amber, and clay fragments — interior brands, cafés, and design studios.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/terrazzo-fragment-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:rain-prism-background","t":"Rain Prism","d":"Moody rainfall with angled streaks and a soft prism band across the scene — music, film, and reflective editorial layouts.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/rain-prism-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:cherry-petal-background","t":"Cherry Petal","d":"Soft spring canvas with drifting cherry petals and a blush radial glow — weddings, florists, and seasonal campaigns.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/cherry-petal-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:ink-wash-background","t":"Ink Wash","d":"Minimal sumi-e ink clouds in soft stone gray on warm paper — galleries, studios, and calm editorial layouts.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/ink-wash-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:halftone-pop-background","t":"Halftone Pop","d":"Risograph-style halftone dots in rose, teal, and amber on cream — posters, zines, and bold creative brands.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/halftone-pop-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:paper-fold-background","t":"Paper Fold","d":"Tactile cardstock with a diagonal crease, soft highlight, and shadow — invitations, stationery, and craft portfolios.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/paper-fold-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:soft-spotlight-background","t":"Soft Spotlight","d":"Gallery stage light from above with a gentle vignette — product reveals, keynote heroes, and museum-style layouts.","k":"component","s":"opensourceui","c":"navigation/command-palette","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/soft-spotlight-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:arc-bands-background","t":"Arc Bands","d":"Retro poster arcs with sky, teal, amber, and rose blending in soft radial gradients from the base — festivals, launches, and playful brand moments.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/arc-bands-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-aurora-background","t":"Dark Aurora","d":"Charcoal stage with soft teal, cyan, and emerald aurora blooms — premium dark hero sections and product launches.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-aurora-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-ember-background","t":"Dark Ember","d":"Warm noir base with amber, ember orange, and rose glow pools — luxury dining, nightlife, and editorial dark modes.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-ember-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-teal-depth-background","t":"Dark Teal Depth","d":"Deep oceanic black with layered teal and cyan depth blooms — fintech, dev tools, and refined SaaS dark themes.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-teal-depth-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-arc-bands-background","t":"Dark Arc Bands","d":"Blended sky, teal, amber, and rose arcs on a midnight base — cinematic dark posters and event keynotes.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-arc-bands-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-carbon-spotlight-background","t":"Dark Carbon Spotlight","d":"Carbon black stage with a soft overhead spotlight and vignette — product reveals, keynotes, and gallery dark modes.","k":"component","s":"opensourceui","c":"navigation/command-palette","g":"navigation","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-carbon-spotlight-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-midnight-mesh-background","t":"Dark Midnight Mesh","d":"Midnight frost mesh with whisper-soft grid, teal and sky blooms, and a gentle vignette — dashboards, terminals, and refined dark UI.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-midnight-mesh-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-ink-field-background","t":"Dark Ink Field","d":"Near-black canvas with soft graphite ink washes — galleries, studios, and minimal dark editorial layouts.","k":"component","s":"opensourceui","c":"inputs/form-field","g":"inputs","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-ink-field-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dark-rose-noir-background","t":"Dark Rose Noir","d":"Elegant noir with restrained rose and crimson bloom accents — fashion, beauty, and premium dark branding.","k":"component","s":"opensourceui","c":"motion/background","g":"motion","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dark-rose-noir-background","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:diagonal-box-pattern","t":"Diagonal Box","d":"Classic 45° hairline hatch on white — the same quiet stage used across marketing mockups and component previews.","k":"component","s":"opensourceui","c":"unsorted","g":"unsorted","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/diagonal-box-pattern","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:reverse-diagonal-box-pattern","t":"Reverse Diagonal Box","d":"Mirrored 45° hairline hatch — same quiet stage as Diagonal Box, rotated right to left for visual variety.","k":"component","s":"opensourceui","c":"unsorted","g":"unsorted","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/reverse-diagonal-box-pattern","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:dot-grid-pattern","t":"Dot Grid","d":"Soft dotted grid on neutral paper — watch mockup stages, device demos, and minimal product sections.","k":"component","s":"opensourceui","c":"layout/page-shell","g":"layout","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/dot-grid-pattern","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:line-grid-pattern","t":"Line Grid","d":"Horizontal ruled lines with a soft paper gradient — editorial layouts, docs, and notebook-style sections.","k":"component","s":"opensourceui","c":"layout/page-shell","g":"layout","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/line-grid-pattern","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:graph-paper-pattern","t":"Graph Paper","d":"Clean square grid for sketches, wireframes, and planning boards — subtle ink lines on white.","k":"component","s":"opensourceui","c":"data-viz/chart","g":"data-viz","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/graph-paper-pattern","pc":"OpenSourceUI","lv":1},{"id":"opensourceui:fine-grain-pattern","t":"Fine Grain","d":"Micro dot grain for a film-paper feel — hero backgrounds that need texture without competing with content.","k":"component","s":"opensourceui","c":"marketing","g":"marketing","a":"OpenSourceUI","st":"reviewed","pl":"https://opensourceui.in/components/fine-grain-pattern","pc":"OpenSourceUI","lv":1},{"id":"feralui:pullcord","t":"PullCord","d":"A cloth cord that really hangs, driven by a real Verlet rope. Pull it to switch the site between light and dark.","k":"toy","s":"feralui","c":"actions/switch","g":"actions","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/pullcord","pc":"Feral UI","lv":1},{"id":"feralui:captcha","t":"ClawCaptcha","d":"A human-check where you prove you are human by winning a claw machine.","k":"toy","s":"feralui","c":"unsorted","g":"unsorted","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/captcha","pc":"Feral UI","lv":1},{"id":"feralui:gradients","t":"Gradient Builder","d":"A free gradient generator that blends soft gradients from traditional Japanese colours, with SVG, PNG, and MP4 export. AI assistants can create gradients through its MCP server at ","k":"toy","s":"feralui","c":"inputs/color-picker","g":"inputs","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/gradients","pc":"Feral UI","lv":1},{"id":"feralui:library","t":"Imgrain","d":"A growing library of gradient images, wallpapers and colour palettes. Browse every piece, try its palettes, watch how each one was made step by step, and download phone and desktop","k":"toy","s":"feralui","c":"inputs/color-picker","g":"inputs","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/library","pc":"Feral UI","lv":1},{"id":"feralui:motionview","t":"MotionView","d":"A free motion template studio that turns a few images into a seamless looping MP4, with motions like Carousel, Orbit, and Field.","k":"toy","s":"feralui","c":"ai-agent","g":"ai-agent","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/motionview","pc":"Feral UI","lv":1},{"id":"feralui:brandkit","t":"Brandkit","d":"A free brand board builder: draw a bento grid on a 2048 × 1536 sheet, fill each tile with a live mockup of your brand (phone, watch, badge, browser tab, palette, type), export a PN","k":"toy","s":"feralui","c":"overlays/sheet","g":"overlays","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/brandkit","pc":"Feral UI","lv":1},{"id":"feralui:scenes","t":"Screenery","d":"A shelf of finished app screens, each with a signature transition or reveal.","k":"toy","s":"feralui","c":"motion/text-effect","g":"motion","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/scenes","pc":"Feral UI","lv":1},{"id":"feralui:deskfolio","t":"DeskFolio","d":"A portfolio shaped like a little book that blooms open and turns pages on a spring.","k":"toy","s":"feralui","c":"actions/button","g":"actions","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/deskfolio","pc":"Feral UI","lv":1},{"id":"feralui:blob","t":"Blob","d":"A squishy jelly mascot that reacts to you inside a log-out modal.","k":"toy","s":"feralui","c":"overlays/dialog","g":"overlays","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/blob","pc":"Feral UI","lv":1},{"id":"feralui:animaps","t":"AniMaps","d":"Animated route maps you can build, export, and share.","k":"toy","s":"feralui","c":"data-viz/map","g":"data-viz","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/animaps","pc":"Feral UI","lv":1},{"id":"feralui:fur","t":"Fur","d":"A pettable coat of fur, painted strand by strand on canvas.","k":"toy","s":"feralui","c":"unsorted","g":"unsorted","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/fur","pc":"Feral UI","lv":1},{"id":"feralui:vacuum","t":"Vacuum","d":"A bulk-delete interaction where selected tiles get sucked up a vacuum hose.","k":"toy","s":"feralui","c":"inputs/select","g":"inputs","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/vacuum","pc":"Feral UI","lv":1},{"id":"feralui:crumple","t":"Crumple","d":"A delete effect where notes crumple into paper balls and drop in the basket.","k":"toy","s":"feralui","c":"unsorted","g":"unsorted","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/crumple","pc":"Feral UI","lv":1},{"id":"feralui:hologram","t":"Hologram","d":"A foil Pokemon-style card that catches the light as you tilt it.","k":"toy","s":"feralui","c":"motion/tilt-3d","g":"motion","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/hologram","pc":"Feral UI","lv":1},{"id":"feralui:nudge","t":"Nudge","d":"A donation prompt for checkout where a real cat paw rises out of the card to sit on the No thanks link.","k":"toy","s":"feralui","c":"ai-agent","g":"ai-agent","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/nudge","pc":"Feral UI","lv":1},{"id":"feralui:stamp","t":"Stamp","d":"A date picker for invoices where you roll the date on a desk stamp and press it to print the date on the page.","k":"toy","s":"feralui","c":"ai-agent","g":"ai-agent","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/stamp","pc":"Feral UI","lv":1},{"id":"feralui:bloom","t":"Bloom","d":"A photo edit control that lives in the viewer. Press the flower in the toolbar, slide onto one of five petals and outward to set exposure, warmth, saturation, contrast or grain, wi","k":"toy","s":"feralui","c":"data-viz/chart","g":"data-viz","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/bloom","pc":"Feral UI","lv":1},{"id":"feralui:blinds","t":"Blinds","d":"An expanding gallery of slats on real springs. Hover opens a panel with momentum, neighbours squeeze aside, and autoplay turns it into a carousel.","k":"toy","s":"feralui","c":"media/carousel","g":"media","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/blinds","pc":"Feral UI","lv":1},{"id":"feralui:matchday","t":"Matchday","d":"Letterboxd for football, where you rate matches in half-stars.","k":"toy","s":"feralui","c":"inputs/rating","g":"inputs","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/matchday","pc":"Feral UI","lv":1},{"id":"feralui:mochi-smash","t":"Mochi Smash","d":"A cute 3D badminton game you play free in the browser, no download. Six characters and three courts; play a bot, anyone online, or a friend with a five-letter party code, and share","k":"toy","s":"feralui","c":"data-display/kanban","g":"data-display","a":"Feral UI","st":"reviewed","pl":"https://feralui.dev/mochi-smash/","pc":"Feral UI","lv":1},{"id":"toolcraft:slider","t":"Slider","k":"component","s":"toolcraft","c":"inputs/slider","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#slider","pc":"Toolcraft","lv":1},{"id":"toolcraft:range","t":"Range","k":"component","s":"toolcraft","c":"inputs/slider","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#range","pc":"Toolcraft","lv":1},{"id":"toolcraft:text","t":"Text","k":"component","s":"toolcraft","c":"motion/text-effect","g":"motion","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#text","pc":"Toolcraft","lv":1},{"id":"toolcraft:textarea","t":"Textarea","k":"component","s":"toolcraft","c":"inputs/textarea","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#textarea","pc":"Toolcraft","lv":1},{"id":"toolcraft:select","t":"Select","k":"component","s":"toolcraft","c":"inputs/select","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#select","pc":"Toolcraft","lv":1},{"id":"toolcraft:segmented","t":"Segmented","k":"component","s":"toolcraft","c":"actions/segmented-control","g":"actions","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#segmented","pc":"Toolcraft","lv":1},{"id":"toolcraft:switch","t":"Switch","k":"component","s":"toolcraft","c":"actions/switch","g":"actions","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#switch","pc":"Toolcraft","lv":1},{"id":"toolcraft:checkbox","t":"Checkbox","k":"component","s":"toolcraft","c":"inputs/checkbox","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#checkbox","pc":"Toolcraft","lv":1},{"id":"toolcraft:color","t":"Color","k":"component","s":"toolcraft","c":"inputs/color-picker","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#color","pc":"Toolcraft","lv":1},{"id":"toolcraft:palette","t":"Palette","k":"component","s":"toolcraft","c":"inputs/color-picker","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#palette","pc":"Toolcraft","lv":1},{"id":"toolcraft:gradient","t":"Gradient","k":"component","s":"toolcraft","c":"inputs/color-picker","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#gradient","pc":"Toolcraft","lv":1},{"id":"toolcraft:curves","t":"Curves","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#curves","pc":"Toolcraft","lv":1},{"id":"toolcraft:channel-mixer","t":"Channel Mixer","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#channel-mixer","pc":"Toolcraft","lv":1},{"id":"toolcraft:font-picker","t":"Font Picker","k":"component","s":"toolcraft","c":"inputs/select","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#font-picker","pc":"Toolcraft","lv":1},{"id":"toolcraft:vector","t":"Vector","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#vector","pc":"Toolcraft","lv":1},{"id":"toolcraft:anchor-grid","t":"Anchor Grid","k":"component","s":"toolcraft","c":"layout/page-shell","g":"layout","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#anchor-grid","pc":"Toolcraft","lv":1},{"id":"toolcraft:orientation-gizmo","t":"Orientation Gizmo","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#orientation-gizmo","pc":"Toolcraft","lv":1},{"id":"toolcraft:image-picker","t":"Image Picker","k":"component","s":"toolcraft","c":"inputs/select","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#image-picker","pc":"Toolcraft","lv":1},{"id":"toolcraft:file","t":"File","k":"component","s":"toolcraft","c":"inputs/file-upload","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#file","pc":"Toolcraft","lv":1},{"id":"toolcraft:model-upload","t":"Model Upload","k":"component","s":"toolcraft","c":"inputs/file-upload","g":"inputs","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#model-upload","pc":"Toolcraft","lv":1},{"id":"toolcraft:actions","t":"Actions","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#actions","pc":"Toolcraft","lv":1},{"id":"toolcraft:buttons","t":"Buttons","k":"component","s":"toolcraft","c":"actions/button","g":"actions","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#buttons","pc":"Toolcraft","lv":1},{"id":"toolcraft:collection-actions","t":"Collection Actions","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#collection-actions","pc":"Toolcraft","lv":1},{"id":"toolcraft:workspace","t":"Workspace","k":"component","s":"toolcraft","c":"layout/page-shell","g":"layout","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#workspace","pc":"Toolcraft","lv":1},{"id":"toolcraft:canvas","t":"Canvas","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#canvas","pc":"Toolcraft","lv":1},{"id":"toolcraft:layers","t":"Layers","k":"component","s":"toolcraft","c":"unsorted","g":"unsorted","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#layers","pc":"Toolcraft","lv":1},{"id":"toolcraft:timeline","t":"Timeline","k":"component","s":"toolcraft","c":"data-display/timeline","g":"data-display","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#timeline","pc":"Toolcraft","lv":1},{"id":"toolcraft:toolbar","t":"Toolbar","k":"component","s":"toolcraft","c":"data-viz/chart","g":"data-viz","a":"Toolcraft","st":"reviewed","pl":"https://toolcraft.sh/components#toolbar","pc":"Toolcraft","lv":1},{"id":"toolcraft:settings-transfer","t":"Settings Transfer","k":"component","s":"toolcraft","c":"inputs/tuning-panel","g":"inputs","a":"Toolcraft","st":"picked","pl":"https://toolcraft.sh/components#settings-transfer","pc":"Toolcraft","lv":1},{"id":"bencho:swipe-row","t":"Swipe row","k":"interaction","s":"bencho","c":"media/card-stack","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#swipe-row","pc":"bencho"},{"id":"bencho:asset-swap","t":"Asset swap","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#asset-swap","pc":"bencho"},{"id":"bencho:ascii-wake","t":"ASCII wake","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#ascii-wake","pc":"bencho"},{"id":"bencho:foggy-glass","t":"Foggy glass","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#foggy-glass","pc":"bencho"},{"id":"bencho:scratch-card","t":"Scratch card","k":"interaction","s":"bencho","c":"data-display/card","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#scratch-card","pc":"bencho"},{"id":"bencho:heat-word","t":"Heat map","k":"interaction","s":"bencho","c":"data-viz/map","g":"data-viz","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#heat-word","pc":"bencho"},{"id":"bencho:image-compare","t":"Image compare","k":"interaction","s":"bencho","c":"media/image-compare","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#image-compare","pc":"bencho"},{"id":"bencho:like","t":"Like","k":"interaction","s":"bencho","c":"actions/button","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#like","pc":"bencho"},{"id":"bencho:mb-spot","t":"Spotlight","k":"interaction","s":"bencho","c":"navigation/command-palette","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#mb-spot","pc":"bencho"},{"id":"bencho:mb-holo","t":"Holo card","k":"interaction","s":"bencho","c":"data-display/card","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#mb-holo","pc":"bencho"},{"id":"bencho:mb-deck","t":"Poster deck","k":"interaction","s":"bencho","c":"media/card-stack","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#mb-deck","pc":"bencho"},{"id":"bencho:mb-compare","t":"Before and after","k":"interaction","s":"bencho","c":"media/image-compare","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#mb-compare","pc":"bencho"},{"id":"bencho:signature","t":"Signature pad","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#signature","pc":"bencho"},{"id":"bencho:voice-note","t":"Voice note","k":"interaction","s":"bencho","c":"ai-agent","g":"ai-agent","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#voice-note","pc":"bencho"},{"id":"bencho:eye-tracker","t":"Eye tracker","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#eye-tracker","pc":"bencho"},{"id":"bencho:dynamic-island","t":"Dynamic island","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#dynamic-island","pc":"bencho"},{"id":"bencho:emoji-reactions","t":"Emoji reactions","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#emoji-reactions","pc":"bencho"},{"id":"bencho:time-scrubber","t":"Time scrubber","k":"interaction","s":"bencho","c":"inputs/time-picker","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#time-scrubber","pc":"bencho"},{"id":"bencho:upload-dropzone","t":"Upload dropzone","k":"interaction","s":"bencho","c":"inputs/file-upload","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#upload-dropzone","pc":"bencho"},{"id":"bencho:tag-input","t":"Tag input","k":"interaction","s":"bencho","c":"data-display/badge","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#tag-input","pc":"bencho"},{"id":"bencho:hold-delete","t":"Hold to delete","k":"interaction","s":"bencho","c":"actions/button","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#hold-delete","pc":"bencho"},{"id":"bencho:rolling-counter","t":"Rolling counter","k":"interaction","s":"bencho","c":"motion/number-ticker","g":"motion","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#rolling-counter","pc":"bencho"},{"id":"bencho:particles","t":"Particles","k":"interaction","s":"bencho","c":"motion/background","g":"motion","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#particles","pc":"bencho"},{"id":"bencho:label-input","t":"Label input","k":"interaction","s":"bencho","c":"inputs/form-field","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#label-input","pc":"bencho"},{"id":"bencho:one-time-code","t":"One-time code","k":"interaction","s":"bencho","c":"data-display/code-block","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#one-time-code","pc":"bencho"},{"id":"bencho:generate","t":"Generate","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#generate","pc":"bencho"},{"id":"bencho:step-player","t":"Step player","k":"interaction","s":"bencho","c":"media/player","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#step-player","pc":"bencho"},{"id":"bencho:todo-tower","t":"Todo tower","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#todo-tower","pc":"bencho"},{"id":"bencho:image-accordion","t":"Image accordion","k":"interaction","s":"bencho","c":"data-display/accordion","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#image-accordion","pc":"bencho"},{"id":"bencho:card-stack","t":"Card stack","k":"interaction","s":"bencho","c":"media/card-stack","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#card-stack","pc":"bencho"},{"id":"bencho:glass-bubble","t":"Glass bubble","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#glass-bubble","pc":"bencho"},{"id":"bencho:fold","t":"Folding frame","k":"interaction","s":"bencho","c":"motion/tilt-3d","g":"motion","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#fold","pc":"bencho"},{"id":"bencho:browser-tabs","t":"Browser tabs","k":"interaction","s":"bencho","c":"navigation/tabs","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#browser-tabs","pc":"bencho"},{"id":"bencho:action-node","t":"Action node","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#action-node","pc":"bencho"},{"id":"bencho:magnet-select","t":"Magnetic select","k":"interaction","s":"bencho","c":"inputs/select","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#magnet-select","pc":"bencho"},{"id":"bencho:slide-confirm","t":"Slide to confirm","k":"interaction","s":"bencho","c":"actions/button","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#slide-confirm","pc":"bencho"},{"id":"bencho:picker","t":"Assignees","k":"interaction","s":"bencho","c":"inputs/select","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#picker","pc":"bencho"},{"id":"bencho:checklist","t":"Checklist","k":"interaction","s":"bencho","c":"data-display/list","g":"data-display","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#checklist","pc":"bencho"},{"id":"bencho:carousel","t":"Carousel","k":"interaction","s":"bencho","c":"media/carousel","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#carousel","pc":"bencho"},{"id":"bencho:palette","t":"Palette","k":"interaction","s":"bencho","c":"inputs/color-picker","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#palette","pc":"bencho"},{"id":"bencho:aspect","t":"Aspect ratio","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#aspect","pc":"bencho"},{"id":"bencho:tilt","t":"Tilt card","k":"interaction","s":"bencho","c":"motion/tilt-3d","g":"motion","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#tilt","pc":"bencho"},{"id":"bencho:sound","t":"Now playing","k":"interaction","s":"bencho","c":"media/player","g":"media","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#sound","pc":"bencho"},{"id":"bencho:drag-ball","t":"Dragging ball","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#drag-ball","pc":"bencho"},{"id":"bencho:seek","t":"Search","k":"interaction","s":"bencho","c":"inputs/search","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#seek","pc":"bencho"},{"id":"bencho:pull","t":"Pull to refresh","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#pull","pc":"bencho"},{"id":"bencho:escape","t":"Escape button","k":"interaction","s":"bencho","c":"actions/button","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#escape","pc":"bencho"},{"id":"bencho:slosh","t":"Slosh slider","k":"interaction","s":"bencho","c":"inputs/slider","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#slosh","pc":"bencho"},{"id":"bencho:liq-create","t":"Create menu","k":"interaction","s":"bencho","c":"navigation/menu","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#liq-create","pc":"bencho"},{"id":"bencho:liq-arrange","t":"Reorder list","k":"interaction","s":"bencho","c":"inputs/slider","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#liq-arrange","pc":"bencho"},{"id":"bencho:toolbar","t":"Canvas toolbar","k":"interaction","s":"bencho","c":"data-viz/chart","g":"data-viz","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#toolbar","pc":"bencho"},{"id":"bencho:radial","t":"Radial menu","k":"interaction","s":"bencho","c":"navigation/menu","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#radial","pc":"bencho"},{"id":"bencho:stepper","t":"Drag stepper","k":"interaction","s":"bencho","c":"navigation/wizard-steps","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#stepper","pc":"bencho"},{"id":"bencho:confirm","t":"Inline confirm","k":"interaction","s":"bencho","c":"actions/button","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#confirm","pc":"bencho"},{"id":"bencho:toasts","t":"Notify","k":"interaction","s":"bencho","c":"overlays/toast","g":"overlays","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#toasts","pc":"bencho"},{"id":"bencho:icon-bar","t":"Icon bar","k":"interaction","s":"bencho","c":"data-viz/chart","g":"data-viz","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#icon-bar","pc":"bencho"},{"id":"bencho:dock","t":"Magnifying dock","k":"interaction","s":"bencho","c":"navigation/dock","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#dock","pc":"bencho"},{"id":"bencho:progress","t":"Progress ticks","k":"interaction","s":"bencho","c":"data-viz/progress-bar","g":"data-viz","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#progress","pc":"bencho"},{"id":"bencho:humidity","t":"Wheel","k":"interaction","s":"bencho","c":"unsorted","g":"unsorted","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#humidity","pc":"bencho"},{"id":"bencho:command","t":"Command bar","k":"interaction","s":"bencho","c":"navigation/command-palette","g":"navigation","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#command","pc":"bencho"},{"id":"bencho:roster","t":"Selection list","k":"interaction","s":"bencho","c":"inputs/select","g":"inputs","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#roster","pc":"bencho"},{"id":"bencho:sleep","t":"Range dial","k":"interaction","s":"bencho","c":"data-viz/gauge","g":"data-viz","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#sleep","pc":"bencho"},{"id":"bencho:liq-toggle","t":"Liquid toggle","k":"interaction","s":"bencho","c":"actions/switch","g":"actions","a":"bencho","st":"reviewed","pl":"https://bencho.dev/#liq-toggle","pc":"bencho"},{"id":"kinetics:card-resize","t":"Card Resize","d":"Height spring with no JS layout thrash","k":"motion","s":"kinetics","c":"data-display/card","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:magnetic-button","t":"Magnetic Button","d":"Cursor pulls the button toward it inside a dead zone","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:number-counter","t":"Number Counter","d":"Digit bumps and overshoots on every increment","k":"motion","s":"kinetics","c":"motion/number-ticker","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:toast-overshoot","t":"Toast Overshoot","d":"Slides past rest position before settling","k":"motion","s":"kinetics","c":"overlays/toast","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:tab-pill-glide","t":"Tab Pill Glide","d":"Indicator measures target width before moving","k":"motion","s":"kinetics","c":"navigation/tabs","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:accordion-spring","t":"Accordion Spring","d":"Max-height transition with rotating chevron","k":"motion","s":"kinetics","c":"data-display/accordion","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:drag-to-dismiss","t":"Drag to Dismiss","d":"Pointer-tracked drag, snaps back or flies off past threshold","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:ripple-feedback","t":"Ripple Feedback","d":"Radial fade-out anchored to the exact click point","k":"motion","s":"kinetics","c":"data-display/timeline","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:hold-to-confirm","t":"Hold to Confirm","d":"Press and hold; a ring fills, release early to cancel","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:rubber-band-slider","t":"Rubber-band Slider","d":"Drag past either end and it stretches, then springs back","k":"motion","s":"kinetics","c":"inputs/slider","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:like-burst","t":"Like Burst","d":"Toggles, pops the heart, and emits a radial particle ring","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:cursor-trail","t":"Cursor Trail","d":"A chain of dots chases the pointer with eased lag","k":"motion","s":"kinetics","c":"navigation/sidebar","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:push-button","t":"Push Button","d":"A tactile depress with a real bottom edge — pure CSS","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:star-rating","t":"Star Rating","d":"Hover previews a value, click locks it with a pop","k":"motion","s":"kinetics","c":"inputs/rating","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:floating-label","t":"Floating Label","d":"Placeholder lifts into a label on focus — pure CSS","k":"motion","s":"kinetics","c":"inputs/form-field","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:copy-button","t":"Copy Button","d":"Icon crossfades to a check and the label swaps, then reverts","k":"motion","s":"kinetics","c":"actions/copy-button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:quantity-stepper","t":"Quantity Stepper","d":"Value pops on each change; clamps at zero","k":"motion","s":"kinetics","c":"navigation/wizard-steps","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:choice-chips","t":"Choice Chips","d":"Toggle filters that pop as they switch on and off","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:pin-input","t":"PIN Input","d":"Each digit pops and auto-advances to the next box","k":"motion","s":"kinetics","c":"inputs/otp-input","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:password-meter","t":"Password Meter","d":"Segments fill and shift color as strength climbs","k":"motion","s":"kinetics","c":"data-viz/gauge","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:pointer-tooltip","t":"Pointer Tooltip","d":"Label trails the cursor with eased follow","k":"motion","s":"kinetics","c":"overlays/tooltip","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:swipe-to-reveal","t":"Swipe to Reveal","d":"Drag an item horizontally to expose action buttons","k":"motion","s":"kinetics","c":"media/card-stack","g":"media","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:rotary-knob","t":"Rotary Knob","d":"Drag in a circle to set a value; snaps to detents on release","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:reorderable-list","t":"Reorderable List","d":"Drag items up and down; others shift to make room","k":"motion","s":"kinetics","c":"data-display/list","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:expanding-search","t":"Expanding Search","d":"Field grows on hover or focus, glide easing","k":"motion","s":"kinetics","c":"inputs/search","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:squish-button","t":"Squish Button","d":"Compresses on press, springs back on release","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:toggle-pills","t":"Toggle Pills","d":"Selected pill pops with a spring scale","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:value-scrubber","t":"Value Scrubber","d":"Drag horizontally to scrub the number","k":"motion","s":"kinetics","c":"inputs/slider","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:speed-dial-fab","t":"Speed-Dial FAB","d":"Actions fan out on a staggered spring","k":"motion","s":"kinetics","c":"data-viz/gauge","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:swatch-picker","t":"Swatch Picker","d":"Selected colour springs up with a check","k":"motion","s":"kinetics","c":"inputs/select","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:slide-to-unlock","t":"Slide to Unlock","d":"Drag past the latch or it springs back","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:tag-input","t":"Tag Input","d":"Enter pops a chip in; × pops it out","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:keycap-press","t":"Keycap Press","d":"Mechanical keycap depresses on its shadow","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:orbital-action-menu","t":"Orbital Action Menu","d":"Actions escape a magnetic centre on hover","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:contextual-dock","t":"Contextual Dock","d":"Nearby controls swell in a soft focus field","k":"motion","s":"kinetics","c":"navigation/dock","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:inertial-dial","t":"Inertial Dial","d":"A weighted needle catches up after the ring turns","k":"motion","s":"kinetics","c":"data-viz/gauge","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:elastic-lasso","t":"Elastic Lasso","d":"Drag a selection field across the constellation","k":"motion","s":"kinetics","c":"inputs/select","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:hover-intent-gate","t":"Hover Intent Gate","d":"A deliberate hover quietly unlocks the action","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:gesture-chord","t":"Gesture Chord","d":"Tap the keys in sequence to arm a shortcut","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:liquid-glass-press","t":"Liquid Glass Press","d":"Frosted glass liquefies under a specular press","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:bento-expand","t":"Bento Expand","d":"Hover focuses one tile; the rest quietly recede","k":"motion","s":"kinetics","c":"layout/bento-grid","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:snap-rail","t":"Snap Rail","d":"A soft selection pill springs to the hovered option","k":"motion","s":"kinetics","c":"navigation/sidebar","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:kinetic-xy-pad","t":"Kinetic XY Pad","d":"A two-axis puck trails the pointer, then springs home","k":"motion","s":"kinetics","c":"navigation/sidebar","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:command-palette-bloom","t":"Command Palette Bloom","d":"A compact trigger unfolds into a staggered action lens","k":"motion","s":"kinetics","c":"navigation/command-palette","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:momentum-picker","t":"Momentum Picker","d":"Wheel input rolls a weighted selector into its next detent","k":"motion","s":"kinetics","c":"inputs/select","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:prompt-composer","t":"Prompt Composer","d":"An AI input grows with the thought, then commits to a run","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:filmstrip-scrubber","t":"Filmstrip Scrubber","d":"A playhead snaps to the frame nearest the pointer","k":"motion","s":"kinetics","c":"inputs/slider","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:drag-stack-collect","t":"Drag Stack Collect","d":"Loose items gather into a fanned pile under the pointer","k":"motion","s":"kinetics","c":"media/card-stack","g":"media","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:focus-relay","t":"Focus Relay","d":"A shared focus ring leaps between fields with a spring morph","k":"motion","s":"kinetics","c":"inputs/form-field","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:hold-to-talk","t":"Hold to Talk","d":"A live waveform blooms while you hold, then commits on release","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:lattice-snap","t":"Lattice Snap","d":"A tile follows the pointer, then springs onto the nearest cell","k":"motion","s":"kinetics","c":"motion/cursor","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:scramble-reveal","t":"Scramble Reveal","d":"Cycles random glyphs before settling left-to-right","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:momentum-marquee","t":"Momentum Marquee","d":"Infinite scroll that pauses smoothly on hover","k":"motion","s":"kinetics","c":"layout/scroll-area","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:stagger-entrance","t":"Stagger Entrance","d":"List items rise in sequence on scroll into view","k":"motion","s":"kinetics","c":"layout/scroll-area","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:icon-morph-swap","t":"Icon Morph Swap","d":"Outgoing icon blurs and rotates out, incoming settles in","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:underline-draw","t":"Underline Draw","d":"Scale-transform underline, draws left to right on hover","k":"motion","s":"kinetics","c":"inputs/form-field","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:elastic-progress","t":"Elastic Progress","d":"Bar overshoots target width slightly before settling","k":"motion","s":"kinetics","c":"data-viz/progress-bar","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:delayed-tooltip","t":"Delayed Tooltip","d":"Appears after a pause, disappears instantly on exit","k":"motion","s":"kinetics","c":"overlays/tooltip","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:switch-spring","t":"Switch Spring","d":"Knob overshoots its track position on toggle","k":"motion","s":"kinetics","c":"actions/switch","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:checkbox-draw","t":"Checkbox Draw","d":"The tick is drawn with an animated SVG stroke","k":"motion","s":"kinetics","c":"inputs/checkbox","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:typewriter","t":"Typewriter","d":"Types and deletes through a list with a blinking caret","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:odometer-count-up","t":"Odometer Count-up","d":"Eases from zero to its target when scrolled into view","k":"motion","s":"kinetics","c":"data-viz/gauge","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:status-pill","t":"Status Pill","d":"Morphs idle → loading → success with icon and colour","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:pulse-badge","t":"Pulse Badge","d":"Expanding ring draws the eye to new state","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:success-check","t":"Success Check","d":"Ring and tick draw themselves on, then undraw on toggle","k":"motion","s":"kinetics","c":"actions/switch","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:segment-loader","t":"Segment Loader","d":"Stepped bars fill one after another on each run","k":"motion","s":"kinetics","c":"status/loader","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:orbit-spinner","t":"Orbit Spinner","d":"A dual-arc ring rotates on a tight infinite loop — pure CSS","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:progress-ring","t":"Progress Ring","d":"Circular stroke eases to a new value on each run","k":"motion","s":"kinetics","c":"data-viz/progress-bar","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:notification-slide-in","t":"Notification Slide-in","d":"Banner drops from the top edge and settles with a spring","k":"motion","s":"kinetics","c":"overlays/toast","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:step-progress","t":"Step Progress","d":"Connector fills and the next node pops active","k":"motion","s":"kinetics","c":"data-viz/progress-bar","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:undo-snackbar","t":"Undo Snackbar","d":"Timed bar drains while you can still undo","k":"motion","s":"kinetics","c":"overlays/toast","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:submit-states","t":"Submit States","d":"Label to bouncing dots to a settled checkmark","k":"motion","s":"kinetics","c":"data-display/stat","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:countdown-ring","t":"Countdown Ring","d":"Drains a circular ring as the seconds tick down","k":"motion","s":"kinetics","c":"motion/number-ticker","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:skeleton-to-content","t":"Skeleton to Content","d":"Shimmering placeholder resolves into real content on click","k":"motion","s":"kinetics","c":"status/skeleton","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:toast-stack","t":"Toast Stack","d":"Multiple toasts stack upward and auto-dismiss in sequence","k":"motion","s":"kinetics","c":"overlays/toast","g":"overlays","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:indeterminate-bar","t":"Indeterminate Bar","d":"Looping sweep for unknown-length work","k":"motion","s":"kinetics","c":"data-viz/chart","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:shimmer-skeleton","t":"Shimmer Skeleton","d":"Sweeping highlight over placeholder lines","k":"motion","s":"kinetics","c":"status/skeleton","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:typing-indicator","t":"Typing Indicator","d":"Three dots bounce in sequence, chat-style","k":"motion","s":"kinetics","c":"status/status-dot","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:heartbeat-monitor","t":"Heartbeat Monitor","d":"Glowing dot traces an EKG along the path","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:battery-charge","t":"Battery Charge","d":"Fill climbs as the bolt pulses","k":"motion","s":"kinetics","c":"status/status-dot","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:signal-bars","t":"Signal Bars","d":"Bars light up in sequence while connecting","k":"motion","s":"kinetics","c":"data-viz/chart","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:badge-counter","t":"Badge Counter","d":"Count springs on every add","k":"motion","s":"kinetics","c":"data-display/badge","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:bookmark-toggle","t":"Bookmark Toggle","d":"Ribbon fills and drops in on save","k":"motion","s":"kinetics","c":"actions/switch","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:packet-trace","t":"Packet Trace","d":"Data pulses choose a route through a tiny network","k":"motion","s":"kinetics","c":"data-viz/map","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:phase-lock","t":"Phase Lock","d":"Three independent signals resolve into sync","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:checksum-bloom","t":"Checksum Bloom","d":"A verification string resolves from noise to trust","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:echo-receipt","t":"Echo Receipt","d":"Acknowledgement ripples through three trust layers","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:state-diff","t":"State Diff","d":"The old value yields as the new state commits","k":"motion","s":"kinetics","c":"data-display/diff","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:signal-braille","t":"Signal Braille","d":"A tactile dot matrix encodes live system phases","k":"motion","s":"kinetics","c":"navigation/sidebar","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:token-stream","t":"Token Stream","d":"Tokens cascade in like a live model response","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:presence-stack","t":"Presence Stack","d":"Avatars fan out with a live online pulse","k":"motion","s":"kinetics","c":"status/status-dot","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:confidence-settle","t":"Confidence Settle","d":"A score overshoots, then settles on the true value","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:optimistic-rollback","t":"Optimistic Rollback","d":"An instant local update gracefully retracts after rejection","k":"motion","s":"kinetics","c":"inputs/date-picker","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:reconciliation-merge","t":"Reconciliation Merge","d":"Competing values converge into one authoritative state","k":"motion","s":"kinetics","c":"data-display/stat","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:activity-ledger","t":"Activity Ledger","d":"Fresh events arrive sharply while older entries compact","k":"motion","s":"kinetics","c":"data-display/timeline","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:agent-handoff","t":"Agent Handoff","d":"One agent hands the live context to the next along a trace","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:rate-limit-cooldown","t":"Rate Limit Cooldown","d":"A token bucket empties fast, then refills on a slow drip","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:vector-recall","t":"Vector Recall","d":"Nearest embeddings drift in as a query ring sweeps the space","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:stale-while-revalidate","t":"Stale While Revalidate","d":"The old value ghosts as the fresh one springs into place","k":"motion","s":"kinetics","c":"inputs/date-picker","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:circuit-breaker","t":"Circuit Breaker","d":"A physical arm throws closed, open, then half-open to probe","k":"motion","s":"kinetics","c":"data-display/list","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:trace-flame","t":"Trace Flame","d":"A request paints as stacked spans filling left to right","k":"motion","s":"kinetics","c":"media/card-stack","g":"media","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:error-shake","t":"Error Shake","d":"Decaying horizontal oscillation, retriggerable","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:confetti-burst","t":"Confetti Burst","d":"Radially-distributed particles with randomized arc and spin","k":"motion","s":"kinetics","c":"data-viz/gauge","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:parallax-tilt","t":"Parallax Tilt","d":"3D rotation tracks pointer position, glow follows beneath","k":"motion","s":"kinetics","c":"motion/tilt-3d","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:wave-loader","t":"Wave Loader","d":"Three dots in a phase-offset vertical bounce","k":"motion","s":"kinetics","c":"status/loader","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:skeleton-sweep","t":"Skeleton Sweep","d":"Gradient position animates across a fixed-size placeholder","k":"motion","s":"kinetics","c":"status/skeleton","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:page-peel","t":"Page Peel","d":"Top card rotates around its left edge like a page turning","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:cursor-spotlight","t":"Cursor Spotlight","d":"Radial glow follows the pointer across a contained surface","k":"motion","s":"kinetics","c":"navigation/command-palette","g":"navigation","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:flip-card","t":"Flip Card","d":"Two faces share a 3D space and rotate on click","k":"motion","s":"kinetics","c":"motion/tilt-3d","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:glitch-text","t":"Glitch Text","d":"RGB-split copies clip and jitter on hover — pure CSS","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:border-beam","t":"Border Beam","d":"A light sweeps the border via a masked conic gradient","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:aurora-drift","t":"Aurora Drift","d":"Soft blurred colour fields drift and rotate forever","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:shine-sweep","t":"Shine Sweep","d":"A diagonal light streak sweeps across on hover — pure CSS","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:breathing-orb","t":"Breathing Orb","d":"A glowing orb scales and softens on an endless breath — pure CSS","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:float-bob","t":"Float Bob","d":"A card hovers and bobs with a shadow that breathes beneath — pure CSS","k":"motion","s":"kinetics","c":"data-display/card","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:liquid-blob","t":"Liquid Blob","d":"An organic shape endlessly morphs its border-radius — pure CSS","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:gradient-shimmer-text","t":"Gradient Shimmer Text","d":"A light band flows through clipped gradient text — pure CSS","k":"motion","s":"kinetics","c":"status/skeleton","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:neon-glow-pulse","t":"Neon Glow Pulse","d":"Text and outline breathe a soft neon halo — pure CSS","k":"motion","s":"kinetics","c":"status/status-dot","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:equalizer-bars","t":"Equalizer Bars","d":"Phase-offset bars pump like an audio meter — pure CSS","k":"motion","s":"kinetics","c":"data-viz/chart","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:radar-pulse","t":"Radar Pulse","d":"Concentric rings expand and fade like sonar","k":"motion","s":"kinetics","c":"status/status-dot","g":"status","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:newton-s-cradle","t":"Newton's Cradle","d":"End pendulums trade momentum across the row","k":"motion","s":"kinetics","c":"data-display/list","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:bouncing-ball","t":"Bouncing Ball","d":"Squash-and-stretch drop with a reactive shadow","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:marquee-reveal","t":"Marquee Reveal","d":"Cards scroll horizontally, pausing on hover — pure CSS","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:gradient-border-morph","t":"Gradient Border Morph","d":"A rotating conic gradient creates a living border — pure CSS","k":"motion","s":"kinetics","c":"inputs/color-picker","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:text-split-reveal","t":"Text Split Reveal","d":"Each letter springs up in sequence on hover — pure CSS","k":"motion","s":"kinetics","c":"layout/split-pane","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:hover-lift","t":"Hover Lift","d":"Surface rises with a soft cast shadow","k":"motion","s":"kinetics","c":"data-display/avatar","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:sheen-sweep","t":"Sheen Sweep","d":"Specular highlight glides across on hover","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:clip-wipe","t":"Clip Wipe","d":"Overlay unmasks left-to-right with clip-path","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:3d-cube-rotate","t":"3D Cube Rotate","d":"Click to roll a face in with depth","k":"motion","s":"kinetics","c":"motion/tilt-3d","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:jelly-wobble","t":"Jelly Wobble","d":"Squash-and-stretch settle on hover","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:folding-doors","t":"Folding Doors","d":"Two panels swing open in 3D on hover","k":"motion","s":"kinetics","c":"motion/tilt-3d","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:before-after","t":"Before / After","d":"Drag the handle to wipe between layers","k":"motion","s":"kinetics","c":"media/image-compare","g":"media","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:depth-stack","t":"Depth Stack","d":"Layered cards fan apart on hover","k":"motion","s":"kinetics","c":"media/card-stack","g":"media","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:text-wave","t":"Text Wave","d":"A crest of motion travels across the letters","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:caustic-glass","t":"Caustic Glass","d":"Shifting light pools refract beneath frosted glass","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:chromatic-split","t":"Chromatic Split","d":"Type separates into prismatic channels, then snaps back","k":"motion","s":"kinetics","c":"layout/split-pane","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:warp-grid","t":"Warp Grid","d":"A planar field bends inward around its focal point","k":"motion","s":"kinetics","c":"layout/page-shell","g":"layout","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:moir-lens","t":"Moiré Lens","d":"Counter-rotating line fields create impossible depth","k":"motion","s":"kinetics","c":"inputs/form-field","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:polarized-foil","t":"Polarized Foil","d":"A muted spectrum appears only at grazing angles","k":"motion","s":"kinetics","c":"unsorted","g":"unsorted","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:metaball-bridge","t":"Metaball Bridge","d":"Two particles trade mass through a liquid neck","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:variable-weight","t":"Variable Weight","d":"Type densifies from thin to black on hover","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:specular-orbit","t":"Specular Orbit","d":"A soft highlight circles a brushed dark surface","k":"motion","s":"kinetics","c":"ai-agent","g":"ai-agent","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:noise-dissolve","t":"Noise Dissolve","d":"Film grain peels back to uncover a colour field","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:dither-bloom","t":"Dither Bloom","d":"A low-bit dot field grows into a soft spectral bloom","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:ferrofluid-crown","t":"Ferrofluid Crown","d":"A magnetic core raises a ring of liquid-metal spikes","k":"motion","s":"kinetics","c":"motion/background","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:lenticular-shift","t":"Lenticular Shift","d":"Micro-ridges swap one word for another as the angle changes","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:volumetric-shaft","t":"Volumetric Shaft","d":"Light rakes through a slot and pools in drifting dust","k":"motion","s":"kinetics","c":"data-display/stat","g":"data-display","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:letterpress-emboss","t":"Letterpress Emboss","d":"Type sits in the paper and reads by the light angle alone","k":"motion","s":"kinetics","c":"actions/button","g":"actions","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:rack-focus","t":"Rack Focus","d":"Depth of field pulls between two planes, bokeh blooming","k":"motion","s":"kinetics","c":"inputs/form-field","g":"inputs","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:e-ink-refresh","t":"E-ink Refresh","d":"A full inverse flash, then the type settles into the paper","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:anamorphic-flare","t":"Anamorphic Flare","d":"A point source rakes the frame and blooms horizontal streaks","k":"motion","s":"kinetics","c":"motion/text-effect","g":"motion","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"kinetics:lidar-sweep","t":"LiDAR Sweep","d":"A scan plane lights a point field into a depth map","k":"motion","s":"kinetics","c":"data-viz/map","g":"data-viz","a":"Kinetics","st":"reviewed","pl":"https://kinetics.colorion.co/","pc":"Kinetics"},{"id":"shadcn-ui:accordion","t":"Accordion","k":"component","s":"shadcn-ui","c":"data-display/accordion","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/263fa7f713f090897d145552ff837b1d.webp","pl":"https://ui.shadcn.com/docs/components/base/accordion","pc":"shadcn"},{"id":"shadcn-ui:alert","t":"Alert","k":"component","s":"shadcn-ui","c":"overlays/alert-banner","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/2e735de57426438798a11f8c10c031d8.webp","pl":"https://ui.shadcn.com/docs/components/base/alert","pc":"shadcn"},{"id":"shadcn-ui:alert-dialog","t":"Alert dialog","k":"component","s":"shadcn-ui","c":"overlays/dialog","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/281d579c04cdfce381f44b8905a2857e.webp","pl":"https://ui.shadcn.com/docs/components/base/alert-dialog","pc":"shadcn"},{"id":"shadcn-ui:aspect-ratio","t":"Aspect ratio","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/3d86072d459c9500108ee9f5b0d1ecd3.webp","pl":"https://ui.shadcn.com/docs/components/base/aspect-ratio","pc":"shadcn"},{"id":"shadcn-ui:attachment","t":"Attachment","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/3d21848ab31ba43ff36e02a94f279cc8.webp","pl":"https://ui.shadcn.com/docs/components/base/attachment","pc":"shadcn"},{"id":"shadcn-ui:avatar","t":"Avatar","k":"component","s":"shadcn-ui","c":"data-display/avatar","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/5d4cff93b086aa2cad7b7e3dee9ac2b5.webp","pl":"https://ui.shadcn.com/docs/components/base/avatar","pc":"shadcn"},{"id":"shadcn-ui:badge","t":"Badge","k":"component","s":"shadcn-ui","c":"data-display/badge","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/ea6301d895b2715f694317c5048ced16.webp","pl":"https://ui.shadcn.com/docs/components/base/badge","pc":"shadcn"},{"id":"shadcn-ui:breadcrumb","t":"Breadcrumb","k":"component","s":"shadcn-ui","c":"navigation/breadcrumb","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/9a0b7af331fbf6f36e80605ccde1dded.webp","pl":"https://ui.shadcn.com/docs/components/base/breadcrumb","pc":"shadcn"},{"id":"shadcn-ui:bubble","t":"Bubble","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/f29cb4763e1cf2b77070f28e809d3689.webp","pl":"https://ui.shadcn.com/docs/components/base/bubble","pc":"shadcn"},{"id":"shadcn-ui:button","t":"Button","k":"component","s":"shadcn-ui","c":"actions/button","g":"actions","a":"shadcn","st":"reviewed","p":"/a/p/2bf9c78d36b758a34e08371be18b1ea0.webp","pl":"https://ui.shadcn.com/docs/components/base/button","pc":"shadcn"},{"id":"shadcn-ui:button-group","t":"Button group","k":"component","s":"shadcn-ui","c":"actions/button","g":"actions","a":"shadcn","st":"reviewed","p":"/a/p/79f8b403aa4b5dd47b65b1d69bf1e3f0.webp","pl":"https://ui.shadcn.com/docs/components/base/button-group","pc":"shadcn"},{"id":"shadcn-ui:calendar","t":"Calendar","k":"component","s":"shadcn-ui","c":"inputs/date-picker","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/bff0dfee77a5ddd8551bf76fd7358cf4.webp","pl":"https://ui.shadcn.com/docs/components/base/calendar","pc":"shadcn"},{"id":"shadcn-ui:card","t":"Card","k":"component","s":"shadcn-ui","c":"data-display/card","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/487f3e9903d0ad8b4bb4aa5af8912cc5.webp","pl":"https://ui.shadcn.com/docs/components/base/card","pc":"shadcn"},{"id":"shadcn-ui:carousel","t":"Carousel","k":"component","s":"shadcn-ui","c":"media/carousel","g":"media","a":"shadcn","st":"reviewed","p":"/a/p/f9f363a730a1fa780a59889f935caa3f.webp","pl":"https://ui.shadcn.com/docs/components/base/carousel","pc":"shadcn"},{"id":"shadcn-ui:chart","t":"Chart","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/558e09da7cd29c16508cb96f336e1849.webp","pl":"https://ui.shadcn.com/docs/components/base/chart","pc":"shadcn"},{"id":"shadcn-ui:checkbox","t":"Checkbox","k":"component","s":"shadcn-ui","c":"inputs/checkbox","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/ddb8911b21e0fa13c55feac33e8fdc35.webp","pl":"https://ui.shadcn.com/docs/components/base/checkbox","pc":"shadcn"},{"id":"shadcn-ui:collapsible","t":"Collapsible","k":"component","s":"shadcn-ui","c":"data-display/accordion","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/df89db3b78622e5519dd65787bb03a2a.webp","pl":"https://ui.shadcn.com/docs/components/base/collapsible","pc":"shadcn"},{"id":"shadcn-ui:combobox","t":"Combobox","k":"component","s":"shadcn-ui","c":"inputs/combobox","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/0730de5189e72a71feda24d640b47779.webp","pl":"https://ui.shadcn.com/docs/components/base/combobox","pc":"shadcn"},{"id":"shadcn-ui:command","t":"Command","k":"component","s":"shadcn-ui","c":"navigation/command-palette","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/dbafc0a91d6f94f6420ae2ee6b7f3849.webp","pl":"https://ui.shadcn.com/docs/components/base/command","pc":"shadcn"},{"id":"shadcn-ui:context-menu","t":"Context menu","k":"component","s":"shadcn-ui","c":"overlays/context-menu","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/8608f2eafae2926d1f8ae579832e33ed.webp","pl":"https://ui.shadcn.com/docs/components/base/context-menu","pc":"shadcn"},{"id":"shadcn-ui:dialog","t":"Dialog","k":"component","s":"shadcn-ui","c":"overlays/dialog","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/06855143401cfbe5e62cbb33ee274f94.webp","pl":"https://ui.shadcn.com/docs/components/base/dialog","pc":"shadcn"},{"id":"shadcn-ui:direction","t":"Direction","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/76f9a63e233e1d74acf602dbacb6bfe5.webp","pl":"https://ui.shadcn.com/docs/components/base/direction","pc":"shadcn"},{"id":"shadcn-ui:drawer","t":"Drawer","k":"component","s":"shadcn-ui","c":"overlays/sheet","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/f1ae75d12e9eca4db387f83e13fdfa2a.webp","pl":"https://ui.shadcn.com/docs/components/base/drawer","pc":"shadcn"},{"id":"shadcn-ui:dropdown-menu","t":"Dropdown menu","k":"component","s":"shadcn-ui","c":"navigation/menu","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/d7e8b3e30cf15fd856f68340a36220e7.webp","pl":"https://ui.shadcn.com/docs/components/base/dropdown-menu","pc":"shadcn"},{"id":"shadcn-ui:empty","t":"Empty","k":"component","s":"shadcn-ui","c":"data-display/empty-state","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/655906a433985a311b13832c1635641a.webp","pl":"https://ui.shadcn.com/docs/components/base/empty","pc":"shadcn"},{"id":"shadcn-ui:field","t":"Field","k":"component","s":"shadcn-ui","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/50746eee1186f89008bd347365372d11.webp","pl":"https://ui.shadcn.com/docs/components/base/field","pc":"shadcn"},{"id":"shadcn-ui:form","t":"Form","k":"component","s":"shadcn-ui","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/form","pc":"shadcn"},{"id":"shadcn-ui:hover-card","t":"Hover card","k":"component","s":"shadcn-ui","c":"overlays/hover-card","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/06487b7337a4a55639e4b3bdb987179e.webp","pl":"https://ui.shadcn.com/docs/components/base/hover-card","pc":"shadcn"},{"id":"shadcn-ui:input","t":"Input","k":"component","s":"shadcn-ui","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/9c3b175b7b58f4ff5764b4538d44e7b3.webp","pl":"https://ui.shadcn.com/docs/components/base/input","pc":"shadcn"},{"id":"shadcn-ui:input-group","t":"Input group","k":"component","s":"shadcn-ui","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/90f4d5c95c618def6c9725a4830d0c2b.webp","pl":"https://ui.shadcn.com/docs/components/base/input-group","pc":"shadcn"},{"id":"shadcn-ui:input-otp","t":"Input otp","k":"component","s":"shadcn-ui","c":"inputs/otp-input","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/c3bd6b502dfeda4d622019445a95960f.webp","pl":"https://ui.shadcn.com/docs/components/base/input-otp","pc":"shadcn"},{"id":"shadcn-ui:item","t":"Item","k":"component","s":"shadcn-ui","c":"data-display/list","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/3cb4156acc5beefa9883febdfe304985.webp","pl":"https://ui.shadcn.com/docs/components/base/item","pc":"shadcn"},{"id":"shadcn-ui:kbd","t":"Kbd","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/029128e49321f84b50a345c19efd3ba3.webp","pl":"https://ui.shadcn.com/docs/components/base/kbd","pc":"shadcn"},{"id":"shadcn-ui:label","t":"Label","k":"component","s":"shadcn-ui","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/30631cf1a7ff134cc25c6071ceadcf2f.webp","pl":"https://ui.shadcn.com/docs/components/base/label","pc":"shadcn"},{"id":"shadcn-ui:marker","t":"Marker","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/628b6f215d2aa2d002c2f7a85938fa6f.webp","pl":"https://ui.shadcn.com/docs/components/base/marker","pc":"shadcn"},{"id":"shadcn-ui:menubar","t":"Menubar","k":"component","s":"shadcn-ui","c":"navigation/top-nav","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/9487a0e3797c87a9505ab35bd99f4d78.webp","pl":"https://ui.shadcn.com/docs/components/base/menubar","pc":"shadcn"},{"id":"shadcn-ui:message","t":"Message","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/dec2a4303ce76dcc56191b1d3a6c355b.webp","pl":"https://ui.shadcn.com/docs/components/base/message","pc":"shadcn"},{"id":"shadcn-ui:message-scroller","t":"Message scroller","k":"component","s":"shadcn-ui","c":"layout/scroll-area","g":"layout","a":"shadcn","st":"reviewed","p":"/a/p/17c3b03e7cbc688e5d99e87b90fe364e.webp","pl":"https://ui.shadcn.com/docs/components/base/message-scroller","pc":"shadcn"},{"id":"shadcn-ui:native-select","t":"Native select","k":"component","s":"shadcn-ui","c":"inputs/select","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/3a2fffc1b6a1f359346ace5efdb861a2.webp","pl":"https://ui.shadcn.com/docs/components/base/native-select","pc":"shadcn"},{"id":"shadcn-ui:navigation-menu","t":"Navigation menu","k":"component","s":"shadcn-ui","c":"navigation/top-nav","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/adf3cca12efc9795645a2b7e8cf0fd67.webp","pl":"https://ui.shadcn.com/docs/components/base/navigation-menu","pc":"shadcn"},{"id":"shadcn-ui:pagination","t":"Pagination","k":"component","s":"shadcn-ui","c":"navigation/pagination","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/483453c97d20069ccd6835dd491152fa.webp","pl":"https://ui.shadcn.com/docs/components/base/pagination","pc":"shadcn"},{"id":"shadcn-ui:popover","t":"Popover","k":"component","s":"shadcn-ui","c":"overlays/popover","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/7b31c3cfb0d8a28113b45418e5b6c8f0.webp","pl":"https://ui.shadcn.com/docs/components/base/popover","pc":"shadcn"},{"id":"shadcn-ui:progress","t":"Progress","k":"component","s":"shadcn-ui","c":"data-viz/progress-bar","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/338ae1b11bdaef2e596308247f4c390c.webp","pl":"https://ui.shadcn.com/docs/components/base/progress","pc":"shadcn"},{"id":"shadcn-ui:questionnaire","t":"Questionnaire","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/cb9dfe50849dacef9b9ffab58008a6e6.webp","pl":"https://ui.shadcn.com/docs/components/base/questionnaire","pc":"shadcn"},{"id":"shadcn-ui:radio-group","t":"Radio group","k":"component","s":"shadcn-ui","c":"inputs/radio","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/babb7455e0d9b59f52912d1ccd5b0dea.webp","pl":"https://ui.shadcn.com/docs/components/base/radio-group","pc":"shadcn"},{"id":"shadcn-ui:resizable","t":"Resizable","k":"component","s":"shadcn-ui","c":"layout/split-pane","g":"layout","a":"shadcn","st":"reviewed","p":"/a/p/9b4a01da240e0c3320c564e6d250853f.webp","pl":"https://ui.shadcn.com/docs/components/base/resizable","pc":"shadcn"},{"id":"shadcn-ui:scroll-area","t":"Scroll area","k":"component","s":"shadcn-ui","c":"layout/scroll-area","g":"layout","a":"shadcn","st":"reviewed","p":"/a/p/85ae790e68a2cdd81c2cba80e0dbd191.webp","pl":"https://ui.shadcn.com/docs/components/base/scroll-area","pc":"shadcn"},{"id":"shadcn-ui:select","t":"Select","k":"component","s":"shadcn-ui","c":"inputs/select","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/7b0940c07458354d0667717b6b430a92.webp","pl":"https://ui.shadcn.com/docs/components/base/select","pc":"shadcn"},{"id":"shadcn-ui:separator","t":"Separator","k":"component","s":"shadcn-ui","c":"other","g":"other","a":"shadcn","st":"reviewed","p":"/a/p/133c7061323d8405f30c8a8683123bdf.webp","pl":"https://ui.shadcn.com/docs/components/base/separator","pc":"shadcn"},{"id":"shadcn-ui:sheet","t":"Sheet","k":"component","s":"shadcn-ui","c":"overlays/sheet","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/d7e8b3e30cf15fd856f68340a36220e7.webp","pl":"https://ui.shadcn.com/docs/components/base/sheet","pc":"shadcn"},{"id":"shadcn-ui:sidebar","t":"Sidebar","k":"component","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/afa8bbf2c99ceed8afb777098e138d2a.webp","pl":"https://ui.shadcn.com/docs/components/base/sidebar","pc":"shadcn"},{"id":"shadcn-ui:skeleton","t":"Skeleton","k":"component","s":"shadcn-ui","c":"status/skeleton","g":"status","a":"shadcn","st":"reviewed","p":"/a/p/72da8d641af0fd9978314712c4765e4d.webp","pl":"https://ui.shadcn.com/docs/components/base/skeleton","pc":"shadcn"},{"id":"shadcn-ui:slider","t":"Slider","k":"component","s":"shadcn-ui","c":"inputs/slider","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/0da4fe736c743eb0e0e31dd9dadcd060.webp","pl":"https://ui.shadcn.com/docs/components/base/slider","pc":"shadcn"},{"id":"shadcn-ui:sonner","t":"Sonner","k":"component","s":"shadcn-ui","c":"overlays/toast","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/31a61f507e945f782e1f11e1617d7776.webp","pl":"https://ui.shadcn.com/docs/components/base/toast","pc":"shadcn"},{"id":"shadcn-ui:spinner","t":"Spinner","k":"component","s":"shadcn-ui","c":"status/loader","g":"status","a":"shadcn","st":"reviewed","p":"/a/p/ef2ac2b869e0fe56d142ece0bec035df.webp","pl":"https://ui.shadcn.com/docs/components/base/spinner","pc":"shadcn"},{"id":"shadcn-ui:switch","t":"Switch","k":"component","s":"shadcn-ui","c":"actions/switch","g":"actions","a":"shadcn","st":"reviewed","p":"/a/p/60a60870c072136dfe5909680c98d5ef.webp","pl":"https://ui.shadcn.com/docs/components/base/switch","pc":"shadcn"},{"id":"shadcn-ui:table","t":"Table","k":"component","s":"shadcn-ui","c":"data-display/table","g":"data-display","a":"shadcn","st":"reviewed","p":"/a/p/5eec4d46663d80f45ff6fb8d07db02cc.webp","pl":"https://ui.shadcn.com/docs/components/base/table","pc":"shadcn"},{"id":"shadcn-ui:tabs","t":"Tabs","k":"component","s":"shadcn-ui","c":"navigation/tabs","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/637b73f827c2e213bb9a9e73ed2e5c75.webp","pl":"https://ui.shadcn.com/docs/components/base/tabs","pc":"shadcn"},{"id":"shadcn-ui:textarea","t":"Textarea","k":"component","s":"shadcn-ui","c":"inputs/textarea","g":"inputs","a":"shadcn","st":"reviewed","p":"/a/p/e5aa124a91dd64f5d08567a1a00e6ebc.webp","pl":"https://ui.shadcn.com/docs/components/base/textarea","pc":"shadcn"},{"id":"shadcn-ui:toast","t":"Toast","k":"component","s":"shadcn-ui","c":"overlays/toast","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/31a61f507e945f782e1f11e1617d7776.webp","pl":"https://ui.shadcn.com/docs/components/base/toast","pc":"shadcn"},{"id":"shadcn-ui:toggle","t":"Toggle","k":"component","s":"shadcn-ui","c":"actions/switch","g":"actions","a":"shadcn","st":"reviewed","p":"/a/p/451d33e591083bffc18f55c44411fa40.webp","pl":"https://ui.shadcn.com/docs/components/base/toggle","pc":"shadcn"},{"id":"shadcn-ui:toggle-group","t":"Toggle group","k":"component","s":"shadcn-ui","c":"actions/switch","g":"actions","a":"shadcn","st":"reviewed","p":"/a/p/867b1c389a7a648eebade59899624ebe.webp","pl":"https://ui.shadcn.com/docs/components/base/toggle-group","pc":"shadcn"},{"id":"shadcn-ui:tooltip","t":"Tooltip","k":"component","s":"shadcn-ui","c":"overlays/tooltip","g":"overlays","a":"shadcn","st":"reviewed","p":"/a/p/8029286d2ec5c74524aea59b38b92deb.webp","pl":"https://ui.shadcn.com/docs/components/base/tooltip","pc":"shadcn"},{"id":"shadcn-ui:dashboard-01","t":"Dashboard 01","d":"A dashboard with sidebar, charts and data table.","k":"layout","s":"shadcn-ui","c":"layout/dashboard","g":"layout","a":"shadcn","st":"reviewed","p":"/a/p/400da1f53bedb3cfce82c437219a44ed.webp","pl":"https://ui.shadcn.com/blocks/dashboard-01","pc":"shadcn"},{"id":"shadcn-ui:login-01","t":"Login 01","d":"A simple login form.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","p":"/a/p/439d5ac41424d2428c2b11adf8ad6a5c.webp","pl":"https://ui.shadcn.com/blocks/login-01","pc":"shadcn"},{"id":"shadcn-ui:login-02","t":"Login 02","d":"A two column login page with a cover image.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","p":"/a/p/2b7c6829f3d83dffa346a66d908bf873.webp","pl":"https://ui.shadcn.com/blocks/login-02","pc":"shadcn"},{"id":"shadcn-ui:login-03","t":"Login 03","d":"A login page with a muted background color.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","p":"/a/p/939508fb6f4824833b330e0b7eca5140.webp","pl":"https://ui.shadcn.com/blocks/login-03","pc":"shadcn"},{"id":"shadcn-ui:login-04","t":"Login 04","d":"A login page with form and image.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","p":"/a/p/1b87e9372294e4bad5be44f47c823ba8.webp","pl":"https://ui.shadcn.com/blocks/login-04","pc":"shadcn"},{"id":"shadcn-ui:login-05","t":"Login 05","d":"A simple email-only login page.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","p":"/a/p/4d311b50b84fea9621dd18a60ac9ea88.webp","pl":"https://ui.shadcn.com/blocks/login-05","pc":"shadcn"},{"id":"shadcn-ui:sidebar-01","t":"Sidebar 01","d":"A simple sidebar with navigation grouped by section.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/020b1cf45bd01e6981e9a037565a77e2.webp","pl":"https://ui.shadcn.com/blocks/sidebar-01","pc":"shadcn"},{"id":"shadcn-ui:sidebar-02","t":"Sidebar 02","d":"A sidebar with collapsible sections.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/9b9ba8bab3f29f2bec9893a244a74acc.webp","pl":"https://ui.shadcn.com/blocks/sidebar-02","pc":"shadcn"},{"id":"shadcn-ui:sidebar-03","t":"Sidebar 03","d":"A sidebar with submenus.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/8eaa97305ffcae503db5cddae293ee85.webp","pl":"https://ui.shadcn.com/blocks/sidebar-03","pc":"shadcn"},{"id":"shadcn-ui:sidebar-04","t":"Sidebar 04","d":"A floating sidebar with submenus.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/25e3b418a369ad7a05bf05ef373b53f8.webp","pl":"https://ui.shadcn.com/blocks/sidebar-04","pc":"shadcn"},{"id":"shadcn-ui:sidebar-05","t":"Sidebar 05","d":"A sidebar with collapsible submenus.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/1352ee3873ff82bbf93baa73c491507f.webp","pl":"https://ui.shadcn.com/blocks/sidebar-05","pc":"shadcn"},{"id":"shadcn-ui:sidebar-06","t":"Sidebar 06","d":"A sidebar with submenus as dropdowns.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/1b35bcc7d99650044e4c9d994d96dec0.webp","pl":"https://ui.shadcn.com/blocks/sidebar-06","pc":"shadcn"},{"id":"shadcn-ui:sidebar-07","t":"Sidebar 07","d":"A sidebar that collapses to icons.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/ceea36880117c8d7f2ef6aedac89d5b4.webp","pl":"https://ui.shadcn.com/blocks/sidebar-07","pc":"shadcn"},{"id":"shadcn-ui:sidebar-08","t":"Sidebar 08","d":"An inset sidebar with secondary navigation.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/30b05d7634f22b5416e823e60b2c0f2b.webp","pl":"https://ui.shadcn.com/blocks/sidebar-08","pc":"shadcn"},{"id":"shadcn-ui:sidebar-09","t":"Sidebar 09","d":"Collapsible nested sidebars.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/822a3f6024a09c97eb2949ad219510d2.webp","pl":"https://ui.shadcn.com/blocks/sidebar-09","pc":"shadcn"},{"id":"shadcn-ui:sidebar-10","t":"Sidebar 10","d":"A sidebar in a popover.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/59bdbe8a9f6a3ecff9c0d3e21987b743.webp","pl":"https://ui.shadcn.com/blocks/sidebar-10","pc":"shadcn"},{"id":"shadcn-ui:sidebar-11","t":"Sidebar 11","d":"A sidebar with a collapsible file tree.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/a38e55f4238a40ac86051dcdfa638625.webp","pl":"https://ui.shadcn.com/blocks/sidebar-11","pc":"shadcn"},{"id":"shadcn-ui:sidebar-12","t":"Sidebar 12","d":"A sidebar with a calendar.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/95f7d80d1f060bf727d3382a4d0e29b0.webp","pl":"https://ui.shadcn.com/blocks/sidebar-12","pc":"shadcn"},{"id":"shadcn-ui:sidebar-13","t":"Sidebar 13","d":"A sidebar in a dialog.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/1524c6fd34cd25ba08ad9312023725fd.webp","pl":"https://ui.shadcn.com/blocks/sidebar-13","pc":"shadcn"},{"id":"shadcn-ui:sidebar-14","t":"Sidebar 14","d":"A sidebar on the right.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/8f2b0f71052cf1afc18bd846cc9df93c.webp","pl":"https://ui.shadcn.com/blocks/sidebar-14","pc":"shadcn"},{"id":"shadcn-ui:sidebar-15","t":"Sidebar 15","d":"A left and right sidebar.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/c604cc18ed29a45e481111d96b8c724e.webp","pl":"https://ui.shadcn.com/blocks/sidebar-15","pc":"shadcn"},{"id":"shadcn-ui:sidebar-16","t":"Sidebar 16","d":"A sidebar with a sticky site header.","k":"layout","s":"shadcn-ui","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"reviewed","p":"/a/p/1c69bc994da57959959e9b7912a8848e.webp","pl":"https://ui.shadcn.com/blocks/sidebar-16","pc":"shadcn"},{"id":"shadcn-ui:signup-01","t":"Signup 01","d":"A simple signup form.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/signup-01","pc":"shadcn"},{"id":"shadcn-ui:signup-02","t":"Signup 02","d":"A two column signup page with a cover image.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/signup-02","pc":"shadcn"},{"id":"shadcn-ui:signup-03","t":"Signup 03","d":"A signup page with a muted background color.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/signup-03","pc":"shadcn"},{"id":"shadcn-ui:signup-04","t":"Signup 04","d":"A signup page with form and image.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/signup-04","pc":"shadcn"},{"id":"shadcn-ui:signup-05","t":"Signup 05","d":"A simple signup form with social providers.","k":"layout","s":"shadcn-ui","c":"flows/sign-in","g":"flows","a":"shadcn","st":"reviewed","pl":"https://ui.shadcn.com/blocks/signup-05","pc":"shadcn"},{"id":"shadcn-ui:chart-area-axes","t":"Chart area axes","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/49de7b20073b418cc8d21145b56b87bc.webp","pl":"https://ui.shadcn.com/blocks/chart-area-axes","pc":"shadcn"},{"id":"shadcn-ui:chart-area-default","t":"Chart area default","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/3fa55649a10d7ef847fc5b6776af729c.webp","pl":"https://ui.shadcn.com/blocks/chart-area-default","pc":"shadcn"},{"id":"shadcn-ui:chart-area-gradient","t":"Chart area gradient","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/cdd5c1c02e0fce49953e52f51e770c1f.webp","pl":"https://ui.shadcn.com/blocks/chart-area-gradient","pc":"shadcn"},{"id":"shadcn-ui:chart-area-icons","t":"Chart area icons","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/1b70ceb0c6b6f11c21af99efde9042ae.webp","pl":"https://ui.shadcn.com/blocks/chart-area-icons","pc":"shadcn"},{"id":"shadcn-ui:chart-area-interactive","t":"Chart area interactive","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/e691fb4c68da2426a29be91d30c9521d.webp","pl":"https://ui.shadcn.com/blocks/chart-area-interactive","pc":"shadcn"},{"id":"shadcn-ui:chart-area-legend","t":"Chart area legend","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/597e7f0788a6227eee0c61e487c92372.webp","pl":"https://ui.shadcn.com/blocks/chart-area-legend","pc":"shadcn"},{"id":"shadcn-ui:chart-area-linear","t":"Chart area linear","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/aed861bcc147e4e4d87a616476b0aded.webp","pl":"https://ui.shadcn.com/blocks/chart-area-linear","pc":"shadcn"},{"id":"shadcn-ui:chart-area-stacked","t":"Chart area stacked","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/7e4b5b4f206def3ef1a25cec438bfbf2.webp","pl":"https://ui.shadcn.com/blocks/chart-area-stacked","pc":"shadcn"},{"id":"shadcn-ui:chart-area-step","t":"Chart area step","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/cd10c0368beef87730f0bbaee8793e4f.webp","pl":"https://ui.shadcn.com/blocks/chart-area-step","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-active","t":"Chart bar active","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/728289ab1a8e529ed0cbbf75b525b86d.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-active","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-default","t":"Chart bar default","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/eaf1d076809f6f64f85a5c0a2f904029.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-default","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-horizontal","t":"Chart bar horizontal","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/8429062e145af30424e47af912474277.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-horizontal","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-interactive","t":"Chart bar interactive","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/2526cea9f61281f98b41de929c00f425.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-interactive","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-label","t":"Chart bar label","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/a093d096d87f32226ace7f7ac15eb5b4.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-label","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-mixed","t":"Chart bar mixed","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/62902bd423207b4d42b1f60dde538af5.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-mixed","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-multiple","t":"Chart bar multiple","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/68b4fea0a839076448e723acdc83b773.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-multiple","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-negative","t":"Chart bar negative","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/e6003c414dbe2672ede4ebc3331d7687.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-negative","pc":"shadcn"},{"id":"shadcn-ui:chart-bar-stacked","t":"Chart bar stacked","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/83cdcb5c3ecd413702858bbf6ae46fbf.webp","pl":"https://ui.shadcn.com/blocks/chart-bar-stacked","pc":"shadcn"},{"id":"shadcn-ui:chart-line-default","t":"Chart line default","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/29860c81a5ab227ce62de3488f8d6a9f.webp","pl":"https://ui.shadcn.com/blocks/chart-line-default","pc":"shadcn"},{"id":"shadcn-ui:chart-line-dots","t":"Chart line dots","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/0f84b544e3ab12ac0e327f4a7fe08988.webp","pl":"https://ui.shadcn.com/blocks/chart-line-dots","pc":"shadcn"},{"id":"shadcn-ui:chart-line-interactive","t":"Chart line interactive","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/73ba552a2287e19222c232bbe2d70516.webp","pl":"https://ui.shadcn.com/blocks/chart-line-interactive","pc":"shadcn"},{"id":"shadcn-ui:chart-line-label","t":"Chart line label","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/739b80bfc965657fe62ba9bb5c28c8ce.webp","pl":"https://ui.shadcn.com/blocks/chart-line-label","pc":"shadcn"},{"id":"shadcn-ui:chart-line-linear","t":"Chart line linear","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/0438d77c4d1fa2d7c0efd772b60e00f0.webp","pl":"https://ui.shadcn.com/blocks/chart-line-linear","pc":"shadcn"},{"id":"shadcn-ui:chart-line-multiple","t":"Chart line multiple","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/26525ea25730ef4c460483e09c9fa380.webp","pl":"https://ui.shadcn.com/blocks/chart-line-multiple","pc":"shadcn"},{"id":"shadcn-ui:chart-line-step","t":"Chart line step","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/9f2515434151b47ff0352182d6620daa.webp","pl":"https://ui.shadcn.com/blocks/chart-line-step","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-donut","t":"Chart pie donut","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/778a0cab46ced22305f3c52f38d4adcf.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-donut","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-interactive","t":"Chart pie interactive","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/4be81eedaafbf7a651c8d555d12f326e.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-interactive","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-label","t":"Chart pie label","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/f353ab040bb0e5dbc8160787950cd282.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-label","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-legend","t":"Chart pie legend","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/3035d24bec1742c1e979826b9a2d9cef.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-legend","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-simple","t":"Chart pie simple","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/90bd6335d02052329b8b8c60c58cdc80.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-simple","pc":"shadcn"},{"id":"shadcn-ui:chart-pie-stacked","t":"Chart pie stacked","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/303cc0f6cac38e513ece113a38c94d89.webp","pl":"https://ui.shadcn.com/blocks/chart-pie-stacked","pc":"shadcn"},{"id":"shadcn-ui:chart-radar-default","t":"Chart radar default","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/62028e5294ff2f78c887c13662f72a31.webp","pl":"https://ui.shadcn.com/blocks/chart-radar-default","pc":"shadcn"},{"id":"shadcn-ui:chart-radar-dots","t":"Chart radar dots","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/17e221b57b238327932f795982c0abb3.webp","pl":"https://ui.shadcn.com/blocks/chart-radar-dots","pc":"shadcn"},{"id":"shadcn-ui:chart-radar-legend","t":"Chart radar legend","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/ca40c30941165edfacbfc12d9354bfe9.webp","pl":"https://ui.shadcn.com/blocks/chart-radar-legend","pc":"shadcn"},{"id":"shadcn-ui:chart-radar-multiple","t":"Chart radar multiple","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/5133237015102d36c7da29c0011d731e.webp","pl":"https://ui.shadcn.com/blocks/chart-radar-multiple","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-grid","t":"Chart radial grid","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/8581d0038162da5f249b7d32614f4d40.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-grid","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-label","t":"Chart radial label","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/4f3c0277bcf1818103110653b330f7b0.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-label","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-shape","t":"Chart radial shape","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/d4d1dd56543a6bbc9367705e856b3603.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-shape","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-simple","t":"Chart radial simple","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/3c85f641588ee4e79adc757ffaf1d128.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-simple","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-stacked","t":"Chart radial stacked","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/cdfef70a68ce4ec4471c3372bf26dfd8.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-stacked","pc":"shadcn"},{"id":"shadcn-ui:chart-radial-text","t":"Chart radial text","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/b44c7fde8d6996d2b8648ae5ceda6661.webp","pl":"https://ui.shadcn.com/blocks/chart-radial-text","pc":"shadcn"},{"id":"shadcn-ui:chart-tooltip-advanced","t":"Chart tooltip advanced","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/8bb47972e6083c9d774b0b4d2125179f.webp","pl":"https://ui.shadcn.com/blocks/chart-tooltip-advanced","pc":"shadcn"},{"id":"shadcn-ui:chart-tooltip-default","t":"Chart tooltip default","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/fadbaa4486fc42647eb44db99bf21457.webp","pl":"https://ui.shadcn.com/blocks/chart-tooltip-default","pc":"shadcn"},{"id":"shadcn-ui:chart-tooltip-formatter","t":"Chart tooltip formatter","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/ff61f4f31d639b97ac9af4ada0f19174.webp","pl":"https://ui.shadcn.com/blocks/chart-tooltip-formatter","pc":"shadcn"},{"id":"shadcn-ui:chart-tooltip-icons","t":"Chart tooltip icons","k":"component","s":"shadcn-ui","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"reviewed","p":"/a/p/54a7c8de25ca4a1cfdca5b0d3840c3ce.webp","pl":"https://ui.shadcn.com/blocks/chart-tooltip-icons","pc":"shadcn"},{"id":"21st:0xUrvish__animated-collection","t":"Animated collection","d":"A collection of items with smooth layout transitions and animations.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"0xUrvish","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/animated-collection/demos/default/preview.1773272502588.png","pc":"0xUrvish","tg":["gallery"]},{"id":"21st:0xUrvish__bento-card","t":"Bento card","d":"An interactive bento card with animated tabs and workspace preview.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"0xUrvish","st":"indexed","u":101,"pl":"https://cdn.21st.dev/larsen66/bento-card/demos/default/preview.1773272549916.png","pc":"0xUrvish","tg":["dashboard","tabs"]},{"id":"21st:0xUrvish__bottom-menu","t":"Bottom menu","d":"An animated bottom navigation menu with smooth transitions.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"0xUrvish","st":"indexed","u":30,"pl":"https://cdn.21st.dev/larsen66/bottom-menu/demos/default/preview.1773272598452.png","pc":"0xUrvish","tg":["dock"]},{"id":"21st:0xUrvish__bucket","t":"Bucket","d":"An animated file bucket component with drag interactions.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"0xUrvish","st":"indexed","u":63,"pl":"https://cdn.21st.dev/larsen66/bucket/default/preview.1773296154509.png","pc":"0xUrvish"},{"id":"21st:0xUrvish__day-picker","t":"Day picker","d":"An animated day picker calendar component.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"0xUrvish","st":"indexed","pl":"https://cdn.21st.dev/larsen66/day-picker/default/preview.1773296227059.png","pc":"0xUrvish"},{"id":"21st:0xUrvish__delete-button","t":"Delete button","d":"An animated delete button with swipe-to-delete interaction.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"0xUrvish","st":"indexed","pl":"https://cdn.21st.dev/larsen66/delete-button/default/preview.1773296291853.png","pc":"0xUrvish"},{"id":"21st:0xUrvish__discover-button","t":"Discover button","d":"An animated discover button with smooth hover and spring effects.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"0xUrvish","st":"indexed","u":21,"pl":"https://cdn.21st.dev/0xUrvish/discover-button/default/preview.1773296450853.png","pc":"0xUrvish","tg":["toggle"]},{"id":"21st:0xUrvish__discrete-tab","t":"Discrete tab","d":"A tab component with discrete sliding animations.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"0xUrvish","st":"indexed","pl":"https://cdn.21st.dev/larsen66/discrete-tab/default/preview.1773296524059.png","pc":"0xUrvish","tg":["tabs"]},{"id":"21st:0xUrvish__dynamic-toolbar","t":"Dynamic toolbar","d":"A dynamic toolbar with animated tool selection and smooth transitions.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"0xUrvish","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/dynamic-toolbar/default/preview.1773296595534.png","pc":"0xUrvish"},{"id":"21st:0xUrvish__empty-testimonial","t":"Empty testimonial","d":"An animated empty state component for testimonial sections.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"0xUrvish","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/empty-testimonial/default/preview.1773296744146.png","pc":"0xUrvish","tg":["empty-state","testimonials"]},{"id":"21st:0xUrvish__expandable-gallery","t":"Expandable gallery","d":"A gallery component with expandable image items.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"0xUrvish","st":"indexed","u":38,"pl":"https://cdn.21st.dev/larsen66/expandable-gallery/demos/default/preview.1773274341623.png","pc":"0xUrvish","tg":["gallery"]},{"id":"21st:0xUrvish__feature-carousel","t":"Feature carousel","d":"An animated feature carousel with smooth slide transitions.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"0xUrvish","st":"indexed","u":201,"pl":"https://cdn.21st.dev/larsen66/feature-carousel/default/preview.1773296834657.png","pc":"0xUrvish","tg":["carousel","features","image"]},{"id":"21st:0xUrvish__fluid-expanding-grid","t":"Fluid expanding grid","d":"A fluid grid that expands items with smooth motion animations.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"0xUrvish","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/fluid-expanding-grid/default/preview.1773296942274.png","pc":"0xUrvish","tg":["gallery","grid","image"]},{"id":"21st:0xUrvish__folder-interaction","t":"Folder interaction","d":"An animated folder with interactive open/close mechanics.","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"0xUrvish","st":"indexed","pl":"https://cdn.21st.dev/larsen66/folder-interaction/default/preview.1773297116494.png","pc":"0xUrvish"},{"id":"21st:0xUrvish__inline-edit","t":"Inline edit","d":"An inline text editor with smooth transition animations.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"0xUrvish","st":"rated","u":12,"pl":"https://cdn.21st.dev/larsen66/inline-edit/demos/default/preview.1773274740843.png","pc":"0xUrvish","sc":25},{"id":"21st:0xUrvish__list-item","t":"List item","d":"An animated list item with smooth entrance and exit effects.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"0xUrvish","st":"indexed","pl":"https://cdn.21st.dev/larsen66/list-item/default/preview.1773298916583.png","pc":"0xUrvish","tg":["list"]},{"id":"21st:0xUrvish__magnified-bento","t":"Magnified bento","d":"A bento grid with magnification effect on hover.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"0xUrvish","st":"indexed","u":53,"pl":"https://cdn.21st.dev/larsen66/magnified-bento/demos/default/preview.1773273230416.png","pc":"0xUrvish","tg":["features"]},{"id":"21st:0xUrvish__morphing-input","t":"Morphing input","d":"An input field that morphs between different states with smooth animations.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"0xUrvish","st":"rated","pl":"https://cdn.21st.dev/larsen66/morphing-input/demos/default/preview.1773274420811.png","pc":"0xUrvish","tg":["input","search"],"sc":20},{"id":"21st:0xUrvish__pricing-card","t":"Pricing card","d":"An animated pricing card with interactive hover effects.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"0xUrvish","st":"indexed","u":71,"pl":"https://cdn.21st.dev/larsen66/pricing-card/demos/default/preview.1773273314891.png","pc":"0xUrvish","tg":["pricing-section","radio-group"]},{"id":"21st:0xUrvish__smooth-dropdown","t":"Smooth dropdown","d":"A dropdown menu with smooth spring animations.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"0xUrvish","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/smooth-dropdown/demos/default/preview.1773274491397.png","pc":"0xUrvish","tg":["dropdown","menu"]},{"id":"21st:0xUrvish__stacked-list","t":"Stacked list","d":"An animated stacked list with smooth layout transitions.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"0xUrvish","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/stacked-list/default/preview.1773675563534.png","pc":"0xUrvish","tg":["list","search","team"]},{"id":"21st:0xUrvish__vertical-tabs","t":"Vertical tabs","d":"Vertical tab navigation with smooth animated transitions.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"0xUrvish","st":"indexed","u":78,"pl":"https://cdn.21st.dev/larsen66/vertical-tabs/demos/default/preview.1773273469704.png","pc":"0xUrvish","tg":["carousel","tabs"]},{"id":"21st:16inam06__chromatic-lens","t":"Chromatic lens","k":"component","s":"21st","c":"other","g":"other","a":"16inam06","st":"indexed","pl":"https://cdn.21st.dev/user_2tOlt5i3FnpF1IrqT5mMmetDCmH/chromatic-lens/interactive-web-gl-chromatic-lens/preview.png","pc":"16inam06"},{"id":"21st:1myfakename1__test","t":"Test","d":"Animated (shimmer) ASCII art in the Dots style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, card","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"1myfakename1","st":"indexed","pl":"https://cdn.21st.dev/1myfakename1/test/default/preview.1785072020153-77ce3d4a-39c6-4479-9c79-e20b19723cba.webp","pc":"1myfakename1"},{"id":"21st:21st__search-tool","t":"Search tool","d":"Render grouped search results as a collapsible tool card. State-driven (searching shimmer / done static). Provide a query and an optional results array. Self-contained port from 21","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"21st","st":"indexed","pl":"https://cdn.21st.dev/21st.dev/search-tool/default/preview.1777401827359.png","pc":"21st"},{"id":"21st:21st__thinking-tool","t":"Thinking tool","d":"Render assistant reasoning in a collapsible row. State-driven (thinking shimmer / thought static). Self-contained port from 21st.dev Agent Elements with React-only collapsible (no ","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"21st","st":"indexed","pl":"https://cdn.21st.dev/21st.dev/thinking-tool/default/preview.1777400917780.png","pc":"21st"},{"id":"21st:2301020845__asciisphere","t":"Asciisphere","d":"The characters used to render the sphere, ordered from dark to light.","k":"component","s":"21st","c":"other","g":"other","a":"2301020845","st":"indexed","pl":"https://21st.dev/@2301020845/components/asciisphere","pc":"2301020845"},{"id":"21st:3h5x__pagenotfound","t":"Pagenotfound","d":"A clean and modern 404 Not Found page built with React and Tailwind CSS.","k":"component","s":"21st","c":"other","g":"other","a":"3h5x","st":"indexed","pl":"https://cdn.21st.dev/3h5x/pagenotfound/default/preview.1748038026513.png","pc":"3h5x"},{"id":"21st:40973894__siri-wave","t":"Siri wave","d":"Siri-style GLSL shaders on a raw WebGL canvas — an iOS voice waveform with chromatic aberration and a fluid-dots metaball orb that merges, scatters and gathers. Dependency-free, tw","k":"component","s":"21st","c":"status/loader","g":"status","a":"40973894","st":"indexed","pl":"https://cdn.21st.dev/larsen66/siri-wave/default/preview.1782168892470.png","pc":"40973894","tg":["spinner"]},{"id":"21st:5d99hgrqzk-wq__manu","t":"Manu","d":"Animated WebGL shader background in the Mesh drift style. Generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"5d99hgrqzk-wq","st":"indexed","pl":"https://cdn.21st.dev/5d99hgrqzk-wq/manu/default/preview.1785609923962-605922b9-f981-4235-9d46-db4d0ce8d1af.webp","pc":"5d99hgrqzk-wq"},{"id":"21st:772984045__test","t":"Test","d":"Test for component creating process. ","k":"component","s":"21st","c":"other","g":"other","a":"772984045","st":"indexed","pl":"https://cdn.21st.dev/772984045/test/default/preview.1776064348585.png","pc":"772984045"},{"id":"21st:79198736000dan_localhost__expo-dep-chain-e2e-20260605111142","t":"Expo dep chain e2e 20260605111142","d":"E2E unlisted Expo component that imports a registry dependency.","k":"component","s":"21st","c":"other","g":"other","a":"79198736000dan_localhost","st":"indexed","pl":"https://21st.dev/@79198736000dan_localhost/components/expo-dep-chain-e2e-20260605111142","pc":"79198736000dan_localhost"},{"id":"21st:79198736000dan_localhost__expo-e2e-011649","t":"Expo e2e 011649","d":"Fresh Expo registry install smoke test component.","k":"component","s":"21st","c":"other","g":"other","a":"79198736000dan_localhost","st":"indexed","pl":"https://cdn.21st.dev/79198736000dan_localhost/expo-e2e-011649/default/preview.1780332998146.png","pc":"79198736000dan_localhost"},{"id":"21st:79198736000dan_localhost__expo-e2e-224752","t":"Expo e2e 224752","d":"Expo registry publish smoke test 224752","k":"component","s":"21st","c":"other","g":"other","a":"79198736000dan_localhost","st":"indexed","pl":"https://cdn.21st.dev/79198736000dan_localhost/expo-e2e-224752/default/preview.1780327258358.png","pc":"79198736000dan_localhost"},{"id":"21st:79198736000dan_localhost__jfajfjajfajf","t":"Jfajfjajfajf","d":"jfajfjajfajfjfajfjajfajfjfajfjajfajf","k":"component","s":"21st","c":"other","g":"other","a":"79198736000dan_localhost","st":"indexed","pl":"https://cdn.21st.dev/79198736000dan_localhost/jfajfjajfajf/default/preview.1779999779141.png","pc":"79198736000dan_localhost"},{"id":"21st:79198736000dan_localhost__test-comp","t":"Test comp","d":"fasfsatest comp","k":"component","s":"21st","c":"other","g":"other","a":"79198736000dan_localhost","st":"indexed","pl":"https://cdn.21st.dev/79198736000dan_localhost/test-comp/default/preview.1779981081355.png","pc":"79198736000dan_localhost"},{"id":"21st:7ovr__centered-nav-header","t":"Centered nav header","d":"A responsive three-column site header with the logo pinned left, navigation links centered, and a sign-in link plus primary CTA on the right, collapsing into a mobile sheet menu.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"7ovr","st":"indexed","u":18,"pl":"https://cdn.21st.dev/7ovr/centered-nav-header/default/preview.1784732440036-897e2fca-d619-4f29-ba12-df758b1a4ee8.png","pc":"7ovr","tg":["sign-in"]},{"id":"21st:7ovr__coming-soon-1","t":"Coming soon 1","d":"A centered coming-soon page with a headline, email waitlist capture form, avatar social proof, and social links.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"7ovr","st":"indexed","u":8,"pl":"https://cdn.21st.dev/7ovr/coming-soon-1/default/preview.1784348611288-4c22024a-0dce-46bc-b0cf-0cfdab198e9d.png","pc":"7ovr","tg":["link"]},{"id":"21st:7ovr__coming-soon-3","t":"Coming soon 3","d":"A coming-soon page section with a live countdown timer and an email signup form.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"7ovr","st":"indexed","u":54,"pl":"https://cdn.21st.dev/7ovr/coming-soon-3/default/preview.1784348843660-e9a739f8-be94-4482-87b8-42487d72ca99.png","pc":"7ovr"},{"id":"21st:7ovr__comparison-2","t":"Comparison 2","d":"A two-column \"Us vs. Them\" comparison section with side-by-side cards — one listing product advantages with check rows and a primary CTA, the other listing competitor pain points w","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"7ovr","st":"indexed","u":52,"pl":"https://cdn.21st.dev/7ovr/comparison-2/default/preview.1784752955610-12c2a585-4ea2-41ab-91c6-4b4f848d5b4b.png","pc":"7ovr","tg":["comparison","cta","features","pricing-section"]},{"id":"21st:7ovr__comparison-3","t":"Comparison 3","d":"A pricing plan comparison table that lays out three plans side by side with grouped feature sections, check/value cells, a sticky header and a highlighted recommended column.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"7ovr","st":"indexed","u":60,"pl":"https://cdn.21st.dev/7ovr/comparison-3/default/preview.1784806075624-0e6d2b9d-8fc9-4b87-a3e9-a1d92fd00e0b.png","pc":"7ovr","tg":["comparison","features","pricing-section","table"]},{"id":"21st:7ovr__cta-2","t":"Cta 2","d":"A centered, bordered CTA card on a muted panel with a heading, subtext, and primary and outline action buttons for marketing pages.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"7ovr","st":"indexed","pl":"https://cdn.21st.dev/7ovr/cta-2/default/preview.1784790598370-f9469528-ff95-43b8-ae7f-09a38c13f4ad.png","pc":"7ovr"},{"id":"21st:7ovr__cta-5","t":"Cta 5","d":"Split call-to-action section with an eyebrow badge, headline, supporting copy, dual buttons, and a framed faux app-screenshot card built from divs.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"7ovr","st":"indexed","pl":"https://cdn.21st.dev/7ovr/cta-5/default/preview.1784791300204-c7a82f95-8057-4cb0-bc90-2a635f4d0b10.png","pc":"7ovr"},{"id":"21st:7ovr__empty-states-1","t":"Empty states 1","d":"An inbox-zero empty state for a notifications list, with an icon, title, description, and a call-to-action button.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"7ovr","st":"indexed","u":90,"pl":"https://cdn.21st.dev/7ovr/empty-states-1/default/preview.1783730524323.png","pc":"7ovr","tg":["empty-state","notification"]},{"id":"21st:7ovr__empty-states-4","t":"Empty states 4","d":"An empty state for a failed data load, with a destructive accent and retry and contact-support actions.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"7ovr","st":"indexed","pl":"https://cdn.21st.dev/7ovr/empty-states-4/default/preview.1783731323740.png","pc":"7ovr","tg":["empty-state"]},{"id":"21st:7ovr__how-it-works-1","t":"How it works 1","d":"A three-step \"how it works\" section with numbered, icon-badged cards explaining a process from setup to results.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"7ovr","st":"indexed","u":33,"pl":"https://cdn.21st.dev/7ovr/how-it-works-1/default/preview.1784360661214-01f2d7fd-4a47-4848-b03e-8d82cc680160.png","pc":"7ovr","tg":["card","features","icon","steps"]},{"id":"21st:7ovr__how-it-works-2","t":"How it works 2","d":"A vertical timeline that stacks numbered onboarding steps down the page, each with a bordered icon circle, a connecting line, a bold title, and supporting copy.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"7ovr","st":"indexed","u":75,"pl":"https://cdn.21st.dev/7ovr/how-it-works-2/default/preview.1784360674057-83bcf60a-2129-4128-bf8a-9a08c22ba072.png","pc":"7ovr","tg":["icon","onboarding","steps","timeline"]},{"id":"21st:7ovr__logo-cloud-3","t":"Logo cloud 3","d":"An infinite auto-scrolling logo marquee with an edge fade mask and pause-on-hover, ideal for a \"trusted by\" logo cloud section.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"7ovr","st":"indexed","u":43,"pl":"https://cdn.21st.dev/7ovr/logo-cloud-3/default/preview.1784818489825-16b7379b-4ac5-4eef-b708-f1de8433f372.png","pc":"7ovr","tg":["carousel","marquee"]},{"id":"21st:7ovr__newsletter-1","t":"Newsletter 1","d":"A centered newsletter signup section with an email input, subscribe button, and marketing-consent checkbox.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"7ovr","st":"indexed","u":4,"pl":"https://cdn.21st.dev/7ovr/newsletter-1/default/preview.1784789054607-d92d6de1-3c2b-49cb-8b95-b40d10401006.png","pc":"7ovr","tg":["sign-up"]},{"id":"21st:7ovr__newsletter-2","t":"Newsletter 2","d":"A full-width horizontal newsletter band with a branding label, heading, and subtext on the left, and an inline email input with a subscribe button, consent checkbox, and privacy no","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"7ovr","st":"indexed","u":7,"pl":"https://cdn.21st.dev/7ovr/newsletter-2/default/preview.1784789337966-6b948335-22ec-4035-b704-f1307f050161.png","pc":"7ovr","tg":["sign-up"]},{"id":"21st:7ovr__page-header-1","t":"Page header 1","d":"An application page header with a title, description, and action buttons above a content grid.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"7ovr","st":"indexed","pl":"https://cdn.21st.dev/7ovr/page-header-1/default/preview.1784829949221-a005fc3c-7764-4ac0-b7de-a15bfb2a524d.png","pc":"7ovr"},{"id":"21st:7ovr__page-header-2","t":"Page header 2","d":"An application page header with breadcrumbs, a status badge, and action buttons.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"7ovr","st":"indexed","u":4,"pl":"https://cdn.21st.dev/7ovr/page-header-2/default/preview.1784766007252-7cb9943b-d6f4-4787-8dbe-c6754b45e3c0.png","pc":"7ovr","tg":["dashboard"]},{"id":"21st:7ovr__page-header-3","t":"Page header 3","d":"An application page header with a title, description, primary action button, and navigation tabs for switching between content sections.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"7ovr","st":"indexed","pl":"https://cdn.21st.dev/7ovr/page-header-3/default/preview.1784485469095-af300b6b-39db-47e3-8079-d65a1f2b250a.png","pc":"7ovr"},{"id":"21st:9898_design__thermal-receipt-card","t":"Thermal receipt card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"9898_design","st":"indexed","pl":"https://cdn.21st.dev/9898_design/thermal-receipt-card/default/preview.1786045528661-2da3284a-06fe-46f2-a488-2f0156e19d22.png","pc":"9898_design"},{"id":"21st:9fedya__love-story","t":"Love story","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 3-color palette (#007BFF, #66FF00, #00FF1E). Features: cursor-reactive (spotlight). A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"9fedya","st":"indexed","pl":"https://cdn.21st.dev/9fedya/love-story/default/preview.1786279549287-57aea6ec-7237-4fea-899e-370c8a2fdce5.webp","pc":"9fedya"},{"id":"21st:Adurotimi__save-button","t":"Save button","d":"A fun save button interaction.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Adurotimi","st":"indexed","u":191,"pl":"https://cdn.21st.dev/Adurotimi/save-button/default/preview.1785355010666-97ba732f-0dc3-4136-a5b3-88fc3371c10b.png","pc":"Adurotimi"},{"id":"21st:AliFarooqDev__navbar","t":"Navbar","d":"Here is Navbar Component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"AliFarooqDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/navbar/default/preview.1755165795175.png","pc":"AliFarooqDev","tg":["dashboard","menu","notification","navigation-menu"]},{"id":"21st:Alwurts__chat-input","t":"Chat input","d":"AI Chat Input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"Alwurts","st":"indexed","pl":"https://cdn.21st.dev/user_Alwurts/chat-input/default/preview.png","pc":"Alwurts","tg":["ai-chat","input","textarea"]},{"id":"21st:Alwurts__chat-suggestions","t":"Chat suggestions","d":"A composable set of components for displaying chat prompt suggestions as clickable buttons, ideal for onboarding or empty chat states.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"Alwurts","st":"indexed","u":42,"pl":"https://cdn.21st.dev/Alwurts/chat-suggestions/default/preview.1783696599788.png","pc":"Alwurts","tg":["ai-chat","empty-state","onboarding"]},{"id":"21st:Alwurts__model-selector","t":"Model selector","d":"Here is Model Selector Component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"Alwurts","st":"rated","u":12,"pl":"https://cdn.21st.dev/larsen66/model-selector/default/preview.1750560338575.png","pc":"Alwurts","tg":["ai-chat","select"],"sc":23},{"id":"21st:Alwurts__tool-invocation","t":"Tool invocation","d":"A composable card that displays an AI tool call with state icons (loading, success, error) and collapsible tool details showing arguments and results.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"Alwurts","st":"rated","pl":"https://cdn.21st.dev/Alwurts/tool-invocation/default/preview.1783696455812.png","pc":"Alwurts","tg":["ai-chat","card"],"sc":22},{"id":"21st:Alwurts__use-textarea-resize","t":"Use textarea resize","d":"useTextareaResize","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"Alwurts","st":"rated","pl":"https://cdn.21st.dev/user_Alwurts/use-textarea-resize/default/preview.png","pc":"Alwurts","tg":["hook","textarea"],"sc":20},{"id":"21st:Astryxdesign__astryx-aspect-ratio","t":"Astryx aspect ratio","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-aspect-ratio","pc":"Astryxdesign","tg":["gallery","grid","image"]},{"id":"21st:Astryxdesign__astryx-avatar","t":"Astryx avatar","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-avatar","pc":"Astryxdesign","tg":["avatar","profile","team"]},{"id":"21st:Astryxdesign__astryx-avatar-group","t":"Astryx avatar group","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-avatar-group","pc":"Astryxdesign","tg":["avatar","profile","team"]},{"id":"21st:Astryxdesign__astryx-avatar-status-dot","t":"Astryx avatar status dot","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-avatar-status-dot","pc":"Astryxdesign"},{"id":"21st:Astryxdesign__astryx-badge","t":"Astryx badge","d":"Badge highlights a short status, count, or category label, from Meta's Astryx design system. Ships semantic variants (neutral, info, success, warning, error) plus a full color pale","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"Astryxdesign","st":"indexed","u":4,"pl":"https://21st.dev/@Astryxdesign/components/astryx-badge","pc":"Astryxdesign","tg":["badge"]},{"id":"21st:Astryxdesign__astryx-banner","t":"Astryx banner","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-banner","pc":"Astryxdesign","tg":["announcement","alert","list","notification"]},{"id":"21st:Astryxdesign__astryx-blockquote","t":"Astryx blockquote","d":"Blockquote displays quoted content, testimonials, or excerpts with an accent-colored left border and secondary text color, from Meta's Astryx design system. Renders semantic <block","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"Astryxdesign","st":"indexed","u":4,"pl":"https://21st.dev/@Astryxdesign/components/astryx-blockquote","pc":"Astryxdesign"},{"id":"21st:Astryxdesign__astryx-breadcrumbs","t":"Astryx breadcrumbs","d":"Breadcrumbs show the user's location in a hierarchy and let them navigate back up, from Meta's Astryx design system. Compose BreadcrumbItem children with links, icons, or onClick h","k":"component","s":"21st","c":"media/icon","g":"media","a":"Astryxdesign","st":"indexed","u":2,"pl":"https://21st.dev/@Astryxdesign/components/astryx-breadcrumbs","pc":"Astryxdesign","tg":["icon","link","navigation-menu"]},{"id":"21st:Astryxdesign__astryx-button","t":"Astryx button","d":"Button triggers actions with a clear visual hierarchy, from Meta's Astryx design system. Variants: primary, secondary, ghost, destructive; sizes sm/md/lg; disabled and loading stat","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Astryxdesign","st":"indexed","u":2,"pl":"https://21st.dev/@Astryxdesign/components/astryx-button","pc":"Astryxdesign","tg":["button"]},{"id":"21st:Astryxdesign__astryx-button-group","t":"Astryx button group","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-button-group","pc":"Astryxdesign","tg":["button"]},{"id":"21st:Astryxdesign__astryx-toggle-button","t":"Astryx toggle button","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"Astryxdesign","st":"indexed","pl":"https://21st.dev/@Astryxdesign/components/astryx-toggle-button","pc":"Astryxdesign","tg":["notification"]},{"id":"21st:BelkacemYerfa__datetime-picker","t":"Datetime picker","d":"A customized datetime picker component.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"BelkacemYerfa","st":"indexed","u":170,"pl":"https://cdn.21st.dev/user_BelkacemYerfa/datetime-picker.png","pc":"BelkacemYerfa","tg":["date-picker"]},{"id":"21st:Codehagen__action-button","t":"Action button","d":"A versatile button component with built-in loading state and smooth transitions for handling asynchronous actions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Codehagen","st":"indexed","u":64,"pl":"https://cdn.21st.dev/user_Codehagen/action-button.png","pc":"Codehagen"},{"id":"21st:Codehagen__button-group","t":"Button group","d":"A versatile button group component for organizing related actions with consistent spacing and visual connection.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Codehagen","st":"indexed","pl":"https://cdn.21st.dev/user_Codehagen/button-group.png","pc":"Codehagen"},{"id":"21st:Codehagen__button-group-with-icons","t":"Button group with icons","d":"A versatile button group component for organizing related actions with consistent spacing and visual connection.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Codehagen","st":"indexed","u":33,"pl":"https://cdn.21st.dev/user_Codehagen/button-group-with-icons.png","pc":"Codehagen"},{"id":"21st:Codehagen__display-cards","t":"Display cards","d":"A visually appealing stacked card layout with hover animations and grayscale effects.\n\nFeatures:\n\t•\tStacked card layout\n\t•\tHover animations\n\t•\tGrayscale effects\n\t•\tCustom icons\n\t•\t","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"Codehagen","st":"indexed","u":2561,"pl":"https://cdn.21st.dev/user_Codehagen/display-cards.png","pc":"Codehagen","tg":["grid","image"]},{"id":"21st:Codehagen__expandable-card","t":"Expandable card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"Codehagen","st":"indexed","pl":"https://cdn.21st.dev/user_Codehagen/expandable-card.png","pc":"Codehagen"},{"id":"21st:Codehagen__floating-action-panel","t":"Floating action panel","d":"A versatile floating action panel component with support for multiple triggers and modes.\n\nFeatures:\n\t•\tMultiple trigger buttons with different modes\n\t•\tSmooth animations using Fra","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"Codehagen","st":"indexed","u":106,"pl":"https://cdn.21st.dev/user_Codehagen/floating-action-panel.png","pc":"Codehagen","tg":["menu"]},{"id":"21st:Codehagen__hero","t":"Hero","d":"Hero Section with Appear Animation and Hero Badge","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"Codehagen","st":"indexed","u":389,"pl":"https://cdn.21st.dev/user_Codehagen/hero.png","pc":"Codehagen"},{"id":"21st:Codehagen__hero-badge","t":"Hero badge","d":"A versatile, animated badge component for highlighting new features, announcements, or important links.\n\nFeatures:\n\t•\tSmooth entrance animations\n\t•\tIcon rotation on hover\n\t•\tMultip","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"Codehagen","st":"indexed","u":432,"pl":"https://cdn.21st.dev/user_Codehagen/hero-badge.png","pc":"Codehagen","tg":["announcement"]},{"id":"21st:Codehagen__hero-pill","t":"Hero pill","d":"A stunning and interactive announcement banner featuring smooth animations and customizable content.\n\nFeatures:\n\t•\tFluid entrance animations\n\t•\tCustomizable content and styling opt","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"Codehagen","st":"indexed","u":377,"pl":"https://cdn.21st.dev/user_Codehagen/hero-pill.png","pc":"Codehagen","tg":["announcement"]},{"id":"21st:Codehagen__icons","t":"Icons","d":"Extension of Shadcn icons with Prism UI logo, chevron right, book, and component icons.","k":"component","s":"21st","c":"media/icon","g":"media","a":"Codehagen","st":"indexed","u":67,"pl":"https://cdn.21st.dev/user_Codehagen/icons.png","pc":"Codehagen","tg":["grid","icon"]},{"id":"21st:Codehagen__logo-carousel","t":"Logo carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"Codehagen","st":"indexed","pl":"https://cdn.21st.dev/user_Codehagen/logo-carousel.png","pc":"Codehagen"},{"id":"21st:Codehagen__open-source","t":"Open source","k":"component","s":"21st","c":"other","g":"other","a":"Codehagen","st":"indexed","pl":"https://cdn.21st.dev/user_Codehagen/open-source.png","pc":"Codehagen"},{"id":"21st:Codehagen__popover","t":"Popover","d":"A versatile popover component for displaying contextual content, forms, and interactive menus with smooth animations.\n\nFeatures:\n\t•\tSmooth open and close animations\n\t•\tForm handlin","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"Codehagen","st":"indexed","u":68,"pl":"https://cdn.21st.dev/user_Codehagen/popover.png","pc":"Codehagen","tg":["menu","popover","textarea"]},{"id":"21st:Codehagen__previous-next-button-group","t":"Previous next button group","d":"A versatile button group component for organizing related actions with consistent spacing and visual connection.\n","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"Codehagen","st":"indexed","u":47,"pl":"https://cdn.21st.dev/user_Codehagen/previous-next-button-group.png","pc":"Codehagen","tg":["navigation-menu","pagination"]},{"id":"21st:Codehagen__pricing","t":"Pricing","d":"A dynamic pricing section with animated cards, confetti effects, and monthly/yearly toggle.\n\nFeatures:\n\t•\tAnimated pricing cards using Framer Motion\n\t•\tInteractive monthly/yearly p","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"Codehagen","st":"indexed","u":1988,"pl":"https://cdn.21st.dev/user_Codehagen/pricing.png","pc":"Codehagen","tg":["pricing-section","table"]},{"id":"21st:Codehagen__timeline","t":"Timeline","d":"Here is modern minimalistic timeline component","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"Codehagen","st":"indexed","u":38,"pl":"https://cdn.21st.dev/larsen66/timeline/default/preview.1749983669098.png","pc":"Codehagen","tg":["date-picker","timeline"]},{"id":"21st:Codehagen__use-expandable","t":"Use expandable","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"Codehagen","st":"indexed","pl":"https://cdn.21st.dev/user_Codehagen/use-expandable.png","pc":"Codehagen","tg":["hook"]},{"id":"21st:DanielWhit21874__slot-text","t":"Slot text","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"DanielWhit21874","st":"indexed","pl":"https://cdn.21st.dev/larsen66/slot-text/default/preview.1782168587561.png","pc":"DanielWhit21874","tg":["number"]},{"id":"21st:Daniela_Muntyan__shader-clock","t":"Shader clock","d":"Here is Shader Clock component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"Daniela_Muntyan","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/shader-clock/default/preview.1756200304206.png","pc":"Daniela_Muntyan"},{"id":"21st:Edil-ozi__accordion","t":"Accordion","d":"$36","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/accordion.png","pc":"Edil-ozi"},{"id":"21st:Edil-ozi__custom-checkbox","t":"Custom checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/custom-checkbox.png","pc":"Edil-ozi","tg":["checkbox"]},{"id":"21st:Edil-ozi__drawer","t":"Drawer","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/drawer.png","pc":"Edil-ozi"},{"id":"21st:Edil-ozi__horizontal-scroll-carousel","t":"Horizontal scroll carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/horizontal-scroll-carousel.png","pc":"Edil-ozi"},{"id":"21st:Edil-ozi__infinite-scroll","t":"Infinite scroll","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/infinite-scroll.png","pc":"Edil-ozi"},{"id":"21st:Edil-ozi__pricing-card","t":"Pricing card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"Edil-ozi","st":"indexed","pl":"https://cdn.21st.dev/user_Edil_ozi/pricing-card.png","pc":"Edil-ozi"},{"id":"21st:Edil-ozi__scroll-velocity","t":"Scroll velocity","d":"A dynamic scrolling component that creates an infinite horizontal scroll effect, responding to vertical scroll velocity. The component can display both images and text in a continu","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"Edil-ozi","st":"indexed","u":221,"pl":"https://cdn.21st.dev/user_Edil_ozi/scroll-velocity.png","pc":"Edil-ozi","tg":["gallery","marquee","scroll-area"]},{"id":"21st:Edil-ozi__toggle","t":"Toggle","d":"A collection of customizable toggle switch components built with React and Tailwind CSS.\n\nFeatures\n- Minimal and Orange toggle variants\n- Dark mode support\n- Smooth transitions and","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"Edil-ozi","st":"indexed","u":58,"pl":"https://cdn.21st.dev/user_Edil_ozi/toggle.png","pc":"Edil-ozi"},{"id":"21st:ElevenLabs-crawled__audio-player","t":"Audio player","k":"component","s":"21st","c":"media/player","g":"media","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/audio-player","pc":"ElevenLabs-crawled"},{"id":"21st:ElevenLabs-crawled__bar-visualizer","t":"Bar visualizer","d":"Here is Bar Visualizer component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ElevenLabs-crawled","st":"indexed","u":20,"pl":"https://21st.dev/@ElevenLabs-crawled/components/bar-visualizer","pc":"ElevenLabs-crawled","tg":["data-visualization"]},{"id":"21st:ElevenLabs-crawled__conversation-bar","t":"Conversation bar","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/conversation-bar","pc":"ElevenLabs-crawled"},{"id":"21st:ElevenLabs-crawled__live-waveform","t":"Live waveform","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/live-waveform","pc":"ElevenLabs-crawled"},{"id":"21st:ElevenLabs-crawled__orb","t":"Orb","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/orb","pc":"ElevenLabs-crawled","tg":["ai-chat","data-visualization"]},{"id":"21st:ElevenLabs-crawled__response","t":"Response","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/response","pc":"ElevenLabs-crawled","tg":["ai-chat","table"]},{"id":"21st:ElevenLabs-crawled__shimmering-text","t":"Shimmering text","d":"Here is Shimmering Text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ElevenLabs-crawled","st":"indexed","u":28,"pl":"https://21st.dev/@ElevenLabs-crawled/components/shimmering-text","pc":"ElevenLabs-crawled","tg":["text"]},{"id":"21st:ElevenLabs-crawled__voice-button","t":"Voice button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/voice-button","pc":"ElevenLabs-crawled","tg":["button"]},{"id":"21st:ElevenLabs-crawled__voice-picker","t":"Voice picker","d":"Here is Voice Picker component ","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ElevenLabs-crawled","st":"indexed","u":30,"pl":"https://21st.dev/@ElevenLabs-crawled/components/voice-picker","pc":"ElevenLabs-crawled","tg":["dropdown","search","select"]},{"id":"21st:ElevenLabs-crawled__waveform","t":"Waveform","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ElevenLabs-crawled","st":"indexed","pl":"https://21st.dev/@ElevenLabs-crawled/components/waveform","pc":"ElevenLabs-crawled"},{"id":"21st:Jakubantalik__border-beam","t":"Border beam","d":"Animated border beam effect for React. Wraps any element with a traveling, hue-shifting glow around its border. This demo shows an AI chat/prompt composer with the medium full-bord","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"Jakubantalik","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/border-beam/default/preview.1784821898513-f511c350-3572-42df-b53b-dd672c0c03b4.png","pc":"Jakubantalik","tg":["ai-chat","border","input"]},{"id":"21st:Jakubantalik__border-beam-button","t":"Border beam button","d":"Animated border beam effect for React, sized for a compact button. The small preset wraps an icon button with a tight traveling glow around its border.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"Jakubantalik","st":"indexed","pl":"https://cdn.21st.dev/larsen66/border-beam-button/default/preview.1784821973451-cadceffc-29d6-4ccd-813b-c2c73545667b.png","pc":"Jakubantalik","tg":["border"]},{"id":"21st:Jakubantalik__border-beam-search","t":"Border beam search","d":"Animated border beam effect for React using the line preset — a bottom-only traveling glow that sweeps along the edge. This demo wraps a rounded search bar.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"Jakubantalik","st":"indexed","pl":"https://cdn.21st.dev/larsen66/border-beam-search/default/preview.1784822047352-08628714-513a-47da-95b0-e84e5a02c62a.png","pc":"Jakubantalik","tg":["border","input","search"]},{"id":"21st:Jakubantalik__metal-fx","t":"Metal fx","d":"Animated liquid-metal border effect (metal-fx). Wrap any element — a button, link, or icon — with a live metallic ring driven by a shared WebGL renderer. Three presets (chromatic, ","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"Jakubantalik","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/metal-fx/default/preview.1784811845606-4152d854-5950-417c-8982-3294e2effcd5.png","pc":"Jakubantalik","tg":["ai-chat"]},{"id":"21st:Jakubantalik__metal-upgrade-button","t":"Metal upgrade button","d":"An \"Upgrade to Pro\" CTA with an animated liquid-metal ring (metal-fx). The pill button variant sits in a toolbar next to a search field and a menu button, which pick up a soft meta","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"Jakubantalik","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/metal-upgrade-button/default/preview.1784817621972-573b6e70-7e41-4044-a760-ba4df49631f5.png","pc":"Jakubantalik","tg":["cta"]},{"id":"21st:Jakubantalik__thinking-orbs","t":"Thinking orbs","d":"Animated thinking/agent orb — six hand-tuned canvas states (working, searching, solving, listening, composing, shaping) in two tuned size presets (64px avatar / 20px inline). Theme","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"Jakubantalik","st":"indexed","pl":"https://cdn.21st.dev/larsen66/thinking-orbs/default/preview.1784821158925-d17110fb-ed38-4c31-b3b5-181d4844484b.png","pc":"Jakubantalik","tg":["ai-chat"]},{"id":"21st:JurreHoutkamp__hover-zoom","t":"Hover zoom","d":"Here is Hover Zoom component ","k":"component","s":"21st","c":"other","g":"other","a":"JurreHoutkamp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hover-zoom/default/preview.1754048155741.png","pc":"JurreHoutkamp"},{"id":"21st:JurreHoutkamp__text-glow-hover","t":"Text glow hover","d":"Here is Text Glow Hover component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"JurreHoutkamp","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/text-glow-hover/default/preview.1754047216452.png","pc":"JurreHoutkamp","tg":["text"]},{"id":"21st:JurreHoutkamp__tilt-card","t":"Tilt card","d":"Here is Tilt Card component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"JurreHoutkamp","st":"indexed","u":46,"pl":"https://cdn.21st.dev/larsen66/tilt-card/default/preview.1754050603084.png","pc":"JurreHoutkamp","tg":["image"]},{"id":"21st:KaraBharat__multi-select-combobox","t":"Multi select combobox","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"KaraBharat","st":"rated","pl":"https://cdn.21st.dev/user_KaraBharat/multi-select-combobox.png","pc":"KaraBharat","sc":19},{"id":"21st:KarrixLee__unsave-popup","t":"Unsave popup","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"KarrixLee","st":"rated","pl":"https://cdn.21st.dev/user_KarrixLee/unsave-popup/default/preview.png","pc":"KarrixLee","tg":["alert"],"sc":20},{"id":"21st:LegionWebDev__area-chart","t":"Area chart","d":"Here is Area Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/area-chart/default/preview.1753711522753.png","pc":"LegionWebDev","tg":["data-visualization","dashboard","tooltip"]},{"id":"21st:LegionWebDev__background","t":"Background","d":"An SVG pattern background for Recharts charts with dots, grid, cross-hatch, diagonal lines and other decorative variants, plus a soft edge fade.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/LegionWebDev/background/default/preview.1784720456440-15719443-fc3f-41c2-8eda-6df908c20e4b.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__bar-chart","t":"Bar chart","d":"Here is Bar Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","u":174,"pl":"https://cdn.21st.dev/larsen66/bar-chart/default/preview.1753707447257.png","pc":"LegionWebDev","tg":["badge","data-visualization","dashboard","tooltip"]},{"id":"21st:LegionWebDev__bar-chart--duotone-bar-chart","t":"Duotone bar chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bar-chart/duotone-bar-chart/preview.1753708744067.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__cpu-architecture","t":"Cpu architecture","d":"A simple CPU architecture animation","k":"component","s":"21st","c":"other","g":"other","a":"LegionWebDev","st":"rated","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/cpu-architecture/default/preview.png","pc":"LegionWebDev","sc":19},{"id":"21st:LegionWebDev__database-with-rest-api","t":"Database with rest api","d":"Presentation of a Database with a REST API","k":"component","s":"21st","c":"other","g":"other","a":"LegionWebDev","st":"rated","pl":"https://cdn.21st.dev/user_LegionWebDev/database-with-rest-api/default/preview.png","pc":"LegionWebDev","sc":21},{"id":"21st:LegionWebDev__legion-web-dev","t":"Legion web dev","d":"Keyboard which glows on hover","k":"component","s":"21st","c":"other","g":"other","a":"LegionWebDev","st":"indexed","u":10,"pl":"https://cdn.21st.dev/user_LegionWebDev/legion-web-dev/default/preview.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__line-chart","t":"Line chart","d":"Here is Line Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/line-chart/default/preview.1753713042656.png","pc":"LegionWebDev","tg":["data-visualization","dashboard"]},{"id":"21st:LegionWebDev__line-chart--glowing-line-chart","t":"Glowing line chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/line-chart/glowing-line-chart/preview.1753713042656.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__line-chart--pinging-dot-chart","t":"Pinging dot chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/line-chart/pinging-dot-chart/preview.1753713042657.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__pie-chart","t":"Pie chart","d":"Here is Pie Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pie-chart/default/preview.1753713845643.png","pc":"LegionWebDev","tg":["data-visualization","dashboard"]},{"id":"21st:LegionWebDev__pie-chart--radial-chart","t":"Radial chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pie-chart/radial-chart/preview.1753713845643.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__pie-chart--sized-pie-chart","t":"Sized pie chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pie-chart/sized-pie-chart/preview.1753713845643.png","pc":"LegionWebDev"},{"id":"21st:LegionWebDev__radar-chart","t":"Radar chart","d":"Here is Radar Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"LegionWebDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radar-chart/default/preview.1753714928416.png","pc":"LegionWebDev","tg":["data-visualization"]},{"id":"21st:OrcDev__8bit-menubar","t":"8bit menubar","d":"Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus, with checkbox/radio items and submenus. Built on Radix Menubar (clean source).","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"OrcDev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-menubar/default/preview.1780150144699.png","pc":"OrcDev"},{"id":"21st:RayMethula__brands","t":"Brands","d":"Brands section","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"RayMethula","st":"indexed","pl":"https://cdn.21st.dev/user_RayMethula/brands/default/preview.png","pc":"RayMethula"},{"id":"21st:RayMethula__footer","t":"Footer","d":"Fotter with links","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"RayMethula","st":"indexed","u":194,"pl":"https://cdn.21st.dev/user_RayMethula/footer/default/preview.png","pc":"RayMethula","tg":["footer","link"]},{"id":"21st:RayMethula__testimonial","t":"Testimonial","d":"Block with one testimonial","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"RayMethula","st":"indexed","u":115,"pl":"https://cdn.21st.dev/user_RayMethula/testimonial/default/preview.png","pc":"RayMethula","tg":["avatar","testimonials"]},{"id":"21st:RayMethula__testimonial-carousel","t":"Testimonial carousel","d":"Testimonial Carousel with company logo and avatar ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"RayMethula","st":"indexed","u":120,"pl":"https://cdn.21st.dev/user_RayMethula/testimonial-carousel/default/preview.png","pc":"RayMethula","tg":["carousel","testimonials"]},{"id":"21st:ShadcnStudio__accordion-1","t":"Accordion 1","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ShadcnStudio","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/accordion-1/default/preview.1760374725373.png","pc":"ShadcnStudio","tg":["accordion","faq","icon"]},{"id":"21st:ShadcnStudio__basic-avatar","t":"Basic avatar","d":"Here is Avatar component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ShadcnStudio","st":"indexed","u":52,"pl":"https://cdn.21st.dev/larsen66/basic-avatar/default/preview.1760378667824.png","pc":"ShadcnStudio","tg":["badge","avatar","dropdown","notification"]},{"id":"21st:ShadcnStudio__breadrcrumb","t":"Breadrcrumb","d":"Here is Breadrcrumb component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ShadcnStudio","st":"indexed","u":62,"pl":"https://cdn.21st.dev/larsen66/breadrcrumb/default/preview.1760380176747.png","pc":"ShadcnStudio","tg":["badge","dropdown","icon","link"]},{"id":"21st:ShadcnStudio__button-group","t":"Button group","d":"Here is Button Group component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-group/default/preview.1760455322557.png","pc":"ShadcnStudio","tg":["button","link","tooltip"]},{"id":"21st:ShadcnStudio__buttons","t":"Buttons","d":"Here is Buttons Components","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ShadcnStudio","st":"indexed","u":73,"pl":"https://cdn.21st.dev/larsen66/buttons/default/preview.1760425218250.png","pc":"ShadcnStudio","tg":["badge","avatar","button","cta"]},{"id":"21st:ShadcnStudio__calendar-1","t":"Calendar 1","d":"Here is Calendar  component ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ShadcnStudio","st":"indexed","u":56,"pl":"https://cdn.21st.dev/larsen66/calendar-1/default/preview.1760457561200.png","pc":"ShadcnStudio","tg":["calendar","date-picker","list","navigation-menu"]},{"id":"21st:ShadcnStudio__card-studio","t":"Card studio","d":"Here is Card component ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ShadcnStudio","st":"indexed","u":44,"pl":"https://cdn.21st.dev/larsen66/card-studio/default/preview.1760510314037.png","pc":"ShadcnStudio","tg":["badge","avatar","card","cta"]},{"id":"21st:ShadcnStudio__checkbox-1","t":"Checkbox 1","d":"Here is Checkbox component ","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-1/default/preview.1760512663280.png","pc":"ShadcnStudio","tg":["badge","border","checkbox","file-tree"]},{"id":"21st:ShadcnStudio__collapsible-1","t":"Collapsible 1","d":"Collapsible","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/collapsible-1/default/preview.1760514342988.png","pc":"ShadcnStudio","tg":["file-tree","faq","list","profile"]},{"id":"21st:ShadcnStudio__combobox","t":"Combobox","d":"Here is Combobox component ","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ShadcnStudio","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/combobox/default/preview.1760515798530.png","pc":"ShadcnStudio","tg":["badge","avatar","dropdown","form"]},{"id":"21st:ShadcnStudio__input-otps","t":"Input otps","d":"Here is Input OTP component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/input-otps/default/preview.1760517334927.png","pc":"ShadcnStudio","tg":["form","input"]},{"id":"21st:ShadcnStudio__radio-group-1","t":"Radio group 1","d":"Here is Radio Group component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-1/default/preview.1761028811506.png","pc":"ShadcnStudio","tg":["badge","card","border","chip"]},{"id":"21st:ShadcnStudio__switch-1","t":"Switch 1","d":"Here is Switch component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ShadcnStudio","st":"indexed","u":36,"pl":"https://cdn.21st.dev/larsen66/switch-1/default/preview.1760584544924.png","pc":"ShadcnStudio","tg":["card","form","icon","list"]},{"id":"21st:ShadcnStudio__text-area","t":"Text area","d":"Here is Textarea component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ShadcnStudio","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-area/default/preview.1760583376921.png","pc":"ShadcnStudio","tg":["form","icon","input","textarea"]},{"id":"21st:Shatlyk1011__3d-marquee","t":"3d marquee","d":"A 3D perspective marquee that displays a grid of images with continuous scrolling animation.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"Shatlyk1011","st":"indexed","u":58,"pl":"https://cdn.21st.dev/larsen66/3d-marquee/demos/default/preview.1773183875427.png","pc":"Shatlyk1011","tg":["gallery","marquee"]},{"id":"21st:Shatlyk1011__animated-dropdown","t":"Animated dropdown","d":"A dropdown menu with smooth expand/collapse animations and click-outside handling.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"Shatlyk1011","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/animated-dropdown/demos/default/preview.1773184049188.png","pc":"Shatlyk1011","tg":["dropdown","menu","select"]},{"id":"21st:Shatlyk1011__button-colorful","t":"Button colorful","d":"A button with an animated gradient background that glows through cyan, blue, and purple.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Shatlyk1011","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/button-colorful/demos/default/preview.1773180495673.png","pc":"Shatlyk1011"},{"id":"21st:Shatlyk1011__fancy-text-hover","t":"Fancy text hover","d":"Text with fancy hover animation effects powered by GSAP.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"Shatlyk1011","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/fancy-text-hover/demos/default/preview.1773184503639.png","pc":"Shatlyk1011","tg":["link","text"]},{"id":"21st:Shatlyk1011__gradient-borders-button","t":"Gradient borders button","d":"A button with animated radial gradient borders that glow on hover. Pill-shaped with emerald accent.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"Shatlyk1011","st":"indexed","u":42,"pl":"https://cdn.21st.dev/larsen66/gradient-borders-button/demos/default/preview.1773180369585.png","pc":"Shatlyk1011","tg":["border"]},{"id":"21st:Shatlyk1011__hover-border-gradient","t":"Hover border gradient","d":"A button with a rotating border gradient that highlights on hover with a blue radial glow.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"Shatlyk1011","st":"indexed","u":74,"pl":"https://cdn.21st.dev/larsen66/hover-border-gradient/demos/default/preview.1773180541153.png","pc":"Shatlyk1011","tg":["border"]},{"id":"21st:Shatlyk1011__interactive-hover-button","t":"Interactive hover button","d":"A button with expanding dot animation, loading state with spinner, and success checkmark. Multi-state interactive component.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Shatlyk1011","st":"indexed","u":49,"pl":"https://cdn.21st.dev/larsen66/interactive-hover-button/demos/default/preview.1773180586970.png","pc":"Shatlyk1011"},{"id":"21st:Shatlyk1011__link-hover","t":"Link hover","d":"Navigation links with creative hover animations powered by GSAP.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"Shatlyk1011","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/link-hover/demos/default/preview.1773184612103.png","pc":"Shatlyk1011","tg":["link"]},{"id":"21st:Shatlyk1011__motion-button","t":"Motion button","d":"An animated CTA button with expanding circle background and arrow icon on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Shatlyk1011","st":"indexed","u":62,"pl":"https://cdn.21st.dev/larsen66/motion-button/demos/default/preview.1773180452842.png","pc":"Shatlyk1011","tg":["button","cta"]},{"id":"21st:Shatlyk1011__shimmer-button","t":"Shimmer button","d":"An animated button with a shimmer gradient effect that moves across the surface. Supports dark mode.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Shatlyk1011","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/shimmer-button/demos/default/preview.1773180285342.png","pc":"Shatlyk1011"},{"id":"21st:Shatlyk1011__shiny-button","t":"Shiny button","d":"A button with a vivid gradient background and glowing shadow effect on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"Shatlyk1011","st":"indexed","u":49,"pl":"https://cdn.21st.dev/larsen66/shiny-button/demos/default/preview.1773180328519.png","pc":"Shatlyk1011","tg":["button"]},{"id":"21st:Shatlyk1011__social-button","t":"Social button","d":"An expandable share button that reveals social media icons (Twitter, Instagram, LinkedIn) and copy link with smooth spring animations.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"Shatlyk1011","st":"indexed","pl":"https://cdn.21st.dev/larsen66/social-button/demos/default/preview.1773180631640.png","pc":"Shatlyk1011"},{"id":"21st:Shatlyk1011__team-member-card","t":"Team member card","d":"An animated team member card with hover effects revealing social links and role details.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"Shatlyk1011","st":"indexed","u":42,"pl":"https://cdn.21st.dev/larsen66/team-member-card/demos/default/preview.1773183232240.png","pc":"Shatlyk1011","tg":["link","profile","team"]},{"id":"21st:Shatlyk1011__typing-effect","t":"Typing effect","d":"A text component that types out words one character at a time with a blinking cursor, cycling through a list of strings.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"Shatlyk1011","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/typing-effect/demos/default/preview.1773182870145.png","pc":"Shatlyk1011","tg":["text"]},{"id":"21st:Shonazarov__liquid-glass-toggle","t":"Liquid glass toggle","d":"Ultra-realistic 3D mirror glass sphere liquid theme toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"Shonazarov","st":"indexed","pl":"https://cdn.21st.dev/dierbeksonazarov01/liquid-glass-toggle/default/preview.1786249308370-9b5e9dd8-8d3a-4b87-81c0-d44e55526e0b.png","pc":"Shonazarov"},{"id":"21st:Shonazarov__red-spider-cursor","t":"Red spider cursor","d":"Ultra-fast crimson neon spider cursor with 1200 web nodes and click vibration impulse","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"Shonazarov","st":"indexed","pl":"https://cdn.21st.dev/Shonazarov/red-spider-cursor/default/preview.1786250825589-2ce96338-bbf8-4058-acea-32508f791932.png","pc":"Shonazarov"},{"id":"21st:Smit-Prajapati__glass-card","t":"Glass card","d":"Here is modern glass 3d card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"Smit-Prajapati","st":"indexed","u":179,"pl":"https://cdn.21st.dev/larsen66/glass-card/default/preview.1749424470712.png","pc":"Smit-Prajapati","tg":["card","link"]},{"id":"21st:SubframeApp__accordion-1","t":"Accordion 1","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/accordion-1/default/preview.1755894159151.png","pc":"SubframeApp","tg":["accordion"]},{"id":"21st:SubframeApp__alert","t":"Alert","d":"Here is Alert component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/alert/default/preview.1755894585187.png","pc":"SubframeApp","tg":["alert","notification"]},{"id":"21st:SubframeApp__area-chart","t":"Area chart","d":"Here is Area Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/area-chart/default/preview.1755894946108.png","pc":"SubframeApp","tg":["data-visualization","dashboard"]},{"id":"21st:SubframeApp__avatar-2","t":"Avatar 2","d":"Here is Avatar component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"SubframeApp","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/avatar-2/default/preview.1755901526912.png","pc":"SubframeApp","tg":["avatar","image","profile"]},{"id":"21st:SubframeApp__bar-chart","t":"Bar chart","d":"Here is Bar Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bar-chart/default/preview.1755897555243.png","pc":"SubframeApp","tg":["data-visualization","tooltip"]},{"id":"21st:SubframeApp__breadcrumb","t":"Breadcrumb","d":"Here is Breadcrumb component","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"SubframeApp","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/breadcrumb/default/preview.1755898058615.png","pc":"SubframeApp"},{"id":"21st:SubframeApp__calendar-1","t":"Calendar 1","d":"here is Calendar component ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-1/default/preview.1755898544573.png","pc":"SubframeApp","tg":["calendar","date-picker"]},{"id":"21st:SubframeApp__checkbox-1","t":"Checkbox 1","d":"Here is Checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-1/default/preview.1755898915740.png","pc":"SubframeApp","tg":["checkbox","form"]},{"id":"21st:SubframeApp__checkbox-card","t":"Checkbox card","d":"Here is Checkbox Card component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-card/default/preview.1755899226314.png","pc":"SubframeApp","tg":["checkbox","image"]},{"id":"21st:SubframeApp__checkbox-group-1","t":"Checkbox group 1","d":"Here is Checkbox Group component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-group-1/default/preview.1755899686611.png","pc":"SubframeApp","tg":["checkbox","form"]},{"id":"21st:SubframeApp__context-menu-1","t":"Context menu 1","d":"Here is Context Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"SubframeApp","st":"indexed","pl":"https://cdn.21st.dev/larsen66/context-menu-1/default/preview.1755899846139.png","pc":"SubframeApp","tg":["menu"]},{"id":"21st:SubframeApp__pagination","t":"Pagination","d":"Here is Pagination component","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"SubframeApp","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/pagination/default/preview.1755885639857.png","pc":"SubframeApp","tg":["navigation-menu","pagination"]},{"id":"21st:TomIsLoading__clip-path-links","t":"Clip path links","d":"The LinkBox component displays either an icon or image inside a styled grid item.\nOn hover, it animates a dark overlay from the nearest edge using clip-path with Framer Motion.\nIt'","k":"component","s":"21st","c":"actions/link","g":"actions","a":"TomIsLoading","st":"indexed","u":72,"pl":"https://cdn.21st.dev/kamaleshsa/clip-path-links/default/preview.1748115287870.png","pc":"TomIsLoading","tg":["link"]},{"id":"21st:TomIsLoading__kanban","t":"Kanban","d":"here is interactive kanban board","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"TomIsLoading","st":"indexed","u":113,"pl":"https://cdn.21st.dev/larsen66/kanban/default/preview.1747857346662.png","pc":"TomIsLoading","tg":["dashboard"]},{"id":"21st:TomIsLoading__reveal-links","t":"Reveal links","d":"a reveal links interactive component","k":"component","s":"21st","c":"actions/link","g":"actions","a":"TomIsLoading","st":"indexed","u":44,"pl":"https://cdn.21st.dev/larsen66/reveal-links/default/preview.1747858395090.png","pc":"TomIsLoading","tg":["link"]},{"id":"21st:TomIsLoading__squishy-card","t":"Squishy card","d":"here is dynamic card","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"TomIsLoading","st":"indexed","pl":"https://cdn.21st.dev/larsen66/squishy-card/default/preview.1747857814520.png","pc":"TomIsLoading","tg":["pricing-section"]},{"id":"21st:TomIsLoading__vertical-accordion","t":"Vertical accordion","d":"here is interactive vertical accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"TomIsLoading","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/vertical-accordion/default/preview.1747857584662.png","pc":"TomIsLoading","tg":["accordion"]},{"id":"21st:a.karamooz3232__cinematic-product-scroll-section","t":"Cinematic product scroll section","d":"A premium e-commerce section featuring scroll-linked grayscale-to-color masks, a cinematic text hero, and an interactive horizontal slider with circular hover reveal cards.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"a.karamooz3232","st":"indexed","u":7,"pl":"https://cdn.21st.dev/a.karamooz3232/cinematic-product-scroll-section/default/preview.1783347953984.png","pc":"a.karamooz3232","tg":["hero","scroll-area"]},{"id":"21st:a.tkachenko84__111","t":"111","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards","k":"component","s":"21st","c":"media/player","g":"media","a":"a.tkachenko84","st":"indexed","pl":"https://cdn.21st.dev/a.tkachenko84/111/default/preview.1784341295361-966336d7-28cb-4c57-beee-3869f7df1320.webp","pc":"a.tkachenko84","tg":["video"]},{"id":"21st:aadarshsingh121__counter","t":"Counter","d":"this is counter","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"aadarshsingh121","st":"indexed","pl":"https://cdn.21st.dev/aadarshsingh121/counter/default/preview.1749498639395.png","pc":"aadarshsingh121"},{"id":"21st:aarispathan15__book-slider","t":"Book slider","d":"click to scroll ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"aarispathan15","st":"indexed","u":40,"pl":"https://cdn.21st.dev/aarispathan15/book-slider/default/preview.1754991964670.png","pc":"aarispathan15","tg":["carousel","slider"]},{"id":"21st:aashirzayd__contribution-heatmap","t":"Contribution heatmap","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"aashirzayd","st":"rated","pl":"https://cdn.21st.dev/aashirzayd/contribution-heatmap/default/preview.1773204797967.png","pc":"aashirzayd","sc":23},{"id":"21st:aashkat9__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#F7F3FF, #083DA9, #02006F, #000000). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aashkat9","st":"indexed","pl":"https://cdn.21st.dev/aashkat9/silk-blend-gradient/default/preview.1785099350531-83e02b69-6563-4284-99ea-954b32568f31.webp","pc":"aashkat9"},{"id":"21st:aayush-duhan__card-fan-carousel","t":"Card fan carousel","d":"Animated image card carousel with a fanned arc layout. Features elastic entrance animation, interactive hover spread, and circular single-card pagination powered by GSAP. Responsiv","k":"component","s":"21st","c":"media/carousel","g":"media","a":"aayush-duhan","st":"indexed","u":117,"pl":"https://cdn.21st.dev/aayush-duhan/card-fan-carousel/default/preview.1781720750848.png","pc":"aayush-duhan","tg":["carousel","gallery","image","pagination"]},{"id":"21st:aayush-duhan__cascade-text","t":"Cascade text","d":"A fluid cascading navigation item where characters transition sequentially to create a wave-like hover motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"aayush-duhan","st":"indexed","u":49,"pl":"https://cdn.21st.dev/aayush-duhan/cascade-text/default/preview.1781620609011.png","pc":"aayush-duhan","tg":["text"]},{"id":"21st:aayush-duhan__halftone-trail","t":"Halftone trail","d":"HilftoneTrail component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"aayush-duhan","st":"indexed","pl":"https://cdn.21st.dev/aayush-duhan/halftone-trail/default/preview.1782729958716.png","pc":"aayush-duhan","tg":["cursor"]},{"id":"21st:aayush-duhan__ink-reveal","t":"Ink reveal","d":"A canvas overlay that lets users brush away a colored mask to reveal content underneath. Mouse movement creates organic, wobbly ink stamps that expand and fade, producing a natural","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"aayush-duhan","st":"indexed","u":73,"pl":"https://cdn.21st.dev/aayush-duhan/ink-reveal/default/preview.1781465880612.png","pc":"aayush-duhan","tg":["cursor","image"]},{"id":"21st:aayush-duhan__liquid-gradient","t":"Liquid gradient","d":"Liquid Gradient component for React.","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"aayush-duhan","st":"indexed","pl":"https://cdn.21st.dev/aayush-duhan/liquid-gradient/default/preview.1785549997688-a3a5d977-60bd-43b1-aa5f-565c1d002f32.png","pc":"aayush-duhan"},{"id":"21st:aayush-duhan__liquid-morph-floating-menu","t":"Liquid morph floating menu","d":"A premium, interactive floating navigation pill that dynamically expands into a dark-themed menu with smooth organic transitions, a morphing toggle button, and staggered letter-rol","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"aayush-duhan","st":"indexed","pl":"https://cdn.21st.dev/aayush-duhan/liquid-morph-floating-menu/default/preview.1782799298339.png","pc":"aayush-duhan","tg":["menu","navigation-menu"]},{"id":"21st:aayush-duhan__notch-card","t":"Notch card","d":"A shaped image card with a notched bottom-right corner, featuring a clip-path hover reveal effect and animated SVG border overlay. Fully customizable colors, images, timing, and la","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aayush-duhan","st":"indexed","pl":"https://cdn.21st.dev/aayush-duhan/notch-card/default/preview.1782130551508.png","pc":"aayush-duhan"},{"id":"21st:aayush-duhan__reveal-card","t":"Reveal card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aayush-duhan","st":"indexed","pl":"https://cdn.21st.dev/aayush-duhan/reveal-card/default/preview.1781780557552.png","pc":"aayush-duhan"},{"id":"21st:abbasplusplus__goodreads-currently-reading","t":"Goodreads currently reading","d":"Show off the book that you're currently reading on Goodreads using your RSS feed. ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"abbasplusplus","st":"indexed","pl":"https://cdn.21st.dev/abbasplusplus/goodreads-currently-reading/default/preview.1756120229087.png","pc":"abbasplusplus"},{"id":"21st:abbeybidmus12__course-card","t":"Course card","d":"Course card component of a learning management system app","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"abbeybidmus12","st":"indexed","pl":"https://cdn.21st.dev/abbeybidmus12/course-card/default/preview.1766528021142.png","pc":"abbeybidmus12"},{"id":"21st:abbeybidmus12__table-example","t":"Table example","d":"Table examle component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"abbeybidmus12","st":"indexed","pl":"https://cdn.21st.dev/abbeybidmus12/table-example/default/preview.1766779004816.png","pc":"abbeybidmus12"},{"id":"21st:abhi3hekk__social-stories","t":"Social stories","d":"Here is social stories component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"abhi3hekk","st":"indexed","u":15,"pl":"https://cdn.21st.dev/user_37FuTrkTgP182untG7HjKZtTe88/social-stories/default/preview.1767721608185.png","pc":"abhi3hekk","tg":["profile","video"]},{"id":"21st:abhinavcdev__3d-sliding-cards","t":"3d sliding cards","d":"React cards with image sliding up when hovered.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"abhinavcdev","st":"indexed","u":30,"pl":"https://cdn.21st.dev/abhinavcdev/3d-sliding-cards/default/preview.1755111211810.png","pc":"abhinavcdev","tg":["gallery"]},{"id":"21st:abhinavcdev__cta-hero-with-top-nav","t":"Cta hero with top nav","d":"A simple Hero, CTA and top nav suitable for developer product landing pages.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"abhinavcdev","st":"indexed","pl":"https://cdn.21st.dev/abhinavcdev/cta-hero-with-top-nav/default/preview.1754791034048.png","pc":"abhinavcdev"},{"id":"21st:abhinavcdev__interactive-portfolio-terminal-component","t":"Interactive portfolio terminal component","k":"component","s":"21st","c":"other","g":"other","a":"abhinavcdev","st":"indexed","pl":"https://cdn.21st.dev/abhinavcdev/interactive-portfolio-terminal-component/default/preview.1755112238764.png","pc":"abhinavcdev"},{"id":"21st:abhinavcdev__modern-hero-section","t":"Modern hero section","d":"A premium hero section designed for  platforms featuring a full-screen video background, large typography, and compelling statistics.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"abhinavcdev","st":"indexed","pl":"https://cdn.21st.dev/abhinavcdev/modern-hero-section/default/preview.1755115372535.png","pc":"abhinavcdev"},{"id":"21st:abishek1512__button-1","t":"Button 1","d":"Animated button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"abishek1512","st":"indexed","u":163,"pl":"https://cdn.21st.dev/user_2wnqnvX2yOglGP4CzRypdJkeHrv/button-1/default/preview.1747165784185.png","pc":"abishek1512"},{"id":"21st:abishek1512__carousel-card","t":"Carousel card","d":"Animated card with carousel effect","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"abishek1512","st":"indexed","pl":"https://cdn.21st.dev/abishek1512/carousel-card/default/preview.1746861707425.png","pc":"abishek1512"},{"id":"21st:abishek1512__carousel-card-1","t":"Carousel card 1","d":"UI component for card with carousel effects","k":"component","s":"21st","c":"media/carousel","g":"media","a":"abishek1512","st":"indexed","u":246,"pl":"https://cdn.21st.dev/user_2wnqnvX2yOglGP4CzRypdJkeHrv/carousel-card-1/default/preview.1747163845462.png","pc":"abishek1512","tg":["carousel","gallery"]},{"id":"21st:abishek1512__carousel-card-2","t":"Carousel card 2","d":"carousel card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"abishek1512","st":"indexed","pl":"https://cdn.21st.dev/user_2wnqnvX2yOglGP4CzRypdJkeHrv/carousel-card-2/carousel-card/preview.png","pc":"abishek1512"},{"id":"21st:abishek1512__login-1","t":"Login 1","d":"A SignIn card component featuring animated buttons, input fields, and social media icons, all enhanced with gradient effects for a modern visual appeal.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"abishek1512","st":"indexed","u":336,"pl":"https://cdn.21st.dev/abishek1512/login-1/default/preview.1748278436511.png","pc":"abishek1512","tg":["sign-in"]},{"id":"21st:abishek1512__sign-in-4","t":"Sign in 4","d":"A SignIn card component featuring animated buttons, input fields, and social media icons, all enhanced with gradient effects for a modern visual appeal.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"abishek1512","st":"indexed","pl":"https://cdn.21st.dev/abishek1512/sign-in/default/preview.1747335705282.png","pc":"abishek1512"},{"id":"21st:abishek1512__sign-in-7","t":"Sign in 7","d":"A SignIn card component featuring animated buttons, input fields, and social media icons, all enhanced with gradient effects for a modern visual appeal.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"abishek1512","st":"indexed","pl":"https://cdn.21st.dev/abishek1512/sign-in-6/default/preview.1747506270947.png","pc":"abishek1512"},{"id":"21st:abishekrajimmanuel__carousel-card-1","t":"Carousel card 1","d":"List cards with carousel effect.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"abishekrajimmanuel","st":"indexed","pl":"https://cdn.21st.dev/abishekrajimmanuel/carousel-card/default/preview.1746859672518.png","pc":"abishekrajimmanuel"},{"id":"21st:abishekrajimmanuel__image-card-1","t":"Image card 1","d":"Card component with image, content and carousel","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"abishekrajimmanuel","st":"indexed","pl":"https://cdn.21st.dev/abishekrajimmanuel/image-card/default/preview.1746825678860.png","pc":"abishekrajimmanuel"},{"id":"21st:abui__scroll-reveal-content-a","t":"Scroll reveal content a","d":"A scroll-driven section that reveals three numbered content blocks with a growing vertical progress line and synchronized image transitions as the user scrolls.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"abui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/abui/scroll-reveal-content-a/default/preview.1783712339764.png","pc":"abui","tg":["features","progress","scroll-area","timeline"]},{"id":"21st:abxlfazl____animated-tab-bar","t":"Animated tab bar","d":"Here is Animated Tab Bar component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"abxlfazl__","st":"indexed","u":72,"pl":"https://cdn.21st.dev/larsen66/animated-tab-bar/default/preview.1753801592310.png","pc":"abxlfazl__","tg":["icon","navigation-menu","tabs"]},{"id":"21st:adam.d.korzun__test-component","t":"Test component","d":"Blank component to test out how this works. No review required","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"adam.d.korzun","st":"indexed","pl":"https://cdn.21st.dev/adam.d.korzun/test-component/default/preview.1750863028321.png","pc":"adam.d.korzun"},{"id":"21st:adarsh-jain-bit__web-services","t":"Web services","k":"component","s":"21st","c":"other","g":"other","a":"adarsh-jain-bit","st":"indexed","pl":"https://cdn.21st.dev/adarsh-jain-bit/web-services/default/preview.1749299607715.png","pc":"adarsh-jain-bit"},{"id":"21st:adepalma__categorybadge","t":"Categorybadge","d":"Self-contained category badge component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"adepalma","st":"indexed","pl":"https://21st.dev/@adepalma/components/categorybadge","pc":"adepalma"},{"id":"21st:adepalma__confirmdialog","t":"Confirmdialog","d":"Self-contained confirm dialog component with loading and destructive variant","k":"component","s":"21st","c":"status/loader","g":"status","a":"adepalma","st":"indexed","pl":"https://21st.dev/@adepalma/components/confirmdialog","pc":"adepalma"},{"id":"21st:adepalma__emptystate","t":"Emptystate","d":"Self-contained empty state component with icon, title, description and action","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"adepalma","st":"indexed","pl":"https://21st.dev/@adepalma/components/emptystate","pc":"adepalma"},{"id":"21st:aditya.nagpal__starry-nights","t":"Starry nights","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards","k":"component","s":"21st","c":"media/player","g":"media","a":"aditya.nagpal","st":"indexed","pl":"https://cdn.21st.dev/aditya.nagpal/starry-nights/default/preview.1784249460033-d492bb91-4f03-40e2-8eb1-83beafd03b17.webp","pc":"aditya.nagpal","tg":["background","video"]},{"id":"21st:admin_a46d2fee__gauge","t":"Gauge","d":"A customizable SVG gauge with segmented arcs, animated progress tracking, and an optional needle with gradient glow. Supports configurable segments, smooth CSS transitions, and red","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"admin_a46d2fee","st":"indexed","pl":"https://cdn.21st.dev/admin_a46d2fee/gauge/default/preview.1776416753642.png","pc":"admin_a46d2fee"},{"id":"21st:aghasisahakyan1__3d-hero-section-boxes","t":"3d hero section boxes","d":"3D Hero Section With Animated Boxes","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":164,"pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/3d-hero-section-boxes/default/preview.1746632692728.png","pc":"aghasisahakyan1","tg":["cta","hero"]},{"id":"21st:aghasisahakyan1__3d-interactive-navbar","t":"3d interactive navbar","d":"A sophisticated, interactive navbar with 3D effects powered by Three.js and React Three Fiber. Features smooth animations, hover effects, and responsive design. Includes custom car","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/3d-interactive-navbar/default/preview.1747254696082.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__ai-input","t":"Ai input","d":"AI Input popover","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/ai-input/default/preview.1756605327560.png","pc":"aghasisahakyan1","tg":["ai-chat","popover"]},{"id":"21st:aghasisahakyan1__ai-input-hero","t":"Ai input hero","d":"AI Input hero section with animated shader background","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":242,"pl":"https://cdn.21st.dev/aghasisahakyan1/ai-input-hero/default/preview.1759262464978.png","pc":"aghasisahakyan1","tg":["ai-chat","hero"]},{"id":"21st:aghasisahakyan1__aniamted-pricing-cards","t":"Aniamted pricing cards","d":"Aniamted Pricing Cards","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":113,"pl":"https://cdn.21st.dev/aghasisahakyan1/aniamted-pricing-cards/default/preview.1756833457643.png","pc":"aghasisahakyan1","tg":["pricing-section"]},{"id":"21st:aghasisahakyan1__animate-navigation","t":"Animate navigation","d":"Animated navigation component using motion ","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/animate-navigation/default/preview.1756604833438.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__animated-card","t":"Animated card","d":"Animated Card","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/animated-card/default/preview.1757032985167.png","pc":"aghasisahakyan1","tg":["features"]},{"id":"21st:aghasisahakyan1__animated-card-1","t":"Animated card 1","d":"An animated hover card that can showcase almost anything—it all comes down to the caption you choose.","k":"component","s":"21st","c":"media/icon","g":"media","a":"aghasisahakyan1","st":"indexed","u":28,"pl":"https://cdn.21st.dev/aghasisahakyan1/animated-card-1/default/preview.1752734113317.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__animated-chart-card","t":"Animated chart card","d":"Animated Chart Card","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"aghasisahakyan1","st":"indexed","u":27,"pl":"https://cdn.21st.dev/aghasisahakyan1/animated-chart-card/default/preview.1757034191844.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__animated-comman-menu","t":"Animated comman menu","d":"Animated Comman Menu","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/animated-comman-menu/default/preview.1757034715603.png","pc":"aghasisahakyan1","tg":["modal","search"]},{"id":"21st:aghasisahakyan1__animated-footer","t":"Animated footer","d":"Responsive footer component with cool animations","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":2,"pl":"https://cdn.21st.dev/nubmaster4568/animated-footer/default/preview.1747269470465.png","pc":"aghasisahakyan1","tg":["footer"]},{"id":"21st:aghasisahakyan1__animated-list","t":"Animated list","d":"A sophisticated animation component that creates dynamic column-based transitions with scaling effects. Perfect for showcasing notifications, messages, or any sequential content wi","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/animated-list/default/preview.1752733579534.png","pc":"aghasisahakyan1","tg":["list","notification"]},{"id":"21st:aghasisahakyan1__animated-profile-card","t":"Animated profile card","d":"Animated Profile Card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"aghasisahakyan1","st":"indexed","u":119,"pl":"https://cdn.21st.dev/aghasisahakyan1/animated-profile-card/default/preview.1759236393866.png","pc":"aghasisahakyan1","tg":["profile"]},{"id":"21st:aghasisahakyan1__animated-search-1","t":"Animated search 1","d":"Animated Search Bar with gooey effect  ","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/animated-search-bar/default/preview.1746990123567.png","pc":"aghasisahakyan1","tg":["search"]},{"id":"21st:aghasisahakyan1__animated-search-bar","t":"Animated search bar","d":"Animated Search Bar with gooey effect  ","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"aghasisahakyan1","st":"indexed","u":116,"pl":"https://cdn.21st.dev/nubmaster4568/animated-search-bar/default/preview.1747126579206.png","pc":"aghasisahakyan1","tg":["search"]},{"id":"21st:aghasisahakyan1__animated-section","t":"Animated section","d":"A section displaying technology integrations, featuring descriptive text, a call-to-action button with an arrow hover animation, and automatically scrolling cards presented in diff","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/animated-section/default/preview.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__animated-tags","t":"Animated tags","d":"Component that displays tags with an animation when they are added or removed from the list of selected tags","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/animated-tags/default/preview.1756606301451.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__anomaly-heatmap","t":"Anomaly heatmap","d":"Anomaly heatmap","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/anomaly-heatmap/default/preview.1757030404711.png","pc":"aghasisahakyan1","tg":["data-visualization"]},{"id":"21st:aghasisahakyan1__api-rate-limiting-card","t":"Api rate limiting card","d":"API Rate Limiting Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/api-rate-limiting-card/default/preview.1757032556595.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__arrow-cta","t":"Arrow cta","d":"Arrow CTA with animation","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/arrow-cta/default/preview.1756844582696.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__auth-form","t":"Auth form","d":"Auth Form Retro","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/auth-form/default/preview.1756792496454.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__black-and-white-hero-section","t":"Black and white hero section","d":"Black and white responsive hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/black-and-white-hero-section/default/preview.1751756898456.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__blog-post-card","t":"Blog post card","d":"Blog Post Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/blog-post-card/default/preview.1759237603296.png","pc":"aghasisahakyan1","tg":["card","image"]},{"id":"21st:aghasisahakyan1__box-carousel","t":"Box carousel","d":"Box Carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/box-carousel/default/preview.1756604490045.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__browser-preview","t":"Browser preview","d":"Browser Preview Component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/browser-preview/default/preview.1756833195035.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__code-editor-landing-hero","t":"Code editor landing hero","d":"A polished landing hero for developer-focused products, combining a responsive header, headline, CTA, testimonial with star ratings, and an illustrative graphic—perfect for SaaS co","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/code-editor-landing-hero/default/preview.1751382078511.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__code-feedback-hero-section","t":"Code feedback hero section","d":"A lively landing-page hero promoting collaborative code reviews. Includes header navigation, pattern background, headline, social proof avatars, dual CTAs, and illustration. All co","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/code-feedback-hero-section/default/preview.1751390336118.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__collaborative-workspace-hero-section","t":"Collaborative workspace hero section","d":"A vibrant hero component featuring navigation, headline with accented highlight, supporting text, CTA buttons, and an illustration—ideal for SaaS or collaboration platform landing ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/collaborative-workspace-hero-section/default/preview.1751388736698.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__colorful-alerts","t":"Colorful alerts","d":"Colorful Alerts","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/colorful-alerts/default/preview.1757325224553.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__complete-crypto-wallet-integration","t":"Complete crypto wallet integration","d":"Completely functioning crypto wallet integration for any provider","k":"component","s":"21st","c":"other","g":"other","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/complete-crypto-wallet-integration/default/preview.1756936141262.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__crypto-converter","t":"Crypto converter","d":"Crypto Converter","k":"component","s":"21st","c":"other","g":"other","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/crypto-converter/default/preview.1757327049835.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__customizable-pixel-avatar","t":"Customizable pixel avatar","d":"Customizable Pixel Avatar","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/customizable-pixel-avatar/default/preview.1756935141115.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__dasdafdfsdfd","t":"Dasdafdfsdfd","d":"AI App Hero Section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/dasdafdfsdfd/default/preview.1758229142133.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__downloadable-asset","t":"Downloadable asset","d":"Downloadable Asset Component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/downloadable-asset/default/preview.1757325440638.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__draw-with-cursor","t":"Draw with cursor","d":"A React component that adds an interactive drawing effect following the user's mouse cursor within a specified area.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/draw-with-cursor/draw/preview.png","pc":"aghasisahakyan1","tg":["cursor"]},{"id":"21st:aghasisahakyan1__dynamic-island","t":"Dynamic island","d":"A reusable Dynamic Island component inspired by Apple's design, featuring smooth state transitions and animations.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"aghasisahakyan1","st":"indexed","u":44,"pl":"https://cdn.21st.dev/aghasisahakyan1/dynamic-island/default/preview.1756605945317.png","pc":"aghasisahakyan1","tg":["notification"]},{"id":"21st:aghasisahakyan1__event-webinar-card","t":"Event webinar card","d":"Event/Webinar Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/event-webinar-card/default/preview.1757325581750.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__expandable-card","t":"Expandable card","d":"A versatile and engaging UI component that allows users to explore content in a more immersive way.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"aghasisahakyan1","st":"indexed","u":161,"pl":"https://cdn.21st.dev/aghasisahakyan1/expandable-card/default/preview.1752733809059.png","pc":"aghasisahakyan1","tg":["modal"]},{"id":"21st:aghasisahakyan1__flickering-footer","t":"Flickering footer","d":"Flickering Footer Component","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":568,"pl":"https://cdn.21st.dev/aghasisahakyan1/flickering-footer/default/preview.1759970115840.png","pc":"aghasisahakyan1","tg":["footer","link"]},{"id":"21st:aghasisahakyan1__flipping-card","t":"Flipping card","d":"A two-sided card component that flips on hover, revealing content on its back face. Ideal for interactive displays or showcasing additional information.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"aghasisahakyan1","st":"indexed","u":169,"pl":"https://cdn.21st.dev/aghasisahakyan1/flipping-card/default/preview.1752733401072.png","pc":"aghasisahakyan1","tg":["image"]},{"id":"21st:aghasisahakyan1__form-layout-1","t":"Form layout 1","d":"Simple Form Layout for registration with address using Shadcn Components","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/form-layout-1/default/preview.1752833823467.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__form-layout-2","t":"Form layout 2","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"aghasisahakyan1","st":"rated","pl":"https://cdn.21st.dev/aghasisahakyan1/form-layout-2/default/preview.1752833980317.png","pc":"aghasisahakyan1","sc":18},{"id":"21st:aghasisahakyan1__galaxy-interactive-hero-section","t":"Galaxy interactive hero section","d":"A dynamic and visually engaging hero section featuring a Spline 3D background, a responsive navigation bar with blurred effects and dropdowns, a prominent content overlay with para","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":404,"pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/galaxy-interactive-hero-section/default/preview.1746632771616.png","pc":"aghasisahakyan1","tg":["hero"]},{"id":"21st:aghasisahakyan1__gallery-scroll-section","t":"Gallery scroll section","d":"Gallery Section with Image transition effect ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/gallery-scroll-section/default/preview.1746991051703.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__gallery-section","t":"Gallery section","d":"Gallery Section with Image transition effect ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/gallery-section/default/preview.1747126776647.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__gradient-background-5","t":"Gradient background 5","d":"Gradient Background 5","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/gradient-background-5/default/preview.1756603441914.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__gradient-background-6","t":"Gradient background 6","d":"Gradient Background 6","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/gradient-background-6/default/preview.1756603707332.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__gradient-pricing-section","t":"Gradient pricing section","d":"Pricing section with gradient card","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/gradient-pricing-section/default/preview.1752835642307.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__hero-gradient-with-search","t":"Hero gradient with search","d":"A vibrant dark-mode hero section with a job search form, gradient effects, responsive nav, and mobile toggle support. Ideal for hiring platforms and AI-assisted marketplaces.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/hero-gradient-with-search/default/preview.1751380661892.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__hero-section","t":"Hero section","d":" A comprehensive UI component for a landing page hero section. It includes responsive navigation, a headline content area, and a structured application preview section with filters","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"aghasisahakyan1","st":"indexed","u":90,"pl":"https://cdn.21st.dev/nubmaster4568/hero-section/default/preview.png","pc":"aghasisahakyan1","tg":["dashboard","cta"]},{"id":"21st:aghasisahakyan1__hero-section-learn-connect","t":"Hero section learn connect","d":"A bright and welcoming hero section designed for educational platforms and learning communities. Features a dual-column layout with a bold headline, call-to-action button, and ment","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/hero-section-learn-connect/default/preview.1751380920188.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__hero-section-with-email-input","t":"Hero section with email input","d":"Hero section with email input call to action and gallery cards ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/hero-section-with-email-input/default/preview.1751757279758.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__hero-section-with-responsive-navigation","t":"Hero section with responsive navigation","d":"A modern, responsive hero section featuring a toggleable mobile navigation, prominent headline, CTA buttons, and illustration. Built with Tailwind CSS and React. Ideal for marketin","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/hero-section-with-responsive-navigation/default/preview.1751380293328.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__interactive-feature-section","t":"Interactive feature section","d":"Component that creates a full-screen, scroll-controlled section for showcasing features, featuring a dynamic background gradient effect and visual progress indicators.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/nubmaster4568/interactive-feature-section/default/preview.1747261396140.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__interactive-feature-section-1","t":"Interactive feature section 1","d":"Component that creates a full-screen, scroll-controlled section for showcasing features, featuring a dynamic background gradient effect and visual progress indicators.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/interactive-feature-section-1/default/preview.1757739810827.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__interactive-folder","t":"Interactive folder","d":"A dynamic UI component that simulates an interactive folder. Click to 'open' and reveal up to three items inside, which spread out. Items provide a subtle parallax effect on hover ","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/interactive-folder/default/preview.1746632474100.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__link-preview","t":"Link preview","d":"An interactive link preview component. Displays a preview card on hover, supporting dynamic website screenshots . Features smooth animations (card flip, optional mouse follow) and ","k":"component","s":"21st","c":"actions/link","g":"actions","a":"aghasisahakyan1","st":"indexed","u":109,"pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/link-preview/hover-peek-demo-page/preview.png","pc":"aghasisahakyan1","tg":["link"]},{"id":"21st:aghasisahakyan1__live-feed","t":"Live feed","d":"Live Feed Component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"aghasisahakyan1","st":"rated","pl":"https://cdn.21st.dev/aghasisahakyan1/live-feed/default/preview.1757031360340.png","pc":"aghasisahakyan1","tg":["list","notification"],"sc":24},{"id":"21st:aghasisahakyan1__loader","t":"Loader","d":"A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.","k":"component","s":"21st","c":"status/loader","g":"status","a":"aghasisahakyan1","st":"indexed","u":115,"pl":"https://cdn.21st.dev/aghasisahakyan1/loader/default/preview.1755400427066.png","pc":"aghasisahakyan1","tg":["spinner"]},{"id":"21st:aghasisahakyan1__login-2","t":"Login 2","d":"Simple login form using shadcn components","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/login-2/default/preview.1752833256028.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__login-activity","t":"Login activity","d":"Login Activity ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/login-activity/default/preview.1757030250418.png","pc":"aghasisahakyan1","tg":["dashboard"]},{"id":"21st:aghasisahakyan1__login-form","t":"Login form","d":"Simple login/auth form using shadcn compoenents","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/login-form/default/preview.1752833455920.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__mini-navbar","t":"Mini navbar","d":"      \nMinimalist 'Mini Navbar' Responsive UI component featuring subtle animations for top web page headers and navigation. ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":652,"pl":"https://cdn.21st.dev/nubmaster4568/mini-navbar/default/preview.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__moving-circles-shader","t":"Moving circles shader","d":"Moving Circles Shader","k":"component","s":"21st","c":"motion/background","g":"motion","a":"aghasisahakyan1","st":"indexed","u":14,"pl":"https://cdn.21st.dev/aghasisahakyan1/moving-circles-shader/default/preview.1756750063243.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__multimodal-ai-chat-input","t":"Multimodal ai chat input","d":"A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integra","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/multimodal-ai-chat-input/default/preview.1746633059633.png","pc":"aghasisahakyan1","tg":["textarea","upload-download"]},{"id":"21st:aghasisahakyan1__navbar-with-animated-mega-dropdown","t":"Navbar with animated mega dropdown","d":"A responsive React Navbar component implementing animated mega-dropdown menus for desktop interactions and a slide-in overlay menu for mobile devices. It's built using React hooks ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"aghasisahakyan1","st":"indexed","u":65,"pl":"https://cdn.21st.dev/nubmaster4568/navbar-with-animated-mega-dropdown/default/preview.png","pc":"aghasisahakyan1","tg":["menu"]},{"id":"21st:aghasisahakyan1__portal-sidebar","t":"Portal sidebar","d":"Portal Sidebar","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/portal-sidebar/default/preview.1757326905360.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__quick-links-card","t":"Quick links card","d":"Quick Links Card","k":"component","s":"21st","c":"actions/link","g":"actions","a":"aghasisahakyan1","st":"indexed","u":2,"pl":"https://cdn.21st.dev/aghasisahakyan1/quick-links-card/default/preview.1757325034282.png","pc":"aghasisahakyan1","tg":["list","link"]},{"id":"21st:aghasisahakyan1__r3f-blob","t":"R3f blob","d":"Animated Blob Using React Three Fiber","k":"component","s":"21st","c":"other","g":"other","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/r3f-blob/default/preview.1752835333919.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__rainbow-matrix-shader","t":"Rainbow matrix shader","d":"Rainbow Matrix Shader","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/rainbow-matrix-shader/default/preview.1756792114798.png","pc":"aghasisahakyan1","tg":["grid"]},{"id":"21st:aghasisahakyan1__reasoning","t":"Reasoning","d":"A collapsible component for showing AI reasoning, explanations, or logic. You can control it manually or let it auto-close when the stream ends. Markdown is supported.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/reasoning/default/preview.1755401186605.png","pc":"aghasisahakyan1","tg":["ai-chat"]},{"id":"21st:aghasisahakyan1__scaling-on-scroll","t":"Scaling on scroll","d":"The ScalingOnScroll component is a React component that creates a dynamic scaling effect on scroll using GSAP's ScrollTrigger and Flip plugins. It allows an element to scale and tr","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/scaling-on-scroll/video-content/preview.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__section-with-mockup","t":"Section with mockup","d":" responsive React component for displaying a section with text (title, description) and a styled image mockup. Features optional layout reversal and subtle scroll-triggered animati","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":399,"pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/section-with-mockup/default/preview.1746632628368.png","pc":"aghasisahakyan1","tg":["dashboard","features"]},{"id":"21st:aghasisahakyan1__sign-in-flow-1","t":"Sign in flow 1","d":"Sing In Flow with animated background","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aghasisahakyan1","st":"rated","u":1307,"pl":"https://cdn.21st.dev/nubmaster4568/sign-in-flow-1/default/preview.1747131539764.png","pc":"aghasisahakyan1","tg":["sign-in"],"sc":17},{"id":"21st:aghasisahakyan1__source","t":"Source","d":"Displays website sources used by AI-generated content, showing URL details, titles, and descriptions on hover.","k":"component","s":"21st","c":"other","g":"other","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/source/default/preview.1755867254563.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__speed-lines-shader","t":"Speed lines shader","d":"Speed Lines Shader","k":"component","s":"21st","c":"motion/background","g":"motion","a":"aghasisahakyan1","st":"indexed","u":54,"pl":"https://cdn.21st.dev/aghasisahakyan1/speed-lines-shader/default/preview.1756750621410.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__stacked-alerts","t":"Stacked alerts","d":"Stacked alerts","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/stacked-alerts/default/preview.1757030964623.png","pc":"aghasisahakyan1","tg":["alert","notification"]},{"id":"21st:aghasisahakyan1__star-button","t":"Star button","d":"The StarButton is a visually striking button that features a radial light animation with a starry background.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/star-button/default/preview.1752734493561.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__star-on-github","t":"Star on github","d":"Star On Github Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/star-on-github/default/preview.1756604046414.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__statistics-card","t":"Statistics card","d":"Statistics Card","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":78,"pl":"https://cdn.21st.dev/aghasisahakyan1/statistics-card/default/preview.1759974094075.png","pc":"aghasisahakyan1","tg":["comparison"]},{"id":"21st:aghasisahakyan1__sticky-section-tabs","t":"Sticky section tabs","d":"A container component that displays child sections with sticky headers. As the user scrolls, the header for the current section sticks below a defined navigation height, providing ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"aghasisahakyan1","st":"indexed","u":106,"pl":"https://cdn.21st.dev/user_2wRb2ACTQ44hvI4zlLmE3zYQQZU/sticky-section-tabs/default/preview.1746444616173.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__swipe-animation","t":"Swipe animation","d":"Swipe Animation","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/swipe-animation/default/preview.1759614517807.png","pc":"aghasisahakyan1"},{"id":"21st:aghasisahakyan1__user-profile-card","t":"User profile card","d":"User Profile Card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"aghasisahakyan1","st":"indexed","pl":"https://cdn.21st.dev/aghasisahakyan1/user-profile-card/default/preview.1757034070026.png","pc":"aghasisahakyan1","tg":["avatar","profile"]},{"id":"21st:aghasisahakyan1__waves-shader","t":"Waves shader","d":"Waves Shader ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aghasisahakyan1","st":"indexed","u":17,"pl":"https://cdn.21st.dev/aghasisahakyan1/waves-shader/default/preview.1756844372548.png","pc":"aghasisahakyan1","tg":["background"]},{"id":"21st:ahammed.bashar9__glow-horizon","t":"Glow horizon","d":"A modern landing page hero with a glowing horizon effect, animated gradients, and smooth ambient lighting. Perfect for SaaS, AI, startup, and product landing pages.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ahammed.bashar9","st":"indexed","u":68,"pl":"https://cdn.21st.dev/ahammed.bashar9/glow-horizon/default/preview.1781898144363.png","pc":"ahammed.bashar9","tg":["hero","text"]},{"id":"21st:ahmadluthfi536__service","t":"Service","d":"make section to display service what i can deliver, i am a full stack developer","k":"component","s":"21st","c":"other","g":"other","a":"ahmadluthfi536","st":"indexed","pl":"https://cdn.21st.dev/ahmadluthfi536/service/default/preview.1754210266171.png","pc":"ahmadluthfi536"},{"id":"21st:ahmedmayara__ai-assistant-card","t":"Ai assistant card","d":"A clean, task-focused AI assistant panel, welcoming, structured, and equipped with quick actions, input, and model controls for seamless interaction.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/ai-assistant-card/default/preview.1756253719649.png","pc":"ahmedmayara","tg":["ai-chat"]},{"id":"21st:ahmedmayara__ai-thinking-orb","t":"Ai thinking orb","d":"A React component that visualizes AI “thinking” with glowing orbs, particles, and smooth animations. Supports multiple colors and states: idle, thinking, or processing.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/ai-thinking-orb/default/preview.1759711670150.png","pc":"ahmedmayara"},{"id":"21st:ahmedmayara__area-chart-analytics-card","t":"Area chart analytics card","d":"A compact card component that displays ad spend over the last 28 days with a mini area chart. Perfect for dashboards and marketing analytics.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ahmedmayara","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ahmedmayara/area-chart-analytics-card/default/preview.1756729845593.png","pc":"ahmedmayara","tg":["dashboard"]},{"id":"21st:ahmedmayara__authentication-card","t":"Authentication card","d":"A responsive Authentication Card component. Clean, accessible, and easy to integrate into authentication flows.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/authentication-card/default/preview.1755542147871.png","pc":"ahmedmayara","tg":["form","sign-in"]},{"id":"21st:ahmedmayara__camera-permission-request-card","t":"Camera permission request card","d":"A beautifully designed card component for requesting camera permissions. Ideal for onboarding flows and video call apps.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/camera-permission-request-card/default/preview.1757772824905.png","pc":"ahmedmayara","tg":["notification","onboarding"]},{"id":"21st:ahmedmayara__category-bar-chart","t":"Category bar chart","d":"A clean, responsive category bar chart component for visualizing sales channel performance. Perfect for dashboards and analytics pages.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ahmedmayara","st":"indexed","u":30,"pl":"https://cdn.21st.dev/ahmedmayara/category-bar-chart/default/preview.1757073696908.png","pc":"ahmedmayara","tg":["dashboard","stat"]},{"id":"21st:ahmedmayara__conversion-funnel-area-chart","t":"Conversion funnel area chart","d":"A sleek area chart component that visualizes key steps in the conversion funnel. Perfect for e-commerce dashboards to track where users drop off and optimize checkout flow.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/conversion-funnel-area-chart/default/preview.1757440987307.png","pc":"ahmedmayara","tg":["dashboard"]},{"id":"21st:ahmedmayara__datepicker-with-presets","t":"Datepicker with presets","d":"A user-friendly date picker built with shadcn/ui, featuring quick-select presets like Tomorrow, Later This Week, and Next Week. Uses Popover for contextual display, Calendar for da","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ahmedmayara","st":"rated","pl":"https://cdn.21st.dev/ahmedmayara/datepicker-with-presets/default/preview.1754447443104.png","pc":"ahmedmayara","sc":22},{"id":"21st:ahmedmayara__enable-2fa-card","t":"Enable 2fa card","d":"A structured Two-Factor Authentication Card that guides users through enabling 2FA with step-by-step instructions. Download app, scan QR code, and enter the verification code, feat","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ahmedmayara","st":"indexed","u":32,"pl":"https://cdn.21st.dev/ahmedmayara/enable-2fa-card/default/preview.1755731021760.png","pc":"ahmedmayara","tg":["steps"]},{"id":"21st:ahmedmayara__forgot-password-card","t":"Forgot password card","d":"An accessible Forgot Password Card with email validation using react-hook-form and Zod, featuring a clean input field and clear guidance helping users reset their password or choos","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ahmedmayara","st":"indexed","u":43,"pl":"https://cdn.21st.dev/ahmedmayara/forgot-password-card/default/preview.1755743579521.png","pc":"ahmedmayara"},{"id":"21st:ahmedmayara__fullscreen-calendar","t":"Fullscreen calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ahmedmayara","st":"rated","pl":"https://cdn.21st.dev/user_2qwbyfIFugWPE0zPbh0IyehnANf/fullscreen-calendar-1/default/preview.1738148189922.png","pc":"ahmedmayara","tg":["calendar","dashboard","grid"],"sc":19},{"id":"21st:ahmedmayara__notifications-menu","t":"Notifications menu","d":"A sleek, ultra-minimal notifications menu focused on clarity and function, just the essentials, no clutter.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ahmedmayara","st":"indexed","u":150,"pl":"https://cdn.21st.dev/ahmedmayara/notifications-menu/default/preview.1756223877906.png","pc":"ahmedmayara","tg":["avatar","menu","notification","tabs"]},{"id":"21st:ahmedmayara__one-time-password-sign-in-card","t":"One time password sign in card","d":"A responsive OTP Verification Card that uses react-hook-form with Zod validation, featuring a 6-digit input UI, accessible, user-friendly, and ideal for authentication flows.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ahmedmayara","st":"indexed","u":62,"pl":"https://cdn.21st.dev/ahmedmayara/one-time-password-sign-in-card/default/preview.1755650618098.png","pc":"ahmedmayara","tg":["sign-in"]},{"id":"21st:ahmedmayara__share-via-qr-code-card","t":"Share via qr code card","d":"A clean, reusable component that generates a QR code for sharing profile links, with options to copy the URL or download the code as SVG/PNG.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/share-via-qr-code-card/default/preview.1758244671387.png","pc":"ahmedmayara"},{"id":"21st:ahmedmayara__stock-market-tracker-chart","t":"Stock market tracker chart","d":"An interactive Stock Market Tracker Card with dynamic line charts, period filters, and company selection, showing price trends, percentage changes, and highest/lowest values in a c","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ahmedmayara","st":"indexed","pl":"https://cdn.21st.dev/ahmedmayara/stock-market-tracker-chart/default/preview.1755904121220.png","pc":"ahmedmayara","tg":["stat"]},{"id":"21st:ahmedmayara__total-sales-chart","t":"Total sales chart","d":"A compact total sales chart, showing revenue trends with an interactive line chart, quick period filters, and channel breakdowns for clear insights at a glance.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ahmedmayara","st":"indexed","u":71,"pl":"https://cdn.21st.dev/ahmedmayara/total-sales-chart/default/preview.1756386594826.png","pc":"ahmedmayara"},{"id":"21st:aidanmoody6359__card","t":"Card","d":"E commerce product card with price and rating.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aidanmoody6359","st":"indexed","pl":"https://cdn.21st.dev/aidanmoody6359/card/default/preview.1765171560852.png","pc":"aidanmoody6359"},{"id":"21st:aika.mikkun0917__gradient-c1a9005a","t":"Gradient c1a9005a","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 8-color palette (#FBFDFF, #A9FCFF, #B4B9FF, #C4FFE6, #F4D1FF, #F4D1FF, #B3B8FF, #B3B","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aika.mikkun0917","st":"indexed","pl":"https://cdn.21st.dev/aika.mikkun0917/gradient-c1a9005a/default/preview.1786528547281-f6ef73a0-8592-4aff-bbe5-8e4ba20cef53.webp","pc":"aika.mikkun0917"},{"id":"21st:airbnb-visx__annotation","t":"Annotation","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/annotation","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__axis","t":"Axis","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/axis","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__bar-group-vertical","t":"Bar group vertical","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/bar-group-vertical","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__bar-stac","t":"Bar stac","d":"here is horizontal bar stack with data","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","u":5,"pl":"https://21st.dev/@airbnb-visx/components/bar-stac","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__bar-stack","t":"Bar stack","d":"here is a bar stac ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","u":9,"pl":"https://21st.dev/@airbnb-visx/components/bar-stack","pc":"airbnb-visx","tg":["data-visualization","tooltip"]},{"id":"21st:airbnb-visx__box-plot-violin-plot","t":"Box plot violin plot","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/box-plot-violin-plot","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__brush","t":"Brush","d":"Brush component ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"airbnb-visx","st":"indexed","u":10,"pl":"https://21st.dev/@airbnb-visx/components/brush","pc":"airbnb-visx","tg":["data-visualization","slider"]},{"id":"21st:airbnb-visx__chords","t":"Chords","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/chords","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__curves","t":"Curves","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/curves","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__delaunay-triangulation","t":"Delaunay triangulation","k":"component","s":"21st","c":"other","g":"other","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/delaunay-triangulation","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__dendrogram","t":"Dendrogram","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/dendrogram","pc":"airbnb-visx","tg":["data-visualization","file-tree"]},{"id":"21st:airbnb-visx__dots","t":"Dots","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/dots","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__drag-and-draw","t":"Drag and draw","k":"component","s":"21st","c":"other","g":"other","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/drag-and-draw","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__finance-chart","t":"Finance chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/finance-chart","pc":"airbnb-visx","tg":["data-visualization","tooltip"]},{"id":"21st:airbnb-visx__glyphs","t":"Glyphs","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/glyphs","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__gradients","t":"Gradients","d":"here is gradients component","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"airbnb-visx","st":"indexed","u":15,"pl":"https://21st.dev/@airbnb-visx/components/gradients","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__heatmaps","t":"Heatmaps","d":"here is interactive heatmaps","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","u":40,"pl":"https://21st.dev/@airbnb-visx/components/heatmaps","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__legends","t":"Legends","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/legends","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__linktypes","t":"Linktypes","d":"here is fully customizable link types of data","k":"component","s":"21st","c":"actions/link","g":"actions","a":"airbnb-visx","st":"indexed","u":6,"pl":"https://21st.dev/@airbnb-visx/components/linktypes","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__network","t":"Network","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/network","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__patterns","t":"Patterns","d":"Animated pattern showcase","k":"component","s":"21st","c":"other","g":"other","a":"airbnb-visx","st":"indexed","u":4,"pl":"https://21st.dev/@airbnb-visx/components/patterns","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__pie-chart","t":"Pie chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/pie-chart","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__radar-chart","t":"Radar chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/radar-chart","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__radial-bar","t":"Radial bar","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/radial-bar","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__radial-lines","t":"Radial lines","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/radial-lines","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__split-line-path","t":"Split line path","k":"component","s":"21st","c":"layout/split-pane","g":"layout","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/split-line-path","pc":"airbnb-visx"},{"id":"21st:airbnb-visx__stacked-areas","t":"Stacked areas","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/stacked-areas","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__streamgraph","t":"Streamgraph","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/streamgraph","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__threshold","t":"Threshold","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/threshold","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__toggle-nav","t":"Toggle nav","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/toggle-nav","pc":"airbnb-visx","tg":["sidebar"]},{"id":"21st:airbnb-visx__tooltip","t":"Tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/tooltip","pc":"airbnb-visx","tg":["checkbox","tooltip"]},{"id":"21st:airbnb-visx__treemap-chart","t":"Treemap chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/treemap-chart","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__voronoi","t":"Voronoi","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/voronoi","pc":"airbnb-visx","tg":["background"]},{"id":"21st:airbnb-visx__word-cloud","t":"Word cloud","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","pl":"https://21st.dev/@airbnb-visx/components/word-cloud","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:airbnb-visx__zoom","t":"Zoom","d":"Zoom colored component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"airbnb-visx","st":"indexed","u":14,"pl":"https://21st.dev/@airbnb-visx/components/zoom","pc":"airbnb-visx","tg":["data-visualization"]},{"id":"21st:ajtruex__disk","t":"Disk","d":"disk","k":"component","s":"21st","c":"other","g":"other","a":"ajtruex","st":"indexed","pl":"https://cdn.21st.dev/user_2rnRWQXdOPPs9x0zxcrMQ0uXM58/disk/disk/preview.png","pc":"ajtruex"},{"id":"21st:akashsingh890901-crypto__glassmorphism-navigation","t":"Glassmorphism navigation","d":"Glassmorphism Navigation","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"akashsingh890901-crypto","st":"indexed","u":36,"pl":"https://cdn.21st.dev/akashsingh890901-crypto/glassmorphism-navigation/default/preview.1782065686830.png","pc":"akashsingh890901-crypto","tg":["toggle"]},{"id":"21st:al11o__inline-dropdown","t":"Inline dropdown","d":"Context menu with hold to click and text input hidden\n\nFull credits to : https://github.com/haaarshsingh\nhttps://ui.harshsingh.xyz/inline-dropdown","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"al11o","st":"indexed","u":71,"pl":"https://cdn.21st.dev/user_2vqlNaXxxOK0sb02XrSapLE8eQv/inline-dropdown/default/preview.1750807007502.png","pc":"al11o","tg":["dropdown","menu"]},{"id":"21st:alan-crts__icon-picker","t":"Icon picker","k":"component","s":"21st","c":"media/icon","g":"media","a":"alan-crts","st":"indexed","pl":"https://cdn.21st.dev/user_2ul2UC8fsmkGvUN6BxPmb8L86bT/icon-picker/default/preview.png","pc":"alan-crts"},{"id":"21st:alexperezcedeno__interactive-folder-gallery","t":"Interactive folder gallery","d":"A macOS-inspired folder that springs open on click, fanning out photo cards with realistic Framer Motion physics and drag-to-close interactions.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"alexperezcedeno","st":"indexed","u":9,"pl":"https://cdn.21st.dev/alexperezcedeno/interactive-folder-gallery/default/preview.1782793436861.png","pc":"alexperezcedeno","tg":["gallery"]},{"id":"21st:alexperezcedeno__interactive-tech-stack-builder","t":"Interactive tech stack builder","d":"A highly interactive, 2.5D gamified onboarding component. Let users physically build their skill stack block by block. Features smooth physics, glassmorphism icons, and Framer Moti","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"alexperezcedeno","st":"indexed","pl":"https://cdn.21st.dev/alexperezcedeno/interactive-tech-stack-builder/default/preview.1783434843893.png","pc":"alexperezcedeno","tg":["onboarding"]},{"id":"21st:alexperezcedeno__lunar-gravity-card","t":"Lunar gravity card","d":"Embed highly realistic 3D astrophysics directly into your Next.js project. Zero configuration, interactive, and flawlessly smooth using React Three Fiber.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"alexperezcedeno","st":"indexed","u":59,"pl":"https://cdn.21st.dev/alexperezcedeno/lunar-gravity-card/default/preview.1782984210207.png","pc":"alexperezcedeno","tg":["hero"]},{"id":"21st:alexperezcedeno__magic-dust-shader","t":"Magic dust shader","d":"100% editable via react props","k":"component","s":"21st","c":"motion/background","g":"motion","a":"alexperezcedeno","st":"indexed","u":6,"pl":"https://cdn.21st.dev/alexperezcedeno/magic-dust-shader/default/preview.1785314587362-eb7c9db5-7032-4bfa-b187-c2c9f81908c0.png","pc":"alexperezcedeno"},{"id":"21st:alexperezcedeno__premiumleather","t":"Premiumleather","d":"A highly detailed, interactive 3D leather wallet with Framer Motion animations and realistic SVG texturing.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"alexperezcedeno","st":"indexed","pl":"https://cdn.21st.dev/user_3Fcui6E8q9ZDdbH8GrN0ckMp4Hf/premiumleather/default/preview.1782643065817.png","pc":"alexperezcedeno"},{"id":"21st:alexperezcedeno__robot-hero","t":"Robot hero","d":"An interactive 3D robot companion built with React Three Fiber and Framer Motion. Features a dynamic glass UI, physics-based interactions, and customizable properties.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"alexperezcedeno","st":"indexed","u":12,"pl":"https://cdn.21st.dev/alexperezcedeno/robot-hero/default/preview.1785374363044-2b2df1c9-d658-459b-9564-4f4ebc479994.png","pc":"alexperezcedeno"},{"id":"21st:alexperezcedeno__volumetric-studio","t":"Volumetric studio","d":"A stunning 3D WebGL studio environment with physically accurate spotlights. Part of The UI Factory.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"alexperezcedeno","st":"indexed","pl":"https://cdn.21st.dev/alexperezcedeno/volumetric-studio/default/preview.1782494920649.png","pc":"alexperezcedeno","tg":["hero"]},{"id":"21st:aliimam8__button","t":"Button","d":"A simple button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"aliimam8","st":"indexed","pl":"https://cdn.21st.dev/aliimam8/button/default/preview.1759335154985.png","pc":"aliimam8"},{"id":"21st:almaz_3b6728d7__roman-monolithic","t":"Roman monolithic","d":"Animated (ripple) ASCII art in the Contour style, made with the 21st ASCII editor and baked to a looping video. Styled with a colorful, retro look. A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"almaz_3b6728d7","st":"indexed","pl":"https://cdn.21st.dev/almaz_3b6728d7/roman-monolithic/default/preview.1787053847142-0be35d54-e62b-4e78-811a-9d5629ed7a0b.webp","pc":"almaz_3b6728d7"},{"id":"21st:almaz_3b6728d7__roman-monolithic-2","t":"Roman monolithic 2","d":"Animated (ripple) ASCII art in the Contour style, made with the 21st ASCII editor and baked to a looping video. Styled with a colorful, retro look. A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"almaz_3b6728d7","st":"indexed","pl":"https://cdn.21st.dev/almaz_3b6728d7/roman-monolithic/default/preview.1787055645846-cf92fa2a-485f-4c0c-b21c-edba33d3bad4.webp","pc":"almaz_3b6728d7"},{"id":"21st:amanshakya1808__animated-form","t":"Animated form","d":"Here is Animated Form component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"amanshakya1808","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/animated-form/default/preview.1756784287227.png","pc":"amanshakya1808","tg":["sign-up"]},{"id":"21st:amanshakya1808__animated-otp","t":"Animated otp","d":"Here is Animated OTP component","k":"component","s":"21st","c":"inputs/otp-input","g":"inputs","a":"amanshakya1808","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-otp/default/preview.1756784376451.png","pc":"amanshakya1808"},{"id":"21st:amanshakya1808__bot-detection","t":"Bot detection","d":"Here is Bot Detection component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"amanshakya1808","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bot-detection/default/preview.1756784459558.png","pc":"amanshakya1808","tg":["ai-chat","features"]},{"id":"21st:amanshakya1808__framework-agnostic","t":"Framework agnostic","d":"Here is Framework Agnostic component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"amanshakya1808","st":"indexed","pl":"https://cdn.21st.dev/larsen66/framework-agnostic/default/preview.1756784508135.png","pc":"amanshakya1808","tg":["features"]},{"id":"21st:amanshakya1808__fraud-card","t":"Fraud card","d":"Here is Fraud Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"amanshakya1808","st":"indexed","u":44,"pl":"https://cdn.21st.dev/larsen66/fraud-card/default/preview.1756784607671.png","pc":"amanshakya1808","tg":["alert","card","timeline"]},{"id":"21st:amanshakya1808__notification-center","t":"Notification center","d":"Here is Notification Center component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"amanshakya1808","st":"indexed","u":38,"pl":"https://cdn.21st.dev/larsen66/notification-center/default/preview.1756784625586.png","pc":"amanshakya1808","tg":["notification","toast"]},{"id":"21st:amanshakya307__auralis","t":"Auralis","d":"A WebGL animated background with layered simplex noise, glowing light, vignette, and film grain for a dramatic ambient hero effect.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/auralis/default/preview.1783573431224.png","pc":"amanshakya307","tg":["background"]},{"id":"21st:amanshakya307__chromatic-fluid","t":"Chromatic fluid","d":"A WebGL-powered animated fluid background with procedural noise, chromatic glint highlights, dynamic lighting, and film grain.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/chromatic-fluid/default/preview.1785316466320-43a6272f-a361-4c3a-8683-b3db0b2032a0.png","pc":"amanshakya307"},{"id":"21st:amanshakya307__cloudscape","t":"Cloudscape","d":"A WebGL-powered animated cloud gradient that renders a soft, flowing sky-like background using layered noise and color blending.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amanshakya307","st":"indexed","u":4,"pl":"https://cdn.21st.dev/amanshakya307/cloudscape/default/preview.1785314796960-ddb6d3a3-ee89-41d3-8cc5-7c3ecca9f41b.png","pc":"amanshakya307"},{"id":"21st:amanshakya307__cosmicrift","t":"Cosmicrift","d":"An animated WebGL cosmic background with a procedural twinkling starfield and flowing nebula-like wave distortions rendered in real time with shaders.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/cosmicrift/default/preview.1784720439874-fa190c81-0834-4243-9e95-14a4c23e8f92.png","pc":"amanshakya307"},{"id":"21st:amanshakya307__onboard-card","t":"Onboard card","d":"Animated onboarding progress card showing three steps with visual loaders, transitions, and completion indicators.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"amanshakya307","st":"indexed","u":91,"pl":"https://cdn.21st.dev/amanshakya307/onboard-card/default/preview.1751713748630.png","pc":"amanshakya307","tg":["onboarding","progress","spinner","steps"]},{"id":"21st:amanshakya307__stack-ripple","t":"Stack ripple","d":"Stacked notification cards that ripple open with spring animations to reveal messages, signups, and billing reminders.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/stack-ripple/default/preview.1784429299307-e4079112-58d6-4c93-aed2-026a92ef73fa.png","pc":"amanshakya307"},{"id":"21st:amanshakya307__text-morph","t":"Text morph","d":"An animated text component that rotates through a list of words with a per-character blur-and-fade transition.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/text-morph/default/preview.1784147158449.png","pc":"amanshakya307","tg":["text"]},{"id":"21st:amanshakya307__velaris","t":"Velaris","d":"A WebGL-powered animated background featuring layered simplex noise, multi-color blending, vignette glow, and subtle film grain effects.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amanshakya307","st":"indexed","pl":"https://cdn.21st.dev/amanshakya307/velaris/default/preview.1783572820237.png","pc":"amanshakya307","tg":["background"]},{"id":"21st:ameddeb48__gamified-progress-tracker","t":"Gamified progress tracker","d":"A colorful, game-inspired progress bar with level markers, smooth animations, and a confetti celebration when reaching 100%. Perfect for gamified learning, fitness, or productivity","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ameddeb48","st":"rated","pl":"https://cdn.21st.dev/ameddeb48/gamified-progress-tracker/default/preview.1758377920704.png","pc":"ameddeb48","sc":19},{"id":"21st:ameddeb48__hero","t":"Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ameddeb48","st":"indexed","pl":"https://cdn.21st.dev/ameddeb48/hero/default/preview.1758752327676.png","pc":"ameddeb48"},{"id":"21st:ameddeb48__pricing-section","t":"Pricing section","d":"A fully responsive SaaS pricing section displaying multiple subscription tiers with features, pricing, and highlighted popular plans. Designed for clarity and conversion, this sect","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ameddeb48","st":"indexed","pl":"https://cdn.21st.dev/ameddeb48/pricing-section/default/preview.1758725515836.png","pc":"ameddeb48"},{"id":"21st:ameddeb48__text-card","t":"Text card","d":"A simple, responsive card component that fetches text from an API and displays it in a clean layout.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ameddeb48","st":"indexed","pl":"https://cdn.21st.dev/ameddeb48/text-card/default/preview.1758475658499.png","pc":"ameddeb48"},{"id":"21st:amit.haski__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#4C6CB3, #B28FCE, #F4B3C2). Features: soft blur finish, film grain, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"amit.haski","st":"indexed","u":5,"pl":"https://cdn.21st.dev/amit.haski/silk-blend-gradient/default/preview.1783875362854.png","pc":"amit.haski","tg":["background","hero"]},{"id":"21st:ammohith2005__gdg-logo-google-developer-groups","t":"Gdg logo google developer groups","k":"component","s":"21st","c":"marketing","g":"marketing","a":"ammohith2005","st":"indexed","pl":"https://cdn.21st.dev/ammohith2005/gdg-logo-google-developer-groups/default/preview.1767522384229.png","pc":"ammohith2005"},{"id":"21st:amxn.yadav__pricing","t":"Pricing","d":"Pricing component ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"amxn.yadav","st":"indexed","pl":"https://cdn.21st.dev/amxn.yadav/pricing/default/preview.1763831363041.png","pc":"amxn.yadav"},{"id":"21st:andrewlu0__3d-icon-tabs-1","t":"3d icon tabs 1","d":"Animated tabs, inspired by Airbnb's latest design update.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"andrewlu0","st":"indexed","u":61,"pl":"https://cdn.21st.dev/andrewlu0/3d-icon-tabs-1/default/preview.1747330096652.png","pc":"andrewlu0","tg":["tabs"]},{"id":"21st:andrewlu0__filters","t":"Filters","d":"A Linear inspired component to add / edit filters","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"andrewlu0","st":"rated","u":1030,"pl":"https://cdn.21st.dev/user_2sUpDx8JMTC3m5cKaN6Z3Uhc8Q4/filters/default/preview.1740483874850.png","pc":"andrewlu0","tg":["dropdown","popover"],"sc":24},{"id":"21st:andrewlu0__pdf-viewer","t":"Pdf viewer","d":"A basic PDF viewer, using shadcn components + react-pdf","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"andrewlu0","st":"rated","pl":"https://cdn.21st.dev/andrewlu0/pdf-viewer/default/preview.1747235833531.png","pc":"andrewlu0","tg":["sidebar"],"sc":21},{"id":"21st:anilkumarab2017__ff","t":"Ff","d":"fffffffffffffff","k":"component","s":"21st","c":"other","g":"other","a":"anilkumarab2017","st":"indexed","pl":"https://cdn.21st.dev/anilkumarab2017/ff/default/preview.1750837871493.png","pc":"anilkumarab2017"},{"id":"21st:animbits__image-text","t":"Image text","d":"Large heading text filled with an animated image mask that pans and can cycle between multiple photos.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"animbits","st":"indexed","u":5,"pl":"https://cdn.21st.dev/animbits/image-text/default/preview.1783719008594.png","pc":"animbits","tg":["image"]},{"id":"21st:animbits__loaders-bars","t":"Loaders bars","d":"An animated bars loader with configurable count, size, gap, color, and speed for indicating loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-bars/default/preview.1784722971142-5ddfb36b-a142-4c48-9e7f-abc416f9b2e6.png","pc":"animbits","tg":["spinner"]},{"id":"21st:animbits__loaders-dots","t":"Loaders dots","d":"An animated bouncing dots loading indicator with configurable size, count, gap, color and speed.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-dots/default/preview.1785316664568-b5923fdb-5fdd-4f50-9d0b-6dcffe5168fc.png","pc":"animbits"},{"id":"21st:animbits__loaders-gooey-blobs","t":"Loaders gooey blobs","d":"An animated loading indicator of organic merging blobs that stretch and squash using an SVG gooey filter.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","u":30,"pl":"https://cdn.21st.dev/animbits/loaders-gooey-blobs/default/preview.1784250897437-8b570bcb-0b82-483d-9e4a-f3932c3907ba.png","pc":"animbits","tg":["spinner"]},{"id":"21st:animbits__loaders-liquid-progress","t":"Loaders liquid progress","d":"A liquid-style progress bar that fills horizontally with a soft glowing gradient as it advances.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-liquid-progress/default/preview.1784365020234-f3a6a808-1a10-4300-8620-44fdd683b96a.png","pc":"animbits","tg":["progress","upload-download"]},{"id":"21st:animbits__loaders-morphing","t":"Loaders morphing","d":"A shape-shifting loading spinner that continuously morphs between rounded and square forms while rotating and scaling.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","u":30,"pl":"https://cdn.21st.dev/animbits/loaders-morphing/default/preview.1784251202994-8a6f8ad5-6753-424a-a7c2-f60e97ffb645.png","pc":"animbits","tg":["spinner"]},{"id":"21st:animbits__loaders-orbit","t":"Loaders orbit","d":"A loading spinner with configurable particles rotating in a circular orbit.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-orbit/default/preview.1785316815602-3c393bf6-0b93-4de1-b203-255f165a19d1.png","pc":"animbits"},{"id":"21st:animbits__loaders-pulse","t":"Loaders pulse","d":"A pulsing circle loading indicator that smoothly scales and fades to signal background activity.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-pulse/default/preview.1784669112846-d132e264-d278-4825-bfca-348ae1b30775.png","pc":"animbits","tg":["spinner"]},{"id":"21st:animbits__loaders-skeleton","t":"Loaders skeleton","d":"A shimmer skeleton placeholder that animates a moving highlight to indicate loading content.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-skeleton/default/preview.1784250154216-77c69d30-c357-46c3-a427-5f7e89929a5d.png","pc":"animbits","tg":["card","spinner"]},{"id":"21st:animbits__loaders-spinner","t":"Loaders spinner","d":"A circular spinning loader with configurable size, color, border width, and animation speed.","k":"component","s":"21st","c":"status/loader","g":"status","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/loaders-spinner/default/preview.1784260400770-8bf78d9a-c3c8-45e4-977d-97abd01f9660.png","pc":"animbits","tg":["spinner"]},{"id":"21st:animbits__specials-linear-carousel","t":"Specials linear carousel","d":"A smooth-scrolling horizontal 3D card carousel with infinite loop, drag-to-scroll, autoplay, and shared-element card expansion inspired by Linear.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"animbits","st":"indexed","u":6,"pl":"https://cdn.21st.dev/animbits/specials-linear-carousel/default/preview.1784313252772-878f3b42-2d8a-4d7c-bce1-15faa7711527.png","pc":"animbits","tg":["carousel","gallery","image","scroll-area"]},{"id":"21st:animbits__specials-magnetic-drawer","t":"Specials magnetic drawer","d":"A physics-based bottom drawer that can be dragged and snaps to configurable magnetic snap points with spring animation.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/specials-magnetic-drawer/default/preview.1783728864878.png","pc":"animbits"},{"id":"21st:animbits__text-blur-in","t":"Text blur in","d":"Animated text that reveals itself with a blur-in effect, word by word or character by character.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","u":6,"pl":"https://cdn.21st.dev/animbits/text-blur-in/default/preview.1783714038850.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-dia","t":"Text dia","d":"An animated text component that cycles through a list of words with a spring slide-up transition and a gradient sweep reveal.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-dia/default/preview.1783714060141.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-fade-in","t":"Text fade in","d":"Text that animates into view by fading in word by word or character by character.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-fade-in/default/preview.1783713716536.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-slide-up","t":"Text slide up","d":"Animated text that reveals itself by sliding up word by word or character by character.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-slide-up/default/preview.1783713828840.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-split-reveal","t":"Text split reveal","d":"Animated text that reveals with a vertical split effect, sliding each half in from the center on mount.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-split-reveal/default/preview.1784465868498-c2a2dad8-c7c7-40c0-8407-0df4a8b618d2.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-svg-text-draw","t":"Text svg text draw","d":"Animated SVG text that draws each letter stroke by stroke to reveal a word.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-svg-text-draw/default/preview.1783718759011.png","pc":"animbits","tg":["text"]},{"id":"21st:animbits__text-word-carousel","t":"Text word carousel","d":"An inline text animation that cycles through a list of words with a smooth vertical fade-and-slide transition.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"animbits","st":"indexed","pl":"https://cdn.21st.dev/animbits/text-word-carousel/default/preview.1783714120663.png","pc":"animbits","tg":["text"]},{"id":"21st:anish-1144__folder","t":"Folder","d":"An animated folder component that opens and fans out pages when clicked. Features a dark-themed folder with a tab notch, spring-physics page animations, and a tooltip bubble — buil","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"anish-1144","st":"indexed","pl":"https://cdn.21st.dev/anish-1144/folder/default/preview.1779794604064.png","pc":"anish-1144","tg":["tooltip"]},{"id":"21st:anish-1144__impact-section","t":"Impact section","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"anish-1144","st":"indexed","pl":"https://cdn.21st.dev/anish-1144/impact-section/default/preview.1779880902281.png","pc":"anish-1144"},{"id":"21st:anishvyapari__e43wr","t":"E43wr","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a neon look. A drop-in, zero-dependency React co","k":"component","s":"21st","c":"media/player","g":"media","a":"anishvyapari","st":"indexed","pl":"https://cdn.21st.dev/anishvyapari/e43wr/default/preview.1783766064478.webp","pc":"anishvyapari","tg":["video"]},{"id":"21st:ankitsharma2615__process-pillars","t":"Process pillars","d":"Process Pillars is a visually intuitive component that represents a typical product development lifecycle. It uses a segmented progress bar style to display five distinct phases. E","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ankitsharma2615","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ankitsharma2615/process-pillars/default/preview.1750692828233.png","pc":"ankitsharma2615","tg":["progress","steps"]},{"id":"21st:annstav__mesh-drift-shader","t":"Mesh drift shader","d":"Animated WebGL shader background in the Mesh drift style. Generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"annstav","st":"indexed","pl":"https://cdn.21st.dev/annstav/mesh-drift-shader/default/preview.1785282320307-779883a9-09d9-4876-9797-440ec69053e6.webp","pc":"annstav"},{"id":"21st:anonbreadwinner__all-about-the-benjamins","t":"All about the benjamins","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"anonbreadwinner","st":"indexed","pl":"https://cdn.21st.dev/anonbreadwinner/all-about-the-benjamins/default/preview.1784487062045-ce3e7cdb-f26a-479b-8642-0ac43942b5b9.webp","pc":"anonbreadwinner","tg":["video"]},{"id":"21st:anshuman008__faq-chat-accordion","t":"Faq chat accordion","d":"FAQ Accordion component is a versatile and interactive UI element designed to display frequently asked questions in a collapsible format. It enhances user experience by allowing us","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"anshuman008","st":"indexed","u":258,"pl":"https://cdn.21st.dev/user_anshuman008/faq-chat-accordion.png","pc":"anshuman008","tg":["accordion","faq","icon"]},{"id":"21st:antdesign__breadcrumb","t":"Breadcrumb","d":"Here is Breadcrumb component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"antdesign","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/breadcrumb/default/preview.1758089070275.png","pc":"antdesign","tg":["link","navigation-menu"]},{"id":"21st:antdesign__button-ant","t":"Button ant","d":"Here is Button Ant component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"antdesign","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/button-ant/default/preview.1758087196187.png","pc":"antdesign","tg":["button","dropdown","icon","link"]},{"id":"21st:antdesign__dropdown","t":"Dropdown","d":"Here is Dropdown component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"antdesign","st":"indexed","u":34,"pl":"https://cdn.21st.dev/larsen66/dropdown/default/preview.1758091136264.png","pc":"antdesign","tg":["dropdown","menu","tooltip"]},{"id":"21st:antdesign__float-button","t":"Float button","d":"Here is FloatButton component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"antdesign","st":"indexed","pl":"https://cdn.21st.dev/larsen66/float-button/default/preview.1758088368242.png","pc":"antdesign","tg":["badge","button","icon","notification"]},{"id":"21st:antdesign__floating-action-menu","t":"Floating action menu","d":"A floating action menu component made with framer motion and tailwind css.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"antdesign","st":"indexed","pl":"https://cdn.21st.dev/larsen66/floating-action-menu/default/preview.1759953239614.png","pc":"antdesign"},{"id":"21st:antdesign__menu-1","t":"Menu 1","d":"Here is Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"antdesign","st":"indexed","pl":"https://cdn.21st.dev/larsen66/menu-1/default/preview.1758091622743.png","pc":"antdesign","tg":["icon","list","menu","navigation-menu"]},{"id":"21st:antdesign__pagination-ant","t":"Pagination ant","d":"Here is Pagination component","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"antdesign","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/pagination-ant/default/preview.1758093863798.png","pc":"antdesign","tg":["input","number","navigation-menu","pagination"]},{"id":"21st:antonio.salas22__malinois","t":"Malinois","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"antonio.salas22","st":"indexed","pl":"https://cdn.21st.dev/antonio.salas22/malinois/default/preview.1786524651159-58e76776-444e-4e8f-b312-1356a38b55c3.webp","pc":"antonio.salas22"},{"id":"21st:anubra266__accordion-1","t":"Accordion 1","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/accordion-1/default/preview.1756477598764.png","pc":"anubra266","tg":["accordion","faq","icon","list"]},{"id":"21st:anubra266__angle-slider","t":"Angle slider","d":"Here is Angle Slider component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"anubra266","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/angle-slider/default/preview.1756476749742.png","pc":"anubra266","tg":["slider"]},{"id":"21st:anubra266__basic-slider","t":"Basic slider","d":"Here is Slider component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"anubra266","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/basic-slider/default/preview.1756190713047.png","pc":"anubra266","tg":["number","slider"]},{"id":"21st:anubra266__basic-tags-input","t":"Basic tags input","d":"Here is Tags Input component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/basic-tags-input/default/preview.1756149501174.png","pc":"anubra266","tg":["chip"]},{"id":"21st:anubra266__basic-toast","t":"Basic toast","d":"Here is Toast component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"anubra266","st":"indexed","u":120,"pl":"https://cdn.21st.dev/larsen66/basic-toast/default/preview.1756145123655.png","pc":"anubra266","tg":["alert","notification","progress","toast"]},{"id":"21st:anubra266__calendar-1","t":"Calendar 1","d":"Here is Calendar component","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"anubra266","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/calendar-1/default/preview.1756375949951.png","pc":"anubra266","tg":["calendar","date-picker","slider"]},{"id":"21st:anubra266__carousel-1","t":"Carousel 1","d":"Here is Carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"anubra266","st":"indexed","u":105,"pl":"https://cdn.21st.dev/larsen66/carousel-1/default/preview.1756419020961.png","pc":"anubra266","tg":["carousel","gallery","pagination","slider"]},{"id":"21st:anubra266__checkbox-1","t":"Checkbox 1","d":"Here is Checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"anubra266","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/checkbox-1/default/preview.1756418319876.png","pc":"anubra266","tg":["card","checkbox","list","pricing-section"]},{"id":"21st:anubra266__collapsible-1","t":"Collapsible 1","d":"Here is Collapsible component","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"anubra266","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/collapsible-1/default/preview.1756417984200.png","pc":"anubra266","tg":["accordion","faq","icon","toggle"]},{"id":"21st:anubra266__color-picker","t":"Color picker","d":"Here is Color Picker component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"anubra266","st":"indexed","u":67,"pl":"https://cdn.21st.dev/larsen66/color-picker/default/preview.1756377504083.png","pc":"anubra266","tg":["slider"]},{"id":"21st:anubra266__combobox","t":"Combobox","d":"Here is Combobox component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"anubra266","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/combobox/default/preview.1756376835475.png","pc":"anubra266","tg":["dropdown","form","input","search"]},{"id":"21st:anubra266__countdown-timer","t":"Countdown timer","d":"Countdown Timer","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/countdown-timer/default/preview.1756146847283.png","pc":"anubra266"},{"id":"21st:anubra266__dialog-2","t":"Dialog 2","d":"Here is Dialog component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"anubra266","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/dialog-2/default/preview.1756375737177.png","pc":"anubra266","tg":["alert","avatar","checkbox","form"]},{"id":"21st:anubra266__editable-components","t":"Editable components","d":"Here is Editable Components ","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"anubra266","st":"indexed","u":38,"pl":"https://cdn.21st.dev/larsen66/editable-components/default/preview.1756369082387.png","pc":"anubra266","tg":["form","profile","textarea"]},{"id":"21st:anubra266__field-components","t":"Field components","d":"Here is Field Components ","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"anubra266","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/field-components/default/preview.1756339627539.png","pc":"anubra266","tg":["form","input","search","select"]},{"id":"21st:anubra266__file-upload-1","t":"File upload 1","d":"Here is File Upload component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"anubra266","st":"indexed","u":76,"pl":"https://cdn.21st.dev/larsen66/file-upload-1/default/preview.1756339006637.png","pc":"anubra266","tg":["avatar","gallery","grid","image"]},{"id":"21st:anubra266__floating-panel","t":"Floating panel","d":"Here is Floating Panel component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/floating-panel/default/preview.1756338679830.png","pc":"anubra266","tg":["badge","avatar","dashboard","dropdown"]},{"id":"21st:anubra266__hover-card","t":"Hover card","d":"Here is Hover Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hover-card/default/preview.1756338319689.png","pc":"anubra266","tg":["card","link","popover","profile"]},{"id":"21st:anubra266__listbox","t":"Listbox","d":"Here is Listbox component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/listbox/default/preview.1756337166684.png","pc":"anubra266","tg":["checkbox","list","menu","select"]},{"id":"21st:anubra266__menu-1","t":"Menu 1","d":"Here is Context Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/menu-1/default/preview.1756335583455.png","pc":"anubra266","tg":["dropdown","menu"]},{"id":"21st:anubra266__number-input","t":"Number input","d":"Here is Number Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/number-input/default/preview.1756330499544.png","pc":"anubra266","tg":["form","input"]},{"id":"21st:anubra266__pagination","t":"Pagination","d":"Here is Pagination component","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"anubra266","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/pagination/default/preview.1756329753380.png","pc":"anubra266","tg":["button","dashboard","dropdown","navigation-menu"]},{"id":"21st:anubra266__password-input","t":"Password input","d":"Here is Password Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/password-input/default/preview.1756290292797.png","pc":"anubra266","tg":["form","input"]},{"id":"21st:anubra266__pin-input","t":"Pin input","d":"Here is Pin Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pin-input/default/preview.1756242175982.png","pc":"anubra266","tg":["input"]},{"id":"21st:anubra266__popover-1","t":"Popover 1","d":"Here is Popover component","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"anubra266","st":"indexed","u":87,"pl":"https://cdn.21st.dev/larsen66/popover-1/default/preview.1756241395995.png","pc":"anubra266","tg":["badge","avatar","dropdown","form"]},{"id":"21st:anubra266__progress-1","t":"Progress 1","d":"Here is Progress component","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"anubra266","st":"indexed","u":66,"pl":"https://cdn.21st.dev/larsen66/progress-1/default/preview.1756196274177.png","pc":"anubra266","tg":["progress","spinner"]},{"id":"21st:anubra266__qr-code","t":"Qr code","d":"Here is QR Code component","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"anubra266","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/qr-code/default/preview.1756195713897.png","pc":"anubra266","tg":["grid","link","profile"]},{"id":"21st:anubra266__radio-group","t":"Radio group","d":"Here is Radio Group component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group/default/preview.1756195294393.png","pc":"anubra266","tg":["badge","card","grid","form"]},{"id":"21st:anubra266__rating-group","t":"Rating group","d":"Here is Rating Group component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"anubra266","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/rating-group/default/preview.1756194579070.png","pc":"anubra266","tg":["checkbox","radio-group","textarea"]},{"id":"21st:anubra266__segment-group","t":"Segment group","d":"Here is Segment Group component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/segment-group/default/preview.1756194930849.png","pc":"anubra266","tg":["tabs"]},{"id":"21st:anubra266__select-1","t":"Select 1","d":"Here is Select component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"anubra266","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/select-1/default/preview.1756191967726.png","pc":"anubra266","tg":["dropdown","list","select","team"]},{"id":"21st:anubra266__signature-pad","t":"Signature pad","d":"Here is Signature Pad component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"anubra266","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/signature-pad/default/preview.1756191359488.png","pc":"anubra266"},{"id":"21st:anubra266__splitter","t":"Splitter","d":"Here is Splitter component","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/splitter/default/preview.1756154951082.png","pc":"anubra266","tg":["sidebar"]},{"id":"21st:anubra266__steps","t":"Steps","d":"Here is Steps component","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"anubra266","st":"indexed","u":156,"pl":"https://cdn.21st.dev/larsen66/steps/default/preview.1756154461807.png","pc":"anubra266","tg":["icon","progress","steps"]},{"id":"21st:anubra266__switch-1","t":"Switch 1","d":"Here is Switch component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"anubra266","st":"indexed","u":56,"pl":"https://cdn.21st.dev/larsen66/switch-1/default/preview.1756154623505.png","pc":"anubra266","tg":["border","toggle"]},{"id":"21st:anubra266__tabs-component","t":"Tabs component","d":"Here is Tabs component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"anubra266","st":"indexed","u":49,"pl":"https://cdn.21st.dev/larsen66/tabs-component/default/preview.1756152302655.png","pc":"anubra266","tg":["dashboard","navigation-menu","tabs"]},{"id":"21st:anubra266__timeline-animation","t":"Timeline animation","d":"A timeline animation using Framer Motion that animates items one by one as you reach each specific section","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"anubra266","st":"indexed","u":39,"pl":"https://cdn.21st.dev/uilayout.contact/timeline-animation/default/preview.1756232580408.png","pc":"anubra266","tg":["timeline"]},{"id":"21st:anubra266__toggle-basic","t":"Toggle basic","d":"Here is Toggle component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-basic/default/preview.1756144227740.png","pc":"anubra266","tg":["toggle"]},{"id":"21st:anubra266__toggle-group","t":"Toggle group","d":"Here is Toggle Group component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-group/default/preview.1756144661337.png","pc":"anubra266","tg":["toggle"]},{"id":"21st:anubra266__tooltip-1","t":"Tooltip 1","d":"Here is Tooltip component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tooltip-1/default/preview.1756143690093.png","pc":"anubra266","tg":["dashboard","popover","tooltip","video"]},{"id":"21st:anubra266__tree-view","t":"Tree view","d":"Here is Tree View component","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"anubra266","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tree-view/default/preview.1756143020888.png","pc":"anubra266","tg":["file-tree","list","spinner"]},{"id":"21st:anurag-mishra22__animated-card-balance","t":"Animated card balance","d":"Animated Card Balance","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-card-balance/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-cool-text","t":"Animated cool text","d":"Animated Cool Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-cool-text/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-fuse-text","t":"Animated fuse text","d":"Animated Fuse Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-fuse-text/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-glitch-text","t":"Animated glitch text","d":"Animated Glitch Text\n","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":38,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-glitch-text/default/preview.1738001691046.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-loading-skeleton","t":"Animated loading skeleton","d":"Animated Loading Skeleton","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"anurag-mishra22","st":"indexed","u":157,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-loading-skeleton/default/preview.1738001324466.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-loading-wait","t":"Animated loading wait","d":"Animated Loading Wait","k":"component","s":"21st","c":"status/loader","g":"status","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-loading-wait/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-reveal-text","t":"Animated reveal text","d":"Animated Reveal Text\n","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":35,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-reveal-text/default/preview.1738001560800.png","pc":"anurag-mishra22","tg":["text"]},{"id":"21st:anurag-mishra22__animated-rocket-loader","t":"Animated rocket loader","d":"Animated Rocket Loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-rocket-loader/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__animated-shiny-text","t":"Animated shiny text","d":"Animated Shiny Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":227,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-shiny-text/default/preview.1737996819112.png","pc":"anurag-mishra22","tg":["text"]},{"id":"21st:anurag-mishra22__animated-text","t":"Animated text","d":"Cool Animated Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":141,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-text/default/preview.1738001665807.png","pc":"anurag-mishra22","tg":["text"]},{"id":"21st:anurag-mishra22__animated-underline-text-one","t":"Animated underline text one","d":"Animated Underline Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":675,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/animated-underline-text-one/default/preview.1738001029658.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__circular-reveal-heading","t":"Circular reveal heading","d":"Circular Reveal Heading","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":205,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/circular-reveal-heading/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__dock","t":"Dock","d":"Neumorphism Dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/dock/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__dock-two","t":"Dock two","d":"Cool Animated Dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/dock-two/default/preview.1738001948715.png","pc":"anurag-mishra22","tg":["dock","tooltip"]},{"id":"21st:anurag-mishra22__hero-section","t":"Hero section","d":"Hero Section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/hero-section/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__interactive-bento-gallery","t":"Interactive bento gallery","d":"Interactive Bento Gallery","k":"component","s":"21st","c":"media/gallery","g":"media","a":"anurag-mishra22","st":"indexed","u":617,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/interactive-bento-gallery/bento/preview.png","pc":"anurag-mishra22","tg":["gallery","video"]},{"id":"21st:anurag-mishra22__loader-one","t":"Loader one","d":"Cool Animated Loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/loader-one/default/preview.png","pc":"anurag-mishra22","tg":["spinner"]},{"id":"21st:anurag-mishra22__pricing-container","t":"Pricing container","d":"Pricing Container","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/pricing-container/default/preview.1737993784447.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__progress-indicator","t":"Progress indicator","d":"This fluid steps animation is perfect for progress indicators or onboarding flows! 🚀✨","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"anurag-mishra22","st":"indexed","u":214,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/progress-indicator/default/preview.png","pc":"anurag-mishra22","tg":["onboarding","steps"]},{"id":"21st:anurag-mishra22__serious-loader","t":"Serious loader","d":"Serious Loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/serious-loader/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__testimonial","t":"Testimonial","d":"Dragable testimonial, where user can swap to change","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"anurag-mishra22","st":"indexed","u":224,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/testimonial/default/preview.1738001624255.png","pc":"anurag-mishra22","tg":["carousel","testimonials"]},{"id":"21st:anurag-mishra22__text-five","t":"Text five","d":"Coming Soon Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/text-five/default/preview.png","pc":"anurag-mishra22"},{"id":"21st:anurag-mishra22__text-three","t":"Text three","d":"Animated Typewriter Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"anurag-mishra22","st":"indexed","u":8,"pl":"https://cdn.21st.dev/user_2rdX0nxNZVHvzWonaWWUowA52VG/text-three/default/preview.png","pc":"anurag-mishra22","tg":["text"]},{"id":"21st:apearlsd__axis-blend-gradient","t":"Axis blend gradient","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#2E3192, #1BFFFF). Features: film grain, vignette. A drop-in, zero-d","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"apearlsd","st":"indexed","pl":"https://cdn.21st.dev/apearlsd/axis-blend-gradient/default/preview.1786346738590-8f662d31-a289-4af8-b02c-fc97f582cdc8.webp","pc":"apearlsd"},{"id":"21st:appvibed01__animated-testimonial","t":"Animated testimonial","d":"A visually striking testimonial section with animated cards, parallax hover motion, and dynamic gradient backgrounds.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"appvibed01","st":"indexed","pl":"https://cdn.21st.dev/appvibed01/animated-testimonial/default/preview.1762388115763.png","pc":"appvibed01"},{"id":"21st:appvibed01__auth-switch","t":"Auth switch","d":"A modern animated authentication component with Sign In and Sign Up forms, social login icons, and smooth transitions between modes.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"appvibed01","st":"rated","pl":"https://cdn.21st.dev/appvibed01/auth-switch/default/preview.1761344359841.png","pc":"appvibed01","tg":["form","sign-in","sign-up"],"sc":14},{"id":"21st:appvibed01__creative-left-nav","t":"Creative left nav","d":"A sleek, animated left navigation menu built with React, Framer Motion, and Lucide icons. It includes smooth transitions, a collapsible layout, active state highlighting, and a use","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"appvibed01","st":"indexed","pl":"https://cdn.21st.dev/appvibed01/creative-left-nav/default/preview.1761534931290.png","pc":"appvibed01"},{"id":"21st:appvibed01__shopify-3d-globe","t":"Shopify 3d globe","d":"A 3D animated Shopify-style globe built with react-globe.gl, featuring teal-green continents, golden arcs representing connections, and interactive pin drops. Ideal for dashboards,","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"appvibed01","st":"indexed","pl":"https://cdn.21st.dev/appvibed01/shopify-3d-globe/default/preview.1761536938788.png","pc":"appvibed01"},{"id":"21st:appvibed01__split-flap-metrics-board","t":"Split flap metrics board","d":"A split-flap metrics board for SRE/Platform/DevOps dashboards. Great for surfacing live usage—users, services, deploys, requests, logs—without a chart wall.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"appvibed01","st":"rated","pl":"https://cdn.21st.dev/appvibed01/split-flap-metrics-board/default/preview.1762400062661.png","pc":"appvibed01","sc":25},{"id":"21st:appvibed01__why-app-vibed","t":"Why app vibed","d":"A modern two-column scrollspy section highlighting AppVibed’s key advantages. Includes sticky navigation, Intersection Observer tracking, smooth scrolling, and gradient-accented UI","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"appvibed01","st":"indexed","pl":"https://cdn.21st.dev/appvibed01/why-app-vibed/default/preview.1761286028751.png","pc":"appvibed01"},{"id":"21st:aquadk__button","t":"Button","d":"Prime button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"aquadk","st":"indexed","pl":"https://cdn.21st.dev/aquadk/button/default/preview.1761207945712.png","pc":"aquadk"},{"id":"21st:arhamkhnz__playful-todolist","t":"Playful todolist","d":"A playful todolist component with animated wavy strikethroughs for each completed task.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"arhamkhnz","st":"indexed","u":14,"pl":"https://cdn.21st.dev/arhamkhnz/playful-todolist/default/preview.1758005921181.png","pc":"arhamkhnz","tg":["checkbox"]},{"id":"21st:arhamkhnz__radial-intro","t":"Radial intro","d":"A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"arhamkhnz","st":"indexed","u":45,"pl":"https://cdn.21st.dev/arhamkhnz/radial-intro/default/preview.1762882208925.png","pc":"arhamkhnz"},{"id":"21st:arhamkhnz__radial-menu","t":"Radial menu","d":"A circular context menu built with Base UI, displaying actions in a clean radial layout with full keyboard support and smooth interaction.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"arhamkhnz","st":"rated","u":90,"pl":"https://cdn.21st.dev/arhamkhnz/radial-menu/default/preview.1763634251282.png","pc":"arhamkhnz","tg":["menu"],"sc":23},{"id":"21st:arhamkhnz__radial-nav","t":"Radial nav","d":"A circular navigation menu with animated pointer and expanding buttons for smooth interactive transitions.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"arhamkhnz","st":"indexed","pl":"https://cdn.21st.dev/arhamkhnz/radial-nav/default/preview.1759606918256.png","pc":"arhamkhnz"},{"id":"21st:arhamkhnz__spring-element","t":"Spring element","d":"A flexible, animated spring component that attaches a draggable element (avatar, text, icon, or any React node) to its origin with a spring line.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"arhamkhnz","st":"indexed","pl":"https://cdn.21st.dev/arhamkhnz/spring-element/default/preview.1748976121623.png","pc":"arhamkhnz"},{"id":"21st:arifuzzamanmoin__heximage","t":"Heximage","d":"Animated (flicker) ASCII art in the Hex Dump style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ","k":"component","s":"21st","c":"media/player","g":"media","a":"arifuzzamanmoin","st":"indexed","pl":"https://cdn.21st.dev/arifuzzamanmoin/heximage/default/preview.1784542877159-0bdabff8-0f8e-4477-aafc-2b77f22da531.webp","pc":"arifuzzamanmoin","tg":["video"]},{"id":"21st:arihantcodes_1f7b8c4d__avatar-1","t":"Avatar 1","d":"Here is Avatar component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/avatar-1/default/preview.1754078886435.png","pc":"arihantcodes_1f7b8c4d","tg":["avatar","profile","team","tooltip"]},{"id":"21st:arihantcodes_1f7b8c4d__base-button","t":"Base button","d":"Here is Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"arihantcodes_1f7b8c4d","st":"indexed","u":58,"pl":"https://cdn.21st.dev/larsen66/base-button/default/preview.1754059136390.png","pc":"arihantcodes_1f7b8c4d","tg":["button","link","notification","profile"]},{"id":"21st:arihantcodes_1f7b8c4d__dual-range-slider","t":"Dual range slider","d":"An enhancement slider that allows you to select a range of values.\n","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"arihantcodes_1f7b8c4d","st":"indexed","u":120,"pl":"https://cdn.21st.dev/user_arihantcodes/dual-range-slider.png","pc":"arihantcodes_1f7b8c4d","tg":["slider"]},{"id":"21st:arihantcodes_1f7b8c4d__event-calendar","t":"Event calendar","d":"Here is Event Calendar component","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/larsen66/event-calendar/default/preview.1754084488898.png","pc":"arihantcodes_1f7b8c4d","tg":["calendar"]},{"id":"21st:arihantcodes_1f7b8c4d__feedback-card","t":"Feedback card","d":"Here is Feedback card","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"arihantcodes_1f7b8c4d","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/feedback-card/default/preview.1750438816469.png","pc":"arihantcodes_1f7b8c4d","tg":["textarea"]},{"id":"21st:arihantcodes_1f7b8c4d__floating-label","t":"Floating label","d":"Here is Floating Label component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"arihantcodes_1f7b8c4d","st":"indexed","u":53,"pl":"https://cdn.21st.dev/larsen66/floating-label/default/preview.1750439019312.png","pc":"arihantcodes_1f7b8c4d","tg":["input"]},{"id":"21st:arihantcodes_1f7b8c4d__floating-navbar","t":"Floating navbar","d":"A pill-shaped floating navigation bar with rounded icon buttons and a dropdown action menu for quick app navigation.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/floating-navbar/default/preview.1784720473168-1aed6c8b-d039-4b9e-9e54-18ecc700614d.png","pc":"arihantcodes_1f7b8c4d","tg":["dropdown"]},{"id":"21st:arihantcodes_1f7b8c4d__footer-section","t":"Footer section","d":"Basic footer section with theme toggle","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"arihantcodes_1f7b8c4d","st":"indexed","u":2040,"pl":"https://cdn.21st.dev/user_arihantcodes/footer-section.png","pc":"arihantcodes_1f7b8c4d","tg":["footer","link","toggle"]},{"id":"21st:arihantcodes_1f7b8c4d__image-preview","t":"Image preview","d":"A clickable image thumbnail that opens a full-size lightbox preview in a modal overlay with a close button.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/image-preview/default/preview.1784452173162-bcab821b-85ef-44e2-8977-2ddbab5b5775.png","pc":"arihantcodes_1f7b8c4d","tg":["gallery","modal"]},{"id":"21st:arihantcodes_1f7b8c4d__ink","t":"Ink","d":"Animated text that dissolves in from a fluid, ink-like turbulence and settles into crisp letters while shifting color.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/ink/default/preview.1784413854456-45241398-fc77-4c4a-946d-3a599ff9105e.png","pc":"arihantcodes_1f7b8c4d","tg":["text"]},{"id":"21st:arihantcodes_1f7b8c4d__input-modal","t":"Input modal","d":"Here is Input Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"arihantcodes_1f7b8c4d","st":"indexed","u":45,"pl":"https://cdn.21st.dev/larsen66/input-modal/default/preview.1754084179407.png","pc":"arihantcodes_1f7b8c4d","tg":["form","modal","select","tabs"]},{"id":"21st:arihantcodes_1f7b8c4d__kanban-board","t":"Kanban board","d":"Here is Kanban Board component","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/larsen66/kanban-board/default/preview.1754084030513.png","pc":"arihantcodes_1f7b8c4d"},{"id":"21st:arihantcodes_1f7b8c4d__large-name-footer","t":"Large name footer","d":"Footer section with large logo","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"arihantcodes_1f7b8c4d","st":"indexed","u":373,"pl":"https://cdn.21st.dev/user_arihantcodes/large-name-footer.png","pc":"arihantcodes_1f7b8c4d","tg":["footer","link"]},{"id":"21st:arihantcodes_1f7b8c4d__loading-button","t":"Loading button","d":"Here is Loading Button component","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/loading-button/default/preview.1754491759631.png","pc":"arihantcodes_1f7b8c4d"},{"id":"21st:arihantcodes_1f7b8c4d__login-card","t":"Login card","d":"Here is Login Card component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/larsen66/login-card/default/preview.1754083875068.png","pc":"arihantcodes_1f7b8c4d","tg":["form","sign-in"]},{"id":"21st:arihantcodes_1f7b8c4d__login-card-1","t":"Login card 1","d":"Here is Login Card component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"arihantcodes_1f7b8c4d","st":"indexed","u":36,"pl":"https://cdn.21st.dev/larsen66/login-card-1/default/preview.1754086917044.png","pc":"arihantcodes_1f7b8c4d","tg":["checkbox","date-picker","form","pricing-section"]},{"id":"21st:arihantcodes_1f7b8c4d__multiple-selector","t":"Multiple selector","d":"Here is Multiple Selector component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"arihantcodes_1f7b8c4d","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/multiple-selector/default/preview.1754083134746.png","pc":"arihantcodes_1f7b8c4d","tg":["chip","search","select"]},{"id":"21st:arihantcodes_1f7b8c4d__multistep-form","t":"Multistep form","d":"Here is Multistep Form component","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"arihantcodes_1f7b8c4d","st":"indexed","u":622,"pl":"https://cdn.21st.dev/larsen66/multistep-form/default/preview.1754082366204.png","pc":"arihantcodes_1f7b8c4d","tg":["onboarding","steps"]},{"id":"21st:arihantcodes_1f7b8c4d__navbars","t":"Navbars","d":"Here is Navbars component","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"arihantcodes_1f7b8c4d","st":"indexed","u":244,"pl":"https://cdn.21st.dev/larsen66/navbars/default/preview.1754082214513.png","pc":"arihantcodes_1f7b8c4d","tg":["dashboard","dropdown","menu","navigation-menu"]},{"id":"21st:arihantcodes_1f7b8c4d__orbital-letters","t":"Orbital letters","d":"Animated text where each letter drifts and orbits on spring physics before settling into place, with a hover replay.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/orbital-letters/default/preview.1783709850261.png","pc":"arihantcodes_1f7b8c4d","tg":["text"]},{"id":"21st:arihantcodes_1f7b8c4d__profile-dropdown","t":"Profile dropdown","d":"Here is profile dropdown component","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","u":69,"pl":"https://cdn.21st.dev/larsen66/profile-dropdown/default/preview.1750439192870.png","pc":"arihantcodes_1f7b8c4d","tg":["dropdown","menu","profile","toggle"]},{"id":"21st:arihantcodes_1f7b8c4d__progress-with-value","t":"Progress with value","d":"A progress bar that displays its percentage value inline, with configurable label positions inside or outside the track.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/progress-with-value/default/preview.1784684089296-0747433d-fca9-428a-a8a0-ef895319fa67.png","pc":"arihantcodes_1f7b8c4d","tg":["progress"]},{"id":"21st:arihantcodes_1f7b8c4d__responsive-modal","t":"Responsive modal","d":"Here is Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"arihantcodes_1f7b8c4d","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/responsive-modal/default/preview.1754081697441.png","pc":"arihantcodes_1f7b8c4d","tg":["alert","button","modal"]},{"id":"21st:arihantcodes_1f7b8c4d__sidebar-navbar","t":"Sidebar navbar","d":"A collapsible vertical sidebar navigation that expands and collapses between icon-only and labelled states, with nested collapsible menu groups.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/sidebar-navbar/default/preview.1784755029295-6f3cd7c5-e168-4dbb-85e4-80b315217274.png","pc":"arihantcodes_1f7b8c4d"},{"id":"21st:arihantcodes_1f7b8c4d__skeleton","t":"Skeleton","d":"Here is Skeleton component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","u":46,"pl":"https://cdn.21st.dev/larsen66/skeleton/default/preview.1754081709799.png","pc":"arihantcodes_1f7b8c4d","tg":["avatar"]},{"id":"21st:arihantcodes_1f7b8c4d__spinner","t":"Spinner","d":"Here is Spinner component","k":"component","s":"21st","c":"status/loader","g":"status","a":"arihantcodes_1f7b8c4d","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/spinner/default/preview.1754081401936.png","pc":"arihantcodes_1f7b8c4d","tg":["progress","spinner"]},{"id":"21st:arihantcodes_1f7b8c4d__stacked-circular-footer","t":"Stacked circular footer","d":"Stacked Circular Footer Section","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"arihantcodes_1f7b8c4d","st":"indexed","u":679,"pl":"https://cdn.21st.dev/user_arihantcodes/stacked-circular-footer.png","pc":"arihantcodes_1f7b8c4d","tg":["footer","link","navigation-menu"]},{"id":"21st:arihantcodes_1f7b8c4d__status-badge","t":"Status badge","d":"Here is Status Badge component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"arihantcodes_1f7b8c4d","st":"indexed","u":34,"pl":"https://cdn.21st.dev/larsen66/status-badge/default/preview.1754081067637.png","pc":"arihantcodes_1f7b8c4d","tg":["badge","chip","icon"]},{"id":"21st:arihantcodes_1f7b8c4d__tab-navbar","t":"Tab navbar","d":"A responsive top navigation bar with a dropdown navigation menu, search input, and sign-in button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://cdn.21st.dev/arihantcodes_1f7b8c4d/tab-navbar/default/preview.1784832108737-33ca8281-c4d1-4c04-a15f-90b4224a2db9.png","pc":"arihantcodes_1f7b8c4d","tg":["menu"]},{"id":"21st:arikchakma__cromia-channels","t":"Cromia channels","d":"Individual editable hue, saturation, brightness, and alpha sliders built with Cromia headless color picker primitives.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"arikchakma","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/cromia-channels/default/preview.1785395802551-72e2df7f-d87a-4f3c-ba96-93523b54f305.png","pc":"arikchakma","tg":["slider"]},{"id":"21st:arikchakma__cromia-color-picker","t":"Cromia color picker","d":"A polished color picker built from Cromia headless primitives, with area selection, hue and alpha sliders, editable channels, and preset swatches.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"arikchakma","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cromia-color-picker/default/preview.1785392787700-fd31a652-0f16-4b6e-8b11-99aa9a7a6fd0.png","pc":"arikchakma"},{"id":"21st:arikchakma__cromia-compact","t":"Cromia compact","d":"A compact Cromia color picker with an area selector, hue slider, and editable hexadecimal color input.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"arikchakma","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cromia-compact/default/preview.1785395823292-4f2460f7-1c09-4792-9e97-03339aae0e50.png","pc":"arikchakma"},{"id":"21st:arikchakma__cromia-swatches","t":"Cromia swatches","d":"A preset color swatch picker with hue fine-tuning, live color preview, and editable hexadecimal input.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"arikchakma","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cromia-swatches/default/preview.1785395844620-ef968647-06f0-4d4b-a969-2dd3e26296b1.png","pc":"arikchakma"},{"id":"21st:arikchakma__unit-field","t":"Unit field","d":"Headless, composable numeric input field with drag-to-scrub, keyboard stepping, format/parse controls, and committed-value events for building any unit field.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"arikchakma","st":"indexed","pl":"https://cdn.21st.dev/arikchakma/unit-field/default/preview.1785487618107-0e10f861-7724-4655-9de4-2e4c306500fe.png","pc":"arikchakma"},{"id":"21st:arlanoska__dia-gradient","t":"Dia gradient","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"arlanoska","st":"indexed","pl":"https://cdn.21st.dev/arlanoska/dia-gradient/default/preview.1785545667383-6979da35-3261-4d18-8832-1b3d87cce9a1.png","pc":"arlanoska"},{"id":"21st:arlanoska__embroidered-word-patches","t":"Embroidered word patches","d":"Interactive WebGL word-shaped embroidered patches with satin stitching, a merrowed border, fabric depth, and cursor-reactive lighting.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"arlanoska","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/embroidered-word-patches/default/preview.1785302153274-42082027-66fa-4ea1-b9c5-c413861e5b92.png","pc":"arlanoska"},{"id":"21st:arlanoska__midjourney-ascii","t":"Midjourney ascii","d":"An interactive rebuild of Midjourney Medical's ASCII intro: a vortex of monospace characters that slowly spins and condenses into a logo — it's all real text, moved around by code.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"arlanoska","st":"indexed","u":18,"pl":"https://cdn.21st.dev/arlanoska/midjourney-ascii/default/preview.1785454499449-ad6cb465-dac8-4038-823f-d60b77a631a8.png","pc":"arlanoska"},{"id":"21st:arlanoska__symbols-effect","t":"Symbols effect","k":"component","s":"21st","c":"media/gallery","g":"media","a":"arlanoska","st":"indexed","pl":"https://cdn.21st.dev/arlanoska/symbols-effect/default/preview.1785452911796-5afb0b2e-a7a3-40fa-bcbe-bc421d4fecbd.png","pc":"arlanoska"},{"id":"21st:arlanoska__vector-editor","t":"Vector editor","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"arlanoska","st":"indexed","pl":"https://cdn.21st.dev/arlanoska/vector-editor/default/preview.1785929938390-f38ee4fa-a1d5-4936-bdf8-970e1654282c.png","pc":"arlanoska"},{"id":"21st:armandsalle__autocomplete","t":"Autocomplete","d":"Custom autocomplete component built with Shadcn ui and Fancy Multi Select by Maximilian Kaske. Feel free to play around with it and customize it to your needs.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"armandsalle","st":"indexed","u":160,"pl":"https://cdn.21st.dev/user_armandsalle/autocomplete.png","pc":"armandsalle","tg":["dropdown","search","select"]},{"id":"21st:arnoldlo619__chess","t":"Chess","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"arnoldlo619","st":"indexed","pl":"https://cdn.21st.dev/arnoldlo619/chess/default/preview.1783765562855.png","pc":"arnoldlo619","tg":["video"]},{"id":"21st:arul_286c0cd5__simplex-noise-shader","t":"Simplex noise shader","d":"Animated WebGL shader background in the Simplex Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"arul_286c0cd5","st":"indexed","pl":"https://cdn.21st.dev/arul_286c0cd5/simplex-noise-shader/default/preview.1785829526195-6fb60ba8-f481-4dd9-b9a9-53b4e1329278.webp","pc":"arul_286c0cd5"},{"id":"21st:arunachalam__adaptive-notch-navigation-bar","t":"Adaptive notch navigation bar","d":"An adaptive, inverted-curve notch navigation system featuring a desktop triple-island layout that seamlessly morphs into a unified responsive mobile drawer with spring animations a","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam/adaptive-notch-navigation-bar/default/preview.1787918173386-e6ad4a2b-6ae9-45fe-b28a-070ed5cbaaaa.webp","pc":"arunachalam"},{"id":"21st:arunachalam__android-mockup","t":"Android mockup","d":"$34","k":"component","s":"21st","c":"other","g":"other","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/android-mockup/default/preview.1762407221524.png","pc":"arunachalam"},{"id":"21st:arunachalam__animated-file-tree","t":"Animated file tree","d":"An interactive directory file tree featuring dynamic SVG branch lines, active-path stroke tracing, collapsible folders, and smooth spring hover glides.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam/animated-file-tree/default/preview.1787742926425-47cd7b67-941a-4f20-a4bf-7ab04915c989.webp","pc":"arunachalam"},{"id":"21st:arunachalam__animated-flip-cards","t":"Animated flip cards","d":"It's an animated card with a hover effect which makes it flip for more details.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/animated-flip-cards/default/preview.1747481939335.png","pc":"arunachalam"},{"id":"21st:arunachalam__animated-table","t":"Animated table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/animated-table/default/preview.1758632486479.png","pc":"arunachalam","tg":["table"]},{"id":"21st:arunachalam__animated-table-rows","t":"Animated table rows","d":"This is a table component with animated rows with delete row effects ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/animated-table-rows/default/preview.1759149739545.png","pc":"arunachalam","tg":["table"]},{"id":"21st:arunachalam__animated-theme-toggle-button","t":"Animated theme toggle button","d":"A modern React component that lets users switch between light and dark color modes with a visually engaging animated transition. This button supports both horizontal and vertical r","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"arunachalam","st":"indexed","u":63,"pl":"https://cdn.21st.dev/arunachalam0606/animated-theme-toggle-button/default/preview.1759221316680.png","pc":"arunachalam","tg":["toggle"]},{"id":"21st:arunachalam__animated-theme-toggler","t":"Animated theme toggler","d":"AnimatedThemeToggler — React Theme Toggle Button with Smooth Icon Transitions\n\nA lightweight React component that toggles between light and dark modes with animated sun and moon ic","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"arunachalam","st":"indexed","u":176,"pl":"https://cdn.21st.dev/arunachalam0606/animated-theme-toggler/default/preview.1759210475677.png","pc":"arunachalam","tg":["toggle"]},{"id":"21st:arunachalam__bottom-nav-bar","t":"Bottom nav bar","d":"A highly animated, touch-friendly mobile/navigation bar component for dashboard or finance applications. Built with Next.js, TypeScript, TailwindCSS v4, and Framer Motion, it deliv","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"arunachalam","st":"indexed","u":159,"pl":"https://cdn.21st.dev/arunachalam0606/bottom-nav-bar/default/preview.1759240846020.png","pc":"arunachalam","tg":["navigation-menu"]},{"id":"21st:arunachalam__cookie-banner","t":"Cookie banner","d":"CookieBanner is a lightweight, responsive cookie consent component for Next.js built with TypeScript and TailwindCSS v4. It displays a customizable message with Accept and Decline ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"arunachalam","st":"indexed","u":10,"pl":"https://cdn.21st.dev/arunachalam0606/cookie-banner/default/preview.1755092427707.png","pc":"arunachalam"},{"id":"21st:arunachalam__cookie-banner-1","t":"Cookie banner 1","d":"The CookiePanel is a compact, bottom‑right floating cookie consent banner built with Next.js, TypeScript, TailwindCSS v4, and Lucide icons. It presents users with a clear cookie po","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"arunachalam","st":"indexed","u":72,"pl":"https://cdn.21st.dev/arunachalam0606/cookie-banner-1/default/preview.1755094285894.png","pc":"arunachalam","tg":["toast"]},{"id":"21st:arunachalam__corner-frame-animated-button","t":"Corner frame animated button","d":"CornerFrameAnimatedButton is a customizable, animated button component that features stylish corner-frame borders and a smooth hover gradient reveal effect. Built with framer-motio","k":"component","s":"21st","c":"actions/button","g":"actions","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/corner-frame-animated-button/default/preview.1751606293207.png","pc":"arunachalam"},{"id":"21st:arunachalam__corner-frame-animated-button-1","t":"Corner frame animated button 1","d":"CornerFrameAnimatedButton is a customizable, animated button component that features stylish corner-frame borders and a smooth hover gradient reveal effect. Built with framer-motio","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/corner-frame-animated-button-1/default/preview.1760093314953.png","pc":"arunachalam"},{"id":"21st:arunachalam__corner-frame-scramble-text","t":"Corner frame scramble text","d":"A flexible and elegant text component wrapped in a corner frame with a scramble animation effect. Built with Tailwind CSS and Framer Motion, it visually enhances dynamic text value","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arunachalam","st":"indexed","u":10,"pl":"https://cdn.21st.dev/arunachalam0606/corner-frame-scramble-text/default/preview.1751610916355.png","pc":"arunachalam"},{"id":"21st:arunachalam__corner-frame-text","t":"Corner frame text","d":"CornerFrameText is a semantic, reusable UI component that displays a line of text wrapped in elegant corner-frame borders, consistent with the CornerFrameAnimatedButton style — but","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/corner-frame-text/default/preview.1751607510467.png","pc":"arunachalam"},{"id":"21st:arunachalam__corner-frame-text-1","t":"Corner frame text 1","d":"CornerFrameText is a semantic, reusable UI component that displays a line of text wrapped in elegant corner-frame borders, consistent with the CornerFrameAnimatedButton style — but","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/corner-frame-text-1/default/preview.1760166154551.png","pc":"arunachalam"},{"id":"21st:arunachalam__expandable-search-bar","t":"Expandable search bar","d":"This expandable search bar is a sleek, animated UI element designed for modern web applications. It collapses into a compact icon for space efficiency and smoothly expands to revea","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"arunachalam","st":"indexed","u":37,"pl":"https://cdn.21st.dev/arunachalam0606/expandable-search-bar/default/preview.1758525431053.png","pc":"arunachalam","tg":["search"]},{"id":"21st:arunachalam__feedback-toast","t":"Feedback toast","d":"The FeedbackToast is a animated UI component designed to collect quick feedback from users in a non-intrusive way. It presents a thumbs-up/down prompt with an optional comment inpu","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"arunachalam","st":"rated","u":19,"pl":"https://cdn.21st.dev/arunachalam0606/feedback-toast/default/preview.1751978937629.png","pc":"arunachalam","tg":["notification","toast"],"sc":18},{"id":"21st:arunachalam__inverted-cursor","t":"Inverted cursor","d":"A smooth, customizable React cursor component that replaces the native cursor with a circular, inverted color cursor. It smoothly follows the mouse pointer, hides when the cursor l","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/inverted-cursor/default/preview.1762247940064.png","pc":"arunachalam","tg":["cursor"]},{"id":"21st:arunachalam__media-button","t":"Media button","d":"MediaButton is a reusable React component that displays a button with a smooth hover effect revealing a looping .mp4, .webm, or .gif background, with a dark overlay to keep the tex","k":"component","s":"21st","c":"media/player","g":"media","a":"arunachalam","st":"indexed","u":28,"pl":"https://cdn.21st.dev/arunachalam0606/media-button/default/preview.1747673487285.png","pc":"arunachalam","tg":["video"]},{"id":"21st:arunachalam__modern-animated-sign-in","t":"Modern animated sign in","d":"This design presents a sleek and user-friendly login page. The UI features a contemporary dark mode aesthetic with a deep blue background accented by subtle radial gradients that g","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"arunachalam","st":"rated","u":837,"pl":"https://cdn.21st.dev/user_2wfnj4jcSPR8JWRk7tpzrihdDV8/modern-animated-sign-in/default/preview.1747156285045.png","pc":"arunachalam","tg":["sign-in"],"sc":18},{"id":"21st:arunachalam__morphing-arrow-button","t":"Morphing arrow button","d":" A directional button that smoothly morphs on hover:\n - Starts as a circular icon\n - Expands outward in the given direction (left or right)\n - Adds a subtle animated line and arrow","k":"component","s":"21st","c":"media/carousel","g":"media","a":"arunachalam","st":"indexed","u":19,"pl":"https://cdn.21st.dev/arunachalam0606/morphing-arrow-button/default/preview.1750674951621.png","pc":"arunachalam","tg":["carousel"]},{"id":"21st:arunachalam__outline-text","t":"Outline text","d":"Renders large outlined text that adapts to light/dark mode.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"arunachalam","st":"indexed","u":59,"pl":"https://cdn.21st.dev/arunachalam0606/outline-text/default/preview.1750675082689.png","pc":"arunachalam","tg":["text"]},{"id":"21st:arunachalam__profile-card-testimonial-carousel","t":"Profile card testimonial carousel","d":"A responsive testimonial carousel component featuring profile cards with avatars, descriptions, and social links. Built with smooth fade animations, bottom navigation controls, and","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"arunachalam","st":"indexed","u":250,"pl":"https://cdn.21st.dev/arunachalam0606/profile-card-testimonial-carousel/default/preview.1755510064157.png","pc":"arunachalam","tg":["carousel","link","profile","testimonials"]},{"id":"21st:arunachalam__scroll-expansion-hero","t":"Scroll expansion hero","d":"A modern, interactive media component for Next.js that expands videos or images as users scroll, creating an engaging and immersive experience.\n","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"arunachalam","st":"indexed","u":2594,"pl":"https://cdn.21st.dev/user_2wfnj4jcSPR8JWRk7tpzrihdDV8/scroll-expansion-hero/default/preview.1746632883284.png","pc":"arunachalam","tg":["hero","scroll-area","video"]},{"id":"21st:arunachalam__sidebar-with-chrome-like-tabs","t":"Sidebar with chrome like tabs","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"arunachalam","st":"indexed","pl":"https://cdn.21st.dev/arunachalam0606/sidebar-with-chrome-like-tabs/default/preview.1767870327337.png","pc":"arunachalam"},{"id":"21st:arunachalam__theme-wipe-toggle","t":"Theme wipe toggle","d":"HorizontalThemeWipeToggle — Animated React Theme Switch Button with Vertical Line Reveal\n\nSwitch between light and dark modes with a visually striking page-wide vertical wipe anima","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"arunachalam","st":"indexed","u":17,"pl":"https://cdn.21st.dev/arunachalam0606/theme-wipe-toggle/default/preview.1759294215954.png","pc":"arunachalam"},{"id":"21st:arunachalam__thumbnail-button-video-player","t":"Thumbnail button video player","d":"The ThumbnailButton component displays a video thumbnail that, when clicked, opens a modal video player. It supports both YouTube embeds (via youtubeId) and direct video URLs (via ","k":"component","s":"21st","c":"media/player","g":"media","a":"arunachalam","st":"indexed","u":65,"pl":"https://cdn.21st.dev/arunachalam0606/thumbnail-button-video-player/default/preview.1750151231033.png","pc":"arunachalam","tg":["modal","video"]},{"id":"21st:arunachalam__toast","t":"Toast","d":"The Toaster component is a customizable toast notification system built on top of the Sonner library. It provides a flexible, animated UI for in-app alerts, designed to match moder","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"arunachalam","st":"indexed","u":488,"pl":"https://cdn.21st.dev/arunachalam0606/toast/default/preview.1751628827223.png","pc":"arunachalam","tg":["alert","menu","notification","toast"]},{"id":"21st:arunachalam__vertical-theme-wipe-toggle","t":"Vertical theme wipe toggle","d":"VerticalThemeWipeToggle — Top/Bottom Reveal Animated Theme Switch\n\nA modern React theme toggle button offering a visually dramatic full-page transition using the View Transitions A","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"arunachalam","st":"indexed","u":24,"pl":"https://cdn.21st.dev/arunachalam0606/vertical-theme-wipe-toggle/default/preview.1759294720055.png","pc":"arunachalam","tg":["toggle"]},{"id":"21st:arunjdass__ai-agent-processing-states","t":"Ai agent processing states","d":"A minimalistic suite of 4 sleek, dark-mode AI processing animations. Built with Tailwind CSS for shadcn/ui ecosystems. Perfect for Generative UI cards, LLM streaming states, and MC","k":"component","s":"21st","c":"status/loader","g":"status","a":"arunjdass","st":"rated","u":15,"pl":"https://cdn.21st.dev/arunjdass/ai-agent-processing-states/default/preview.1781810154303.png","pc":"arunjdass","tg":["spinner"],"sc":22},{"id":"21st:arunjdass__ai-planning","t":"Ai planning","d":"AI Planning Workflow","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/ai-planning/default/preview.1781748205552.png","pc":"arunjdass","tg":["accordion","ai-chat","steps"]},{"id":"21st:arunjdass__ai-prompt-input-box","t":"Ai prompt input box","d":"AI Prompt Input Box","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/ai-prompt-input-box/default/preview.1781750631454.png","pc":"arunjdass"},{"id":"21st:arunjdass__dashboard-sidebar","t":"Dashboard sidebar","d":"A premium, dual-theme dashboard & sidebar shell featuring the Charcoal Ink (dark) and Alabaster (light) architectural palettes. Includes collapsible multi-tiered navigation, worksp","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"arunjdass","st":"indexed","u":66,"pl":"https://cdn.21st.dev/arunjdass/dashboard-sidebar/default/preview.1781812420625.png","pc":"arunjdass","tg":["dashboard","navigation-menu","sidebar"]},{"id":"21st:arunjdass__file-upload","t":"File upload","d":"File Upload Design","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"arunjdass","st":"indexed","u":13,"pl":"https://cdn.21st.dev/arunjdass/file-upload/default/preview.1781744239687.png","pc":"arunjdass","tg":["upload-download"]},{"id":"21st:arunjdass__focus-hero","t":"Focus hero","d":"A hyper-responsive, physics-based vector field that guides user attention to a central glassmorphic card.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"arunjdass","st":"indexed","u":54,"pl":"https://cdn.21st.dev/arunjdass/focus-hero/default/preview.1782151566139.png","pc":"arunjdass"},{"id":"21st:arunjdass__hero-card-retro-grid-shader","t":"Hero card retro grid shader","d":"A premium, responsive landing page hero card featuring an animated, low-saturation pixel mesh grid shader. Perfect as a high-converting main banner for AI platforms, developer tool","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/hero-card-retro-grid-shader/default/preview.1781815385674.png","pc":"arunjdass"},{"id":"21st:arunjdass__kanban-board","t":"Kanban board","d":"A fully interactive, multi-column Kanban board featuring native HTML5 drag and drop, inline task creation, rich card metadata, and a clean minimalist aesthetic.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/kanban-board/default/preview.1786155537489-fdbdf67f-39f0-477c-810e-aefc0c97b9e3.png","pc":"arunjdass"},{"id":"21st:arunjdass__mac-os-fluid-floating-dock","t":"Mac os fluid floating dock","d":"A premium macOS-style floating dock featuring smooth fluid magnification and physics-based scaling animations on hover. Includes elegant tooltip micro-labels and custom icon contai","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/mac-os-fluid-floating-dock/default/preview.1781817136007.png","pc":"arunjdass"},{"id":"21st:arunjdass__neomorphism-metric-card","t":"Neomorphism metric card","d":"A stunning Neomorphism style metric card featuring soft dynamic shadows, positive/negative trend indicators, and premium Framer Motion hover animations.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"arunjdass","st":"indexed","pl":"https://cdn.21st.dev/arunjdass/neomorphism-metric-card/default/preview.1786155093970-d53ca664-678b-4dfe-885f-bf3f2963921b.png","pc":"arunjdass"},{"id":"21st:aryankumar06__aryan","t":"Aryan","k":"component","s":"21st","c":"other","g":"other","a":"aryankumar06","st":"indexed","pl":"https://cdn.21st.dev/aryankumar06/aryan/default/preview.1770492791051.png","pc":"aryankumar06"},{"id":"21st:aryankumar06__job-application-tracker-notion-style","t":"Job application tracker notion style","d":"A fully interactive job application tracker with a Kanban-style pipeline (To Apply → Applied → Offer), drag-and-drop card management, sortable/filterable list view, action items ch","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"aryankumar06","st":"indexed","pl":"https://cdn.21st.dev/aryankumar06/job-application-tracker-notion-style/default/preview.1771837331824.png","pc":"aryankumar06"},{"id":"21st:asanshay__chat-reasoning","t":"Chat reasoning","d":"A collapsible reasoning panel for AI chat that shows a model's step-by-step thinking and tool calls, ready for the Vercel AI SDK useChat().","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"asanshay","st":"indexed","pl":"https://cdn.21st.dev/asanshay/chat-reasoning/default/preview.1784309213191-d1db94c2-b5c9-4a24-96a1-7f2e6e821c14.png","pc":"asanshay","tg":["ai-chat"]},{"id":"21st:asanshay__chat-tool","t":"Chat tool","d":"A chat component that displays an AI tool call, its input and output, inside a collapsible accordion.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"asanshay","st":"indexed","pl":"https://cdn.21st.dev/asanshay/chat-tool/default/preview.1784308624189-5ad37b23-7e71-4f9d-a315-f09de87131c9.png","pc":"asanshay","tg":["accordion","ai-chat"]},{"id":"21st:asanshay__motion-blur-text","t":"Motion blur text","d":"Animated text effect that renders a directional motion blur using layered text shadows.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"asanshay","st":"indexed","pl":"https://cdn.21st.dev/asanshay/motion-blur-text/default/preview.1783715197717.png","pc":"asanshay","tg":["text"]},{"id":"21st:asanshay__page-header","t":"Page header","d":"A page header with a large title, optional description, and a slot for actions to keep page layouts consistent.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"asanshay","st":"indexed","pl":"https://cdn.21st.dev/asanshay/page-header/default/preview.1784406001216-ff2df8b0-d7d3-4c0a-8ede-793720ccc1f2.png","pc":"asanshay"},{"id":"21st:asanshay__reveal","t":"Reveal","d":"A wrapper that fades and un-blurs its content into view when it scrolls onscreen, with optional staggered delay.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"asanshay","st":"indexed","u":18,"pl":"https://cdn.21st.dev/asanshay/reveal/default/preview.1783714991545.png","pc":"asanshay"},{"id":"21st:ashish.indora__red-in-black","t":"Red in black","d":"Animated WebGL shader background in the Flow field style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashish.indora","st":"indexed","pl":"https://cdn.21st.dev/ashish.indora/red-in-black/default/preview.1784632592590-5d184727-75b7-410e-b249-1b5e19999609.webp","pc":"ashish.indora","tg":["background"]},{"id":"21st:ashishrajwaniai01__3d-animated-stars-background","t":"3d animated stars background","d":"a beautiful mouse react background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/3d-animated-stars-background/default/preview.1766358607935.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__3d-ocean-infinite","t":"3d ocean infinite","d":"relaxing 2d tropical ocean","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/3d-ocean-infinite/default/preview.1766743560926.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__animated-pattern-cloud","t":"Animated pattern cloud","d":"wavy pattern cloud","k":"component","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","u":116,"pl":"https://cdn.21st.dev/ashishrajwaniai01/animated-pattern-cloud/default/preview.1767941151171.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__asmr-background","t":"Asmr background","d":"a beautiful asmr mouse hover react bg","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","u":82,"pl":"https://cdn.21st.dev/ashishrajwaniai01/asmr-background/default/preview.1766251589260.png","pc":"ashishrajwaniai01","tg":["background"]},{"id":"21st:ashishrajwaniai01__asmr-backgroung-with-mouse-hover-effect","t":"Asmr backgroung with mouse hover effect","d":"a satisfying background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/asmr-backgroung-with-mouse-hover-effect/default/preview.1766606844320.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__balloons-pop-background","t":"Balloons pop background","d":"pop balloons when mouse hover","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","u":43,"pl":"https://cdn.21st.dev/ashishrajwaniai01/balloons-pop-background/default/preview.1767945468247.png","pc":"ashishrajwaniai01","tg":["background"]},{"id":"21st:ashishrajwaniai01__botanical-background","t":"Botanical background","d":"Botanical background mouse hover  effects","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/botanical-background/default/preview.1767943209901.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__futuristic-login-form","t":"Futuristic login form","d":"a beautiful future login form","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/futuristic-login-form/default/preview.1766188393271.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__hero-section","t":"Hero section","d":"a brustalist hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/hero-section/default/preview.1766247252044.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__matrix-background","t":"Matrix background","d":"animated matrix","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/matrix-background/default/preview.1768565489074.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__profile-card","t":"Profile card","d":"a sleek modern profile card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/profile-card/default/preview.1766187082075.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__realistic-fire","t":"Realistic fire","d":"webgl realistic fire with mouse hover effects","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/realistic-fire/default/preview.1767942045661.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__realistic-fog-background","t":"Realistic fog background","d":"3D Fog, realistic looking, webGL","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/realistic-fog-background/default/preview.1767940768598.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__relaxing-navbar","t":"Relaxing navbar","d":"relaxing navbar with light and dark mode","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/relaxing-navbar/default/preview.1766430182261.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__sleek-text-input","t":"Sleek text input","d":"text input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/sleek-text-input/default/preview.1767950698486.png","pc":"ashishrajwaniai01"},{"id":"21st:ashishrajwaniai01__tab-pages","t":"Tab pages","d":"sleek tabbed pages","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ashishrajwaniai01","st":"indexed","pl":"https://cdn.21st.dev/ashishrajwaniai01/tab-pages/default/preview.1767951466535.png","pc":"ashishrajwaniai01"},{"id":"21st:ashwarya19__magnetic-cursor-button-attraction-effect","t":"Magnetic cursor button attraction effect","d":"A premium magnetic cursor button with attraction effect that pulls toward the pointer, featuring spotlight glow, smooth motion, and full light/dark mode support. Designed to increa","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ashwarya19","st":"indexed","pl":"https://cdn.21st.dev/ashwarya19/magnetic-cursor-button-attraction-effect/default/preview.1776038753386.png","pc":"ashwarya19"},{"id":"21st:ashwarya19__magnifying-glass-text-lens","t":"Magnifying glass text lens","d":"A smooth magnifying glass hover effect for text and UI content. This React component creates a polished zoom lens that follows the cursor, floats beyond the container, and adds a r","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ashwarya19","st":"indexed","pl":"https://cdn.21st.dev/ashwarya19/magnifying-glass-text-lens/default/preview.1776037567986.png","pc":"ashwarya19"},{"id":"21st:askgui__phyrs","t":"Phyrs","d":"Animated (wave) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, an","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"askgui","st":"indexed","pl":"https://cdn.21st.dev/askgui/phyrs/default/preview.1786294212387-f80b5229-492d-4611-9970-38b1507e95b9.webp","pc":"askgui"},{"id":"21st:asteghlalj__ascii","t":"Ascii","d":"Animated (flicker) ASCII art in the Contour style, made with the 21st ASCII editor and baked to a looping video. Styled with a crt, neon look. A drop-in, zero-dependency React comp","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"asteghlalj","st":"indexed","pl":"https://cdn.21st.dev/asteghlalj/ascii/default/preview.1785948652413-5f4600c0-a51d-4135-afdd-b64a8fa79d21.webp","pc":"asteghlalj"},{"id":"21st:audriusnek__icey-night-shards","t":"Icey night shards","d":"Animated WebGL shader background in the Plasma style, generated by the 21st.dev Shader Builder. 4-color palette (#160B0B, #C2402A, #F49D37, #FFE8C2). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"audriusnek","st":"indexed","pl":"https://cdn.21st.dev/audriusnek/icey-night-shards/default/preview.1783790205846.webp","pc":"audriusnek"},{"id":"21st:aumbhusal__mt","t":"Mt","d":"Animated (pulse) ASCII art in the Half Blocks style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"aumbhusal","st":"indexed","pl":"https://cdn.21st.dev/aumbhusal/mt/default/preview.1786519251519-4e640fdd-b531-473d-a2fb-52a20ce66622.webp","pc":"aumbhusal"},{"id":"21st:avanishverma4__3d-button","t":"3d button","d":"A comprehensive showcase of the reusable Button component with multiple variants, sizes, and interactive states. Fully responsive and accessible.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/3d-button/default/preview.1755104280533.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__3d-folder","t":"3d folder","d":"A reusable 3D Folder component","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"avanishverma4","st":"indexed","u":163,"pl":"https://cdn.21st.dev/avanishverma4/3d-folder/default/preview.1767174252224.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__3d-gallery","t":"3d gallery","d":"A reusable component for 3D gallery","k":"component","s":"21st","c":"media/gallery","g":"media","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/3d-gallery/default/preview.1762341322568.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__3d-tilt-card","t":"3d tilt card","d":"A reusable component for 3d tilt card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","u":14,"pl":"https://cdn.21st.dev/avanishverma4/3d-tilt-card/default/preview.1759470194938.png","pc":"avanishverma4","tg":["card"]},{"id":"21st:avanishverma4__accordion","t":"Accordion","d":"A reusable accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/accordion/default/preview.1757402433282.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__accordion-1","t":"Accordion 1","d":"A reusable and responsive accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/accordion-1/default/preview.1758953677031.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__accordion-2","t":"Accordion 2","d":"A reusable and responsive accordion template","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/accordion-2/default/preview.1759213802040.png","pc":"avanishverma4","tg":["accordion","faq"]},{"id":"21st:avanishverma4__ai-search","t":"Ai search","d":"A reusable component for the Search bar ","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/ai-search/default/preview.1761996709383.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__alert","t":"Alert","d":"A reusable and responsive alert component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/alert/default/preview.1757316465249.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-background","t":"Animated background","d":"Reusable animated bg component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","u":68,"pl":"https://cdn.21st.dev/avanishverma4/animated-background/default/preview.1756651363163.png","pc":"avanishverma4","tg":["background"]},{"id":"21st:avanishverma4__animated-beam","t":"Animated beam","d":"A reusable component for an animated beam background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-beam/default/preview.1770213844117.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-border","t":"Animated border","d":"A reusable border component for button","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-border/default/preview.1757606072123.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-card","t":"Animated card","d":"A reusable component for animated profile card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-card/default/preview.1768494866325.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-card-01","t":"Animated card 01","d":"A reusable component for the animated card with background animation and dark/light mode theme toggle.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-card-01/default/preview.1770018117335.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-dropdown","t":"Animated dropdown","d":"A reusable animated dropdown component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-dropdown/default/preview.1757176875135.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-grid-background-01","t":"Animated grid background 01","d":"A reusable component for animated grid background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-grid-background-01/default/preview.1770134000010.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-grid-hover","t":"Animated grid hover","d":"A reusable component for background animation for grid hovering","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-grid-hover/default/preview.1761895239735.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-hero-05","t":"Animated hero 05","d":"A reusable and responsive component for hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-hero-05/default/preview.1764655112783.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animated-loader-1","t":"Animated loader 1","d":"A reusable component for animated loader","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"avanishverma4","st":"indexed","u":44,"pl":"https://cdn.21st.dev/avanishverma4/animated-loader-1/default/preview.1759993229770.png","pc":"avanishverma4","tg":["grid","spinner","toggle"]},{"id":"21st:avanishverma4__animated-modal-1","t":"Animated modal 1","d":"A reusable component for Animated modal","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animated-modal-1/default/preview.1771604979653.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__animation-presence-mode","t":"Animation presence mode","d":"A reusable component for animation switch","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/animation-presence-mode/default/preview.1758809339474.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__avatar","t":"Avatar","d":"A reusable avatar component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/avatar/default/preview.1758897315099.png","pc":"avanishverma4","tg":["avatar","card","team"]},{"id":"21st:avanishverma4__bento-grid-01","t":"Bento grid 01","d":"A reusable and responsive bento grid layout with animation","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"avanishverma4","st":"indexed","u":272,"pl":"https://cdn.21st.dev/avanishverma4/bento-grid-01/default/preview.1765189800459.png","pc":"avanishverma4","tg":["features","grid"]},{"id":"21st:avanishverma4__blog-page","t":"Blog page","d":"A reusable component for the blog page","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/blog-page/default/preview.1770794805295.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__breadcrumb","t":"Breadcrumb","d":"A reusable breadcrumb component","k":"component","s":"21st","c":"navigation/breadcrumb","g":"navigation","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/breadcrumb/default/preview.1756721371019.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__button","t":"Button","d":"A reusable component for button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","u":30,"pl":"https://cdn.21st.dev/avanishverma4/button/default/preview.1758259115024.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__calendar","t":"Calendar","d":"A reusable component for calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/calendar/default/preview.1760797777120.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__calendar-01","t":"Calendar 01","d":"A reusable component for the calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/calendar-01/default/preview.1761288284919.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__calendar-04","t":"Calendar 04","d":"A reusable calendar component for creating events","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/calendar-04/default/preview.1762502823292.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__call-to-action-v1","t":"Call to action v1","d":"A reusable CTA component","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/call-to-action-v1/default/preview.1766568856199.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__carousel-v2","t":"Carousel v2","d":"A reusable component for carousel scrolling","k":"component","s":"21st","c":"media/carousel","g":"media","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/carousel-v2/default/preview.1769508652079.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__charecter-counter","t":"Charecter counter","d":"A reusable charecter counter component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/charecter-counter/default/preview.1757835458388.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__checkbox-01","t":"Checkbox 01","d":"A reusable component for the checkboxes","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/checkbox-01/default/preview.1762957377865.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__checkbox-02","t":"Checkbox 02","d":"A reusable component for a checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/checkbox-02/default/preview.1763964008857.png","pc":"avanishverma4","tg":["checkbox","list"]},{"id":"21st:avanishverma4__checkbox-v2","t":"Checkbox v2","d":"A reusable and Animated checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/checkbox-v2/default/preview.1766065854492.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__clip-path-link","t":"Clip path link","d":"A reusable component for clip-path links","k":"component","s":"21st","c":"actions/link","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/clip-path-link/default/preview.1762095752087.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__combo-box","t":"Combo box","d":"A reusable component for combo-box dropdown","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"avanishverma4","st":"indexed","u":38,"pl":"https://cdn.21st.dev/avanishverma4/combo-box/default/preview.1757610248903.png","pc":"avanishverma4","tg":["dropdown","search","select"]},{"id":"21st:avanishverma4__copy-to-clipboard","t":"Copy to clipboard","d":"A copy to clipboard component","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/copy-to-clipboard/default/preview.1764683802333.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__countdown","t":"Countdown","d":"A reusable component for countdown","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/countdown/default/preview.1759219594562.png","pc":"avanishverma4","tg":["number"]},{"id":"21st:avanishverma4__create-account","t":"Create account","d":"A reusable component to create account","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/create-account/default/preview.1764583234172.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__creative-hero","t":"Creative hero","d":"A reusable and responsive hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/creative-hero/default/preview.1759413499684.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__credit-card","t":"Credit card","d":"A reusable and fully functional credit and debit card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/credit-card/default/preview.1758374781836.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__date-picker","t":"Date picker","d":"A reusable component for the date picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/date-picker/default/preview.1760879677718.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__dropdown-01","t":"Dropdown 01","d":"A reusable component for dropdown","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"avanishverma4","st":"indexed","u":49,"pl":"https://cdn.21st.dev/avanishverma4/dropdown-01/default/preview.1762004567193.png","pc":"avanishverma4","tg":["dropdown","grid","select"]},{"id":"21st:avanishverma4__error-404","t":"Error 404","d":"A reusable component of error 404 page","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/error-404/default/preview.1757339523955.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__error-404-01","t":"Error 404 01","d":"A reusable component for Not found page","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/error-404-01/default/preview.1762843528589.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__feature-section-v3","t":"Feature section v3","d":"A reusable and responsive component for the Feature section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/feature-section-v3/default/preview.1766731182727.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__feature-shader-v2","t":"Feature shader v2","d":"A reusable feature section with shader animation","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/feature-shader-v2/default/preview.1766130476220.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__feedback","t":"Feedback","d":"A reusable component for feedback","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/feedback/default/preview.1762416430501.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__flip-card-02","t":"Flip card 02","d":"A reusable component for a Flip card with a hover animation, which can be used for team introduction.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/flip-card-02/default/preview.1765552175332.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__floating-card","t":"Floating card","d":"A reusable card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/floating-card/default/preview.1756881383574.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__fluid-dropdown","t":"Fluid dropdown","d":"A reusable component for fluid dropdown","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/fluid-dropdown/default/preview.1764773973226.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__futuristic-ticket-hub","t":"Futuristic ticket hub","d":"A reusable ticket system that can be used anywhere.","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/futuristic-ticket-hub/default/preview.1766759537179.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__glowing-border-effect","t":"Glowing border effect","d":"The component can be reused to create a glowing and moving border effect when hovering. Also added some micro-interactions to make it look good.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/glowing-border-effect/default/preview.1770788818000.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__gradient-button","t":"Gradient button","d":"A reusable component with a button gradient using animation","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/gradient-button/default/preview.1766478905238.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__gradient-generator","t":"Gradient generator","d":"A reusable gradient generator with modern design","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/gradient-generator/default/preview.1764425626891.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-01","t":"Hero 01","d":"A reusable and responsive hero component","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-01/default/preview.1760075512410.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-03","t":"Hero 03","d":"A reusable and responsive component for a hero section with an animated header and animated icons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-03/default/preview.1762147197168.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-04","t":"Hero 04","d":"A reusable component for hero block","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-04/default/preview.1763391551103.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-section","t":"Hero section","d":"A reusable component for hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-section/default/preview.1760595626531.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-with-bg","t":"Hero with bg","d":"A reusable component for hero section with background for agencies","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-with-bg/default/preview.1764684851090.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hero-with-video-in-background","t":"Hero with video in background","d":"A reusable hero block with video in background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/hero-with-video-in-background/default/preview.1766386177892.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__hover-image-preview","t":"Hover image preview","d":"A reusable component for hover image preview","k":"component","s":"21st","c":"media/gallery","g":"media","a":"avanishverma4","st":"indexed","u":22,"pl":"https://cdn.21st.dev/avanishverma4/hover-image-preview/default/preview.1764255088859.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__i-os-slider","t":"I os slider","d":"A  reusable component for Sliders for both horizontal and vertical, with smooth animation","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/i-os-slider/default/preview.1762231716336.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__image-slider-v2","t":"Image slider v2","d":"A reusable component for image slider","k":"component","s":"21st","c":"media/gallery","g":"media","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/image-slider-v2/default/preview.1769144700878.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__infinite-grid-integration","t":"Infinite grid integration","d":"A reusable component for grid integration animation.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"avanishverma4","st":"indexed","u":212,"pl":"https://cdn.21st.dev/avanishverma4/infinite-grid-integration/default/preview.1785451733718-42ac888b-554c-4a9f-af07-5ea272a36ef0.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__interactive-background","t":"Interactive background","d":"A reusable component for the interactive background with neon colors.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/interactive-background/default/preview.1768547591029.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__interactive-book-simulator","t":"Interactive book simulator","d":"A reusable component for a book flipping pages with the mouse movement.","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/interactive-book-simulator/default/preview.1766555834552.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__interactive-hover-component","t":"Interactive hover component","d":"A reusable component for button hover","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/interactive-hover-component/default/preview.1769146718858.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__inverted-cursor","t":"Inverted cursor","d":"A reusable component for inverted cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/inverted-cursor/default/preview.1762489921474.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__invitation","t":"Invitation","d":"A reusable and responsive component for Invitation","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/invitation/default/preview.1758865186455.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__kanban-draggable-cards-board","t":"Kanban draggable cards board","d":"A reusable component for Kanban task board","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/kanban-draggable-cards-board/default/preview.1765726209939.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__loader-01","t":"Loader 01","d":"A reusable component for text loaders","k":"component","s":"21st","c":"status/loader","g":"status","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/loader-01/default/preview.1760282399296.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__login","t":"Login","d":"A reusable login component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/login/default/preview.1756805642676.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__masked-text-and-image","t":"Masked text and image","d":"A reusable and responsive component for Image Masked Text, where you can customise every detail","k":"component","s":"21st","c":"media/gallery","g":"media","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/masked-text-and-image/default/preview.1763368020024.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__matrix-rain","t":"Matrix rain","d":"A cool effect of matrix with Japanese characters","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/matrix-rain/default/preview.1769672057284.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__modern-navigation","t":"Modern navigation","d":"A non-responsive Navbar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/modern-navigation/default/preview.1759915461397.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__mouse-hover-text","t":"Mouse hover text","d":"A reusable component for Mouse Hover Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/mouse-hover-text/default/preview.1757149030102.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__pagination","t":"Pagination","d":"A reusable component for pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/pagination/default/preview.1764912919359.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__parallax-scroll","t":"Parallax scroll","d":"A reusable and responsive component for Parallax scrolling","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/parallax-scroll/default/preview.1762235588723.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__parallax-scrolling-01","t":"Parallax scrolling 01","d":"A reusable component for parallax scrolling","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/parallax-scrolling-01/default/preview.1762927900851.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__parallax-text-scroll","t":"Parallax text scroll","d":"A reusable component for parallax text scroll","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"avanishverma4","st":"indexed","u":14,"pl":"https://cdn.21st.dev/avanishverma4/parallax-text-scroll/default/preview.1758711254852.png","pc":"avanishverma4","tg":["marquee"]},{"id":"21st:avanishverma4__particle-animation-01","t":"Particle animation 01","d":"A reusable component for the background animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/particle-animation-01/default/preview.1770044581181.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__particle-effect-for-hero","t":"Particle effect for hero","d":"A reusable and responsive hero section with a background particle effect on hovering","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avanishverma4","st":"indexed","u":242,"pl":"https://cdn.21st.dev/avanishverma4/particle-effect-for-hero/default/preview.1765266057134.png","pc":"avanishverma4","tg":["hero"]},{"id":"21st:avanishverma4__pixel-hover-effect","t":"Pixel hover effect","d":"A reusable component for hover effect in buttons","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/pixel-hover-effect/default/preview.1761887488733.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__premium-feedback-form","t":"Premium feedback form","d":"An emoji-based feedback form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"avanishverma4","st":"rated","pl":"https://cdn.21st.dev/avanishverma4/premium-feedback-form/default/preview.1769665200483.png","pc":"avanishverma4","sc":20},{"id":"21st:avanishverma4__pricing-plans","t":"Pricing plans","d":"A reusable and responsive Pricing plan block","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/pricing-plans/default/preview.1762429235497.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__pricing-v2","t":"Pricing v2","d":"A reusable component for the pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/pricing-v2/default/preview.1766241303259.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__radio-button-01","t":"Radio button 01","d":"A reusable component for radio button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/radio-button-01/default/preview.1763735430589.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__radio-theme-switcher","t":"Radio theme switcher","d":"A reusable component for a radio button, I have used it here for switching the theme.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/radio-theme-switcher/default/preview.1763015692615.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__range-slider","t":"Range slider","d":"A reusable component for slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/range-slider/default/preview.1758779521438.png","pc":"avanishverma4","tg":["slider"]},{"id":"21st:avanishverma4__retro-button","t":"Retro button","d":"A reusable component for 3D retro buttons","k":"component","s":"21st","c":"actions/button","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/retro-button/default/preview.1765174861451.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__screen-timer-card","t":"Screen timer card","d":"A reusable component for a screen timer","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/screen-timer-card/default/preview.1762612541042.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__scroll-animation","t":"Scroll animation","d":"A reusable component for horizontal scroll animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/scroll-animation/default/preview.1765986335084.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__search-interface","t":"Search interface","d":"A reusable search interface component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"avanishverma4","st":"indexed","u":4,"pl":"https://cdn.21st.dev/avanishverma4/search-interface/default/preview.1758014834303.png","pc":"avanishverma4","tg":["search"]},{"id":"21st:avanishverma4__seo-progress-counter","t":"Seo progress counter","d":"A reusable component for Progress counter","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/seo-progress-counter/default/preview.1764772980445.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__slideshow","t":"Slideshow","d":"A reusable and responsive component for image slider","k":"component","s":"21st","c":"media/carousel","g":"media","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/slideshow/default/preview.1761714921801.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__spotlight-card","t":"Spotlight card","d":"A reusable spotlight card component with hover animation","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/spotlight-card/default/preview.1765897184105.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__spring-animation","t":"Spring animation","d":"A reusable component for spring animation","k":"component","s":"21st","c":"other","g":"other","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/spring-animation/default/preview.1759762143148.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__strong-password-creator","t":"Strong password creator","d":"A reusable component for a strong password creator","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/strong-password-creator/default/preview.1765809546310.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__svg-chart","t":"Svg chart","d":"A reusable and responsive component for chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/svg-chart/default/preview.1762076182389.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__table-v1","t":"Table v1","d":"A reusable table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/table-v1/default/preview.1767865558396.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__team-members-grid","t":"Team members grid","d":"A reusable and responsive team members grid with tooltip","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/team-members-grid/default/preview.1762320638577.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__testimonial-02","t":"Testimonial 02","d":"A reusable component for testimonial","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/testimonial-02/default/preview.1764603865178.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__testimonial-section-02","t":"Testimonial section 02","d":"A reusable component fot testimonials","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/testimonial-section-02/default/preview.1765349914358.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__testimonial-v2","t":"Testimonial v2","d":"A reusable testimonial component block","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"avanishverma4","st":"indexed","u":430,"pl":"https://cdn.21st.dev/avanishverma4/testimonial-v2/default/preview.1766064108485.png","pc":"avanishverma4","tg":["grid","testimonials"]},{"id":"21st:avanishverma4__testimonials-01","t":"Testimonials 01","d":"A reusable component for testimonial with glassmorphic card design for both light and dark mode","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/testimonials-01/default/preview.1764340027960.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__text-scramble","t":"Text scramble","d":"A reusable and responsive component for Text scramble effect on hover","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/text-scramble/default/preview.1766935934517.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__text-scroll-animation","t":"Text scroll animation","d":"A simple reusable example for text spring scroll animation in Framer.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/text-scroll-animation/default/preview.1764691766453.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__text-shimmer","t":"Text shimmer","d":"A reusable component with a text shimmer effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/text-shimmer/default/preview.1766471138297.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__thumbnail-carousel","t":"Thumbnail carousel","d":"A reusable and responsive thumbnail carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"avanishverma4","st":"indexed","u":78,"pl":"https://cdn.21st.dev/avanishverma4/thumbnail-carousel/default/preview.1762753965580.png","pc":"avanishverma4","tg":["carousel","gallery","pagination","slider"]},{"id":"21st:avanishverma4__toast","t":"Toast","d":"A reusable toast components","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/toast/default/preview.1760764196995.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__toast-01","t":"Toast 01","d":"A reusable component for the toast ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/toast-01/default/preview.1761032260778.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__toast-02","t":"Toast 02","d":"A reusable component for toast/snackbar","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/toast-02/default/preview.1761715882434.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__toggle-theme","t":"Toggle theme","d":"A reusable toggle component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/toggle-theme/default/preview.1759820242480.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__voice-input","t":"Voice input","d":"A reusable component for voice input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/voice-input/default/preview.1761835139361.png","pc":"avanishverma4"},{"id":"21st:avanishverma4__who-s-watching","t":"Who s watching","d":"A reusable and responsive component for a Netflix styled who's watching  profile","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"avanishverma4","st":"indexed","pl":"https://cdn.21st.dev/avanishverma4/who-s-watching/default/preview.1760509717409.png","pc":"avanishverma4"},{"id":"21st:avansiva4__focuznow-hero","t":"Focuznow hero","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). Features: cursor-reactive (swirl","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"avansiva4","st":"indexed","pl":"https://cdn.21st.dev/avansiva4/focuznow-hero/default/preview.1786232749271-4eb0cf43-c129-42bb-943f-0982baafc330.webp","pc":"avansiva4"},{"id":"21st:awp.richardson__locked-matrix","t":"Locked matrix","d":"Animated (flicker) ASCII art in the Matrix style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"awp.richardson","st":"indexed","pl":"https://cdn.21st.dev/awp.richardson/locked-matrix/default/preview.1785889223173-7fc69eaf-874b-48ce-b6f9-8b9c962ee8c9.webp","pc":"awp.richardson"},{"id":"21st:axai-kaizoku__animated-theme-toggle","t":"Animated theme toggle","d":"ToggleTheme is an interactive theme switcher for React/Next.js applications that allows users to toggle between light and dark modes. It features a smooth, animated icon transition","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"axai-kaizoku","st":"indexed","u":285,"pl":"https://cdn.21st.dev/axai-kaizoku/animated-theme-toggle/default/preview.1761396395425.png","pc":"axai-kaizoku","tg":["toggle"]},{"id":"21st:axai-kaizoku__use-window-size","t":"Use window size","d":"useWindowSize is a custom React hook that tracks the current dimensions of the browser window (width and height) in real time. It listens for the resize event and updates whenever ","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"axai-kaizoku","st":"indexed","pl":"https://cdn.21st.dev/axai-kaizoku/use-window-size/default/preview.1761378229484.png","pc":"axai-kaizoku"},{"id":"21st:axelwesselgren__plastic-button","t":"Plastic button","d":"A modern looking \"plastic\" button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"axelwesselgren","st":"indexed","u":73,"pl":"https://cdn.21st.dev/axelwesselgren/plastic-button/default/preview.1749335812699.png","pc":"axelwesselgren"},{"id":"21st:axelwesselgren__sign-up-form","t":"Sign up form","d":"A modern demo/template sign up form.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"axelwesselgren","st":"indexed","u":5,"pl":"https://cdn.21st.dev/axelwesselgren/sign-up-form/default/preview.1748445525846.png","pc":"axelwesselgren","tg":["sign-up"]},{"id":"21st:axlan.exe__secure-terminal-login","t":"Secure terminal login","d":"A cyberpunk-aesthetic login card with glitch title animation, magnetic button, cursor-tracking input beam highlights, text scramble on hover, and floating particles. Built with Rea","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"axlan.exe","st":"indexed","pl":"https://cdn.21st.dev/axlan.exe/secure-terminal-login/default/preview.1773737605034.png","pc":"axlan.exe"},{"id":"21st:axorax__testimonials-1","t":"Testimonials 1","d":"Simple testimonials section with minimal cards","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"axorax","st":"indexed","u":97,"pl":"https://cdn.21st.dev/user_2uf173JMsKfToyeH45lFSoeojRd/testimonials-1/default/preview.1746775299788.png","pc":"axorax","tg":["avatar","testimonials"]},{"id":"21st:aymanch-03__authentication-modal","t":"Authentication modal","d":"Responsive Solana wallet authentication modal built on top of @solana/web3.js with shadcn/ui","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"aymanch-03","st":"indexed","pl":"https://cdn.21st.dev/aymanch-03/authentication-modal/default/preview.1754163748793.png","pc":"aymanch-03"},{"id":"21st:aymanch-03__blog-posts","t":"Blog posts","d":"A responsive and adaptive grid layout component designed for displaying blog posts or articles in an elegant card format.\nFeatures a hero-style layout with one large primary card a","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"aymanch-03","st":"indexed","u":117,"pl":"https://cdn.21st.dev/aymanch-03/blog-posts/default/preview.1755469045974.png","pc":"aymanch-03","tg":["grid"]},{"id":"21st:aymanch-03__pricing-card","t":"Pricing card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"aymanch-03","st":"indexed","pl":"https://cdn.21st.dev/user_aymanch-03/pricing-card.png","pc":"aymanch-03"},{"id":"21st:aymanch-03__pricing-section","t":"Pricing section","d":"A comprehensive pricing section component that combines animated tabs and pricing cards. Originally built for Dub.co's pricing page.\n\nFeatures\n- Monthly/yearly frequency toggle wit","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"aymanch-03","st":"indexed","u":1207,"pl":"https://cdn.21st.dev/user_aymanch-03/pricing-section.png","pc":"aymanch-03","tg":["pricing-section"]},{"id":"21st:aymanch-03__pricing-tab","t":"Pricing tab","d":"An animated tab component with support for discount badges. Originally built for Dub.co's pricing frequency selector.\n\nFeatures\n- Smooth layout animations using Framer Motion\n- Opt","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"aymanch-03","st":"indexed","u":745,"pl":"https://cdn.21st.dev/user_aymanch-03/pricing-tab.png","pc":"aymanch-03","tg":["pricing-section","tabs"]},{"id":"21st:aymanch-03__toast","t":"Toast","d":"A minimal, dark-themed toast component with success, error, info, and warning variants using colored gradients and icons to convey status at a glance. It includes a close button an","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"aymanch-03","st":"indexed","pl":"https://cdn.21st.dev/aymanch-03/toast/default/preview.1765031267046.png","pc":"aymanch-03"},{"id":"21st:aymanch-03__user-dropdown","t":"User dropdown","d":"A comprehensive user profile dropdown menu with avatar trigger, status management, and organized navigation sections. Features dark/light mode support, customizable user data, and ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"aymanch-03","st":"indexed","u":283,"pl":"https://cdn.21st.dev/aymanch-03/user-dropdown/default/preview.1753807468275.png","pc":"aymanch-03","tg":["avatar","dropdown","menu","profile"]},{"id":"21st:ayushguleria73again__dock","t":"Dock","d":"Interactive dock-style navigation built with React + TypeScript and Framer Motion. Icons dynamically scale based on cursor position using motion values and transforms. Includes smo","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ayushguleria73again","st":"indexed","pl":"https://cdn.21st.dev/ayushguleria73again/dock/default/preview.1774414660300.png","pc":"ayushguleria73again"},{"id":"21st:ayushmxxn__3d-book-testimonial","t":"3d book testimonial","d":"Here is 3d book testimonial","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ayushmxxn","st":"indexed","u":57,"pl":"https://cdn.21st.dev/larsen66/3d-book-testimonial/default/preview.1750533934264.png","pc":"ayushmxxn","tg":["testimonials"]},{"id":"21st:ayushmxxn__3d-flip-card","t":"3d flip card","d":"An interactive card stack component with 3D hover effects and animations. Perfect for showcasing images, portfolios, or featured content.\n\nFeatures\n- Smooth 3D rotation effects\n- R","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ayushmxxn","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_ayushmxxn/3d-flip-card.png","pc":"ayushmxxn","tg":["gallery"]},{"id":"21st:ayushmxxn__code-block","t":"Code block","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ayushmxxn","st":"indexed","pl":"https://cdn.21st.dev/user_ayushmxxn/code-block.png","pc":"ayushmxxn","tg":["tabs"]},{"id":"21st:ayushmxxn__feature-section","t":"Feature section","d":"A sleek, animated feature section showcasing steps with engaging visuals and smooth transitions.\n\nFeatures\n- Auto-advancing steps with progress\n- Smooth animations and transitions\n","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ayushmxxn","st":"indexed","u":1413,"pl":"https://cdn.21st.dev/user_ayushmxxn/feature-section.png","pc":"ayushmxxn","tg":["features","progress","steps","slider"]},{"id":"21st:ayushmxxn__newsletter","t":"Newsletter","d":"Here is Newsletter component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ayushmxxn","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/newsletter/default/preview.1750533319436.png","pc":"ayushmxxn","tg":["avatar"]},{"id":"21st:ayushmxxn__pricing-section","t":"Pricing section","d":"Here is Pricing Section component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ayushmxxn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pricing-section/default/preview.1750533480296.png","pc":"ayushmxxn"},{"id":"21st:ayushmxxn__star-rating","t":"Star rating","d":"A customizable star rating component that allows users to rate with interactive star icons.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ayushmxxn","st":"indexed","u":129,"pl":"https://cdn.21st.dev/user_ayushmxxn/star-rating.png","pc":"ayushmxxn"},{"id":"21st:ayushmxxn__tech-stack","t":"Tech stack","d":"Here is Tech Stack component","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"ayushmxxn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tech-stack/default/preview.1750534120337.png","pc":"ayushmxxn"},{"id":"21st:ayushmxxn__testimonials","t":"Testimonials","d":"This Username Testimonial Displays user testimonials with profile images, usernames, feedback text, and a link to their social media.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ayushmxxn","st":"indexed","u":399,"pl":"https://cdn.21st.dev/user_ayushmxxn/testimonials.png","pc":"ayushmxxn","tg":["avatar","grid","link","testimonials"]},{"id":"21st:ayushmxxn__theme-toggle","t":"Theme toggle","d":"Cool Toggles with framer motion animations that you can copy-paste into your apps.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ayushmxxn","st":"indexed","u":1164,"pl":"https://cdn.21st.dev/user_ayushmxxn/theme-toggle.png","pc":"ayushmxxn","tg":["toggle"]},{"id":"21st:ayushmxxn__toast-1","t":"Toast 1","d":"Here is Toast component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ayushmxxn","st":"indexed","u":74,"pl":"https://cdn.21st.dev/larsen66/toast-1/default/preview.1753311227356.png","pc":"ayushmxxn","tg":["alert","notification","toast"]},{"id":"21st:ayushmxxn__tubelight-navbar","t":"Tubelight navbar","d":"A sleek and modern navigation bar component with smooth animations and a dynamic indicator. Perfect for primary navigation in web applications.\n\nFeatures\n- Animated tab indicator w","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ayushmxxn","st":"indexed","u":5543,"pl":"https://cdn.21st.dev/user_ayushmxxn/tubelight-navbar.png","pc":"ayushmxxn"},{"id":"21st:ayushmxxn__typewriter-testimonial","t":"Typewriter testimonial","d":"Here is Typewriter Testimonial component","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ayushmxxn","st":"indexed","u":108,"pl":"https://cdn.21st.dev/larsen66/typewriter-testimonial/default/preview.1750533979301.png","pc":"ayushmxxn","tg":["avatar","testimonials"]},{"id":"21st:ayushmxxn__vintage-keyboard","t":"Vintage keyboard","d":"A nostalgic vintage keyboard with interactive keypress animations and a realistic retro design","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"ayushmxxn","st":"indexed","pl":"https://cdn.21st.dev/ayushmxxn/vintage-keyboard/default/preview.1786904088916-b1ddab0a-7308-46da-8033-cc73314f0cba.png","pc":"ayushmxxn"},{"id":"21st:ayushmxxn__voice-testimonial","t":"Voice testimonial","d":"Here is Voice Testimonial component","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ayushmxxn","st":"indexed","u":66,"pl":"https://cdn.21st.dev/larsen66/voice-testimonial/default/preview.1750533583101.png","pc":"ayushmxxn","tg":["testimonials"]},{"id":"21st:ayushmxxn__waitlist","t":"Waitlist","d":"Here is waitlist ui component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ayushmxxn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/waitlist/default/preview.1750533403005.png","pc":"ayushmxxn","tg":["form","input"]},{"id":"21st:badtzx0__3d-wrapper","t":"3d wrapper","d":"Here is 3d Wrapper component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/3d-wrapper/default/preview.1754496539627.png","pc":"badtzx0"},{"id":"21st:badtzx0__animated-card","t":"Animated card","d":"Here is Animated Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"badtzx0","st":"indexed","u":128,"pl":"https://cdn.21st.dev/larsen66/animated-card/default/preview.1754501368215.png","pc":"badtzx0"},{"id":"21st:badtzx0__animated-card-chart","t":"Animated card chart","d":"Here is Animated Card Chart component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"badtzx0","st":"indexed","u":249,"pl":"https://cdn.21st.dev/larsen66/animated-card-chart/default/preview.1754501947991.png","pc":"badtzx0","tg":["card"]},{"id":"21st:badtzx0__animated-card-diagram","t":"Animated card diagram","d":"Here is Animated Card Diagram component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-card-diagram/default/preview.1754501720436.png","pc":"badtzx0","tg":["card","data-visualization","features","progress"]},{"id":"21st:badtzx0__animated-keyboard","t":"Animated keyboard","d":"Here is Animated Keyboard component","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-keyboard/default/preview.1754499385698.png","pc":"badtzx0"},{"id":"21st:badtzx0__blur-reveal","t":"Blur reveal","d":"Here is Blur Reveal component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"badtzx0","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/blur-reveal/default/preview.1754502472431.png","pc":"badtzx0","tg":["text"]},{"id":"21st:badtzx0__border-beam","t":"Border beam","d":"Here is Border Beam component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/border-beam/default/preview.1754499714950.png","pc":"badtzx0","tg":["border"]},{"id":"21st:badtzx0__cloud-orbit","t":"Cloud orbit","d":"Here is Cloud Orbit component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/badtzx0/cloud-orbit/default/preview.1785303553802-4b498cde-1c15-4ab5-bbcc-d08297b7c7c8.png","pc":"badtzx0"},{"id":"21st:badtzx0__cursor-cards","t":"Cursor cards","d":"Here is Cursor Cards component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"badtzx0","st":"indexed","u":74,"pl":"https://cdn.21st.dev/larsen66/cursor-cards/default/preview.1754500341063.png","pc":"badtzx0","tg":["cursor","notification"]},{"id":"21st:badtzx0__dock","t":"Dock","d":"Here is dock component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"badtzx0","st":"indexed","u":59,"pl":"https://cdn.21st.dev/larsen66/dock/default/preview.1754500496489.png","pc":"badtzx0","tg":["dock"]},{"id":"21st:badtzx0__glowing-button","t":"Glowing button","d":"A visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or important interactions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"badtzx0","st":"indexed","u":56,"pl":"https://cdn.21st.dev/badtzx0/glowing-button/default/preview.1747925723853.png","pc":"badtzx0"},{"id":"21st:badtzx0__gradient-slide-button","t":"Gradient slide button","d":"Here is Gradient Slide Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"badtzx0","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/gradient-slide-button/default/preview.1754504081376.png","pc":"badtzx0"},{"id":"21st:badtzx0__like-button","t":"Like button","d":"Here is Like Button component","k":"component","s":"21st","c":"actions/link","g":"actions","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/like-button/default/preview.1754504611059.png","pc":"badtzx0"},{"id":"21st:badtzx0__shuffle-button","t":"Shuffle button","d":"Here is Shuffle Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shuffle-button/default/preview.1754504469315.png","pc":"badtzx0"},{"id":"21st:badtzx0__star-button","t":"Star button","d":"Here is Star Button component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"badtzx0","st":"indexed","u":51,"pl":"https://cdn.21st.dev/larsen66/star-button/default/preview.1754504297473.png","pc":"badtzx0","tg":["border"]},{"id":"21st:badtzx0__swipe-button","t":"Swipe button","d":"Here is Swipe Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"badtzx0","st":"indexed","pl":"https://cdn.21st.dev/larsen66/swipe-button/default/preview.1754503937948.png","pc":"badtzx0"},{"id":"21st:bankkroll__acme-hero","t":"Acme hero","d":"Animated hero section and nav","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"bankkroll","st":"indexed","u":194,"pl":"https://cdn.21st.dev/bankkroll/acme-hero/default/preview.1754169391717.png","pc":"bankkroll","tg":["dashboard","cta","hero"]},{"id":"21st:bankkroll__auth-form-1","t":"Auth form 1","d":"Auth form with AuthSignIn, AuthSignUp, AuthForgotPassword, AuthResetSuccess.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"bankkroll","st":"rated","u":108,"pl":"https://cdn.21st.dev/user_2vDrVta4PKJEhGZOxwYiAcxSKTV/auth-form-1/default/preview.1750812033332.png","pc":"bankkroll","tg":["form","sign-in"],"sc":22},{"id":"21st:bankkroll__code-editor-sheet","t":"Code editor sheet","d":"A sleek, accessible code editor sheet powered by shadcn/ui, Ace Editor, and Radix UI supporting multiple languages with syntax highlighting and theme switching. Easily integrate cu","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"bankkroll","st":"indexed","pl":"https://cdn.21st.dev/bankkroll/code-editor-sheet/default/preview.1749408348908.png","pc":"bankkroll"},{"id":"21st:bankkroll__commerce-hero","t":"Commerce hero","d":"Animated ecommerce hero and navbar.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"bankkroll","st":"indexed","u":176,"pl":"https://cdn.21st.dev/bankkroll/commerce-hero/default/preview.1754172921365.png","pc":"bankkroll"},{"id":"21st:bankkroll__contribution-graph","t":"Contribution graph","d":"A composable, customizable contribution graph component inspired by GitHub's activity heatmap. Features composable subcomponents (Grid, Tooltip, Legend), CSS variable theming, conf","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"bankkroll","st":"rated","pl":"https://cdn.21st.dev/bankkroll/contribution-graph/default/preview.1776012074859.png","pc":"bankkroll","sc":18},{"id":"21st:bankkroll__cookie-consent","t":"Cookie consent","d":"A fully customizable cookie consent component. It features smooth animations, mobile responsiveness, and supports configurable categories, essentials, and local storage preference ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"bankkroll","st":"indexed","u":93,"pl":"https://cdn.21st.dev/user_2vDrVta4PKJEhGZOxwYiAcxSKTV/cookie-consent/default/preview.1750812845732.png","pc":"bankkroll"},{"id":"21st:bankkroll__file-upload-button","t":"File upload button","d":"A sleek file upload button for React, built with shadcn/ui. Supports click and drag-and-drop, with file type/size validation, image previews, and file management. Customizable via ","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"bankkroll","st":"indexed","pl":"https://cdn.21st.dev/bankkroll/file-upload-button/default/preview.1751640178519.png","pc":"bankkroll","tg":["upload-download"]},{"id":"21st:bankkroll__file-viewer","t":"File viewer","d":"TypeScript-based React component, inspired by Supabase UI, for navigating file trees and previewing code with Shiki syntax highlighting. Perfect for documentation or dev tools, it ","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"bankkroll","st":"indexed","u":194,"pl":"https://cdn.21st.dev/bankkroll/file-viewer/default/preview.1752168229003.png","pc":"bankkroll","tg":["file-tree"]},{"id":"21st:bankkroll__myna-hero","t":"Myna hero","d":"Animated hero and navbar","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"bankkroll","st":"indexed","u":319,"pl":"https://cdn.21st.dev/bankkroll/myna-hero/default/preview.1754173666850.png","pc":"bankkroll","tg":["ai-chat","features"]},{"id":"21st:bankkroll__number-pad","t":"Number pad","d":"A customizable number pad component for entering numeric values, supporting various formats like currency, phone, decimal, integer, percentage, pin, and time. Features both button-","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"bankkroll","st":"indexed","pl":"https://cdn.21st.dev/bankkroll/number-pad/default/preview.1751642013181.png","pc":"bankkroll","tg":["modal"]},{"id":"21st:bankkroll__pricing-card","t":"Pricing card","d":"A modern, animated pricing card component with features and perks sections.\n\nFeatures:\n\t•\tSmooth animations on scroll\n\t•\tResponsive layout\n\t•\tCustomizable content\n\t•\tFeature/perk l","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"bankkroll","st":"indexed","u":333,"pl":"https://cdn.21st.dev/user_BankkRoll/pricing-card.png","pc":"bankkroll","tg":["pricing-section"]},{"id":"21st:bankkroll__search-command-dialog","t":"Search command dialog","d":"A reusable shadcn/ui-style command dialog component with a search button trigger, offering accessible, customizable command menus with keyboard navigation and Tailwind CSS styling.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"bankkroll","st":"indexed","pl":"https://cdn.21st.dev/bankkroll/search-command-dialog/default/preview.1753323238514.png","pc":"bankkroll"},{"id":"21st:baozhouqi__ai-chat-input","t":"Ai chat input","d":"Open ended prompt inputs that can be used in AI conversations and other natural language prompting","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"baozhouqi","st":"indexed","pl":"https://cdn.21st.dev/baozhouqi/ai-chat-input/default/preview.1749710893720.png","pc":"baozhouqi","tg":["input"]},{"id":"21st:baozhouqi__magnifier-lens","t":"Magnifier lens","d":"Hover over the image to see the magnifying glass effect with optical distortion","k":"component","s":"21st","c":"media/gallery","g":"media","a":"baozhouqi","st":"indexed","u":21,"pl":"https://cdn.21st.dev/baozhouqi/magnifier-lens/default/preview.1749632825966.png","pc":"baozhouqi"},{"id":"21st:barneyrileymusic__hypnotising-wobble","t":"Hypnotising wobble","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 3-color palette (#EAF4FC, #F4B3C2, #B28FCE). Features: film grain, vignette. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"barneyrileymusic","st":"indexed","pl":"https://cdn.21st.dev/barneyrileymusic/hypnotising-wobble/default/preview.1785867946774-cd0534e5-c3ff-4ebf-b98f-c7f32f5be508.webp","pc":"barneyrileymusic"},{"id":"21st:barriar398__barber","t":"Barber","d":"Animated (flicker) ASCII art in the Hex Dump style, made with the 21st ASCII editor and baked to a looping video. Styled with a minimal look. A drop-in, zero-dependency React compo","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"barriar398","st":"indexed","pl":"https://cdn.21st.dev/barriar398/barber/default/preview.1786227612839-452fa115-5729-4156-a787-a9f771f216eb.webp","pc":"barriar398"},{"id":"21st:bart-krakowski__hover-button","t":"Hover button","d":"Hover button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bart-krakowski","st":"indexed","pl":"https://cdn.21st.dev/bart-krakowski/hover-button/default/preview.1753793757606.png","pc":"bart-krakowski"},{"id":"21st:bart-krakowski__thanos-snap-effect","t":"Thanos snap effect","d":"Thanos snap effect","k":"component","s":"21st","c":"other","g":"other","a":"bart-krakowski","st":"indexed","u":62,"pl":"https://cdn.21st.dev/bart-krakowski/thanos-snap-effect/default/preview.1749657553218.png","pc":"bart-krakowski"},{"id":"21st:barvian__activity-with-number-flow","t":"Activity with number flow","d":"A component of social media sharing buttons with Number Flow animations","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"barvian","st":"rated","u":37,"pl":"https://cdn.21st.dev/user_barvian/activity-with-number-flow.png","pc":"barvian","sc":18},{"id":"21st:barvian__number-flow","t":"Number flow","d":"A React component to transition, localize, and format numbers. Dependency-free. Accessible. Customizable.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"barvian","st":"indexed","pl":"https://cdn.21st.dev/user_barvian/number-flow.png","pc":"barvian","tg":["number"]},{"id":"21st:barvian__number-flow-transitions","t":"Number flow transitions","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"barvian","st":"indexed","pl":"https://cdn.21st.dev/user_barvian/number-flow-transitions.png","pc":"barvian"},{"id":"21st:barvian__number-input","t":"Number input","d":"Number Input by NumberFlow","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"barvian","st":"indexed","pl":"https://cdn.21st.dev/user_barvian/number-input.png","pc":"barvian"},{"id":"21st:barvian__slider-number-flow","t":"Slider number flow","d":"Slider with animated value number by Number Flow","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"barvian","st":"indexed","u":125,"pl":"https://cdn.21st.dev/user_barvian/slider-number-flow.png","pc":"barvian","tg":["number","slider"]},{"id":"21st:benjitawachin__roaddivider","t":"Roaddivider","d":"Divisor de seccion estilo ruta: franja de asfalto con linea central amarilla discontinua animada","k":"component","s":"21st","c":"other","g":"other","a":"benjitawachin","st":"indexed","pl":"https://21st.dev/@benjitawachin/components/roaddivider","pc":"benjitawachin"},{"id":"21st:benjitawachin__scrollwheel","t":"Scrollwheel","d":"Envuelve TireWheel y la hace rotar en proporción al scroll de la página, respeta prefers-reduced-motion","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"benjitawachin","st":"indexed","pl":"https://21st.dev/@benjitawachin/components/scrollwheel","pc":"benjitawachin"},{"id":"21st:benjitawachin__tiresearch","t":"Tiresearch","d":"Buscador de medida de neumáticos con formato de flanco de cubierta (205/55 R16), arma la consulta y deriva a WhatsApp","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"benjitawachin","st":"indexed","pl":"https://21st.dev/@benjitawachin/components/tiresearch","pc":"benjitawachin"},{"id":"21st:benjitawachin__tirewheel","t":"Tirewheel","d":"Rueda de neumático ilustrada en SVG puro con giro opcional por CSS, sin dependencias ni imágenes","k":"component","s":"21st","c":"other","g":"other","a":"benjitawachin","st":"indexed","pl":"https://21st.dev/@benjitawachin/components/tirewheel","pc":"benjitawachin"},{"id":"21st:beratberkayg__ai-chat","t":"Ai chat","d":"ai chat card animated","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"beratberkayg","st":"rated","u":126,"pl":"https://cdn.21st.dev/beratberkayg/ai-chat/default/preview.1756670053130.png","pc":"beratberkayg","tg":["ai-chat"],"sc":18},{"id":"21st:beratberkayg__ai-loader","t":"Ai loader","d":"ai loader background and animation","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/ai-loader/default/preview.1755292245488.png","pc":"beratberkayg","tg":["ai-chat","spinner"]},{"id":"21st:beratberkayg__animated-button","t":"Animated button","d":"animated button with background","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"beratberkayg","st":"indexed","u":37,"pl":"https://cdn.21st.dev/beratberkayg/animated-button/default/preview.1755201508654.png","pc":"beratberkayg","tg":["cta"]},{"id":"21st:beratberkayg__animated-card","t":"Animated card","d":"animated card 3D card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/animated-card/default/preview.1755547463759.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__button","t":"Button","d":"animated glass button","k":"component","s":"21st","c":"actions/link","g":"actions","a":"beratberkayg","st":"indexed","u":103,"pl":"https://cdn.21st.dev/beratberkayg/button/default/preview.1755293295530.png","pc":"beratberkayg","tg":["link"]},{"id":"21st:beratberkayg__button-1","t":"Button 1","d":"button with background blur","k":"component","s":"21st","c":"actions/button","g":"actions","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/user_2sjKtWeP6DDixDrGQQItKElODmk/button-1/default/preview.1755632751006.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__button-2","t":"Button 2","d":"button with background","k":"component","s":"21st","c":"actions/button","g":"actions","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/button-2/default/preview.1755201727001.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__button-3","t":"Button 3","d":"animated button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/button-3/default/preview.1755202158447.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__button-4","t":"Button 4","d":"realistic animated button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"beratberkayg","st":"indexed","u":45,"pl":"https://cdn.21st.dev/beratberkayg/button-4/default/preview.1755544271429.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__code-snippet","t":"Code snippet","d":"Code Snippet","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/code-snippet/default/preview.1752780235266.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__feature-card","t":"Feature card","d":"feature card animated card","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"beratberkayg","st":"indexed","u":31,"pl":"https://cdn.21st.dev/beratberkayg/feature-card/default/preview.1755546342728.png","pc":"beratberkayg","tg":["features","pricing-section"]},{"id":"21st:beratberkayg__glassmorphism-profile-card","t":"Glassmorphism profile card","d":"Glassmorphism profile Card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"beratberkayg","st":"indexed","u":59,"pl":"https://cdn.21st.dev/beratberkayg/glassmorphism-profile-card/default/preview.1755632572545.png","pc":"beratberkayg","tg":["card","button","profile"]},{"id":"21st:beratberkayg__glitch-text","t":"Glitch text","d":"Glitch text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/glitch-text/default/preview.1755204281809.png","pc":"beratberkayg","tg":["text"]},{"id":"21st:beratberkayg__hero","t":"Hero","d":"animated hero","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"beratberkayg","st":"indexed","u":123,"pl":"https://cdn.21st.dev/beratberkayg/hero/default/preview.1755542976364.png","pc":"beratberkayg","tg":["ai-chat"]},{"id":"21st:beratberkayg__hero-1","t":"Hero 1","d":"animated hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"beratberkayg","st":"indexed","u":539,"pl":"https://cdn.21st.dev/beratberkayg/hero-1/default/preview.1755803737396.png","pc":"beratberkayg","tg":["cta","hero"]},{"id":"21st:beratberkayg__highlight-card","t":"Highlight card","d":"Highlight Card  shacn card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"beratberkayg","st":"indexed","u":112,"pl":"https://cdn.21st.dev/beratberkayg/highlight-card/default/preview.1755889075105.png","pc":"beratberkayg","tg":["card","features"]},{"id":"21st:beratberkayg__iphone","t":"Iphone","d":"iphone screen","k":"component","s":"21st","c":"other","g":"other","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/iphone/default/preview.1755203443322.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__membership-card","t":"Membership card","d":"Membership Card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/membership-card/default/preview.1752779116100.png","pc":"beratberkayg","tg":["profile"]},{"id":"21st:beratberkayg__modal-card","t":"Modal card","d":"modern modal card","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/modal-card/default/preview.1759605207016.png","pc":"beratberkayg","tg":["ai-chat","features","modal"]},{"id":"21st:beratberkayg__product-card","t":"Product card","d":"product card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/product-card/default/preview.1752778651542.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__product-card-1","t":"Product card 1","d":"The ProductCard component is a fully customizable e-commerce card built with shadcn/ui, Tailwind CSS, and Framer Motion.\nIt provides a modern, responsive, and theme-aware product s","k":"component","s":"21st","c":"media/gallery","g":"media","a":"beratberkayg","st":"indexed","u":78,"pl":"https://cdn.21st.dev/beratberkayg/product-card-1/default/preview.1755528253290.png","pc":"beratberkayg","tg":["image"]},{"id":"21st:beratberkayg__product-roadmap","t":"Product roadmap","d":"Product Roadmap","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"beratberkayg","st":"rated","pl":"https://cdn.21st.dev/beratberkayg/product-roadmap/default/preview.1753298917308.png","pc":"beratberkayg","sc":19},{"id":"21st:beratberkayg__profile-card","t":"Profile card","d":"profile card neon animation","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"beratberkayg","st":"indexed","u":85,"pl":"https://cdn.21st.dev/beratberkayg/profile-card/default/preview.1755628973377.png","pc":"beratberkayg","tg":["profile"]},{"id":"21st:beratberkayg__radial-social-menu","t":"Radial social menu","d":"Radial Social Menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"beratberkayg","st":"indexed","u":27,"pl":"https://cdn.21st.dev/beratberkayg/radial-social-menu/default/preview.1755206162361.png","pc":"beratberkayg","tg":["menu","link"]},{"id":"21st:beratberkayg__roadmap-card","t":"Roadmap card","d":"The RoadmapCard component is a minimal, animated product roadmap built with shadcn/ui and Framer Motion.\nIt displays key project milestones in a clean timeline format, supporting l","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"beratberkayg","st":"indexed","u":126,"pl":"https://cdn.21st.dev/beratberkayg/roadmap-card/default/preview.1755529414756.png","pc":"beratberkayg","tg":["timeline"]},{"id":"21st:beratberkayg__shader-hero","t":"Shader hero","d":"Shader hero animation","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/shader-hero/default/preview.1755720749784.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__simple-hero","t":"Simple hero","d":"simple hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/simple-hero/default/preview.1755544902808.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__social-card","t":"Social card","d":"social card with icons","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/social-card/default/preview.1759612738953.png","pc":"beratberkayg"},{"id":"21st:beratberkayg__stat-card","t":"Stat card","d":"stat card animated","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"beratberkayg","st":"indexed","u":98,"pl":"https://cdn.21st.dev/beratberkayg/stat-card/default/preview.1756668798750.png","pc":"beratberkayg","tg":["stat"]},{"id":"21st:beratberkayg__stats-cards","t":"Stats cards","d":"shadcn stats cards","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"beratberkayg","st":"indexed","u":91,"pl":"https://cdn.21st.dev/beratberkayg/stats-cards/default/preview.1752777592319.png","pc":"beratberkayg","tg":["card","dashboard","stat"]},{"id":"21st:beratberkayg__subscription-card","t":"Subscription card","d":"Subscription Card","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/subscription-card/default/preview.1753298183473.png","pc":"beratberkayg","tg":["stat"]},{"id":"21st:beratberkayg__wallet-card-1","t":"Wallet card 1","d":"wallet card balance account","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/wallet-card-1/default/preview.1755113326481.png","pc":"beratberkayg","tg":["dashboard"]},{"id":"21st:beratberkayg__wallet-card-2","t":"Wallet card 2","d":"wallet card account balance deposit","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/beratberkayg/wallet-card-2/default/preview.1755113671416.png","pc":"beratberkayg","tg":["dashboard"]},{"id":"21st:berkcangumusisik__aurora-hero-section","t":"Aurora hero section","d":"A visually stunning hero section for modern SaaS websites. Features an animated, glowing aurora background effect combined with a technical grid pattern and a frosted glass badge.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"berkcangumusisik","st":"indexed","pl":"https://cdn.21st.dev/berkcangumusisik/aurora-hero-section/default/preview.1765442888568.png","pc":"berkcangumusisik"},{"id":"21st:berkcangumusisik__holographic-3d-card","t":"Holographic 3d card","d":"A stunning interactive card with a 3D tilt effect and dynamic holographic glare that follows the mouse movement. Creates a premium, tangible feel for digital assets.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"berkcangumusisik","st":"indexed","pl":"https://cdn.21st.dev/berkcangumusisik/holographic-3d-card/default/preview.1765392087538.png","pc":"berkcangumusisik"},{"id":"21st:berkcangumusisik__modern-glassmorphism-header","t":"Modern glassmorphism header","d":"A premium navigation header with glassmorphism design, animated backgrounds, responsive mobile menu, and interactive gradient effects. Features floating particles and smooth micro-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"berkcangumusisik","st":"indexed","pl":"https://cdn.21st.dev/berkcangumusisik/modern-glassmorphism-header/default/preview.1753539622232.png","pc":"berkcangumusisik"},{"id":"21st:berkcangumusisik__sidebar","t":"Sidebar","d":"Modern minimal sidebar component with icon-only navigation, hover tooltips, notification badges, and active state management. Built with TypeScript and Tailwind CSS, featuring smoo","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"berkcangumusisik","st":"indexed","pl":"https://cdn.21st.dev/berkcangumusisik/sidebar/default/preview.1750611539264.png","pc":"berkcangumusisik"},{"id":"21st:berlix__checkbox","t":"Checkbox","d":"Here is modern minimalistic checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"berlix","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox/default/preview.1750174433201.png","pc":"berlix","tg":["checkbox","form"]},{"id":"21st:berlix__input","t":"Input","d":"Here is animated Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"berlix","st":"indexed","pl":"https://cdn.21st.dev/larsen66/input/default/preview.1750174931780.png","pc":"berlix","tg":["input"]},{"id":"21st:berlix__menu-vertical","t":"Menu vertical","d":"Here is Menu Vertical component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"berlix","st":"indexed","u":176,"pl":"https://cdn.21st.dev/larsen66/menu-vertical/default/preview.1750175059363.png","pc":"berlix","tg":["list","menu","navigation-menu"]},{"id":"21st:berlix__split-text","t":"Split text","d":"Here is Split Text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"berlix","st":"indexed","u":29,"pl":"https://cdn.21st.dev/larsen66/split-text/default/preview.1750174629608.png","pc":"berlix","tg":["text"]},{"id":"21st:bethinagaraju57__expanding-feature-cards","t":"Expanding feature cards","d":"A responsive set of cards that display key features. Each card is initially collapsed, showing only a title, and expands on hover or click to reveal a detailed description with an ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"bethinagaraju57","st":"indexed","pl":"https://cdn.21st.dev/bethinagaraju57/expanding-feature-cards/default/preview.1756194651387.png","pc":"bethinagaraju57"},{"id":"21st:better-upload__paste-upload-area","t":"Paste upload area","d":"A wrapper component that lets users upload files by pasting them from the clipboard into any child element.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"better-upload","st":"indexed","pl":"https://cdn.21st.dev/better-upload/paste-upload-area/default/preview.1784698188355-a0b7197d-2548-4a37-af7e-6d7bd007c312.png","pc":"better-upload"},{"id":"21st:bg997965__smoke-ring-cloud-shader","t":"Smoke ring cloud shader","d":"Animated WebGL shader background in the Smoke Ring style. Cloud variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#6A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"bg997965","st":"indexed","pl":"https://cdn.21st.dev/bg997965/smoke-ring-cloud-shader/default/preview.1785528948782-01327c4d-7ed7-49db-8158-885dc660077c.webp","pc":"bg997965"},{"id":"21st:bhomikproductivitylab__pricing-section","t":"Pricing section","d":"A clean, modern pricing section designed for SaaS and digital products, featuring a clear comparison between plans, a highlighted popular option, and a custom quote callout. The la","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"bhomikproductivitylab","st":"indexed","pl":"https://cdn.21st.dev/bhomikproductivitylab/pricing-section/default/preview.1767680157729.png","pc":"bhomikproductivitylab"},{"id":"21st:bhomikproductivitylab__sidebar","t":"Sidebar","d":"A sidebar with a logo, different sections, profile button, upgrade button, note that it only supports dark mode.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"bhomikproductivitylab","st":"indexed","pl":"https://cdn.21st.dev/bhomikproductivitylab/sidebar/default/preview.1759322188717.png","pc":"bhomikproductivitylab"},{"id":"21st:bhomikproductivitylab__sign-in-page","t":"Sign in page","d":"Login Page with an image and a form and a continue with google, github option.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"bhomikproductivitylab","st":"indexed","pl":"https://cdn.21st.dev/bhomikproductivitylab/sign-in-page/default/preview.1759249169181.png","pc":"bhomikproductivitylab","tg":["form","image","sign-in"]},{"id":"21st:bhomikproductivitylab__sign-up-page","t":"Sign up page","d":"This is a signup page with an image on left and the form on right.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"bhomikproductivitylab","st":"rated","u":80,"pl":"https://cdn.21st.dev/bhomikproductivitylab/sign-up-page/default/preview.1759132242612.png","pc":"bhomikproductivitylab","tg":["checkbox","form","input","sign-up"],"sc":18},{"id":"21st:bibekkd__button","t":"Button","d":"GradientButton is a reusable UI component that renders a visually appealing button with a blue gradient background. It accepts customizable button text and an onClick handler, maki","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bibekkd","st":"indexed","pl":"https://cdn.21st.dev/bibekkd/button/default/preview.1751632597144.png","pc":"bibekkd"},{"id":"21st:bigbogiballer__pricing-section","t":"Pricing section","d":"Pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"bigbogiballer","st":"indexed","u":25,"pl":"https://cdn.21st.dev/bigbogiballer/pricing-section/default/preview.1759412191336.png","pc":"bigbogiballer","tg":["pricing-section"]},{"id":"21st:bigboss-noplz__bigboss","t":"Bigboss","d":"nothing what do u want","k":"component","s":"21st","c":"other","g":"other","a":"bigboss-noplz","st":"indexed","pl":"https://cdn.21st.dev/bigboss-noplz/bigboss/default/preview.1747317558353.png","pc":"bigboss-noplz"},{"id":"21st:bintangpradanaarfiyan__asfd","t":"Asfd","d":"adfadadfad","k":"component","s":"21st","c":"other","g":"other","a":"bintangpradanaarfiyan","st":"indexed","pl":"https://cdn.21st.dev/bintangpradanaarfiyan/asfd/default/preview.1765716212579.png","pc":"bintangpradanaarfiyan"},{"id":"21st:bklitai__area-chart","t":"Area chart","d":"Here is Area Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"bklitai","st":"indexed","pl":"https://cdn.21st.dev/bklitai/area-chart/default/preview.1785309273855-6fae08e5-ac3a-4650-b752-7eb7a41fd523.png","pc":"bklitai"},{"id":"21st:bklitai__bar-chart","t":"Bar chart","d":"Here is Bar Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"bklitai","st":"indexed","u":37,"pl":"https://cdn.21st.dev/bklitai/bar-chart/default/preview.1785311329972-b058687e-c765-43f3-9e84-57c20691fb75.png","pc":"bklitai"},{"id":"21st:bklitai__funnel-chart","t":"Funnel chart","d":"Here is Funnel Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"bklitai","st":"indexed","u":78,"pl":"https://cdn.21st.dev/lyanchouss/funnel-chart/default/preview.1772649671445.png","pc":"bklitai","tg":["data-visualization","dashboard","grid"]},{"id":"21st:bklitai__funnel-chart--funnel-chart-five","t":"Funnel chart five","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"bklitai","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/funnel-chart/funnel-chart-five/preview.1772649671445.png","pc":"bklitai"},{"id":"21st:blacksmith301__ai-hero-background","t":"Ai hero background","d":"A responsive, animated hero background built with Three.js using InstancedMesh and post-processing effects (Unreal Bloom + RGB Shift). Ideal for landing pages, hero sections, and v","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"blacksmith301","st":"indexed","u":15,"pl":"https://cdn.21st.dev/blacksmith301/ai-hero-background/default/preview.1785364006263-1cbf701e-9350-4dbe-8625-cad304c61aa6.png","pc":"blacksmith301"},{"id":"21st:blaqj23__button","t":"Button","d":"claude setup","k":"component","s":"21st","c":"actions/button","g":"actions","a":"blaqj23","st":"indexed","pl":"https://cdn.21st.dev/blaqj23/button/default/preview.1780108821261.png","pc":"blaqj23"},{"id":"21st:blessedux__marquee-ribbon","t":"Marquee ribbon","d":"A simple TailwindCSS animation of 2 ribbons marquee for any type of services or item descriptions. ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"blessedux","st":"indexed","pl":"https://cdn.21st.dev/blessedux/marquee-ribbon/default/preview.1774890970897.png","pc":"blessedux"},{"id":"21st:bogdandream__responsive-neuronal-background","t":"Responsive neuronal background","d":"Responsive Neuronal Background is a configurable React canvas background that visualizes an artificial neural network with animated signals, mouse interaction, focus-aware energy r","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"bogdandream","st":"indexed","pl":"https://cdn.21st.dev/bogdandream/responsive-neuronal-background/default/preview.1774137516764.png","pc":"bogdandream"},{"id":"21st:boostmotivation12__bloom-field-gradient","t":"Bloom field gradient","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#EAF4FC, #895B8A, #8511E4, #475569). Features: soft blur finish, fi","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"boostmotivation12","st":"indexed","pl":"https://cdn.21st.dev/boostmotivation12/bloom-field-gradient/default/preview.1786438546104-d0aa1937-7eed-4a4e-8b02-ef7000323963.webp","pc":"boostmotivation12"},{"id":"21st:botsnew354__calculator-neon-3d","t":"Calculator neon 3d","d":"Calculator Neon  3D","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"botsnew354","st":"indexed","pl":"https://cdn.21st.dev/botsnew354/calculator-neon-3d/default/preview.1750645567836.png","pc":"botsnew354"},{"id":"21st:botsnew354__ia-siri-chat","t":"Ia siri chat","d":"Voice Chat IA siri","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"botsnew354","st":"indexed","pl":"https://cdn.21st.dev/botsnew354/ia-siri-chat/default/preview.1750357827916.png","pc":"botsnew354","tg":["ai-chat"]},{"id":"21st:boudjadjasamira__story-scroll","t":"Story scroll","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"boudjadjasamira","st":"indexed","u":70,"pl":"https://cdn.21st.dev/boudjadjasamira/story-scroll/default/preview.1777905625968.png","pc":"boudjadjasamira","tg":["hero","scroll-area"]},{"id":"21st:brijr__accordion-1","t":"Accordion 1","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"brijr","st":"indexed","u":36,"pl":"https://cdn.21st.dev/larsen66/accordion-1/default/preview.1757994402489.png","pc":"brijr","tg":["accordion","faq"]},{"id":"21st:brijr__call-to-action-1","t":"Call to action 1","d":"Here is Call to Action component","k":"component","s":"21st","c":"actions/link","g":"actions","a":"brijr","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/call-to-action-1/default/preview.1757993954855.png","pc":"brijr","tg":["cta","link"]},{"id":"21st:brijr__feature-modern","t":"Feature modern","d":"Here is Feature component ","k":"component","s":"21st","c":"media/icon","g":"media","a":"brijr","st":"indexed","pl":"https://cdn.21st.dev/larsen66/feature-modern/default/preview.1757993312673.png","pc":"brijr","tg":["cta","features","grid","icon"]},{"id":"21st:brijr__hero-modern","t":"Hero modern","d":"Here is Hero Modern component","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"brijr","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/hero-modern/default/preview.1757991712685.png","pc":"brijr","tg":["cta","hero","image","text"]},{"id":"21st:brijr__pricing-section","t":"Pricing section","d":"Here is Pricing Section component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"brijr","st":"indexed","u":145,"pl":"https://cdn.21st.dev/larsen66/pricing-section/default/preview.1757995276871.png","pc":"brijr","tg":["pricing-section","table","slider","tabs"]},{"id":"21st:browser-vm__exploding-loading-screen","t":"Exploding loading screen","d":"A loading screen where two dots circle around the text 'loading' until they converge and explode!","k":"component","s":"21st","c":"status/loader","g":"status","a":"browser-vm","st":"indexed","pl":"https://cdn.21st.dev/browser-vm/exploding-loading-screen/default/preview.1760969380178.png","pc":"browser-vm"},{"id":"21st:bruno_0cd2e1b7__stats","t":"Stats","d":"Display statistics and metrics","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"bruno_0cd2e1b7","st":"indexed","pl":"https://cdn.21st.dev/bruno_0cd2e1b7/stats/default/preview.1769059881968.png","pc":"bruno_0cd2e1b7"},{"id":"21st:brunowerneck__fireworks-background","t":"Fireworks background","d":"A reusable React component that adds stunning animated fireworks to any element.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"brunowerneck","st":"indexed","pl":"https://cdn.21st.dev/brunowerneck/fireworks-background/default/preview.1748488355994.png","pc":"brunowerneck"},{"id":"21st:bucharitesh__game-of-life","t":"Game of life","d":"A customizable implementation of Conway's Game of Life with interactive cells, adjustable parameters, and smooth animations. Features configurable cell colors, grid size, and simul","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"bucharitesh","st":"indexed","pl":"https://cdn.21st.dev/bucharitesh/game-of-life/default/preview.1753477102400.png","pc":"bucharitesh"},{"id":"21st:bucharitesh__magic-cursor","t":"Magic cursor","d":"The Magical Mouse component creates a magical mouse effect. It supports hover effects, color changes, and pixel shape customization.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"bucharitesh","st":"indexed","u":24,"pl":"https://cdn.21st.dev/bucharitesh/magic-cursor/default/preview.1753479659644.png","pc":"bucharitesh","tg":["cursor"]},{"id":"21st:bucharitesh__modern-verticle-progress","t":"Modern verticle progress","d":"The Modern Progress component creates a modern progress bar. It supports hover effects, color changes, and pixel shape customization.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"bucharitesh","st":"indexed","pl":"https://cdn.21st.dev/bucharitesh/modern-verticle-progress/default/preview.1753477937931.png","pc":"bucharitesh","tg":["progress"]},{"id":"21st:bucharitesh__pixel-icon","t":"Pixel icon","d":"The Icon component creates customizable, interactive pixel-based icons. It supports hover effects, color changes, and pixel shape customization.","k":"component","s":"21st","c":"media/icon","g":"media","a":"bucharitesh","st":"indexed","pl":"https://cdn.21st.dev/bucharitesh/pixel-icon/default/preview.1754086836766.png","pc":"bucharitesh"},{"id":"21st:bucharitesh__split-text-effect","t":"Split text effect","d":"A Vercel and Rauno inspired split text effect for your website.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"bucharitesh","st":"indexed","u":11,"pl":"https://cdn.21st.dev/bucharitesh/split-text-effect/default/preview.1753478693355.png","pc":"bucharitesh"},{"id":"21st:bucharitesh__view-magnifier","t":"View magnifier","d":"A dynamic image magnifier component that creates an interactive zoom effect on hover. Features customizable magnification level, smooth transitions, and responsive behavior for enh","k":"component","s":"21st","c":"media/gallery","g":"media","a":"bucharitesh","st":"indexed","u":16,"pl":"https://cdn.21st.dev/bucharitesh/view-magnifier/default/preview.1753480627061.png","pc":"bucharitesh","tg":["gallery"]},{"id":"21st:buildinvestmelb__prize-tail","t":"Prize tail","d":"a number of cards going from one side of the screen ot the other. some will say Refund others will say try again. ","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"buildinvestmelb","st":"indexed","pl":"https://cdn.21st.dev/buildinvestmelb/prize-tail/default/preview.1752811217135.png","pc":"buildinvestmelb"},{"id":"21st:buildkevin__smooth-navbar","t":"Smooth navbar","d":"A simple Smooth Navbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"buildkevin","st":"indexed","pl":"https://cdn.21st.dev/buildkevin/smooth-navbar/default/preview.1766142710850.png","pc":"buildkevin"},{"id":"21st:builduilabs__animated-counter","t":"Animated counter","d":"A counter that animates in response to React state changes.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"builduilabs","st":"indexed","pl":"https://cdn.21st.dev/user_builduilabs/animated-counter.png","pc":"builduilabs","tg":["number"]},{"id":"21st:builduilabs__animated-tabs","t":"Animated tabs","d":"An animated tab component built with Framer Motion's layoutId prop.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"builduilabs","st":"indexed","u":211,"pl":"https://cdn.21st.dev/user_builduilabs/animated-tabs.png","pc":"builduilabs","tg":["navigation-menu","tabs"]},{"id":"21st:builduilabs__animated-text","t":"Animated text","d":"Smoothly animate frequently–updating text, like text from a chatbot.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"builduilabs","st":"indexed","u":159,"pl":"https://cdn.21st.dev/user_builduilabs/animated-text.png","pc":"builduilabs","tg":["hook"]},{"id":"21st:builduilabs__filesystem-item","t":"Filesystem item","d":"Render a filesystem tree of arbitrary depth using a single recursive component.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"builduilabs","st":"indexed","pl":"https://cdn.21st.dev/user_builduilabs/filesystem-item.png","pc":"builduilabs","tg":["file-tree","list"]},{"id":"21st:builduilabs__ios-animated-switch","t":"Ios animated switch","d":"Recreation of iOS's switch control built with React Aria Components and Tailwind.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"builduilabs","st":"indexed","pl":"https://cdn.21st.dev/user_builduilabs/ios-animated-switch.png","pc":"builduilabs"},{"id":"21st:builduilabs__slider","t":"Slider","d":"A draggable control that uses rubber banding for out-of-bounds feedback.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"builduilabs","st":"indexed","u":24,"pl":"https://cdn.21st.dev/user_builduilabs/slider.png","pc":"builduilabs","tg":["slider"]},{"id":"21st:bundui__animated-text","t":"Animated text","d":"Here is Animated Text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"bundui","st":"indexed","u":66,"pl":"https://cdn.21st.dev/larsen66/animated-text/default/preview.1754079416277.png","pc":"bundui","tg":["text"]},{"id":"21st:bundui__button","t":"Button","d":"An animated button component to enhance your app's user experience and interactivity. This example was made with Tailwind CSS and Framer Motion.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bundui","st":"indexed","u":128,"pl":"https://cdn.21st.dev/user_bundui/button.png","pc":"bundui"},{"id":"21st:bundui__count-animation","t":"Count animation","d":"The count animation component is designed to create a captivating user experience by animating numerical values as they increase or decrease. This effect draws the user's attention","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"bundui","st":"indexed","u":108,"pl":"https://cdn.21st.dev/user_bundui/count-animation.png","pc":"bundui","tg":["number"]},{"id":"21st:bundui__empty5","t":"Empty5","d":"An empty state component showing a scheduled-maintenance message with an illustration and status/refresh actions.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/empty5/default/preview.1784797868304-83088886-70d9-4834-a285-68e62020af2a.png","pc":"bundui","tg":["empty-state"]},{"id":"21st:bundui__empty7","t":"Empty7","d":"A centered 404 empty state with a large heading, supporting message, and go-back / contact-support action buttons for not-found pages.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/empty7/default/preview.1784800714178-08c758ac-80fa-4f08-a939-f3bd219fa61a.png","pc":"bundui","tg":["empty-state"]},{"id":"21st:bundui__empty8","t":"Empty8","d":"An empty state that tells the user they're offline with an icon, title, description and a retry button.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/empty8/default/preview.1784797665045-4c7ea7e2-ce95-4636-8b7c-04de9903a16c.png","pc":"bundui","tg":["empty-state"]},{"id":"21st:bundui__fireworks-show","t":"Fireworks show","d":"Firework animation","k":"component","s":"21st","c":"other","g":"other","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/fireworks-show/default/preview.1747855956365.png","pc":"bundui"},{"id":"21st:bundui__floating-button","t":"Floating button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/user_bundui/floating-button.png","pc":"bundui"},{"id":"21st:bundui__floating-paths","t":"Floating paths","d":"a minimalistic floating paths background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"bundui","st":"indexed","u":68,"pl":"https://cdn.21st.dev/larsen66/floating-paths/default/preview.1747855488677.png","pc":"bundui","tg":["background"]},{"id":"21st:bundui__fluid-particles-background","t":"Fluid particles background","d":"a customizable fluid particles background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"bundui","st":"indexed","u":75,"pl":"https://cdn.21st.dev/larsen66/fluid-particles-background/default/preview.1747857052934.png","pc":"bundui","tg":["background"]},{"id":"21st:bundui__geometric","t":"Geometric","d":"a simple animated geometric background","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"bundui","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/geometric/default/preview.1747856871045.png","pc":"bundui"},{"id":"21st:bundui__image-comparison","t":"Image comparison","d":"Here is Image Comparison component","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/image-comparison/default/preview.1754079875773.png","pc":"bundui"},{"id":"21st:bundui__magnetic-button","t":"Magnetic button","d":"A Magnetic Button is a UI component designed to enhance user interaction. When a user's cursor or touch input approaches the button, it subtly moves towards the user, simulating th","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bundui","st":"indexed","u":328,"pl":"https://cdn.21st.dev/user_bundui/magnetic-button.png","pc":"bundui"},{"id":"21st:bundui__marquee-effect","t":"Marquee effect","d":"The marquee component is designed to create a dynamic user experience by continuously scrolling text horizontally. This effect is perfect for highlighting important information, an","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"bundui","st":"indexed","u":286,"pl":"https://cdn.21st.dev/user_bundui/marquee-effect.png","pc":"bundui","tg":["marquee"]},{"id":"21st:bundui__navigation-menu4","t":"Navigation menu4","d":"An e-commerce navigation menu with dropdown panels for collections and accessories, featuring featured imagery, category icons, and quick links.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"bundui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/bundui/navigation-menu4/default/preview.1784718061594-affff992-5099-46db-96d4-da0d257788df.png","pc":"bundui","tg":["menu","navigation-menu"]},{"id":"21st:bundui__newsletter1","t":"Newsletter1","d":"A centered newsletter signup section with a headline, supporting text, and an email input card with a subscribe button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/newsletter1/default/preview.1784789516263-5fbbfd12-0cde-472b-ab65-1c7e143dd0ef.png","pc":"bundui"},{"id":"21st:bundui__progress7","t":"Progress7","d":"A progress bar showing storage usage with a color-coded status badge indicating usage level.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"bundui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/bundui/progress7/default/preview.1785102819993-6e1e69ce-29ae-44d1-84ca-e0ce30eadafc.png","pc":"bundui","tg":["badge","progress"]},{"id":"21st:bundui__scroll-area2","t":"Scroll area2","d":"A scrollable content area placed inside a slide-out sheet, ideal for showing long text such as a privacy policy without overflowing the panel.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/scroll-area2/default/preview.1783712813477.png","pc":"bundui","tg":["scroll-area"]},{"id":"21st:bundui__scroll-area3","t":"Scroll area3","d":"A scrollable container that lets users scroll through a long list of items, such as a user or contacts list, within a fixed height.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/scroll-area3/default/preview.1783712496142.png","pc":"bundui","tg":["profile","scroll-area"]},{"id":"21st:bundui__scroll-area4","t":"Scroll area4","d":"A scrollable container that displays a long list of notifications grouped by date with sticky date headers.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/scroll-area4/default/preview.1783712727698.png","pc":"bundui","tg":["notification","scroll-area"]},{"id":"21st:bundui__scroll-area6","t":"Scroll area6","d":"A scrollable chat conversation panel with avatars, message bubbles, timestamps and a message input that auto-scrolls to the latest message.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/scroll-area6/default/preview.1783713585917.png","pc":"bundui","tg":["scroll-area"]},{"id":"21st:bundui__scroll-progress-bar","t":"Scroll progress bar","d":"The Scroll Progress Bar component enhances user experience by providing a visually dynamic indicator as the user scrolls through the page. It visually informs users how much of the","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"bundui","st":"indexed","u":51,"pl":"https://cdn.21st.dev/user_bundui/scroll-progress-bar.png","pc":"bundui","tg":["progress","scroll-area"]},{"id":"21st:bundui__sliding-number","t":"Sliding number","d":"Here is Sliding Number component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"bundui","st":"indexed","u":76,"pl":"https://cdn.21st.dev/larsen66/sliding-number/default/preview.1754080519416.png","pc":"bundui","tg":["number"]},{"id":"21st:bundui__spinner8","t":"Spinner8","d":"A loading spinner shown inside an empty state with a title, description, and cancel action to indicate a request is being processed.","k":"component","s":"21st","c":"status/loader","g":"status","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/spinner8/default/preview.1785101804289-bdda2ab5-235d-4e16-bca3-e201c6a95b49.png","pc":"bundui"},{"id":"21st:bundui__stars","t":"Stars","d":"a beautiful interactive dynamics stars background","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"bundui","st":"indexed","u":177,"pl":"https://cdn.21st.dev/bundui/stars/default/preview.1785356290189-0539512e-f42f-4624-93a9-e73ef96af665.png","pc":"bundui"},{"id":"21st:bundui__text-gradient-scroll","t":"Text gradient scroll","d":"The text gradient scroll component is designed to enhance user interaction by providing a visually dynamic effect as the user scrolls through the text. Unlike static text, this eff","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"bundui","st":"indexed","u":283,"pl":"https://cdn.21st.dev/user_bundui/text-gradient-scroll.png","pc":"bundui","tg":["scroll-area","text"]},{"id":"21st:bundui__tilt-effect","t":"Tilt effect","d":"Here is Tilt Effect component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"bundui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/larsen66/tilt-effect/default/preview.1754080089855.png","pc":"bundui","tg":["image"]},{"id":"21st:bundui__toast1","t":"Toast1","d":"A button that triggers a Sonner toast notification with a description and an undo action.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast1/default/preview.1784768519874-13bb2567-ad27-42ce-baf9-7549e782fb36.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast10","t":"Toast10","d":"A button that triggers a custom Sonner toast notification showing an avatar, message preview, and a reply action.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast10/default/preview.1784670342545-580dc166-ef87-4882-adf1-d32a9ed1f8a1.png","pc":"bundui","tg":["notification","toast"]},{"id":"21st:bundui__toast11","t":"Toast11","d":"A button that triggers a Sonner toast notification containing an inline action button to follow up on the completed task.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast11/default/preview.1784738866376-5725e02e-9b67-482b-960b-146664521298.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast2","t":"Toast2","d":"A button that triggers a success toast notification with a title and description using Sonner.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast2/default/preview.1784762312386-861cda7e-ac26-4e45-a55e-8d3a0efb5cae.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast3","t":"Toast3","d":"A button that triggers a Sonner error toast with a title and description to notify users about a failed payment.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast3/default/preview.1784669177302-86ff4e73-f8b2-4d27-a27a-dae8cb350509.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast6","t":"Toast6","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast6/default/preview.1784768490330-c3cc4893-c615-4e42-a274-2580e54b6afa.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast7","t":"Toast7","d":"A button that triggers a Sonner promise toast with custom loading, success, and error states and a custom accent color.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast7/default/preview.1784670295779-0a4f7e9e-cfb8-4d7c-b940-ca153852062b.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__toast8","t":"Toast8","d":"A button that triggers a promise-based Sonner toast, showing loading, success, and error states for async actions like syncing data.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/bundui/toast8/default/preview.1784738929371-311eb99b-946b-4568-a9f5-2e1717b19f6f.png","pc":"bundui","tg":["alert","notification","toast"]},{"id":"21st:bundui__wavy","t":"Wavy","d":"fully customizable stunning wavy background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"bundui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/wavy/default/preview.1747856626890.png","pc":"bundui","tg":["background"]},{"id":"21st:campsite__light-theme","t":"Light theme","d":"Icon for light theme","k":"component","s":"21st","c":"media/icon","g":"media","a":"campsite","st":"indexed","u":41,"pl":"https://cdn.21st.dev/user_campsite/light-theme/default/preview.png","pc":"campsite"},{"id":"21st:campsite__system-theme","t":"System theme","d":"Icon for system theme","k":"component","s":"21st","c":"media/icon","g":"media","a":"campsite","st":"indexed","pl":"https://cdn.21st.dev/user_campsite/system-theme/default/preview.png","pc":"campsite"},{"id":"21st:campsite__theme-toggle","t":"Theme toggle","d":"Theme Toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"campsite","st":"indexed","u":88,"pl":"https://cdn.21st.dev/user_campsite/theme-toggle/default/preview.1737986905323.png","pc":"campsite","tg":["radio-group","toggle"]},{"id":"21st:camwebby__numeric-scrubber","t":"Numeric scrubber","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"camwebby","st":"rated","pl":"https://cdn.21st.dev/user_camwebby/numeric-scrubber.png","pc":"camwebby","sc":22},{"id":"21st:cdmorozov__dedsec","t":"Dedsec","d":"Animated (flicker) ASCII art in the Cross style, made with the 21st ASCII editor and baked to a looping video. Styled with a cyberpunk look. A drop-in, zero-dependency React compon","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"cdmorozov","st":"indexed","pl":"https://cdn.21st.dev/cdmorozov/dedsec/default/preview.1785961253658-9b853bcb-82aa-4399-ac1b-be52eb617fca.webp","pc":"cdmorozov"},{"id":"21st:ceo_42a375e1__identity-hub-cockpit","t":"Identity hub cockpit","d":"Full-page operational cockpit for the MOTTIVME Logto Identity Hub rollout with sidebar, wave timeline, execution board, authorization flow, risk table, and live rollout gates.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ceo_42a375e1","st":"indexed","pl":"https://21st.dev/@ceo_42a375e1/components/identity-hub-cockpit","pc":"ceo_42a375e1"},{"id":"21st:chamaac__electric-mist","t":"Electric mist","d":"An animated full-bleed WebGL shader background with glowing lightning, waves and smoke effects, configurable via color, speed, detail, distortion and brightness props.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/electric-mist/default/preview.1785374992433-155729a0-d731-4868-9c57-813a90d75638.png","pc":"chamaac"},{"id":"21st:chamaac__gif-text","t":"Gif text","d":"Animated text that uses a GIF as the fill color via background-clip, with a loading state.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/gif-text/default/preview.1783718419803.png","pc":"chamaac","tg":["text"]},{"id":"21st:chamaac__grid-bloom","t":"Grid bloom","d":"An animated WebGL shader background rendering a glowing, pulsing grid with wave interference and mouse-reactive light and repulsion.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/grid-bloom/default/preview.1784433047856-3a09ceeb-2016-4011-b3ef-3d7ac67452b2.png","pc":"chamaac"},{"id":"21st:chamaac__how-it-works","t":"How it works","d":"A visual step-by-step process section with pinned, connected cards showing how something works.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"chamaac","st":"indexed","u":31,"pl":"https://cdn.21st.dev/chamaac/how-it-works/default/preview.1784360686164-c9ef8bfe-dc43-4bca-9387-30df706ad4d2.png","pc":"chamaac","tg":["features","steps","timeline"]},{"id":"21st:chamaac__light-speed","t":"Light speed","d":"A full-screen WebGL hyperspace warp animation with glowing bloom light streaks, usable as an animated page background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/light-speed/default/preview.1785315948140-b70081c0-8d9a-4cdf-be1b-84af3452c68a.png","pc":"chamaac"},{"id":"21st:chamaac__liquid-chrome","t":"Liquid chrome","d":"An animated full-bleed liquid metal shader background with customizable colors and flow speed for landing page heroes.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/liquid-chrome/default/preview.1784824031541-5173bccd-9a85-4c5c-a5f5-152e3784590d.png","pc":"chamaac"},{"id":"21st:chamaac__nebula","t":"Nebula","d":"An animated deep-space nebula background using a WebGL fractal noise shader with customizable colors and speed.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/nebula/default/preview.1783580735592.png","pc":"chamaac"},{"id":"21st:chamaac__synthesis","t":"Synthesis","d":"An animated multi-layered cosmic flow background powered by a WebGL shader with extensive warping and color customization.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/synthesis/default/preview.1785315846443-ccc6836f-0dc1-4935-bc71-0e83bbeaeea8.png","pc":"chamaac"},{"id":"21st:chamaac__text-loop","t":"Text loop","d":"An animated text loop that rotates through words with a typewriter-style reveal and gradient effect beside static text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"chamaac","st":"indexed","u":6,"pl":"https://cdn.21st.dev/chamaac/text-loop/default/preview.1784725725680-22729b8d-1f35-4299-be03-84c9c457b271.png","pc":"chamaac","tg":["text"]},{"id":"21st:chamaac__water-caustic","t":"Water caustic","d":"An animated, tileable water caustic lighting effect rendered with a WebGL shader for glowing underwater ripple backgrounds.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/water-caustic/default/preview.1784758454989-5cb8faaf-60c6-4ae2-98be-70b8f76848de.png","pc":"chamaac"},{"id":"21st:chamaac__waves","t":"Waves","d":"A shader-based animated wave background using Three.js, ideal as a hero or landing page backdrop.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chamaac","st":"indexed","pl":"https://cdn.21st.dev/chamaac/waves/default/preview.1785375230875-29295e48-2deb-426b-a469-962b5a9ecf74.png","pc":"chamaac"},{"id":"21st:chandreyee.style__guapdexploration1","t":"Guapdexploration1","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#EBEBF7, #D5E278, #FCFFB9, #FFFFFF). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chandreyee.style","st":"indexed","pl":"https://cdn.21st.dev/chandreyee.style/guapdexploration1/default/preview.1786353939395-ed408458-d1dc-4bfc-b507-bc8cd3bd0506.webp","pc":"chandreyee.style"},{"id":"21st:charith1283p__new1","t":"New1","d":"Animated (flicker) ASCII art in the Hatching style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a cyberpunk, retro look. A drop-in, zero-dependenc","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"charith1283p","st":"indexed","pl":"https://cdn.21st.dev/charith1283p/new1/default/preview.1784146896194-aa279885-5dd7-4092-96bb-2cec815c5a56.webp","pc":"charith1283p"},{"id":"21st:charlesinwald__quadrant-chart","t":"Quadrant chart","d":"A quadrant chart with tooltips","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"charlesinwald","st":"indexed","pl":"https://cdn.21st.dev/charlesinwald/quadrant-chart/default/preview.png","pc":"charlesinwald","tg":["data-visualization","tooltip"]},{"id":"21st:chaudhari.ankit291996__glass-card","t":"Glass card","d":"Frosted-glass surface card with translucent white background, blur, soft slate border and top highlight. Optional accent glow, compact padding, and hover-lift interactive mode. Wor","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"chaudhari.ankit291996","st":"indexed","pl":"https://21st.dev/@chaudhari.ankit291996/components/glass-card","pc":"chaudhari.ankit291996"},{"id":"21st:chensizhi__button","t":"Button","d":"test 11111111111111","k":"component","s":"21st","c":"actions/button","g":"actions","a":"chensizhi","st":"indexed","pl":"https://cdn.21st.dev/chensizhi/button/default/preview.1752039415061.png","pc":"chensizhi"},{"id":"21st:chetanverma16__alert","t":"Alert","d":"An alert component made with framer motion and tailwind css.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"chetanverma16","st":"indexed","u":31,"pl":"https://cdn.21st.dev/chetanverma16/alert/default/preview.1750315976629.png","pc":"chetanverma16","tg":["alert","notification"]},{"id":"21st:chetanverma16__animated-tabs","t":"Animated tabs","d":"Animated tabs interaction made with framer motion and tailwind css.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"chetanverma16","st":"indexed","u":242,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/animated-tabs/default/preview.1737987994656.png","pc":"chetanverma16","tg":["tabs"]},{"id":"21st:chetanverma16__audio-player","t":"Audio player","d":"An audio player component made with framer motion and tailwind css.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/audio-player/default/preview.png","pc":"chetanverma16","tg":["progress"]},{"id":"21st:chetanverma16__avatar-group","t":"Avatar group","d":"An avatar group component made with framer-motion and Tailwind CSS","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"chetanverma16","st":"indexed","u":139,"pl":"https://cdn.21st.dev/chetanverma16/avatar-group/default/preview.1750401831544.png","pc":"chetanverma16","tg":["avatar","team","tooltip"]},{"id":"21st:chetanverma16__calendar","t":"Calendar","d":"A calendar component made with framer motion and tailwind css.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/chetanverma16/calendar/default/preview.1750614798313.png","pc":"chetanverma16","tg":["calendar","date-picker"]},{"id":"21st:chetanverma16__dropdown-menu","t":"Dropdown menu","d":"Dropdown menu component with framer motion and tailwind css.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chetanverma16","st":"indexed","u":377,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/dropdown-menu.png","pc":"chetanverma16","tg":["dropdown","menu"]},{"id":"21st:chetanverma16__floating-action-menu","t":"Floating action menu","d":"A floating action menu component made with framer motion and tailwind css.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chetanverma16","st":"indexed","u":391,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/floating-action-menu/default/preview.png","pc":"chetanverma16","tg":["menu"]},{"id":"21st:chetanverma16__floating-menu-action","t":"Floating menu action","d":"Here is Floating Menu Action component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/larsen66/floating-menu-action/default/preview.1759954196393.png","pc":"chetanverma16"},{"id":"21st:chetanverma16__header-one-components","t":"Header one components","d":"Header One Components","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/chetanverma16/header-one-components/default/preview.1751443375975.png","pc":"chetanverma16"},{"id":"21st:chetanverma16__input-with-tags","t":"Input with tags","d":"Input with tags component made with framer motion and tailwind css.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"chetanverma16","st":"indexed","u":71,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/input-with-tags/default/preview.1737994388054.png","pc":"chetanverma16","tg":["chip"]},{"id":"21st:chetanverma16__stacked-cards-interaction","t":"Stacked cards interaction","d":"a simple stacked cards interaction component made with framer motion and tailwind css.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"chetanverma16","st":"indexed","u":187,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/stacked-cards-interaction/default/preview.1737994305157.png","pc":"chetanverma16","tg":["carousel","gallery"]},{"id":"21st:chetanverma16__stacking-navbar","t":"Stacking navbar","d":"a simple stacking navbar component made with framer motion and tailwind css.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"chetanverma16","st":"indexed","u":56,"pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/stacking-navbar.png","pc":"chetanverma16"},{"id":"21st:chetanverma16__status-cycle-button","t":"Status cycle button","d":"A cycle status button component made with framer motion and tailwind css.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/status-cycle-button/default/preview.1738697081387.png","pc":"chetanverma16"},{"id":"21st:chetanverma16__switch","t":"Switch","d":"A switch component made with Framer Motion and Tailwind CSS.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"chetanverma16","st":"indexed","u":40,"pl":"https://cdn.21st.dev/chetanverma16/switch/default/preview.1750240711068.png","pc":"chetanverma16"},{"id":"21st:chetanverma16__video-player","t":"Video player","d":"A video player component made with framer motion and tailwind css.","k":"component","s":"21st","c":"media/player","g":"media","a":"chetanverma16","st":"indexed","pl":"https://cdn.21st.dev/user_2rc5PfL1BTeoSaeKi50f3UeVfRn/video-player/default/preview.1737980095562.png","pc":"chetanverma16","tg":["progress","video"]},{"id":"21st:chetanverma16__word-loader","t":"Word loader","d":"An animated loader that cycles through a set of words, showing each with a blur-fade-in effect, then fades out before showing the next.","k":"component","s":"21st","c":"status/loader","g":"status","a":"chetanverma16","st":"indexed","u":21,"pl":"https://cdn.21st.dev/chetanverma16/word-loader/default/preview.1760464429711.png","pc":"chetanverma16","tg":["spinner"]},{"id":"21st:chillacollab__kaaba","t":"Kaaba","d":"Animated (flicker) ASCII art in the Pixel Art style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chillacollab","st":"indexed","pl":"https://cdn.21st.dev/chillacollab/kaaba/default/preview.1786557051964-c60be96b-340c-4b28-886c-310343648016.webp","pc":"chillacollab"},{"id":"21st:chorfiyouss__shader1","t":"Shader1","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 6-color palette (#EBF9FF, #1B6CA8, #5AD2F4, #C2FFEE, #E3D1F1, #FDFEE4). Features","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"chorfiyouss","st":"indexed","pl":"https://cdn.21st.dev/chorfiyouss/shader1/default/preview.1784477760476-0f464e10-4ae2-4eb0-b286-0c272702db41.webp","pc":"chorfiyouss"},{"id":"21st:chowlol202__animated-gradient-button","t":"Animated gradient button","d":"A modern, reusable button with animated gradients, smooth hover/tap interactions, and full dark mode support. Built with ShadCN UI, Tailwind, and Framer Motion — perfect for CTAs, ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"chowlol202","st":"indexed","u":4,"pl":"https://cdn.21st.dev/chowlol202/animated-gradient-button/default/preview.1753749892286.png","pc":"chowlol202"},{"id":"21st:chowlol202__animated-tabs","t":"Animated tabs","d":"A modern animated tabs component with a smooth, fluid underline transition and accessible keyboard navigation.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"chowlol202","st":"indexed","pl":"https://cdn.21st.dev/chowlol202/animated-tabs/default/preview.1756443742746.png","pc":"chowlol202"},{"id":"21st:chowlol202__filter-dropdown","t":"Filter dropdown","d":"A clean, animated dropdown button designed for filtering content. Includes smooth transitions, optional icons, and customizable options. Fully responsive, theme-aware, and accessib","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chowlol202","st":"indexed","pl":"https://cdn.21st.dev/chowlol202/filter-dropdown/default/preview.1753765861471.png","pc":"chowlol202"},{"id":"21st:chowlol202__globe-hero","t":"Globe hero","d":"Dot Globe Hero – A modern, interactive 3D globe hero section built with React Three Fiber and Tailwind CSS. Perfect for SaaS landing pages, dashboards, or portfolios, this componen","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"chowlol202","st":"indexed","u":242,"pl":"https://cdn.21st.dev/chowlol202/globe-hero/default/preview.1755809722660.png","pc":"chowlol202","tg":["globe","hero"]},{"id":"21st:chowlol202__grain-gradient-hero-section","t":"Grain gradient hero section","d":"A modern hero section with a dynamic grain gradient background powered by Paper Shaders. Includes a customizable title, subtitle, and call-to-action, and is fully responsive.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"chowlol202","st":"indexed","u":66,"pl":"https://cdn.21st.dev/chowlol202/grain-gradient-hero-section/default/preview.1755565281814.png","pc":"chowlol202","tg":["cta","hero"]},{"id":"21st:chowlol202__liquid-metal-hero","t":"Liquid metal hero","d":"Liquid metal hero section with nice animations and perfect for any website.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"chowlol202","st":"indexed","u":166,"pl":"https://cdn.21st.dev/chowlol202/liquid-metal-hero/default/preview.1755804510219.png","pc":"chowlol202"},{"id":"21st:chowlol202__modern-pricing-table","t":"Modern pricing table","d":"A clean, responsive pricing section with a segmented Monthly/Yearly toggle, animated price transitions, feature comparison table, and full dark mode support. Built with Tailwind, S","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"chowlol202","st":"indexed","u":108,"pl":"https://cdn.21st.dev/chowlol202/modern-pricing-table/default/preview.1753670965086.png","pc":"chowlol202","tg":["pricing-section","table","toggle"]},{"id":"21st:chowlol202__modern-timeline","t":"Modern timeline","d":"A responsive, accessible, and fully themable Timeline / Roadmap component built with ShadCN UI and Tailwind CSS. Supports vertical and horizontal layouts, animated progress, dark/l","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"chowlol202","st":"indexed","u":172,"pl":"https://cdn.21st.dev/chowlol202/modern-timeline/default/preview.1753761906025.png","pc":"chowlol202","tg":["timeline"]},{"id":"21st:chowlol202__onboarding-checklist","t":"Onboarding checklist","d":"An Interactive Onboarding Checklist that guides users step-by-step through key actions in your app, with a slide-out checklist panel, progress indicator, and coachmarks that spotli","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"chowlol202","st":"indexed","u":83,"pl":"https://cdn.21st.dev/chowlol202/onboarding-checklist/default/preview.1755362959822.png","pc":"chowlol202","tg":["onboarding","tooltip"]},{"id":"21st:chowlol202__searchable-dropdown","t":"Searchable dropdown","d":"A modern, animated dropdown menu with built-in search functionality. Smoothly reveals options with framer-motion, supports keyboard navigation, light/dark themes, and customizable ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chowlol202","st":"indexed","pl":"https://cdn.21st.dev/chowlol202/searchable-dropdown/default/preview.1753766351361.png","pc":"chowlol202"},{"id":"21st:chowlol202__simple-dropdown","t":"Simple dropdown","d":"A sleek, reusable dropdown button with smooth animations and built-in dark mode support. Accepts custom trigger content and dynamic menu items with optional icons and actions. Buil","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chowlol202","st":"indexed","pl":"https://cdn.21st.dev/chowlol202/simple-dropdown/default/preview.1753766625448.png","pc":"chowlol202"},{"id":"21st:chowlol202__user-menu-dropdown","t":"User menu dropdown","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"chowlol202","st":"rated","pl":"https://cdn.21st.dev/chowlol202/user-menu-dropdown/default/preview.1753765376422.png","pc":"chowlol202","sc":22},{"id":"21st:cinquinandy__animated-glass-polygons","t":"Animated glass polygons","d":"A performant React Three Fiber component for rendering beautiful, animated 3D glass polygons. Fully customizable with props for shape (triangle, octagon, etc.), material (IOR, roug","k":"component","s":"21st","c":"other","g":"other","a":"cinquinandy","st":"indexed","pl":"https://cdn.21st.dev/cinquinandy/animated-glass-polygons/default/preview.1762274563147.png","pc":"cinquinandy"},{"id":"21st:cinquinandy__animated-hero-with-web-gl-glitter","t":"Animated hero with web gl glitter","d":"A sophisticated full-screen hero component featuring smooth Framer\n  Motion entrance animations and a WebGL shader-based glitter overlay. Built with React\n  Three Fiber and custom ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cinquinandy","st":"indexed","u":47,"pl":"https://cdn.21st.dev/cinquinandy/animated-hero-with-web-gl-glitter/default/preview.1762441678672.png","pc":"cinquinandy"},{"id":"21st:cinquinandy__artistic-hero-with-animated-blobs","t":"Artistic hero with animated blobs","d":"A full-screen, artistic hero component. Features a large title with a custom cursive font (Corinthia), several gently floating SVG blobs, and an infinitely scrolling curved text ov","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cinquinandy","st":"indexed","pl":"https://cdn.21st.dev/cinquinandy/artistic-hero-with-animated-blobs/default/preview.1762278082798.png","pc":"cinquinandy"},{"id":"21st:cinquinandy__lightning-split","t":"Lightning split","d":"Lightning Split delivers a high-impact visual effect combining a WebGL shader-powered lightning bolt with smooth diagonal screen division. The animated electric arc creates a natur","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"cinquinandy","st":"indexed","u":53,"pl":"https://cdn.21st.dev/cinquinandy/lightning-split/default/preview.1760802028658.png","pc":"cinquinandy","tg":["slider"]},{"id":"21st:cinquinandy__sports-hero-with-animated-athletes-in-stickman","t":"Sports hero with animated athletes in stickman","d":"A comprehensive hero section designed for sports and race event websites. Features a theme-aware, split-screen background with a main image and a topography pattern. The key featur","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cinquinandy","st":"indexed","pl":"https://cdn.21st.dev/cinquinandy/sports-hero-with-animated-athletes-in-stickman/default/preview.1762360183902.png","pc":"cinquinandy"},{"id":"21st:claude-ai__spotlight","t":"Spotlight","d":"Interactive cards with a radial mouse-following spotlight glow, supporting proximity, hover-focus, and cursor-flow gradient lighting effects.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"claude-ai","st":"indexed","pl":"https://cdn.21st.dev/claude-ai/spotlight/default/preview.1782755177233.png","pc":"claude-ai"},{"id":"21st:claude-ai__v-toolbar-1","t":"V toolbar 1","d":"A horizontal toolbar with grouped alignment toggles, formatting buttons, a font select, and a save action, ideal for text or document editors.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"claude-ai","st":"indexed","pl":"https://cdn.21st.dev/claude-ai/v-toolbar-1/default/preview.1782482390828.png","pc":"claude-ai"},{"id":"21st:cldgayo__iridescent-raymarched-glass-metaballs","t":"Iridescent raymarched glass metaballs","d":"Iridescent Raymarched Glass Metaballs","k":"component","s":"21st","c":"other","g":"other","a":"cldgayo","st":"indexed","pl":"https://cdn.21st.dev/cldgayo/iridescent-raymarched-glass-metaballs/default/preview.1785669707920-1678300b-6ef6-4068-9e82-6a076ca13102.png","pc":"cldgayo"},{"id":"21st:cldgayo__test","t":"Test","d":"test how ti","k":"component","s":"21st","c":"other","g":"other","a":"cldgayo","st":"indexed","pl":"https://cdn.21st.dev/cldgayo/test/default/preview.1783577815485.png","pc":"cldgayo"},{"id":"21st:clementjanssens__color-picker","t":"Color picker","d":"An intuitive color picker component that generates harmonious color combinations. It features a circular HSL color wheel with dynamic spread control, allowing users to select 1-3 c","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"clementjanssens","st":"indexed","u":30,"pl":"https://cdn.21st.dev/user_2u5fNis0X6SpWA2toGWYjV4rFDe/color-picker/default/preview.1747164306479.png","pc":"clementjanssens"},{"id":"21st:cnippet.dev__accordion","t":"Accordion","d":"A set of collapsible panels with headings.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/accordion/default/preview.1773463769295.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__aero-blog-1","t":"Aero blog 1","d":"An animated blogs list section.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/aero-blog-1/default/preview.1773035502736.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__aero-footer-1","t":"Aero footer 1","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/aero-footer-1/default/preview.1773035874394.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__aero-hero-1","t":"Aero hero 1","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cnippet.dev","st":"indexed","u":43,"pl":"https://cdn.21st.dev/cnippet.dev/aero-hero-1/default/preview.1772825270975.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__aero-hero-3","t":"Aero hero 3","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cnippet.dev","st":"indexed","u":44,"pl":"https://cdn.21st.dev/cnippet.dev/aero-hero-3/default/preview.1773257562627.png","pc":"cnippet.dev","tg":["button","cta","grid","hero"]},{"id":"21st:cnippet.dev__aero-metrics-1","t":"Aero metrics 1","d":"This clean and modern metrics section showcases your key achievements and statistics in a minimalist grid layout. Large, bold numbers paired with clear labels make it easy for visi","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/aero-metrics-1/default/preview.1773259498482.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__alert","t":"Alert","d":"A callout for displaying important information.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/alert/default/preview.1768986130513.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__announcement-banner","t":"Announcement banner","d":"A dismissible announcement banner alert with an icon, title, description and a call-to-action link.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/announcement-banner/default/preview.1785493882128-b4444249-c576-42fe-a621-e2151e5c4c79.png","pc":"cnippet.dev","tg":["announcement","alert","notification"]},{"id":"21st:cnippet.dev__avatar-stack","t":"Avatar stack","d":"An overlapping stack of team member avatars with hover tooltips showing names and roles, plus an overflow count and an add-member button.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/avatar-stack/default/preview.1785465008967-519245d0-1820-40b6-a49c-cae87af49b6b.png","pc":"cnippet.dev","tg":["team","tooltip"]},{"id":"21st:cnippet.dev__blogs","t":"Blogs","d":"A vertically stacked set of interactive headings that each reveal a section of content.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"cnippet.dev","st":"indexed","u":39,"pl":"https://cdn.21st.dev/user_36Tbt0v8JdD4jEycmBFhR8tojnR/blogs/default/preview.1786465769239.webp","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__boxly-pricing-1","t":"Boxly pricing 1","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/boxly-pricing-1/default/preview.1774288546354.png","pc":"cnippet.dev","tg":["cta","pricing-section","table"]},{"id":"21st:cnippet.dev__breadcrumb","t":"Breadcrumb","d":"Accessible breadcrumb navigation with links, a current page, separators, and an ellipsis for collapsed paths.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/breadcrumb/default/preview.1785543790338-4a5f8fac-3a3e-4738-98d1-2800fc93df88.png","pc":"cnippet.dev","tg":["menu"]},{"id":"21st:cnippet.dev__button","t":"Button","d":"A button or a component that looks like a button.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/button/default/preview.1770466613578.png","pc":"cnippet.dev","tg":["cta"]},{"id":"21st:cnippet.dev__changelog-carousel","t":"Changelog carousel","d":"A horizontal drag-free carousel that displays product changelog releases as cards with colored version tags and dot navigation.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cnippet.dev","st":"indexed","u":2,"pl":"https://cdn.21st.dev/cnippet.dev/changelog-carousel/default/preview.1784150303963.png","pc":"cnippet.dev","tg":["carousel"]},{"id":"21st:cnippet.dev__cnippet-accordion","t":"Cnippet accordion","d":"A vertically stacked set of collapsible sections built on Base UI's Accordion primitive. Supports single or multiple open items, controlled or uncontrolled state, a custom trigger ","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-accordion/default/preview.1783974792885.png","pc":"cnippet.dev","tg":["accordion","faq"]},{"id":"21st:cnippet.dev__cnippet-button","t":"Cnippet button","d":"A polymorphic button built on Base UI's useRender. Ships 8 visual variants (default, secondary, outline, ghost, link, destructive, destructive-outline) and a full set of sizes incl","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cnippet.dev","st":"indexed","u":29,"pl":"https://cdn.21st.dev/larsen66/cnippet-button/default/preview.1783605523635.png","pc":"cnippet.dev","tg":["button","icon","link","spinner"]},{"id":"21st:cnippet.dev__cnippet-chart","t":"Cnippet chart","d":"A set of composable chart primitives built on Recharts, providing a themeable ChartContainer plus ChartTooltip, ChartTooltipContent, ChartLegend and ChartLegendContent. Colors are ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-chart/default/preview.1783962689603.png","pc":"cnippet.dev","tg":["data-visualization","dashboard","tooltip"]},{"id":"21st:cnippet.dev__cnippet-collapsible","t":"Cnippet collapsible","d":"A minimal show/hide primitive built on Base UI's Collapsible. A trigger toggles a height-animated panel — perfect for read-more text, FAQ rows, nested groups and expandable log out","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-collapsible/default/preview.1784046947032.png","pc":"cnippet.dev","tg":["accordion","faq","list","team"]},{"id":"21st:cnippet.dev__cnippet-empty","t":"Cnippet empty","d":"A composable empty-state block for when there's no data to show — no results, no events, an empty folder, cleared filters. Ships Empty plus EmptyHeader, EmptyMedia (with a stacked ","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"cnippet.dev","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/cnippet-empty/default/preview.1784047727980.png","pc":"cnippet.dev","tg":["card","calendar","button","empty-state"]},{"id":"21st:cnippet.dev__cnippet-switch","t":"Cnippet switch","d":"An accessible toggle switch built on Base UI's Switch primitive. Animated thumb with a springy press/scale interaction, two sizes (default and sm), controlled or uncontrolled usage","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-switch/default/preview.1783606379538.png","pc":"cnippet.dev","tg":["list","notification","toggle"]},{"id":"21st:cnippet.dev__cnippet-table","t":"Cnippet table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-table/default/preview.1784050047380.png","pc":"cnippet.dev","tg":["badge","comparison","pricing-section","progress"]},{"id":"21st:cnippet.dev__cnippet-toggle","t":"Cnippet toggle","d":"A two-state toggle button built on Base UI's Toggle primitive. Ships default and outline variants, three sizes (sm, default, lg), controlled or uncontrolled pressed state via press","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cnippet-toggle/default/preview.1783607963754.png","pc":"cnippet.dev","tg":["toggle"]},{"id":"21st:cnippet.dev__cnippet-toggle-group","t":"Cnippet toggle group","d":"A set of toggle buttons that work together as a single control, built on Base UI's ToggleGroup primitive. Supports single or multiple selection, horizontal and vertical orientation","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","u":103,"pl":"https://cdn.21st.dev/larsen66/cnippet-toggle-group/default/preview.1783623189977.png","pc":"cnippet.dev","tg":["button","toggle"]},{"id":"21st:cnippet.dev__cnippet-toolbar","t":"Cnippet toolbar","d":"A container for grouping related actions into a single keyboard-navigable bar, built on Base UI's Toolbar primitive. Ships Toolbar, ToolbarButton, ToolbarLink, ToolbarInput, Toolba","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cnippet.dev","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/cnippet-toolbar/default/preview.1783954460572.png","pc":"cnippet.dev","tg":["button","search","text","toggle"]},{"id":"21st:cnippet.dev__context-menu","t":"Context menu","d":"A right-click (or long-press) context menu with items, checkboxes, radio groups, nested submenus, keyboard shortcuts, and destructive actions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/context-menu/default/preview.1785517988344-e38aba41-564f-4dbe-a2d6-cbc23de3d4d6.png","pc":"cnippet.dev","tg":["dropdown","menu"]},{"id":"21st:cnippet.dev__context-menu-icons","t":"Context menu icons","d":"A right-click context menu with copy, cut, paste, and a destructive delete action, each labelled with an icon.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/context-menu-icons/default/preview.1785519963656-f80e027a-942e-48c8-8996-28772d9537ec.png","pc":"cnippet.dev","tg":["dropdown","menu"]},{"id":"21st:cnippet.dev__counting-number","t":"Counting number","d":"An animated number that smoothly counts from a start value up to a target, with imperative replay and start/complete callbacks.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"cnippet.dev","st":"indexed","u":5,"pl":"https://cdn.21st.dev/cnippet.dev/counting-number/default/preview.1784452151245-255b9986-1760-43bc-83ba-876db6a9384c.png","pc":"cnippet.dev","tg":["number","stat"]},{"id":"21st:cnippet.dev__davincho-hero-1","t":"Davincho hero 1","d":"Animated hero section with parallax background image.","k":"component","s":"21st","c":"media/player","g":"media","a":"cnippet.dev","st":"indexed","u":29,"pl":"https://cdn.21st.dev/cnippet.dev/davincho-hero-1/default/preview.1774290703029.png","pc":"cnippet.dev","tg":["video"]},{"id":"21st:cnippet.dev__eduflow-hero-1","t":"Eduflow hero 1","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/eduflow-hero-1/default/preview.1773481625013.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__faq-section","t":"Faq section","d":"A simple FAQ section.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/faq-section/default/preview.1771179672092.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__flow-hero-1","t":"Flow hero 1","d":"Animated hero section with carousel.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cnippet.dev","st":"indexed","u":9,"pl":"https://cdn.21st.dev/cnippet.dev/flow-hero-1/default/preview.1774292290687.png","pc":"cnippet.dev","tg":["carousel"]},{"id":"21st:cnippet.dev__formatting-toolbar","t":"Formatting toolbar","d":"A rich-text formatting toolbar with toggle buttons that applies strikethrough, inline code, blockquote, and link styles with a live markdown preview.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/formatting-toolbar/default/preview.1785174585804-0bf6edc6-45d9-41a9-b73f-2b0c953c911b.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__kbd","t":"Kbd","d":"A keyboard key component for displaying keys and keyboard shortcuts, with a group wrapper for combinations.","k":"component","s":"21st","c":"other","g":"other","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/kbd/default/preview.1785513026345-6f36ecfc-3eb1-4f04-8d43-841d2b5e4abc.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__logout-confirmation-dialog","t":"Logout confirmation dialog","d":"A centered alert dialog that asks the user to confirm before logging out, with an icon, message, and a split No / Yes, Logout button footer.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/logout-confirmation-dialog/default/preview.1787102636895-1e709f5c-6bfb-4f91-9a46-73e1de09f0c6.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__lunar-blog-1","t":"Lunar blog 1","k":"component","s":"21st","c":"other","g":"other","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/lunar-blog-1/default/preview.1773481796161.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__lunar-blog-2","t":"Lunar blog 2","k":"component","s":"21st","c":"other","g":"other","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/lunar-blog-2/default/preview.1773481899080.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__m-parallax-floating-3","t":"M parallax floating 3","d":"Abstract symbols that drift at different depths and follow the cursor for a layered parallax hover effect.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/cnippet.dev/m-parallax-floating-3/default/preview.1784763615311-3889dc62-a0cd-4917-b95c-611091ccc660.png","pc":"cnippet.dev","tg":["background","cursor"]},{"id":"21st:cnippet.dev__m-random-letter-swap-1","t":"M random letter swap 1","d":"A horizontal navigation menu whose links shuffle their letters in a glitchy random-swap animation on hover.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-random-letter-swap-1/default/preview.1783597293597.png","pc":"cnippet.dev","tg":["link","navigation-menu","text"]},{"id":"21st:cnippet.dev__m-random-letter-swap-2","t":"M random letter swap 2","d":"A pair of call-to-action buttons whose labels shuffle letters in random order on hover for a glitchy text effect.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-random-letter-swap-2/default/preview.1783600502404.png","pc":"cnippet.dev","tg":["button","cta","text"]},{"id":"21st:cnippet.dev__m-text-cursor-proximity-1","t":"M text cursor proximity 1","d":"Animated text where each character grows in scale as the cursor approaches, with a linear proximity falloff.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-text-cursor-proximity-1/default/preview.1783600993480.png","pc":"cnippet.dev","tg":["cursor","text"]},{"id":"21st:cnippet.dev__m-text-generate-effect-2","t":"M text generate effect 2","d":"An AI assistant chat card that animates its response with a word-by-word text-generate effect and regenerates on demand.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-text-generate-effect-2/default/preview.1786092106960-6f67f1e1-75b6-453b-a601-233cbabbee1e.png","pc":"cnippet.dev","tg":["ai-chat"]},{"id":"21st:cnippet.dev__m-text-highlight-3","t":"M text highlight 3","d":"Animated text highlight with buttons that sweep the highlight behind the text left, right, top-down, or bottom-up on demand.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-text-highlight-3/default/preview.1783615059247.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__m-variable-font-cursor-proximity-1","t":"M variable font cursor proximity 1","d":"A centered hero headline whose letters shift from ultra-light to heavy weight as the cursor moves near them.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"cnippet.dev","st":"indexed","u":9,"pl":"https://cdn.21st.dev/cnippet.dev/m-variable-font-cursor-proximity-1/default/preview.1783600901164.png","pc":"cnippet.dev","tg":["cursor","hero"]},{"id":"21st:cnippet.dev__m-variable-font-hover-1","t":"M variable font hover 1","d":"A horizontal navigation menu whose link letters animate from thin to bold outward from the center on hover using variable font weight.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"cnippet.dev","st":"indexed","u":2,"pl":"https://cdn.21st.dev/cnippet.dev/m-variable-font-hover-1/default/preview.1783597283924.png","pc":"cnippet.dev","tg":["navigation-menu","text"]},{"id":"21st:cnippet.dev__m-variable-font-hover-2","t":"M variable font hover 2","d":"Hero headline with two stacked lines whose variable-font weight and slant axes invert against each other on hover.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cnippet.dev","st":"indexed","u":2,"pl":"https://cdn.21st.dev/cnippet.dev/m-variable-font-hover-2/default/preview.1783600826034.png","pc":"cnippet.dev","tg":["hero"]},{"id":"21st:cnippet.dev__m-variable-font-hover-3","t":"M variable font hover 3","d":"A stack of call-to-action links whose letters animate their variable font weight on hover, each using a different stagger origin.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-variable-font-hover-3/default/preview.1783602502825.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__m-vertical-cut-reveal-2","t":"M vertical cut reveal 2","d":"A logotype text-reveal block that animates each character with a vertical cut wipe, staggered outward from the center.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/m-vertical-cut-reveal-2/default/preview.1783614314179.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__menu","t":"Menu","d":"An accessible dropdown menu built on Base UI with support for items, links, checkboxes, radio groups, submenus, separators and keyboard shortcuts.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","u":38,"pl":"https://cdn.21st.dev/cnippet.dev/menu/default/preview.1785509522361-ef6c82ea-ce5b-4cb2-bbe3-5a0c68f224d5.png","pc":"cnippet.dev","tg":["dropdown","menu","link","navigation-menu"]},{"id":"21st:cnippet.dev__parallax-floating","t":"Parallax floating","d":"Elements float at different speeds based on cursor position, creating a depth illusion through independent parallax layers.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"cnippet.dev","st":"indexed","u":148,"pl":"https://cdn.21st.dev/larsen66/parallax-floating/default/preview.1783972872850.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__popover","t":"Popover","d":"An accessible popover panel anchored to a trigger button, with title, description, and optional compact tooltip styling, built on Base UI.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"cnippet.dev","st":"indexed","u":296,"pl":"https://cdn.21st.dev/cnippet.dev/popover/default/preview.1785543064537-9ddc68a1-90b8-40f7-8863-366d9e4fbb69.png","pc":"cnippet.dev","tg":["popover","tooltip"]},{"id":"21st:cnippet.dev__progress","t":"Progress","d":"A composable progress bar built on Base UI with track, indicator, label and value slots for showing task completion.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/progress/default/preview.1785098795893-e9814077-82ca-48f0-86b3-f68a2570f194.png","pc":"cnippet.dev","tg":["progress"]},{"id":"21st:cnippet.dev__promise-toast","t":"Promise toast","d":"A button that triggers a promise-based toast notification, cycling through loading, success, and error states as an async task resolves.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/promise-toast/default/preview.1786660993010-c3261deb-756b-476d-8ffa-bb9ca19cb35a.png","pc":"cnippet.dev","tg":["notification","spinner","toast"]},{"id":"21st:cnippet.dev__random-letter-swap","t":"Random letter swap","d":"Text component whose letters swap vertically in random order on hover for a glitchy effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":15,"pl":"https://cdn.21st.dev/cnippet.dev/random-letter-swap/default/preview.1783589832419.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__rate-limit-alert-dialog","t":"Rate limit alert dialog","d":"An alert dialog that warns a user they hit an API rate limit, with a live MM:SS countdown to automatic retry and an upgrade call to action.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/rate-limit-alert-dialog/default/preview.1787115003577-888ce04a-0503-46ab-8416-f50270aab9e6.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__scroll-progress","t":"Scroll progress","d":"A spring-animated progress bar that tracks scroll position — works for the full page or a scrollable container element.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/scroll-progress/default/preview.1783607682461.png","pc":"cnippet.dev","tg":["progress","scroll-area"]},{"id":"21st:cnippet.dev__scroll-reveal","t":"Scroll reveal","d":"Elements animate into view when they enter the viewport. Supports any Motion variant, configurable thresholds, and a once-only mode.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"cnippet.dev","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/scroll-reveal/default/preview.1783605875651.png","pc":"cnippet.dev","tg":["features","list","scroll-area","steps"]},{"id":"21st:cnippet.dev__scroll-reveal-2","t":"Scroll reveal 2","d":"A wrapper component that animates its children into view when they enter the viewport, with configurable Motion variants, thresholds, and a once-only mode.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/educlopez/scroll-reveal/default/preview.1783602648001.png","pc":"cnippet.dev","tg":["features"]},{"id":"21st:cnippet.dev__scroll-swap-text","t":"Scroll swap text","d":"Text that swaps in and out vertically as its scrollable container is navigated, with the current line sliding up while a clone rises into place.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"cnippet.dev","st":"indexed","u":20,"pl":"https://cdn.21st.dev/cnippet.dev/scroll-swap-text/default/preview.1784704289200-d5a03141-e179-4174-a11c-abf94b005134.png","pc":"cnippet.dev","tg":["scroll-area"]},{"id":"21st:cnippet.dev__scroll-velocity-text","t":"Scroll velocity text","d":"A continuous text marquee whose speed reacts to scroll velocity — the faster you scroll, the faster the marquee moves.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"cnippet.dev","st":"indexed","u":315,"pl":"https://cdn.21st.dev/larsen66/scroll-velocity-text/default/preview.1783960760991.png","pc":"cnippet.dev","tg":["marquee","scroll-area"]},{"id":"21st:cnippet.dev__services-with-animated-hover-modal","t":"Services with animated hover modal","d":"A responsive services component that displays a list of offerings. On hover, a modal follows the cursor, revealing project images with smooth scaling and transition effects. Built ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"cnippet.dev","st":"indexed","u":87,"pl":"https://cdn.21st.dev/cnippet.dev/services-with-animated-hover-modal/default/preview.1774625573593.png","pc":"cnippet.dev","tg":["cursor","list","modal"]},{"id":"21st:cnippet.dev__splitting-text","t":"Splitting text","d":"Animated text that splits into characters, words, or lines with staggered entrance presets like fade, slide, blur, and scale.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":14,"pl":"https://cdn.21st.dev/cnippet.dev/splitting-text/default/preview.1784704319173-f9f5007f-6df2-4b03-8cec-f01ff62fcd4c.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__team","t":"Team","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"cnippet.dev","st":"indexed","u":50,"pl":"https://cdn.21st.dev/cnippet.dev/team/default/preview.1774622497922.png","pc":"cnippet.dev","tg":["marquee","profile","testimonials","team"]},{"id":"21st:cnippet.dev__text-generate-effect","t":"Text generate effect","d":"Animated text that fades and blurs in word by word, as if being generated by AI.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":14,"pl":"https://cdn.21st.dev/cnippet.dev/text-generate-effect/default/preview.1784704304064-e78681fd-c756-4756-873f-6cd36ec825c5.png","pc":"cnippet.dev","tg":["ai-chat","text"]},{"id":"21st:cnippet.dev__text-gradient","t":"Text gradient","d":"Animated text component whose gradient colors flow continuously through the letters using background-clip, with customizable color stops, angle, and speed.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":7,"pl":"https://cdn.21st.dev/cnippet.dev/text-gradient/default/preview.1784705403859-9d7ebae7-d8f9-4f45-96af-526023206fd1.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__text-loop","t":"Text loop","d":"Cycles through an array of children with smooth enter and exit transitions, swapping content on a configurable interval.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-loop/default/preview.1784051365392.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__text-morph","t":"Text morph","d":"Shared-layout character morphing between two strings — individual letters animate to their new positions with spring physics.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-morph/default/preview.1784051121489.png","pc":"cnippet.dev","tg":["pricing-section","search"]},{"id":"21st:cnippet.dev__text-reveal","t":"Text reveal","d":"Reveals text word-by-word, character-by-character, or line-by-line with smooth staggered entrance animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":71,"pl":"https://cdn.21st.dev/larsen66/text-reveal/default/preview.1784046931580.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__text-roll","t":"Text roll","d":"Characters roll in and out with a 3D perspective flip — each letter animates independently for a mechanical, tactile reveal effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/text-roll/default/preview.1784051214230.png","pc":"cnippet.dev","tg":["link","stat","text"]},{"id":"21st:cnippet.dev__text-scramble","t":"Text scramble","d":"Characters scramble through random glyphs before resolving to the final text, creating a cipher-decoding effect on mount.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-scramble/default/preview.1784047614972.png","pc":"cnippet.dev","tg":["stat","text"]},{"id":"21st:cnippet.dev__textarea","t":"Textarea","d":"A multi-line text input field with auto-sizing, small/default/large sizes, disabled and invalid states built on Base UI.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/textarea/default/preview.1785539105535-800057b8-a46a-42bf-b79c-a74a19c075e1.png","pc":"cnippet.dev","tg":["textarea"]},{"id":"21st:cnippet.dev__textarea-with-label","t":"Textarea with label","d":"A multi-line textarea form field paired with an accessible label for collecting longer text input like messages or comments.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/textarea-with-label/default/preview.1785539676553-ad144ee2-3fc5-4be7-afbc-84f1a694399a.png","pc":"cnippet.dev","tg":["form","input","textarea"]},{"id":"21st:cnippet.dev__toast","t":"Toast","d":"Stacked toast notification system with auto-dismiss timeouts, action buttons, status icons, and configurable positions built on Base UI.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/toast/default/preview.1786087315207-68e585ee-22ae-4252-aed9-875a46ffef2e.png","pc":"cnippet.dev","tg":["alert","notification","toast"]},{"id":"21st:cnippet.dev__toggle","t":"Toggle","d":"A two-state button that can be on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/toggle/default/preview.1768890970843.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-alert-12","t":"V alert 12","d":"A dismissible cookie consent alert with an icon, policy link, and accept/decline action buttons.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-12/default/preview.1785494309007-f2cdfa0c-cc12-4716-9ec8-e4ca9e81c73a.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-alert-13","t":"V alert 13","d":"Warning alert that shows storage usage with a progress bar and an upgrade action.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"rated","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-13/default/preview.1785494754530-6dc5798e-ead9-4195-9776-fe8f69ce3656.png","pc":"cnippet.dev","sc":18},{"id":"21st:cnippet.dev__v-alert-15","t":"V alert 15","d":"An alert prompting the user to verify their email address, with a resend button that counts down 60 seconds before another email can be sent.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"rated","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-15/default/preview.1785495456154-cef77bc0-e37f-4852-bc30-f8d9e8a43672.png","pc":"cnippet.dev","tg":["alert","notification"],"sc":18},{"id":"21st:cnippet.dev__v-alert-3","t":"V alert 3","d":"An alert notification with a leading icon, title, description, and dismiss/confirm action buttons for security or update prompts.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-3/default/preview.1785491555666-79588257-c9c6-435b-a246-f89dadef6625.png","pc":"cnippet.dev","tg":["alert","notification"]},{"id":"21st:cnippet.dev__v-alert-5","t":"V alert 5","d":"A success alert with a check icon, title and description for confirming an action completed as expected.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-5/default/preview.1785492627765-a7679f44-3ceb-4343-8e1b-eb2d817c9791.png","pc":"cnippet.dev","tg":["alert","notification"]},{"id":"21st:cnippet.dev__v-alert-6","t":"V alert 6","d":"A warning alert callout with a triangle icon, title and description for surfacing cautionary messages.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-6/default/preview.1785491150683-565f4c5b-6151-4261-b852-314b5dfabf5c.png","pc":"cnippet.dev","tg":["alert","notification"]},{"id":"21st:cnippet.dev__v-alert-7","t":"V alert 7","d":"An error alert with an icon, title, and description for surfacing failed actions or destructive states.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-7/default/preview.1785491785507-05e967bb-b59c-41a0-bb94-4b44d86830bf.png","pc":"cnippet.dev","tg":["alert","notification"]},{"id":"21st:cnippet.dev__v-alert-9","t":"V alert 9","d":"An alert card with an icon, title, description and inline action buttons, wrapped in a soft framed panel.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-9/default/preview.1785492959922-57a1dc93-5b11-4c33-bee1-699bfc29462f.png","pc":"cnippet.dev","tg":["alert","notification"]},{"id":"21st:cnippet.dev__v-alert-dialog-8","t":"V alert dialog 8","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-alert-dialog-8/default/preview.1787104061761-a192f27c-d190-413c-a24b-04a7e1c30957.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-breadcrumb-10","t":"V breadcrumb 10","d":"A breadcrumb navigation that shows an organization logo, a user avatar with name and email, and the current document with an icon.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-breadcrumb-10/default/preview.1784696749911-f423e5f9-2880-4805-853d-23da44f54d21.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-breadcrumb-12","t":"V breadcrumb 12","d":"A checkout progress breadcrumb with numbered step circles, completed-step checkmarks, and back/continue navigation buttons.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"cnippet.dev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/cnippet.dev/v-breadcrumb-12/default/preview.1784696733129-f21f88d3-34ed-4a62-96d2-4433cb1447e4.png","pc":"cnippet.dev","tg":["steps"]},{"id":"21st:cnippet.dev__v-breadcrumb-6","t":"V breadcrumb 6","d":"A breadcrumb navigation trail whose items include small avatar images alongside the label, ideal for showing organization and user context in an app header.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/cnippet.dev/v-breadcrumb-6/default/preview.1784702996534-f31d65e0-54ae-4036-a885-5c2436ca7cb1.png","pc":"cnippet.dev","tg":["navigation-menu"]},{"id":"21st:cnippet.dev__v-breadcrumb-9","t":"V breadcrumb 9","d":"A breadcrumb navigation where each item is rendered as a button, with icons and the current page highlighted as a secondary button.","k":"component","s":"21st","c":"media/icon","g":"media","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/cnippet.dev/v-breadcrumb-9/default/preview.1784702901328-a846db66-270a-4423-ae3e-94a49dfc566c.png","pc":"cnippet.dev","tg":["icon","navigation-menu"]},{"id":"21st:cnippet.dev__v-carousel-11","t":"V carousel 11","d":"A looping testimonial carousel showing a quote, author avatar and role with dot indicators to jump between slides.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cnippet.dev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/cnippet.dev/v-carousel-11/default/preview.1784387905542-e6fff1fb-9586-4687-af98-ae15fed28af8.png","pc":"cnippet.dev","tg":["carousel","testimonials"]},{"id":"21st:cnippet.dev__v-carousel-12","t":"V carousel 12","d":"A pricing plan carousel with arrow navigation that highlights the active plan and shows features, price, and a call-to-action.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-carousel-12/default/preview.1784395062154-fcbdcb61-904d-4a6a-a267-6ca2e4eaa380.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-carousel-8","t":"V carousel 8","d":"A compact multi-step onboarding carousel with a progress bar, per-step icons, and Back/Next navigation that finishes on the last step.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/cnippet.dev/v-carousel-8/default/preview.1784686792146-d951026c-4c8e-4986-a5fb-dcfccf73f92f.png","pc":"cnippet.dev","tg":["carousel","onboarding","steps"]},{"id":"21st:cnippet.dev__v-context-menu-12","t":"V context menu 12","d":"Right-click context menu for rich-text formatting with bold, italic and underline checkbox toggles plus a text-alignment submenu.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-context-menu-12/default/preview.1785521662651-150c2e4e-442f-4ced-82dd-b278cf0cfb27.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-context-menu-13","t":"V context menu 13","d":"A file explorer list where each row shows a file-extension badge and opens a right-click context menu with open, rename, download, get info, refresh, and delete actions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"rated","pl":"https://cdn.21st.dev/cnippet.dev/v-context-menu-13/default/preview.1785523265913-7abe9178-abec-4d4a-95c7-e972878dd3f6.png","pc":"cnippet.dev","sc":18},{"id":"21st:cnippet.dev__v-context-menu-14","t":"V context menu 14","d":"Social feed cards with a right-click context menu to upvote, downvote, reply, and report posts with a nested report submenu.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-context-menu-14/default/preview.1785520359514-8d8b9227-055f-4e08-ba2a-01ec96691f39.png","pc":"cnippet.dev","tg":["menu"]},{"id":"21st:cnippet.dev__v-context-menu-15","t":"V context menu 15","d":"A task list where each row opens a right-click context menu to change status, set priority via a submenu, reassign, archive, or delete the task.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-context-menu-15/default/preview.1785523641339-074ef3f1-d4fa-4297-bdf7-f7602ff9eba7.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-context-menu-2","t":"V context menu 2","d":"A right-click context menu with grouped items, keyboard shortcuts, a nested submenu, and a destructive action, built on Base UI.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-context-menu-2/default/preview.1785518563027-596d7097-21c4-48fb-80b6-91d2de9f04b4.png","pc":"cnippet.dev","tg":["menu"]},{"id":"21st:cnippet.dev__v-empty-15","t":"V empty 15","d":"An empty state that tells users they lack permission to view content, with request-access and go-back actions.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-empty-15/default/preview.1784699546869-2a93cf1a-76bd-42b1-b086-e42105a799cf.png","pc":"cnippet.dev","tg":["button","empty-state","icon"]},{"id":"21st:cnippet.dev__v-menu-10","t":"V menu 10","d":"A dropdown menu with grouped switch toggles for managing notification channel and activity settings.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-menu-10/default/preview.1785510560206-f8f53d03-37d1-40ec-83b8-8061d825b09e.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-menu-11","t":"V menu 11","d":"A user account dropdown menu triggered by an avatar button, with profile details, profile/billing/settings links, and a destructive sign-out action.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-menu-11/default/preview.1785511031697-985548eb-a6f9-41ea-afb7-ebc8069955fd.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-menu-12","t":"V menu 12","d":"A dropdown menu of file actions — rename, duplicate, move, download and a destructive delete — with keyboard shortcut hints.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-menu-12/default/preview.1785511558410-c412640a-f513-4341-ba7a-f8b9d5c8f296.png","pc":"cnippet.dev","tg":["dropdown","menu"]},{"id":"21st:cnippet.dev__v-menu-15","t":"V menu 15","d":"A dropdown menu triggered by a Share button, with a copy-link item and a nested Export submenu for choosing formats like PDF, PNG, SVG, or CSV.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-menu-15/default/preview.1785507848957-3d863e8a-91ae-491c-9a51-123e4287fb8a.png","pc":"cnippet.dev","tg":["menu"]},{"id":"21st:cnippet.dev__v-meter-6","t":"V meter 6","d":"A stacked list of labeled meter bars that visualize skill levels as animated percentage fills.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-meter-6/default/preview.1784480081717-b14e42c4-97cc-42b9-b98d-125465a875ed.png","pc":"cnippet.dev","tg":["progress","stat"]},{"id":"21st:cnippet.dev__v-meter-7","t":"V meter 7","d":"A password field with a live strength meter that scores complexity and shows a colored progress bar with a strength label.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-meter-7/default/preview.1784425115979-4a8f39db-e91d-4096-9640-23efa33fca59.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-meter-8","t":"V meter 8","d":"A card that shows per-member API usage as labeled meter bars against a shared plan limit.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-meter-8/default/preview.1784434388627-8229d2a5-7ffc-4a02-8b92-edc023063ce7.png","pc":"cnippet.dev","tg":["progress","team"]},{"id":"21st:cnippet.dev__v-skeleton-10","t":"V skeleton 10","d":"Animated loading skeleton placeholder for a settings page with a header, action button, tab row, and grouped toggle/list rows.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"cnippet.dev","st":"indexed","u":12,"pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-10/default/preview.1784447656535-b8cb3ea2-68fd-4fb4-b509-1805d79057c2.png","pc":"cnippet.dev","tg":["tabs"]},{"id":"21st:cnippet.dev__v-skeleton-11","t":"V skeleton 11","d":"Loading placeholder skeleton for a product grid showing image, title, star rating and price cards.","k":"component","s":"21st","c":"status/loader","g":"status","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-11/default/preview.1784471608745-836cb41f-baa3-4c85-9b93-b3fe04da32d1.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-skeleton-12","t":"V skeleton 12","d":"Animated shimmer skeleton placeholder for a form layout with labeled input fields, a textarea, and action buttons.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cnippet.dev","st":"indexed","u":10,"pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-12/default/preview.1784472758221-e199ed80-99f6-4314-a658-3af5714c53fa.png","pc":"cnippet.dev","tg":["textarea"]},{"id":"21st:cnippet.dev__v-skeleton-13","t":"V skeleton 13","d":"A loading placeholder skeleton for an email inbox list with avatars, subject lines, and unread indicators.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"cnippet.dev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-13/default/preview.1784417489858-4ca3671a-a663-4389-96f0-d73009b374a4.png","pc":"cnippet.dev","tg":["avatar","list","spinner"]},{"id":"21st:cnippet.dev__v-skeleton-14","t":"V skeleton 14","d":"Animated loading placeholder that mimics a three-column kanban board with card, avatar and tag skeletons.","k":"component","s":"21st","c":"status/loader","g":"status","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-14/default/preview.1784467275242-26993efc-78d9-4770-9ca7-67cd04149df0.png","pc":"cnippet.dev","tg":["spinner"]},{"id":"21st:cnippet.dev__v-skeleton-4","t":"V skeleton 4","d":"A loading skeleton placeholder that shows a row of three dashboard stat cards while data is fetching.","k":"component","s":"21st","c":"status/loader","g":"status","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-4/default/preview.1784415373038-dc648323-3396-440b-9171-90970dc1c477.png","pc":"cnippet.dev","tg":["dashboard","spinner"]},{"id":"21st:cnippet.dev__v-skeleton-7","t":"V skeleton 7","d":"A loading placeholder that mirrors a data table layout, with header, avatar rows, badges and pagination shimmer.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-7/default/preview.1784453646609-885c6c92-ea17-426f-a4b2-6ae625527dbe.png","pc":"cnippet.dev","tg":["pagination","table"]},{"id":"21st:cnippet.dev__v-skeleton-8","t":"V skeleton 8","d":"Loading placeholder that mirrors a sidebar dashboard layout with a nav rail, header actions, stat cards, and list rows.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"cnippet.dev","st":"indexed","u":11,"pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-8/default/preview.1784439893359-5094b498-d046-4fbe-8fa8-d4dd83961d78.png","pc":"cnippet.dev","tg":["dashboard","list","sidebar","stat"]},{"id":"21st:cnippet.dev__v-skeleton-9","t":"V skeleton 9","d":"A chat conversation loading placeholder with avatar, message bubbles, and input bar built from shimmer skeletons.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-skeleton-9/default/preview.1784427920232-048eb3a8-1a12-4061-a82d-8d0df8359776.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-spinner-14","t":"V spinner 14","d":"A sign-in form with email and password fields whose submit button shows an inline loading spinner while signing in and a success state when done.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"cnippet.dev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/cnippet.dev/v-spinner-14/default/preview.1784386420781-1847a16f-2f51-4b21-b919-aab9b3538983.png","pc":"cnippet.dev","tg":["sign-in"]},{"id":"21st:cnippet.dev__v-spinner-6","t":"V spinner 6","d":"A centered card showing a spinner with a title and helper text for an in-progress loading or setup state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-spinner-6/default/preview.1784445207111-99e97198-3456-4f9a-a465-5a7ac898bba3.png","pc":"cnippet.dev","tg":["empty-state","spinner"]},{"id":"21st:cnippet.dev__v-spinner-7","t":"V spinner 7","d":"Inline loading text paired with a spinner to show multiple status states like checking, connected and reconnecting.","k":"component","s":"21st","c":"status/loader","g":"status","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-spinner-7/default/preview.1784427946546-48f839c3-0c67-4e84-9338-f117dbe8edf0.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-switch-12","t":"V switch 12","d":"A privacy settings card listing labeled toggle switches with icons for controlling app permissions like location, camera, and tracking.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-switch-12/default/preview.1785168668013-70ddba3c-a77e-4fce-a10f-02c998c99e6c.png","pc":"cnippet.dev","tg":["toggle"]},{"id":"21st:cnippet.dev__v-switch-2","t":"V switch 2","d":"A toggle switch paired with a label and helper text for opting into settings like marketing emails.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-switch-2/default/preview.1785167484789-7747eb38-2f56-479f-858b-a9363d71d9aa.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-switch-7","t":"V switch 7","d":"A compact settings list with labeled rows, descriptions, and toggle switches for editor preferences.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-switch-7/default/preview.1785169153133-cb5df24b-3d8f-4812-956d-ca8b89df9ee5.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-switch-8","t":"V switch 8","d":"A responsive two-column grid of feature toggle cards, each with an icon, title, description, and a switch for enabling or disabling settings.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-switch-8/default/preview.1785168116094-5f5ee32f-f9e9-436e-91e1-0f1d49365042.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-switch-9","t":"V switch 9","d":"A settings card with labeled toggle switches for managing cookie consent categories such as analytics, marketing, and personalization.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-switch-9/default/preview.1785169545894-75cc751f-9180-451c-bec5-195db21635c1.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-table-12","t":"V table 12","d":"Invoice history table with color-coded status badges, per-row actions, and an outstanding-total footer.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"cnippet.dev","st":"indexed","u":12,"pl":"https://cdn.21st.dev/cnippet.dev/v-table-12/default/preview.1785134649498-36884ba2-8d6a-4b61-9786-539ee9cf23ad.png","pc":"cnippet.dev","tg":["table"]},{"id":"21st:cnippet.dev__v-table-3","t":"V table 3","d":"A data table rendered inside a rounded card frame, with status badges and a totals footer row.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"cnippet.dev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/cnippet.dev/v-table-3/default/preview.1785135502835-124a9aef-81ce-4c1a-8365-18b542b6eb5a.png","pc":"cnippet.dev","tg":["badge","card","dashboard","table"]},{"id":"21st:cnippet.dev__v-table-6","t":"V table 6","d":"A team members table showing avatars, names, emails, roles, and status with colored badges.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/cnippet.dev/v-table-6/default/preview.1785135810405-98114e13-3fa4-479d-b4ec-ff4fe7da01f2.png","pc":"cnippet.dev","tg":["badge","avatar","table","team"]},{"id":"21st:cnippet.dev__v-textarea-10","t":"V textarea 10","d":"A support ticket form with selectable category chips, a message textarea with character count, a loading submit button, and a submitted confirmation state.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-textarea-10/default/preview.1786680504147-f7d02f71-1444-4bbc-b128-9fef749280f3.png","pc":"cnippet.dev","tg":["textarea"]},{"id":"21st:cnippet.dev__v-textarea-6","t":"V textarea 6","d":"An auto-resizing textarea with a live character counter that changes color as you approach and reach the limit.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-textarea-6/default/preview.1785538534288-e6473583-e916-4f8d-a83f-d8a2b38f1bda.png","pc":"cnippet.dev","tg":["form","input","textarea"]},{"id":"21st:cnippet.dev__v-toast-15","t":"V toast 15","d":"A toast that reminds users of unsaved edits with inline save and discard actions.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toast-15/default/preview.1786660911905-6ed43a53-bf9b-4b6d-97f6-fb31368d71c3.png","pc":"cnippet.dev","tg":["notification","toast"]},{"id":"21st:cnippet.dev__v-toggle-10","t":"V toggle 10","d":"Role filter chips built from toggle buttons, each with a count badge and a live running total of matching results.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-10/default/preview.1785464988753-9b6ec5e3-892f-4c68-86b6-2889d926f506.png","pc":"cnippet.dev","tg":["badge","chip","toggle"]},{"id":"21st:cnippet.dev__v-toggle-11","t":"V toggle 11","d":"A list of article rows where each row has a bookmark toggle button, with a live count of how many items are saved.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-11/default/preview.1785464949841-d69820e2-b53a-4391-bed7-a3a73338a10d.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-14","t":"V toggle 14","d":"A vertical list of server setting rows with toggle buttons that swap their icon and status color when switched on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-14/default/preview.1786675072167-7e68c587-df52-4bbb-9379-e4dfbf0ace6e.png","pc":"cnippet.dev","tg":["toggle"]},{"id":"21st:cnippet.dev__v-toggle-15","t":"V toggle 15","d":"A task list where each item has a completion toggle and per-task priority flag toggles.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-15/default/preview.1786674683716-d2c7cd5e-d814-44d0-890c-10c5bfb3af78.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-2","t":"V toggle 2","d":"Toggle buttons with an outline variant for toggling text formatting options like bold and italic.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-2/default/preview.1786674664960-91aae228-d4b0-47bc-9cd6-a4a23ee762be.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-9","t":"V toggle 9","d":"A video call control bar with mic, camera, and screen-share toggles that swap icons and turn red when disabled, plus a leave-call button and an animated in-call status indicator.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-9/default/preview.1785464969857-7ccdfbe0-956c-4ca5-86c9-c988b49552a1.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-group-3","t":"V toggle group 3","d":"A pre-composed toggle group with outlined, connected buttons for bold, italic and underline text-formatting controls.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-group-3/default/preview.1786673339696-aa03dbdc-a4b0-4929-860b-b4691cba0be7.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-group-4","t":"V toggle group 4","d":"A vertically oriented toggle group with outline variant for text formatting controls like bold, italic and underline.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-group-4/default/preview.1786673294231-6cc588ba-ff7b-4243-a914-bf8865004930.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toggle-group-7","t":"V toggle group 7","d":"A segmented toggle group for switching between list, grid, and kanban view modes.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toggle-group-7/default/preview.1786673322533-6f4b5f98-bd6b-495c-ba58-5cfc0afc844c.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-toolbar-3","t":"V toolbar 3","d":"An image editor toolbar with grouped transform, zoom, adjustment, and export actions using tooltips.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toolbar-3/default/preview.1784764724689-3ac1515e-4ee5-41d9-9992-65fe35942577.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__v-toolbar-8","t":"V toolbar 8","d":"A compact canvas toolbar with light/dark theme toggle, zoom in/out controls with a live percentage readout, and a reset action, each with tooltips.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-toolbar-8/default/preview.1784757264576-ae462dbe-1df9-4295-93c8-92ba6356bd41.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__v-tooltip-11","t":"V tooltip 11","d":"A compact credentials card that copies API keys, endpoints, and webhook URLs to the clipboard, each row using a tooltip that confirms when the value was copied.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-tooltip-11/default/preview.1785464710034-194dc42d-b163-4046-b784-80c382e2a053.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__v-tooltip-12","t":"V tooltip 12","d":"A tooltip toolbar of icon buttons where locked Pro features show a rich tooltip with a Pro badge, description, and upgrade link.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/cnippet.dev/v-tooltip-12/default/preview.1785464551345-b5f9d3c5-6975-405b-b6ba-ee72367bcff4.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__v-tooltip-13","t":"V tooltip 13","d":"A vertical form with labeled inputs where each field label has an info icon that reveals validation hints in a tooltip on hover.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-tooltip-13/default/preview.1786675879940-21ce640b-6906-4258-aa3c-73c08b67f859.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__v-tooltip-5","t":"V tooltip 5","d":"A ghost icon button that reveals a help tooltip with additional context on hover or focus.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-tooltip-5/default/preview.1785489165681-47fa8840-8c7a-4624-9a77-6eb50ae40d81.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__v-tooltip-7","t":"V tooltip 7","d":"A compact text-formatting toolbar of icon buttons that reveal tooltips showing each action's keyboard shortcut on hover.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/v-tooltip-7/default/preview.1785489890247-bdc398ed-aef7-4d0e-a8fb-ca2cbe810455.png","pc":"cnippet.dev","tg":["tooltip"]},{"id":"21st:cnippet.dev__vercep-blog-1","t":"Vercep blog 1","d":"This clean and modern blog section presents your latest articles in a flexible grid layout.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/vercep-blog-1/default/preview.1773482805799.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__vercep-feature-1","t":"Vercep feature 1","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"cnippet.dev","st":"indexed","u":80,"pl":"https://cdn.21st.dev/cnippet.dev/vercep-feature-1/default/preview.1773258380883.png","pc":"cnippet.dev","tg":["features","marquee"]},{"id":"21st:cnippet.dev__vercep-metrics-1","t":"Vercep metrics 1","d":"This clean and modern metrics section showcases your key achievements and statistics in a minimalist grid layout. Large, bold numbers paired with clear labels make it easy for visi","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/vercep-metrics-1/default/preview.1773258991429.png","pc":"cnippet.dev"},{"id":"21st:cnippet.dev__vertical-cut-reveal","t":"Vertical cut reveal","d":"Animated text that reveals each character, word, or line with a vertical clip-path wipe and configurable stagger.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cnippet.dev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/cnippet.dev/vertical-cut-reveal/default/preview.1783589957618.png","pc":"cnippet.dev","tg":["text"]},{"id":"21st:cnippet.dev__zoom-level-toggle-group","t":"Zoom level toggle group","d":"A toggle group for selecting a zoom percentage that scales a live content preview in real time.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"cnippet.dev","st":"indexed","pl":"https://cdn.21st.dev/cnippet.dev/zoom-level-toggle-group/default/preview.1786673494133-aa5993bd-99bb-4f65-89fc-a8eb6159dbc4.png","pc":"cnippet.dev"},{"id":"21st:codebanditssss__glass-morphic-tabs","t":"Glass morphic tabs","d":"Premium glass morphic tabs component with live indicators and magnetic cursor effects. Features frosted glass design, animated status dots, notification badges, and smooth spring p","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"codebanditssss","st":"indexed","pl":"https://cdn.21st.dev/codebanditssss/glass-morphic-tabs/default/preview.1761310680431.png","pc":"codebanditssss"},{"id":"21st:coderislive07__ai-assistat","t":"Ai assistat","d":"The AI Message Bar is an interactive chat interface with a modern design featuring a sleek gradient background. It allows users to communicate with an AI assistant through a messag","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"coderislive07","st":"indexed","u":81,"pl":"https://cdn.21st.dev/user_2wjKdxMtqQT5IkB6iwZTCrkDFKs/ai-assistat/default/preview.1746718499621.jpeg","pc":"coderislive07","tg":["ai-chat"]},{"id":"21st:coderislive07__cursor-wander-card","t":"Cursor wander card","d":"A modern, interactive crypto card component that responds to cursor movement, creating a subtle 3D tilt effect. Ideal for fintech and Web3 dashboards, this reusable UI card enhance","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"coderislive07","st":"indexed","u":69,"pl":"https://cdn.21st.dev/user_2wjKdxMtqQT5IkB6iwZTCrkDFKs/cursor-wander-card/default/preview.1747199911952.png","pc":"coderislive07"},{"id":"21st:coderislive07__travel-connect-signin-1","t":"Travel connect signin 1","d":"This project is \"Travel Connect,\" a modern web application designed for global travelers and digital nomads. It features an elegant login interface with a distinctive world map vis","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"coderislive07","st":"indexed","u":224,"pl":"https://cdn.21st.dev/user_2wjKdxMtqQT5IkB6iwZTCrkDFKs/travel-connect-signin-1/travel-connect/preview.png","pc":"coderislive07","tg":["map","sign-in"]},{"id":"21st:comanescu.robert93__demo","t":"Demo","d":"A description about the demo.","k":"component","s":"21st","c":"other","g":"other","a":"comanescu.robert93","st":"indexed","pl":"https://cdn.21st.dev/comanescu.robert93/demo/default/preview.1761056838457.png","pc":"comanescu.robert93"},{"id":"21st:componentry__animated-gradient","t":"Animated gradient","d":"A full-cover WebGL animated gradient background with configurable presets, noise overlay, and swirl distortion for hero sections and cards.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"componentry","st":"indexed","u":7,"pl":"https://cdn.21st.dev/componentry/animated-gradient/default/preview.1783581957172.png","pc":"componentry","tg":["background"]},{"id":"21st:componentry__auth-modal","t":"Auth modal","d":"An animated authentication modal with social login buttons and email sign-in, opened from a trigger button.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"componentry","st":"rated","u":2,"pl":"https://cdn.21st.dev/componentry/auth-modal/default/preview.1784270345234-de68d149-794f-4d69-b0cd-1d959e7ae944.png","pc":"componentry","tg":["modal","sign-in","sign-up"],"sc":15},{"id":"21st:componentry__circuit-board","t":"Circuit board","d":"An interactive circuit board layout with labeled nodes and animated electricity pulses that travel along right-angle traces between connected nodes.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/circuit-board/default/preview.1784452144794-c0f9ad8b-0450-46b1-a86f-7c3e48963ca9.png","pc":"componentry","tg":["data-visualization","icon"]},{"id":"21st:componentry__collection-surfer","t":"Collection surfer","d":"A scroll-driven infinite 3D image gallery where cards surf along a perspective track with magnetic, uplift, or simple hover effects.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"componentry","st":"indexed","u":7,"pl":"https://cdn.21st.dev/componentry/collection-surfer/default/preview.1784312858851-34c1579c-c6bf-428a-82d1-85b71046664d.png","pc":"componentry","tg":["gallery","scroll-area"]},{"id":"21st:componentry__dither-prism-hero","t":"Dither prism hero","d":"A full-screen WebGL hero background with animated dithering patterns, prismatic color refraction, holographic iridescence, and floating particles behind headline text.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/dither-prism-hero/default/preview.1785377131296-cacacb69-2d48-4d4f-b3a8-c0526939a091.png","pc":"componentry"},{"id":"21st:componentry__eye-tracking","t":"Eye tracking","d":"A pair of animated eyes whose pupils follow the cursor, with blink, dilation and realistic, cartoon, minimal and cyber style variants.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/eye-tracking/default/preview.1784473877745-eb1f5b1a-a510-4523-bc9c-647b571355f3.png","pc":"componentry","tg":["cursor"]},{"id":"21st:componentry__hero-geometric","t":"Hero geometric","d":"A full-screen hero section with an animated WebGL shader gradient background and premium serif/sans headline typography.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/hero-geometric/default/preview.1785377325332-32ec4070-6de7-4234-9e0f-2c72048919b9.png","pc":"componentry"},{"id":"21st:componentry__hyper-text","t":"Hyper text","d":"An animated text effect that scrambles and cycles through random characters before revealing the final text on hover or load.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/hyper-text/default/preview.1783715127296.png","pc":"componentry"},{"id":"21st:componentry__infinite-image-field","t":"Infinite image field","d":"An endless cursor-driven photo canvas that tiles images infinitely in all directions and pans smoothly toward the cursor.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/infinite-image-field/default/preview.1783581630896.png","pc":"componentry","tg":["gallery"]},{"id":"21st:componentry__magnet-lines","t":"Magnet lines","d":"An interactive grid of lines that rotate to point toward the cursor, creating a magnetic field effect.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/magnet-lines/default/preview.1783581986670.png","pc":"componentry","tg":["cursor","grid"]},{"id":"21st:componentry__magnetic-dock","t":"Magnetic dock","d":"A macOS-style dock with magnetic hover scaling, spring physics, tooltips, badges, and active indicators for navigation bars.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"componentry","st":"rated","pl":"https://cdn.21st.dev/componentry/magnetic-dock/default/preview.1783710510075.png","pc":"componentry","tg":["dock","navigation-menu","tooltip"],"sc":20},{"id":"21st:componentry__particle-galaxy","t":"Particle galaxy","d":"An interactive 3D spiral galaxy of shader-rendered particles you can drag to rotate, scroll to zoom, and customize with color, glow, and density controls.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/particle-galaxy/default/preview.1785535854660-65ecee6d-eabd-459b-ac5f-972b8aa46982.png","pc":"componentry"},{"id":"21st:componentry__pixel-canvas","t":"Pixel canvas","d":"An interactive pixel grid on a canvas that lights up around the cursor and leaves a smooth, color-shifting trail that decays over time.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"componentry","st":"indexed","u":12,"pl":"https://cdn.21st.dev/componentry/pixel-canvas/default/preview.1784430904160-4c08012f-c2fd-43b1-b80b-4969ee8ed883.png","pc":"componentry","tg":["cursor"]},{"id":"21st:componentry__scroll-choreography","t":"Scroll choreography","d":"A scroll-driven animation that choreographs four quadrant images across the viewport before one hero image expands to fill the screen.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"componentry","st":"indexed","u":14,"pl":"https://cdn.21st.dev/componentry/scroll-choreography/default/preview.1783712366971.png","pc":"componentry","tg":["gallery","scroll-area"]},{"id":"21st:componentry__silk-aurora","t":"Silk aurora","d":"An animated full-screen WebGL hero background with satin-dark aurora ribbons, pearlescent sheen, film grain, and cursor-driven depth, with slots for title, subtitle, and descriptio","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/silk-aurora/default/preview.1785315188336-dc1c4336-2138-48ea-97ee-ca57e98a2cb5.png","pc":"componentry"},{"id":"21st:componentry__split-flap-display","t":"Split flap display","d":"An animated split-flap (airport departure board) display that flips through characters to reveal text or label/value rows.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/split-flap-display/default/preview.1783715052566.png","pc":"componentry"},{"id":"21st:componentry__testimonial-marquee","t":"Testimonial marquee","d":"An infinite horizontally scrolling marquee for showcasing testimonials and social proof, with single-row, dual-row, stacked, and edge-to-edge flush variants.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/testimonial-marquee/default/preview.1786703041400-55d9d61b-77c3-4939-9629-ec26ed8c614d.png","pc":"componentry","tg":["carousel","marquee","testimonials"]},{"id":"21st:componentry__text-repel","t":"Text repel","d":"Interactive heading text whose individual letters push away from or pull toward the cursor with springy motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/text-repel/default/preview.1785375796746-06c7eceb-0a8a-412a-aa98-6882a8756caf.png","pc":"componentry"},{"id":"21st:componentry__webgl-liquid","t":"Webgl liquid","d":"A premium animated WebGL liquid hero background with customizable palette, flow, grain, and reveal timing.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"componentry","st":"indexed","pl":"https://cdn.21st.dev/componentry/webgl-liquid/default/preview.1785454412065-849ab7f0-1724-42d5-8097-352339dc2068.png","pc":"componentry"},{"id":"21st:contact.mlozano__particleburst","t":"Particleburst","d":"Colorful particle burst explosion effect. Fire particles on click or any event. Configurable count, colors, distance, and size. Respects prefers-reduced-motion. Framer Motion + Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"contact.mlozano","st":"indexed","pl":"https://21st.dev/@contact.mlozano/components/particleburst","pc":"contact.mlozano"},{"id":"21st:contact_36e39b35__gradient-mc-anime","t":"Gradient mc anime","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#00004D, #9696E9). Features: film grain. A drop-in, zero-dependency ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"contact_36e39b35","st":"indexed","pl":"https://cdn.21st.dev/contact_36e39b35/gradient-mc-anime/default/preview.1786483546631-203dcccf-5d6d-4c64-a815-266bdde204bc.webp","pc":"contact_36e39b35"},{"id":"21st:contentbit__pros-cons","t":"Pros cons","d":"A two-column content block that lists the advantages and disadvantages of a single option side by side.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"contentbit","st":"indexed","pl":"https://cdn.21st.dev/contentbit/pros-cons/default/preview.1784446517414-d9cc8c00-1710-4c72-9608-adbe98575017.png","pc":"contentbit","tg":["comparison"]},{"id":"21st:convertivio__ggfhjgdf","t":"Ggfhjgdf","d":"hghgfhgfdhgfdhfd","k":"component","s":"21st","c":"other","g":"other","a":"convertivio","st":"indexed","pl":"https://cdn.21st.dev/convertivio/ggfhjgdf/default/preview.1755131304582.png","pc":"convertivio"},{"id":"21st:corr__animated-spinner","t":"Animated spinner","d":"A Motion-powered circular loading spinner with size and tone variants for buttons, cards, and async states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"corr","st":"indexed","pl":"https://cdn.21st.dev/corr/animated-spinner/default/preview.1784664013556-6f8a37af-c1f8-4deb-8377-ddb5b0f29508.png","pc":"corr","tg":["spinner"]},{"id":"21st:corr__notice-alert","t":"Notice alert","d":"A restrained alert wrapper with info, success, warning, primary, and destructive tones for inline notices and status messages.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"corr","st":"rated","pl":"https://cdn.21st.dev/corr/notice-alert/default/preview.1784723104620-22d682d0-eefc-4af7-8ae9-1855c45c3304.png","pc":"corr","tg":["alert","notification"],"sc":16},{"id":"21st:corr__presence-fade","t":"Presence fade","d":"A tiny mount and unmount wrapper that animates children with fade, scale, or slide transitions.","k":"component","s":"21st","c":"status/status-dot","g":"status","a":"corr","st":"indexed","pl":"https://cdn.21st.dev/corr/presence-fade/default/preview.1784711657648-62781c0f-637b-4205-b54d-80bc94bfa6af.png","pc":"corr"},{"id":"21st:corr__scroll-blur","t":"Scroll blur","d":"A scrollable container that fades content into blurred gradient edges on the top, bottom, left, and right, with optional scroll-snap item helpers.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"corr","st":"indexed","pl":"https://cdn.21st.dev/corr/scroll-blur/default/preview.1783712768907.png","pc":"corr","tg":["scroll-area"]},{"id":"21st:coss.com__alert","t":"Alert","d":"A styled alert component with variant support (default, info, success, warning, error) and optional action buttons.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"coss.com","st":"indexed","u":21,"pl":"https://cdn.21st.dev/coss.com/alert/default/preview.1774275779058.png","pc":"coss.com","tg":["alert","icon","notification"]},{"id":"21st:coss.com__alert-dialog","t":"Alert dialog","d":"A dialog that requires user response to proceed.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/alert-dialog/default/preview.1774275779058.png","pc":"coss.com"},{"id":"21st:coss.com__breadcrumb","t":"Breadcrumb","d":"Displays the path to the current resource using a hierarchy of links.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"coss.com","st":"indexed","u":36,"pl":"https://cdn.21st.dev/coss.com/breadcrumb/default/preview.1774280323978.png","pc":"coss.com","tg":["link","navigation-menu"]},{"id":"21st:coss.com__calendar","t":"Calendar","d":"A date picker component with range and multi-select support.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"coss.com","st":"indexed","u":18,"pl":"https://cdn.21st.dev/coss.com/calendar/default/preview.1774275779058.png","pc":"coss.com","tg":["calendar","date-picker"]},{"id":"21st:coss.com__checkbox","t":"Checkbox","d":"A control allowing the user to toggle between checked and not checked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"coss.com","st":"indexed","u":6,"pl":"https://cdn.21st.dev/coss.com/checkbox/default/preview.1774278250252.png","pc":"coss.com","tg":["checkbox"]},{"id":"21st:coss.com__checkbox-group","t":"Checkbox group","d":"Provides shared state for a series of checkboxes. Styled wrapper for CheckboxGroup from Base UI with support for parent checkboxes, indeterminate state, and nested groups.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/checkbox-group/default/preview.1774278119493.png","pc":"coss.com","tg":["checkbox","list"]},{"id":"21st:coss.com__collapsible","t":"Collapsible","d":"A collapsible panel controlled by a button trigger with animated height transitions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/collapsible/default/preview.1774275779058.png","pc":"coss.com"},{"id":"21st:coss.com__combobox","t":"Combobox","d":"An input combined with a list of predefined items to select.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"coss.com","st":"indexed","u":29,"pl":"https://cdn.21st.dev/coss.com/combobox/default/preview.1774278953539.png","pc":"coss.com","tg":["chip"]},{"id":"21st:coss.com__coss-accordion","t":"Coss accordion","d":"A set of collapsible panels with headings and content. Built on Base UI with smooth height animations and full keyboard navigation.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"coss.com","st":"indexed","u":19,"pl":"https://cdn.21st.dev/coss.com/coss-accordion/default/preview.1774276391759.png","pc":"coss.com","tg":["accordion","faq"]},{"id":"21st:coss.com__coss-autocomplete","t":"Coss autocomplete","d":"An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"coss.com","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/coss-autocomplete/default/preview.1773928662023.png","pc":"coss.com","tg":["search"]},{"id":"21st:coss.com__coss-avatar","t":"Coss avatar","d":"An avatar component with image, fallback text, multiple sizes, border radius variants, and group stacking. Built on Base UI Avatar primitives.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"coss.com","st":"indexed","u":11,"pl":"https://cdn.21st.dev/coss.com/coss-avatar/default/preview.1774278028683.png","pc":"coss.com","tg":["avatar","profile","team"]},{"id":"21st:coss.com__coss-badge","t":"Coss badge","d":"A badge component with 8 semantic variants (default, secondary, outline, destructive, error, info, success, warning), 3 sizes, icon support, and render prop for polymorphism. Built","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"coss.com","st":"indexed","u":8,"pl":"https://cdn.21st.dev/coss.com/coss-badge/default/preview.1774275779058.png","pc":"coss.com","tg":["badge"]},{"id":"21st:coss.com__coss-breadcrumb","t":"Coss breadcrumb","d":"Displays the path to the current resource using a hierarchy of links. Supports custom separators, ellipsis for collapsed items, and a render prop for polymorphic links.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/coss-breadcrumb/default/preview.1774275779058.png","pc":"coss.com"},{"id":"21st:coss.com__coss-button","t":"Coss button","d":"A button component with 7 variants (default, outline, secondary, destructive, destructive-outline, ghost, link), 10 sizes (xs–xl + icon sizes), loading state with built-in spinner,","k":"component","s":"21st","c":"actions/link","g":"actions","a":"coss.com","st":"indexed","u":11,"pl":"https://cdn.21st.dev/coss.com/coss-button/default/preview.1774286573946.png","pc":"coss.com","tg":["link"]},{"id":"21st:coss.com__drawer","t":"Drawer","d":"A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. Supports bottom, top, left, and right positions with default, inset,","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"coss.com","st":"indexed","u":39,"pl":"https://cdn.21st.dev/coss.com/drawer/default/preview.1774285079281.png","pc":"coss.com","tg":["menu","modal","navigation-menu","scroll-area"]},{"id":"21st:coss.com__field","t":"Field","d":"A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time v","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"coss.com","st":"indexed","u":18,"pl":"https://cdn.21st.dev/coss.com/field/default/preview.1774281231358.png","pc":"coss.com","tg":["checkbox","chip","radio-group","select"]},{"id":"21st:coss.com__form","t":"Form","d":"A form wrapper component that simplifies validation and submission with flex column layout and gap between fields.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"coss.com","st":"indexed","u":15,"pl":"https://cdn.21st.dev/coss.com/form/default/preview.1774277903029.png","pc":"coss.com"},{"id":"21st:coss.com__frame","t":"Frame","d":"A framed container for grouping related information with header, panels, and footer sections.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"coss.com","st":"indexed","u":6,"pl":"https://cdn.21st.dev/coss.com/frame/default/preview.1774273906224.png","pc":"coss.com","tg":["footer"]},{"id":"21st:coss.com__input-otp","t":"Input otp","d":"A segmented input for one-time passwords and verification codes.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/input-otp/default/preview.1774442844776.png","pc":"coss.com"},{"id":"21st:coss.com__menu","t":"Menu","d":"A dropdown menu component with support for icons, keyboard shortcuts, checkboxes, switches, radio groups, links, group labels, nested submenus, and dialog triggers. Also exported a","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"coss.com","st":"indexed","u":16,"pl":"https://cdn.21st.dev/coss.com/menu/default/preview.1774277145180.png","pc":"coss.com","tg":["checkbox","dropdown","menu","modal"]},{"id":"21st:coss.com__progress","t":"Progress","d":"Here is Progress component","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/larsen66/progress/default/preview.1750564134208.png","pc":"coss.com","tg":["progress","upload-download"]},{"id":"21st:coss.com__slider","t":"Slider","d":"An accessible slider component built on Base UI Slider with support for single value, range, vertical orientation, and custom styling.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"coss.com","st":"indexed","u":20,"pl":"https://cdn.21st.dev/coss.com/slider/default/preview.1774363254975.png","pc":"coss.com","tg":["slider"]},{"id":"21st:coss.com__spinner","t":"Spinner","d":"A simple animated loading spinner built on the Lucide Loader2 icon.","k":"component","s":"21st","c":"status/loader","g":"status","a":"coss.com","st":"indexed","u":7,"pl":"https://cdn.21st.dev/coss.com/spinner/default/preview.1774362498994.png","pc":"coss.com","tg":["spinner"]},{"id":"21st:coss.com__switch","t":"Switch","d":"A toggle switch component built on Base UI Switch with animated thumb.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"coss.com","st":"indexed","u":16,"pl":"https://cdn.21st.dev/coss.com/switch/default/preview.1774359000000.png","pc":"coss.com","tg":["toggle"]},{"id":"21st:coss.com__table","t":"Table","d":"A simple table component for displaying tabular data.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/table/default/preview.1774358400000.png","pc":"coss.com","tg":["checkbox","table"]},{"id":"21st:coss.com__tabs","t":"Tabs","d":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"coss.com","st":"indexed","u":52,"pl":"https://cdn.21st.dev/coss.com/tabs/default/preview.1774357976645.png","pc":"coss.com","tg":["navigation-menu","tabs"]},{"id":"21st:coss.com__textarea","t":"Textarea","d":"A native textarea element with custom size options.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"coss.com","st":"indexed","u":11,"pl":"https://cdn.21st.dev/coss.com/textarea/default/preview.1774293842992.png","pc":"coss.com","tg":["textarea"]},{"id":"21st:coss.com__toggle","t":"Toggle","d":"A two-state button that can be toggled on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"coss.com","st":"indexed","u":10,"pl":"https://cdn.21st.dev/coss.com/toggle/default/preview.1774356688951.png","pc":"coss.com","tg":["toggle"]},{"id":"21st:coss.com__toolbar","t":"Toolbar","d":"A container for grouping a set of buttons and controls.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"coss.com","st":"indexed","pl":"https://cdn.21st.dev/coss.com/toolbar/default/preview.1774286710192.png","pc":"coss.com"},{"id":"21st:cowandperry__ascii-donut","t":"Ascii donut","d":"Rotating 3D ASCII donut on canvas with hue-shifting shading, idle-deferred init, and scroll/tab-visibility-aware pausing","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"cowandperry","st":"indexed","pl":"https://cdn.21st.dev/cowandperry/ascii-donut/default/preview.1786793053597-e114ab9c-7078-493e-93fe-ace66b72d003.webp","pc":"cowandperry"},{"id":"21st:crafterui__hero-carousel","t":"Hero carousel","d":"A full-bleed editorial hero driven by a filmstrip: cards share one top edge, the focused card unfurls to full height while its neighbours stay clipped to half, and the whole backgr","k":"component","s":"21st","c":"media/carousel","g":"media","a":"crafterui","st":"indexed","pl":"https://cdn.21st.dev/crafterui.com/hero-carousel/default/preview.1787059372325-b649cf5c-7b55-4ad3-b0d4-a13e810f53c2.png","pc":"crafterui"},{"id":"21st:creative.blex__button","t":"Button","d":"button button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"creative.blex","st":"indexed","pl":"https://cdn.21st.dev/creative.blex/button/default/preview.1783468223610.png","pc":"creative.blex"},{"id":"21st:critcoder__threejs-particles-waves","t":"Threejs particles waves","d":"Interactive Three.js particle wave animation with 2500 white dots creating undulating wave patterns against black background, controlled by mouse movement.RetryG","k":"component","s":"21st","c":"status/loader","g":"status","a":"critcoder","st":"indexed","u":44,"pl":"https://cdn.21st.dev/critcoder/threejs-particles-waves/default/preview.1785451010973-b4eff534-227f-48cd-928e-1596e22a6eaf.png","pc":"critcoder"},{"id":"21st:ctate__grid-background","t":"Grid background","d":"Grid Background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ctate","st":"indexed","u":166,"pl":"https://cdn.21st.dev/user_ctate/grid-background/default/preview.png","pc":"ctate","tg":["background","grid"]},{"id":"21st:cult-ui__3d-carousel","t":"3d carousel","d":"A 3D image carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cult-ui","st":"indexed","u":737,"pl":"https://cdn.21st.dev/user_cult_ui/3d-carousel.png","pc":"cult-ui","tg":["carousel","gallery"]},{"id":"21st:cult-ui__bg-animated-button","t":"Bg animated button","d":"Here is background animated button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bg-animated-button/default/preview.1750442155630.png","pc":"cult-ui"},{"id":"21st:cult-ui__bg-animated-fractal-dot-grid","t":"Bg animated fractal dot grid","d":"An interactive full-screen canvas background of animated dots that ripple in a wave around the cursor, with configurable size, spacing, color, glow and noise effects.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/bg-animated-fractal-dot-grid/default/preview.1784768552594-686f08dd-a171-4994-9098-02cc54d4ed93.png","pc":"cult-ui"},{"id":"21st:cult-ui__bg-image-texture","t":"Bg image texture","d":"Background wrapper that overlays a repeating image texture (fabric, grid noise, paper and more) behind its content with adjustable opacity.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/bg-image-texture/default/preview.1784832198271-08ae15b9-5e60-41d8-a102-6f90026b8693.png","pc":"cult-ui"},{"id":"21st:cult-ui__color-picker","t":"Color picker","d":"Color picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"cult-ui","st":"indexed","u":165,"pl":"https://cdn.21st.dev/user_cult_ui/color-picker.png","pc":"cult-ui"},{"id":"21st:cult-ui__dock","t":"Dock","d":"Here is Dock component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dock/default/preview.1750445652363.png","pc":"cult-ui","tg":["dock"]},{"id":"21st:cult-ui__dynamic-island","t":"Dynamic island","d":"Here is Dynamic Island component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dynamic-island/default/preview.1750445698096.png","pc":"cult-ui","tg":["notification"]},{"id":"21st:cult-ui__edge-blur","t":"Edge blur","d":"Stacked backdrop-blur layers with a gradient mask that create soft, fading blur along the top or bottom edge of a scrollable panel or screen.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"cult-ui","st":"indexed","u":18,"pl":"https://cdn.21st.dev/cult-ui/edge-blur/default/preview.1784380426328-7e1f5e5a-5bbd-474d-ba39-ddccd928d179.png","pc":"cult-ui","tg":["scroll-area"]},{"id":"21st:cult-ui__expandable","t":"Expandable","d":"Here is expandable component","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"cult-ui","st":"indexed","u":46,"pl":"https://cdn.21st.dev/larsen66/expandable/default/preview.1750442106355.png","pc":"cult-ui","tg":["calendar"]},{"id":"21st:cult-ui__family-button","t":"Family button","d":"Here is Family Button component","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/family-button/default/preview.1750441535473.png","pc":"cult-ui","tg":["popover","tabs"]},{"id":"21st:cult-ui__feature-carousel","t":"Feature carousel","d":"Here is modern feature carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cult-ui","st":"indexed","u":92,"pl":"https://cdn.21st.dev/larsen66/feature-carousel/default/preview.1750443007195.png","pc":"cult-ui","tg":["carousel","features","steps"]},{"id":"21st:cult-ui__floating-panel","t":"Floating panel","d":"A headless, composable floating panel component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cult-ui","st":"indexed","u":116,"pl":"https://cdn.21st.dev/user_cult_ui/floating-panel.png","pc":"cult-ui","tg":["textarea"]},{"id":"21st:cult-ui__glass-effect","t":"Glass effect","d":"Small glass CSS effect that I use on my website for a wow effect.","k":"component","s":"21st","c":"other","g":"other","a":"cult-ui","st":"indexed","u":44,"pl":"https://cdn.21st.dev/user_cult_ui/glass-effect.png","pc":"cult-ui"},{"id":"21st:cult-ui__gradient-heading","t":"Gradient heading","d":"Gradient Heading Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cult-ui","st":"indexed","u":101,"pl":"https://cdn.21st.dev/user_cult_ui/gradient-heading.png","pc":"cult-ui","tg":["text"]},{"id":"21st:cult-ui__grid-beam","t":"Grid beam","d":"Animated canvas background that sends soft glowing light beams along grid dividers, with color palette presets and composable headless pieces.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"cult-ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/cult-ui/grid-beam/default/preview.1784425109772-f9934c57-1ee2-4dd9-8bb2-916f15a74567.png","pc":"cult-ui","tg":["stat"]},{"id":"21st:cult-ui__hero-color-panel","t":"Hero color panel","d":"Split-layout hero section with animated shader color panel visuals, a CTA button, and tech stack badges.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"cult-ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/cult-ui/hero-color-panel/default/preview.1783695518387.png","pc":"cult-ui","tg":["cta"]},{"id":"21st:cult-ui__hero-dithering","t":"Hero dithering","d":"Split-layout hero section with an animated dithering shader visual, CTA button, and tech-stack badges.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/hero-dithering/default/preview.1783695271896.png","pc":"cult-ui"},{"id":"21st:cult-ui__hero-heatmap","t":"Hero heatmap","d":"Split-layout hero section with an animated WebGL heatmap shader visual, CTA button, and tech-stack badges.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"cult-ui","st":"indexed","u":14,"pl":"https://cdn.21st.dev/cult-ui/hero-heatmap/default/preview.1783695478334.png","pc":"cult-ui","tg":["ai-chat"]},{"id":"21st:cult-ui__hero-liquid-metal","t":"Hero liquid metal","d":"Split-layout hero section with an animated liquid-metal shader visual, call-to-action button, and tech-stack badges.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/hero-liquid-metal/default/preview.1783695372703.png","pc":"cult-ui"},{"id":"21st:cult-ui__hero-static-radial-gradient","t":"Hero static radial gradient","d":"Split-layout hero section with a responsive static radial gradient shader visual, headline, CTA button, and tech stack badges.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"cult-ui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/cult-ui/hero-static-radial-gradient/default/preview.1783695313637.png","pc":"cult-ui"},{"id":"21st:cult-ui__lightboard","t":"Lightboard","d":"A fun lightboard component used to display moving text and draw in a visually appealing way.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/user_cult_ui/lightboard.png","pc":"cult-ui"},{"id":"21st:cult-ui__logo-carousel","t":"Logo carousel","d":"Logo Carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"cult-ui","st":"indexed","u":1049,"pl":"https://cdn.21st.dev/user_cult_ui/logo-carousel.png","pc":"cult-ui","tg":["carousel"]},{"id":"21st:cult-ui__morph-surface","t":"Morph surface","d":"An animated feedback widget that morphs from a compact pill into an expanded textarea form with smooth spring animations and configurable dimensions, labels, and content.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/morph-surface/default/preview.1784832179438-eb1457c2-ed69-4bf7-a694-b1f9a39cac66.png","pc":"cult-ui","tg":["textarea"]},{"id":"21st:cult-ui__neumorph-button","t":"Neumorph button","d":"Here is Neumorph Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/neumorph-button/default/preview.1750441049988.png","pc":"cult-ui","tg":["button"]},{"id":"21st:cult-ui__pixel-heading-word","t":"Pixel heading word","d":"An interactive heading that swaps or cycles through Geist pixel font styles on hover or focus.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/pixel-heading-word/default/preview.1784699568184-8184bcc8-91a1-48d1-a1ed-c831ec42683e.png","pc":"cult-ui","tg":["text"]},{"id":"21st:cult-ui__pixel-paragraph-words","t":"Pixel paragraph words","d":"A paragraph that renders selected words or phrases in a retro pixel font while the rest of the text stays in the normal typeface.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/pixel-paragraph-words/default/preview.1784699587464-abc57fb6-2265-40f0-8754-16f568dc5ccd.png","pc":"cult-ui"},{"id":"21st:cult-ui__popover-form","t":"Popover form","d":"Popover Form","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"cult-ui","st":"indexed","u":134,"pl":"https://cdn.21st.dev/user_cult_ui/popover-form.png","pc":"cult-ui","tg":["popover","textarea"]},{"id":"21st:cult-ui__shift-card","t":"Shift card","d":"Here is Shift Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shift-card/default/preview.1750442554394.png","pc":"cult-ui"},{"id":"21st:cult-ui__side-panel-video","t":"Side panel video","d":"Here is Video Side Panel component","k":"component","s":"21st","c":"media/player","g":"media","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/side-panel-video/default/preview.1750445289243.png","pc":"cult-ui","tg":["video"]},{"id":"21st:cult-ui__svg-bands","t":"Svg bands","d":"A collection of wide, viewBox-2400 SVG section bands and ornamental frame shapes—battlement, zigzag, staircase, steep hero edges, and chamfered panels—for decorating section header","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/svg-bands/default/preview.1784721694736-7c2210d0-de92-4f30-86c9-a10c3ee045aa.png","pc":"cult-ui"},{"id":"21st:cult-ui__svg-shapes-animated","t":"Svg shapes animated","d":"A collection of wide-viewBox SVG shapes, panels, sacred-geometry figures and platonic-solid wireframes that draw their strokes on scroll-into-view with Motion, each with a flip pro","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/svg-shapes-animated/default/preview.1784405994733-d666fa6b-f52b-4366-9938-70e58b67b172.png","pc":"cult-ui"},{"id":"21st:cult-ui__texture-button","t":"Texture button","d":"A button with numorphic undertones","k":"component","s":"21st","c":"actions/button","g":"actions","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/user_cult_ui/texture-button.png","pc":"cult-ui","tg":["button"]},{"id":"21st:cult-ui__timer","t":"Timer","d":"A countdown/stopwatch timer component with customizable duration, variants, sizes, and compound parts for building custom timers.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/timer/default/preview.1783695372432.png","pc":"cult-ui"},{"id":"21st:cult-ui__typewriter","t":"Typewriter","d":"Animated typewriter text effect that types out a base string then cycles through a rotating list of phrases with a blinking cursor.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"cult-ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/cult-ui/typewriter/default/preview.1784772818327-875dedbf-0cef-40f8-94c9-619efe075b90.png","pc":"cult-ui","tg":["cursor"]},{"id":"21st:cult-ui__youtube-video-player","t":"Youtube video player","d":"An expandable YouTube video player that shows a thumbnail with a play button and opens into a full-screen modal iframe with smooth animations.","k":"component","s":"21st","c":"media/player","g":"media","a":"cult-ui","st":"indexed","pl":"https://cdn.21st.dev/cult-ui/youtube-video-player/default/preview.1784712666590-480cb62a-40e0-4aea-8bc0-f22f76d9598b.png","pc":"cult-ui","tg":["modal","video"]},{"id":"21st:cursosxex__bot-o","t":"Bot o","d":"botão de iniciar","k":"component","s":"21st","c":"other","g":"other","a":"cursosxex","st":"indexed","pl":"https://cdn.21st.dev/cursosxex/bot-o/default/preview.1750562117864.png","pc":"cursosxex"},{"id":"21st:cursosxex__netflix-menbers","t":"Netflix menbers","d":"menbers flix","k":"component","s":"21st","c":"other","g":"other","a":"cursosxex","st":"indexed","pl":"https://cdn.21st.dev/cursosxex/netflix-menbers/default/preview.1750567514838.png","pc":"cursosxex"},{"id":"21st:cybergaz__neon-button","t":"Neon button","d":"a simple and clean neon bordered button with hover effect","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"cybergaz","st":"indexed","pl":"https://cdn.21st.dev/user_2sAqoiqsju5FgfPpyDU67flpOxe/neon-button/default/preview.1738079756934.png","pc":"cybergaz"},{"id":"21st:dailydischq__email-categories","t":"Email categories","d":"Email categories component for building email client app.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"dailydischq","st":"indexed","u":4,"pl":"https://cdn.21st.dev/dailydischq/email-categories/default/preview.1756290960160.png","pc":"dailydischq","tg":["list","sidebar"]},{"id":"21st:daiwiikharihar__3d-profile-selector","t":"3d profile selector","d":"A premium profile selection screen featuring animated 3D tilt cards, a dynamic cursor‑driven spotlight background, and a modern “Add Profile” tile. ","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/3d-profile-selector/default/preview.1766733211591.png","pc":"daiwiikharihar","tg":["card","profile"]},{"id":"21st:daiwiikharihar__aether-ribbon-mesh","t":"Aether ribbon mesh","d":"An interactive HTML5 Canvas hero background featuring superpositioned, noise-modulated ribbon meshes that fluidly react to cursor movement and click shockwaves.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/aether-ribbon-mesh/default/preview.1785776456005-4fcca28a-1207-4559-9611-b389fa9e2388.webp","pc":"daiwiikharihar","tg":["background"]},{"id":"21st:daiwiikharihar__analogue-gauge","t":"Analogue gauge","d":"Physics-driven interactive gauge with press-to-overload.","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/analogue-gauge/default/preview.1767852567942.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__bento-dashboard","t":"Bento dashboard","d":"Neo‑brutalist animated dashboard showcasing system load, weekly traffic, health radar, and interactive metrics using React, Tailwind, and Framer Motion.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/user_332oxzW8MyPod4IDIdKq9rbPYuk/bento-dashboard/default/preview.1786365304156.webp","pc":"daiwiikharihar","tg":["data-visualization","dashboard"]},{"id":"21st:daiwiikharihar__bento-specs-grid","t":"Bento specs grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/bento-specs-grid/default/preview.1766390407336.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__binary-canvas","t":"Binary canvas","d":"A hyper-fast, monochrome 3D binary particle canvas component. Features real-time light/dark theme adaptation, dynamic mouse parallax interaction, and smooth delta-time physics at 6","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/binary-canvas/default/preview.1785554582933-9858887e-c07f-4e9f-8b0d-8c6c6ddec3a0.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__block-text","t":"Block text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/block-text/default/preview.1770616513135.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__blocks-loader","t":"Blocks loader","d":"A 3D-tilted 4×4 grid of glowing blocks that rise in a diagonal wave, with a “Processing Data Blocks” loading label and bouncing dots to indicate background processing.","k":"component","s":"21st","c":"status/loader","g":"status","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/blocks-loader/default/preview.1768582368757.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__brutalist-deck-loader","t":"Brutalist deck loader","d":"A neo-brutalist card stack loader component featuring smooth auto-shuffling Framer Motion animations and an integrated progress bar.","k":"component","s":"21st","c":"status/loader","g":"status","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/brutalist-deck-loader/default/preview.1785778087192-4fa00552-7567-46e6-8a16-e61724004622.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__card-stack-loader","t":"Card stack loader","d":"An animated, neo-brutalist card stack loader component built with Framer Motion and Tailwind CSS.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/card-stack-loader/default/preview.1785731068140-5a547e03-bb39-4839-be8e-5c41b1778d9b.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__cartoon-switch","t":"Cartoon switch","d":"A tactile, heavy-duty mechanical rocker switch with deep drop shadows, edge glare, and snappy Framer Motion animations.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/cartoon-switch/default/preview.1786287118807-4877d5fe-8fe4-48ef-8ee4-6c1024e10677.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__chladni-acoustic-grid","t":"Chladni acoustic grid","d":"Interactive 2D Chladni acoustic standing wave canvas simulating nodal sand patterns and frequency harmonic resonances.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/chladni-acoustic-grid/default/preview.1785648179856-883b30a6-facd-4060-a4d3-3d5d077cfadd.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__cinematic-glow-toggle","t":"Cinematic glow toggle","d":"A hyper-realistic, dark-mode toggle switch featuring spring physics, glossy reflections, and a neon emerald glow state built with Framer Motion.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","u":107,"pl":"https://cdn.21st.dev/daiwiikharihar17147/cinematic-glow-toggle/default/preview.1766512269979.png","pc":"daiwiikharihar","tg":["toggle"]},{"id":"21st:daiwiikharihar__cinematic-list","t":"Cinematic list","d":"Expandable destination list where each row reveals a full-width cinematic background image and travel metadata on hover.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/cinematic-list/default/preview.1767950396709.png","pc":"daiwiikharihar","tg":["image","list"]},{"id":"21st:daiwiikharihar__cinematic-shuffle-stack","t":"Cinematic shuffle stack","d":"A physics-based card deck gallery featuring 3D mouse parallax, glowing accents, and smooth shuffle animations.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/cinematic-shuffle-stack/default/preview.1768410882091.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__cinematic-studio-switch","t":"Cinematic studio switch","d":"A hyper-realistic toggle component featuring volumetric god rays, skeuomorphic metal textures, and spring-based physics.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/cinematic-studio-switch/default/preview.1766740645922.png","pc":"daiwiikharihar","tg":["toggle"]},{"id":"21st:daiwiikharihar__constellation-grid","t":"Constellation grid","d":"Interactive canvas-based kinetic mesh grid with Hooke's Law physical spring-mass physics, cursor velocity shockwaves, spatial radar readouts, and theme detection.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/constellation-grid/default/preview.1785644430238-17100a28-ebea-4957-a95a-5e2e0278180a.webp","pc":"daiwiikharihar","tg":["background","grid"]},{"id":"21st:daiwiikharihar__control-knob","t":"Control knob","d":"Physics-driven rotary knob with snap ticks, energy glow, and digital readout.","k":"component","s":"21st","c":"other","g":"other","a":"daiwiikharihar","st":"rated","pl":"https://cdn.21st.dev/daiwiikharihar17147/control-knob/default/preview.1767390941698.png","pc":"daiwiikharihar","sc":21},{"id":"21st:daiwiikharihar__credit-card-section","t":"Credit card section","d":"Premium 3D credit card section with neural-inspired glow, fast tilt parallax, and cinematic glass reflections for hero layouts.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/credit-card-section/default/preview.1767852126244.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__cube-loader","t":"Cube loader","d":"A 3D cube loader built with React and CSS, featuring a glowing core, breathing translucent faces, and a smooth infinite spin, paired with minimal “Loading” microcopy for futuristic","k":"component","s":"21st","c":"status/loader","g":"status","a":"daiwiikharihar","st":"indexed","u":78,"pl":"https://cdn.21st.dev/daiwiikharihar17147/cube-loader/default/preview.1768582767383.png","pc":"daiwiikharihar","tg":["spinner"]},{"id":"21st:daiwiikharihar__editorial-list","t":"Editorial list","d":"A sophisticated, scroll-triggered list with high-precision spring physics for premium content delivery.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/editorial-list/default/preview.1773581833513.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__elastic-gallery","t":"Elastic gallery","d":"Interactive horizontal image accordion where the active card expands with a dark gradient overlay, title, category chip, and CTA while others collapse.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"daiwiikharihar","st":"indexed","u":2,"pl":"https://cdn.21st.dev/daiwiikharihar17147/elastic-gallery/default/preview.1767949065734.png","pc":"daiwiikharihar","tg":["accordion","chip","cta","gallery"]},{"id":"21st:daiwiikharihar__emoji-hyper-text","t":"Emoji hyper text","d":"Playful hover-activated text component that reveals contextual emojis and subtle scramble animations on selected words.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/emoji-hyper-text/default/preview.1767381336656.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__encryption-decryption-data-tunnel","t":"Encryption decryption data tunnel","d":"A high-fidelity, cyberpunk-inspired communication interface visualizing encrypted data transfer between nodes, featuring cinematic particle animations, terminal-style inputs, and a","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/encryption-decryption-data-tunnel/default/preview.1766510223291.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__flip-disk-matrix","t":"Flip disk matrix","d":"An interactive electromechanical flip-disk matrix component built with React and Tailwind CSS that renders real-time clocks, custom text, wave animations, and noise patterns with 3","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/flip-disk-matrix/default/preview.1785987476687-b636b8d5-91c1-4771-823c-8914be1aaf7b.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__fluid-composer","t":"Fluid composer","d":"A premium, interactive input component featuring Apple-inspired glassmorphism, spring-physics animations, and seamless dark mode support.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/fluid-composer/default/preview.1767855358957.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__fluid-flow-grid","t":"Fluid flow grid","d":"Interactive canvas vector flow field that aligns micro-directional lines along trigonometric wave turbulence and repels smoothly around the cursor.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/fluid-flow-grid/default/preview.1785646282679-231aa755-e50a-48d7-9e8f-34c70dd19264.webp","pc":"daiwiikharihar","tg":["background"]},{"id":"21st:daiwiikharihar__focus-rail","t":"Focus rail","d":"A 3D, drag-and-swipe carousel with depth, autoplay, and animated context panel, designed for showcasing rich visual stories in a single, immersive focus rail.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/focus-rail/default/preview.1768470908406.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__glare-cards","t":"Glare cards","d":"A premium, interactive dashboard component featuring dynamic 3D tilting, cursor-responsive radial glare, and animated data visualizations.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/glare-cards/default/preview.1773589354116.png","pc":"daiwiikharihar","tg":["data-visualization","dashboard"]},{"id":"21st:daiwiikharihar__glitch-text","t":"Glitch text","d":"A high-energy, text reveal featuring RGB splitting, chromatic aberration, and digital distortion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/glitch-text/default/preview.1770139559706.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__glitch-text-animation","t":"Glitch text animation","d":"Interactive cybernetic typography component featuring RGB chromatic shift, character cipher scramble animations, scanline CRT overlays, and focus dimming on hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/glitch-text-animation/default/preview.1785647310417-32eb46b8-cb81-477a-8531-b4a2d1ce8e8d.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__hero-shutter-text","t":"Hero shutter text","d":"An immersive, cinematic text-animation component featuring high-impact \"shutter\" slicing effects, full-screen responsive typography, and seamless light/dark mode adaptation.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","u":114,"pl":"https://cdn.21st.dev/daiwiikharihar17147/hero-shutter-text/default/preview.1770201375306.png","pc":"daiwiikharihar","tg":["grid","text"]},{"id":"21st:daiwiikharihar__holographic-card","t":"Holographic card","d":"A full-screen, immersive hero section featuring a 3D interactive holographic card set against a dynamic, atmospheric background with ambient lighting and grid textures.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/holographic-card/default/preview.1770316522287.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__hover-terminal","t":"Hover terminal","d":"An interactive, animated button that transforms into a CLI snippet for quick copying.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/hover-terminal/default/preview.1786286199774-f57149ae-f7c1-4871-91eb-26c48bbb1102.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__hyper-fluid-text","t":"Hyper fluid text","d":"A high-end, kinetic typography component featuring reactive mouse-tracking, variable weight morphing, and immersive mesh-gradient physics.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/hyper-fluid-text/default/preview.1770352474586.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__hyper-grid","t":"Hyper grid","d":"A physics-driven, infinite 3D grid background featuring interactive parallax, cursor tracking, and cinematic warp acceleration.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/hyper-grid/default/preview.1766734386828.png","pc":"daiwiikharihar","tg":["grid","hero"]},{"id":"21st:daiwiikharihar__hyper-text-with-decryption","t":"Hyper text with decryption","d":"Interactive hypertext bio card where specific keywords decrypt into animated highlights on hover, perfect for personal sites or “about me” sections.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/hyper-text-with-decryption/default/preview.1767383484502.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__industrial-switch","t":"Industrial switch","d":"A heavy-duty, drag-and-toggle industrial breaker switch featuring spring physics, status LEDs, and metallic grip states.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/industrial-switch/default/preview.1785776897484-510e2931-8136-4f3f-b740-e87a6c9d4343.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__iso-fader","t":"Iso fader","d":"Physics-driven iso fader with LED meter and digital readout for smooth, tactile level control.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/iso-fader/default/preview.1767856865093.png","pc":"daiwiikharihar","tg":["slider"]},{"id":"21st:daiwiikharihar__kinetic-dots-loader","t":"Kinetic dots loader","d":"A Simple Kinetic Dots Play Loader Component.","k":"component","s":"21st","c":"status/loader","g":"status","a":"daiwiikharihar","st":"indexed","u":71,"pl":"https://cdn.21st.dev/daiwiikharihar17147/kinetic-dots-loader/default/preview.1769967584872.png","pc":"daiwiikharihar","tg":["spinner"]},{"id":"21st:daiwiikharihar__kinetic-matrix","t":"Kinetic matrix","d":"An interactive spring-mass lattice simulation featuring reactive cursor force fields, traveling synaptic data pulses, gravitational shockwave ripples, and adaptive light/dark theme","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/kinetic-matrix/default/preview.1786988380294-156e9a4d-b6e1-4cb7-876a-668b45409167.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__kinetic-particle-fabric","t":"Kinetic particle fabric","d":"An immersive 3D physics fabric simulation featuring interactive mesh deformations, gravitational shockwave pulses, fluid wave oscillations, and full light/dark mode compatibility.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/kinetic-particle-fabric/default/preview.1786987785230-f05f20b5-a3ba-40a6-847b-55547fd6d86a.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__kinetic-resume","t":"Kinetic resume","d":"A high-contrast, physics-based interactive resume featuring 3D hover effects, spring animations, and a responsive bento-grid layout.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/kinetic-resume/default/preview.1767003980714.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__kinetic-team-hybrid","t":"Kinetic team hybrid","d":"A responsive, Framer Motion–powered team roster featuring a global cursor-follow preview on desktop and tap-to-expand accordion images on mobile for a cinematic talent showcase.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"daiwiikharihar","st":"indexed","u":49,"pl":"https://cdn.21st.dev/daiwiikharihar17147/kinetic-team-hybrid/default/preview.1768156797860.png","pc":"daiwiikharihar","tg":["accordion","cursor","team"]},{"id":"21st:daiwiikharihar__kinetic-text","t":"Kinetic text","d":"An interactive typography component featuring sliced diagonal light layers, horizontal seam accents, 3D character rotation, and re-triggerable Framer Motion physics.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/kinetic-text/default/preview.1785648474606-67d1d708-9ad6-4571-8f87-4a9d12a7c071.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__lattice-background","t":"Lattice background","d":"Dynamic Delaunay-style triangulated mesh field with real-time cursor force-displacement, vertex particle pulsing, and reactive geometric fills.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/lattice-background/default/preview.1785652099800-dc8bfcf6-74c7-40aa-9684-712fa93aa417.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__liquid-grid-text","t":"Liquid grid text","d":"Interactive 3D text displacement component using Framer Motion.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/liquid-grid-text/default/preview.1785731754205-f6187bad-234a-47e3-838a-a48e0891bc0f.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__logo-cloud","t":"Logo cloud","d":"An immersive, interactive tech logo cloud featuring tilt effects, dynamic cursor spotlights, cyber-circuit grid lines, and animated laser sweep highlights.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/logo-cloud/default/preview.1786981834115-2e88b1cf-c152-484c-90b5-e4a21d935619.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__mask-reveal-hero","t":"Mask reveal hero","d":"Hero component is an interactive landing-section built with React, Framer Motion, and a custom mask-based reveal system. It creates a dynamic, spotlight-style hover effect that rev","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/mask-reveal-hero/default/preview.1765436480246.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__matrix-text","t":"Matrix text","d":"Laser-scan text effect featuring staggering vertical clip-path reveal curtains, neon red glow edge lines, and re-triggerable Framer Motion animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/matrix-text/default/preview.1785649070562-be9a1eaf-aec0-4a58-b746-5d312c3becf5.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__neo-brutalist-kinetic-deck","t":"Neo brutalist kinetic deck","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/neo-brutalist-kinetic-deck/default/preview.1767382710849.png","pc":"daiwiikharihar","tg":["menu"]},{"id":"21st:daiwiikharihar__neon-mesh","t":"Neon mesh","d":"Interactive 3D elastic cloth mesh using Verlet physics and perspective projection.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/neon-mesh/default/preview.1785650412621-744d40e0-bcd4-47c8-a0a8-b18323c19d4a.webp","pc":"daiwiikharihar","tg":["background"]},{"id":"21st:daiwiikharihar__next-reveal","t":"Next reveal","d":"A bold, 3D mechanical flip animation with high-contrast theme inversion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","u":36,"pl":"https://cdn.21st.dev/daiwiikharihar17147/next-reveal/default/preview.1770139288241.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__orbital-feature-scanner","t":"Orbital feature scanner","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/orbital-feature-scanner/default/preview.1768412421050.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__pillar-grid","t":"Pillar grid","d":"Interactive 3D isometric hexagonal pillar grid rendered on HTML5 Canvas.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/pillar-grid/default/preview.1785649925297-8b2b5860-d2f0-463b-886c-94a6c453357c.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__plasma-card","t":"Plasma card","d":"An interactive, physics-driven plasma card with fluid blob motion, stress-reactive colors, and smooth glassmorphism for futuristic dashboards.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/plasma-card/default/preview.1767888358678.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__premium-3d-analog-watch","t":"Premium 3d analog watch","d":"A hyper-realistic smartwatch face featuring physics-based 3D tilt, convex glass reflections, and a reactive spotlight container.","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/premium-3d-analog-watch/default/preview.1766738229227.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__pretext-text-animation","t":"Pretext text animation","d":"A demonstration of high-performance canvas typography wrapping.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/pretext-text-animation/default/preview.1775275158120.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__pricing-section","t":"Pricing section","d":"A high-contrast, physics-enabled pricing grid featuring 3D hover tilts, elastic toggles, and staggered entrance animations.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/pricing-section/default/preview.1768444023459.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__profile-card","t":"Profile card","d":"A compact, hover-to-expand profile microcard with elastic motion, glowing avatar, and GitHub link support, designed for clean light/dark interfaces.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"daiwiikharihar","st":"indexed","u":18,"pl":"https://cdn.21st.dev/daiwiikharihar17147/profile-card/default/preview.1768466502565.png","pc":"daiwiikharihar","tg":["profile"]},{"id":"21st:daiwiikharihar__reveal-image-mask","t":"Reveal image mask","d":"An editorial image reveal component that elegantly masks and blooms images into full frame using scroll-driven Framer Motion transitions.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/reveal-image-mask/default/preview.1773658787794.png","pc":"daiwiikharihar","tg":["image","scroll-area"]},{"id":"21st:daiwiikharihar__rolling-list","t":"Rolling list","d":"Animated process list with hover roll text and image preview.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"daiwiikharihar","st":"indexed","u":104,"pl":"https://cdn.21st.dev/daiwiikharihar17147/rolling-list/default/preview.1767938921581.png","pc":"daiwiikharihar","tg":["image","list"]},{"id":"21st:daiwiikharihar__scroll-triggered-video-hero","t":"Scroll triggered video hero","d":"A robust hero section that transitions between video chapters based on viewport position. Uses sticky positioning for performance, with z-index layering for smooth cross-fades. Inc","k":"component","s":"21st","c":"media/player","g":"media","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/scroll-triggered-video-hero/default/preview.1766474801635.png","pc":"daiwiikharihar","tg":["progress","scroll-area","video"]},{"id":"21st:daiwiikharihar__slice-text","t":"Slice text","d":"A movie-trailer style effect where text halves slide in from opposite directions and magnetically merge.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/slice-text/default/preview.1770140060913.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__spatial-product-showcase","t":"Spatial product showcase","d":"A high-fidelity hero section designed for displaying dual-state products or variations. Features fluid layout transitions powered by Framer Motion, reactive background gradients th","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"daiwiikharihar","st":"indexed","u":182,"pl":"https://cdn.21st.dev/daiwiikharihar17147/spatial-product-showcase/default/preview.1766041494809.png","pc":"daiwiikharihar","tg":["hero","progress"]},{"id":"21st:daiwiikharihar__split-slide-text","t":"Split slide text","d":"Kinetic horizontal split-reveal typography component featuring bi-directional sliding halves.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/split-slide-text/default/preview.1785649482873-cd87d453-7395-4b4f-9248-21c87ad434fb.webp","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__svg-transition","t":"Svg transition","d":"Full-screen SVG wipe transitions between product sections with responsive sidebar navigation.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/svg-transition/default/preview.1773467781783.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__swipe-deck","t":"Swipe deck","d":"A high-performance, gesture-driven card stack featuring buttery spring physics, dynamic background theming, and keyboard accessibility.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/swipe-deck/default/preview.1767902691612.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__team-builder","t":"Team builder","d":"Elegant animated team member selector with drag-free layout transitions, search, and progress ring.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"daiwiikharihar","st":"rated","pl":"https://cdn.21st.dev/daiwiikharihar17147/team-builder/default/preview.1769965953565.png","pc":"daiwiikharihar","sc":22},{"id":"21st:daiwiikharihar__technical-rest-api-showcase","t":"Technical rest api showcase","d":"A high-precision, interactive dashboard visualizing CRUD operations with a tactical radar core, scanlines, and fluid Framer Motion animations.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/technical-rest-api-showcase/default/preview.1766511035141.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__text-block-animation","t":"Text block animation","d":"A GSAP-powered React component that reveals text line-by-line with a smooth colored block wipe animation, supporting scroll triggers and customizable timing.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","u":75,"pl":"https://cdn.21st.dev/daiwiikharihar17147/text-block-animation/default/preview.1768639861356.png","pc":"daiwiikharihar","tg":["scroll-area","text"]},{"id":"21st:daiwiikharihar__text-reveal","t":"Text reveal","d":"A cinematic, blur-in text reveal featuring a premium inverted-contrast theme.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","u":43,"pl":"https://cdn.21st.dev/daiwiikharihar17147/text-reveal/default/preview.1770138202558.png","pc":"daiwiikharihar","tg":["text"]},{"id":"21st:daiwiikharihar__toggle-switch","t":"Toggle switch","d":"Draggable mechanical switch with realistic physics, LED status glow, and cross-fade text labels.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/toggle-switch/default/preview.1767390677394.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__tweet-card","t":"Tweet card","d":"A polished tweet-style card built with React, Framer Motion, and Tailwind, featuring interactive actions, hover-based lighting, and support for avatars, rich media, and live-like s","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/tweet-card/default/preview.1768445502739.png","pc":"daiwiikharihar","tg":["stat"]},{"id":"21st:daiwiikharihar__underline-fluid-text","t":"Underline fluid text","d":"A cinematic, kinetic typography engine featuring velocity-aware character leaning, dynamic weight interpolation, and a stable chromatic underline system.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/underline-fluid-text/default/preview.1770354718319.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__vector-pad","t":"Vector pad","d":"Interactive radar pad with smooth-tracking crosshairs, lock states, and real-time coordinates.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/vector-pad/default/preview.1767391760916.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__voxel-matrix","t":"Voxel matrix","d":"Dynamic 3D isometric heightmap grid oscillating with sine wave harmonics and interactive smooth mouse elevation fields.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/voxel-matrix/default/preview.1785651422655-aaa5ab5e-f121-46e1-9ec5-6fff3f840a0c.webp","pc":"daiwiikharihar","tg":["background"]},{"id":"21st:daiwiikharihar__voxel-topography-grid","t":"Voxel topography grid","d":"An interactive, high-performance 3D canvas topography grid featuring dynamic wave math, smooth cursor physics, elevation shading, and zero-allocation frame optimization.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/voxel-topography-grid/default/preview.1785555281449-771301fa-dda0-42f1-a314-bc6636d53134.webp","pc":"daiwiikharihar","tg":["background"]},{"id":"21st:daiwiikharihar__wander-hero","t":"Wander hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar17147/wander-hero/default/preview.1770200676711.png","pc":"daiwiikharihar"},{"id":"21st:daiwiikharihar__wave-text","t":"Wave text","d":"An interactive 3D perspective horizon terrain with tilt parallax, cursor dampening, and continuous sine-wave displacement built on HTML5 Canvas.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"daiwiikharihar","st":"indexed","pl":"https://cdn.21st.dev/daiwiikharihar/wave-text/default/preview.1785650799060-4e00f320-f6b7-41db-b424-5876dc21c7a5.webp","pc":"daiwiikharihar"},{"id":"21st:daniel__designs__3d-ascii-model-viewer","t":"3d ascii model viewer","d":"Here is 3D ASCII Model Viewer component","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"daniel__designs","st":"indexed","u":38,"pl":"https://cdn.21st.dev/daniel__designs/3d-ascii-model-viewer/default/preview.1785468964696-30f97f28-5ca1-44d5-a76a-de92f1acd8d9.png","pc":"daniel__designs"},{"id":"21st:daniel__designs__gradient-shader-card","t":"Gradient shader card","d":"Here is Gradient Shader Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"daniel__designs","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/gradient-shader-card/default/preview.1756199649550.png","pc":"daniel__designs"},{"id":"21st:danielleppy9__de-grade-s-bleu","t":"De grade s bleu","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#FFFFFF, #78B8F9, #5667FF, #4D2FF9). Features: soft blur finish, vig","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"danielleppy9","st":"indexed","pl":"https://cdn.21st.dev/danielleppy9/de-grade-s-bleu/default/preview.1786715718299-eae9bc16-1e06-423e-b69d-fec7429babf8.webp","pc":"danielleppy9"},{"id":"21st:danielleppy9__de-grade-s-bleu-2","t":"De grade s bleu 2","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#FFFFFF, #78B8F9, #5667FF, #4D2FF9). Features: soft blur finish, vig","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"danielleppy9","st":"indexed","pl":"https://cdn.21st.dev/danielleppy9/de-grade-s-bleu/default/preview.1786715727124-e2f4b56b-4ac0-4fad-9f84-e2e362aef210.webp","pc":"danielleppy9"},{"id":"21st:danielpetho__animated-gradient-with-svg","t":"Animated gradient with svg","d":"An animated multi-color gradient background effect with SVG elements.\n\nAnimated gradients can be achieved with many different techniques (shaders, CSS gradients, etc.), this compon","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"danielpetho","st":"indexed","u":840,"pl":"https://cdn.21st.dev/user_danielpetho/animated-gradient-with-svg.png","pc":"danielpetho"},{"id":"21st:danielpetho__basic-number-ticker","t":"Basic number ticker","d":"An animated number counter that smoothly tweens from a starting value to a target, with ref-based control to trigger the count on demand.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"danielpetho","st":"indexed","u":12,"pl":"https://cdn.21st.dev/danielpetho/basic-number-ticker/default/preview.1784409220082-8a1274cd-ed65-4401-a232-9f1302392899.png","pc":"danielpetho","tg":["dashboard","number","stat"]},{"id":"21st:danielpetho__box-carousel","t":"Box carousel","d":"Here is Box Carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/larsen66/box-carousel/default/preview.1751847855108.png","pc":"danielpetho","tg":["carousel","gallery"]},{"id":"21st:danielpetho__breathing-text","t":"Breathing text","d":"A text component that animates the font variation settings of letters in a breathing effect continuously. Works only with variable fonts.\n\nThis component is designed to work exclus","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":14,"pl":"https://cdn.21st.dev/user_danielpetho/breathing-text.png","pc":"danielpetho"},{"id":"21st:danielpetho__elastic-line","t":"Elastic line","d":"$37","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/elastic-line.png","pc":"danielpetho","tg":["cursor"]},{"id":"21st:danielpetho__gooey-filter","t":"Gooey filter","d":"An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"danielpetho","st":"indexed","u":469,"pl":"https://cdn.21st.dev/user_danielpetho/gooey-filter/default/preview.png","pc":"danielpetho","tg":["cursor","image","menu","tabs"]},{"id":"21st:danielpetho__image-trail","t":"Image trail","d":"A component that creates a trail effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","u":260,"pl":"https://cdn.21st.dev/user_danielpetho/image-trail.png","pc":"danielpetho","tg":["cursor","gallery"]},{"id":"21st:danielpetho__letter-swap","t":"Letter swap","d":"A text component that swaps the letters vertically on hover.\n\nThere are two types of animations available for this component:\n1) Forward animation — plays the animation timeline on","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":161,"pl":"https://cdn.21st.dev/user_danielpetho/letter-swap.png","pc":"danielpetho","tg":["text"]},{"id":"21st:danielpetho__marquee-along-svg-path","t":"Marquee along svg path","d":"A marquee that animates its children continuously along any custom SVG path, with hover slowdown, drag, and scroll-velocity controls.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"danielpetho","st":"indexed","u":17,"pl":"https://cdn.21st.dev/danielpetho/marquee-along-svg-path/default/preview.1783680258980.png","pc":"danielpetho","tg":["gallery","marquee"]},{"id":"21st:danielpetho__parallax-floating","t":"Parallax floating","d":"A component that creates a parallax floating effect on cursor/touch movement. Works also with videos, svgs, or any type of html elements.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","u":762,"pl":"https://cdn.21st.dev/user_danielpetho/parallax-floating/default/preview.png","pc":"danielpetho","tg":["cursor","gallery","image"]},{"id":"21st:danielpetho__pixel-trail","t":"Pixel trail","d":"You can customize the individual pixels by passing a pixelClassName prop.\n\n1. The component operates by dividing the container into a grid of pixels and dynamically recoloring them","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","u":381,"pl":"https://cdn.21st.dev/user_danielpetho/pixel-trail.png","pc":"danielpetho","tg":["cursor","grid"]},{"id":"21st:danielpetho__random-letter-swap","t":"Random letter swap","d":"A text component that randomly swaps the letters vertically on hover.\n\nThere are two types of animations available for this component:\n1. Forward animation — plays the animation ti","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"danielpetho","st":"indexed","u":93,"pl":"https://cdn.21st.dev/user_danielpetho/random-letter-swap.png","pc":"danielpetho"},{"id":"21st:danielpetho__scramble-hover","t":"Scramble hover","d":"A text component that scrambles the text on hover.\n\nFor the scrambling effect, you can use either the original characters, or another set of characters specified in the characters ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":53,"pl":"https://cdn.21st.dev/user_danielpetho/scramble-hover.png","pc":"danielpetho"},{"id":"21st:danielpetho__scramble-in","t":"Scramble in","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/scramble-in.png","pc":"danielpetho"},{"id":"21st:danielpetho__scroll-and-swap-text","t":"Scroll and swap text","d":"A text component that swaps the letters vertically on scroll.\n\nThe trick here is similar to the Letter Swap Hover component—duplicate the text, then wrapping the them in a containe","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"danielpetho","st":"indexed","u":57,"pl":"https://cdn.21st.dev/user_danielpetho/scroll-and-swap-text.png","pc":"danielpetho","tg":["scroll-area"]},{"id":"21st:danielpetho__text-along-path","t":"Text along path","d":"An SVG component that animates text flowing along a custom path, with auto-loop or scroll-driven motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":8,"pl":"https://cdn.21st.dev/danielpetho/text-along-path/default/preview.1783583023616.png","pc":"danielpetho","tg":["text"]},{"id":"21st:danielpetho__text-cursor-proximity","t":"Text cursor proximity","d":"A text component that animates the letters based on the cursor proximity","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","u":106,"pl":"https://cdn.21st.dev/user_danielpetho/text-cursor-proximity/default/preview.1737987157933.png","pc":"danielpetho","tg":["cursor"]},{"id":"21st:danielpetho__text-highlighter","t":"Text highlighter","d":"Animated text highlighter that sweeps a marker-style background behind inline text, triggered on hover, scroll into view, or imperatively via ref, with configurable direction and c","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/danielpetho/text-highlighter/default/preview.1783613439407.png","pc":"danielpetho","tg":["scroll-area"]},{"id":"21st:danielpetho__text-rotate","t":"Text rotate","d":"A text component that switches the rendered text from a list.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":1493,"pl":"https://cdn.21st.dev/user_danielpetho/text-rotate/default/preview.png","pc":"danielpetho","tg":["image","text"]},{"id":"21st:danielpetho__typewriter","t":"Typewriter","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/typewriter.png","pc":"danielpetho","tg":["cursor"]},{"id":"21st:danielpetho__underline-animation","t":"Underline animation","d":"A component that animates a text underline.\n\nThese underline animations work differently from typical CSS underline animations. Instead of animating the CSS text-decoration-line: u","k":"component","s":"21st","c":"actions/link","g":"actions","a":"danielpetho","st":"indexed","u":84,"pl":"https://cdn.21st.dev/user_danielpetho/underline-animation.png","pc":"danielpetho","tg":["link"]},{"id":"21st:danielpetho__underline-to-background","t":"Underline to background","d":"A text component that animates a text underline into a text background.\n\nThe component creates a separate div element positioned absolutely below the text (instead of the regular u","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":25,"pl":"https://cdn.21st.dev/user_danielpetho/underline-to-background.png","pc":"danielpetho","tg":["text"]},{"id":"21st:danielpetho__use-debounced-dimensions","t":"Use debounced dimensions","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-debounced-dimensions.png","pc":"danielpetho","tg":["hook"]},{"id":"21st:danielpetho__use-elastic-line-events","t":"Use elastic line events","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-elastic-line-events.png","pc":"danielpetho","tg":["hook"]},{"id":"21st:danielpetho__use-mouse-position","t":"Use mouse position","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-mouse-position.png","pc":"danielpetho","tg":["cursor","hook"]},{"id":"21st:danielpetho__use-mouse-position-ref","t":"Use mouse position ref","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-mouse-position-ref.png","pc":"danielpetho","tg":["cursor","hook"]},{"id":"21st:danielpetho__use-mouse-vector","t":"Use mouse vector","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-mouse-vector.png","pc":"danielpetho","tg":["data-visualization","cursor","hook"]},{"id":"21st:danielpetho__use-screen-size","t":"Use screen size","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/use-screen-size.png","pc":"danielpetho","tg":["hook"]},{"id":"21st:danielpetho__variable-font-and-cursor","t":"Variable font and cursor","d":"A text component that animates the font variation settings based on the cursor position. Works only with variable fonts.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/variable-font-and-cursor.png","pc":"danielpetho","tg":["cursor"]},{"id":"21st:danielpetho__variable-font-cursor-proximity","t":"Variable font cursor proximity","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"danielpetho","st":"indexed","pl":"https://cdn.21st.dev/user_danielpetho/variable-font-cursor-proximity.png","pc":"danielpetho"},{"id":"21st:danielpetho__variable-font-hover-by-letter","t":"Variable font hover by letter","d":"A text component that animates the font variation settings of letters. Works only with variable fonts.\n\nThis component is designed to work exclusively with variable fonts. Variable","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":13,"pl":"https://cdn.21st.dev/user_danielpetho/variable-font-hover-by-letter.png","pc":"danielpetho"},{"id":"21st:danielpetho__variable-font-hover-by-random-letter","t":"Variable font hover by random letter","d":"A text component that animates the font variation settings of letters in a random order. Works only with variable fonts.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":48,"pl":"https://cdn.21st.dev/user_danielpetho/variable-font-hover-by-random-letter.png","pc":"danielpetho"},{"id":"21st:danielpetho__vertical-cut-reveal","t":"Vertical cut reveal","d":"A text component that reveals the text with a cut reveal effect.\n\nFirst, the text gets split into smaller chunks based on the splitBy prop:\n\t•\twords: Splits into individual words (","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"danielpetho","st":"indexed","u":1141,"pl":"https://cdn.21st.dev/user_danielpetho/vertical-cut-reveal.png","pc":"danielpetho","tg":["text"]},{"id":"21st:daniyalsherafat1__waves-shader","t":"Waves shader","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 4-color palette (#0D1B0F, #3E8E41, #C7F464, #FFFDE1). Features: cursor-reactive (spot","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"daniyalsherafat1","st":"indexed","pl":"https://cdn.21st.dev/daniyalsherafat1/waves-shader/default/preview.1786277750030-12bf6168-26b6-4109-bc36-9f4ba904c6f0.webp","pc":"daniyalsherafat1"},{"id":"21st:danverr__111111111","t":"111111111","d":"111111111111111111111111111","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/111111111/default/preview.1748510844904.png","pc":"danverr"},{"id":"21st:danverr__123123123","t":"123123123","d":"12312313123","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/123123123/default/preview.1748465251795.png","pc":"danverr"},{"id":"21st:danverr__222222222222","t":"222222222222","d":"222222222222222222222222222222222222","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/222222222222/default/preview.1748523974389.png","pc":"danverr"},{"id":"21st:danverr__dddddd","t":"Dddddd","d":"dddddddddddddddddd","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/dddddd/default/preview.1780659829948.png","pc":"danverr"},{"id":"21st:danverr__ddoaoaoaaooao","t":"Ddoaoaoaaooao","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/ddoaoaoaaooao/default/preview.1780305029217.png","pc":"danverr"},{"id":"21st:danverr__demodemo","t":"Demodemo","d":"demodemodemodemodemodemodemodemo","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/demodemo/default/preview.1747923045162.png","pc":"danverr"},{"id":"21st:danverr__hi-serafim","t":"Hi serafim","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/hi-serafim/default/preview.1748421409687.png","pc":"danverr"},{"id":"21st:danverr__hi-serafim-1","t":"Hi serafim 1","d":"hi-serafimhi-serafimhi-serafimhi-serafim","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/hi-serafim-1/default/preview.1748424023928.png","pc":"danverr"},{"id":"21st:danverr__hiiiiiiiiiiiiiii","t":"Hiiiiiiiiiiiiiii","d":"hiiiiiiiiiiiiiiihiiiiiiiiiiiiiiihiiiiiiiiiiiiiiihiiiiiiiiiiiiiii","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/hiiiiiiiiiiiiiii/default/preview.1748441936581.png","pc":"danverr"},{"id":"21st:danverr__relative-time-card-2","t":"Relative time card 2","d":"relative-time-card-2relative-time-card-2relative-time-card-2","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/relative-time-card-2/default/preview.1747855292669.png","pc":"danverr"},{"id":"21st:danverr__sukabtn-2","t":"Sukabtn 2","d":"sukabtn-2sukabtn-2","k":"component","s":"21st","c":"actions/button","g":"actions","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/sukabtn-2/default/preview.1746873942645.png","pc":"danverr"},{"id":"21st:danverr__test","t":"Test","d":"testtesttesttest","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/user_2uxHsbi0sPG5LkwQ5O7ix7QcnVc/test/test-btn/preview.png","pc":"danverr"},{"id":"21st:danverr__themetheme","t":"Themetheme","d":"themethemethemetheme","k":"component","s":"21st","c":"other","g":"other","a":"danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/themetheme/default/preview.1748895452469.png","pc":"danverr"},{"id":"21st:danverr_fce71477__12311111","t":"12311111","d":"123111111231111112311111","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/12311111/default/preview.1749201308091.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__12312312312","t":"12312312312","d":"131231231231232","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/12312312312/default/preview.1749760381634.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__123132222222","t":"123132222222","d":"22222222asdafasf","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/123132222222/default/preview.1749842572993.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__211242422424","t":"211242422424","d":"211242422424211242422424211242422424","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/211242422424/default/preview.1779391171764.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__afadfsdfdsfs","t":"Afadfsdfdsfs","d":"afadfsdfdsfsafadfsdfdsfs","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/afadfsdfdsfs/default/preview.1760716988345.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__asfafasfdddd","t":"Asfafasfdddd","d":"asfafasfddddasfafasfddddasfafasfdddd","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/asfafasfdddd/default/preview.1753341497470.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__avatar-test","t":"Avatar test","d":"avatar testavatar testavatar test","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/avatar-test/default/preview.1755256749582.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__codex-prod-public-0525154219","t":"Codex prod public 0525154219","d":"Production E2E public dummy card 0525154219","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/codex-prod-public-0525154219","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__codex-prod-public-0525155122","t":"Codex prod public 0525155122","d":"Production E2E public dummy card 0525155122","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/codex-prod-public-0525155122","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__codex-prod-unlisted-0525154219","t":"Codex prod unlisted 0525154219","d":"Production E2E unlisted dummy card 0525154219","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/codex-prod-unlisted-0525154219","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__codex-prod-unlisted-0525155122","t":"Codex prod unlisted 0525155122","d":"Production E2E unlisted dummy card 0525155122","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/codex-prod-unlisted-0525155122","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__e2e-registry-deps-20260608-1612","t":"E2e registry deps 20260608 1612","d":"E2E component with multiple local support files and nested registry dependencies.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/e2e-registry-deps-20260608-1612","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__e2e-registry-deps-final-20260608-171911","t":"E2e registry deps final 20260608 171911","d":"Manual E2E fixture for final registry dependency publish and install flow.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/e2e-registry-deps-final-20260608-171911","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-cli-e2e-20260604-local","t":"Expo cli e2e 20260604 local","d":"Expo CLI publishing smoke test with nested support files.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-cli-e2e-20260604-local","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-cli-e2e-20260604140604","t":"Expo cli e2e 20260604140604","d":"Expo CLI publish end to end smoke component.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-cli-e2e-20260604140604","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-cli-lucide-e2e-20260604170912","t":"Expo cli lucide e2e 20260604170912","d":"Expo CLI publish end to end rendered smoke component.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-cli-lucide-e2e-20260604170912","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-e2e-dep-20260608-1730","t":"Expo e2e dep 20260608 1730","d":"Expo E2E parent dependency that references a nested registry dependency.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-e2e-dep-20260608-1730","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-e2e-leaf-20260608-1730","t":"Expo e2e leaf 20260608 1730","d":"Expo E2E leaf dependency for recursive registry dependency testing.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-e2e-leaf-20260608-1730","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-e2e-root-20260608-1730","t":"Expo e2e root 20260608 1730","d":"Expo E2E root component for recursive registry dependencies and nested support files.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-e2e-root-20260608-1730","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-nativewind-e2e-20260605164218","t":"Expo nativewind e2e 20260605164218","d":"E2E Expo registry test with NativeWind, nested imports, and registryDependencies.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-nativewind-e2e-20260605164218","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-nativewind-e2e-20260605164401","t":"Expo nativewind e2e 20260605164401","d":"E2E Expo registry test with NativeWind, nested imports, and registryDependencies.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-nativewind-e2e-20260605164401","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__expo-simple-graph-e2e-20260604-001","t":"Expo simple graph e2e 20260604 001","d":"Simple Expo component with nested local utilities and npm dependencies.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/expo-simple-graph-e2e-20260604-001","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__final-test","t":"Final test","d":"final testfinal testfinal testfinal test","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/final-test/default/preview.1749202257560.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__http-shadcn-button-smoke-20260608-2053","t":"Http shadcn button smoke 20260608 2053","d":"Smoke test component that depends on shadcn button via a direct HTTP registry URL.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/http-shadcn-button-smoke-20260608-2053","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__nested-support-smoke-20260604-002","t":"Nested support smoke 20260604 002","d":"Smoke test component with nested local support files, assets, CSS imports, and multiple demos.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/nested-support-smoke-20260604-002","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__pgfpdgpdgpd","t":"Pgfpdgpdgpd","d":"pgfpdgpdgpdvv","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/pgfpdgpdgpd/default/preview.1752523170305.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__react-cli-smoke-20260604-copy","t":"React cli smoke 20260604 copy","d":"React CLI publishing smoke test with local support files.","k":"component","s":"21st","c":"actions/copy-button","g":"actions","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/react-cli-smoke-20260604-copy","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__release-007-smoke-20260608-204005","t":"Release 007 smoke 20260608 204005","d":"Smoke test for the published registry CLI release 0.0.7.","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://21st.dev/@danverr_fce71477/components/release-007-smoke-20260608-204005","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__test-test","t":"Test test","d":"test-testtest-testtest-testtest-test","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/test-test/default/preview.1759831756295.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__teststetaete","t":"Teststetaete","d":"teststetaeteteststetaeteteststetaete","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/teststetaete/default/preview.1779391003834.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__ttttestttttest","t":"Ttttestttttest","d":"ttttestttttest","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/ttttestttttest/default/preview.1752521908305.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__xin-chao-mf","t":"Xin chao mf","d":"xin chao mfxin chao mfxin chao mf","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/xin-chao-mf/default/preview.1749913670599.png","pc":"danverr_fce71477"},{"id":"21st:danverr_fce71477__yoooo-chek-my-drippp","t":"Yoooo chek my drippp","d":"yoooo chek my dripppyoooo chek my drippp","k":"component","s":"21st","c":"other","g":"other","a":"danverr_fce71477","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/yoooo-chek-my-drippp/default/preview.1749843653410.png","pc":"danverr_fce71477"},{"id":"21st:daschinmoyy21__ascii-flower","t":"Ascii flower","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"daschinmoyy21","st":"indexed","pl":"https://cdn.21st.dev/daschinmoyy21/ascii-flower/default/preview.1783956077489.webp","pc":"daschinmoyy21","tg":["video"]},{"id":"21st:datafobik__datafobik","t":"Datafobik","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/gallery","g":"media","a":"datafobik","st":"indexed","pl":"https://cdn.21st.dev/datafobik/datafobik/default/preview.1786695627385-e5490974-8f48-4af3-947e-3d21d205e9b0.webp","pc":"datafobik"},{"id":"21st:davekatague__valley-of-the-mind","t":"Valley of the mind","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#10002B, #7F00FF, #33AEB9, #0920F4). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"davekatague","st":"indexed","u":6,"pl":"https://cdn.21st.dev/davekatague/valley-of-the-mind/default/preview.1784110569389.webp","pc":"davekatague"},{"id":"21st:david-greenfieldlp__d60-hero","t":"D60 hero","d":"Animated (wave) ASCII art in the Contour style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, card","k":"component","s":"21st","c":"media/player","g":"media","a":"david-greenfieldlp","st":"indexed","pl":"https://cdn.21st.dev/david-greenfieldlp/d60-hero/default/preview.1784143291696-cf169a08-10e7-48ce-9643-e8115dcb7eeb.png","pc":"david-greenfieldlp","tg":["video"]},{"id":"21st:david.james1187__slider-block-cards","t":"Slider block cards","d":"cards that slide around","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"david.james1187","st":"indexed","pl":"https://cdn.21st.dev/david.james1187/slider-block-cards/default/preview.1772641963341.png","pc":"david.james1187"},{"id":"21st:daysepoma__hover-reveal-button","t":"Hover reveal button","d":"An interactive button with a circular reveal effect that follows your cursor. A white circle grows from the mouse entry point and fills the entire button on hover, with smooth entr","k":"component","s":"21st","c":"actions/button","g":"actions","a":"daysepoma","st":"indexed","pl":"https://cdn.21st.dev/daysepoma/hover-reveal-button/default/preview.1774503189662.png","pc":"daysepoma"},{"id":"21st:dazzy4747__swipe-button","t":"Swipe button","d":"Pill-shaped swipe-effect buttons with inset shadow and ring — primary filled and secondary tinted variants","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dazzy4747","st":"indexed","pl":"https://cdn.21st.dev/dazzy4747/swipe-button/default/preview.1785929549720-d488269d-cdcb-4c8b-bd85-7cbacd89bfbe.png","pc":"dazzy4747"},{"id":"21st:ddoemonn__accordion","t":"Accordion","d":"An accessible, spring-animated accordion with single or multiple open panels, keyboard navigation, and auto-measured content height.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ddoemonn","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ddoemonn/accordion/default/preview.1785472426900-c597a8dc-43a8-4b6c-a3c0-b3b6170cd61d.png","pc":"ddoemonn","tg":["accordion","faq"]},{"id":"21st:ddoemonn__collapsible-banner","t":"Collapsible banner","d":"A dismissible notice banner that folds its details away with a spring animation, with a controllable open/folded/dismissed state and an accessible expand/collapse toggle.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/educlopez/collapsible-banner/default/preview.1785469175564-4fa81b34-3ed8-4692-98fd-171355de7aa0.png","pc":"ddoemonn","tg":["alert","notification"]},{"id":"21st:ddoemonn__command-palette","t":"Command palette","d":"A keyboard-driven command palette with fuzzy search, arrow-key navigation, and an animated overlay for triggering app actions.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/command-palette/default/preview.1785470520515-5d235e21-9cd6-4a68-b0bf-675176102f96.png","pc":"ddoemonn","tg":["search"]},{"id":"21st:ddoemonn__context-menu","t":"Context menu","d":"A right-click context menu with keyboard navigation, typeahead, long-press support on touch, and smart edge-aware positioning that renders through a portal.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/context-menu/default/preview.1785479668442-474aee79-0f11-453f-9a5c-9c600678579e.png","pc":"ddoemonn","tg":["dropdown","menu"]},{"id":"21st:ddoemonn__copy-button","t":"Copy button","d":"A copy-to-clipboard button that animates between idle, copied, and error states with an SVG check draw, crossfading labels, and a clipboard fallback and reduced-motion support.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/copy-button/default/preview.1785472410317-fb65290a-2ca5-427e-86e5-0e7c1f9f6034.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__drawer","t":"Drawer","d":"A drag-to-dismiss side panel that slides in from the left or right with a scrim, scroll lock, and focus trap, driven by a headless useDrawer hook.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/drawer/default/preview.1785479636837-1e1f8c4a-4a9d-4d22-bd34-f1e3913346c7.png","pc":"ddoemonn","tg":["profile"]},{"id":"21st:ddoemonn__dropdown","t":"Dropdown","d":"An accessible listbox dropdown with a highlight that travels between options, full keyboard navigation, and typeahead search.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/dropdown/default/preview.1785471430810-52926262-cf5a-441d-9935-b24f10b650cd.png","pc":"ddoemonn","tg":["dropdown","menu","select"]},{"id":"21st:ddoemonn__filter-grid","t":"Filter grid","d":"An accessible, animated grid that filters its items with segmented radio chips, showing live per-filter counts and smoothly reflowing cells as the selection changes.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ddoemonn","st":"rated","u":6,"pl":"https://cdn.21st.dev/ddoemonn/filter-grid/default/preview.1785471377811-3ab3fc5a-c89d-4811-96ab-cd4188d2b142.png","pc":"ddoemonn","tg":["gallery","grid","radio-group"],"sc":22},{"id":"21st:ddoemonn__floating-label","t":"Floating label","d":"A text input whose label animates up into a reserved slot above the field instead of disappearing, with focus/invalid states, an optional hint line and a character counter.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ddoemonn","st":"indexed","u":2,"pl":"https://cdn.21st.dev/ddoemonn/floating-label/default/preview.1785479747681-9d22987b-9b8e-4ce1-8374-081846266c42.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__hide-on-scroll","t":"Hide on scroll","d":"A scrollable container with a top bar that slides away as you scroll down and reveals itself when you scroll back up, with a matching useHideOnScroll hook.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/hide-on-scroll/default/preview.1785472458826-23e7b78c-31eb-413c-86c5-c50c9a1f7e39.png","pc":"ddoemonn","tg":["hook","scroll-area"]},{"id":"21st:ddoemonn__hold-to-confirm","t":"Hold to confirm","d":"A press-and-hold button that sweeps a progress fill and only fires its confirm callback after the full hold completes, guarding destructive actions against accidental clicks.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/hold-to-confirm/default/preview.1785471412570-1efc41c2-9b2a-4edc-856d-b5074f78105e.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__icon-morph","t":"Icon morph","d":"An animated icon button that smoothly morphs between two SVG states like menu/close, play/pause, plus/minus or check/close on click.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/icon-morph/default/preview.1785472443010-2dd02c48-dc6a-41f6-b5c1-c84917e9cc82.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__inline-validation","t":"Inline validation","d":"A controlled text input that validates as you type, crossfading between a hint, an inline error message, and valid/invalid status icons.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/inline-validation/default/preview.1785479731528-c1f32e76-cb44-441f-b9b3-75e10e93f2ce.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__like-burst","t":"Like burst","d":"An animated like button with a heart-burst spark effect and optimistic count updates for social feeds.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/like-burst/default/preview.1785472490316-474031ac-da09-4e1b-a2fb-64b975a5a676.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__live-activity","t":"Live activity","d":"An iOS-style live activity pod that shows a single ongoing task with running, success and error states, morphing between a compact glyph and an expanded card with progress and a re","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/live-activity/default/preview.1785472474914-f9e622c0-62fa-44b0-ba2c-f137f4c3e81d.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__load-more","t":"Load more","d":"A load-more button with automatic infinite-scroll via IntersectionObserver, animated idle/loading/error/end states, and a bounded auto-load limit before it hands control back to th","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/load-more/default/preview.1785473730125-0215e98c-7316-47c2-b82e-aade0ae931ef.png","pc":"ddoemonn","tg":["pagination","scroll-area"]},{"id":"21st:ddoemonn__loading-button","t":"Loading button","d":"A button that morphs its label through pending, success, and error states without layout shift when running an async action.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/loading-button/default/preview.1785473659648-c6c9a8c5-4400-481e-b1de-6c9ca8a41ad5.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__logo-marquee","t":"Logo marquee","d":"An accessible, physics-based infinite logo marquee that pauses on hover and focus, respects reduced motion, and scrolls a strip of brand logos or client names.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"ddoemonn","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ddoemonn/logo-marquee/default/preview.1785473680743-53ea315c-724d-4778-ae47-4d234620ea3b.png","pc":"ddoemonn","tg":["carousel","marquee"]},{"id":"21st:ddoemonn__long-press","t":"Long press","d":"A press-and-hold confirmation button with animated fill progress and a matching useLongPress hook for building your own hold-to-confirm interactions.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/long-press/default/preview.1785473696813-955dbd13-270f-47d7-9be3-f1b07e2204f7.png","pc":"ddoemonn","tg":["hook"]},{"id":"21st:ddoemonn__modal","t":"Modal","d":"An accessible, animated modal dialog with focus trapping, scroll locking, backdrop and escape dismissal, and title/description/footer slots.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ddoemonn","st":"rated","pl":"https://cdn.21st.dev/ddoemonn/modal/default/preview.1785473713256-76706388-2c78-4797-9693-8ee73bbffa6f.png","pc":"ddoemonn","tg":["modal"],"sc":20},{"id":"21st:ddoemonn__new-items-pill","t":"New items pill","d":"A floating pill that appears when new items arrive in a scrollable feed and jumps you back to the newest items on click, with an accompanying scroll hook.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ddoemonn","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ddoemonn/new-items-pill/default/preview.1785474405521-9e8e1042-4ce6-4be8-a2aa-5b781214426e.png","pc":"ddoemonn","tg":["notification","scroll-area"]},{"id":"21st:ddoemonn__otp-input","t":"Otp input","d":"A one-time-code input with per-character cells, animated character crossfade, paste and keyboard navigation, and error/success validation states.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/otp-input/default/preview.1785473777969-dc36ac48-44b8-4fd6-bc72-4f24cb9d80cd.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__pagination","t":"Pagination","d":"Accessible pagination navigation with a sliding animated thumb and rolling page numbers for paging through search results and long lists.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ddoemonn","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ddoemonn/pagination/default/preview.1785473746642-9f87d594-9da6-471e-a32b-8c7ab59fcd02.png","pc":"ddoemonn","tg":["navigation-menu","pagination"]},{"id":"21st:ddoemonn__password-strength","t":"Password strength","d":"An animated password strength meter with segmented bars, a live requirements checklist, and common-pattern detection for signup and reset forms.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ddoemonn","st":"rated","u":2,"pl":"https://cdn.21st.dev/ddoemonn/password-strength/default/preview.1785473762054-e047da03-12ac-4a4b-919f-d509448c8f77.png","pc":"ddoemonn","sc":20},{"id":"21st:ddoemonn__poll-results","t":"Poll results","d":"An interactive poll where clicking an option reveals animated result bars, vote percentages, and the winning choice.","k":"component","s":"21st","c":"other","g":"other","a":"ddoemonn","st":"rated","pl":"https://cdn.21st.dev/ddoemonn/poll-results/default/preview.1785473794348-73d90cd2-dc65-4fb3-866b-69d93a291cbd.png","pc":"ddoemonn","sc":21},{"id":"21st:ddoemonn__popover","t":"Popover","d":"An accessible popover that anchors a floating panel to a trigger, auto-flips and clamps to stay in view, with a pointing arrow and spring-based open/close animation.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/popover/default/preview.1785474437206-26cbcc28-eccc-4cc2-a1f1-977033a8a2aa.png","pc":"ddoemonn","tg":["popover","profile"]},{"id":"21st:ddoemonn__presence-avatars","t":"Presence avatars","d":"Animated overlapping avatar stack that shows who is currently present, with an overflow count, image fallbacks to initials, and polite screen-reader announcements.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ddoemonn","st":"rated","pl":"https://cdn.21st.dev/ddoemonn/presence-avatars/default/preview.1785473811295-3f79571f-c3ee-4355-a559-6c3ba8d14daf.png","pc":"ddoemonn","sc":20},{"id":"21st:ddoemonn__press-depth","t":"Press depth","d":"A tactile button that presses down with depth and tilts toward the pointer when clicked, giving physical, spring-animated feedback.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/press-depth/default/preview.1785474420234-3f0cdb49-38d4-40d8-9ddb-f492a777e2f0.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__progress-bar","t":"Progress bar","d":"An accessible linear progress bar with animated fill, indeterminate shimmer, and pending/complete state labels.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/progress-bar/default/preview.1785474579070-73d143e8-a76a-49a1-b9a2-48e2be85a757.png","pc":"ddoemonn","tg":["upload-download"]},{"id":"21st:ddoemonn__reading-progress","t":"Reading progress","d":"A scroll-driven reading progress bar with an estimated time-left readout and a completion checkmark, plus a useReadingProgress hook for tracking how far through an article the read","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/reading-progress/default/preview.1785478170678-06353005-1fea-4e51-a57a-b38197e144a6.png","pc":"ddoemonn","tg":["hook","scroll-area"]},{"id":"21st:ddoemonn__reorder-list","t":"Reorder list","d":"A vertical drag-and-drop list for reordering items, with full keyboard support (grab, arrow-move, drop, cancel) and screen-reader announcements.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/reorder-list/default/preview.1785474594541-2be81477-4b23-4f60-9662-fe451dd2beb6.png","pc":"ddoemonn","tg":["list"]},{"id":"21st:ddoemonn__ripple","t":"Ripple","d":"A button that emits a Material-style press ripple from the exact pointer or keyboard point, with a headless useRipple hook handling pointer capture, release timing and reduced-moti","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/ripple/default/preview.1785477916466-5b854430-feaa-4688-9338-394489854037.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__scroll-spy","t":"Scroll spy","d":"A scroll-spy navigation bar that tracks the section currently in view and highlights it with an animated sliding pill, with smooth click-to-scroll for both the window and a scrolla","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ddoemonn","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ddoemonn/scroll-spy/default/preview.1785478191758-a747541d-db2f-415d-a7aa-d50b04435a61.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__segmented-control","t":"Segmented control","d":"An accessible segmented control (radio group) with an animated sliding thumb, keyboard arrow navigation, and controlled or uncontrolled selection for switching between a small set ","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/segmented-control/default/preview.1785478154819-6960b7a5-006b-41f9-a7a1-5a8f1ccd61af.png","pc":"ddoemonn","tg":["radio-group","tabs","toggle"]},{"id":"21st:ddoemonn__show-more","t":"Show more","d":"An expandable text block that clamps to a set number of lines and springs open to reveal the rest, animating height without reflowing the text.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/show-more/default/preview.1785478250195-29949437-d513-4759-b66d-6ad7900c7148.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__skeleton-swap","t":"Skeleton swap","d":"A loading placeholder that crossfades skeleton bars into real content with zero layout shift, holding a reserved box until data is ready.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/skeleton-swap/default/preview.1785478266268-5a71861a-24b0-4a0c-861f-9ff2b318c397.png","pc":"ddoemonn","tg":["profile"]},{"id":"21st:ddoemonn__slider-detents","t":"Slider detents","d":"A controlled range slider with magnetic detents that pull the thumb to notable values, with a live formatted readout, keyboard support and optional haptics.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/slider-detents/default/preview.1785478232608-1c69c442-1264-4762-8c65-d401d79a59ba.png","pc":"ddoemonn","tg":["slider"]},{"id":"21st:ddoemonn__snap-carousel","t":"Snap carousel","d":"A draggable, physics-based snap carousel with keyboard navigation, momentum flicking, peek edges, and slide indicators, driven by a headless hook.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ddoemonn","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ddoemonn/snap-carousel/default/preview.1785479652778-6aa85c14-df9e-433e-9684-0fca3a8cdd28.png","pc":"ddoemonn","tg":["carousel","gallery","slider"]},{"id":"21st:ddoemonn__sortable-table","t":"Sortable table","d":"A generic, accessible data table whose rows animate into place when you sort a column, with an optional follow toggle that keeps one row marked across reorders.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/sortable-table/default/preview.1785479684243-b3e02aca-b88b-460b-add0-e09caac72f6f.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__sticky-header","t":"Sticky header","d":"A scroll-condensing sticky header that shrinks its title from a large expanded state into a compact bar as its scroll container is scrolled, with optional subtitle, leading slot an","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/sticky-header/default/preview.1785479699896-d9b628f5-a66a-4e73-a8db-58f6814b76b6.png","pc":"ddoemonn","tg":["scroll-area"]},{"id":"21st:ddoemonn__streaming-text","t":"Streaming text","d":"A token-by-token streaming text effect with a blinking caret, skip and replay controls, and reduced-motion support for AI chat responses.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/streaming-text/default/preview.1785479715936-297fb2cf-6c0d-42cc-b193-f407ead26109.png","pc":"ddoemonn","tg":["ai-chat"]},{"id":"21st:ddoemonn__swipe-deck","t":"Swipe deck","d":"A Tinder-style swipeable card deck with drag-to-decide, keyboard controls, undo, and a generic render-prop API for any item type.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/swipe-deck/default/preview.1785479780440-6e0b0619-0033-46d6-97fe-af4b1cc845f3.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__tabs","t":"Tabs","d":"An accessible tabs component with an animated sliding indicator, keyboard navigation, and directional panel transitions.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/tabs/default/preview.1785481008418-b96e1b9f-8a02-45e4-923b-f2c6f809ce39.png","pc":"ddoemonn","tg":["navigation-menu","tabs"]},{"id":"21st:ddoemonn__tag-input","t":"Tag input","d":"An accessible tag/chip input field where users type and press Enter to add tags, with duplicate detection, a max limit, keyboard navigation and animated chips.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/tag-input/default/preview.1785479764299-2da49874-9232-428a-bdd4-6ddc6b4a0c62.png","pc":"ddoemonn","tg":["chip"]},{"id":"21st:ddoemonn__task-steps","t":"Task steps","d":"An animated vertical checklist that shows a multi-step task's progress with pending, active, done and error states.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ddoemonn","st":"rated","pl":"https://cdn.21st.dev/ddoemonn/task-steps/default/preview.1785479795785-9e22bd56-a514-4f19-8471-c9e073e850c3.png","pc":"ddoemonn","tg":["progress"],"sc":22},{"id":"21st:ddoemonn__text-reveal","t":"Text reveal","d":"Animated text that reveals word by word or character by character with a staggered blur-and-slide effect, optionally triggered when it scrolls into view.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ddoemonn","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ddoemonn/text-reveal/default/preview.1785481023756-e6c469f4-58e5-4499-9ab9-e866e896f589.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__tooltip-group","t":"Tooltip group","d":"A shared-delay tooltip group where the first tooltip waits before opening and every neighbour after it appears instantly, with a single label that morphs and glides between trigger","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/tooltip-group/default/preview.1785481040512-2fe35d72-a275-445c-b949-36550b9d611d.png","pc":"ddoemonn","tg":["tooltip"]},{"id":"21st:ddoemonn__tree-view","t":"Tree view","d":"An accessible file-explorer tree view with full keyboard navigation, animated expand/collapse disclosure, and single selection.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/tree-view/default/preview.1785481055807-f2f3bb07-b492-4704-bbf8-977bed950490.png","pc":"ddoemonn","tg":["file-tree","navigation-menu"]},{"id":"21st:ddoemonn__typing-indicator","t":"Typing indicator","d":"Animated chat typing indicator with a bouncing three-dot bubble and a presence hook that tracks who is typing across one or many users, with a send hand-off and accessible live-reg","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/typing-indicator/default/preview.1785481162781-a9281095-c93e-4702-bd69-20cc00a38973.png","pc":"ddoemonn"},{"id":"21st:ddoemonn__value-flash","t":"Value flash","d":"An animated number readout that flashes green or red and rolls its digits up or down whenever the value changes, ideal for live metrics, prices, and counters.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ddoemonn","st":"indexed","pl":"https://cdn.21st.dev/ddoemonn/value-flash/default/preview.1785481071117-a3034cd7-3822-4e6e-8242-49768af6ee9e.png","pc":"ddoemonn","tg":["pricing-section"]},{"id":"21st:ddoemonn__wizard-steps","t":"Wizard steps","d":"An animated multi-step wizard with a clickable progress rail, direction-aware panel transitions, keyboard navigation, and a completion state.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ddoemonn","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ddoemonn/wizard-steps/default/preview.1785481100595-bd34f56b-c117-4c3f-850c-17f9fe106632.png","pc":"ddoemonn","tg":["onboarding","progress","steps"]},{"id":"21st:decodewithdeepak__modem-animated-footer","t":"Modem animated footer","d":"A modern, fully customizable footer component with animated background text, social links, navigation menu, and a floating brand icon. Features smooth hover animations, responsive ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"decodewithdeepak","st":"indexed","u":413,"pl":"https://cdn.21st.dev/user_33Y5Z8o3kkg6SzIE2g7Cq1kwtjP/modem-animated-footer/default/preview.1786566987869.png","pc":"decodewithdeepak","tg":["footer","link"]},{"id":"21st:deematalat__hairvana","t":"Hairvana","d":"hair style app using ai","k":"component","s":"21st","c":"other","g":"other","a":"deematalat","st":"indexed","pl":"https://cdn.21st.dev/deematalat/hairvana/default/preview.1750595494572.png","pc":"deematalat"},{"id":"21st:deematalat__hairvana-userapp","t":"Hairvana userapp","d":"hair style mobile app","k":"component","s":"21st","c":"other","g":"other","a":"deematalat","st":"indexed","pl":"https://cdn.21st.dev/deematalat/hairvana-userapp/default/preview.1751025277354.png","pc":"deematalat"},{"id":"21st:deepaksslibra__fluid-menu","t":"Fluid menu","d":"A fluid circular menu that elegantly expands to reveal navigation items with smooth icon transitions","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"deepaksslibra","st":"indexed","u":219,"pl":"https://cdn.21st.dev/user_2sDb5H9ikhAUFFuh293ac9byRra/fluid-menu/default/preview.1738079580488.png","pc":"deepaksslibra","tg":["menu","navigation-menu"]},{"id":"21st:deepaksslibra__liquid-toggle","t":"Liquid toggle","d":"A smooth, fluid toggle switch with gooey animation effects","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"deepaksslibra","st":"indexed","pl":"https://cdn.21st.dev/user_2sDb5H9ikhAUFFuh293ac9byRra/liquid-toggle/default/preview.1738339885097.png","pc":"deepaksslibra"},{"id":"21st:deepaksslibra__liquid-toggle--liquid-toggle","t":"Liquid toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"deepaksslibra","st":"indexed","pl":"https://cdn.21st.dev/user_2sDb5H9ikhAUFFuh293ac9byRra/liquid-toggle/default/preview.1738339885097.png","pc":"deepaksslibra"},{"id":"21st:deleted_reactbits__animated-blur-text","t":"Animated blur text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/rabden/animated-blur-text/default/preview.1746848472824.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__animated-content","t":"Animated content","d":"A minimalistic animation content","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-content/default/preview.1747777032335.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__animated-list","t":"Animated list","d":"A Shadcn like animated list component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-list/default/preview.1747787667267.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__aurora","t":"Aurora","d":"Great animated gradient fully customizable","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/aurora/default/preview.1747800484620.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__balatro","t":"Balatro","d":"background beautiful animated using shaders","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/balatro/default/preview.1747800671379.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__ballpit","t":"Ballpit","d":"Realistic interactive animation of balls","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/ballpit/default/preview.1747803168779.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__beams","t":"Beams","d":"here is beams animated shadered background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beams/default/preview.1749291038497.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__blob-cursor","t":"Blob cursor","d":"Blob cursor animation","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/blob-cursor/default/preview.1747787314795.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__bounce-cards","t":"Bounce cards","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/bounce-cards.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__bubble-menu","t":"Bubble menu","d":"Here is Bubble Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bubble-menu/default/preview.1755968023018.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__card-nav","t":"Card nav","d":"Here is Card Nav component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card-nav/default/preview.1755968340018.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__card-swap","t":"Card swap","d":"here is card swap component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card-swap/default/preview.1749290616934.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__carousel","t":"Carousel","d":"A simple minimalistic carousel slider with 3d effect","k":"component","s":"21st","c":"media/carousel","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/carousel/default/preview.1747793875826.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__chroma-grid","t":"Chroma grid","d":"Here is chroma-grid hover card component","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/chroma-grid/default/preview.1749290218368.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__circular-gallery","t":"Circular gallery","d":"Here is image circular gallery collage","k":"component","s":"21st","c":"media/gallery","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/circular-gallery/default/preview.1747792442419.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__circular-text","t":"Circular text","d":"a simple circular text animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/circular-text/default/preview.1747756002971.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__click-spark","t":"Click spark","d":"Clik spark animation","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/click-spark/default/preview.1747778195519.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__count-up","t":"Count up","d":"Minimalistic count up component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/count-up/default/preview.1747776235654.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__counter","t":"Counter","d":"a simple counter ","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/counter/default/preview.1747798289458.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__crosshair","t":"Crosshair","d":"Crosshair animation","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/crosshair/default/preview.1747781200149.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__curved-loop","t":"Curved loop","d":"Here is Curved Loop component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/curved-loop/default/preview.1752961255382.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__dark-veil","t":"Dark veil","d":"Here is Dark Veil component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dark-veil/default/preview.1753014358405.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__decrypted-text","t":"Decrypted text","d":"Here is simple decrypted text animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/decrypted-text/default/preview.1747767348950.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__dock","t":"Dock","d":"Beautiful dock component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dock/default/preview.1747789633562.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__dome-gallery","t":"Dome gallery","d":"Here is Dome Gallery component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dome-gallery/default/preview.1756506028711.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__elastic-slider","t":"Elastic slider","d":"A simple minimalistic slider elastic","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/elastic-slider/default/preview.1747797792665.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__electric-border","t":"Electric border","d":"Here is Electric Border component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/electric-border/default/preview.1755967750396.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__fadein","t":"Fadein","d":"A simple Fade In animation","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/fadein/default/preview.1747777376931.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__falling-interactive-text","t":"Falling interactive text","d":"Falling Interactive Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_2utOfsxgEGCcWxhbGMgIwLf7NK1/falling-interactive-text/falling-text/preview.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__faulty-terminal","t":"Faulty terminal","d":"Here is Faulty Terminal component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/faulty-terminal/default/preview.1756141456164.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__flowing-menu","t":"Flowing menu","d":"Flowing menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/flowing-menu/default/preview.1747798719199.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__flying-posters","t":"Flying posters","d":"Beautiful animation of flying posters","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/flying-posters/default/preview.1747793520880.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__folder","t":"Folder","d":"A good looking animated folder component","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/folder/default/preview.1747788774164.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__follow-cursor","t":"Follow cursor","d":"Cursor follow with gif/image animation","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/follow-cursor/default/preview.1747785481315.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__fuzzy-text","t":"Fuzzy text","d":"fuzzy text, 404, Not found ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_2utOfsxgEGCcWxhbGMgIwLf7NK1/fuzzy-text/default/preview.1746717996666.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__galaxy","t":"Galaxy","d":"Here is Galaxy component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/galaxy/default/preview.1753014558678.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__glass-icons","t":"Glass icons","d":"Glass icons minimalistic","k":"component","s":"21st","c":"media/icon","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/glass-icons/default/preview.1747794045560.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__glitch-text","t":"Glitch text","d":"Here are glitch text animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/glitch-text/default/preview.1747773117726.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__gooey-nav","t":"Gooey nav","d":"Minimalistic smooth navigation menu","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/gooey-nav/default/preview.1747792118239.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__gradient-blinds","t":"Gradient blinds","d":"Here is Gradient Blinds component","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/gradient-blinds/default/preview.1756141794987.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__gradient-text","t":"Gradient text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/gradient-text.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__gradual-blur","t":"Gradual blur","d":"Here is Gradual Blur component","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/gradual-blur/default/preview.1756364871144.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__grid-distortion","t":"Grid distortion","d":"Grid distortion effect","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/grid-distortion/default/preview.1747802644145.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__grid-motion","t":"Grid motion","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/grid-motion.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__holographic-card","t":"Holographic card","d":"here is holographic reusable card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/holographic-card/default/preview.1749290731375.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__hover-glare-card","t":"Hover glare card","d":"here is hover glare card effect ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hover-glare-card/default/preview.1749289989396.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__hyperspeed","t":"Hyperspeed","d":"Hyperspeed futuristic interactive background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hyperspeed/default/preview.1747802564254.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__image-trail","t":"Image trail","d":"some variations of image trail animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/image-trail/default/preview.1747782244805.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__infinite-menu","t":"Infinite menu","d":"a great infinite menu with img and text","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/infinite-menu/default/preview.1747798911128.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__interactive-3d-cube-grid","t":"Interactive 3d cube grid","d":"Here is interactive 3d cube grid background component","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interactive-3d-cube-grid/default/preview.1750165766706.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__interactive-grid","t":"Interactive grid","d":"here is interactive dot grid animation","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interactive-grid/default/preview.1749291391457.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__interactive-scrambled-text","t":"Interactive scrambled text","d":"Here is interactive-scrambled-text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interactive-scrambled-text/default/preview.1749289689075.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__interactive-text-pressure","t":"Interactive text pressure","d":"Interactive Text Pressure","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_2utOfsxgEGCcWxhbGMgIwLf7NK1/interactive-text-pressure/text-pressure/preview.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__iridescence","t":"Iridescence","d":"Magic background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/iridescence/default/preview.1747802197292.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__letter-glitch","t":"Letter glitch","d":"Letter glitch animated background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/letter-glitch/default/preview.1747803960309.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__lightning","t":"Lightning","d":"Incredible lightning background fully customizable","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/lightning/default/preview.1747800806334.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__liquid-chrome","t":"Liquid chrome","d":"Beautiuful interactive animation of liquid","k":"component","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/liquid-chrome/default/preview.1747803345651.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__magic-bento","t":"Magic bento","d":"Here is Magic Bento component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/magic-bento/default/preview.1752963145522.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__magnet-hover","t":"Magnet hover","d":"A minimalistic magnetic hover animation ","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/magnet-hover/default/preview.1747778572865.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__magnet-lines","t":"Magnet lines","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/magnet-lines.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__masonry","t":"Masonry","d":"Beautiful image masonry collage","k":"component","s":"21st","c":"media/gallery","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/masonry/default/preview.1747792022969.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__meta-balls","t":"Meta balls","d":"Meta balls component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/meta-balls/default/preview.1747784575566.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__noise","t":"Noise","k":"component","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/noise.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__orb","t":"Orb","d":"Fully customizable orb","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/orb/default/preview.1747802908836.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__particles","t":"Particles","d":"a simple interactive particles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/particles/default/preview.1747804164568.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__pixel-card","t":"Pixel card","d":"a futuristic minimalistic animated Pixel Card ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pixel-card/default/preview.1747792685596.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__pixel-trail","t":"Pixel trail","d":"a simple pixel trail animation","k":"component","s":"21st","c":"navigation/sidebar","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pixel-trail/default/preview.1747779590480.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__pixel-transition","t":"Pixel transition","d":"a beautiful pixel-transition","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pixel-transition/default/preview.1747777653340.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__prism","t":"Prism","d":"Here is Prism component","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/prism/default/preview.1755894172645.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__ribbons","t":"Ribbons","d":"Ribbons cursor animation effect","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/ribbons/default/preview.1747783020101.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__ripple-grid","t":"Ripple grid","d":"Here is Ripple Grid component","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/ripple-grid/default/preview.1753014774440.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__rolling-gallery","t":"Rolling gallery","d":"A simple rolling gallery animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/rolling-gallery/default/preview.1747799838077.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__rotating-text","t":"Rotating text","d":"Rotating Text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_2utOfsxgEGCcWxhbGMgIwLf7NK1/rotating-text/rotating-text/preview.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__scroll-float","t":"Scroll float","d":"Scrolling float animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scroll-float/default/preview.1747768705819.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__scroll-reveal","t":"Scroll reveal","d":"Scroll Reveal animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scroll-reveal/default/preview.1747769727885.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__scroll-stack","t":"Scroll stack","d":"Here is Scroll Stack component","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scroll-stack/default/preview.1752962600164.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__shapeblur","t":"Shapeblur","d":"minimalistic blur shape fully customizable","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shapeblur/default/preview.1747802007512.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__shiny-text","t":"Shiny text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/shiny-text.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__silk-background","t":"Silk background","d":"Here is animated silk background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/silk-background/default/preview.1749291126777.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__splash-cursor","t":"Splash cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/splash-cursor.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__split-text","t":"Split text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/split-text/default/preview.1747752682712.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__spotlight-card","t":"Spotlight card","d":"The shiny futuristic spotlight card ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/spotlight-card/default/preview.1747793043187.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__squares-background","t":"Squares background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/squares-background.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__star-border","t":"Star border","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/star-border.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__stepper","t":"Stepper","d":"A interactive futuristic stepper","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/stepper/default/preview.1747799538731.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__target-cursor","t":"Target cursor","d":"Here is Target Cursor component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/target-cursor/default/preview.1752961621985.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__text-cursor","t":"Text cursor","d":"a simple  and interesting text cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-cursor/default/preview.1747760591227.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__threads","t":"Threads","d":"futuristic minimalistic thread wave background animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/threads/default/preview.1747801867345.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__tilted-card","t":"Tilted card","d":"A 3d tilted card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tilted-card/default/preview.1747788444429.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__tilted-scroll","t":"Tilted scroll","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/tilted-scroll.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__true-focus","t":"True focus","k":"component","s":"21st","c":"other","g":"other","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/true-focus.png","pc":"deleted_reactbits"},{"id":"21st:deleted_reactbits__waves-background","t":"Waves background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"deleted_reactbits","st":"indexed","pl":"https://cdn.21st.dev/user_DavidHDev/waves-background.png","pc":"deleted_reactbits"},{"id":"21st:deltacomponents__admonition","t":"Admonition","d":"Here is Admonition component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"deltacomponents","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/admonition/default/preview.1756838970222.png","pc":"deltacomponents","tg":["alert","icon","notification"]},{"id":"21st:deltacomponents__auth-form","t":"Auth form","d":"Authentication card with Google and GitHub SSO buttons, email magic-link sign-in, and last-used provider badges for login and signup flows.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"deltacomponents","st":"indexed","u":4,"pl":"https://cdn.21st.dev/deltacomponents/auth-form/default/preview.1784470251349-b4dc7bbf-e60d-4434-91da-1c45448e45d2.png","pc":"deltacomponents","tg":["sign-in"]},{"id":"21st:deltacomponents__basic-dropdown","t":"Basic dropdown","d":"Here is Basic Dropdown component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"deltacomponents","st":"indexed","u":87,"pl":"https://cdn.21st.dev/larsen66/basic-dropdown/default/preview.1756839411952.png","pc":"deltacomponents","tg":["dropdown","menu","profile"]},{"id":"21st:deltacomponents__modal-drop","t":"Modal drop","d":"Here is Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"deltacomponents","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/modal-drop/default/preview.1756840409389.png","pc":"deltacomponents","tg":["notification","modal"]},{"id":"21st:deltacomponents__scramble-text","t":"Scramble text","d":"Here is Scramble text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"deltacomponents","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/scramble-text/default/preview.1756874184389.png","pc":"deltacomponents","tg":["list","scroll-area","text"]},{"id":"21st:dennysdionigi__apple-liquid-glass-switcher","t":"Apple liquid glass switcher","d":"Here is Apple Liquid glass switcher  component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"dennysdionigi","st":"indexed","u":219,"pl":"https://cdn.21st.dev/larsen66/apple-liquid-glass-switcher/default/preview.1753799046895.png","pc":"dennysdionigi","tg":["toggle"]},{"id":"21st:design.tulsibhaiya__accordian-snackbar","t":"Accordian snackbar","d":"This component is a high-precision notification utility designed for modern productivity environments. It transitions from a standard alert into a temporal scheduling interface wit","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"design.tulsibhaiya","st":"rated","pl":"https://cdn.21st.dev/design.tulsibhaiya/accordian-snackbar/default/preview.1772895957849.png","pc":"design.tulsibhaiya","sc":23},{"id":"21st:design.tulsibhaiya__button","t":"Button","d":"This is a high-contrast, AI-native button designed to manage user expectations during data processing or generative cycles. It replaces traditional spinning loaders with a mathemat","k":"component","s":"21st","c":"actions/button","g":"actions","a":"design.tulsibhaiya","st":"indexed","pl":"https://cdn.21st.dev/design.tulsibhaiya/button/default/preview.1772893694514.png","pc":"design.tulsibhaiya"},{"id":"21st:design.tulsibhaiya__glassmorphic-dock-folder","t":"Glassmorphic dock folder","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"design.tulsibhaiya","st":"indexed","pl":"https://cdn.21st.dev/design.tulsibhaiya/glassmorphic-dock-folder/default/preview.1772894567835.png","pc":"design.tulsibhaiya"},{"id":"21st:designali-in__abstract1shapes","t":"Abstract1shapes","d":"Abstract1Shapes","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/abstract1shapes/default/preview.1775285829673.png","pc":"designali-in"},{"id":"21st:designali-in__abstract2shapes","t":"Abstract2shapes","d":"Abstract2Shapes","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/abstract2shapes/default/preview.1775285939251.png","pc":"designali-in"},{"id":"21st:designali-in__abstract3shapes","t":"Abstract3shapes","d":"Abstract3Shapes","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/abstract3shapes/default/preview.1775287214292.png","pc":"designali-in"},{"id":"21st:designali-in__accordion-01-1","t":"Accordion 01 1","d":"Accordion with animation hover","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","u":20,"pl":"https://cdn.21st.dev/designali-in/accordion-01-1/default/preview.1760032297722.png","pc":"designali-in","tg":["accordion","list"]},{"id":"21st:designali-in__accordion-02","t":"Accordion 02","d":"Accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/accordion-02/default/preview.png","pc":"designali-in"},{"id":"21st:designali-in__accordion-02-1","t":"Accordion 02 1","d":"accordion with animation plus minus","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","u":18,"pl":"https://cdn.21st.dev/designali-in/accordion-02-1/default/preview.1760032486545.png","pc":"designali-in","tg":["accordion","faq"]},{"id":"21st:designali-in__accordion-03","t":"Accordion 03","d":"Accordion with images and button\n","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","u":77,"pl":"https://cdn.21st.dev/designali-in/accordion-03/default/preview.1760068669191.png","pc":"designali-in","tg":["accordion"]},{"id":"21st:designali-in__accordion-04","t":"Accordion 04","d":"Accordion with bacgkround cross","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","u":20,"pl":"https://cdn.21st.dev/designali-in/accordion-04/default/preview.1760070246877.png","pc":"designali-in","tg":["accordion","faq"]},{"id":"21st:designali-in__accordion-05","t":"Accordion 05","d":"Accordion with hiding title","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"designali-in","st":"indexed","u":181,"pl":"https://cdn.21st.dev/designali-in/accordion-05/default/preview.1760070434560.png","pc":"designali-in","tg":["accordion","list"]},{"id":"21st:designali-in__ai-actions","t":"Ai actions","d":"A group of interactive buttons with optional tooltips, commonly used for message-level interactions like copy, like, share, etc.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/ai-actions/default/preview.1756918230237.png","pc":"designali-in","tg":["ai-chat","button","tooltip"]},{"id":"21st:designali-in__ai-gen","t":"Ai gen","d":"AI Image Gen","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"designali-in","st":"indexed","u":203,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/ai-gen/default/preview.1746773134930.png","pc":"designali-in","tg":["ai-chat","gallery","tabs"]},{"id":"21st:designali-in__animated-canvas","t":"Animated canvas","d":"The component will use a canvas to render the animation with configurable parameters.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/animated-canvas/default/preview.1757519546917.png","pc":"designali-in"},{"id":"21st:designali-in__animated-dots","t":"Animated dots","d":"Animated Dots with props","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","u":21,"pl":"https://cdn.21st.dev/designali-in/animated-dots/default/preview.1785371021937-92a94ffd-55b5-463c-a66d-53d716fd38bf.png","pc":"designali-in"},{"id":"21st:designali-in__animated-grid","t":"Animated grid","d":"The component features a customizable grid with color interpolation and staggered border-radius animations. You can adjust the grid size, cell dimensions, and animation timing thro","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/animated-grid/default/preview.1756052348015.png","pc":"designali-in","tg":["grid"]},{"id":"21st:designali-in__animated-leaves","t":"Animated leaves","d":"The component creates that beautiful expanding leaf animation effect with the blur filters and color mixing","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/animated-leaves/default/preview.1755236205909.png","pc":"designali-in"},{"id":"21st:designali-in__animated-spinner","t":"Animated spinner","d":"The component includes all the CSS animations and custom properties inline, featuring a dynamic conic gradient that rotates and changes, along with an animated line width effect. Y","k":"component","s":"21st","c":"status/loader","g":"status","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/animated-spinner/default/preview.1755236725870.png","pc":"designali-in","tg":["spinner"]},{"id":"21st:designali-in__animated-text","t":"Animated text","d":"The component splits the text into individual spans, applies staggered animation delays from the center outward, and includes the font weight animation. You can customize the font ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","u":17,"pl":"https://cdn.21st.dev/designali-in/animated-text/default/preview.1755485412954.png","pc":"designali-in","tg":["text"]},{"id":"21st:designali-in__animated-tiles","t":"Animated tiles","d":"Animated Tiles with image prop","k":"component","s":"21st","c":"media/gallery","g":"media","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/animated-tiles/default/preview.1760716852835.png","pc":"designali-in","tg":["gallery","image"]},{"id":"21st:designali-in__award","t":"Award","d":"Award Component that stamp, award, certificate, badge, id-card and more.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"designali-in","st":"indexed","u":149,"pl":"https://cdn.21st.dev/designali-in/award/default/preview.1751171882038.png","pc":"designali-in","tg":["badge"]},{"id":"21st:designali-in__bento","t":"Bento","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/bento/default/preview.1771435667892.png","pc":"designali-in"},{"id":"21st:designali-in__bento-grid","t":"Bento grid","d":"Bento Grid, Bento","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"designali-in","st":"indexed","u":114,"pl":"https://cdn.21st.dev/designali-in/bento-grid/default/preview.1753425494399.png","pc":"designali-in","tg":["features"]},{"id":"21st:designali-in__bezier-animation","t":"Bezier animation","d":"Bezier Animation with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/bezier-animation/default/preview.1761118682780.png","pc":"designali-in"},{"id":"21st:designali-in__blobs","t":"Blobs","d":"The colorful blobs should be rotating smoothly with their beautiful gradient colors and screen blend mode effects.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"designali-in","st":"indexed","u":81,"pl":"https://cdn.21st.dev/designali-in/blobs/default/preview.1755355849814.png","pc":"designali-in"},{"id":"21st:designali-in__block-game","t":"Block game","d":"Block Game","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"designali-in","st":"indexed","u":29,"pl":"https://cdn.21st.dev/designali-in/block-game/default/preview.1748355952963.png","pc":"designali-in","tg":["dashboard","stat"]},{"id":"21st:designali-in__book-a-demo-1","t":"Book a demo 1","d":"Book A Demo 1 with form  and content","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"designali-in","st":"indexed","u":2,"pl":"https://cdn.21st.dev/designali-in/book-a-demo-1/default/preview.1760500971466.png","pc":"designali-in","tg":["cta","form"]},{"id":"21st:designali-in__book-a-demo-2","t":"Book a demo 2","d":"Book A Demo 2 with form section","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"designali-in","st":"indexed","u":2,"pl":"https://cdn.21st.dev/designali-in/book-a-demo-2/default/preview.1760501605269.png","pc":"designali-in","tg":["dropdown","hero","form","input"]},{"id":"21st:designali-in__book-a-demo-3","t":"Book a demo 3","d":"Book A Demo 3 with logos and form","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"designali-in","st":"indexed","u":2,"pl":"https://cdn.21st.dev/designali-in/book-a-demo-3/default/preview.1760502060488.png","pc":"designali-in","tg":["faq","form"]},{"id":"21st:designali-in__book-a-demo-4","t":"Book a demo 4","d":"Book A Demo 4 with logos and form","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"designali-in","st":"indexed","u":6,"pl":"https://cdn.21st.dev/designali-in/book-a-demo-4/default/preview.1760502616478.png","pc":"designali-in","tg":["checkbox","form","radio-group","testimonials"]},{"id":"21st:designali-in__border-glow","t":"Border glow","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/border-glow/default/preview.1771435922564.png","pc":"designali-in"},{"id":"21st:designali-in__bouncing-balls","t":"Bouncing balls","d":"Bouncing Balls with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/bouncing-balls/default/preview.1785470972076-bef690b0-8068-40c3-977b-b1dc68484c4c.png","pc":"designali-in"},{"id":"21st:designali-in__bouncing-text","t":"Bouncing text","d":"Bouncing Text with props","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/bouncing-text/default/preview.1760850759034.png","pc":"designali-in"},{"id":"21st:designali-in__browser","t":"Browser","d":"The Browser component lets you showcase website screenshots or any other content within a realistic browser-style frame.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/browser/default/preview.1755965199022.png","pc":"designali-in"},{"id":"21st:designali-in__bubble-animation","t":"Bubble animation","d":"The component includes props for dimensions, bubble count, colors, and styling, while maintaining the original blur effect and animated gradient background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/bubble-animation/default/preview.1756050725512.png","pc":"designali-in"},{"id":"21st:designali-in__button-border","t":"Button border","d":"Button Border with animation","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/button-border/default/preview.1760102023611.png","pc":"designali-in","tg":["border","button"]},{"id":"21st:designali-in__button-rotate","t":"Button rotate","d":"Button Rotate","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/button-rotate/default/preview.1750836686057.png","pc":"designali-in"},{"id":"21st:designali-in__button-rotate-1","t":"Button rotate 1","d":"Button Rotate with gradient background and border","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/button-rotate-1/default/preview.1760101829523.png","pc":"designali-in","tg":["border"]},{"id":"21st:designali-in__button-soft-glow","t":"Button soft glow","d":"Button with Soft Glow shadows","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/button-soft-glow/default/preview.1760098311622.png","pc":"designali-in"},{"id":"21st:designali-in__calendar","t":"Calendar","d":"Book a call","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/calendar/calendar/preview.png","pc":"designali-in","tg":["calendar","date-picker"]},{"id":"21st:designali-in__call-to-action-01","t":"Call to action 01","d":"Call to Action with logos and section","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"designali-in","st":"indexed","u":25,"pl":"https://cdn.21st.dev/designali-in/call-to-action-01/default/preview.1760505399837.png","pc":"designali-in","tg":["cta"]},{"id":"21st:designali-in__canvas","t":"Canvas","d":"Canvas effect","k":"component","s":"21st","c":"media/carousel","g":"media","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/canvas/default/preview.png","pc":"designali-in"},{"id":"21st:designali-in__canvas-effect","t":"Canvas effect","d":"Canvas Effect Chat Box","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"designali-in","st":"indexed","u":96,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/canvas-effect.png","pc":"designali-in","tg":["ai-chat"]},{"id":"21st:designali-in__carousel","t":"Carousel","d":"Carousel with auto animation","k":"component","s":"21st","c":"media/carousel","g":"media","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/carousel/default/preview.1761812284206.png","pc":"designali-in"},{"id":"21st:designali-in__certificate","t":"Certificate","d":"Certificate, Award, Badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"designali-in","st":"indexed","u":20,"pl":"https://cdn.21st.dev/designali-in/certificate/default/preview.1751347309991.png","pc":"designali-in","tg":["badge"]},{"id":"21st:designali-in__clock","t":"Clock","d":"Clock watch time with current location","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/clock/default/preview.1754149863495.png","pc":"designali-in","tg":["date-picker"]},{"id":"21st:designali-in__color-picker","t":"Color picker","d":"The component features a full-screen canvas with a rainbow gradient overlay, displays the hex color value that follows your mouse cursor, and shows a notification when you click to","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/color-picker/default/preview.1755489592163.png","pc":"designali-in","tg":["cursor"]},{"id":"21st:designali-in__compare-1","t":"Compare 1","d":"Compare with tabs and comparision","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"designali-in","st":"indexed","u":6,"pl":"https://cdn.21st.dev/designali-in/compare-1/default/preview.1760502921166.png","pc":"designali-in","tg":["comparison","table","tabs"]},{"id":"21st:designali-in__compare-2","t":"Compare 2","d":"Compare with different company","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"designali-in","st":"indexed","u":2,"pl":"https://cdn.21st.dev/designali-in/compare-2/default/preview.1760503050132.png","pc":"designali-in","tg":["comparison","pricing-section","table"]},{"id":"21st:designali-in__compare-table","t":"Compare table","d":"A simple pricing section","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/compare-table/default/preview.1756979237100.png","pc":"designali-in","tg":["comparison","pricing-section","table"]},{"id":"21st:designali-in__cosmos-spectrum","t":"Cosmos spectrum","d":"The page will load with all the interactive features including the color theme switcher, GSAP animations,  and the beautiful animated spectrum visualization.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"designali-in","st":"indexed","u":69,"pl":"https://cdn.21st.dev/designali-in/cosmos-spectrum/default/preview.1755194891352.png","pc":"designali-in"},{"id":"21st:designali-in__custom-cursor","t":"Custom cursor","d":"The component accepts props for cursor type selection, colors, and sizing, with all styles implemented inline as requested. It includes all six cursor variations: arrow-pointer, bi","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/custom-cursor/default/preview.1785364513568-441c46a1-1039-4556-94d8-8e3c8ecd9992.png","pc":"designali-in"},{"id":"21st:designali-in__dino-game","t":"Dino game","d":"Dino Game 404 not fount page to play","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/dino-game/default/preview.1760167015516.png","pc":"designali-in"},{"id":"21st:designali-in__dock-tabs","t":"Dock tabs","d":"The component includes 10 sample app icons with different colors and uses Lucide React icons. You can easily customize the dock items, colors, and animation parameters to match you","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"designali-in","st":"indexed","u":110,"pl":"https://cdn.21st.dev/designali-in/dock-tabs/default/preview.1754664780174.png","pc":"designali-in","tg":["dock","navigation-menu"]},{"id":"21st:designali-in__dot-pattern","t":"Dot pattern","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/dot-pattern.jpg","pc":"designali-in","tg":["background","grid"]},{"id":"21st:designali-in__dot-sphere","t":"Dot sphere","d":"Dot Sphere with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/dot-sphere/default/preview.1785307360716-a4c4315c-bff1-4792-8c39-bbd6a871d353.png","pc":"designali-in"},{"id":"21st:designali-in__download-01","t":"Download 01","d":"Download plugins and software with logos","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/download-01/default/preview.1760505871771.png","pc":"designali-in","tg":["features","search"]},{"id":"21st:designali-in__download-02","t":"Download 02","d":"Download software with logo and button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/download-02/default/preview.1760506277641.png","pc":"designali-in","tg":["button"]},{"id":"21st:designali-in__feature-01","t":"Feature 01","d":"Features with cards and image","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/feature-01/default/preview.1760506528627.png","pc":"designali-in","tg":["features","hero","profile","timeline"]},{"id":"21st:designali-in__financial-score-cards","t":"Financial score cards","d":"This is a beautiful financial score card component with animated half-circle progress indicators, strength badges, and staggered entrance animations.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"designali-in","st":"indexed","u":60,"pl":"https://cdn.21st.dev/designali-in/financial-score-cards/default/preview.1755246464382.png","pc":"designali-in","tg":["badge","progress"]},{"id":"21st:designali-in__finger-scan-button","t":"Finger scan button","d":"Finger Scan Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/finger-scan-button/default/preview.1754668082095.png","pc":"designali-in"},{"id":"21st:designali-in__fire-ball","t":"Fire ball","d":"Fire ball mouse pointer action with props","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/fire-ball/default/preview.1785470720588-857b98b5-9694-4805-b562-682cdf986f00.png","pc":"designali-in"},{"id":"21st:designali-in__floating-particles","t":"Floating particles","d":"The component creates floating particles that move upward with physics simulation, automatic camera rotation, and dual-color particle systems.","k":"component","s":"21st","c":"status/loader","g":"status","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/floating-particles/default/preview.1785304296920-635d56a7-7e83-455b-b275-f71123f92f61.png","pc":"designali-in"},{"id":"21st:designali-in__fluid-animation","t":"Fluid animation","d":"it's a WebGL-based fluid simulation with interactive mouse/touch controls and morphing effects.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/fluid-animation/default/preview.1757311285221.png","pc":"designali-in"},{"id":"21st:designali-in__fluid-dynamics","t":"Fluid dynamics","d":"You can adjust all the physics parameters, visual settings, and interaction modes without modifying the component code.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/fluid-dynamics/default/preview.1785304890005-7bc12acb-4c11-40f7-afbe-c44d03c46d3b.png","pc":"designali-in"},{"id":"21st:designali-in__fluid-particle","t":"Fluid particle","d":"A fluid particle background made with SVGs, fully customizable using Tailwind CSS.","k":"component","s":"21st","c":"status/loader","g":"status","a":"designali-in","st":"indexed","u":48,"pl":"https://cdn.21st.dev/designali-in/fluid-particle/default/preview.1785431873629-24e2c721-4639-4a47-b1ad-5acbc4fbdcfb.png","pc":"designali-in"},{"id":"21st:designali-in__gallery","t":"Gallery","d":"Gallery","k":"component","s":"21st","c":"media/gallery","g":"media","a":"designali-in","st":"indexed","u":266,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/gallery/gallery/preview.png","pc":"designali-in","tg":["gallery"]},{"id":"21st:designali-in__gauge-1","t":"Gauge 1","d":"Gauge, Speed, Meter","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/gauge-1/default/preview.1751651719142.png","pc":"designali-in","tg":["progress"]},{"id":"21st:designali-in__git-hub-calendar","t":"Git hub calendar","d":"GitHub-style calendar component for Next.js that displays a contribution-like heatmap.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"designali-in","st":"rated","u":130,"pl":"https://cdn.21st.dev/designali-in/git-hub-calendar/default/preview.1757754851844.png","pc":"designali-in","tg":["calendar","data-visualization","grid"],"sc":19},{"id":"21st:designali-in__glowing-shadow","t":"Glowing shadow","d":"The component features a rotating, color-cycling glow that responds beautifully to hover interactions with enhanced blur, opacity, and scale effects.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"designali-in","st":"indexed","u":371,"pl":"https://cdn.21st.dev/designali-in/glowing-shadow/default/preview.1755534839304.png","pc":"designali-in","tg":["border"]},{"id":"21st:designali-in__glsl-hills","t":"Glsl hills","d":"The component will use inline styles and accept props for customization.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/glsl-hills/default/preview.1758117823123.png","pc":"designali-in","tg":["hero"]},{"id":"21st:designali-in__gooey-marquee","t":"Gooey marquee","d":"The component uses two text layers - a blurred background layer with high contrast filtering and linear gradients for the gooey effect, and a clean foreground layer for readability","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"designali-in","st":"indexed","u":103,"pl":"https://cdn.21st.dev/designali-in/gooey-marquee/default/preview.1755409447487.png","pc":"designali-in","tg":["marquee"]},{"id":"21st:designali-in__graaadeints","t":"Graaadeints","d":"The Beauty of Gradients","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"designali-in","st":"indexed","u":57,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/graaadeints/default/preview.1737977826414.png","pc":"designali-in","tg":["slider"]},{"id":"21st:designali-in__gradient-blur","t":"Gradient blur","d":"Gradient Blur with props","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","u":13,"pl":"https://cdn.21st.dev/designali-in/gradient-blur/default/preview.1761127875091.png","pc":"designali-in","tg":["background"]},{"id":"21st:designali-in__gradient-mesh","t":"Gradient mesh","d":"Gradient Mesh waith noise background animation","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","u":77,"pl":"https://cdn.21st.dev/designali-in/gradient-mesh/default/preview.1760071594750.png","pc":"designali-in"},{"id":"21st:designali-in__gradient-wave","t":"Gradient wave","d":"Gradient Wave with props","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/gradient-wave/default/preview.1760021600163.png","pc":"designali-in","tg":["background","hero"]},{"id":"21st:designali-in__grid-pattern","t":"Grid pattern","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","u":70,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/grid-pattern/default/preview.png","pc":"designali-in","tg":["grid"]},{"id":"21st:designali-in__header-01","t":"Header 01","d":"header navigation bar menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"designali-in","st":"indexed","u":43,"pl":"https://cdn.21st.dev/designali-in/header-01/default/preview.1760030312496.png","pc":"designali-in","tg":["dropdown","menu"]},{"id":"21st:designali-in__header-02","t":"Header 02","d":"Header with search and sheet and toggle","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"designali-in","st":"indexed","u":18,"pl":"https://cdn.21st.dev/designali-in/header-02/default/preview.1760030879210.png","pc":"designali-in","tg":["search"]},{"id":"21st:designali-in__header-03","t":"Header 03","d":"header with navigation ment and toggle","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/header-03/default/preview.1760031281938.png","pc":"designali-in"},{"id":"21st:designali-in__header-04","t":"Header 04","d":"header with command search toggle","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/header-04/default/preview.1785942707768-8f9f0b08-f457-4d39-8daa-eed38bf6443b.png","pc":"designali-in"},{"id":"21st:designali-in__hero-01","t":"Hero 01","d":"Hero with wave gradient background","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"designali-in","st":"indexed","u":46,"pl":"https://cdn.21st.dev/designali-in/hero-01/default/preview.1760022303685.png","pc":"designali-in","tg":["cta"]},{"id":"21st:designali-in__hero-02","t":"Hero 02","d":"Hero with marquee nad background gradient wave","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"designali-in","st":"indexed","u":83,"pl":"https://cdn.21st.dev/designali-in/hero-02/default/preview.1760021924615.png","pc":"designali-in","tg":["marquee"]},{"id":"21st:designali-in__hero-03","t":"Hero 03","d":"Hero banner , designer, product, design code","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","u":59,"pl":"https://cdn.21st.dev/designali-in/hero-03/default/preview.1760021284525.png","pc":"designali-in","tg":["hero"]},{"id":"21st:designali-in__hero-04","t":"Hero 04","d":"Hero banner. creative designer, portfolio","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","u":46,"pl":"https://cdn.21st.dev/designali-in/hero-04/default/preview.1760021092785.png","pc":"designali-in","tg":["grid","hero"]},{"id":"21st:designali-in__hero-05","t":"Hero 05","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/hero-05/default/preview.1759937180138.png","pc":"designali-in"},{"id":"21st:designali-in__hero-designali","t":"Hero designali","d":"Your complete platform for the Design.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","u":241,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/hero-designali/default/preview.1746006537141.png","pc":"designali-in"},{"id":"21st:designali-in__hero-shader","t":"Hero shader","d":"Discover the essence of creativity in our exquisite collection of top-tier abstract design assets. Each piece is a blend of beauty and utility, perfect for elevating any project.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"designali-in","st":"indexed","u":233,"pl":"https://cdn.21st.dev/designali-in/hero-shader/default/preview.1755669784836.png","pc":"designali-in","tg":["cta"]},{"id":"21st:designali-in__highlighter","t":"Highlighter","d":"Highlighter, Particle, CTA","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"designali-in","st":"indexed","u":650,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/highlighter.jpg","pc":"designali-in","tg":["cta"]},{"id":"21st:designali-in__id-card","t":"Id card","d":"ID card, virtual card, visiting card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/id-card/default/preview.1751369612025.png","pc":"designali-in"},{"id":"21st:designali-in__image-zoom","t":"Image zoom","d":"Image Zoom","k":"component","s":"21st","c":"media/gallery","g":"media","a":"designali-in","st":"indexed","u":37,"pl":"https://cdn.21st.dev/designali-in/image-zoom/default/preview.1751113338583.png","pc":"designali-in"},{"id":"21st:designali-in__interactive-canvas","t":"Interactive canvas","d":"Interactive Canvas with dot pattern frid","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/interactive-canvas/default/preview.1760762627334.png","pc":"designali-in"},{"id":"21st:designali-in__interactive-dots","t":"Interactive dots","d":"You can customize colors, spacing, dot size, repel force, and other parameters through props, and it includes proper cleanup and responsive behavior.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/interactive-dots/default/preview.1757318080968.png","pc":"designali-in","tg":["background"]},{"id":"21st:designali-in__interactive-dots-1","t":"Interactive dots 1","d":"Interactive Dots with props","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/interactive-dots-1/default/preview.1760847049158.png","pc":"designali-in"},{"id":"21st:designali-in__interactive-grid","t":"Interactive grid","d":"Interactive Grid with props","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","u":36,"pl":"https://cdn.21st.dev/designali-in/interactive-grid/default/preview.1761227281227.png","pc":"designali-in","tg":["background","grid"]},{"id":"21st:designali-in__interactive-light","t":"Interactive light","d":"he component replicates the original behavior: the lamp follows your mouse cursor with a glowing effect, includes the grid background with radial highlight, supports","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/interactive-light/default/preview.1756196915021.png","pc":"designali-in","tg":["cursor"]},{"id":"21st:designali-in__interactive-lines","t":"Interactive lines","d":"You can customize colors, grid spacing, interaction distance, and animation smoothing through props, making it flexible for different use cases.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/interactive-lines/default/preview.1756306465462.png","pc":"designali-in"},{"id":"21st:designali-in__iphone-16-pro","t":"Iphone 16 pro","d":"Mockup of iPhone 16 Pro","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/iphone-16-pro.jpg","pc":"designali-in"},{"id":"21st:designali-in__keyboard","t":"Keyboard","d":"Mac Keyboard","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/keyboard/default/preview.1748439331954.png","pc":"designali-in"},{"id":"21st:designali-in__led-display","t":"Led display","d":"LED Display with color props","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/led-display/default/preview.1785370385292-e733a99a-0d72-434d-9793-73a2fe7071f8.png","pc":"designali-in"},{"id":"21st:designali-in__liquid-glass-button","t":"Liquid glass button","d":"Liquid Glass Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/liquid-glass-button/default/preview.1750605472950.png","pc":"designali-in","tg":["button"]},{"id":"21st:designali-in__liquid-glass-card","t":"Liquid glass card","d":"https://ui.dalim.in/card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"designali-in","st":"indexed","u":91,"pl":"https://cdn.21st.dev/designali-in/liquid-glass-card/default/preview.1750836023340.png","pc":"designali-in","tg":["card","cta","pricing-section"]},{"id":"21st:designali-in__loading-overlay","t":"Loading overlay","d":"The component animates a percentage counter from 0% to 100% over 2 seconds, then clips out the overlay and reveals the content with a smooth fade-in effect.","k":"component","s":"21st","c":"status/loader","g":"status","a":"designali-in","st":"indexed","u":38,"pl":"https://cdn.21st.dev/designali-in/loading-overlay/default/preview.1755533080748.png","pc":"designali-in"},{"id":"21st:designali-in__login-03","t":"Login 03","d":"Login with image and logos,","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/login-03/default/preview.1760509109204.png","pc":"designali-in","tg":["sign-in"]},{"id":"21st:designali-in__login-2","t":"Login 2","d":"Login with form and buttons","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"designali-in","st":"rated","pl":"https://cdn.21st.dev/designali-in/login-2/default/preview.1760506878862.png","pc":"designali-in","sc":20},{"id":"21st:designali-in__login-page","t":"Login page","d":"Login page with gradient animated background","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"designali-in","st":"indexed","u":61,"pl":"https://cdn.21st.dev/designali-in/login-page/default/preview.1760364296262.png","pc":"designali-in","tg":["form"]},{"id":"21st:designali-in__mac","t":"Mac","d":"Mockup for iMac","k":"component","s":"21st","c":"media/gallery","g":"media","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/mac.jpg","pc":"designali-in","tg":["image"]},{"id":"21st:designali-in__macbook-pro","t":"Macbook pro","d":"Macbook Pro Mockup","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/macbook-pro.jpg","pc":"designali-in"},{"id":"21st:designali-in__magnet-field","t":"Magnet field","d":"Magnet Field with props","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/magnet-field/default/preview.1761228337060.png","pc":"designali-in"},{"id":"21st:designali-in__marquee","t":"Marquee","d":"Marquee, Scroll infinite","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"designali-in","st":"indexed","u":163,"pl":"https://cdn.21st.dev/designali-in/marquee/default/preview.1753259873435.png","pc":"designali-in","tg":["marquee","scroll-area"]},{"id":"21st:designali-in__marquee-card","t":"Marquee card","d":"Marquee Card, card, testimonials","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"designali-in","st":"indexed","u":39,"pl":"https://cdn.21st.dev/designali-in/marquee-card/default/preview.1753327607947.png","pc":"designali-in","tg":["avatar","marquee","testimonials"]},{"id":"21st:designali-in__matrix-noise","t":"Matrix noise","d":"Matrix Noise with alphabets animation like noise","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/matrix-noise/default/preview.1760365915270.png","pc":"designali-in"},{"id":"21st:designali-in__matrix-ripple","t":"Matrix ripple","d":"Matrix Ripple with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/matrix-ripple/default/preview.1761036083191.png","pc":"designali-in"},{"id":"21st:designali-in__mechanical-waves","t":"Mechanical waves","d":"Mechanical Waves with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/mechanical-waves/default/preview.1785370593003-9b60a9e1-f296-484c-9b46-c3ce8bc3bd2b.png","pc":"designali-in"},{"id":"21st:designali-in__morphing-light","t":"Morphing light","d":"The component creates a full-screen animated shader effect with beautiful morphing light patterns in pink and cyan colors","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/morphing-light/default/preview.1755705888649.png","pc":"designali-in"},{"id":"21st:designali-in__mouse-position-canvas","t":"Mouse position canvas","d":"Mouse Position Canvas with grid colorfull boxes","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/mouse-position-canvas/default/preview.1760714976163.png","pc":"designali-in"},{"id":"21st:designali-in__mouse-quadrant-tracker","t":"Mouse quadrant tracker","d":"You can easily change the text, color hue, shadow intensity, or font size by modifying these prop values.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/mouse-quadrant-tracker/default/preview.1755668441307.png","pc":"designali-in","tg":["text"]},{"id":"21st:designali-in__navbar","t":"Navbar","d":"Navigation, Header","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"designali-in","st":"indexed","u":624,"pl":"https://cdn.21st.dev/designali-in/navbar/default/preview.1752379717505.png","pc":"designali-in","tg":["navigation-menu","toggle"]},{"id":"21st:designali-in__network-animation","t":"Network animation","d":"Network Animation with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/network-animation/default/preview.1760847895974.png","pc":"designali-in"},{"id":"21st:designali-in__neural-noise","t":"Neural noise","d":"Neural Noise background","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/neural-noise/default/preview.1757600889576.png","pc":"designali-in"},{"id":"21st:designali-in__noise-animation","t":"Noise animation","d":"animation logic, rendering circles with colors and sizes based on 3D simplex noise","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/noise-animation/default/preview.1758121041370.png","pc":"designali-in"},{"id":"21st:designali-in__particle-animation","t":"Particle animation","d":"he component includes all styling inline and maintains the interactive mouse/touch controls that adjust the animation progress based on cursor position around the circular path.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"designali-in","st":"indexed","u":23,"pl":"https://cdn.21st.dev/designali-in/particle-animation/default/preview.1755742437897.png","pc":"designali-in"},{"id":"21st:designali-in__particle-animation-1","t":"Particle animation 1","d":"You can easily adjust the visual appearance by modifying the props, such as changing colors, particle count, or animation timing.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-animation-1/default/preview.1757135784365.png","pc":"designali-in"},{"id":"21st:designali-in__particle-animation-2","t":"Particle animation 2","d":"Particle Animation with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-animation-2/default/preview.1760810336599.png","pc":"designali-in"},{"id":"21st:designali-in__particle-canvas","t":"Particle canvas","d":"The component will use inline styles and include the canvas animation with customizable props.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-canvas/default/preview.1785469919081-5a394c00-c492-422b-80e8-bfc6d67bb37b.png","pc":"designali-in"},{"id":"21st:designali-in__particle-canvas-1","t":"Particle canvas 1","d":"Particle Canvas, you can customize this","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-canvas-1/default/preview.1785440188312-f00ef381-5715-4248-8341-ee52c67b873e.png","pc":"designali-in"},{"id":"21st:designali-in__particle-canvas-2","t":"Particle canvas 2","d":"Particle canvas with colors","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-canvas-2/default/preview.1760364840371.png","pc":"designali-in","tg":["background"]},{"id":"21st:designali-in__particle-gravity","t":"Particle gravity","d":"Particle Gravity with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-gravity/default/preview.1761667238970.png","pc":"designali-in"},{"id":"21st:designali-in__particle-hero","t":"Particle hero","d":"The component includes all the stunning visual effects like animated particles, rotating spotlights, and the gold mode toggle functionality,","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"designali-in","st":"indexed","u":79,"pl":"https://cdn.21st.dev/designali-in/particle-hero/default/preview.1755358596554.png","pc":"designali-in"},{"id":"21st:designali-in__particle-text-effect","t":"Particle text effect","d":"You can customize the text by passing a `text` prop, and clicking anywhere will restart the mesmerizing animation.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/particle-text-effect/default/preview.1755269651206.png","pc":"designali-in"},{"id":"21st:designali-in__payment-card","t":"Payment card","d":"The form includes proper validation, formatting, and a smooth 3D flip animation when entering the CVV code. Try typing different card numbers to see the card type detection in acti","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"designali-in","st":"indexed","u":20,"pl":"https://cdn.21st.dev/designali-in/payment-card/default/preview.1755105122177.png","pc":"designali-in"},{"id":"21st:designali-in__pixel-animation","t":"Pixel animation","d":"You can now customize container size, background color, pixel spacing, animation speed, color palette, pixel size, animation duration, and hint text.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/pixel-animation/default/preview.1785364259686-c8f03092-b431-4562-a334-c642dce5ae2d.png","pc":"designali-in"},{"id":"21st:designali-in__pixel-grid","t":"Pixel grid","d":"Pixel Grid with props","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","u":77,"pl":"https://cdn.21st.dev/designali-in/pixel-grid/default/preview.1785370853449-8aa5858c-e113-419f-8cb8-f296240dd21e.png","pc":"designali-in"},{"id":"21st:designali-in__radial-lines","t":"Radial lines","d":"The component generates the specified number of lines with rotation angles, all using inline styles. You can customize the line count, colors, thickness, positioning, and container","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/radial-lines/default/preview.1755706636100.png","pc":"designali-in","tg":["background"]},{"id":"21st:designali-in__rain","t":"Rain","d":"The component now creates a complete storm experience with synchronized visual and audio effects that feel natural and immersive!","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/rain/default/preview.1754666235237.png","pc":"designali-in"},{"id":"21st:designali-in__rainbow-button","t":"Rainbow button","d":"Rainbow Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/rainbow-button/default/preview.1750836451063.png","pc":"designali-in"},{"id":"21st:designali-in__rainbow-text-effect","t":"Rainbow text effect","d":"Text with the stunning rainbow shadow effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","u":13,"pl":"https://cdn.21st.dev/designali-in/rainbow-text-effect/default/preview.1755580966881.png","pc":"designali-in","tg":["text"]},{"id":"21st:designali-in__ripple-canvas","t":"Ripple canvas","d":"Ripple Canvas with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/ripple-canvas/default/preview.1760876191786.png","pc":"designali-in"},{"id":"21st:designali-in__ripple-grid","t":"Ripple grid","d":"Ripple Grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/ripple-grid/default/preview.1755317881232.png","pc":"designali-in"},{"id":"21st:designali-in__safari","t":"Safari","d":"Mockup of Safari","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/safari.jpg","pc":"designali-in"},{"id":"21st:designali-in__scroll-progress","t":"Scroll progress","d":"Scroll Progress","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/scroll-progress/default/preview.png","pc":"designali-in"},{"id":"21st:designali-in__scroll-progress-1","t":"Scroll progress 1","d":"A minimal scroll progress indicator that tracks how far a user has scrolled down a page or container. Fully theme-aware and built with composability in mind, it supports both horiz","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/scroll-progress-1/default/preview.1753542227731.png","pc":"designali-in","tg":["progress","scroll-area"]},{"id":"21st:designali-in__shader-animation","t":"Shader animation","d":"The page will now show the beautiful animated ripple effect that fills the entire screen with the mesmerizing concentric circles and color gradients from your original Three.js sha","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","u":2595,"pl":"https://cdn.21st.dev/designali-in/shader-animation/default/preview.1755486352919.png","pc":"designali-in"},{"id":"21st:designali-in__shader-canvas","t":"Shader canvas","d":"a Next.js component based on your WebGL/GLea code","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/shader-canvas/default/preview.1758211257805.png","pc":"designali-in"},{"id":"21st:designali-in__shader-lines","t":"Shader lines","d":"The component dynamically loads Three.js, sets up the WebGL renderer with your custom shaders, and creates the colorful mosaic effect with animated lines.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","u":953,"pl":"https://cdn.21st.dev/designali-in/shader-lines/default/preview.1755617050358.png","pc":"designali-in"},{"id":"21st:designali-in__shiny-button","t":"Shiny button","d":"The component preserves all the original functionality including the animated conic gradients, shimmer effects, dot patterns, and hover states.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"designali-in","st":"indexed","u":590,"pl":"https://cdn.21st.dev/designali-in/shiny-button/default/preview.1755271754131.png","pc":"designali-in","tg":["button"]},{"id":"21st:designali-in__simplex","t":"Simplex","d":"This appears to be a sophisticated dithering shader with various animated shapes and effects.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":38,"pl":"https://cdn.21st.dev/designali-in/simplex/default/preview.1758129455077.png","pc":"designali-in"},{"id":"21st:designali-in__snow-flakes","t":"Snow flakes","d":"Simply import and use the component anywhere in your app. It will create a full-screen overlay that doesn't interfere with user interactions.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":28,"pl":"https://cdn.21st.dev/designali-in/snow-flakes/default/preview.1785303627441-3d39121e-0c81-44d2-83ed-0e735abe50de.png","pc":"designali-in"},{"id":"21st:designali-in__space-background","t":"Space background","d":"Space Background with props","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","u":69,"pl":"https://cdn.21st.dev/designali-in/space-background/default/preview.1761744378828.png","pc":"designali-in","tg":["background","hero"]},{"id":"21st:designali-in__spark-effect","t":"Spark effect","d":"Spark Effect","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"designali-in","st":"indexed","u":20,"pl":"https://cdn.21st.dev/designali-in/spark-effect/default/preview.1758130471328.png","pc":"designali-in"},{"id":"21st:designali-in__sphere","t":"Sphere","d":"This appears to be a sophisticated dithering shader with various animated shapes and effects.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":104,"pl":"https://cdn.21st.dev/designali-in/sphere/default/preview.1758130261160.png","pc":"designali-in"},{"id":"21st:designali-in__spreadsheet","t":"Spreadsheet","d":"A comprehensive spreadsheet component with all the essential features you'd expect from a spreadsheet application. The component includes cell selection, editing capabilities, keyb","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/spreadsheet/default/preview.1755187130487.png","pc":"designali-in","tg":["grid","table"]},{"id":"21st:designali-in__stamp","t":"Stamp","d":"Stamp, Award, Badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"designali-in","st":"indexed","u":17,"pl":"https://cdn.21st.dev/designali-in/stamp/default/preview.1751346216632.png","pc":"designali-in","tg":["badge"]},{"id":"21st:designali-in__starfield","t":"Starfield","d":"React component with customizable props.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/starfield/default/preview.1757521137269.png","pc":"designali-in","tg":["background"]},{"id":"21st:designali-in__starfield-1","t":"Starfield 1","d":"The component retains the core functionality of the starfield animation, including props for customization, and uses React with a canvas element for rendering.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/starfield-1/default/preview.1757958800562.png","pc":"designali-in"},{"id":"21st:designali-in__stars-canvas","t":"Stars canvas","d":"Stars Canvas with props","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/stars-canvas/default/preview.1760974922624.png","pc":"designali-in"},{"id":"21st:designali-in__stats-2","t":"Stats 2","d":"Stats with numbers","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"designali-in","st":"indexed","u":13,"pl":"https://cdn.21st.dev/designali-in/stats-2/default/preview.1760508847468.png","pc":"designali-in","tg":["cta","stat"]},{"id":"21st:designali-in__sticker","t":"Sticker","d":"Sticker, Text Effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/sticker/default/preview.1751361896143.png","pc":"designali-in"},{"id":"21st:designali-in__svg-follower","t":"Svg follower","d":"the SVG Follower component to the main page with a nice centered layout and updated the color palette to use modern hex colors.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","u":29,"pl":"https://cdn.21st.dev/designali-in/svg-follower/default/preview.1757225741920.png","pc":"designali-in","tg":["cursor"]},{"id":"21st:designali-in__swirl","t":"Swirl","d":"This appears to be a sophisticated dithering shader with various animated shapes and effects.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":147,"pl":"https://cdn.21st.dev/designali-in/swirl/default/preview.1758129764024.png","pc":"designali-in"},{"id":"21st:designali-in__text-aimation","t":"Text aimation","d":"Text Animation component to make the shadow colors match the text color with lower opacity,","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","u":7,"pl":"https://cdn.21st.dev/designali-in/text-aimation/default/preview.1757591386493.png","pc":"designali-in"},{"id":"21st:designali-in__text-color","t":"Text color","d":"Text Color","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","u":161,"pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/text-color/text-color/preview.png","pc":"designali-in","tg":["text"]},{"id":"21st:designali-in__text-particle","t":"Text particle","d":"Text Particle","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","u":143,"pl":"https://cdn.21st.dev/designali-in/text-particle/default/preview.1785302272254-a427f5fa-0cb0-4f23-ae7e-55ee783c6547.png","pc":"designali-in"},{"id":"21st:designali-in__text-wave-animation","t":"Text wave animation","d":"Text Animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/text-wave-animation/default/preview.1755661598661.png","pc":"designali-in"},{"id":"21st:designali-in__theme","t":"Theme","d":"Theme Toggle, Themed, Light, Dark & System","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"designali-in","st":"indexed","u":219,"pl":"https://cdn.21st.dev/designali-in/theme/default/preview.1752510104771.png","pc":"designali-in","tg":["toggle"]},{"id":"21st:designali-in__theme-button","t":"Theme button","d":"Theme Button, Light, Dark, System","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"designali-in","st":"indexed","u":44,"pl":"https://cdn.21st.dev/designali-in/theme-button/default/preview.1752717922033.png","pc":"designali-in","tg":["toggle"]},{"id":"21st:designali-in__theme-dropdown","t":"Theme dropdown","d":"Theme Dropdown","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"designali-in","st":"indexed","u":81,"pl":"https://cdn.21st.dev/designali-in/theme-dropdown/default/preview.1752763017642.png","pc":"designali-in"},{"id":"21st:designali-in__theme-switch","t":"Theme switch","d":"Theme Switch","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/theme-switch/default/preview.1752762761607.png","pc":"designali-in","tg":["toggle"]},{"id":"21st:designali-in__theme-tabs","t":"Theme tabs","d":"Theme Tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"designali-in","st":"indexed","u":172,"pl":"https://cdn.21st.dev/designali-in/theme-tabs/default/preview.1752763216824.png","pc":"designali-in","tg":["tabs","toggle"]},{"id":"21st:designali-in__thermal-shader","t":"Thermal shader","d":"Thermal Shader, You can customised and update with your png logo.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/thermal-shader/default/preview.1785366941598-8f2b3a64-5bad-4848-980d-aeb35d54e01e.png","pc":"designali-in"},{"id":"21st:designali-in__tile-canvas","t":"Tile canvas","d":"Tile Canvas with props","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/tile-canvas/default/preview.1761061696605.png","pc":"designali-in"},{"id":"21st:designali-in__typewriter","t":"Typewriter","d":"a fully-featured typewriter component with typing and word-changing effects!","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","u":77,"pl":"https://cdn.21st.dev/designali-in/typewriter/default/preview.1767770126276.png","pc":"designali-in","tg":["cursor"]},{"id":"21st:designali-in__vector-field","t":"Vector field","d":"Vector Field with color props","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"designali-in","st":"indexed","u":8,"pl":"https://cdn.21st.dev/designali-in/vector-field/default/preview.1760760492713.png","pc":"designali-in","tg":["background","data-visualization"]},{"id":"21st:designali-in__vercel-footer","t":"Vercel footer","d":"Vercel Footer with dropdown menu","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"designali-in","st":"indexed","u":29,"pl":"https://cdn.21st.dev/designali-in/vercel-footer/default/preview.1760627149135.png","pc":"designali-in","tg":["footer"]},{"id":"21st:designali-in__vercel-hero","t":"Vercel hero","d":"Vercel Hero with grid pattern","k":"component","s":"21st","c":"media/carousel","g":"media","a":"designali-in","st":"indexed","u":92,"pl":"https://cdn.21st.dev/designali-in/vercel-hero/default/preview.1760627333213.png","pc":"designali-in"},{"id":"21st:designali-in__vercel-navbar","t":"Vercel navbar","d":"Vercel Navbar with navigation menu","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"designali-in","st":"indexed","u":166,"pl":"https://cdn.21st.dev/designali-in/vercel-navbar/default/preview.1760626819010.png","pc":"designali-in"},{"id":"21st:designali-in__void-animation","t":"Void animation","d":" This component is fully customizable through props and compatible with modern React applications.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/void-animation/default/preview.1756271309465.png","pc":"designali-in"},{"id":"21st:designali-in__warp","t":"Warp","d":"This appears to be a sophisticated dithering shader with various animated shapes and effects.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":23,"pl":"https://cdn.21st.dev/designali-in/warp/default/preview.1758129203236.png","pc":"designali-in"},{"id":"21st:designali-in__wave","t":"Wave","d":"Wave component with props for width, height, speed, tiles, pointer control, and DPR.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/wave/default/preview.1785439414148-1a1db919-89cf-42ec-80e7-3c6e6b263eea.png","pc":"designali-in"},{"id":"21st:designali-in__wave-1","t":"Wave 1","d":"This appears to be a sophisticated dithering shader with various animated shapes and effects.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":357,"pl":"https://cdn.21st.dev/designali-in/wave-1/default/preview.1758129606115.png","pc":"designali-in"},{"id":"21st:designali-in__wave-animation","t":"Wave animation","d":"The animation creates beautiful flowing waves using different colored bars that oscillate based on sine wave calculations","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","u":22,"pl":"https://cdn.21st.dev/designali-in/wave-animation/default/preview.1755237600903.png","pc":"designali-in"},{"id":"21st:designali-in__wave-animation-1","t":"Wave animation 1","d":"The component accepts props for wave speed, intensity, colors, particle size, and dimensions.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/wave-animation-1/default/preview.1785439270337-52fe3f1b-93a3-4ba1-ae42-62468a112767.png","pc":"designali-in"},{"id":"21st:designali-in__web-gl-animation","t":"Web gl animation","d":"he component will include the canvas, shaders, and WebGL logic, adapted to work","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/web-gl-animation/default/preview.1757958493915.png","pc":"designali-in"},{"id":"21st:designali-in__web-gl-blob","t":"Web gl blob","d":"The component handles all the WebGL setup, shader compilation, and animation loop internally while exposing the key parameters as props for easy customization.","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/web-gl-blob/default/preview.1757306699842.png","pc":"designali-in"},{"id":"21st:designali-in__web-gl-shader","t":"Web gl shader","d":"Now the WebGL shader component is properly imported and rendered on the main page. The colorful wave distortion effect should display fullscreen when you view the page.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/web-gl-shader/default/preview.1755664380314.png","pc":"designali-in"},{"id":"21st:designali-in__webgl-demo","t":"Webgl demo","d":"Webgl Demo with props","k":"component","s":"21st","c":"other","g":"other","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/designali-in/webgl-demo/default/preview.1760934807214.png","pc":"designali-in"},{"id":"21st:designali-in__word-counter","t":"Word counter","d":"Word Count ","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/word-counter.jpg","pc":"designali-in","tg":["textarea"]},{"id":"21st:designeryue__shader-b3e94fd7","t":"Shader b3e94fd7","d":"Animated WebGL shader background in the Mesh drift style. Generated by the 21st.dev Shader Builder. 4-color palette (#001219, #005F73, #94D2BD, #E9D8A6). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"designeryue","st":"indexed","pl":"https://cdn.21st.dev/designeryue/shader-b3e94fd7/default/preview.1786162521496-374f7bbd-da98-40df-b6fc-8b36d53cf01f.webp","pc":"designeryue"},{"id":"21st:dev.shejanmahamud__animated-beam","t":"Animated beam","d":"SVG-based animated beam that draws glowing, gradient connection lines between two elements, with adjustable curvature, direction, and pulse speed.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dev.shejanmahamud","st":"indexed","pl":"https://cdn.21st.dev/dev.shejanmahamud/animated-beam/default/preview.1784717020673-7fb14856-4d57-4257-8017-cf09b70a5581.png","pc":"dev.shejanmahamud"},{"id":"21st:dev.shejanmahamud__expanded-map","t":"Expanded map","d":"An interactive location card with a subtle 3D tilt that expands on click to reveal real map tiles, coordinates, and a location marker.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"dev.shejanmahamud","st":"indexed","u":2,"pl":"https://cdn.21st.dev/dev.shejanmahamud/expanded-map/default/preview.1784926050725-a76b2a48-ecc4-45dd-ba20-b906bd4934ee.png","pc":"dev.shejanmahamud","tg":["card","grid","map"]},{"id":"21st:dev.shejanmahamud__feedback-widget","t":"Feedback widget","d":"A feedback widget with emoji ratings and a text area inspired from Vercel.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"dev.shejanmahamud","st":"rated","u":21,"pl":"https://cdn.21st.dev/user_32IAZZ0jCu5Ox98TEx5aAsxVNyq/feedback-widget/default/preview.1785838191209.png","pc":"dev.shejanmahamud","tg":["textarea"],"sc":22},{"id":"21st:dev.shejanmahamud__shutter-text","t":"Shutter text","d":"Animated text that reveals each character with a shutter-style sliced blur effect, triggered on load, scroll, click, or hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dev.shejanmahamud","st":"indexed","pl":"https://cdn.21st.dev/dev.shejanmahamud/shutter-text/default/preview.1784920138014-61632569-d76a-4089-84a6-4fdc92e5a3ae.png","pc":"dev.shejanmahamud","tg":["scroll-area","text"]},{"id":"21st:dev.yadhakim__animated-badge-collection","t":"Animated badge collection","d":"8 unique animated badge styles with stunning visual effects. Includes holographic shimmer, constellation stars, carnival marquee, liquid metal, magic orb, target lock HUD, origami ","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/animated-badge-collection/default/preview.1770756615505.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__animated-beams","t":"Animated beams","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/animated-beams/default/preview.1771959761338.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__animated-changelog-block","t":"Animated changelog block","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"dev.yadhakim","st":"rated","pl":"https://cdn.21st.dev/dev.yadhakim/animated-changelog-block/default/preview.1771997383632.png","pc":"dev.yadhakim","sc":22},{"id":"21st:dev.yadhakim__animated-cosmic-icons","t":"Animated cosmic icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"dev.yadhakim","st":"rated","pl":"https://cdn.21st.dev/dev.yadhakim/animated-cosmic-icons/default/preview.1771611465577.png","pc":"dev.yadhakim","sc":19},{"id":"21st:dev.yadhakim__animated-emoji-icons","t":"Animated emoji icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"dev.yadhakim","st":"rated","pl":"https://cdn.21st.dev/dev.yadhakim/animated-emoji-icons/default/preview.1771958948076.png","pc":"dev.yadhakim","sc":22},{"id":"21st:dev.yadhakim__animated-everyday-icons","t":"Animated everyday icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"dev.yadhakim","st":"rated","pl":"https://cdn.21st.dev/dev.yadhakim/animated-everyday-icons/default/preview.1771612143200.png","pc":"dev.yadhakim","sc":22},{"id":"21st:dev.yadhakim__animated-micro-loaders","t":"Animated micro loaders","k":"component","s":"21st","c":"status/loader","g":"status","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/animated-micro-loaders/default/preview.1771611694829.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__animated-state-icons","t":"Animated state icons","d":"12 icons that continuously morph between two meaningful states — loading→checkmark, hamburger→X, play→pause, lock→unlock, copy→copied, bell→notification, heart fill/unfill, downloa","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"dev.yadhakim","st":"indexed","u":109,"pl":"https://cdn.21st.dev/dev.yadhakim/animated-state-icons/default/preview.1771611963723.png","pc":"dev.yadhakim","tg":["grid","icon"]},{"id":"21st:dev.yadhakim__animated-terminal","t":"Animated terminal","k":"component","s":"21st","c":"other","g":"other","a":"dev.yadhakim","st":"rated","pl":"https://cdn.21st.dev/dev.yadhakim/animated-terminal/default/preview.1772036521822.png","pc":"dev.yadhakim","sc":23},{"id":"21st:dev.yadhakim__animated-weather-icons","t":"Animated weather icons","d":"12 continuously animated weather icons — each is a living micro-scene, not a static SVG. Sun rays rotate, rain drops fall, lightning flashes randomly, snowflakes drift sideways, wi","k":"component","s":"21st","c":"media/icon","g":"media","a":"dev.yadhakim","st":"rated","u":26,"pl":"https://cdn.21st.dev/dev.yadhakim/animated-weather-icons/default/preview.1771525111342.png","pc":"dev.yadhakim","tg":["icon"],"sc":21},{"id":"21st:dev.yadhakim__aurora-background","t":"Aurora background","d":"Living gradient mesh background with 5 morphing color blobs that drift, scale, and blend continuously — inspired by Linear, Vercel, and Stripe. Wrap any content with it. Configurab","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/aurora-background/default/preview.1771583038366.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__bento-feature-grid","t":"Bento feature grid","d":"Asymmetric dashboard-style feature showcase with live micro-visualizations in each cell — pulse rings, bar charts, orbiting dots, animated grids, a counting counter, and wave lines","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/bento-feature-grid/default/preview.1771053694036.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__bento-grid-dashboard","t":"Bento grid dashboard","d":"Asymmetric bento grid layout with liquid morphing blob borders, mesh gradients, and grain textures. Features 5 card types: stats, charts, quotes, features, and images. Editorial ma","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/bento-grid-dashboard/default/preview.1770799755236.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__black-hole","t":"Black hole","k":"component","s":"21st","c":"other","g":"other","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/black-hole/default/preview.1772090748187.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__cinematic-hero","t":"Cinematic hero","d":"Full-viewport hero with word-by-word headline reveal animation, mouse-tracked parallax depth orbs, subtle grid lines for structure, animated scroll indicator, and staggered CTA + s","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/cinematic-hero/default/preview.1771391239129.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__cloth-simulation","t":"Cloth simulation","k":"component","s":"21st","c":"other","g":"other","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/cloth-simulation/default/preview.1772087543888.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__comparison-block","t":"Comparison block","d":"A morphing side-by-side comparison component with expandable panels, SVG score rings, tug-of-war attribute bars, and an animated verdict summary. Click either panel to expand it wh","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/comparison-block/default/preview.1771391945547.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__cyberpunk-profile-card","t":"Cyberpunk profile card","d":"Futuristic profile card with neon gradient borders, holographic shimmer, glitch text effects, and orbiting blob backgrounds. Features mouse-following light, animated data streams, ","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/cyberpunk-profile-card/default/preview.1770800976294.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__drag-to-compare","t":"Drag to compare","d":"A dimensional interactive comparison component where two plans exist in competing visual universes separated by a draggable energy rift. Features 3D perspective-tracking cards, a l","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/drag-to-compare/default/preview.1771054281279.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__elegant-carousel","t":"Elegant carousel","d":"An editorial-style image carousel with a split-panel layout — text content on the left, full-bleed imagery on the right. Features smooth cross-fade transitions, a Ken Burns zoom ef","k":"component","s":"21st","c":"media/carousel","g":"media","a":"dev.yadhakim","st":"indexed","u":118,"pl":"https://cdn.21st.dev/dev.yadhakim/elegant-carousel/default/preview.1770883362936.png","pc":"dev.yadhakim","tg":["carousel","progress"]},{"id":"21st:dev.yadhakim__feature-section","t":"Feature section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/feature-section/default/preview.1771522157305.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__gravity-particles","t":"Gravity particles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/gravity-particles/default/preview.1772088429018.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__image-comparison-slider","t":"Image comparison slider","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/image-comparison-slider/default/preview.1771522464101.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__interactive-globe","t":"Interactive globe","d":"Interactive 3D rotating globe built with pure canvas — zero dependencies. 1,200 Fibonacci-distributed dots form the sphere, glowing arcs connect city markers with traveling light p","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"dev.yadhakim","st":"indexed","u":255,"pl":"https://cdn.21st.dev/dev.yadhakim/interactive-globe/default/preview.1771998219024.png","pc":"dev.yadhakim","tg":["globe"]},{"id":"21st:dev.yadhakim__interactive-tilt-card","t":"Interactive tilt card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/interactive-tilt-card/default/preview.1772035242950.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__liquid-morphing-calendar","t":"Liquid morphing calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/liquid-morphing-calendar/default/preview.1770754222023.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__living-bento-block","t":"Living bento block","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/living-bento-block/default/preview.1771997199897.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__logo-marquee","t":"Logo marquee","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/logo-marquee/default/preview.1771996683517.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__magnetic-lines","t":"Magnetic lines","k":"component","s":"21st","c":"motion/cursor","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/magnetic-lines/default/preview.1772035606200.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__material-buttons","t":"Material buttons","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/material-buttons/default/preview.1770894694491.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__neo-tokyo-product-card","t":"Neo tokyo product card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/neo-tokyo-product-card/default/preview.1770752667829.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__number-ticker","t":"Number ticker","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/number-ticker/default/preview.1771996252986.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__otp-input","t":"Otp input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/otp-input/default/preview.1772135431404.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__particle-text","t":"Particle text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/particle-text/default/preview.1771999749958.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__physics-toggle-collection","t":"Physics toggle collection","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/physics-toggle-collection/default/preview.1770755502479.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__premium-navigation","t":"Premium navigation","d":"Clean, professional navigation with frosted glass effect, dropdown mega-menus, and responsive mobile drawer. Production-ready with smooth animations and elegant design. Perfect for","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/premium-navigation/default/preview.1770758263958.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__pricing-section","t":"Pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/pricing-section/default/preview.1771521712784.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__pricing-table","t":"Pricing table","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/pricing-table/default/preview.1771054962004.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__rotating-text","t":"Rotating text","d":"Animated word rotator for hero headings — cycles through an array of words with 5 built-in animation modes: slide, fade, blur, flip, and drop. Inline-friendly — drop it inside any ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/rotating-text/default/preview.1771959402609.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__saa-s-hero-block","t":"Saa s hero block","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/saa-s-hero-block/default/preview.1771996985842.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__scratch-card","t":"Scratch card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/scratch-card/default/preview.1772135831119.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__scroll-reveal-text","t":"Scroll reveal text","d":"Apple keynote-style text animation where each word individually transitions from dimmed and blurred to sharp and vivid as you scroll through. Uses scroll-linked per-word opacity, c","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/scroll-reveal-text/default/preview.1771524183682.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__starfield","t":"Starfield","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/starfield/default/preview.1772089851075.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__swipe-stack","t":"Swipe stack","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/swipe-stack/default/preview.1772135592963.png","pc":"dev.yadhakim"},{"id":"21st:dev.yadhakim__use-text-scramble","t":"Use text scramble","d":"React hook that creates a hacker-style text scramble effect — characters cycle through random glyphs before resolving left to right. Returns the animated text, a scramble trigger f","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dev.yadhakim","st":"indexed","pl":"https://cdn.21st.dev/dev.yadhakim/use-text-scramble/default/preview.1771524494725.png","pc":"dev.yadhakim"},{"id":"21st:devetaigabbai__beautiful-simple-badges","t":"Beautiful simple badges","d":"Simple, and beautifully styled badges that support both light and dark themes. Inspired by Shadcn/UI. ","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"devetaigabbai","st":"indexed","u":22,"pl":"https://cdn.21st.dev/devetaigabbai/beautiful-simple-badges/default/preview.1760438000978.png","pc":"devetaigabbai","tg":["badge"]},{"id":"21st:devetaigabbai__depth-button","t":"Depth button","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"devetaigabbai","st":"indexed","pl":"https://cdn.21st.dev/devetaigabbai/depth-button/default/preview.1760438915972.png","pc":"devetaigabbai"},{"id":"21st:devongovett__react-aria-emoji-picker","t":"React aria emoji picker","d":"Here is React Aria Emoji Picker component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"devongovett","st":"indexed","pl":"https://cdn.21st.dev/larsen66/react-aria-emoji-picker/default/preview.1755276438733.png","pc":"devongovett","tg":["search"]},{"id":"21st:devsam7t3__liquid-button","t":"Liquid button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"devsam7t3","st":"indexed","pl":"https://cdn.21st.dev/devsam7t3/liquid-button/default/preview.1783581585052.png","pc":"devsam7t3"},{"id":"21st:dfernandez266__acg","t":"Acg","d":"Animated (flicker) ASCII art in the Triangles style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dfernandez266","st":"indexed","pl":"https://cdn.21st.dev/dfernandez266/acg/default/preview.1785804631196-68b4b924-8a5d-4e9c-a313-737550cba89b.webp","pc":"dfernandez266"},{"id":"21st:dfernandez266__kobe","t":"Kobe","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dfernandez266","st":"indexed","pl":"https://cdn.21st.dev/dfernandez266/kobe/default/preview.1785889213512-61035848-0737-4cfc-9295-bd93ab6d2649.webp","pc":"dfernandez266"},{"id":"21st:dfernandez266__lauren-weeks","t":"Lauren weeks","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dfernandez266","st":"indexed","pl":"https://cdn.21st.dev/dfernandez266/lauren-weeks/default/preview.1785806432013-8eefad60-97a3-4885-aca0-24bebe59d417.webp","pc":"dfernandez266"},{"id":"21st:dgearsonu1__account-security","t":"Account security","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"dgearsonu1","st":"rated","pl":"https://cdn.21st.dev/dgearsonu1/account-security/default/preview.1752956368800.png","pc":"dgearsonu1","sc":15},{"id":"21st:dgearsonu1__alert","t":"Alert","d":"Alert message","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/alert/default/preview.1759400997349.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__animated-lines","t":"Animated lines","d":"animated lines","k":"component","s":"21st","c":"other","g":"other","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/animated-lines/default/preview.1752958346695.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__animated-modal","t":"Animated modal","d":"A customizable, compound modal component with animated transitions","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/animated-modal/default/preview.1752955958217.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__callout-banner","t":"Callout banner","d":"Callout Banner ","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"dgearsonu1","st":"rated","pl":"https://cdn.21st.dev/dgearsonu1/callout-banner/default/preview.1759396410601.png","pc":"dgearsonu1","sc":23},{"id":"21st:dgearsonu1__carousel","t":"Carousel","d":"A customizable carousel with microinteractions and slider.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/carousel/default/preview.1752955472324.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__dashboard-configuration","t":"Dashboard configuration","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/dashboard-configuration/default/preview.1760093921358.png","pc":"dgearsonu1","tg":["checkbox"]},{"id":"21st:dgearsonu1__dashboard-content-area","t":"Dashboard content area","d":"Dashboard content area","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/dashboard-content-area/default/preview.1759395675448.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__data-filter-management","t":"Data filter management","d":"Data Filter Management for admin pannel, admin dashboard","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/data-filter-management/default/preview.1759394084485.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__futurastic-hero-section","t":"Futurastic hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/futurastic-hero-section/default/preview.1752957201137.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__interactive-quiz","t":"Interactive quiz","d":"Interactive Quiz Demo","k":"component","s":"21st","c":"other","g":"other","a":"dgearsonu1","st":"rated","pl":"https://cdn.21st.dev/dgearsonu1/interactive-quiz/default/preview.1759501110049.png","pc":"dgearsonu1","sc":23},{"id":"21st:dgearsonu1__lesson-navigation-sidebar","t":"Lesson navigation sidebar","d":"Lesson Navigation Sidebar Demo","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"dgearsonu1","st":"indexed","pl":"https://cdn.21st.dev/dgearsonu1/lesson-navigation-sidebar/default/preview.1759500829053.png","pc":"dgearsonu1"},{"id":"21st:dgearsonu1__pricing-card","t":"Pricing card","d":"Pricing card","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dgearsonu1","st":"indexed","u":78,"pl":"https://cdn.21st.dev/dgearsonu1/pricing-card/default/preview.1759062383857.png","pc":"dgearsonu1","tg":["pricing-section"]},{"id":"21st:dgearsonu1__pricing-table","t":"Pricing table","d":"pricing table","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dgearsonu1","st":"indexed","u":30,"pl":"https://cdn.21st.dev/dgearsonu1/pricing-table/default/preview.1759321827854.png","pc":"dgearsonu1","tg":["pricing-section","table"]},{"id":"21st:dhanee.dx__spider-man","t":"Spider man","d":"Animated (flicker) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhanee.dx","st":"indexed","pl":"https://cdn.21st.dev/dhanee.dx/spider-man/default/preview.1786283413291-14fa8c6f-6a5e-495e-8f97-9afe42749932.webp","pc":"dhanee.dx"},{"id":"21st:dhattura.design__hello","t":"Hello","d":"ffffefwewewfwef","k":"component","s":"21st","c":"other","g":"other","a":"dhattura.design","st":"indexed","pl":"https://cdn.21st.dev/dhattura.design/hello/default/preview.1781534577844.png","pc":"dhattura.design"},{"id":"21st:dhileepkumargm__21st-text-effect","t":"21st text effect","d":"This component features a bold headline with a mesmerizing, animated aurora that flows through the letters. The background is a dark, starry sky that subtly reacts to your cursor's","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/21st-text-effect/default/preview.1756181867056.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__3d-animation","t":"3d animation","d":"A responsive and cinematic hero section component that displays text scrolling along the walls of a 3D animated hallway. It includes a reflection, parallax effects, and customizabl","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"dhileepkumargm","st":"indexed","u":135,"pl":"https://cdn.21st.dev/dhileepkumargm/3d-animation/default/preview.1756623169896.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__3d-cards-slider","t":"3d cards slider","d":"This advanced 3D interactive card gallery includes:\n\n3D Perspective Effects:\n\nDynamic rotation based on mouse position\nPerspective transformations that respond to user interaction\n","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/3d-cards-slider/default/preview.1785275145501-35203a67-817a-40eb-8623-c372d970209e.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__3d-interactive-card-gallery","t":"3d interactive card gallery","d":"Features\nThis advanced 3D interactive card gallery includes:\n\n3D Perspective Effects:\n\nDynamic rotation based on mouse position\nPerspective transformations that respond to user int","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":8,"pl":"https://cdn.21st.dev/dhileepkumargm/3d-interactive-card-gallery/default/preview.1758349618087.png","pc":"dhileepkumargm","tg":["carousel","gallery"]},{"id":"21st:dhileepkumargm__3d-interactive-timeline","t":"3d interactive timeline","d":"Usage Instructions\nInstall required dependencies:\nbash\nnpm install framer-motion react-intersection-observer react-icons\n# or with yarn\nyarn add framer-motion react-intersection-ob","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"dhileepkumargm","st":"indexed","u":33,"pl":"https://cdn.21st.dev/dhileepkumargm/3d-interactive-timeline/default/preview.1758350637536.png","pc":"dhileepkumargm","tg":["timeline"]},{"id":"21st:dhileepkumargm__3d-perspective-card","t":"3d perspective card","d":"$36","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/3d-perspective-card/default/preview.1785275514594-f32ac685-879c-44a3-a727-bdaeb5689126.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__abstract-glassy-shader","t":"Abstract glassy shader","d":"This new shader replaces the fractal landscape with a dynamic, 2D scene featuring glowing, morphing geometric shapes. It uses SDFs to define the shapes and a simple raymarching-lik","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"dhileepkumargm","st":"indexed","u":38,"pl":"https://cdn.21st.dev/dhileepkumargm/abstract-glassy-shader/default/preview.1785269301005-62aec8ca-6ee5-44e8-8590-a3188ddc3255.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aether-anomaly","t":"Aether anomaly","d":"An interactive 3D web experience built with three.js. It renders a rotating, semi-transparent crystalline structure illuminated by dynamic, orbiting lights. The scene includes a de","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aether-anomaly/default/preview.1760959226462.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aether-flow","t":"Aether flow","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aether-flow/default/preview.1785262464673-a11ca26d-8326-4ff0-95da-5fc6ec453466.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aether-flow-hero","t":"Aether flow hero","d":"\"Aether Flow\" hero. It features a mesmerizing, interactive background of flowing light particles that weave and connect with each other. The entire particle system subtly reacts to","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":233,"pl":"https://cdn.21st.dev/dhileepkumargm/aether-flow-hero/default/preview.1756113166033.png","pc":"dhileepkumargm","tg":["cursor","hero"]},{"id":"21st:dhileepkumargm__ai-voice-agent-landing-page","t":"Ai voice agent landing page","d":"A sleek, theme-aware landing page designed to showcase AI voice agents. Features animated hero sections, call-to-action buttons, and responsive layout optimized for product onboard","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/ai-voice-agent-landing-page/default/preview.1785279848443-413fe528-7955-40d0-9e71-a081241e31bf.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__ambient-aurora","t":"Ambient aurora","d":"A full-screen, generative art display that simulates the soft, flowing lights of the aurora borealis. Drifting orbs of color blend together to create a calm, mesmerizing, and ever-","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":42,"pl":"https://cdn.21st.dev/dhileepkumargm/ambient-aurora/default/preview.1785281226362-2baae450-46d0-4b54-99ac-54ae95c42d0c.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__animated-aurora-background","t":"Animated aurora background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/animated-aurora-background/default/preview.1761912544217.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__animated-pricing-page","t":"Animated pricing page","d":" A clean and modern pricing page featuring two interactive cards with a 3D-like appearance and animated hover effects. It includes a toggle to switch between different pricing tier","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/animated-pricing-page/default/preview.1755495358816.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__anomalous-matter","t":"Anomalous matter","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/anomalous-matter/default/preview.1760598048319.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__anomalous-matter-hero","t":"Anomalous matter hero","d":"A full-screen hero section layered over a generative 3D shader background. Features animated Perlin-displaced geometry, dynamic lighting, and customizable overlay content. Ideal fo","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":261,"pl":"https://cdn.21st.dev/dhileepkumargm/anomalous-matter-hero/default/preview.1759377025250.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhileepkumargm__anomalous-matter-s","t":"Anomalous matter s","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/anomalous-matter-s/default/preview.1760624037714.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__arcane-orb","t":"Arcane orb","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/arcane-orb/default/preview.1756278013070.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__arctic-map-pattern","t":"Arctic map pattern","d":"A frosty, hand-drawn arctic map background with icy gradients, SVG distortion, and animated snowfall.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/arctic-map-pattern/default/preview.1758605040191.png","pc":"dhileepkumargm","tg":["map"]},{"id":"21st:dhileepkumargm__astral-flare-shader","t":"Astral flare shader","d":"Astral Flare Shader is inspired by Ninja Animation","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/astral-flare-shader/default/preview.1785272213457-a49972d2-7838-4283-889c-7aaa6bc90f37.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aura-core","t":"Aura core","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aura-core/default/preview.1785215812717-7946e437-d6dd-4b0b-b144-f034478d5f5b.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-background","t":"Aurora background","d":"A multi-layered, animated aurora sky effect built with React, Tailwind CSS, and Framer Motion. It features pulsing radial gradients, drifting blurred color blobs, and twinkling sta","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":40,"pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/aurora-background/default/preview.1786107290468.webp","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__aurora-background-1","t":"Aurora background 1","d":"A mesmerizing animated background using Framer Motion and CSS gradients. Perfect for landing pages, hero sections, or immersive UI experiences.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":8,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-background-1/default/preview.1759052904885.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-background-2","t":"Aurora background 2","d":"A visually engaging, animated aurora-like background component built with Tailwind CSS and Framer Motion (with optional Lottie support). Ideal for hero sections, landing pages, or ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aurora-background-2/default/preview.1759054853458.png","pc":"dhileepkumargm","tg":["background","hero"]},{"id":"21st:dhileepkumargm__aurora-bento-grid","t":"Aurora bento grid","d":"A visually dynamic grid layout featuring animated gradient backgrounds and interactive hover effects. Ideal for showcasing features, services, or dashboard modules with flair and c","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"dhileepkumargm","st":"indexed","u":36,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-bento-grid/default/preview.1785273363869-fc06d0af-5b6c-4e27-aa0a-d2d3e0290320.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-card","t":"Aurora card","d":"Move your cursor across the card to reveal a soft aurora glow that follows your pointer.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aurora-card/default/preview.1785281406012-245aa9ff-dc43-40a5-bcb0-4b9cb5615d35.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-flow-shader","t":"Aurora flow shader","d":"A full-screen, wave-driven ribbon shader that mimics the dancing hues of the aurora borealis. Exposes amplitude and frequency props for real-time control.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aurora-flow-shader/default/preview.1785273957029-5ba9ed66-6ef3-4820-8f05-4132b128e32e.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-hero","t":"Aurora hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aurora-hero/default/preview.1785451301400-5a88515b-e9a4-4baa-8d5e-906cd1969be5.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-hero-bg","t":"Aurora hero bg","d":"A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":36,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-hero-bg/default/preview.1759933614606.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-hero-bg-1","t":"Aurora hero bg 1","d":"A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":8,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-hero-bg-1/default/preview.1760252956587.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-hero-bg-2","t":"Aurora hero bg 2","d":"A stunning hero section component featuring an animated aurora gradient background with smooth color transitions. Perfect for landing pages, product showcases, and marketing sites.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":13,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-hero-bg-2/default/preview.1760253042006.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-pricing","t":"Aurora pricing","d":" creative pricing section called \"Aurora Pricing.\" It features three pricing cards with a subtle, animated aurora effect in the background. When you hover over a card, it lifts up,","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dhileepkumargm","st":"indexed","u":35,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-pricing/default/preview.1756181173814.png","pc":"dhileepkumargm","tg":["pricing-section","table","toggle"]},{"id":"21st:dhileepkumargm__aurora-shader","t":"Aurora shader","d":"A stunning, interactive shader featuring a real-time volumetric aurora shader. Built with React and WebGL for a captivating user experience.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":23,"pl":"https://cdn.21st.dev/dhileepkumargm/aurora-shader/default/preview.1785265653842-841c687b-9847-45dc-a3c7-ad6800a25613.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__aurora-voice-hero","t":"Aurora voice hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/aurora-voice-hero/default/preview.1759247600271.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__black-hole-shader","t":"Black hole shader","d":"new background is fully interactive; as you move your mouse, the center of the vortex follows your cursor, pulling the spiraling arms of light with it. I've also updated the text o","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/black-hole-shader/default/preview.1785261439608-de88e97a-5d50-4ba7-af6c-dbe13a073a82.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__blob-background","t":"Blob background","d":"Animated glowing blob background with hue rotation and subtle grid overlay. Perfect for splash screens, hero sections, or cosmic vibes.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/blob-background/default/preview.1758602859406.png","pc":"dhileepkumargm","tg":["background","grid"]},{"id":"21st:dhileepkumargm__call-to-action","t":"Call to action","d":"CallToActionHero is a reusable React component designed to showcase a compelling call-to-action section with a modern layout, decorative background blobs, and responsive buttons. I","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/call-to-action/default/preview.1761288237129.png","pc":"dhileepkumargm","tg":["cta"]},{"id":"21st:dhileepkumargm__cartoon-stone","t":"Cartoon stone","d":"A visually polished 3D CartoonStone that brings a webpage to life. The face is fully interactive, with eyes that follow the user's cursor and a smile that reacts to mouse movement.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/cartoon-stone/default/preview.1755441913385.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-bloom-shader","t":"Celestial bloom shader","d":"A dynamic, animated WebGL shader that simulates the turbulent, glowing surface of Bloom . Built with React and Three.js.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":47,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-bloom-shader/default/preview.1785258443197-2f5bf033-8941-4b31-a331-46564057c573.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-ink-shader","t":"Celestial ink shader","d":"This \"Celestial Ink\" shader simulates ethereal, glowing ink spreading and swirling in a cosmic fluid. It's interactive, allowing you to disturb the ink with your mouse, creating ri","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":28,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-ink-shader/default/preview.1785260666747-1851ad96-ca72-4621-bec1-4c93eb3a8448.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-loom","t":"Celestial loom","d":"A procedurally animated cosmic loom that weaves threads of light across a static grid. Built with pure CSS and React, this component simulates a shuttle drifting across space, leav","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/celestial-loom/default/preview.1758731464912.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-orrery","t":"Celestial orrery","d":"A cosmic background component that simulates glowing planets orbiting along intricate paths, with faint constellation glyphs twinkling in the distance. Perfect for hero sections, l","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":23,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-orrery/default/preview.1758727270931.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__celestial-resonance","t":"Celestial resonance","d":"A full-screen, canvas-driven particle field that arcs gracefully around an off-screen magnetic center. Particles trail with soft fading and glow, shifting in hue over time to evoke","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":5,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-resonance/default/preview.1785276957992-f2105807-3310-489d-8f4f-98c059002894.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-sphere","t":"Celestial sphere","d":"\"Celestial Sphere,\" combines several of the best ideas from the code you shared:\n\nProcedural Generation: Like the lightning and dark veil examples, it uses procedural noise to gene","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":74,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-sphere/default/preview.1785262197397-60438d45-d162-449d-9dde-b7370c1c8127.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-sphere-hero","t":"Celestial sphere hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/celestial-sphere-hero/default/preview.1756115018681.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__celestial-sphere-shader","t":"Celestial sphere shader","d":": An interactive React component that renders a 3D celestial sphere with dynamic, glowing nebulae using a custom GLSL shader and three.js.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"dhileepkumargm","st":"indexed","u":18,"pl":"https://cdn.21st.dev/dhileepkumargm/celestial-sphere-shader/default/preview.1785264081861-c869e66c-69d0-487d-89de-1a8adf989279.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__chrono-board","t":"Chrono board","d":"PulseLine — A concise, modern activity timeline that surfaces recent system events, deployments, and maintenance at a glance.\n\nChronoBoard — A polished timeline dashboard that orga","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"dhileepkumargm","st":"rated","u":2,"pl":"https://cdn.21st.dev/dhileepkumargm/chrono-board/default/preview.1760950505106.png","pc":"dhileepkumargm","tg":["badge","dashboard","timeline"],"sc":23},{"id":"21st:dhileepkumargm__chronos-engine","t":"Chronos engine","d":"A procedurally animated clockwork simulation featuring rotating gears and dynamic spark trails. Built with pure CSS and React, this component evokes a glowing mechanical core surro","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/chronos-engine/default/preview.1758729532138.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__chronos-engine-1","t":"Chronos engine 1","d":"A procedurally animated clockwork simulation featuring rotating gears and dynamic spark trails. Built with pure CSS and React, this component evokes a glowing mechanical core surro","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"dhileepkumargm","st":"indexed","u":4,"pl":"https://cdn.21st.dev/dhileepkumargm/chronos-engine-1/default/preview.1758729842618.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__colorful-wave-pattern","t":"Colorful wave pattern","d":"A full-screen, animated background component that renders a colorful, flowing wave pattern using a WebGL shader. The effect is generative, efficient, and runs on the GPU.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/colorful-wave-pattern/default/preview.1756918020361.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__colorful-wave-pattern-1","t":"Colorful wave pattern 1","d":"A React UI component that renders an animated, customizable multi-colored wave pattern using WebGL2 and GLSL shaders. Adjust wave count, amplitude, frequency, brightness, color sep","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":34,"pl":"https://cdn.21st.dev/dhileepkumargm/colorful-wave-pattern-1/default/preview.1785469204408-940c099e-aadb-4eca-aa2e-8d133f4e5f5b.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__community-testimonial","t":"Community testimonial","d":"A responsive, accessible React testimonials section with looping horizontal scrollers, reusable TestimonialCard components, staggered entrance animations, hover-to-pause behavior, ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dhileepkumargm","st":"indexed","u":5,"pl":"https://cdn.21st.dev/dhileepkumargm/community-testimonial/default/preview.1761290291398.png","pc":"dhileepkumargm","tg":["marquee","scroll-area","testimonials"]},{"id":"21st:dhileepkumargm__core-features","t":"Core features","d":"highly reusable and is styled with Tailwind CSS for a modern look. For icons, I'm using lucide-react, a very popular and lightweight icon library. Everything is bundled into a sing","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/core-features/default/preview.1785272295178-5fa4e469-b7a3-4b7e-996a-1bb0a39f4a61.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__cosmic-aurora","t":"Cosmic aurora","d":"A serene, generative celestial light show rendered on HTML5 canvas with React. Particles flow in organic Perlin-noise patterns, leaving subtle trails and a soft glow that shifts hu","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/cosmic-aurora/default/preview.1785276459266-a0778388-6be8-4f73-b54d-6215718328bf.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__cosmic-nebula","t":"Cosmic nebula","d":"A dynamic, animated nebula background with multiple glowing orbs and a starfield, built with React and CSS.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/cosmic-nebula/default/preview.1758605935629.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__cosmic-ocean-shader","t":"Cosmic ocean shader","d":"A dynamic, animated background component. It uses Three.js and a custom GLSL shader to render a flowing, wave-like visual effect resembling a \"cosmic ocean.\"","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":7,"pl":"https://cdn.21st.dev/dhileepkumargm/cosmic-ocean-shader/default/preview.1785257984352-c2b2403f-3a4d-4ed9-8db5-b8c628df4e47.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__creative-eyes-hero-section","t":"Creative eyes hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/creative-eyes-hero-section/default/preview.1754722702657.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__creative-eyes-hero-section-1","t":"Creative eyes hero section 1","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/creative-eyes-hero-section-1/default/preview.1756269795642.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__crypto-hero","t":"Crypto hero","d":"A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":11,"pl":"https://cdn.21st.dev/dhileepkumargm/crypto-hero/default/preview.1785280496967-0988583b-e647-4f89-b6f9-46aefef7dada.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__crystal-cursor","t":"Crystal cursor","d":"An interactive canvas-driven background where crystalline structures sprout and extend toward the mouse pointer. Clicking triggers a dynamic shatter effect, bursting crystals into ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/crystal-cursor/default/preview.1758791320589.png","pc":"dhileepkumargm","tg":["cursor"]},{"id":"21st:dhileepkumargm__crystal-shader","t":"Crystal shader","d":"renders a flowing, iridescent pattern that simulates the look of liquid crystals. It reacts to your mouse by creating ripples and distortions in the fluid. The UI panel has been up","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":20,"pl":"https://cdn.21st.dev/dhileepkumargm/crystal-shader/default/preview.1785263481296-d3913846-9efa-48e8-82bc-31bd69a3e148.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__crystal-trail-background","t":"Crystal trail background","d":"A full-screen, canvas-driven background where crystalline polygons sprout along the cursor’s path and fade over time. Built with React, it translates mouse speed into shimmering cr","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","u":15,"pl":"https://cdn.21st.dev/dhileepkumargm/crystal-trail-background/default/preview.1758791661182.png","pc":"dhileepkumargm","tg":["cursor"]},{"id":"21st:dhileepkumargm__crystalline-cube","t":"Crystalline cube","d":"inspiration from the advanced 3D rendering and lighting techniques popular on Shadertoy, I've created a new shader called \"Crystalline cube.\"","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":18,"pl":"https://cdn.21st.dev/dhileepkumargm/crystalline-cube/default/preview.1785266639559-727f5773-e6af-4905-8c87-efc1f7eee8b7.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__crystalline-field-hero","t":"Crystalline field hero","d":"An immersive 3D hero background built with Three.js, featuring a dynamic crystalline field that reacts to mouse movement.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/crystalline-field-hero/default/preview.1758606896390.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhileepkumargm__crystalline-growth","t":"Crystalline growth","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/crystalline-growth/default/preview.1756397612752.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__cyber-matrix-hero","t":"Cyber matrix hero","d":"as you move your mouse across the screen, the grid of characters will react to your cursor. The characters near your mouse will glow brighter, change color, and scale up, creating ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":54,"pl":"https://cdn.21st.dev/dhileepkumargm/cyber-matrix-hero/default/preview.1756112058304.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhileepkumargm__cybernetic-bento-grid","t":"Cybernetic bento grid","d":"This is a modern and highly popular layout style for showcasing features, portfolio items, or key information. I've designed this one with a futuristic, cyberpunk aesthetic, featur","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":343,"pl":"https://cdn.21st.dev/dhileepkumargm/cybernetic-bento-grid/default/preview.1774363333820.png","pc":"dhileepkumargm","tg":["features"]},{"id":"21st:dhileepkumargm__cybernetic-grid-shader","t":"Cybernetic grid shader","d":"This \"Cybernetic Grid\" shader generates a futuristic, glowing grid that ripples and pulses with energy. It's fully interactive, warping and lighting up in response to your mouse mo","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":137,"pl":"https://cdn.21st.dev/dhileepkumargm/cybernetic-grid-shader/default/preview.1785259602288-5e235834-ebf3-41b7-9d8f-63c62b456e4a.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__cybernetic-team-showcase","t":"Cybernetic team showcase","d":" creative and interactive \"Cybernetic Team Showcase\" section. It displays your team members in a futuristic grid. When you hover over a card, a \"cybernetic\" scanning effect animate","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"dhileepkumargm","st":"indexed","u":21,"pl":"https://cdn.21st.dev/dhileepkumargm/cybernetic-team-showcase/default/preview.1756182305939.png","pc":"dhileepkumargm","tg":["profile","team"]},{"id":"21st:dhileepkumargm__daily-streak","t":"Daily streak","d":"Daily loot streak UI Component With an  improve its structure, clarity, and robustness","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/daily-streak/default/preview.1785267535561-e0069eb1-f650-45ff-9cde-41e6d537e584.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__data-grid-hero","t":"Data grid hero","d":"A generative, theme‑aware hero component with an animated grid background. Supports pulse, wave, and random animations, mouse‑follow glow, and full prop‑driven customization. Ideal","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":41,"pl":"https://cdn.21st.dev/dhileepkumargm/data-grid-hero/default/preview.1785278995635-04898a2e-1077-42bb-b32e-fdbcbcf48c53.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__data-sphere-hero","t":"Data sphere hero","d":"Data Sphere that's constantly alive with flowing, changing characters, like a stream of data being processed. The entire sphere is rendered on a canvas for high performance and sti","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/data-sphere-hero/default/preview.1756115649292.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__design-meets-innovation","t":"Design meets innovation","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/design-meets-innovation/default/preview.1785257770500-e1ab56ba-2c9e-4063-8b1c-8f69736f6afe.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__digital-aurora","t":"Digital aurora","d":"A stunning, interactive hero section featuring a real-time volumetric aurora shader. Built with React and WebGL for a captivating user experience.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","u":136,"pl":"https://cdn.21st.dev/dhileepkumargm/digital-aurora/default/preview.1785265321820-54e8438a-8676-40f0-9253-ff5e01e27e0c.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__digital-glitch","t":"Digital glitch","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/digital-glitch/default/preview.1785263081675-54cfb109-415c-40ea-8fcf-027d1d9f3035.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__digital-loom-background","t":"Digital loom background","d":"A dynamic, full-screen hero background that draws animated, interwoven threads on an HTML canvas—simulating a futuristic digital loom for immersive UI experiences.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":22,"pl":"https://cdn.21st.dev/dhileepkumargm/digital-loom-background/default/preview.1759057292896.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__digital-petals-shader","t":"Digital petals shader","d":"This \"Digital Petals\" shader generates a field of bio-luminescent, procedurally generated flora. The animation is interactive, causing the petals to bloom and ripple outwards in re","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"dhileepkumargm","st":"indexed","u":58,"pl":"https://cdn.21st.dev/dhileepkumargm/digital-petals-shader/default/preview.1785260257208-39a33d95-b787-4cd7-afe7-b7e26a693be9.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__dithered-shader-background-1","t":"Dithered shader background 1","d":"A React wrapper around a p5.js/WebGL shader that renders a full-screen, time-animated generative pattern with ordered Bayer dithering for a retro pixel-art effect. Supports customi","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/dithered-shader-background-1/default/preview.1759307487234.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__dynamic-waveform","t":"Dynamic waveform","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/dynamic-waveform/default/preview.1785264500345-31d43e8e-b5e7-4a27-a0d6-79f0f1f59386.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__e-commerce-product-detail","t":"E commerce product detail","d":"Features\nThis Product Detail component includes:\n\nInteractive Image Gallery\n\nLarge main image with thumbnails\nPrevious/next navigation arrows\nThumbnails with active state indicator","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"dhileepkumargm","st":"indexed","u":43,"pl":"https://cdn.21st.dev/dhileepkumargm/e-commerce-product-detail/default/preview.1758345928653.png","pc":"dhileepkumargm","tg":["gallery","tabs"]},{"id":"21st:dhileepkumargm__electric-card","t":"Electric card","d":"A reusable UI component for a glowing, electric-style card with a turbulent border effect. It can be used to showcase content in a visually dynamic way.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/electric-card/default/preview.1756792499298.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__ethereal-ink","t":"Ethereal ink","d":"The design focuses on creating a premium, immersive feel. The text and buttons float over the interactive animation using a \"glassmorphism\" effect, which involves background blur a","k":"component","s":"21st","c":"media/icon","g":"media","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/ethereal-ink/default/preview.1785266312718-25e1a53f-6fe5-4280-8f84-d977fe362eaf.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__field-lines-aurora","t":"Field lines aurora","d":"A full-screen, canvas-driven aurora “field lines” effect built with vanilla JavaScript noise and Bezier tracers. Particles trace graceful arcs from bottom to top, warp around the c","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/field-lines-aurora/default/preview.1758795101842.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__fire-nightmare-shader","t":"Fire nightmare shader","d":"A \"Fire Nightmare\" is a powerful and evocative concept. Let's build a shader that captures that intense feeling.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/fire-nightmare-shader/default/preview.1785270020536-854ba88b-fab7-4cde-809d-b6e0c1c8abd6.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__floating-card-gallery","t":"Floating card gallery","d":"$34","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/floating-card-gallery/default/preview.1758353681363.png","pc":"dhileepkumargm","tg":["gallery"]},{"id":"21st:dhileepkumargm__flowfield-glyphs-background","t":"Flowfield glyphs background","d":"An immersive, generative hero background that renders floating glyphs on an HTML canvas, guided by a Perlin-noise-driven flow field for a dynamic procedural art effect.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/flowfield-glyphs-background/default/preview.1785278507752-f7599b41-1c60-49ca-a530-df5567e6cbef.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__flowing-curtains","t":"Flowing curtains","d":"A full-screen, canvas-driven aurora “curtains” effect that drifts like flowing curtains of light. Built with a self-contained Simplex noise implementation, this component layers gl","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/flowing-curtains/default/preview.1785276699008-6f92bb17-ed6a-4af9-b9eb-eb532e8e226e.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__flowing-waves-shader","t":"Flowing waves shader","d":"A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful wave pattern using a custom GLSL shader. The component is interactive, a","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":54,"pl":"https://cdn.21st.dev/dhileepkumargm/flowing-waves-shader/default/preview.1785257187135-e6b3d32b-58d3-4135-abac-066d02fec336.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__fluid-text-morph","t":"Fluid text morph","d":"An interactive headline that smoothly morphs between predefined word pairs on hover and cycles through them on click, leveraging Framer Motion’s spring animations and AnimatePresen","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/fluid-text-morph/default/preview.1757573238603.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__forma","t":"Forma","d":"An interactive, liquid-metal background that responds to mouse movement.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/forma/default/preview.1755353499959.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__foxify-hero","t":"Foxify hero","d":"A responsive, animated hero component with glassmorphic header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled titl","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/foxify-hero/default/preview.1760254231742.png","pc":"dhileepkumargm","tg":["ai-chat","cta","hero"]},{"id":"21st:dhileepkumargm__foxy-hero","t":"Foxy hero","d":"A responsive, animated hero component with header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, descriptio","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":17,"pl":"https://cdn.21st.dev/dhileepkumargm/foxy-hero/default/preview.1760254328035.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__fractal-bloom-tree","t":"Fractal bloom tree","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/fractal-bloom-tree/default/preview.1756118080110.png","pc":"dhileepkumargm","tg":["file-tree","hero"]},{"id":"21st:dhileepkumargm__frosted-image-reveal","t":"Frosted image reveal","d":" A visually striking component that applies an interactive frosted glass effect to an image. The image is revealed locally as the user mouses over, creating an engaging \"defrosting","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":9,"pl":"https://cdn.21st.dev/dhileepkumargm/frosted-image-reveal/default/preview.1757566388845.png","pc":"dhileepkumargm","tg":["image"]},{"id":"21st:dhileepkumargm__frosted-image-reveal-1","t":"Frosted image reveal 1","d":"A component that applies a frosted glass effect to an image, allowing users to reveal the clear image beneath by hovering.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":9,"pl":"https://cdn.21st.dev/dhileepkumargm/frosted-image-reveal-1/default/preview.1757694705584.png","pc":"dhileepkumargm","tg":["image"]},{"id":"21st:dhileepkumargm__futuristic-alien-hero","t":"Futuristic alien hero","d":" An animated, interactive hero section built with React and three.js. It features a central metallic artifact surrounded by generative, crackling energy tendrils that react to mous","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/futuristic-alien-hero/default/preview.1754643416796.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__generative-art","t":"Generative art","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/generative-art/default/preview.1760622857488.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__generative-art-gallery","t":"Generative art gallery","d":"Let's build something different. Here is a creative and interactive \"Generative Art Gallery\" component. It showcases a collection of items in a clean grid. When you hover over a ca","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":17,"pl":"https://cdn.21st.dev/dhileepkumargm/generative-art-gallery/default/preview.1756184249287.png","pc":"dhileepkumargm","tg":["gallery"]},{"id":"21st:dhileepkumargm__geometric-sphere","t":"Geometric sphere","d":"A remixable, theme-aware hero composed of layered visuals: panning grid, volumetric haze, chromatic core glow, and a slow-rotating wireframe sphere. Supports mouse-driven parallax ","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"dhileepkumargm","st":"indexed","u":15,"pl":"https://cdn.21st.dev/dhileepkumargm/geometric-sphere/default/preview.1759930495870.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__glass-refraction-hero","t":"Glass refraction hero","d":"A fullscreen, glass-refraction style hero with animated blue gradient blobs, subtle vertical glass strips, staggered gradient title animation, description, and configurable primary","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":20,"pl":"https://cdn.21st.dev/dhileepkumargm/glass-refraction-hero/default/preview.1785280307796-79ce8124-846e-4fe6-9829-f22f8437f07f.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__glass-shine-card","t":"Glass shine card","d":"A small glassmorphism card with gradient orbs, animated shine, and gradient‑clipped headline text—great for hero fillers or minimal dashboards.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","u":10,"pl":"https://cdn.21st.dev/dhileepkumargm/glass-shine-card/default/preview.1758103800077.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__glassmorphism-sidebar","t":"Glassmorphism sidebar","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/glassmorphism-sidebar/default/preview.1756114503524.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__glitch-cursor","t":"Glitch cursor","d":"A full-screen, canvas-powered glitch field that reacts to user input. Mouse movement spawns drifting glitch blocks in cyan/blue tones, and clicking unleashes a full-screen scanline","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","u":8,"pl":"https://cdn.21st.dev/dhileepkumargm/glitch-cursor/default/preview.1758790608602.png","pc":"dhileepkumargm","tg":["cursor"]},{"id":"21st:dhileepkumargm__glitch-weaver-hero","t":"Glitch weaver hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/glitch-weaver-hero/default/preview.1756114744754.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__glowing-hero-background","t":"Glowing hero background","d":"A responsive hero section with a glowing orb background, bold headline, and call-to-action bg for hero sectoin.\n","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":2,"pl":"https://cdn.21st.dev/dhileepkumargm/glowing-hero-background/default/preview.1758605710833.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__glowing-orb-hero","t":"Glowing orb hero","d":"A responsive hero section with a glowing orb background, bold headline, and call-to-action button.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/glowing-orb-hero/default/preview.1758605298971.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__gold-map-pattern","t":"Gold map pattern","d":"A golden treasure-map inspired animated background built with CSS gradients, SVG filters, and subtle golden rain.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/gold-map-pattern/default/preview.1758604596390.png","pc":"dhileepkumargm","tg":["map"]},{"id":"21st:dhileepkumargm__gooey-button","t":"Gooey button","d":"This file imports and renders the GooeyButton. Crucially, it also includes the hidden SVG filter that the CSS relies on to create the merge effect.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/gooey-button/default/preview.1785531998492.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__grid-glow-background","t":"Grid glow background","d":"A full-screen, animated hero background that renders a subtle grid overlay and drifting radial glow blobs using HTML Canvas, React, and Framer Motion for a futuristic, immersive ef","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":42,"pl":"https://cdn.21st.dev/dhileepkumargm/grid-glow-background/default/preview.1785278008406-0b290647-3e1d-47c7-a680-da03557e3a4f.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__grid-shader","t":"Grid shader","d":"A full-screen React component that uses three.js and a custom GLSL fragment shader to render a continuously scrolling, glowing grid animation.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":14,"pl":"https://cdn.21st.dev/dhileepkumargm/grid-shader/default/preview.1785268397726-ba57882d-32cf-4dbc-badc-8dd58f8b9438.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__habit-faq-scroller","t":"Habit faq scroller","d":"A small React component set that renders a horizontally looping FAQ scroller (card-based) with smooth CSS animations. Designed to work with Tailwind classes but includes basic CSS ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"dhileepkumargm","st":"indexed","u":3,"pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/habit-faq-scroller/default/preview.1786151137958.webp","pc":"dhileepkumargm","tg":["faq","marquee"]},{"id":"21st:dhileepkumargm__hello-vietnamese-effect","t":"Hello vietnamese effect","d":"An animated SVG component displaying \"xin chào\" (Vietnamese hello) with Samsung's bold geometric design featuring angular letterforms, diamond shapes, tech accent lines, and sophis","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":2,"pl":"https://cdn.21st.dev/dhileepkumargm/hello-vietnamese-effect/default/preview.1785357749936-eb2d975a-8330-4b7a-ab79-6ef54898bdd9.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__hero-section","t":"Hero section","d":"A visually polished 2D  wave that brings a webpage to life.  It supports light and dark themes and features dramatic, multi-point lighting.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":11,"pl":"https://cdn.21st.dev/dhileepkumargm/hero-section/default/preview.1755444369582.png","pc":"dhileepkumargm","tg":["cta","features","hero"]},{"id":"21st:dhileepkumargm__hexagonal-puls-shader","t":"Hexagonal puls shader","d":"the hexagonal tiling patterns and glowing effects often seen in advanced shaders on Shadermind and in resources like \"The Book of Shaders,\" I have created an entirely new shader th","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/hexagonal-puls-shader/default/preview.1785270943939-efd8c53d-1510-4a64-ac41-27e7948e7910.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__holographic-card","t":"Holographic card","d":"An interactive holographic UI card component that reacts to cursor movement with subtle 3D tilt, dynamic glow, and iridescent sheen for a futuristic, tactile micro-interaction.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","u":125,"pl":"https://cdn.21st.dev/dhileepkumargm/holographic-card/default/preview.1760953529748.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__holographic-interface","t":"Holographic interface","d":"A futuristic Bento grid with 3D tilt, spotlight tracking, and animated aurora background. Each card responds to mouse movement with perspective transforms and radial glow effects. ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"dhileepkumargm","st":"indexed","u":34,"pl":"https://cdn.21st.dev/dhileepkumargm/holographic-interface/default/preview.1758732292492.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__hyperdrive-hero","t":"Hyperdrive hero","d":"This new concept is called \"Hyperdrive.\" It features an interactive starfield that reacts to your mouse. As you move your cursor towards the center of the screen, the stars streak ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":33,"pl":"https://cdn.21st.dev/dhileepkumargm/hyperdrive-hero/default/preview.1756116142494.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__hyperspace-warp-drive","t":"Hyperspace warp drive","d":"A GPU-accelerated starfield hero built with Three.js and GLSL shaders, simulating a warp-speed hyperspace effect.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/hyperspace-warp-drive/default/preview.1758607075751.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__img-reveal","t":"Img reveal","d":"LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/img-reveal/default/preview.1785281659729-bad27e24-c631-49ea-9fbc-569dfaa4f510.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__infinite-plane","t":"Infinite plane","d":"A React UI component that ray-marches an infinite, animated checkered plane using WebGL2 and GLSL.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":18,"pl":"https://cdn.21st.dev/dhileepkumargm/infinite-plane/default/preview.1785270215780-ea334c47-9783-4303-93d4-2c2a05ff7560.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__interactive-3d-analytics-dashboard-card","t":"Interactive 3d analytics dashboard card","d":"Component Features\n3D Perspective Effects:\n\nReal-time perspective transformation based on mouse position\nSubtle rotation and scaling on hover for a tactile feel\nAdvanced Visual Des","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"dhileepkumargm","st":"indexed","u":21,"pl":"https://cdn.21st.dev/dhileepkumargm/interactive-3d-analytics-dashboard-card/default/preview.1785275322034-07b0eb64-a1d5-4160-a302-c7a574111116.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__interactive-3d-character","t":"Interactive 3d character","d":"An interactive 3D character built with Zdog.js and GSAP. It follows the mouse cursor and features idle animations like breathing and looking around.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","u":22,"pl":"https://cdn.21st.dev/dhileepkumargm/interactive-3d-character/default/preview.1756733344620.png","pc":"dhileepkumargm","tg":["cursor"]},{"id":"21st:dhileepkumargm__interactive-command-card","t":"Interactive command card","d":"A self-contained card that opens a searchable command palette for quick actions. It's themeable, accessible, and follows modern UI/UX patterns.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/interactive-command-card/default/preview.1757748605946.png","pc":"dhileepkumargm","tg":["search"]},{"id":"21st:dhileepkumargm__interactive-frosted-glass-card","t":"Interactive frosted glass card","d":"new version features a mesmerizing field of glowing particles that drift and shimmer behind the card. The particles also react to your cursor's movement, creating a deeper sense of","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","u":75,"pl":"https://cdn.21st.dev/dhileepkumargm/interactive-frosted-glass-card/default/preview.1756181307116.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__interactive-product-card","t":"Interactive product card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/interactive-product-card/default/preview.1756185317137.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__interactive-shader","t":"Interactive shader","d":"component renders a dynamic, flowing energy effect using WebGL shaders. I've integrated a sleek UI control panel that allows you to manipulate the shader's parameters in real-time.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":16,"pl":"https://cdn.21st.dev/dhileepkumargm/interactive-shader/default/preview.1785262781122-43eecb44-da41-4bcf-9190-b2f14198f82a.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__interactive-synapse-network","t":"Interactive synapse network","d":"A full-screen canvas-driven network of drifting nodes that light up on cursor proximity and send pulsing signals along their connections. Built with React and plain Canvas, this co","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/interactive-synapse-network/default/preview.1758791931794.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhileepkumargm__interactive-waves","t":"Interactive waves","d":" this Component includes the custom AWaves element, the necessary styling, and the interactive canvas. I also included a standard Perlin noise generator that was needed for the wav","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/interactive-waves/default/preview.1756876329976.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__interactive-waves-hero","t":"Interactive waves hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/interactive-waves-hero/default/preview.1785267919673-2ad55277-fc1d-44b0-8695-43f621ed7178.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__iridescent-braided-shader","t":"Iridescent braided shader","d":"full-screen React shader component that renders a dynamic, braided iridescent background using Three.js and a custom GLSL fragment shader. It produces flowing, half‑circle braided ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/iridescent-braided-shader/default/preview.1785282110380-c6228d70-e074-4acf-b5e3-b167940684ea.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__island-pattern","t":"Island pattern","d":"Animated CSS + SVG island/ocean background with rain and hand-drawn wave distortion","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/island-pattern/default/preview.1758603410681.png","pc":"dhileepkumargm","tg":["map"]},{"id":"21st:dhileepkumargm__kaleidoscopic-shader","t":"Kaleidoscopic shader","d":"polar coordinates to create the repeating segments and implemented a high-quality color palette function, as described by Inigo Quilez, to produce the smooth, psychedelic color tra","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/kaleidoscopic-shader/default/preview.1785270322931-796b8fe9-222f-46cb-9bbe-e6a8b5317f34.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__kinetic-orb-loader","t":"Kinetic orb loader","d":"styles for the loader, including the rotation and morphing animations.","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/kinetic-orb-loader/default/preview.1760954485122.png","pc":"dhileepkumargm","tg":["spinner"]},{"id":"21st:dhileepkumargm__kinetic-scroll-gallery","t":"Kinetic scroll gallery","d":"A responsive image grid that dynamically skews each photo based on your scroll velocity, creating a tactile, kinetic distortion effect powered by Framer Motion.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":21,"pl":"https://cdn.21st.dev/dhileepkumargm/kinetic-scroll-gallery/default/preview.1757572096742.png","pc":"dhileepkumargm","tg":["gallery","scroll-area"]},{"id":"21st:dhileepkumargm__light-up-shader","t":"Light up shader","d":"A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful line light up pattern using a custom GLSL shader. The component is inter","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":26,"pl":"https://cdn.21st.dev/dhileepkumargm/light-up-shader/default/preview.1785273166496-688e7923-fcb6-452d-b800-1a988b331798.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__lining-waves-shader","t":"Lining waves shader","d":"A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful wave line pattern using a custom GLSL shader. The component is interacti","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":21,"pl":"https://cdn.21st.dev/dhileepkumargm/lining-waves-shader/default/preview.1785272529518-22e0d6e5-6af7-42b3-8f46-71f348a55298.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-aurora","t":"Liquid aurora","d":"A dynamic, morphing aurora background built with CSS gradients and keyframe animations. Perfect for hero sections or full-screen backdrops.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":20,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-aurora/default/preview.1758606110461.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__liquid-crystal","t":"Liquid crystal","d":"t renders a dynamic, noise-based visual with a \"warp\" effect that reacts to your mouse movements. You can control parameters like hue, speed, noise intensity, and the warp amount i","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"dhileepkumargm","st":"indexed","u":21,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-crystal/default/preview.1785263835736-dfa1072b-29f4-44d2-82bf-fbcab01ac386.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-crystal-shader","t":"Liquid crystal shader","d":"A React UI component that renders morphing, glowing liquid blobs—fluid crystal-like shapes that merge and separate—using WebGL2 and GLSL SDF techniques.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":57,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-crystal-shader/default/preview.1785270687707-ea1def9c-e960-4ec5-bc20-62d55975ba36.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-metal","t":"Liquid metal","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/liquid-metal/default/preview.1785261159114-0bfbb560-4b6a-4e5d-bf06-be9e3f2b7ac9.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-metal-vortex","t":"Liquid metal vortex","d":"This component uses raymarching to render a swirling vortex of reflective, metallic fluid. The UI allows you to control the vortex's color hue, the speed of its rotation and turbul","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":23,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-metal-vortex/default/preview.1785265841926-8d0485f1-b509-4bae-8f4b-fb653f2c918f.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-neon-shader","t":"Liquid neon shader","d":"A React UI component that renders morphing, glowing liquid blobs—fluid crystal-like shapes that merge and separate—using WebGL2 and GLSL SDF techniques.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":13,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-neon-shader/default/preview.1785280626110-367833c2-cfef-4c70-b33f-17f4f12b5bab.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-reveal","t":"Liquid reveal","d":"LiquidReveal is a React component that animates image loading with a dynamic liquid wipe effect. It uses SVG filters to simulate fluid distortion and waviness, creating a visually ","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-reveal/default/preview.1785281562386-380ab6f4-3ce5-478c-8289-5b77a4c1dd04.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__liquid-shader","t":"Liquid shader","d":"A full-screen animated background component created with React and Three.js. It renders a dynamic, colorful wave liquid pattern using a custom GLSL shader. The component is interac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":241,"pl":"https://cdn.21st.dev/dhileepkumargm/liquid-shader/default/preview.1785272865004-dcbb7c45-1b69-4840-911f-882aa8cf9617.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__lissajous-nebula","t":"Lissajous nebula","d":"A full-screen, animated Lissajous-pattern nebula shader background for React, powered by Three.js..","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/lissajous-nebula/default/preview.1758290968675.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__lissajous-nebula-shader","t":"Lissajous nebula shader","d":"A full-screen, dynamic nebula background generated from Lissajous curves and radial swirls. Loads Three.js from CDN, and cycles through a custom color palette.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/lissajous-nebula-shader/default/preview.1785274204678-3503e530-e798-4260-8a7e-2c7fde974ecd.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-ferrofluid","t":"Living ferrofluid","d":"A high-contrast, metallic hero background using SVG filters and morphing globules to simulate ferrofluid dynamics.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/living-ferrofluid/default/preview.1758606610826.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-fluid-background","t":"Living fluid background","d":"A full-screen interactive GLSL fluid simulation powered by Three.js.. Mouse movement distorts a dynamic noise field, creating mesmerizing, real-time visual effects. Perfect for her","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":25,"pl":"https://cdn.21st.dev/dhileepkumargm/living-fluid-background/default/preview.1758727410263.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-fluid-hero","t":"Living fluid hero","d":"A unique, theme-aware hero section featuring an interactive, 3D fluid entity that morphs and flows in response to the user's cursor. It's designed to create a luxurious and memorab","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":20,"pl":"https://cdn.21st.dev/dhileepkumargm/living-fluid-hero/default/preview.1755076976059.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-nebula","t":"Living nebula","d":" shader simulates a breathing, organic nebula in deep space. It features swirling, multi-layered gases and a field of twinkling stars. The animation is interactive, reacting to you","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":31,"pl":"https://cdn.21st.dev/dhileepkumargm/living-nebula/default/preview.1756053857007.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-nebula-1","t":"Living nebula 1","d":"A full-screen, canvas-driven nebula simulation that swirls organic, ethereal gas clouds in real time. Built with a self-contained Simplex noise engine, particles drift and fade, re","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/living-nebula-1/default/preview.1758794541285.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-nebula-2","t":"Living nebula 2","d":"A full-screen, canvas-driven star nursery that pulses with creative energy. Particles emit from the center point, drift outward under drag, and fade in and out to simulate a living","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/living-nebula-2/default/preview.1758795552266.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__living-origami-bg","t":"Living origami bg","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/living-origami-bg/default/preview.1758730669680.png","pc":"dhileepkumargm","tg":["background"]},{"id":"21st:dhileepkumargm__living-vine-background","t":"Living vine background","d":"A full-screen, interactive vine simulation that traces the mouse path and autonomously sprouts tendril branches. Built on HTML canvas, this generative art piece evokes organic grow","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/living-vine-background/default/preview.1758791000924.png","pc":"dhileepkumargm","tg":["cursor","hero"]},{"id":"21st:dhileepkumargm__loading-animation","t":"Loading animation","d":"This is a visually striking loading animation where letters dynamically fly into place to form words, creating a high-energy, futuristic feel. It's perfect for a loading screen or ","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"dhileepkumargm","st":"indexed","u":28,"pl":"https://cdn.21st.dev/dhileepkumargm/loading-animation/default/preview.1756117926923.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__logo-scroller","t":"Logo scroller","d":"LogoScroller is a reusable React component that creates a smooth, infinitely scrolling horizontal carousel of brand names or logos. It's perfect for showcasing partners, sponsors, ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dhileepkumargm","st":"indexed","u":2,"pl":"https://cdn.21st.dev/dhileepkumargm/logo-scroller/default/preview.1761287234270.png","pc":"dhileepkumargm","tg":["marquee","scroll-area"]},{"id":"21st:dhileepkumargm__magnetic-dock","t":"Magnetic dock","d":"A fluid, interactive icon dock that “magnetically” expands icons as the cursor approaches, built with React and Framer Motion for smooth, springy hover effects.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"dhileepkumargm","st":"indexed","u":43,"pl":"https://cdn.21st.dev/dhileepkumargm/magnetic-dock/default/preview.1757571094013.png","pc":"dhileepkumargm","tg":["dock"]},{"id":"21st:dhileepkumargm__martrix-shader","t":"Martrix shader","d":"Celestial Matrix\" shader generates a grid of shimmering, animated characters that rain down the screen. It's interactive, reacting to your mouse movements by creating a warp effect","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dhileepkumargm","st":"indexed","u":55,"pl":"https://cdn.21st.dev/dhileepkumargm/martrix-shader/default/preview.1785258822571-e1ce57bc-d62b-4d1e-b699-af6dc11cd226.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__metaballs","t":"Metaballs","d":"This shader uses Signed Distance Functions (SDFs) to create several \"metaballs\" that move, merge, and split in a smooth, liquid-like fashion. The colors are generated procedurally ","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":8,"pl":"https://cdn.21st.dev/dhileepkumargm/metaballs/default/preview.1785270596803-72c000fe-0b07-4f39-bfe6-8f212dfed7bf.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__modern-feature-grid","t":"Modern feature grid","d":"A responsive and theme-able grid component to showcase product features, styled with a modern glassmorphism effect and an interactive spotlight background.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":31,"pl":"https://cdn.21st.dev/dhileepkumargm/modern-feature-grid/default/preview.1785271125478-c8574378-2d1f-4b72-b8e2-9df22f715d80.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__molten-core-shader","t":"Molten core shader","d":"A dynamic, animated WebGL shader that simulates the turbulent, glowing surface of lava. Built with React and Three.js.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":26,"pl":"https://cdn.21st.dev/dhileepkumargm/molten-core-shader/default/preview.1785258226634-01e976ef-e874-4930-b8aa-8f0a9235e66b.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__mountain-scene","t":"Mountain scene","d":"A dynamic 3D mountain landscape built with Three.js and React. The terrain is generated using layered Perlin noise for natural undulations, rendered as a solid surface (no wirefram","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":156,"pl":"https://cdn.21st.dev/dhileepkumargm/mountain-scene/default/preview.1765275034023.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__mountainous-shader","t":"Mountainous shader","d":"This one generates a moving, mountainous fractal landscape with a glowing sun.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/mountainous-shader/default/preview.1785269587240-5b3aa04e-8333-4232-9af8-87a880801c8e.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__multi-shape","t":"Multi shape","d":"Multi-Shape Light form Hero ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/multi-shape/default/preview.1755175151307.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__multi-step-wizard","t":"Multi step wizard","d":"Features\nThis multi-step onboarding wizard includes:\n\nResponsive Design - Works beautifully on mobile and desktop\nProgress Tracking - Visual step indicator with completed checkmark","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"dhileepkumargm","st":"indexed","u":4,"pl":"https://cdn.21st.dev/dhileepkumargm/multi-step-wizard/default/preview.1758347569108.png","pc":"dhileepkumargm","tg":["onboarding","steps"]},{"id":"21st:dhileepkumargm__multiple-form","t":"Multiple form","d":"Features\nProgress Indicator: Visual steps tracker with completed, current, and pending steps\nForm Validation: Client-side validation with clear error messages\nSmooth Animations: Pa","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"dhileepkumargm","st":"indexed","u":15,"pl":"https://cdn.21st.dev/dhileepkumargm/multiple-form/default/preview.1758344695484.png","pc":"dhileepkumargm","tg":["steps"]},{"id":"21st:dhileepkumargm__music-player-card","t":"Music player card","d":"A sleek, responsive music player card built in React. Displays album art, track details, volume bars, and full playback controls (play/pause, skip, time slider).","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/music-player-card/default/preview.1758105751544.png","pc":"dhileepkumargm","tg":["progress"]},{"id":"21st:dhileepkumargm__nebula-forgery","t":"Nebula forgery","d":"A procedurally animated starburst effect simulating a swirling nebula. Streams of particles erupt from a pulsing proto-star, forming dynamic, layered trails with color-shifting fad","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/nebula-forgery/default/preview.1758728750204.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__neno-shader","t":"Neno shader","d":" transforms the simple pulsing rings into a dynamic, fluid animation. The rings now warp and breathe, the entire scene slowly rotates, and a rich, shifting color palette of electri","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","u":43,"pl":"https://cdn.21st.dev/dhileepkumargm/neno-shader/default/preview.1756560336037.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__neon-crystal-city","t":"Neon crystal city","d":"A one-liner that captures what it is and why it’s cool. e.g. “An infinite ray-marched 3D cityscape with neon glow and mouse-controlled camera.”","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/neon-crystal-city/default/preview.1756991344921.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__neon-loader","t":"Neon loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/neon-loader/default/preview.1758603806556.png","pc":"dhileepkumargm","tg":["spinner"]},{"id":"21st:dhileepkumargm__neural-interface","t":"Neural interface","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/neural-interface/default/preview.1749545927616.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__neurons-hero","t":"Neurons hero","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/neurons-hero/default/preview.1756116907714.png","pc":"dhileepkumargm","tg":["ai-chat"]},{"id":"21st:dhileepkumargm__parallax-shader","t":"Parallax shader","d":"The SCSS logic has been converted into standard CSS so it will run in any modern browser.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/parallax-shader/default/preview.1785268788039-74d0b661-059e-479b-97cc-bd960f0c6ed8.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__particle-background","t":"Particle background","d":"A React component that renders a full-screen, interactive particle system using p5.js.. Particles gently follow the mouse pointer, supports light/dark themes, resizes responsively,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/particle-background/default/preview.1785279633025-17f3c6d4-add2-4bc9-916a-1dc45e11666a.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__particle-text-canvas","t":"Particle text canvas","d":"A full-screen, canvas-driven particle system that spells out specified text and lets the cursor dynamically repel the letters’ particles. It captures pixel data from bold, gradient","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","u":49,"pl":"https://cdn.21st.dev/dhileepkumargm/particle-text-canvas/default/preview.1785277767141-5514292c-2968-4e7b-862a-b73f53940acf.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pattern-shader","t":"Pattern shader","d":"This new shader will feature a rotating, repeating pattern of shapes, creating a kaleidoscopic, hypnotic effect. The colors will shift and evolve over time for a dynamic feel.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":15,"pl":"https://cdn.21st.dev/dhileepkumargm/pattern-shader/default/preview.1785269379767-953f1d87-5454-46a2-98de-158df9bf55a6.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pick-a-card","t":"Pick a card","d":"$36","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/pick-a-card/default/preview.1748442982435.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pixel-rocket-voyager","t":"Pixel rocket voyager","d":"A fully interactive, theme-aware hero section featuring a 3D pixel-art rocket that the user can fly through a field of crypto-coin asteroids.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":11,"pl":"https://cdn.21st.dev/dhileepkumargm/pixel-rocket-voyager/default/preview.1755080179465.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__poor-ghost","t":"Poor ghost","d":"Interactive Ghost Character you originally requested. The model has been updated to the glowing, ethereal figure with a flowing tail, and the animation has been changed to a gentle","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":7,"pl":"https://cdn.21st.dev/dhileepkumargm/poor-ghost/default/preview.1756789182895.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__premium-auth","t":"Premium auth","d":"A modern, animated authentication component with a beautiful glass-morphism design. Features include:\nToggle between Login and Sign Up modes\nForm validation with error handling\nPas","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"dhileepkumargm","st":"indexed","u":75,"pl":"https://cdn.21st.dev/dhileepkumargm/premium-auth/default/preview.1749020711825.png","pc":"dhileepkumargm","tg":["form","sign-up"]},{"id":"21st:dhileepkumargm__premium-process-timeline","t":"Premium process timeline","d":"$3c","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/premium-process-timeline/default/preview.1749025732958.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__premium-testimonials","t":"Premium testimonials","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/premium-testimonials/default/preview.1749112085770.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pricing-for-teams","t":"Pricing for teams","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/pricing-for-teams/default/preview.1757219867452.png","pc":"dhileepkumargm","tg":["cta","pricing-section","table"]},{"id":"21st:dhileepkumargm__pricing-page","t":"Pricing page","d":"A glass-morphism styled pricing section built in React and Tailwind CSS. It displays three plans (Starter, Pro, Enterprise) with rotating gradient borders, inline SVG icons, featur","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/pricing-page/default/preview.1757577716942.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pricing-tiers","t":"Pricing tiers","d":"PricingTiers is a reusable React component system for displaying pricing plans in a clean, responsive layout. It supports featured plans, dynamic feature lists, and customizable st","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/pricing-tiers/default/preview.1761288782235.png","pc":"dhileepkumargm","tg":["pricing-section","table"]},{"id":"21st:dhileepkumargm__prism-bloom-shader","t":"Prism bloom shader","d":"A full-screen, petal-like bloom shader that swirls and pulses, perfect for dynamic background effects in React apps. Exposes swirlCount and swirlSpeed props for runtime customizati","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/prism-bloom-shader/default/preview.1785273699478-f74719e9-f4aa-4be4-8296-bc295da3e6cb.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__profile-card","t":"Profile card","d":"An interactive, 3D-tilt profile card component featuring an animated status cycle, tier-based glow effects, a sliding glass panel, and a customizable action button.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/profile-card/default/preview.1759832360385.png","pc":"dhileepkumargm","tg":["profile"]},{"id":"21st:dhileepkumargm__pulsar-grid-background","t":"Pulsar grid background","d":"An interactive, full-screen grid of pulsating dots that responds to mouse movement—creating a dynamic, immersive hero background effect.\n\n","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":18,"pl":"https://cdn.21st.dev/dhileepkumargm/pulsar-grid-background/default/preview.1759058295644.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__pulse-fit-hero","t":"Pulse fit hero","d":"A responsive, animated hero component with header, floating blurred gradient backgrounds, badge support, configurable navigation and auth buttons, gradient-styled title, descriptio","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":147,"pl":"https://cdn.21st.dev/dhileepkumargm/pulse-fit-hero/default/preview.1760255122323.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__pulsing-geometric-dream","t":"Pulsing geometric dream","d":"runs a GLSL fragment shader. This shader, which I'm calling \"Pulsing Geometric Dream,\" uses signed distance functions (SDFs) for shapes and a smooth color palette function, techniq","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"dhileepkumargm","st":"indexed","u":15,"pl":"https://cdn.21st.dev/dhileepkumargm/pulsing-geometric-dream/default/preview.1756988271735.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__quantum-grid-hero","t":"Quantum grid hero","d":" \"Quantum Grid Hero\" features an interactive 3D grid of cubes that light up and ripple in response to your cursor's movement. The background is a deep, futuristic dark theme, and t","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/quantum-grid-hero/default/preview.1756112408214.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__quantum-nebula","t":"Quantum nebula","d":"A breathtaking Three.js particle system featuring 50,000 interactive particles with physics-based curl noise simulation and bloom post-processing. This advanced WebGL component cre","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/quantum-nebula/default/preview.1760598462459.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__rainbow-cursor","t":"Rainbow cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/rainbow-cursor/default/preview.1754645683539.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__react-tailwind-image-gallery","t":"React tailwind image gallery","d":"A responsive React component for displaying an image gallery with hover-zoom effects, customizable grid spans, and a fullscreen modal lightbox—built with Tailwind CSS.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dhileepkumargm","st":"indexed","u":76,"pl":"https://cdn.21st.dev/dhileepkumargm/react-tailwind-image-gallery/default/preview.1758250610489.png","pc":"dhileepkumargm","tg":["gallery","modal"]},{"id":"21st:dhileepkumargm__reaction-diffusion-genesis","t":"Reaction diffusion genesis","k":"component","s":"21st","c":"data-display/diff","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/reaction-diffusion-genesis/default/preview.1758727744491.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__refer-and-win-banner","t":"Refer and win banner","d":"A customizable, animated banner component featuring floating paper airplanes and decorative checkmarks—ideal for referral, promotional, or announcement sections.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/refer-and-win-banner/default/preview.1759830926309.png","pc":"dhileepkumargm","tg":["announcement"]},{"id":"21st:dhileepkumargm__retrying","t":"Retrying","d":"Retrying Back Gourd Hero ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":22,"pl":"https://cdn.21st.dev/dhileepkumargm/retrying/default/preview.1755177691355.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__reward-categories","t":"Reward categories","d":"A customizable widget that displays reward categories as interactive artifacts, complete with hover animations and optional confetti celebration on click.","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":2,"pl":"https://cdn.21st.dev/dhileepkumargm/reward-categories/default/preview.1785280127897-4327c0cc-3d87-4ac0-b277-aaf1419a6551.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__rhythmic-ripples-background","t":"Rhythmic ripples background","d":"A full-screen, animated hero background that draws expanding ripple waves on an HTML canvas for a serene, immersive UI effect.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":7,"pl":"https://cdn.21st.dev/dhileepkumargm/rhythmic-ripples-background/default/preview.1785278210762-123c7fee-a0db-4873-a7b0-06ac5ff6417f.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__rocket-loader","t":"Rocket loader","d":"Acss and  React loader animation featuring a rocket speeder, drifting clouds, and speed trails. Perfect for splash screens, loading states, or playful UI transitions.","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/rocket-loader/default/preview.1758601681060.png","pc":"dhileepkumargm","tg":["spinner"]},{"id":"21st:dhileepkumargm__scrolling-holographic-card-feed","t":"Scrolling holographic card feed","d":"An animated, futuristic UI component featuring multiple rows of holographic-style cards that scroll infinitely in a continuous loop. Includes a dynamic starfield background and acc","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/scrolling-holographic-card-feed/default/preview.1785274730072-f3654395-3ed7-4057-8261-3d907f282b1c.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__sdf-dreamscape","t":"Sdf dreamscape","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/sdf-dreamscape/default/preview.1785264960470-98a49e9f-44be-4d9b-8a0a-1e7ec7e32111.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__sentinel-core","t":"Sentinel core","d":"An interactive, cybernetic eye that tracks your cursor's movement across the screen. It features a dynamic iris, a periodic blinking animation, and glowing circuit details to creat","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/sentinel-core/default/preview.1760956875511.png","pc":"dhileepkumargm","tg":["cursor"]},{"id":"21st:dhileepkumargm__shader-animation","t":"Shader animation","d":"A React UI component that renders a full-screen WebGL shader animation using Three.js, showcasing a dynamic cosmic singularity effect.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":23,"pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/shader-animation/default/preview.1785527749265.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__shader-background","t":"Shader background","d":"A theme-aware and accessible animated background component powered by a WebGL shader. It provides a dynamic, noise-based visual effect that can be customized with props.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/shader-background/default/preview.1756277437081.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__shatterable-glass-card","t":"Shatterable glass card","d":"A glass-style card that you can literally crack and shatter on click—complete with Voronoi-based shards rendered to canvas, wobbling SVG cracks, and dynamic audio feedback via Tone","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/shatterable-glass-card/default/preview.1757574851948.png","pc":"dhileepkumargm","tg":["card"]},{"id":"21st:dhileepkumargm__shutter-reveal","t":"Shutter reveal","d":"Shutter Reveal is a React component that animates image loading using vertical shutter panels. It creates a cinematic reveal effect with customizable direction, color, timing, and ","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/shutter-reveal/default/preview.1785281480522-30a7d499-1bac-4a3f-8d84-4f58af03d670.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__signal-authentication","t":"Signal authentication","d":"A full-screen, generative art login experience where a dynamic soundwave visualization reacts in the background, providing a futuristic and secure feel to the authentication proces","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/signal-authentication/default/preview.1785280991311-e5a625ff-1cf3-4959-8c40-50d8a8dfe0da.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__sketchbook-reveal-card","t":"Sketchbook reveal card","d":"A scroll-triggered reveal card that hand-draws a wobbling SVG border, animates a lightbulb icon, text lines, and a button into view as you scroll.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/sketchbook-reveal-card/default/preview.1757573459807.png","pc":"dhileepkumargm","tg":["scroll-area"]},{"id":"21st:dhileepkumargm__sonic-waveform","t":"Sonic waveform","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/sonic-waveform/default/preview.1756117513086.png","pc":"dhileepkumargm","tg":["data-visualization","hero"]},{"id":"21st:dhileepkumargm__spiral-shader","t":"Spiral shader","d":"this shader transforms the energy into a mesmerizing, ever-twisting spiral. The waves of color now flow from the center outwards in a hypnotic vortex, creating a sense of infinite ","k":"component","s":"21st","c":"status/loader","g":"status","a":"dhileepkumargm","st":"indexed","u":24,"pl":"https://cdn.21st.dev/dhileepkumargm/spiral-shader/default/preview.1785267358301-ec63eab7-22b7-4649-8eb3-10840cb3127d.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__spotlight-background","t":"Spotlight background","d":"A dramatic, animated background composed of multiple soft “spotlight” blobs that glide and rotate to create depth and movement. Ideal for hero sections or immersive UI backdrops.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":118,"pl":"https://cdn.21st.dev/dhileepkumargm/spotlight-background/default/preview.1759055358938.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhileepkumargm__spotlight-button","t":"Spotlight button","d":" A premium, high-quality button featuring a dynamic spotlight effect that follows the user's mouse cursor, creating an engaging and interactive experience.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/spotlight-button/default/preview.1755356702609.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__spotlight-cta","t":"Spotlight cta","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/spotlight-cta/default/preview.1754927223300.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__symmetry-engine","t":"Symmetry engine","d":"A real-time, interactive fractal world rendered with ray marching and domain folding. This component simulates infinite, self-similar structures using pure mathematical transformat","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/dhileepkumargm/symmetry-engine/default/preview.1758730467099.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__synapse-background","t":"Synapse background","d":"An interactive 3D particle network background built with Three.js.. Particles drift in space, connect via subtle lines when in proximity, and pulse to magenta when you hover nearby","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/synapse-background/default/preview.1785470476100-15919c91-71c4-4c10-a524-c5ebb44080e0.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__tech-solutions-hero-section","t":"Tech solutions hero section","d":"A responsive, grid-based showcase component for HAOS Tech Solutions with a customizable registry-ad background slot, dark-mode support, and accessible controls.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":39,"pl":"https://cdn.21st.dev/dhileepkumargm/tech-solutions-hero-section/default/preview.1759148358120.png","pc":"dhileepkumargm","tg":["grid","hero","progress"]},{"id":"21st:dhileepkumargm__terminal-bento-grid","t":"Terminal bento grid","d":"A retro-themed Bento grid styled like a classic CRT terminal. Features scanline overlays, blinking cursors, and green phosphor glow. Ideal for dashboards, status panels, or nostalg","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/terminal-bento-grid/default/preview.1758728395464.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__text-effect","t":"Text effect","d":"A collection of animated greeting components featuring Samsung's distinctive angular design language with geometric letterforms, spring animations, and tech-forward styling. Includ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","u":33,"pl":"https://cdn.21st.dev/dhileepkumargm/text-effect/default/preview.1785357981956-87284a85-1548-4fb3-a558-34ff69eba329.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__ultra-quality-data-table","t":"Ultra quality data table","d":"A modern, responsive React data table built with Tailwind CSS featuring client-side search, sortable columns, pagination, zebra stripes, and dark/light theming for ultra-polished U","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/ultra-quality-data-table/default/preview.1758341661882.png","pc":"dhileepkumargm","tg":["badge","pagination","search","table"]},{"id":"21st:dhileepkumargm__ultra-quality-kanban-board","t":"Ultra quality kanban board","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/ultra-quality-kanban-board/default/preview.1758353171097.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__ultra-quality-showcase-grid","t":"Ultra quality showcase grid","d":"A never-before-seen, high-impact React feature showcase grid built with Tailwind CSS and Framer Motion. It delivers a mosaic layout with one large hero card and multiple supporting","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"dhileepkumargm","st":"indexed","u":5,"pl":"https://cdn.21st.dev/dhileepkumargm/ultra-quality-showcase-grid/default/preview.1758350193547.png","pc":"dhileepkumargm","tg":["features"]},{"id":"21st:dhileepkumargm__ultra-quality-spreadsheet","t":"Ultra quality spreadsheet","d":"A never-before-seen, ultra-rich React spreadsheet component built with Tailwind CSS. Supports editable cells, sticky headers, keyboard navigation, basic formulas (=SUM(range)), cop","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/ultra-quality-spreadsheet/default/preview.1758351001189.png","pc":"dhileepkumargm","tg":["grid","table"]},{"id":"21st:dhileepkumargm__vertical-logo-scroller","t":"Vertical logo scroller","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/vertical-logo-scroller/default/preview.1786017493918.webp","pc":"dhileepkumargm","tg":["clients","marquee","scroll-area"]},{"id":"21st:dhileepkumargm__volumetric-glitch","t":"Volumetric glitch","d":"A remixable, theme-aware hero background with subtle SVG-based glitch distortion, panning grid, volumetric glow flares, and prominent foreground CTAs. Visuals are fully tunable via","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":6,"pl":"https://cdn.21st.dev/dhileepkumargm/volumetric-glitch/default/preview.1759931947312.png","pc":"dhileepkumargm","tg":["cta","hero"]},{"id":"21st:dhileepkumargm__warp-drive-shader","t":"Warp drive shader","d":"This \"Warp Drive\" shader simulates the visual spectacle of traveling through a wormhole. It transforms the 2D plane into a dynamic, 3D-like tunnel of streaking starlight. The anima","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","u":40,"pl":"https://cdn.21st.dev/dhileepkumargm/warp-drive-shader/default/preview.1785259296211-0abc9e4f-3264-4b59-9180-91ee76070052.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__warp-gradient","t":"Warp gradient","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/warp-gradient/default/preview.1785281773191-cf985faf-0664-4eb8-b48e-376365e2835f.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__warp-tunnel","t":"Warp tunnel","d":"A React UI component that renders an infinite, color-shifting warp-speed tunnel using WebGL2 and GLSL shaders.","k":"component","s":"21st","c":"other","g":"other","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/warp-tunnel/default/preview.1785270127723-981e0073-4b7c-4e3f-a25d-993eff192544.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__wave-text-canvas","t":"Wave text canvas","d":"A React component that renders bold, “WAVES” lettering as a flowing wave effect on HTML5 canvas. It uses a mask to detect text pixels and draws vertical scanlines that oscillate in","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dhileepkumargm","st":"indexed","u":7,"pl":"https://cdn.21st.dev/dhileepkumargm/wave-text-canvas/default/preview.1785277493150-8c8c3413-3075-4625-9261-7b69d141fcd4.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__wavy-shader-animation","t":"Wavy shader animation","d":"A full-screen React component that uses three.js and a custom GLSL fragment shader to render a dynamic, metallic, wavy surface animation.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/dhileepkumargm/wavy-shader-animation/default/preview.1785268167700-4032d937-97cd-497b-bc1b-79a84f586f80.png","pc":"dhileepkumargm"},{"id":"21st:dhileepkumargm__woven-light-hero","t":"Woven light hero","d":"A fully interactive, theme-aware hero section featuring a 3D object woven from thousands of light particles that react to the user's cursor.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"dhileepkumargm","st":"indexed","u":173,"pl":"https://cdn.21st.dev/dhileepkumargm/woven-light-hero/default/preview.1755152006229.png","pc":"dhileepkumargm","tg":["hero"]},{"id":"21st:dhmnpunit__mac-os-dock","t":"Mac os dock","d":"An authentic, responsive React dock component that replicates the macOS dock experience with smooth magnification effects, GSAP animations, and real macOS-style interactions. Perfe","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"dhmnpunit","st":"indexed","u":373,"pl":"https://cdn.21st.dev/dhmnpunit/mac-os-dock/default/preview.1749091387357.png","pc":"dhmnpunit","tg":["dock","navigation-menu"]},{"id":"21st:dhmnpunit__mac-os-menu-bar","t":"Mac os menu bar","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"dhmnpunit","st":"indexed","u":83,"pl":"https://cdn.21st.dev/dhmnpunit/mac-os-menu-bar/default/preview.1761259686940.png","pc":"dhmnpunit","tg":["dropdown","menu"]},{"id":"21st:dialkit__dialkit","t":"Dialkit","d":"A floating control panel to tune animation and UI parameters in real time. Wire sliders, toggles, color pickers, spring editors and easing curves directly to your values, organize ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"dialkit","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dialkit/default/preview.1783607676608.png","pc":"dialkit","tg":["slider"]},{"id":"21st:diceui__banner","t":"Banner","d":"A dismissible banner for site-wide announcements and status messages, with stacking, priority queueing, and default/info/success/warning/destructive variants.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"diceui","st":"indexed","u":24,"pl":"https://cdn.21st.dev/diceui/banner/default/preview.1784735657341-a28bb400-862d-4da1-bc0d-e11e2bd6e9de.png","pc":"diceui","tg":["announcement","alert","notification"]},{"id":"21st:diceui__circular-progress","t":"Circular progress","d":"A composable circular progress indicator with track, range, and value text parts, supporting determinate and indeterminate states.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"diceui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/diceui/circular-progress/default/preview.1786705771377-979bf81a-8925-494c-97f1-81fbd0fd3067.png","pc":"diceui","tg":["progress","upload-download"]},{"id":"21st:diceui__compare-slider","t":"Compare slider","d":"A before/after image comparison slider with a draggable handle, orientation and label support for revealing two overlaid states.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"diceui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/diceui/compare-slider/default/preview.1784669198081-854fff33-d77f-4f8e-b590-18562ef7f0c0.png","pc":"diceui","tg":["image","slider"]},{"id":"21st:diceui__composition","t":"Composition","d":"composition utilities","k":"component","s":"21st","c":"other","g":"other","a":"diceui","st":"indexed","pl":"https://cdn.21st.dev/user_diceui/composition/default/preview.png","pc":"diceui"},{"id":"21st:diceui__pending","t":"Pending","d":"A utility component and hook that applies pending/loading state to any interactive element, blocking clicks and keyboard activation with proper ARIA attributes.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"diceui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/diceui/pending/default/preview.1784373024785-6f9a6e1b-a103-4c41-9ae1-167379d597e8.png","pc":"diceui","tg":["hook","sign-in"]},{"id":"21st:diceui__scroll-spy","t":"Scroll spy","d":"A composable scroll spy navigation that highlights the active link as the user scrolls through page sections, with smooth scroll-to-section on click.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"diceui","st":"indexed","pl":"https://cdn.21st.dev/diceui/scroll-spy/default/preview.1784407641146-3d8d1a98-70ab-453e-a731-060f5ff42cd0.png","pc":"diceui"},{"id":"21st:diceui__scroller","t":"Scroller","d":"A scrollable container with fading edge shadows, optional hidden scrollbar, and navigation arrows for vertical or horizontal overflow.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"diceui","st":"indexed","pl":"https://cdn.21st.dev/diceui/scroller/default/preview.1783712899174.png","pc":"diceui","tg":["scroll-area"]},{"id":"21st:diceui__sortable","t":"Sortable","d":"A drag and drop sortable component for reordering items.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"diceui","st":"indexed","pl":"https://cdn.21st.dev/user_diceui/sortable/default/preview.1737987435980.png","pc":"diceui","tg":["list"]},{"id":"21st:diegocavallaro8__uss","t":"Uss","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"diegocavallaro8","st":"indexed","pl":"https://cdn.21st.dev/diegocavallaro8/uss/default/preview.1785921652006-8ad16f56-4ad2-4a9a-b1da-f1ab446b4c23.webp","pc":"diegocavallaro8"},{"id":"21st:diegocavallaro8__uss2","t":"Uss2","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"diegocavallaro8","st":"indexed","pl":"https://cdn.21st.dev/diegocavallaro8/uss2/default/preview.1785923451806-971c4fc3-3914-4544-8c3c-b56cda8ceae1.webp","pc":"diegocavallaro8"},{"id":"21st:digitalzone0707__dynamic-island-toc","t":"Dynamic island toc","d":"A sleek Dynamic Island-inspired Table of Contents component for React and Next.js with animated expansion, scroll spy tracking, reading progress, smooth scrolling, automatic headin","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"digitalzone0707","st":"indexed","pl":"https://cdn.21st.dev/digitalzone0707/dynamic-island-toc/default/preview.1778132834702.png","pc":"digitalzone0707","tg":["progress","scroll-area","table"]},{"id":"21st:dillionverma__android","t":"Android","d":"A mockup of the Android","k":"component","s":"21st","c":"other","g":"other","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/android.png","pc":"dillionverma"},{"id":"21st:dillionverma__animated-beam","t":"Animated beam","k":"component","s":"21st","c":"media/icon","g":"media","a":"dillionverma","st":"rated","pl":"https://cdn.21st.dev/user_magicui/animated-beam.png","pc":"dillionverma","tg":["icon"],"sc":21},{"id":"21st:dillionverma__animated-circular-progress-bar","t":"Animated circular progress bar","d":"Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"dillionverma","st":"indexed","u":180,"pl":"https://cdn.21st.dev/user_magicui/animated-circular-progress-bar.png","pc":"dillionverma","tg":["number","progress"]},{"id":"21st:dillionverma__animated-gradient-text","t":"Animated gradient text","d":"An animated gradient background which transitions between colors for text.\n\nAdd the following animations to your tailwind.config.js file:\n extend: {\n      animation: {\n        grad","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":718,"pl":"https://cdn.21st.dev/user_magicui/animated-gradient-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__animated-grid-pattern","t":"Animated grid pattern","d":"A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dillionverma","st":"indexed","u":1319,"pl":"https://cdn.21st.dev/dillionverma/animated-grid-pattern/default/preview.1785300598189-d3b90be8-f9df-41bc-921a-3941e31285cb.png","pc":"dillionverma"},{"id":"21st:dillionverma__animated-list","t":"Animated list","d":"A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"dillionverma","st":"rated","u":296,"pl":"https://cdn.21st.dev/user_magicui/animated-list.png","pc":"dillionverma","tg":["list","notification"],"sc":15},{"id":"21st:dillionverma__animated-shiny-text","t":"Animated shiny text","d":"A light glare effect which pans across text making it appear as if it is shimmering.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"dillionverma","st":"indexed","u":1022,"pl":"https://cdn.21st.dev/user_magicui/animated-shiny-text.png","pc":"dillionverma","tg":["announcement"]},{"id":"21st:dillionverma__animated-subscribe-button","t":"Animated subscribe button","d":"An animated subscribe button useful for showing a micro animation from intial to final result.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_magicui/animated-subscribe-button.png","pc":"dillionverma"},{"id":"21st:dillionverma__avatar-circles","t":"Avatar circles","d":"Overlapping circles of avatars.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dillionverma","st":"indexed","u":187,"pl":"https://cdn.21st.dev/user_magicui/avatar-circles.png","pc":"dillionverma","tg":["avatar","team"]},{"id":"21st:dillionverma__bento-grid","t":"Bento grid","d":"Bento grid is a layout used to showcase the features of a product in a simple and elegant way.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/bento-grid.png","pc":"dillionverma"},{"id":"21st:dillionverma__blur-fade","t":"Blur fade","d":"Blur fade in and out animation. Used to smoothly fade in and out content.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":1347,"pl":"https://cdn.21st.dev/user_magicui/blur-fade.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__blur-in","t":"Blur in","d":"An animated text component that blurs in the text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":181,"pl":"https://cdn.21st.dev/user_magicui/blur-in.png","pc":"dillionverma"},{"id":"21st:dillionverma__border-beam","t":"Border beam","d":"An animated beam of light which travels along the border of its container.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/dillionverma/border-beam/default/preview.1785300433872-975e2ae2-249a-4dae-bbd1-39fa6e09a6da.png","pc":"dillionverma"},{"id":"21st:dillionverma__code-comparison","t":"Code comparison","d":"A component which compares two code snippets.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"dillionverma","st":"rated","pl":"https://cdn.21st.dev/user_magicui/code-comparison.png","pc":"dillionverma","sc":20},{"id":"21st:dillionverma__comic-text","t":"Comic text","d":"Here is Comic Text ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/larsen66/comic-text/default/preview.1752958701919.png","pc":"dillionverma"},{"id":"21st:dillionverma__confetti","t":"Confetti","d":"Confetti animations are best used to delight your users when something special happens","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/confetti.png","pc":"dillionverma","tg":["sign-up"]},{"id":"21st:dillionverma__cool-mode","t":"Cool mode","d":"Cool mode effect for buttons, links, and other DOMs","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","u":52,"pl":"https://cdn.21st.dev/user_magicui/cool-mode.png","pc":"dillionverma"},{"id":"21st:dillionverma__dock","t":"Dock","d":"An implementation of the MacOS dock using react + tailwindcss + framer motion","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/dock.png","pc":"dillionverma","tg":["dock","navigation-menu"]},{"id":"21st:dillionverma__dot-pattern","t":"Dot pattern","d":"A background dot pattern made with SVGs, fully customizable using Tailwind CSS.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dillionverma","st":"indexed","u":457,"pl":"https://cdn.21st.dev/user_magicui/dot-pattern.png","pc":"dillionverma","tg":["background"]},{"id":"21st:dillionverma__fade-text","t":"Fade text","d":"Characters appearing from faded view","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_magicui/fade-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__file-tree","t":"File tree","d":"A component used to showcase the folder and file structure of a directory.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/file-tree.png","pc":"dillionverma","tg":["file-tree"]},{"id":"21st:dillionverma__flickering-grid","t":"Flickering grid","d":"A flickering grid background made with SVGs, fully customizable using Tailwind CSS.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dillionverma","st":"indexed","u":1266,"pl":"https://cdn.21st.dev/user_magicui/flickering-grid.png","pc":"dillionverma","tg":["grid"]},{"id":"21st:dillionverma__flip-text","t":"Flip text","d":"Text flipping character animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":129,"pl":"https://cdn.21st.dev/user_magicui/flip-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__globe","t":"Globe","d":"An autorotating, interactive, and highly performant globe made using WebGL.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"dillionverma","st":"indexed","u":1558,"pl":"https://cdn.21st.dev/user_magicui/globe.png","pc":"dillionverma","tg":["globe"]},{"id":"21st:dillionverma__gradual-spacing","t":"Gradual spacing","d":"Word animation for gradual spacing between letters","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/gradual-spacing.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__grid-pattern","t":"Grid pattern","d":"A background grid pattern made with SVGs, fully customizable using Tailwind CSS.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dillionverma","st":"indexed","u":1730,"pl":"https://cdn.21st.dev/user_magicui/grid-pattern.png","pc":"dillionverma","tg":["grid","hero"]},{"id":"21st:dillionverma__hero-video-dialog","t":"Hero video dialog","d":"A hero video dialog component.","k":"component","s":"21st","c":"media/player","g":"media","a":"dillionverma","st":"indexed","u":509,"pl":"https://cdn.21st.dev/user_magicui/hero-video-dialog.png","pc":"dillionverma","tg":["dashboard","modal","sidebar","video"]},{"id":"21st:dillionverma__hyper-text","t":"Hyper text","d":"A hyper changing text animation as you hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":539,"pl":"https://cdn.21st.dev/user_magicui/hyper-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__interactive-hover-button","t":"Interactive hover button","d":"A visually engaging button component that responds to hover with dynamic transitions, adapting smoothly between light and dark modes for enhanced user interactivity.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","u":1856,"pl":"https://cdn.21st.dev/user_magicui/interactive-hover-button.png","pc":"dillionverma","tg":["button"]},{"id":"21st:dillionverma__interactive-icon-cloud","t":"Interactive icon cloud","d":"An interactive 3D tag cloud component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"dillionverma","st":"indexed","u":656,"pl":"https://cdn.21st.dev/user_magicui/interactive-icon-cloud.png","pc":"dillionverma"},{"id":"21st:dillionverma__line-shadow-text","t":"Line shadow text","d":"A line shadow text component for Magic UI","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_magicui/line-shadow-text/default/preview.1738000833195.png","pc":"dillionverma"},{"id":"21st:dillionverma__magic-card","t":"Magic card","d":"A spotlight effect that follows your mouse cursor and highlights borders on hover.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/magic-card.png","pc":"dillionverma"},{"id":"21st:dillionverma__marquee","t":"Marquee","d":"An infinite scrolling component that can be used to display text, images, or videos.\n\nAdd the following animations to your tailwind.config.js file:\nextend: {\n      animation: {\n   ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dillionverma","st":"indexed","u":1208,"pl":"https://cdn.21st.dev/user_magicui/marquee.png","pc":"dillionverma","tg":["marquee","scroll-area","testimonials"]},{"id":"21st:dillionverma__meteors","t":"Meteors","d":"A meteor shower effect.","k":"component","s":"21st","c":"other","g":"other","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/meteors.png","pc":"dillionverma"},{"id":"21st:dillionverma__morphing-text","t":"Morphing text","d":"A dynamic text morphing component for Magic UI.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":310,"pl":"https://cdn.21st.dev/user_magicui/morphing-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__number-ticker","t":"Number ticker","d":"Animate numbers to count up or down to a target number","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"dillionverma","st":"indexed","u":1272,"pl":"https://cdn.21st.dev/user_magicui/number-ticker.png","pc":"dillionverma","tg":["number"]},{"id":"21st:dillionverma__orbiting-circles","t":"Orbiting circles","d":"A collection of circles which move in orbit along a circular path","k":"component","s":"21st","c":"media/carousel","g":"media","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/orbiting-circles.png","pc":"dillionverma"},{"id":"21st:dillionverma__particles","t":"Particles","d":"Particles are a fun way to add some visual flair to your website. They can be used to create a sense of depth, movement, and interactivity.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/particles.png","pc":"dillionverma"},{"id":"21st:dillionverma__pixel-image","t":"Pixel image","d":"Here is Pixel Image components ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"dillionverma","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/pixel-image/default/preview.1752958323182.png","pc":"dillionverma","tg":["image"]},{"id":"21st:dillionverma__pointer","t":"Pointer","d":"A component that displays a pointer when hovering over an element","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/pointer/default/preview.png","pc":"dillionverma","tg":["cursor"]},{"id":"21st:dillionverma__progressive-blur","t":"Progressive blur","d":"Here is Progressive Blur component","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"dillionverma","st":"indexed","u":50,"pl":"https://cdn.21st.dev/larsen66/progressive-blur/default/preview.1752957604269.png","pc":"dillionverma"},{"id":"21st:dillionverma__rainbow-button","t":"Rainbow button","d":"An animated button with a rainbow effect.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"dillionverma","st":"indexed","u":2781,"pl":"https://cdn.21st.dev/user_magicui/rainbow-button.png","pc":"dillionverma","tg":["cta"]},{"id":"21st:dillionverma__retro-grid","t":"Retro grid","d":"An animated scrolling retro grid effect\n\nAdd the following animations to your tailwind.config.js file:\nextend: {\n      animation: {\n        grid: \"grid 15s linear infinite\",\n      ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dillionverma","st":"indexed","u":687,"pl":"https://cdn.21st.dev/user_magicui/retro-grid.png","pc":"dillionverma","tg":["grid"]},{"id":"21st:dillionverma__ripple","t":"Ripple","k":"component","s":"21st","c":"other","g":"other","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/ripple.png","pc":"dillionverma"},{"id":"21st:dillionverma__ripple-button","t":"Ripple button","d":"An animated button with ripple useful for user engagement.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/ripple-button.png","pc":"dillionverma"},{"id":"21st:dillionverma__safari","t":"Safari","d":"A safari browser mockup to showcase your website.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"dillionverma","st":"indexed","u":130,"pl":"https://cdn.21st.dev/user_magicui/safari.png","pc":"dillionverma"},{"id":"21st:dillionverma__scratch-to-reveal","t":"Scratch to reveal","d":"The ScratchToReveal component creates an interactive scratch-off effect with customizable dimensions and animations, revealing hidden content beneath.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":72,"pl":"https://cdn.21st.dev/user_magicui/scratch-to-reveal.png","pc":"dillionverma"},{"id":"21st:dillionverma__script-copy-button","t":"Script copy button","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/script-copy-button.png","pc":"dillionverma","tg":["tabs"]},{"id":"21st:dillionverma__scroll-based-velocity","t":"Scroll based velocity","d":"Scrolling text whose speed changes based on scroll speed","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"dillionverma","st":"indexed","u":211,"pl":"https://cdn.21st.dev/user_magicui/scroll-based-velocity.png","pc":"dillionverma","tg":["marquee"]},{"id":"21st:dillionverma__shimmer-button","t":"Shimmer button","d":"A button with a shimmering light which travels around the perimeter.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","u":2324,"pl":"https://cdn.21st.dev/user_magicui/shimmer-button.png","pc":"dillionverma"},{"id":"21st:dillionverma__shine-border","t":"Shine border","d":"Shine border is an animated background border effect.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/shine-border.png","pc":"dillionverma","tg":["card","border","text"]},{"id":"21st:dillionverma__shiny-button","t":"Shiny button","d":"A shiny button component with dynamic styles in the dark mode or light mode.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dillionverma","st":"indexed","u":461,"pl":"https://cdn.21st.dev/user_magicui/shiny-button.png","pc":"dillionverma"},{"id":"21st:dillionverma__smooth-cursor","t":"Smooth cursor","d":"Here is Smooth Cursor component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/larsen66/smooth-cursor/default/preview.1751849389715.png","pc":"dillionverma","tg":["cursor"]},{"id":"21st:dillionverma__sparkles-text","t":"Sparkles text","d":"A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":1422,"pl":"https://cdn.21st.dev/user_magicui/sparkles-text.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__spinning-text","t":"Spinning text","d":"Animates text in a circular motion with customizable speed, direction, radius, and transitions for dynamic circular typography effects.","k":"component","s":"21st","c":"status/loader","g":"status","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/dillionverma/spinning-text/default/preview.1784704256390-94b5a222-158e-4e9f-a7b7-819ebe994bb9.png","pc":"dillionverma"},{"id":"21st:dillionverma__text-reveal","t":"Text reveal","d":"Fade in text as you scroll down the page.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"dillionverma","st":"indexed","u":791,"pl":"https://cdn.21st.dev/user_magicui/text-reveal.png","pc":"dillionverma","tg":["scroll-area"]},{"id":"21st:dillionverma__typing-animation","t":"Typing animation","d":"Characters appearing in typed animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":465,"pl":"https://cdn.21st.dev/user_magicui/typing-animation.png","pc":"dillionverma"},{"id":"21st:dillionverma__warp-background","t":"Warp background","d":"A container component that applies a warp animation effect to its children","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/warp-background.png","pc":"dillionverma","tg":["background"]},{"id":"21st:dillionverma__word-fade-in","t":"Word fade in","d":"Text animation which fades in word by word","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":155,"pl":"https://cdn.21st.dev/user_magicui/word-fade-in.png","pc":"dillionverma"},{"id":"21st:dillionverma__word-pull-up","t":"Word pull up","d":"Text animation for words to pull up","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","u":236,"pl":"https://cdn.21st.dev/user_magicui/word-pull-up.png","pc":"dillionverma","tg":["text"]},{"id":"21st:dillionverma__word-rotate","t":"Word rotate","d":"A vertical rotation of words.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"dillionverma","st":"indexed","pl":"https://cdn.21st.dev/user_magicui/word-rotate.png","pc":"dillionverma"},{"id":"21st:dinovlazar2011__chat-bot","t":"Chat bot","d":"A costumer support chat bubble to add to a website","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"dinovlazar2011","st":"indexed","pl":"https://cdn.21st.dev/dinovlazar2011/chat-bot/default/preview.1773780091552.png","pc":"dinovlazar2011"},{"id":"21st:diriktv__ai-input","t":"Ai input","d":"An AI input ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"diriktv","st":"indexed","pl":"https://cdn.21st.dev/diriktv/ai-input/default/preview.1748484555451.png","pc":"diriktv"},{"id":"21st:diriktv__animated-counter","t":"Animated counter","d":"An animated counter with increase and decrease buttons","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"diriktv","st":"indexed","u":33,"pl":"https://cdn.21st.dev/diriktv/animated-counter/default/preview.1748466609247.png","pc":"diriktv"},{"id":"21st:diriktv__confetti-background","t":"Confetti background","d":"An animated confetti background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"diriktv","st":"indexed","u":20,"pl":"https://cdn.21st.dev/diriktv/confetti-background/default/preview.1748462159407.png","pc":"diriktv"},{"id":"21st:diriktv__music-artwork","t":"Music artwork","d":"A music artwork that has a background vinyl animation. ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"diriktv","st":"indexed","pl":"https://cdn.21st.dev/diriktv/music-artwork/default/preview.1748476058019.png","pc":"diriktv"},{"id":"21st:diriktv__pricing-section","t":"Pricing section","d":"A pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"diriktv","st":"indexed","pl":"https://cdn.21st.dev/diriktv/pricing-section/default/preview.1748486179720.png","pc":"diriktv"},{"id":"21st:dixitsimform__dialog","t":"Dialog","d":"When dialog becomes too long for the user’s viewport or device, its scroll independent of the page itself.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"dixitsimform","st":"indexed","pl":"https://cdn.21st.dev/dixitsimform/dialog/default/preview.1754464725906.png","pc":"dixitsimform"},{"id":"21st:djvamps__animated-glow-feature-card","t":"Animated glow feature card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"djvamps","st":"indexed","pl":"https://cdn.21st.dev/djvamps/animated-glow-feature-card/default/preview.1786993199060-8b7c2cf5-dfd3-4668-a586-cf109c38140d.jpg","pc":"djvamps"},{"id":"21st:dksksnsf__pinlist","t":"Pinlist","d":"A pinned items list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"dksksnsf","st":"indexed","pl":"https://21st.dev/@dksksnsf/components/pinlist","pc":"dksksnsf"},{"id":"21st:dljw__rocket-button","t":"Rocket button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dljw","st":"indexed","pl":"https://cdn.21st.dev/user_2v2aFGXSSSiinbchVd1BMmuaaXI/rocket-button/rocket-button/preview.png","pc":"dljw"},{"id":"21st:dqnamo__agent-dock","t":"Agent dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/agent-dock/default/preview.1782930695950.png","pc":"dqnamo","tg":["ai-chat","dock"]},{"id":"21st:dqnamo__animated-banner","t":"Animated banner","d":"A reusable animated banner pattern built from a short muted video loop with a poster fallback, a gradient overlay that fades from a solid color on the text side to transparent over","k":"component","s":"21st","c":"media/player","g":"media","a":"dqnamo","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/animated-banner/default/preview.1782934396390.png","pc":"dqnamo","tg":["cta","video"]},{"id":"21st:dqnamo__animated-sparkline","t":"Animated sparkline","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-sparkline/default/preview.1782938233176.png","pc":"dqnamo"},{"id":"21st:dqnamo__dynamic-button","t":"Dynamic button","d":"An animated button that smoothly resizes its width to fit new content and crossfades its label and icon whenever the action or state changes. Built with motion/react, it uses a spr","k":"component","s":"21st","c":"actions/button","g":"actions","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dynamic-button/default/preview.1782928203077.png","pc":"dqnamo"},{"id":"21st:dqnamo__game-of-life-loader","t":"Game of life loader","d":"A tiny React canvas component for ambient loading states. Renders a softly fading Conway's Game of Life simulation behind your content — deterministic seeding, reduced-motion suppo","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/game-of-life-loader/default/preview.1783003848661.png","pc":"dqnamo","tg":["grid","spinner"]},{"id":"21st:dqnamo__iridescent-foil","t":"Iridescent foil","k":"component","s":"21st","c":"other","g":"other","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/iridescent-foil/default/preview.1783008573904.png","pc":"dqnamo"},{"id":"21st:dqnamo__logo-trace-loader","t":"Logo trace loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/logo-trace-loader/default/preview.1783007406088.png","pc":"dqnamo"},{"id":"21st:dqnamo__model-selector","t":"Model selector","d":"A benchmark-informed prompt composer with an advanced LLM model selector for comparing frontier models across capability, speed, context, and cost. The model dropdown is searchable","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"dqnamo","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/model-selector/default/preview.1782935263971.png","pc":"dqnamo","tg":["ai-chat","dropdown"]},{"id":"21st:dqnamo__scramble-text","t":"Scramble text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scramble-text/default/preview.1782930162844.png","pc":"dqnamo"},{"id":"21st:dqnamo__scroll-fade-list","t":"Scroll fade list","d":"A scrollable list with gradient fade edges that appear to signal there is more content above or below. The top and bottom fades grow and shrink based on scroll position (measured o","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"dqnamo","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/scroll-fade-list/default/preview.1782932573161.png","pc":"dqnamo","tg":["list","scroll-area"]},{"id":"21st:dqnamo__signature","t":"Signature","d":"A reusable SVG path component for drawing handwritten marks and signatures. It self-draws any path with a stroke-dashoffset reveal — configurable path, viewBox, size, stroke width,","k":"component","s":"21st","c":"other","g":"other","a":"dqnamo","st":"indexed","pl":"https://cdn.21st.dev/larsen66/signature/default/preview.1783004657368.png","pc":"dqnamo"},{"id":"21st:drdruide__destructive-button","t":"Destructive button","d":"A destructive button with a shake effect and underline animation on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"drdruide","st":"indexed","pl":"https://cdn.21st.dev/user_2s2Tc4Qkv63wkBVRNLqgKCERVVw/destructive-button/default/preview.1737987378014.png","pc":"drdruide"},{"id":"21st:dubinc__banner","t":"Banner","d":"A versatile notification banner component with gradient background and grid pattern overlay. Originally designed for Dub.co's domain claim notifications.\n\nFeatures\n- Dismissible ba","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"dubinc","st":"indexed","u":197,"pl":"https://cdn.21st.dev/user_dubinc/banner.png","pc":"dubinc","tg":["announcement","cta","grid","notification"]},{"id":"21st:dubinc__sidebar-news","t":"Sidebar news","d":"A stackable news card component that displays updates in an interactive card format. Built for Dub.co's notification system.\n\nFeatures\n- Stacked card layout with hover animations\n-","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"dubinc","st":"indexed","u":305,"pl":"https://cdn.21st.dev/user_dubinc/sidebar-news.png","pc":"dubinc","tg":["notification","sidebar"]},{"id":"21st:dudadecesaro__flip-card","t":"Flip card","d":"An interactive 3D flip card component with hover tilt, front and back content, image support, and controlled flip state.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"dudadecesaro","st":"indexed","pl":"https://cdn.21st.dev/dudadecesaro/flip-card/default/preview.1778599393578.png","pc":"dudadecesaro"},{"id":"21st:eachando77__tiered-price-configurator","t":"Tiered price configurator","d":"Configurateur de prix par paliers. L'acheteur choisit un niveau et le total, la mensualite et les caracteristiques techniques s'animent ensemble. Concu pour les produits a panier e","k":"component","s":"21st","c":"other","g":"other","a":"eachando77","st":"indexed","pl":"https://cdn.21st.dev/eachando77/tiered-price-configurator/default/preview.1785483520040-49ce47ef-1eda-4457-b28d-8804d7bd9406.png","pc":"eachando77"},{"id":"21st:easemize__ai-chat-input","t":"Ai chat input","d":"A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spri","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/ai-chat-input/default/preview.1783271974588.png","pc":"easemize","tg":["ai-chat","input"]},{"id":"21st:easemize__ai-prompt-box","t":"Ai prompt box","d":"AI prompt Box, AI chat Input, AI chat box, with search, with think, with thinking, with canvas, with audio recording","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"easemize","st":"rated","pl":"https://cdn.21st.dev/easemize/ai-prompt-box/default/preview.1747972675277.png","pc":"easemize","tg":["ai-chat","input"],"sc":18},{"id":"21st:easemize__animated-3d-mac-book-air","t":"Animated 3d mac book air","d":"Showcase a stunning, purely CSS-driven 3D animation of a MacBook Air with this React component. Leveraging Tailwind CSS for styling and custom CSS keyframes for complex animations,","k":"component","s":"21st","c":"status/loader","g":"status","a":"easemize","st":"indexed","u":29,"pl":"https://cdn.21st.dev/easemize/animated-3d-mac-book-air/default/preview.1748338503303.png","pc":"easemize"},{"id":"21st:easemize__animated-glow-card","t":"Animated glow card","d":"A React component that renders a visually striking card with an animated, glowing border effect. This component uses an SVG filter (feColorMatrix) to achieve the customizable glow,","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"easemize","st":"indexed","u":221,"pl":"https://cdn.21st.dev/easemize/animated-glow-card/default/preview.1748325242342.png","pc":"easemize","tg":["border"]},{"id":"21st:easemize__animated-gradient-border","t":"Animated gradient border","d":"Animated Border, Border animation, border gradient, animated border gradient, border rotate, border rotate animation, border rotation animation, card","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"easemize","st":"indexed","u":177,"pl":"https://cdn.21st.dev/user_2xJxXqdwWohYrdd6fiMYrS9hbmO/animated-gradient-border/default/preview.1773129288808.png","pc":"easemize","tg":["border"]},{"id":"21st:easemize__animated-svg-text-path","t":"Animated svg text path","d":"lets you effortlessly bring text to life by animating it along any SVG path within your React applications. This component, part of the EaseMize UI library, leverages the GreenSock","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"easemize","st":"indexed","u":20,"pl":"https://cdn.21st.dev/easemize/animated-svg-text-path/default/preview.1749103146959.png","pc":"easemize"},{"id":"21st:easemize__apple-tahoe-liquid-glass-button","t":"Apple tahoe liquid glass button","d":"A high-fidelity Liquid Glass Button engineered for shadcn/ui and Tailwind CSS. It features a hyper-realistic glassmorphism engine driven by an inline WebP SVG displacement map (feD","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"easemize","st":"indexed","u":56,"pl":"https://cdn.21st.dev/easemize/apple-tahoe-liquid-glass-button/default/preview.1783155783019.png","pc":"easemize"},{"id":"21st:easemize__auth-fuse","t":"Auth fuse","d":"$3b","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/auth-fuse/default/preview.1756902511871.png","pc":"easemize","tg":["sign-up"]},{"id":"21st:easemize__auth-ui","t":"Auth ui","d":"Authentication, sign in, sign up, signin, signup, login, create account","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"easemize","st":"rated","u":58,"pl":"https://cdn.21st.dev/easemize/auth-ui/default/preview.1752208958307.png","pc":"easemize","tg":["sign-in","sign-up"],"sc":18},{"id":"21st:easemize__chatgpt-prompt-input","t":"Chatgpt prompt input","d":"This is a complete replica of the chatgpt prompt input some may call it chat input or prompt box or promptbox","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/chatgpt-prompt-input/default/preview.1750427255605.png","pc":"easemize","tg":["input","textarea","upload-download"]},{"id":"21st:easemize__cinematic-app-hero","t":"Cinematic app hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/cinematic-app-hero/default/preview.1772694471364.png","pc":"easemize"},{"id":"21st:easemize__cinematic-landing-hero","t":"Cinematic landing hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","u":481,"pl":"https://cdn.21st.dev/easemize/cinematic-landing-hero/default/preview.1774169408294.png","pc":"easemize","tg":["hero"]},{"id":"21st:easemize__dotted-vignette-background","t":"Dotted vignette background","d":"Dotted Vignette background with full controls","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":48,"pl":"https://cdn.21st.dev/easemize/dotted-vignette-background/default/preview.1747744030786.png","pc":"easemize"},{"id":"21st:easemize__dynamic-hero","t":"Dynamic hero","d":"Elevate your landing page with this interactive React hero component. It captivates users with a unique arrow animation that tracks mouse movement, pointing towards the main call-t","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","u":249,"pl":"https://cdn.21st.dev/easemize/dynamic-hero/default/preview.1748335526423.png","pc":"easemize"},{"id":"21st:easemize__fintech-trust-grid-hero","t":"Fintech trust grid hero","d":"$34","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/fintech-trust-grid-hero/default/preview.1769498345602.png","pc":"easemize"},{"id":"21st:easemize__flip-countdown","t":"Flip countdown","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/flip-countdown/default/preview.1751900339619.png","pc":"easemize","tg":["number"]},{"id":"21st:easemize__flow-field-background","t":"Flow field background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/flow-field-background/default/preview.1785307715584-cdabbf17-6de7-4fc2-9541-de34cb6ad149.png","pc":"easemize"},{"id":"21st:easemize__fluid-magnetic-cursor","t":"Fluid magnetic cursor","d":"$34","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/fluid-magnetic-cursor/default/preview.1766746579802.png","pc":"easemize"},{"id":"21st:easemize__glass-button","t":"Glass button","d":"Glass Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"easemize","st":"indexed","u":1415,"pl":"https://cdn.21st.dev/easemize/glass-button/default/preview.1754147240408.png","pc":"easemize","tg":["button"]},{"id":"21st:easemize__glass-testimonial-swiper","t":"Glass testimonial swiper","d":"Interactive 3D Testimonial Stack Component for React - A premium, drag-enabled testimonial carousel featuring stacked card animations, glass morphism effects, and smooth transition","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"easemize","st":"indexed","u":162,"pl":"https://cdn.21st.dev/easemize/glass-testimonial-swiper/default/preview.1756216487252.png","pc":"easemize","tg":["carousel","testimonials"]},{"id":"21st:easemize__glassmorphism-trust-hero","t":"Glassmorphism trust hero","d":"The ultimate high-conversion hero section for Agencies, SaaS, and Portfolios.\nUnlike generic hero components that only offer a headline, this component is pre-engineered with Socia","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","u":459,"pl":"https://cdn.21st.dev/easemize/glassmorphism-trust-hero/default/preview.1769356434569.png","pc":"easemize","tg":["hero"]},{"id":"21st:easemize__hero-1","t":"Hero 1","d":"minimal hero with modern gradiental background","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"easemize","st":"indexed","u":432,"pl":"https://cdn.21st.dev/easemize/hero-1/default/preview.1749529318335.png","pc":"easemize","tg":["announcement","cta"]},{"id":"21st:easemize__hero-with-video","t":"Hero with video","d":"Hero With Video and Image, Landing Page, Header","k":"component","s":"21st","c":"media/player","g":"media","a":"easemize","st":"indexed","u":129,"pl":"https://cdn.21st.dev/easemize/hero-with-video/default/preview.1749360042671.png","pc":"easemize","tg":["video"]},{"id":"21st:easemize__hover-glow-button","t":"Hover glow button","d":"a dynamic React component that adds an engaging, mouse-following glow effect to your buttons. Part of the EaseMize UI library, it's designed for both ease of use and deep customiza","k":"component","s":"21st","c":"actions/button","g":"actions","a":"easemize","st":"indexed","u":121,"pl":"https://cdn.21st.dev/easemize/hover-glow-button/default/preview.1748530810824.png","pc":"easemize","tg":["button"]},{"id":"21st:easemize__hover-text-reveal-1","t":"Hover text reveal 1","d":"This lightweight React component, styled with Tailwind CSS and animated with GSAP (via CDN), creates a captivating effect where text characters gradually reveal themselves as the u","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"easemize","st":"indexed","u":9,"pl":"https://cdn.21st.dev/easemize/hover-text-reveal-1/default/preview.1751950821609.png","pc":"easemize"},{"id":"21st:easemize__image-swiper","t":"Image swiper","d":"A dynamic and interactive React image swiper component that displays images as a stack of cards with a smooth, perspective-based swipe animation. Users can swipe through images wit","k":"component","s":"21st","c":"media/gallery","g":"media","a":"easemize","st":"indexed","u":181,"pl":"https://cdn.21st.dev/easemize/image-swiper/default/preview.1748529934858.png","pc":"easemize","tg":["carousel","gallery","image"]},{"id":"21st:easemize__interactive-text-particle","t":"Interactive text particle","d":"A visually engaging canvas-based text effect for React that transforms text into interactive, hover-reactive particles. Designed for modern UI/UX experiences, this component adapts","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"easemize","st":"indexed","u":147,"pl":"https://cdn.21st.dev/easemize/interactive-text-particle/default/preview.1749048183895.png","pc":"easemize"},{"id":"21st:easemize__interactive-thermodynamic-grid","t":"Interactive thermodynamic grid","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"easemize","st":"indexed","u":59,"pl":"https://cdn.21st.dev/easemize/interactive-thermodynamic-grid/default/preview.1770196010338.png","pc":"easemize","tg":["cursor"]},{"id":"21st:easemize__isometric-wave-grid-background","t":"Isometric wave grid background","d":"\"Retro-futuristic isometric wave grid with real-time mouse distortion physics and ambient breathing animation. Features canvas-based rendering with gradient fade effects, smooth be","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"easemize","st":"indexed","u":84,"pl":"https://cdn.21st.dev/easemize/isometric-wave-grid-background/default/preview.1769607241147.png","pc":"easemize"},{"id":"21st:easemize__limelight-nav","t":"Limelight nav","d":"A sleek and modern navigation bar with a unique \"limelight\" effect that follows the active tab. This component is designed to be both highly functional and visually appealing, prov","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"easemize","st":"indexed","u":440,"pl":"https://cdn.21st.dev/easemize/limelight-nav/default/preview.1749735671557.png","pc":"easemize"},{"id":"21st:easemize__logo-carousel","t":"Logo carousel","d":"Showcase your partners and build social proof with the Infinite Logo Carousel. This component is designed to be a flexible, plug-and-play solution for displaying a seamless, loopin","k":"component","s":"21st","c":"media/carousel","g":"media","a":"easemize","st":"indexed","u":167,"pl":"https://cdn.21st.dev/easemize/logo-carousel/default/preview.1749478790266.png","pc":"easemize","tg":["carousel","marquee","scroll-area"]},{"id":"21st:easemize__magnetic-cursor","t":"Magnetic cursor","d":"Magnetic Cursor - Interactive Physics-Based Cursor\nA highly interactive cursor component built with React, GSAP, and Vecteur. Unlike standard cursors, this uses a spring-physics mo","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"easemize","st":"indexed","u":71,"pl":"https://cdn.21st.dev/easemize/magnetic-cursor/default/preview.1766746047297.png","pc":"easemize","tg":["cursor"]},{"id":"21st:easemize__material-design-3-button","t":"Material design 3 button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/material-design-3-button/default/preview.1776452277005.png","pc":"easemize"},{"id":"21st:easemize__material-design-3-expressive-slider","t":"Material design 3 expressive slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/user_2xJxXqdwWohYrdd6fiMYrS9hbmO/material-design-3-expressive-slider/default/preview.1786105727347.webp","pc":"easemize","tg":["slider"]},{"id":"21st:easemize__material-design-3-ripple","t":"Material design 3 ripple","k":"component","s":"21st","c":"other","g":"other","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/material-design-3-ripple/default/preview.1768893474466.png","pc":"easemize"},{"id":"21st:easemize__material-design-3-switch","t":"Material design 3 switch","d":"The definitive Google Material Design 3 (M3) Switch component for React & Tailwind CSS.\nThis implementation captures the exact tactile feel of Android toggles using Spring Physics ","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"easemize","st":"indexed","u":50,"pl":"https://cdn.21st.dev/easemize/material-design-3-switch/default/preview.1768141274722.png","pc":"easemize","tg":["toggle"]},{"id":"21st:easemize__material-ui-autocomplete-combobox-multi-select","t":"Material ui autocomplete combobox multi select","d":"A high-fidelity Material Design 3 Autocomplete and Multi-select Combobox built for shadcn/ui. Features a custom physics-based ripple engine, cinematic staggered entrance animations","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/material-ui-autocomplete-combobox-multi-select/default/preview.1780459365110.png","pc":"easemize","tg":["chip","dropdown","search","select"]},{"id":"21st:easemize__material-ui-dropdown-menu","t":"Material ui dropdown menu","d":"A highly sophisticated Material Design 3 Dropdown Menu built on top of shadcn/ui and Radix UI. Engineered with a custom Dual-Physics Ripple Engine via the Web Animations API for tr","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"easemize","st":"indexed","u":53,"pl":"https://cdn.21st.dev/easemize/material-ui-dropdown-menu/default/preview.1776005312320.png","pc":"easemize","tg":["dropdown"]},{"id":"21st:easemize__morhic-background","t":"Morhic background","d":"MorphicBackground is a drop-in component that lets you create a stunning, liquid-gooey animation for your landing pages, hero sections, or anywhere you need a touch of dynamic flai","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":18,"pl":"https://cdn.21st.dev/easemize/morhic-background/default/preview.1749264805432.png","pc":"easemize","tg":["background"]},{"id":"21st:easemize__motion-footer","t":"Motion footer","d":"A high-fidelity Cinematic Scroll Reveal Footer optimized for modern SaaS and app landing pages. Built with a GSAP ScrollTrigger engine to create a smooth \"curtain reveal\" parallax ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"easemize","st":"indexed","u":241,"pl":"https://cdn.21st.dev/easemize/motion-footer/default/preview.1774887325728.png","pc":"easemize","tg":["footer","marquee","scroll-area"]},{"id":"21st:easemize__multi-type-ripple-buttons","t":"Multi type ripple buttons","d":"Part of the EaseMize library, this highly customizable React button component offers a theme-aware JavaScript click ripple and four distinct visual variants (default, ghost, hover,","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"easemize","st":"indexed","u":235,"pl":"https://cdn.21st.dev/easemize/multi-type-ripple-buttons/default/preview.1748083166438.png","pc":"easemize"},{"id":"21st:easemize__noisy-gradient-backgrounds","t":"Noisy gradient backgrounds","d":"A versatile React component for creating stunning, animated gradient backgrounds with an optional, customizable noise overlay. Easily configure gradient origins, a rich array of co","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":197,"pl":"https://cdn.21st.dev/easemize/noisy-gradient-backgrounds/default/preview.1748332862993.png","pc":"easemize","tg":["background"]},{"id":"21st:easemize__parallax-cosmic-background","t":"Parallax cosmic background","d":"Parallax Cosmic Background","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","u":302,"pl":"https://cdn.21st.dev/easemize/parallax-cosmic-background/default/preview.1747801240553.png","pc":"easemize","tg":["hero"]},{"id":"21st:easemize__particle-wave","t":"Particle wave","d":"A dynamic and interactive background component for React that renders a mesmerizing wave of particles. Built with three.js for high-performance, GPU-accelerated animation, this com","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":59,"pl":"https://cdn.21st.dev/easemize/particle-wave/default/preview.1749657531648.png","pc":"easemize","tg":["background"]},{"id":"21st:easemize__peak-mountain","t":"Peak mountain","d":"Animated (ripple) ASCII art in the Dots style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards","k":"component","s":"21st","c":"media/player","g":"media","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/peak-mountain/default/preview.1783765608720.png","pc":"easemize","tg":["video"]},{"id":"21st:easemize__pixel-cursor","t":"Pixel cursor","d":"A cursor trailing component that has a pixelated effect","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/pixel-cursor/default/preview.1751683642871.png","pc":"easemize","tg":["cursor"]},{"id":"21st:easemize__pixel-perfect-hero","t":"Pixel perfect hero","d":"Interactive hero section with a Canvas-based pixel ripple animation, shimmering glassmorphism header, and logo marquee. Features dynamic theme-color detection, responsive layout, a","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"easemize","st":"indexed","u":123,"pl":"https://cdn.21st.dev/easemize/pixel-perfect-hero/default/preview.1781185553155.png","pc":"easemize","tg":["cta","marquee"]},{"id":"21st:easemize__ripple-effect-creator","t":"Ripple effect creator","d":"Add beautiful, performant ripple animations to any React element with zero configuration. Ripple Effect Generator brings Material Design's signature touch feedback to your componen","k":"component","s":"21st","c":"other","g":"other","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/ripple-effect-creator/default/preview.1755663277111.png","pc":"easemize"},{"id":"21st:easemize__ripple-effect-generator","t":"Ripple effect generator","d":"Add beautiful, performant ripple animations to any React element with zero configuration. Ripple Effect Generator brings Material Design's signature touch feedback to your componen","k":"component","s":"21st","c":"other","g":"other","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/ripple-effect-generator/default/preview.1750336907859.png","pc":"easemize"},{"id":"21st:easemize__shared-element-gallery","t":"Shared element gallery","d":"A high-fidelity, premium photo gallery featuring a Shared Element Transition built with Framer Motion. Uses a masonry layout to preserve original aspect ratios natively, ensuring p","k":"component","s":"21st","c":"media/gallery","g":"media","a":"easemize","st":"indexed","u":11,"pl":"https://cdn.21st.dev/easemize/shared-element-gallery/default/preview.1775741702477.png","pc":"easemize","tg":["gallery"]},{"id":"21st:easemize__sign-in","t":"Sign in","d":"sign in log in signin login","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"easemize","st":"rated","pl":"https://cdn.21st.dev/easemize/sign-in/default/preview.1750759166859.png","pc":"easemize","tg":["sign-in","testimonials"],"sc":21},{"id":"21st:easemize__sign-up","t":"Sign up","d":"A stunning, open-source multi-step authentication UI component for modern web applications. Built with React, TypeScript, and Framer Motion, it delivers a visually captivating and ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"easemize","st":"indexed","u":215,"pl":"https://cdn.21st.dev/easemize/sign-up/default/preview.1760182377227.png","pc":"easemize","tg":["sign-up","steps"]},{"id":"21st:easemize__soft-gradient-background-animation","t":"Soft gradient background animation","d":"Soft gradient Background Animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":37,"pl":"https://cdn.21st.dev/easemize/soft-gradient-background-animation/default/preview.1747758767074.png","pc":"easemize","tg":["background"]},{"id":"21st:easemize__spiral-animation","t":"Spiral animation","d":"A mesmerizing animated golden spiral component featuring 600+ pulsing dots arranged in the mathematically perfect Fibonacci spiral pattern. Each dot pulses with smooth radius and o","k":"component","s":"21st","c":"status/loader","g":"status","a":"easemize","st":"indexed","u":76,"pl":"https://cdn.21st.dev/easemize/spiral-animation/default/preview.1785356454542-35cc69b8-ce4b-4909-be85-da954627f3fa.png","pc":"easemize"},{"id":"21st:easemize__spooky-smoke-animation","t":"Spooky smoke animation","k":"component","s":"21st","c":"other","g":"other","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/spooky-smoke-animation/default/preview.1749313020943.png","pc":"easemize"},{"id":"21st:easemize__spotlight-card","t":"Spotlight card","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"easemize","st":"indexed","u":2099,"pl":"https://cdn.21st.dev/easemize/spotlight-card/default/preview.1749394917546.png","pc":"easemize","tg":["cursor"]},{"id":"21st:easemize__sss","t":"Sss","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/sss/default/preview.1786033246954-f2b014dd-a182-4fd4-88ba-ee966942a59c.webp","pc":"easemize","tg":["background"]},{"id":"21st:easemize__svg-blob-animation","t":"Svg blob animation","d":"Svg Blob Animation background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"easemize","st":"indexed","u":14,"pl":"https://cdn.21st.dev/easemize/svg-blob-animation/default/preview.1747801960718.png","pc":"easemize"},{"id":"21st:easemize__titanium-saa-s-hero","t":"Titanium saa s hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/easemize/titanium-saa-s-hero/default/preview.1769501139392.png","pc":"easemize"},{"id":"21st:eduardoamaral.ux__shader-dither","t":"Shader dither","d":"Animated (flicker) ASCII art in the Pixel Art style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections,","k":"component","s":"21st","c":"media/player","g":"media","a":"eduardoamaral.ux","st":"indexed","pl":"https://cdn.21st.dev/eduardoamaral.ux/shader-dither/default/preview.1784724682449-67698a27-6b09-4d99-8e31-6e1137a3d14a.webp","pc":"eduardoamaral.ux","tg":["video"]},{"id":"21st:educalvolpz__accordion-2","t":"Accordion 2","d":"Here is Accordion component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/accordion-2/default/preview.1756780702445.png","pc":"educalvolpz","tg":["dropdown","list","select"]},{"id":"21st:educalvolpz__agent-avatar","t":"Agent avatar","d":"Canvas-based generative pixel avatar for AI agents, deterministic per seed and gently breathing while the agent works. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/agent-avatar/default/preview.1785571513658-9cc7b190-4112-4806-8d55-11a4cec0c010.png","pc":"educalvolpz","tg":["ai-chat","avatar"]},{"id":"21st:educalvolpz__ai-approval","t":"Ai approval","d":"Human-in-the-loop approval card where the chosen option expands to fill the card while the alternatives collapse away. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-approval/default/preview.1785567682121-00f482d3-5fb6-4ed9-8c13-5416f14dc3c6.png","pc":"educalvolpz","tg":["ai-chat","card"]},{"id":"21st:educalvolpz__ai-artifact","t":"Ai artifact","d":"Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading, with copy built in. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-artifact/default/preview.1785571751809-cc5c6d47-b7a2-4305-bae5-a4fc7f36298e.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__ai-citation","t":"Ai citation","d":"Inline citation pill that opens an origin-aware source card anchored to the pill you clicked, instead of a floating popover. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-citation/default/preview.1785567601934-7f333acc-e319-46e6-a2d4-933ea537a767.png","pc":"educalvolpz","tg":["ai-chat","popover"]},{"id":"21st:educalvolpz__ai-context-meter","t":"Ai context meter","d":"Context window meter whose ring fills and shifts hue at the warning threshold, never changing size. Hover for a token breakdown. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educlopez/ai-context-meter/default/preview.1785566520103-5f5736a2-6391-4283-9d86-113d5ac0dfe0.png","pc":"educalvolpz","tg":["ai-chat"],"sc":19},{"id":"21st:educalvolpz__ai-conversation","t":"Ai conversation","d":"Auto-scrolling chat container that follows streaming output, stops following the moment the user scrolls up, and offers a jump-to-latest control. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educalvolpz/ai-conversation/default/preview.1785773864981-31959f07-f489-4ec7-a9ef-543701c53e07.png","pc":"educalvolpz","sc":22},{"id":"21st:educalvolpz__ai-diff","t":"Ai diff","d":"Proposed code edit where added lines wipe in from the left and rejected lines collapse to nothing, with accept and reject actions. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educlopez/ai-diff/default/preview.1785568048421-e1d1ed64-4316-447a-ac21-b8632be686c2.png","pc":"educalvolpz","tg":["ai-chat","card"],"sc":21},{"id":"21st:educalvolpz__ai-loader","t":"Ai loader","d":"Working indicator in dots, bar and grid variants with an optional elapsed timer, tuned so it reads as progress rather than noise. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-loader/default/preview.1785568123533-31fb2264-b5f7-4917-ba36-a63dc6cb9652.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__ai-message","t":"Ai message","d":"Chat message row for user and assistant turns, with copy, retry and vote actions that reveal on hover instead of crowding the bubble. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-message/default/preview.1785571237031-8b8c4192-d554-41af-886a-6997448984eb.png","pc":"educalvolpz","tg":["ai-chat","card"]},{"id":"21st:educalvolpz__ai-reasoning","t":"Ai reasoning","d":"Collapsible model-reasoning trace that times itself while streaming and folds away once the answer lands. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educlopez/ai-reasoning/default/preview.1785567331733-9887e202-3657-4237-afaa-cd2b17e50f8b.png","pc":"educalvolpz","tg":["accordion","ai-chat"],"sc":22},{"id":"21st:educalvolpz__ai-response","t":"Ai response","d":"Streaming answer body that reveals text as it arrives and anchors inline citation markers to their sources. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"indexed","u":8,"pl":"https://cdn.21st.dev/educlopez/ai-response/default/preview.1785571072669-d83da335-9750-48ae-83af-47131347eb6f.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__ai-sources","t":"Ai sources","d":"Collapsible source list for a grounded answer, with per-source snippets that expand in place rather than opening a dialog. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educlopez/ai-sources/default/preview.1785570987737-122cacf1-82ae-43e0-9260-98381f12ef2f.png","pc":"educalvolpz","tg":["accordion","ai-chat"],"sc":20},{"id":"21st:educalvolpz__ai-suggestions","t":"Ai suggestions","d":"Follow-up suggestion chips that stagger in after a reply and clear themselves once one is chosen. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-suggestions/default/preview.1785572061888-f0399d63-5b81-4a49-b02c-6676044fb6f6.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__ai-task-list","t":"Ai task list","d":"Agent plan checklist with nested subtasks and pending, running, done and failed states, each transitioning in place. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"educalvolpz","st":"rated","pl":"https://cdn.21st.dev/educlopez/ai-task-list/default/preview.1785567967758-07a81852-4356-4976-ae82-7155971a1845.png","pc":"educalvolpz","tg":["ai-chat","list"],"sc":22},{"id":"21st:educalvolpz__ai-tool-call","t":"Ai tool call","d":"Agent tool-call card that stays collapsed while running and expands to its arguments and result, with success, running and error states. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/ai-tool-call/default/preview.1785567181237-55f8a3a3-5b93-4dbc-aeac-02176117b567.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__animated-file-upload","t":"Animated file upload","d":"A drag-and-drop file upload dropzone with animated states, file list, size validation, and remove controls.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/animated-file-upload/default/preview.1783571477956.png","pc":"educalvolpz","tg":["upload-download"]},{"id":"21st:educalvolpz__animated-input","t":"Animated input","d":"Here is Animated Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-input/default/preview.1756780352576.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__animated-progress-bar","t":"Animated progress bar","d":"Here is Animated Progress Bar component","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-progress-bar/default/preview.1756780277455.png","pc":"educalvolpz","tg":["progress"]},{"id":"21st:educalvolpz__animated-tags","t":"Animated tags","d":"A tag selector where tags animate with blur and spring motion as they move between an available list and a selected list.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/animated-tags/default/preview.1784402607562-45a271e5-e937-417d-8314-ffc2eb4d0269.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__animated-toggle","t":"Animated toggle","d":"A toggle switch with spring animations and default, morph, and icon variants for on/off states.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/animated-toggle/default/preview.1785175481823-99c733cb-1dca-4dbc-ac26-1504f7f4c450.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__basic-accordion","t":"Basic accordion","d":"Here is Basic Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/basic-accordion/default/preview.1760168287262.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__basic-modal","t":"Basic modal","d":"Here is Basic Modal component","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/basic-modal/default/preview.1760169252196.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__blur-out-up","t":"Blur out up","d":"Words lift out of a soft blur and drift upward into place, staggered 28ms apart over a 0.56s ease-out. Respects prefers-reduced-motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/blur-out-up/default/preview.1785772986870-d85cf12f-a93f-4e91-a5aa-2b8e1e1d8d84.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__bottom-up-letters","t":"Bottom up letters","d":"A per-character text reveal where letters rise up from below in a staggered staircase, built with Motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/bottom-up-letters/default/preview.1784674070254-4204a8b3-612d-45ba-a104-5e1c7d9b9934.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__cursor-follow","t":"Cursor follow","d":"A cursor-follow component that displays context-sensitive text when hovering over elements. Demo shows two images with different hover texts.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"educalvolpz","st":"indexed","u":23,"pl":"https://cdn.21st.dev/educlopez/cursor-follow/default/preview.1753165364556.png","pc":"educalvolpz","tg":["cursor","gallery"]},{"id":"21st:educalvolpz__depth-parallax-words","t":"Depth parallax words","d":"Words come forward from different depths with a 70ms stagger and real perspective, so a line arrives with dimension instead of flat. Respects prefers-reduced-motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/depth-parallax-words/default/preview.1785773298829-67d3ead8-5a07-4ca3-a790-31c2d9eca6a3.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__dynamic-island","t":"Dynamic island","d":"Apple-inspired Dynamic Island component with smooth spring animations. Expandable notification pill for alerts, music players, timers, incoming calls, and status updates. Respects ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/dynamic-island/default/preview.1776499040022.png","pc":"educalvolpz","tg":["notification"]},{"id":"21st:educalvolpz__exposure-slider","t":"Exposure slider","d":"A camera-style notch ruler you drag instead of a thumb — momentum, masked edge fade, optional progress ring, and any min/max/step you need.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/exposure-slider/default/preview.1785960061056-c4373d45-6de1-49c2-a5f4-7c8e1968dc2e.png","pc":"educalvolpz","tg":["input","slider"]},{"id":"21st:educalvolpz__fade-through","t":"Fade through","d":"A text animation component that cycles through phrases with a Material-style crossfade, fading old text out and new text in for hero headlines and rotating taglines.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/fade-through/default/preview.1784673850565-3a9396d6-cfa0-41a0-a5bc-6ac1f278d144.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__figma-comment","t":"Figma comment","d":"A Figma-style comment pin that springs open from a 32px bubble into a full note, measures its own height, and closes on click outside. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/chat-thread","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/figma-comment/default/preview.1785960143362-c4f98b7b-fb82-4fb5-a946-f675947f9e40.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__github-stars-animation","t":"Github stars animation","d":"Displays GitHub stargazer avatars with a staggered entrance and an animated count-up star counter for hero and landing sections.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/github-stars-animation/default/preview.1784459382898-cc0545ff-a11c-4cfc-a733-1f9e4a1ed0a6.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__glow-hover-card","t":"Glow hover card","d":"A card grid where a radial mask reveals a duplicated glowing layer under the cursor, each card lighting up in its own hue. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/glow-hover-card/default/preview.1785773379090-94be4074-96f1-4afd-a99f-49707f785cb6.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__image-metadata-preview","t":"Image metadata preview","d":"An image preview card that lifts to reveal a filename, description, and EXIF-style metadata panel with smooth Motion animations.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/image-metadata-preview/default/preview.1784410837382-6825bc8d-f7f3-42a0-83d0-25573705b839.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__interactive-image-selector","t":"Interactive image selector","d":"An animated image gallery grid with a toggle selection mode for selecting, sharing, and deleting multiple photos.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"educalvolpz","st":"indexed","u":12,"pl":"https://cdn.21st.dev/educlopez/interactive-image-selector/default/preview.1784438357064-65ec77b3-960c-452d-b72a-47fa2fb66f59.png","pc":"educalvolpz","tg":["gallery"]},{"id":"21st:educalvolpz__job-listing","t":"Job listing","d":"Here is Job Listing component ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"educalvolpz","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/job-listing/default/preview.1760167097573.png","pc":"educalvolpz","tg":["list"]},{"id":"21st:educalvolpz__micro-scale-fade","t":"Micro scale fade","d":"A text animation component that reveals whole words or short headings with a calm, tiny scale-and-fade pop.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/micro-scale-fade/default/preview.1784384266432-0c572945-17f6-4976-97f8-f58cd0aa2720.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__modal","t":"Modal","d":"Here is Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"educalvolpz","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/modal/default/preview.1756780656423.png","pc":"educalvolpz","tg":["modal"]},{"id":"21st:educalvolpz__number-flow","t":"Number flow","d":"An animated numeric stepper with rolling, blur-transitioned digits and increment/decrement buttons for counters and quantity inputs.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"educalvolpz","st":"indexed","u":3,"pl":"https://cdn.21st.dev/educlopez/number-flow/default/preview.1783677477782.png","pc":"educalvolpz","tg":["number"]},{"id":"21st:educalvolpz__otp-input","t":"Otp input","d":"Here is Otp Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/otp-input/default/preview.1760170385642.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__per-word-crossfade","t":"Per word crossfade","d":"Per-word text reveal that fades each word in with a subtle upward drift for a calm, keynote-style heading entrance.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/per-word-crossfade/default/preview.1784476034597-f1322c2e-6310-4293-bf05-6b64e712c031.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__prism-sweep-transition","t":"Prism sweep transition","d":"A refracting prism field sweeps across the screen and splits the outgoing frame into its channels — four tones, four directions, WebGL. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"other","g":"other","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/prism-sweep-transition/default/preview.1785959810217-6d1df3d4-40e8-4256-a802-9db11716e251.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__reveal-text","t":"Reveal text","d":"Animated text reveal component with directional entrances (up, down, left, right), configurable delay, view-triggered animation, and reduced-motion support.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/reveal-text/default/preview.1783583237377.png","pc":"educalvolpz","tg":["scroll-area"]},{"id":"21st:educalvolpz__reviews-carousel","t":"Reviews carousel","d":"An animated carousel for displaying customer testimonials and reviews as a spring-animated stack of cards with keyboard navigation, indicators, and auto-play.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"educalvolpz","st":"indexed","u":7,"pl":"https://cdn.21st.dev/educlopez/reviews-carousel/default/preview.1783657507577.png","pc":"educalvolpz","tg":["carousel","testimonials"]},{"id":"21st:educalvolpz__sdf-blob-transition","t":"Sdf blob transition","d":"Signed-distance-field blobs grow, warp and merge to carry one screen into the next, with five variants and a duration you control. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"other","g":"other","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/sdf-blob-transition/default/preview.1785959982415-f7337475-9b19-4302-b311-3e9d9151058a.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__shader-reveal-transition","t":"Shader reveal transition","d":"Eight GPU screen transitions in one component — noise, zoom, circle, wipe, luma, planetary, stripes and push — driven by a transitionKey. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educalvolpz/shader-reveal-transition/default/preview.1785959903556-88f96022-75b7-4ee4-b482-012cde5adadd.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__shared-axis-y","t":"Shared axis y","d":"An animated text component that swaps phrases with a per-word hard-cut staircase transition for sharp, editorial word cycling.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/shared-axis-y/default/preview.1784674037275-9c88f9b4-1dc1-4444-bd12-7957a15e4140.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__short-slide-down","t":"Short slide down","d":"A looping text animation where each word drops in from above onto its own centered line, stacking downward into a multi-line composition.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/short-slide-down/default/preview.1784453640803-9ce5c97a-fe7c-4f03-a0c9-f954f2ced492.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__short-slide-right","t":"Short slide right","d":"An animated text component that glides swapping phrases in from the left as one compact unit while words reveal in sequence through an opacity stagger.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/short-slide-right/default/preview.1784490114998-8c234894-7c42-4af7-9411-004ef8e178ae.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__siri-orb","t":"Siri orb","d":"Siri-style animated audio visualizer orb with conic gradients, smooth rotation, and customizable colors. Pure CSS animation, respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/siri-orb/default/preview.1776499909704.png","pc":"educalvolpz","tg":["ai-chat"]},{"id":"21st:educalvolpz__smooth-button","t":"Smooth button","d":"A polished button component with gradient candy/destructive variants, sizes, and a subtle press-scale animation.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"educalvolpz","st":"indexed","u":172,"pl":"https://cdn.21st.dev/educlopez/smooth-button/default/preview.1783577545659.png","pc":"educalvolpz"},{"id":"21st:educalvolpz__soft-blur-in","t":"Soft blur in","d":"Per-character text reveal that fades each letter in with a soft blur and gentle upward motion for an Apple keynote-style hero title entrance.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/soft-blur-in/default/preview.1784416451741-695c41ee-f981-4317-be8a-f8e6ce936826.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__spring-scale-in","t":"Spring scale in","d":"A per-word text reveal that scales each word in with a soft spring overshoot for an iOS app icon-style pop.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/spring-scale-in/default/preview.1784384278542-9c687194-f6f1-403a-8bfe-c21d59721f0a.png","pc":"educalvolpz","tg":["text"]},{"id":"21st:educalvolpz__typewriter-text","t":"Typewriter text","d":"Animated text that reveals character by character with a typewriter effect, with configurable speed, optional looping, and reduced-motion support.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"educalvolpz","st":"indexed","pl":"https://cdn.21st.dev/educlopez/typewriter-text/default/preview.1784702915097-f74500d9-5b43-41ff-b894-df4ac9c55e41.png","pc":"educalvolpz"},{"id":"21st:edwinvakayil__alert","t":"Alert","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/alert/default/preview.1780079046419.png","pc":"edwinvakayil","tg":["alert","notification","toast"]},{"id":"21st:edwinvakayil__b-popover","t":"B popover","d":"A popover built on Base UI popover primitives with side-aware panel motion, optional anchor support, and size-aware content transitions.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/edwinvakayil/b-popover/default/preview.1785495734945-d3e3ff57-3b37-4109-8899-e3af28826c04.png","pc":"edwinvakayil","tg":["popover","tooltip"]},{"id":"21st:edwinvakayil__breadcrumbs","t":"Breadcrumbs","d":"This is a breadcrumbs component","k":"component","s":"21st","c":"navigation/breadcrumb","g":"navigation","a":"edwinvakayil","st":"indexed","u":3,"pl":"https://cdn.21st.dev/lyanchouss/breadcrumbs/default/preview.1780148682971.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__charts","t":"Charts","d":"There are charts component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/charts/default/preview.1780162520512.png","pc":"edwinvakayil","tg":["carousel","data-visualization"]},{"id":"21st:edwinvakayil__combobox","t":"Combobox","d":"This is combobox component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/combobox/default/preview.1780177029789.png","pc":"edwinvakayil","tg":["dropdown","select"]},{"id":"21st:edwinvakayil__dia-text","t":"Dia text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/dia-text/default/preview.1780688855312.png","pc":"edwinvakayil","tg":["text"]},{"id":"21st:edwinvakayil__faq-pro","t":"Faq pro","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/faq-pro/default/preview.1780693119279.png","pc":"edwinvakayil","tg":["accordion","faq","search"]},{"id":"21st:edwinvakayil__file-tree","t":"File tree","d":"A compound file tree with nested folder rows, extension-aware icons, keyboard navigation, hover highlighting, and single or multi-select for browsing file structures.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/edwinvakayil/file-tree/default/preview.1783695298489.png","pc":"edwinvakayil","tg":["file-tree","icon"]},{"id":"21st:edwinvakayil__icon-bar","t":"Icon bar","k":"component","s":"21st","c":"media/icon","g":"media","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/icon-bar/default/preview.1780694376489.png","pc":"edwinvakayil","tg":["icon"]},{"id":"21st:edwinvakayil__infinite-ribbon","t":"Infinite ribbon","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/infinite-ribbon/default/preview.1780694157426.png","pc":"edwinvakayil","tg":["marquee","scroll-area","text"]},{"id":"21st:edwinvakayil__morph-texts","t":"Morph texts","d":"Cycling headline words that morph between phrases with a goo-filter blur transition.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/edwinvakayil/morph-texts/default/preview.1783681859817.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__new-badge","t":"New badge","d":"This is a new badge component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"edwinvakayil","st":"indexed","u":15,"pl":"https://cdn.21st.dev/lyanchouss/new-badge/default/preview.1780147043227.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__new-button","t":"New button","d":"This is button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/new-button/default/preview.1780152269322.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__new-calendar","t":"New calendar","d":"This is calendar component","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/new-calendar/default/preview.1780166589989.png","pc":"edwinvakayil","tg":["calendar","date-picker"]},{"id":"21st:edwinvakayil__new-card","t":"New card","d":"This is card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/new-card/default/preview.1780154062742.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__new-checkbox","t":"New checkbox","d":"This is a checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"edwinvakayil","st":"indexed","u":4,"pl":"https://cdn.21st.dev/lyanchouss/new-checkbox/default/preview.1780172525858.png","pc":"edwinvakayil","tg":["checkbox"]},{"id":"21st:edwinvakayil__new-context-menu","t":"New context menu","d":"This is context menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/new-context-menu/default/preview.1780177994596.png","pc":"edwinvakayil","tg":["menu"]},{"id":"21st:edwinvakayil__new-hover-card","t":"New hover card","d":"This is hover card component.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/new-hover-card/default/preview.1780264099333.png","pc":"edwinvakayil","tg":["link","popover","profile"]},{"id":"21st:edwinvakayil__one-accordion","t":"One accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-accordion/default/preview.1780078237453.png","pc":"edwinvakayil","tg":["accordion","faq"]},{"id":"21st:edwinvakayil__one-alert-dialog","t":"One alert dialog","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-alert-dialog/default/preview.1780080561509.png","pc":"edwinvakayil","tg":["alert","modal"]},{"id":"21st:edwinvakayil__one-avatar","t":"One avatar","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-avatar/default/preview.1780082345678.png","pc":"edwinvakayil","tg":["team"]},{"id":"21st:edwinvakayil__one-toogle","t":"One toogle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-toogle/default/preview.1780696681239.png","pc":"edwinvakayil","tg":["toggle"]},{"id":"21st:edwinvakayil__origin-button","t":"Origin button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/origin-button/default/preview.1780693767860.png","pc":"edwinvakayil","tg":["button"]},{"id":"21st:edwinvakayil__r-popover","t":"R popover","d":"An animated popover built on Radix UI primitives with side-aware panel motion, squircle corners, and size-aware content transitions.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/edwinvakayil/r-popover/default/preview.1785496369326-14bac932-26f3-496c-bfe3-7ec11846be74.png","pc":"edwinvakayil","tg":["popover","tooltip"]},{"id":"21st:edwinvakayil__rolling-digits","t":"Rolling digits","d":"An animated number counter where each digit springs and rolls vertically into place when the value changes.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"edwinvakayil","st":"indexed","u":4,"pl":"https://cdn.21st.dev/edwinvakayil/rolling-digits/default/preview.1784753763985-90fd4822-a5d9-4fad-a5ee-0fdbc85d13e3.png","pc":"edwinvakayil","tg":["number"]},{"id":"21st:edwinvakayil__shimmer-text","t":"Shimmer text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"edwinvakayil","st":"indexed","u":13,"pl":"https://cdn.21st.dev/lyanchouss/shimmer-text/default/preview.1780687965359.png","pc":"edwinvakayil","tg":["ai-chat","spinner","text"]},{"id":"21st:edwinvakayil__text-inertia","t":"Text inertia","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/text-inertia/default/preview.1780687248770.png","pc":"edwinvakayil","tg":["text"]},{"id":"21st:edwinvakayil__the-button-group","t":"The button group","d":"This is a button group component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/the-button-group/default/preview.1780152769626.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__the-checkbox-group","t":"The checkbox group","d":"This is checkbox group component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/the-checkbox-group/default/preview.1780173261175.png","pc":"edwinvakayil","tg":["checkbox"]},{"id":"21st:edwinvakayil__the-dialog","t":"The dialog","d":"This is dialog component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/the-dialog/default/preview.1780178505250.png","pc":"edwinvakayil","tg":["modal"]},{"id":"21st:edwinvakayil__the-typewriter","t":"The typewriter","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/the-typewriter/default/preview.1780686622092.png","pc":"edwinvakayil"},{"id":"21st:edwinvakayil__theme-toggle","t":"Theme toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/theme-toggle/default/preview.1780692593304.png","pc":"edwinvakayil","tg":["toggle"]},{"id":"21st:edwinvakayil__toggle-group","t":"Toggle group","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/toggle-group/default/preview.1780695938765.png","pc":"edwinvakayil","tg":["toggle"]},{"id":"21st:edwinvakayil__tooltip","t":"Tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"edwinvakayil","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/tooltip/default/preview.1780695705004.png","pc":"edwinvakayil","tg":["link","tooltip"]},{"id":"21st:edwinvakayil__verified-badge","t":"Verified badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"edwinvakayil","st":"indexed","u":2,"pl":"https://cdn.21st.dev/lyanchouss/verified-badge/default/preview.1780692055590.png","pc":"edwinvakayil","tg":["badge","icon"]},{"id":"21st:efferd__popover","t":"Popover","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"efferd","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/popover/default/preview.1753470878115.png","pc":"efferd"},{"id":"21st:eghafari.5000__glass-card","t":"Glass card","d":"A reusable glassmorphism card component optimized for product presentation in modern UI systems.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"eghafari.5000","st":"indexed","pl":"https://cdn.21st.dev/eghafari.5000/glass-card/default/preview.1767563813390.png","pc":"eghafari.5000"},{"id":"21st:eindev__glass-spotlight","t":"Glass spotlight","d":"A guided product-tour spotlight that dims the page and highlights a target element with a glass-morphism tooltip card and step navigation.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"eindev","st":"indexed","pl":"https://cdn.21st.dev/eindev/glass-spotlight/default/preview.1784824080141-78e914a3-840b-429f-9ade-9610ba484553.png","pc":"eindev"},{"id":"21st:ekmas__accordion","t":"Accordion","d":"Neobrutalism-styled accordion component.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ekmas","st":"indexed","u":46,"pl":"https://cdn.21st.dev/user_2reteS3IODi8OJpbNYOpgLKdwT7/accordion/default/preview.1739030210739.png","pc":"ekmas","tg":["accordion","border","faq"]},{"id":"21st:elements-__chain-of-thought","t":"Chain of thought","d":"Collapsible component that visualizes AI reasoning as step-by-step thinking with status indicators, search results, and images.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"elements-","st":"rated","pl":"https://cdn.21st.dev/elements-/chain-of-thought/default/preview.1784286490315-001427c4-0049-4f59-9368-47080a0a191d.png","pc":"elements-","tg":["ai-chat","search","steps"],"sc":22},{"id":"21st:elements-__conversation-tree","t":"Conversation tree","d":"A compound component that visualizes branching AI conversations as an expandable tree with node type indicators, active path highlighting, and click-to-navigate selection.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/conversation-tree/default/preview.1784311529739-6ae5f187-e778-4e3f-a823-089314ebd600.png","pc":"elements-","tg":["ai-chat","file-tree"]},{"id":"21st:elements-__error-boundary-ui","t":"Error boundary ui","d":"An error display component for React error boundaries showing the message, parsed stack trace, component stack, with retry and copy-error actions.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/error-boundary-ui/default/preview.1783730014402.png","pc":"elements-","tg":["accordion"]},{"id":"21st:elements-__latency-meter","t":"Latency meter","d":"Response time visualization for AI requests showing TTFB and total duration with color-coded performance indicators, an animated progress bar, and compact or expanded variants.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/latency-meter/default/preview.1784354323301-ff45538d-0d27-4918-bc01-f7f3bf9e0769.png","pc":"elements-"},{"id":"21st:elements-__loader-cli-spinner","t":"Loader cli spinner","d":"A terminal-style text spinner with 90 selectable ASCII/braille animation variants for loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-cli-spinner/default/preview.1784366532450-4628a890-b52e-4dae-afbf-53e0ff13e70b.png","pc":"elements-","tg":["spinner"]},{"id":"21st:elements-__loader-dot-matrix","t":"Loader dot matrix","d":"A grid of dots that animate with ripple, wave, or rain patterns to indicate a loading state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-dot-matrix/default/preview.1785376254909-69c5959d-a50e-4c84-8b26-8fc41776e2c0.png","pc":"elements-"},{"id":"21st:elements-__loader-glitch-text","t":"Loader glitch text","d":"Animated glitch text loader with RGB channel splitting, clip-path distortion, and random character scrambling.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-glitch-text/default/preview.1784365049395-b6731912-5b32-437d-a859-952275ddaff1.png","pc":"elements-","tg":["spinner","text"]},{"id":"21st:elements-__loader-helix","t":"Loader helix","d":"An animated DNA double-helix loading spinner with dots traveling along interleaved sinusoidal paths, supporting dna, ribbon, and minimal variants.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-helix/default/preview.1784377377368-aa225c9d-fb0a-4306-8b91-523a55332a5a.png","pc":"elements-","tg":["spinner"]},{"id":"21st:elements-__loader-morphing-blob","t":"Loader morphing blob","d":"An animated liquid blob loading spinner with organic morphing shapes, specular highlights, and metallic, iridescent, or themed color variants.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-morphing-blob/default/preview.1784367958047-1a6bd0ff-2dcd-4a76-a3d8-055401273d11.png","pc":"elements-","tg":["spinner"]},{"id":"21st:elements-__loader-signal-bars","t":"Loader signal bars","d":"An audio waveform loading indicator with configurable bars that pulse rhythmically in equalizer, waveform, or heartbeat styles.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-signal-bars/default/preview.1786705753779-91dc56a4-0c46-46e5-96ce-8116f174612f.png","pc":"elements-"},{"id":"21st:elements-__loader-terminal-decode","t":"Loader terminal decode","d":"An animated loading indicator that cycles through random symbol, binary, or hex characters before resolving into readable text, like a terminal decoding cipher.","k":"component","s":"21st","c":"status/loader","g":"status","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/loader-terminal-decode/default/preview.1784762281215-d9dffa81-7495-4b6d-9b61-7af77b8d5070.png","pc":"elements-","tg":["spinner"]},{"id":"21st:elements-__message-bubble","t":"Message bubble","d":"Chat message bubble with user and assistant roles, provider avatars, timestamps, streaming cursor, and copy-on-hover.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/message-bubble/default/preview.1784355273283-0a92aa00-6cc7-4be2-a5f2-4c03ac43a373.png","pc":"elements-","tg":["ai-chat"]},{"id":"21st:elements-__polar-sponsor-grid","t":"Polar sponsor grid","d":"A grid of sponsor avatars grouped by contribution tier, with initials fallbacks, custom tier colors, and profile links.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/polar-sponsor-grid/default/preview.1784714459533-9843a0f2-5b55-4a99-be2e-bb7112249682.png","pc":"elements-"},{"id":"21st:elements-__prompt-diff","t":"Prompt diff","d":"Compound component that compares two system prompts with unified or side-by-side diff views, added/removed line highlighting, line numbers, and copy buttons.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/prompt-diff/default/preview.1783574936439.png","pc":"elements-","tg":["ai-chat"]},{"id":"21st:elements-__routing-indicator","t":"Routing indicator","d":"A multi-agent routing visualizer that highlights matched patterns in the input, shows the target agent with a confidence score, and animates an active routing state.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"rated","pl":"https://cdn.21st.dev/elements-/routing-indicator/default/preview.1784366538594-89b9601b-0a59-4e4e-a80e-216e26b2d54d.png","pc":"elements-","tg":["ai-chat"],"sc":21},{"id":"21st:elements-__streaming-text","t":"Streaming text","d":"Animated text that streams in character-by-character or word-by-word with a blinking cursor, simulating an AI typewriter response.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/streaming-text/default/preview.1783715791002.png","pc":"elements-","tg":["ai-chat","cursor"]},{"id":"21st:elements-__suggested-actions","t":"Suggested actions","d":"Responsive grid of suggestion buttons that display quick chat prompts users can click to start or steer a conversation.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/suggested-actions/default/preview.1784360655182-c2c209b9-d3fa-47c7-8687-3988354daa52.png","pc":"elements-","tg":["ai-chat"]},{"id":"21st:elements-__tool-call","t":"Tool call","d":"Compound component for displaying AI tool and function invocations with status badges, JSON input/output, and a collapsible interface for MCP and function-calling workflows.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"elements-","st":"rated","pl":"https://cdn.21st.dev/elements-/tool-call/default/preview.1784287390993-d8ef5295-9ec9-4823-9bb8-fb0c183b59e2.png","pc":"elements-","tg":["ai-chat"],"sc":21},{"id":"21st:elements-__uploadthing-dropzone","t":"Uploadthing dropzone","d":"A drag-and-drop file upload zone with progress tracking, validation, and uploaded-file management that works with any upload backend.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"elements-","st":"rated","pl":"https://cdn.21st.dev/elements-/uploadthing-dropzone/default/preview.1784756358475-55119eaa-82bb-446f-ae7a-12b91558d60c.png","pc":"elements-","tg":["upload-download"],"sc":22},{"id":"21st:elements-__uploadthing-image-grid","t":"Uploadthing image grid","d":"A multi-image upload grid with preview thumbnails, hover-to-remove buttons, upload progress spinners, and configurable columns.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/uploadthing-image-grid/default/preview.1784266068302-e90d401c-297a-4546-8e70-b7ee69b0fd0c.png","pc":"elements-","tg":["gallery","image","upload-download"]},{"id":"21st:elements-__uploadthing-paste","t":"Uploadthing paste","d":"A clipboard paste zone that accepts pasted images and files, showing upload progress and success states — ideal for quick screenshot uploads.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"elements-","st":"indexed","pl":"https://cdn.21st.dev/elements-/uploadthing-paste/default/preview.1784757063461-7be67303-f581-426d-b89c-f9c2176cddc0.png","pc":"elements-","tg":["border","upload-download"]},{"id":"21st:elements-__uploadthing-progress","t":"Uploadthing progress","d":"An upload progress indicator with linear bar, circular ring, and minimal percentage variants in three sizes.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"elements-","st":"rated","pl":"https://cdn.21st.dev/elements-/uploadthing-progress/default/preview.1784365043344-9097bf05-781c-4335-9b88-953583421c88.png","pc":"elements-","tg":["progress","upload-download"],"sc":20},{"id":"21st:elements-__upstash-counter","t":"Upstash counter","d":"Animated number counter with smooth transitions, compact formatting, and optional increment/decrement controls for displaying Redis counters.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"elements-","st":"indexed","u":2,"pl":"https://cdn.21st.dev/elements-/upstash-counter/default/preview.1784348856408-d2871063-c319-4d39-974a-bc41f05f2730.png","pc":"elements-","tg":["stat"]},{"id":"21st:eliaszaki__silk-blend","t":"Silk blend","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#0B1E3B, #1E5A8A, #4F9AD0, #BFE6F5). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"eliaszaki","st":"indexed","pl":"https://cdn.21st.dev/eliaszaki/silk-blend/default/preview.1785167739769-94d83a1c-71d1-4e44-8dbf-8db09e93229c.webp","pc":"eliaszaki"},{"id":"21st:elizarovroma__gffgfdfdfgdfgdf","t":"Gffgfdfdfgdfgdf","d":"dfgdgfdgfdgfdgfgdfgdfgdfdgdfgdfgdgdg","k":"component","s":"21st","c":"other","g":"other","a":"elizarovroma","st":"indexed","pl":"https://cdn.21st.dev/elizarovroma/gffgfdfdfgdfgdf/default/preview.1748675524417.png","pc":"elizarovroma"},{"id":"21st:ephraimduncan__dialog","t":"Dialog","d":"Here is minimalistic dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"indexed","u":33,"pl":"https://cdn.21st.dev/larsen66/dialog/default/preview.1748124547110.png","pc":"ephraimduncan","tg":["modal"]},{"id":"21st:ephraimduncan__dialog-1","t":"Dialog 1","d":"Here is dialog component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/dialog-1/default/preview.1748125065573.png","pc":"ephraimduncan","tg":["modal"]},{"id":"21st:ephraimduncan__dialog-deactivate","t":"Dialog deactivate","d":"Here is account deactivation dialog","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ephraimduncan","st":"rated","u":23,"pl":"https://cdn.21st.dev/larsen66/dialog-deactivate/default/preview.1748125242265.png","pc":"ephraimduncan","tg":["alert","modal"],"sc":18},{"id":"21st:ephraimduncan__dialog-info","t":"Dialog info","d":"Here is dialog information filling component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"rated","pl":"https://cdn.21st.dev/larsen66/dialog-info/default/preview.1748125968160.png","pc":"ephraimduncan","tg":["modal"],"sc":18},{"id":"21st:ephraimduncan__dialog-modal","t":"Dialog modal","d":"Here is deactivationg two-step modal dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/dialog-modal/default/preview.1748125357349.png","pc":"ephraimduncan","tg":["alert","modal","steps"]},{"id":"21st:ephraimduncan__dialog-projectstarter","t":"Dialog projectstarter","d":"Here is minimalistic project started dialog page","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"rated","pl":"https://cdn.21st.dev/larsen66/dialog-projectstarter/default/preview.1748125922149.png","pc":"ephraimduncan","tg":["modal"],"sc":22},{"id":"21st:ephraimduncan__file-upload","t":"File upload","d":"here is minimalistic file upload component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/file-upload/default/preview.1748126643352.png","pc":"ephraimduncan","tg":["modal","upload-download"]},{"id":"21st:ephraimduncan__file-upload-01","t":"File upload 01","d":"A file upload card with a drag-and-drop dropzone, image preview, upload progress bars, and a project details form.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ephraimduncan/file-upload-01/default/preview.1784719369603-f0bff071-76e5-4dcf-804e-900e18a38188.png","pc":"ephraimduncan","tg":["upload-download"]},{"id":"21st:ephraimduncan__file-upload-03","t":"File upload 03","d":"A multi-file upload card with a drag-and-drop dropzone, bucket name and visibility fields, and a removable list of selected files.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ephraimduncan/file-upload-03/default/preview.1784719303115-3bccdb17-1428-4c58-9944-c1aa1dd7e8bf.png","pc":"ephraimduncan","tg":["upload-download"]},{"id":"21st:ephraimduncan__file-upload-04","t":"File upload 04","d":"A drag-and-drop file upload area for CSV, XLSX and XLS files with type validation, an upload progress bar and cancel action.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"rated","pl":"https://cdn.21st.dev/ephraimduncan/file-upload-04/default/preview.1784486849877-4a874d33-4764-454f-aaaf-d57accdb6e1d.png","pc":"ephraimduncan","tg":["progress","upload-download"],"sc":22},{"id":"21st:ephraimduncan__file-upload-1","t":"File upload 1","d":"Here is File Upload component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ephraimduncan","st":"rated","u":88,"pl":"https://cdn.21st.dev/larsen66/file-upload-1/default/preview.1753209223376.png","pc":"ephraimduncan","tg":["card","form","input","progress"],"sc":22},{"id":"21st:ephraimduncan__form","t":"Form","d":"Minimalistic form layout","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ephraimduncan","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/form/default/preview.1748127154626.png","pc":"ephraimduncan","tg":["form","sign-up"]},{"id":"21st:ephraimduncan__form-1","t":"Form 1","d":"Here is advanced form layout","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ephraimduncan","st":"rated","u":15,"pl":"https://cdn.21st.dev/larsen66/form-1/default/preview.1748127309823.png","pc":"ephraimduncan","tg":["form","radio-group","select","textarea"],"sc":19},{"id":"21st:ephraimduncan__form-2","t":"Form 2","d":"minimalistic register form ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"rated","u":29,"pl":"https://cdn.21st.dev/larsen66/form-2/default/preview.1748127382629.png","pc":"ephraimduncan","tg":["sign-up"],"sc":17},{"id":"21st:ephraimduncan__form-layout","t":"Form layout","d":"Here is Form Layout component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ephraimduncan","st":"indexed","u":112,"pl":"https://cdn.21st.dev/larsen66/form-layout/default/preview.1753207332517.png","pc":"ephraimduncan","tg":["checkbox","form","pricing-section","radio-group"]},{"id":"21st:ephraimduncan__grid","t":"Grid","d":"A simple minimalistic grid","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ephraimduncan","st":"indexed","pl":"https://cdn.21st.dev/larsen66/grid/default/preview.1748127479128.png","pc":"ephraimduncan"},{"id":"21st:ephraimduncan__info-dialog","t":"Info dialog","d":"Here is info filling dialog page","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"rated","pl":"https://cdn.21st.dev/larsen66/info-dialog/default/preview.1748125792319.png","pc":"ephraimduncan","tg":["modal"],"sc":21},{"id":"21st:ephraimduncan__login-03","t":"Login 03","d":"A centered login form with email and password fields, a sign-in button, and a reset-password link.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ephraimduncan/login-03/default/preview.1784787523413-7054b4a2-ae6b-40a0-861e-f0ae301d5930.png","pc":"ephraimduncan","tg":["sign-in"]},{"id":"21st:ephraimduncan__login-05","t":"Login 05","d":"A centered signup card with name, email, password and confirm-password fields, a newsletter checkbox, and terms links for creating a new workspace account.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ephraimduncan/login-05/default/preview.1784787135640-b51f3dbc-f4a3-4235-934d-d27b6bdc80e2.png","pc":"ephraimduncan","tg":["sign-up"]},{"id":"21st:ephraimduncan__login-06","t":"Login 06","d":"A centered card login form offering magic-link email sign-in, password fallback, and single sign-on (SSO).","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ephraimduncan/login-06/default/preview.1784787329983-1bea4256-d56c-46a5-b168-df32a4461b45.png","pc":"ephraimduncan"},{"id":"21st:ephraimduncan__login-08","t":"Login 08","d":"A centered login card with email and password fields, a show/hide password toggle, remember-me checkbox, and a single sign-on (SSO) button.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ephraimduncan/login-08/default/preview.1784786918104-26a72207-c869-4b8c-bb9e-f9e267c69fed.png","pc":"ephraimduncan","tg":["sign-in"]},{"id":"21st:ephraimduncan__login-1","t":"Login 1","d":"here is minimalistic login pag","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","pl":"https://cdn.21st.dev/larsen66/login-1/default/preview.1748127666675.png","pc":"ephraimduncan","tg":["sign-in"]},{"id":"21st:ephraimduncan__login-2","t":"Login 2","d":"Here is minimalistic advanced login page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":61,"pl":"https://cdn.21st.dev/larsen66/login-2/default/preview.1748127888670.png","pc":"ephraimduncan","tg":["sign-in"]},{"id":"21st:ephraimduncan__login-3","t":"Login 3","d":"here is advanced login page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"rated","u":58,"pl":"https://cdn.21st.dev/larsen66/login-3/default/preview.1748127965199.png","pc":"ephraimduncan","tg":["form","sign-in"],"sc":18},{"id":"21st:ephraimduncan__login-signup","t":"Login signup","d":"Here is Login & Signup component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":282,"pl":"https://cdn.21st.dev/larsen66/login-signup/default/preview.1753197583457.png","pc":"ephraimduncan","tg":["checkbox","form","input","sign-in"]},{"id":"21st:ephraimduncan__registration","t":"Registration","d":"here is minimalistic registration page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":83,"pl":"https://cdn.21st.dev/larsen66/registration/default/preview.1748128150916.png","pc":"ephraimduncan","tg":["checkbox","sign-up"]},{"id":"21st:ephraimduncan__share-dialog","t":"Share dialog","d":"Here is minimalistic share dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ephraimduncan","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/share-dialog/default/preview.1748125630450.png","pc":"ephraimduncan","tg":["modal"]},{"id":"21st:ephraimduncan__signup","t":"Signup","d":"Here is advanced signup page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ephraimduncan","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/signup/default/preview.1748127854456.png","pc":"ephraimduncan","tg":["checkbox","sign-up"]},{"id":"21st:ephraimduncan__stats","t":"Stats","d":"Here is minimalistic stat block","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ephraimduncan","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/stats/default/preview.1748128113308.png","pc":"ephraimduncan","tg":["stat"]},{"id":"21st:ephraimduncan__stats-1","t":"Stats 1","d":"Here is minimalistic stats component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ephraimduncan","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/stats-1/default/preview.1748128273797.png","pc":"ephraimduncan","tg":["card","dashboard","stat"]},{"id":"21st:ephraimduncan__stats-3","t":"Stats 3","d":"Here is minimalistic stats with progress bar","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ephraimduncan","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/stats-3/default/preview.1748128398216.png","pc":"ephraimduncan","tg":["dashboard","progress","stat"]},{"id":"21st:ephraimduncan__stats-4","t":"Stats 4","d":"Here is advanced charts with chart","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ephraimduncan","st":"indexed","u":30,"pl":"https://cdn.21st.dev/larsen66/stats-4/default/preview.1748128467789.png","pc":"ephraimduncan","tg":["stat"]},{"id":"21st:ephraimduncan__stats-cards-with-links","t":"Stats cards with links","d":"Here is Stats cards with links","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ephraimduncan","st":"indexed","u":71,"pl":"https://cdn.21st.dev/larsen66/stats-cards-with-links/default/preview.1753307424371.png","pc":"ephraimduncan","tg":["card","dashboard","link","pricing-section"]},{"id":"21st:ephraimduncan__upload","t":"Upload","d":"Simple upload block","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"indexed","pl":"https://cdn.21st.dev/larsen66/upload/default/preview.1748126940159.png","pc":"ephraimduncan","tg":["upload-download"]},{"id":"21st:ephraimduncan__upload-1","t":"Upload 1","d":"A minimalistic upload form","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/upload-1/default/preview.1748127197206.png","pc":"ephraimduncan","tg":["upload-download"]},{"id":"21st:ephraimduncan__upload-advanced","t":"Upload advanced","d":"Here is detailed upload component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ephraimduncan","st":"rated","u":12,"pl":"https://cdn.21st.dev/larsen66/upload-advanced/default/preview.1748126976281.png","pc":"ephraimduncan","tg":["upload-download"],"sc":21},{"id":"21st:erikvalencia1__3d-interactive-hero-scene","t":"3d interactive hero scene","d":"3D Interactive Hero Scene","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/3d-interactive-hero-scene/default/preview.1758221629528.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__animated-bento-grid","t":"Animated bento grid","d":"Animated Bento Grid with complex Illustrations ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/animated-bento-grid/default/preview.1757839538301.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__animated-tabs-background","t":"Animated tabs background","d":"Animated Tabs Background","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/animated-tabs-background/default/preview.1759156368752.png","pc":"erikvalencia1","tg":["tabs"]},{"id":"21st:erikvalencia1__floating-dock-navigation","t":"Floating dock navigation","d":"Floating Dock Navigation","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"erikvalencia1","st":"indexed","u":19,"pl":"https://cdn.21st.dev/erikvalencia1/floating-dock-navigation/default/preview.1759611633848.png","pc":"erikvalencia1","tg":["dock","navigation-menu"]},{"id":"21st:erikvalencia1__get-in-touch","t":"Get in touch","d":"Get in Touch","k":"component","s":"21st","c":"other","g":"other","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/get-in-touch/default/preview.1757731034159.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__hero-odyssey","t":"Hero odyssey","d":"Hero Section with Lightning effect ( coded ).","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"erikvalencia1","st":"indexed","u":445,"pl":"https://cdn.21st.dev/erikvalencia1/hero-odyssey/default/preview.1785355980033-2e57ae46-bdf3-48f4-975f-5784bd8e2328.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__hover-button","t":"Hover button","d":"Hover Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/hover-button/default/preview.1757835216283.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__hover-button-1","t":"Hover button 1","d":"Hover Buttom","k":"component","s":"21st","c":"actions/button","g":"actions","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/hover-button-1/default/preview.1757836563055.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__hover-link-animation","t":"Hover link animation","d":"Hover Link Animation","k":"component","s":"21st","c":"actions/link","g":"actions","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/hover-link-animation/default/preview.1759152631831.png","pc":"erikvalencia1","tg":["link","text"]},{"id":"21st:erikvalencia1__hover-text-glow","t":"Hover text glow","d":"Hover Text Glow","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"erikvalencia1","st":"indexed","u":10,"pl":"https://cdn.21st.dev/erikvalencia1/hover-text-glow/default/preview.1759612918455.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__interactive-ripple-background","t":"Interactive ripple background","d":" Interactive Ripple Background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"erikvalencia1","st":"indexed","u":7,"pl":"https://cdn.21st.dev/erikvalencia1/interactive-ripple-background/default/preview.1759611383741.png","pc":"erikvalencia1","tg":["background"]},{"id":"21st:erikvalencia1__layer-parallax-hero","t":"Layer parallax hero","d":"Layer Parallax Hero","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"erikvalencia1","st":"indexed","u":10,"pl":"https://cdn.21st.dev/erikvalencia1/layer-parallax-hero/default/preview.1759612080134.png","pc":"erikvalencia1","tg":["features"]},{"id":"21st:erikvalencia1__liquid-background-shader","t":"Liquid background shader","d":"Liquid Background Shader","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/liquid-background-shader/default/preview.1758220896098.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__login-page","t":"Login page","d":"Login Page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/login-page/default/preview.1757732472254.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__morphing-text","t":"Morphing text","d":"Morphing Text Component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"erikvalencia1","st":"indexed","u":13,"pl":"https://cdn.21st.dev/erikvalencia1/morphing-text/default/preview.1759611515331.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__our-services","t":"Our services","d":"Our Services Section","k":"component","s":"21st","c":"other","g":"other","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/our-services/default/preview.1757731682761.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__pricing-card-component","t":"Pricing card component","d":"Pricing Card Component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/pricing-card-component/default/preview.1759611554407.png","pc":"erikvalencia1","tg":["badge","card","pricing-section","table"]},{"id":"21st:erikvalencia1__pricing-card-with-features","t":"Pricing card with features","d":"Pricing Card With Features","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"erikvalencia1","st":"indexed","u":36,"pl":"https://cdn.21st.dev/erikvalencia1/pricing-card-with-features/default/preview.1759819408275.png","pc":"erikvalencia1","tg":["pricing-section"]},{"id":"21st:erikvalencia1__pricing-plan","t":"Pricing plan","d":"Pricing Plan Section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/pricing-plan/default/preview.1757731909661.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__ripple-animation","t":"Ripple animation","d":"Ripple Animation","k":"component","s":"21st","c":"other","g":"other","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/ripple-animation/default/preview.1759613322430.png","pc":"erikvalencia1"},{"id":"21st:erikvalencia1__voice-recording","t":"Voice recording","d":"Voice Recording Component","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"erikvalencia1","st":"indexed","pl":"https://cdn.21st.dev/erikvalencia1/voice-recording/default/preview.1759611224963.png","pc":"erikvalencia1"},{"id":"21st:estudioledcriativo__ledmkt","t":"Ledmkt","d":"AGENCY BRAZIL","k":"component","s":"21st","c":"other","g":"other","a":"estudioledcriativo","st":"indexed","pl":"https://cdn.21st.dev/estudioledcriativo/ledmkt/default/preview.1749310737720.png","pc":"estudioledcriativo"},{"id":"21st:evansliaudet__animated-select-1","t":"Animated select 1","d":"Animated select component made using framer-motion","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"evansliaudet","st":"indexed","u":18,"pl":"https://cdn.21st.dev/user_2vd5Ru0C3L00mkHa1dt6K81Myxt/animated-select-1/animated-select/preview.png","pc":"evansliaudet"},{"id":"21st:extend-hq__button","t":"Button","d":"A button with variants and a built-in loading state powered by the Spinner component.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"extend-hq","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/button/default/preview.1782165853546.png","pc":"extend-hq"},{"id":"21st:extend-hq__card","t":"Card","d":"Displays a card with header, content, and footer. Groups related content and actions into a bordered surface, with polymorphic sub-parts (header, title, description, action, panel,","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card/default/preview.1782172262218.png","pc":"extend-hq","tg":["card","footer"]},{"id":"21st:extend-hq__csv-viewer","t":"Csv viewer","d":"A CSV and TSV viewer with parsing, file upload, search, zoom, and theme-aware grid rendering powered by Glide Data Grid.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"extend-hq","st":"rated","pl":"https://cdn.21st.dev/larsen66/csv-viewer/default/preview.1782171888013.png","pc":"extend-hq","tg":["search","table","upload-download"],"sc":20},{"id":"21st:extend-hq__dropdown-menu","t":"Dropdown menu","d":"A dropdown menu of actions triggered by a button, built on Base UI primitives.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"extend-hq","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/dropdown-menu/default/preview.1782165671969.png","pc":"extend-hq","tg":["dropdown","menu"]},{"id":"21st:extend-hq__file-system","t":"File system","d":"A macOS Finder-style file browser for flat object-store manifests (S3 / R2). Derives a folder hierarchy from object keys and switches between icon, list, column and gallery views, ","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/file-system/default/preview.1782172446255.png","pc":"extend-hq","tg":["file-tree","list","search","table"]},{"id":"21st:extend-hq__file-thumbnail","t":"File thumbnail","d":"A compact file preview thumbnail shell for externally generated images, loading states, and fallback states. Renders a square preview at any aspect ratio with a blur-in reveal on f","k":"component","s":"21st","c":"status/loader","g":"status","a":"extend-hq","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/file-thumbnail/default/preview.1782172496788.png","pc":"extend-hq","tg":["spinner"]},{"id":"21st:extend-hq__file-upload","t":"File upload","d":"A drag-and-drop file upload surface with accepted file type icons and a compact file list. Validates accepted file types, shows an animated border beam while dragging, and renders ","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/file-upload/default/preview.1782207976342.png","pc":"extend-hq","tg":["border","upload-download"]},{"id":"21st:extend-hq__file-upload-2","t":"File upload 2","d":"A drag-and-drop file upload surface with animated accepted-file-type icons, an animated border beam, and a compact list of selected files.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/educlopez/file-upload/default/preview.1784752778896-d63d23fa-d7c5-4db2-9658-c136e242c0bc.png","pc":"extend-hq","tg":["border","icon","upload-download"]},{"id":"21st:extend-hq__pdf-viewer","t":"Pdf viewer","d":"A scrollable PDF viewer with toolbar, zoom, rotate, search, text selection, thumbnail navigation, upload and download. Powered by EmbedPDF with PDFium-backed page rendering.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pdf-viewer/default/preview.1782171069486.png","pc":"extend-hq","tg":["search","upload-download"]},{"id":"21st:extend-hq__scroll-area","t":"Scroll area","d":"A scrollable container with custom, styled scrollbars built on Base UI.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"extend-hq","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/scroll-area/default/preview.1782165572255.png","pc":"extend-hq","tg":["scroll-area"]},{"id":"21st:extend-hq__select","t":"Select","d":"A select menu for choosing a single option from a list, built on Base UI.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/select/default/preview.1782165164074.png","pc":"extend-hq","tg":["dropdown","form","select"]},{"id":"21st:extend-hq__xlsx-viewer","t":"Xlsx viewer","d":"A spreadsheet viewer that renders XLSX workbooks with multiple sheets, frozen headers, formulas, toolbar, zoom, upload and download. Powered by @extend-ai/react-xlsx.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"extend-hq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/xlsx-viewer/default/preview.1782170991579.png","pc":"extend-hq","tg":["upload-download"]},{"id":"21st:extend__bounding-box-citations","t":"Bounding box citations","d":"An extraction citation panel connected to source bounding boxes and editable values. Review extracted fields in a form or JSON diff view, hover to highlight source locations, and e","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bounding-box-citations/default/preview.1782207358554.png","pc":"extend"},{"id":"21st:extend__command","t":"Command","d":"A command menu (cmdk) with search input, grouped items and empty state — ideal for file-type filters and quick pickers.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"extend","st":"indexed","pl":"https://21st.dev/@extend/components/command","pc":"extend"},{"id":"21st:extend__dialog","t":"Dialog","d":"A modal dialog built on Base UI — accessible trigger, overlay, header, body panel and footer, with a smooth center-zoom open animation.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"extend","st":"indexed","pl":"https://21st.dev/@extend/components/dialog","pc":"extend"},{"id":"21st:extend__input","t":"Input","d":"A styled text input field built on Base UI for use in forms and search controls.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/input/default/preview.1782164832296.png","pc":"extend"},{"id":"21st:extend__pdf-viewer","t":"Pdf viewer","d":"A React PDF viewer with page controls, zoom, search, text selection, thumbnails, uploads, and responsive document layouts. Built by Extend UI.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"extend","st":"indexed","pl":"https://21st.dev/@extend/components/pdf-viewer","pc":"extend"},{"id":"21st:extend__popover","t":"Popover","d":"A floating popover panel anchored to a trigger, built on Base UI primitives.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/popover/default/preview.1782164999232.png","pc":"extend"},{"id":"21st:extend__separator","t":"Separator","d":"A thin visual divider that separates content horizontally or vertically.","k":"component","s":"21st","c":"other","g":"other","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/separator/default/preview.1782164919649.png","pc":"extend"},{"id":"21st:extend__spinner","t":"Spinner","d":"An accessible loading spinner indicator built on Base UI styling conventions.","k":"component","s":"21st","c":"status/loader","g":"status","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/spinner/default/preview.1782164755398.png","pc":"extend"},{"id":"21st:extend__tabs","t":"Tabs","d":"A set of layered sections (tab panels) shown one at a time, built on Base UI.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"extend","st":"indexed","pl":"https://21st.dev/@extend/components/tabs","pc":"extend"},{"id":"21st:extend__tooltip","t":"Tooltip","d":"A tooltip that reveals contextual text on hover or focus, built on Base UI.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"extend","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tooltip/default/preview.1782165079342.png","pc":"extend"},{"id":"21st:ezam0000__collab","t":"Collab","d":"Animated (flicker) ASCII art in the Voxel style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ezam0000","st":"indexed","pl":"https://cdn.21st.dev/ezam0000/collab/default/preview.1786103423145-8ff83056-7552-43bf-bb69-a504f164cdc3.webp","pc":"ezam0000"},{"id":"21st:ezydong__shader-59f0538a","t":"Shader 59f0538a","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 5-color palette (#184557, #007FAD, #57B2CB, #EAF9FF, #007FAD). Features: cursor-react","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ezydong","st":"indexed","pl":"https://cdn.21st.dev/ezydong/shader-59f0538a/default/preview.1785332726799-7cd42e17-b510-4d37-957c-2bfa923ebac7.webp","pc":"ezydong"},{"id":"21st:fafaieefafaiee__silk-shader","t":"Silk shader","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"fafaieefafaiee","st":"indexed","pl":"https://cdn.21st.dev/fafaieefafaiee/silk-shader/default/preview.1785185162577-0f0b350a-96fb-42fd-b43c-a466b623318e.webp","pc":"fafaieefafaiee"},{"id":"21st:fanoflix__lamp-tooltip","t":"Lamp tooltip","d":"A beautiful tooltip with a lamp/glow effect","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"fanoflix","st":"indexed","u":18,"pl":"https://cdn.21st.dev/user_2x6HZ61WugX45OSP6IdJCEehEtA/lamp-tooltip/default/preview.1747384449384.png","pc":"fanoflix","tg":["tooltip"]},{"id":"21st:fatih-developer__curtain-theme-toggle","t":"Curtain theme toggle","d":"A high-end, interactive theme toggle component with a satisfying curtain-style transition animation. Supports standalone icon, full navigation app bar integration, and global Tailw","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"fatih-developer","st":"indexed","pl":"https://cdn.21st.dev/fatih-developer/curtain-theme-toggle/default/preview.1777664162598.png","pc":"fatih-developer","tg":["toggle"]},{"id":"21st:fazalrsa__hero","t":"Hero","d":"hero section for site","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"fazalrsa","st":"indexed","pl":"https://cdn.21st.dev/fazalrsa/hero/default/preview.1751792443007.png","pc":"fazalrsa"},{"id":"21st:federicotoscano611__orb-shader","t":"Orb shader","d":"Animated WebGL shader background in the Orb style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #380404, #591810, #1D1003). A drop-in, zero-dependency React ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"federicotoscano611","st":"indexed","pl":"https://cdn.21st.dev/federicotoscano611/orb-shader/default/preview.1785428161858-9cae37e8-bf1b-41f2-92d0-4b86789ebbf9.webp","pc":"federicotoscano611"},{"id":"21st:fedoraa.workstation__animated-hero-section-with-loading-experience","t":"Animated hero section with loading experience","d":"A  React + Framer Motion component that gives your landing page a cinematic entrance. HeroReveal combines a letter-based loading screen with a smooth minimal hero section reveal, a","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"fedoraa.workstation","st":"indexed","pl":"https://cdn.21st.dev/fedoraa.workstation/animated-hero-section-with-loading-experience/default/preview.1753092240530.png","pc":"fedoraa.workstation"},{"id":"21st:feevercz__glassmorphic-nav-menu","t":"Glassmorphic nav menu","d":"A high-performance navigation menu blending Neo-Brutalist bold strokes with sophisticated glassmorphism. Fluid collapsible states and smooth spring transitions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"feevercz","st":"indexed","pl":"https://cdn.21st.dev/feevercz/glassmorphic-nav-menu/default/preview.1767373138620.png","pc":"feevercz"},{"id":"21st:feevercz__neobrutalist-kinetic-dock-menu","t":"Neobrutalist kinetic dock menu","d":"A draggable, magnetic navigation anchor built with a raw neobrutalist design system. It combines user-adjustable positioning with fluid SVG-morphed transitions and a high-impact, s","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"feevercz","st":"indexed","pl":"https://cdn.21st.dev/feevercz/neobrutalist-kinetic-dock-menu/default/preview.1767381267675.png","pc":"feevercz"},{"id":"21st:felipecaridade__b2button","t":"B2button","d":"default b2button template","k":"component","s":"21st","c":"actions/button","g":"actions","a":"felipecaridade","st":"indexed","pl":"https://cdn.21st.dev/felipecaridade/b2button/default/preview.1751377250306.png","pc":"felipecaridade"},{"id":"21st:felipecaridade__b2spinner","t":"B2spinner","d":"default spinner component","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipecaridade","st":"indexed","pl":"https://cdn.21st.dev/felipecaridade/b2spinner/default/preview.1751386547172.png","pc":"felipecaridade"},{"id":"21st:felipemenezes098__badge-01","t":"Badge 01","d":"A basic badge for labels, tags, and status indicators.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/badge-01/default/preview.1786880494064-62ceac94-e9a5-46da-861f-17acfac19bb7.png","pc":"felipemenezes098","tg":["chip"]},{"id":"21st:felipemenezes098__badge-12","t":"Badge 12","d":"Round icon-only badges shown across default, secondary, and outline variants.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/badge-12/default/preview.1786878562996-ff523e2b-767a-444d-bfac-0a39d4de910a.png","pc":"felipemenezes098","tg":["badge","icon"]},{"id":"21st:felipemenezes098__badge-13","t":"Badge 13","d":"A wrapping group of outline badges used to display a list of tags or keywords.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/badge-13/default/preview.1786879131225-bb0873e2-5e78-46b8-b3f6-fd74af25fea9.png","pc":"felipemenezes098","tg":["badge"]},{"id":"21st:felipemenezes098__banner-04","t":"Banner 04","d":"An update notification banner with an icon, message, and Later and Update now action buttons that can be dismissed and reopened.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"felipemenezes098","st":"rated","pl":"https://cdn.21st.dev/felipemenezes098/banner-04/default/preview.1784762259090-afbdad6e-eee9-4e28-94ff-5b220e63ee89.png","pc":"felipemenezes098","tg":["alert","notification"],"sc":17},{"id":"21st:felipemenezes098__banner-09","t":"Banner 09","d":"An amber system notice banner with a pulsing status dot for announcing scheduled maintenance windows.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/banner-09/default/preview.1784369371009-836cdc26-22a6-4d09-a50b-7f8f2dd4691e.png","pc":"felipemenezes098","tg":["announcement","alert","notification"]},{"id":"21st:felipemenezes098__banner-11","t":"Banner 11","d":"An inline info banner that prompts the user to verify their email, with a resend button that switches to a sent-confirmation state.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/banner-11/default/preview.1784702931614-2689fedf-c35f-44cb-8089-64a2a67a76bc.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__banner-12","t":"Banner 12","d":"A vertical stack of dismissible notification banners, each with an icon, title, body and close button that removes it individually.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/banner-12/default/preview.1784702948884-f538527e-e10e-4632-9c8f-93bcc8abb298.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__breadcrumb-02","t":"Breadcrumb 02","d":"A breadcrumb navigation where each crumb is prefixed with a small icon such as a house, folder, or file.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/breadcrumb-02/default/preview.1784476041056-4b8b79a4-1a33-45f9-8e8e-c2e222fcc994.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__breadcrumb-03","t":"Breadcrumb 03","d":"A breadcrumb navigation that replaces the default chevron with a slash separator using custom separator children.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/breadcrumb-03/default/preview.1784422330007-ce7e7440-2451-434e-ad85-a2bb3a85fc77.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__breadcrumb-04","t":"Breadcrumb 04","d":"A breadcrumb navigation trail that uses a light middle dot as the divider between crumbs instead of the default chevron.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/breadcrumb-04/default/preview.1784427926473-b9b2428b-edbf-4603-ae65-5340dd6a9b6c.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__breadcrumb-05","t":"Breadcrumb 05","d":"Breadcrumb navigation that collapses middle levels into a static ellipsis, showing only the first and last crumbs.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/breadcrumb-05/default/preview.1784482540757-5f6eb933-b47f-43af-959e-1cf8612a8c42.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__command-06","t":"Command 06","d":"A searchable combobox built from a command list inside a popover, where the selected value shows an inline clear button to reset the selection without reopening the list.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/command-06/default/preview.1785497349685-cd7d809d-9000-48e4-afa1-fb35e78535da.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__comment-thread-1","t":"Comment thread 1","d":"A comment thread card anchored to a quoted text selection, with threaded replies, a reply composer, and resolve/reopen actions.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"felipemenezes098","st":"rated","u":10,"pl":"https://cdn.21st.dev/felipemenezes098/comment-thread-1/default/preview.1784439916244-a344e495-0d99-4615-8a69-79aa862f1ece.png","pc":"felipemenezes098","tg":["avatar"],"sc":20},{"id":"21st:felipemenezes098__comment-thread-3","t":"Comment thread 3","d":"A card-based activity feed that mixes comments and system events with avatars, timestamps, and an inline reply input.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"felipemenezes098","st":"rated","pl":"https://cdn.21st.dev/felipemenezes098/comment-thread-3/default/preview.1784436964850-963a3bcf-ad43-4d43-9304-45aaf70dd1f7.png","pc":"felipemenezes098","tg":["timeline"],"sc":18},{"id":"21st:felipemenezes098__cta-01","t":"Cta 01","d":"A centered call-to-action section with a balanced title, description, and optional button.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"felipemenezes098","st":"indexed","u":55,"pl":"https://cdn.21st.dev/felipemenezes098/cta-01/default/preview.1783582022910.png","pc":"felipemenezes098","tg":["cta"]},{"id":"21st:felipemenezes098__dropdown-10","t":"Dropdown 10","d":"Ghost ellipsis icon button that opens a compact dropdown menu of row actions like rename, duplicate, favorite, and a destructive delete.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"felipemenezes098","st":"rated","pl":"https://cdn.21st.dev/felipemenezes098/dropdown-10/default/preview.1785556522969-8f689961-5e09-4696-8982-b11c773de05c.png","pc":"felipemenezes098","tg":["menu"],"sc":19},{"id":"21st:felipemenezes098__dropdown-12","t":"Dropdown 12","d":"A dropdown menu that demonstrates aligning the popup to the start or end of its trigger and opening it to the side.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"felipemenezes098","st":"rated","pl":"https://cdn.21st.dev/felipemenezes098/dropdown-12/default/preview.1785550133725-af378b2c-0ef3-46c1-911e-355c5df198ad.png","pc":"felipemenezes098","tg":["menu","popover"],"sc":16},{"id":"21st:felipemenezes098__dropdown-14","t":"Dropdown 14","d":"A dropdown menu that toggles between light, dark, and system color themes using a radio group.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/dropdown-14/default/preview.1785557942069-37da0c8c-f1d9-4174-909f-39f33828234d.png","pc":"felipemenezes098","tg":["dropdown","menu"]},{"id":"21st:felipemenezes098__dropdown-19","t":"Dropdown 19","d":"A visibility dropdown-menu radio group wired to TanStack Form with Zod validation, showing inline field errors on submit and a success toast.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/dropdown-19/default/preview.1786667292171-256eea24-1f78-413d-943b-1c12cb7b2820.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__empty-03","t":"Empty 03","d":"A search empty-state placeholder showing a no-results message with a clear-filters action.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/empty-03/default/preview.1784695675494-fe3b75d1-93e0-41b8-9b8a-cc360d56fdfe.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__empty-04","t":"Empty 04","d":"A bordered empty-state card with an avatar stack and an invite button, used to prompt inviting team members to an empty workspace.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/empty-04/default/preview.1784695658791-ac647552-5e49-4d4b-8d03-cce5024bd9a9.png","pc":"felipemenezes098","tg":["empty-state","team"]},{"id":"21st:felipemenezes098__flexnative-breadcrumb","t":"Flexnative breadcrumb","d":"A Breadcrumb navigation from the Flexnative UI registry with 9 variants: basic links, leading home icon, custom slash separator, dot separator, ellipsis collapse, dropdown for hidd","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"felipemenezes098","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/flexnative-breadcrumb/default/preview.1780071770173.png","pc":"felipemenezes098","tg":["dropdown","link","navigation-menu"]},{"id":"21st:felipemenezes098__flexnative-select","t":"Flexnative select","d":"A Select dropdown from the Flexnative UI registry with 10 variants: basic, grouped options, disabled, leading icons, object values, description items, disabled items, avatar user-p","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"felipemenezes098","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/flexnative-select/default/preview.1780070800295.png","pc":"felipemenezes098","tg":["select"]},{"id":"21st:felipemenezes098__flexnative-tabs","t":"Flexnative tabs","d":"Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code ","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"felipemenezes098","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/flexnative-tabs/default/preview.1780067590521.png","pc":"felipemenezes098","tg":["gallery","list","pricing-section","radio-group"]},{"id":"21st:felipemenezes098__flexnative-tabs-more","t":"Flexnative tabs more","d":"Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"felipemenezes098","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/flexnative-tabs-more/default/preview.1780069636172.png","pc":"felipemenezes098","tg":["tabs"]},{"id":"21st:felipemenezes098__flexnative-tooltip","t":"Flexnative tooltip","d":"A Tooltip from the Flexnative UI registry with 10 variants: basic hover, four-side positioning, keyboard shortcut hint, icon-button trigger, custom open delay, rich multi-line cont","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"felipemenezes098","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/flexnative-tooltip/default/preview.1780072893772.png","pc":"felipemenezes098","tg":["popover","tooltip"]},{"id":"21st:felipemenezes098__hero-01","t":"Hero 01","d":"A centered serif hero section with a soft gradient wash background, pill call-to-action button, and a floating integration logo cloud.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/hero-01/default/preview.1783677708584.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__hero-02","t":"Hero 02","d":"A left-aligned serif hero section with a media panel showing an image backdrop and a floating dashboard mockup, plus an animated call-to-action.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":18,"pl":"https://cdn.21st.dev/felipemenezes098/hero-02/default/preview.1783677907908.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__hero-03","t":"Hero 03","d":"A centered hero section with a serif headline, dual call-to-action buttons, and a portrait image that fades into the page below the copy.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":6,"pl":"https://cdn.21st.dev/felipemenezes098/hero-03/default/preview.1783677921501.png","pc":"felipemenezes098","tg":["cta","hero"]},{"id":"21st:felipemenezes098__hero-04","t":"Hero 04","d":"A two-column hero section with a serif headline, description, call-to-action buttons, and a layered collage of two overlapping images over a soft background wash.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":11,"pl":"https://cdn.21st.dev/felipemenezes098/hero-04/default/preview.1783678911730.png","pc":"felipemenezes098","tg":["cta","gallery","hero","image"]},{"id":"21st:felipemenezes098__hero-05","t":"Hero 05","d":"An editorial hero section with a left tagline, right-aligned headline and copy, optional CTAs, and a full-width image below.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":30,"pl":"https://cdn.21st.dev/felipemenezes098/hero-05/default/preview.1783678944308.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__hero-06","t":"Hero 06","d":"A split-layout product hero with a serif headline, dual call-to-action buttons, a compact trusted-by logo row, and a layered stat-card illustration.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/hero-06/default/preview.1784686811366-95fb32fa-8091-49d3-8535-ec93779e0464.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__hero-07","t":"Hero 07","d":"A hero section with a full-width landscape image above and a top-aligned tagline paired with a right-aligned serif headline, description, and call-to-action buttons below.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"felipemenezes098","st":"indexed","u":41,"pl":"https://cdn.21st.dev/felipemenezes098/hero-07/default/preview.1783679074246.png","pc":"felipemenezes098","tg":["image"]},{"id":"21st:felipemenezes098__hero-08","t":"Hero 08","d":"A split hero section with a serif headline, avatar social proof, and two image cards featuring invertible overlay text and call-to-action buttons.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":10,"pl":"https://cdn.21st.dev/felipemenezes098/hero-08/default/preview.1783679118535.png","pc":"felipemenezes098","tg":["cta","hero","image"]},{"id":"21st:felipemenezes098__hero-09","t":"Hero 09","d":"A centered hero section with a rounded search bar, a masked architecture image that fades into the page, and a split closing statement.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"felipemenezes098","st":"indexed","u":12,"pl":"https://cdn.21st.dev/felipemenezes098/hero-09/default/preview.1783679376775.png","pc":"felipemenezes098","tg":["image","search"]},{"id":"21st:felipemenezes098__hero-10","t":"Hero 10","d":"A centered hero section with a highlighted serif headline, description, dual call-to-action buttons, social proof, and a fanned collage of three overlapping images.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"felipemenezes098","st":"indexed","u":9,"pl":"https://cdn.21st.dev/felipemenezes098/hero-10/default/preview.1783679160216.png","pc":"felipemenezes098","tg":["cta","hero","image"]},{"id":"21st:felipemenezes098__notifications-1","t":"Notifications 1","d":"A settings card with a switch matrix table for toggling each notification type across email, push, and SMS channels.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/notifications-1/default/preview.1785464766059-3158d9c1-b887-47e3-826c-3f4b066b8e79.png","pc":"felipemenezes098","tg":["notification","table"]},{"id":"21st:felipemenezes098__notifications-2","t":"Notifications 2","d":"A notification settings card that groups toggle switches by category like security, social, and billing.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"felipemenezes098","st":"rated","pl":"https://cdn.21st.dev/felipemenezes098/notifications-2/default/preview.1785464801561-8891c257-2e95-4727-ae81-4784320d941e.png","pc":"felipemenezes098","tg":["notification"],"sc":18},{"id":"21st:felipemenezes098__notifications-3","t":"Notifications 3","d":"A notification settings card that lets users choose an email digest frequency per category using dropdown selects.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/notifications-3/default/preview.1785464931688-1ef2152a-b17b-43d7-8ea6-eebff969400e.png","pc":"felipemenezes098","tg":["notification","select"]},{"id":"21st:felipemenezes098__one-button","t":"One button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"felipemenezes098","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/one-button/default/preview.1780007091520.png","pc":"felipemenezes098","tg":["button","icon","profile"]},{"id":"21st:felipemenezes098__one-clipboard","t":"One clipboard","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-clipboard/default/preview.1780057333827.png","pc":"felipemenezes098","tg":["button","menu","pagination","popover"]},{"id":"21st:felipemenezes098__scroll-01","t":"Scroll 01","d":"A scroll-driven section with sticky media on one side that swaps images as the reader scrolls through the accompanying text content.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"felipemenezes098","st":"indexed","u":12,"pl":"https://cdn.21st.dev/felipemenezes098/scroll-01/default/preview.1784433059937-09f3b5a5-a5bd-4e03-a683-ee2234529ce1.png","pc":"felipemenezes098","tg":["features","image","scroll-area"]},{"id":"21st:felipemenezes098__select-a-plan-2","t":"Select a plan 2","d":"A plan comparison table showing pricing tiers and feature availability across columns for a select-a-plan billing flow.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/select-a-plan-2/default/preview.1784692346658-36bfb883-0390-425a-b0fd-45cdc7e4ebb5.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__select-a-plan-4","t":"Select a plan 4","d":"A seat-based pricing card with a slider that sizes your team and auto-selects the matching plan and monthly total.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/select-a-plan-4/default/preview.1784698251204-53c3dfc2-db2f-4d84-b67d-37c77b733b45.png","pc":"felipemenezes098","tg":["pricing-section","slider"]},{"id":"21st:felipemenezes098__select-a-plan-5","t":"Select a plan 5","d":"A recommended pricing plan card that spotlights a single subscription tier with perks, social proof and upgrade actions.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/select-a-plan-5/default/preview.1784698219067-bfe66cd4-eb59-4f0d-bcd1-65172d816f61.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__sign-in-4","t":"Sign in 4","d":"A compact sign-in card that lets returning users authenticate with a passkey using Face ID, Touch ID, or a security key, with an option to fall back to a password.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"felipemenezes098","st":"indexed","u":8,"pl":"https://cdn.21st.dev/felipemenezes098/sign-in-4/default/preview.1784819310152-4dcb78a9-c160-42b5-bd9e-52fde3a14ff5.png","pc":"felipemenezes098","tg":["sign-in"]},{"id":"21st:felipemenezes098__sign-in-6","t":"Sign in 6","d":"A split-screen sign-in card with a branded gradient panel, social login, and email/password form.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"felipemenezes098","st":"indexed","u":8,"pl":"https://cdn.21st.dev/felipemenezes098/sign-in-6/default/preview.1783675693650.png","pc":"felipemenezes098","tg":["sign-in"]},{"id":"21st:felipemenezes098__skeleton-01","t":"Skeleton 01","d":"A stacked set of placeholder lines that shows a loading state for a block of text.","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/skeleton-01/default/preview.1784691017069-1641b80d-bb85-49c2-b6cc-dc6cfa4e6168.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__skeleton-04","t":"Skeleton 04","d":"A loading placeholder that mimics a heading followed by full-width paragraph body lines.","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/skeleton-04/default/preview.1784691002565-102ebb49-2367-45a7-9b32-bd098037d2e7.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__skeleton-07","t":"Skeleton 07","d":"A loading placeholder that mimics a form with labelled fields and a submit button while data loads.","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/skeleton-07/default/preview.1784690987649-ee6090bc-5350-46c7-95cd-aada80290ef3.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__skeleton-10","t":"Skeleton 10","d":"A responsive grid of KPI stat card placeholders with label, value, and trend line skeletons for loading states.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"felipemenezes098","st":"indexed","u":4,"pl":"https://cdn.21st.dev/felipemenezes098/skeleton-10/default/preview.1784426529930-ec6581f0-30a6-4cac-9fef-8f23f31c62a8.png","pc":"felipemenezes098","tg":["grid","stat"]},{"id":"21st:felipemenezes098__skeleton-12","t":"Skeleton 12","d":"A loading placeholder for a chat conversation, showing alternating inbound and outbound message bubbles with avatars.","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/skeleton-12/default/preview.1784820604375-9941fb3b-361e-4479-97a6-31ec8baf2e0d.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__skeleton-13","t":"Skeleton 13","d":"A 3-column grid of square tiles used as a loading placeholder for an image gallery.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"felipemenezes098","st":"indexed","u":23,"pl":"https://cdn.21st.dev/felipemenezes098/skeleton-13/default/preview.1784387872364-d3d1678d-3310-4ca0-926d-843d6ecec261.png","pc":"felipemenezes098","tg":["gallery","grid","spinner"]},{"id":"21st:felipemenezes098__skeleton-14","t":"Skeleton 14","d":"A loading placeholder for an article preview with a hero image, title, byline, and stacked body lines.","k":"component","s":"21st","c":"status/loader","g":"status","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/skeleton-14/default/preview.1784387893383-58ff9cb0-f8fc-49fe-8abe-d5ec918a2d8a.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__skeleton-15","t":"Skeleton 15","d":"A loading placeholder for a pricing card showing a plan name, price, feature rows, and a call-to-action button.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"felipemenezes098","st":"indexed","u":8,"pl":"https://cdn.21st.dev/felipemenezes098/skeleton-15/default/preview.1784488106550-23f1984b-1e08-4d5f-ab15-7b9adbe9a91d.png","pc":"felipemenezes098","tg":["pricing-section","spinner"]},{"id":"21st:felipemenezes098__skeleton-16","t":"Skeleton 16","d":"A loading placeholder for a sidebar navigation, with a logo header, a list of icon-and-label nav rows, and a user profile row at the bottom.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"felipemenezes098","st":"indexed","u":6,"pl":"https://cdn.21st.dev/felipemenezes098/skeleton-16/default/preview.1784392196381-7dc4b03c-0123-4edf-8276-517fa4f6829e.png","pc":"felipemenezes098","tg":["sidebar"]},{"id":"21st:felipemenezes098__table-01","t":"Table 01","d":"A data table with a caption, header row, and a footer total row for listing invoices and their statuses.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-01/default/preview.1785127541946-d91599e8-fb10-4510-b02f-bd092e715171.png","pc":"felipemenezes098","tg":["footer"]},{"id":"21st:felipemenezes098__table-02","t":"Table 02","d":"A data table displaying team members with avatar thumbnails, names, emails, and roles in each row.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","u":4,"pl":"https://cdn.21st.dev/felipemenezes098/table-02/default/preview.1785131719044-e6d87872-7759-417d-90d5-997dabf85461.png","pc":"felipemenezes098","tg":["table"]},{"id":"21st:felipemenezes098__table-04","t":"Table 04","d":"A data table with zebra striping that tints every other row for easier row scanning.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-04/default/preview.1785127716683-a3d4b9be-653c-4cb2-ab4a-d2c557bca23b.png","pc":"felipemenezes098","tg":["table"]},{"id":"21st:felipemenezes098__table-07","t":"Table 07","d":"A data table with a select-all header checkbox, per-row checkboxes, and a live count of selected rows.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-07/default/preview.1785129600488-3e10dc5a-83a5-4f78-8ca0-fab4983318f1.png","pc":"felipemenezes098","tg":["checkbox","table"]},{"id":"21st:felipemenezes098__table-08","t":"Table 08","d":"A data table nested inside a card with a title, description, and colored status badges for displaying recent transactions.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","u":4,"pl":"https://cdn.21st.dev/felipemenezes098/table-08/default/preview.1785129883942-cd357c1f-659b-4c8f-ba12-533e29a03c00.png","pc":"felipemenezes098","tg":["badge","card","table"]},{"id":"21st:felipemenezes098__table-11","t":"Table 11","d":"A data table with clickable column headers that sort rows ascending or descending, built with TanStack Table.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-11/default/preview.1785127923233-5d2e5d44-bbbe-4af2-8bf4-141d5e547853.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__table-12","t":"Table 12","d":"A data table with a global search input and a status column filter dropdown, built on TanStack Table.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","u":8,"pl":"https://cdn.21st.dev/felipemenezes098/table-12/default/preview.1785127196391-7f3872fb-bffb-40da-bd37-3b3d534a3dff.png","pc":"felipemenezes098","tg":["search","table"]},{"id":"21st:felipemenezes098__table-15","t":"Table 15","d":"A TanStack Table with a dropdown menu that toggles individual columns on or off.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-15/default/preview.1785130461169-9cb45098-62a9-47e1-8d3f-1f60401daef7.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__table-17","t":"Table 17","d":"A TanStack Table data table where a column is pinned to the right so it stays visible while scrolling horizontally.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-17/default/preview.1785128136750-cb031798-53c9-427e-ab39-848b4ea5b6f1.png","pc":"felipemenezes098","tg":["table"]},{"id":"21st:felipemenezes098__table-19","t":"Table 19","d":"A data table with expandable parent rows that reveal nested child rows for displaying tree-shaped hierarchical data, built with TanStack Table.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-19/default/preview.1785128841798-998f9345-2e8b-4b0b-9ed8-c44b9886a9b9.png","pc":"felipemenezes098","tg":["file-tree"]},{"id":"21st:felipemenezes098__table-20","t":"Table 20","d":"A data table built with TanStack Table that combines sorting, column filtering, pagination, row selection, a column-visibility toggle, and per-row action menus.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-20/default/preview.1785131537934-f07d7c89-bddf-45c7-9a37-23d6f3742d9a.png","pc":"felipemenezes098","tg":["pagination","table"]},{"id":"21st:felipemenezes098__table-row-actions","t":"Table row actions","d":"A data table with a per-row ellipsis dropdown menu exposing edit, copy, and remove actions.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-row-actions/default/preview.1785551402693-666b9d2c-7271-4f82-84a6-cc8e8a613341.png","pc":"felipemenezes098","tg":["menu","table"]},{"id":"21st:felipemenezes098__table-row-selection","t":"Table row selection","d":"A data table with per-row selection checkboxes and a bulk actions toolbar that shows the selected count with clear and delete actions.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/table-row-selection/default/preview.1785128605575-9f98783f-7231-414d-a594-176c98315e25.png","pc":"felipemenezes098","tg":["checkbox"]},{"id":"21st:felipemenezes098__the-dialog","t":"The dialog","d":"Here is Dialog components ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"felipemenezes098","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/the-dialog/default/preview.1779999436821.png","pc":"felipemenezes098","tg":["alert","date-picker","gallery","notification"]},{"id":"21st:felipemenezes098__the-input","t":"The input","d":"Here is The Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"felipemenezes098","st":"indexed","u":3,"pl":"https://cdn.21st.dev/larsen66/the-input/default/preview.1780003626696.png","pc":"felipemenezes098","tg":["dropdown","input","popover","search"]},{"id":"21st:felipemenezes098__the-item-one","t":"The item one","d":"Here is The Item  components","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"felipemenezes098","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/the-item-one/default/preview.1780008708681.png","pc":"felipemenezes098","tg":["badge","avatar","card","button"]},{"id":"21st:felipemenezes098__tooltip-07","t":"Tooltip 07","d":"A light-colored tooltip that inverts the default dark style by applying the dark class to its content, so it reads clearly on light backgrounds.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/tooltip-07/default/preview.1785464750278-c4f80416-d777-4625-8d58-cebb69f824f3.png","pc":"felipemenezes098","tg":["tooltip"]},{"id":"21st:felipemenezes098__tooltip-09","t":"Tooltip 09","d":"A tooltip that hides its pointer arrow for a flat, clean look, shown in default and primary tones.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/tooltip-09/default/preview.1785464782240-ebdee8fd-2ce4-4bbd-9e8f-8684f7083bb9.png","pc":"felipemenezes098","tg":["tooltip"]},{"id":"21st:felipemenezes098__two-factor-setup-2","t":"Two factor setup 2","d":"A compact card for enabling SMS-based two-factor authentication by collecting a phone number to send verification codes to.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"felipemenezes098","st":"indexed","pl":"https://cdn.21st.dev/felipemenezes098/two-factor-setup-2/default/preview.1783657914637.png","pc":"felipemenezes098"},{"id":"21st:felipemenezes098__verify-identity-3","t":"Verify identity 3","d":"A push-notification approval card that prompts the user to confirm a sign-in request from their trusted device while waiting for approval.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"felipemenezes098","st":"indexed","u":8,"pl":"https://cdn.21st.dev/felipemenezes098/verify-identity-3/default/preview.1784477494924-8f0d3107-429b-4623-b728-b9821a1fcda5.png","pc":"felipemenezes098","tg":["notification","sign-in"]},{"id":"21st:filipz__circle-animations-collection","t":"Circle animations collection","d":"Here is Circle Animations Collection","k":"component","s":"21st","c":"other","g":"other","a":"filipz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/circle-animations-collection/default/preview.1753794274579.png","pc":"filipz"},{"id":"21st:filipz__circle-animations-collection-3","t":"Circle animations collection 3","d":"Here is  Circle Animations Collection 3 ","k":"component","s":"21st","c":"other","g":"other","a":"filipz","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/circle-animations-collection-3/default/preview.1753797457043.png","pc":"filipz"},{"id":"21st:filipz__explorations-with-gsap-and-scroll-trigger","t":"Explorations with gsap and scroll trigger","d":"Here is  Explorations with GSAP and Scroll Trigger component","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"filipz","st":"indexed","u":31,"pl":"https://cdn.21st.dev/filipz/explorations-with-gsap-and-scroll-trigger/default/preview.1785363501292-a35fa48f-7f2b-4ada-a93e-7ff3f4dde0d7.png","pc":"filipz"},{"id":"21st:filipz__menu-animations","t":"Menu animations","d":"Here is Menu Animations","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"filipz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/menu-animations/default/preview.1753794538120.png","pc":"filipz","tg":["menu"]},{"id":"21st:filipz__set-of-animations-4","t":"Set of animations 4","d":"Here is Set of Animations ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"filipz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/set-of-animations-4/default/preview.1753795605504.png","pc":"filipz","tg":["grid"]},{"id":"21st:filoganzo__animated-world-map","t":"Animated world map","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"filoganzo","st":"indexed","pl":"https://cdn.21st.dev/filoganzo/animated-world-map/default/preview.1748464983115.png","pc":"filoganzo"},{"id":"21st:finley-sun__hero-shader-for-tunepact","t":"Hero shader for tunepact","d":"Sound wave inspired shader to celebrate the spirit of musicians.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"finley-sun","st":"indexed","pl":"https://cdn.21st.dev/finley-sun/hero-shader-for-tunepact/default/preview.1780949337915.png","pc":"finley-sun"},{"id":"21st:finn_4bbcd7bf__c2e812","t":"C2e812","d":"Animated WebGL shader background in the Metaballs style. Generated by the 21st.dev Shader Builder. 3-color palette (#02010A, #D4D4D8, #C1E811). A drop-in, zero-dependency React com","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"finn_4bbcd7bf","st":"indexed","pl":"https://cdn.21st.dev/finn_4bbcd7bf/c2e812/default/preview.1785507339072-a6707cb8-1919-445d-a85b-dabd6056d6de.webp","pc":"finn_4bbcd7bf"},{"id":"21st:flower0wine__button-group","t":"Button group","d":"common button group","k":"component","s":"21st","c":"actions/button","g":"actions","a":"flower0wine","st":"indexed","pl":"https://cdn.21st.dev/user_2xoBLmlv7N5T9mOtP6pMUhgiwjX/button-group/default/preview.1750805212604.png","pc":"flower0wine"},{"id":"21st:flower0wine__file-upload","t":"File upload","d":"upload file","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"flower0wine","st":"indexed","pl":"https://cdn.21st.dev/user_2xoBLmlv7N5T9mOtP6pMUhgiwjX/file-upload/default/preview.1750815212117.png","pc":"flower0wine","tg":["upload-download"]},{"id":"21st:flower0wine__multi-select","t":"Multi select","d":"Use the MultiSelect component to fulfill your requirement.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"flower0wine","st":"indexed","u":18,"pl":"https://cdn.21st.dev/flower0wine/multi-select/default/preview.1750222073931.png","pc":"flower0wine","tg":["checkbox","dropdown","form","select"]},{"id":"21st:forgedstep__score-ring","t":"Score ring","d":"Animated score ring (0-100) that draws its arc and counts the number up on mount, with easing. Respects prefers-reduced-motion by showing the final value instantly. Themeable via C","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"forgedstep","st":"indexed","pl":"https://21st.dev/@forgedstep/components/score-ring","pc":"forgedstep"},{"id":"21st:framecn__ai-generate-overlay","t":"Ai generate overlay","k":"component","s":"21st","c":"media/gallery","g":"media","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/ai-generate-overlay/default/preview.1785377665503-cf5d0f3b-d028-49fd-b298-6fbad52dc8b7.png","pc":"framecn"},{"id":"21st:framecn__blur-out-up","t":"Blur out up","d":"Animated text where words blur and drift upward while fading out, staggered per word, with a smooth blur fade-in entrance.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/blur-out-up/default/preview.1784676462781-648fd751-3375-4612-8836-5cd00df9d151.png","pc":"framecn","tg":["text"]},{"id":"21st:framecn__chromatic-aberration-wipe","t":"Chromatic aberration wipe","d":"An ultra-fast directional slide transition between two scenes with an RGB chromatic-aberration glitch on the peak frames.","k":"component","s":"21st","c":"other","g":"other","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/chromatic-aberration-wipe/default/preview.1784825295743-9ffba0f5-eb0f-4bb3-80ad-6c99358431b9.png","pc":"framecn"},{"id":"21st:framecn__cursor-flow","t":"Cursor flow","d":"An animated cursor that arcs along cubic Bezier paths, pauses, and clicks targets that respond, for building product demo and screen-recording style motion graphics.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/cursor-flow/default/preview.1784825261822-a47fd295-b37f-4443-b062-f5dc5c2f05be.png","pc":"framecn"},{"id":"21st:framecn__masked-slide-reveal","t":"Masked slide reveal","d":"Animated typography where words slide up out of an invisible horizontal mask, one after another.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/masked-slide-reveal/default/preview.1785316581323-cccde537-72c5-407b-8d4c-c4212e38107c.png","pc":"framecn"},{"id":"21st:framecn__mesh-gradient-bg","t":"Mesh gradient bg","d":"An animated mesh gradient background with soft color blobs that slowly drift across the frame, ideal for hero sections and video-style backdrops.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/mesh-gradient-bg/default/preview.1785315272133-730a2f2b-f935-4bf4-b7f1-6c2d431f02cc.png","pc":"framecn"},{"id":"21st:framecn__strikethrough-replace","t":"Strikethrough replace","d":"An animated text component that draws a strike line across old text then reveals replacement text in its place.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/strikethrough-replace/default/preview.1784395068164-6aadd51b-51bc-42e1-b450-ad45dc617283.png","pc":"framecn","tg":["text"]},{"id":"21st:framecn__toast-notification","t":"Toast notification","d":"An animated system-style toast that springs in, holds, then slides out, with success, error, info, and warning variants.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/toast-notification/default/preview.1784666499205-763efc25-ea7b-4f0a-8c71-0683882052cc.png","pc":"framecn","tg":["alert","notification","toast"]},{"id":"21st:framecn__top-down-letters","t":"Top down letters","d":"Animated text where each letter cascades in from above with a staggered fade for video and hero title effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"framecn","st":"indexed","pl":"https://cdn.21st.dev/framecn/top-down-letters/default/preview.1784396387750-724b6f98-e2f9-45a7-a00b-2e5d541432d3.png","pc":"framecn","tg":["text"]},{"id":"21st:framecn__tracking-in","t":"Tracking in","d":"Animated text heading where the letter-spacing collapses from wide to normal while blur clears, with a springy easing.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"framecn","st":"indexed","u":2,"pl":"https://cdn.21st.dev/framecn/tracking-in/default/preview.1784815010779-154b6041-ddd3-480b-aa0c-3a013c746abd.png","pc":"framecn"},{"id":"21st:frodev-cr__streamclick-wallpaper","t":"Streamclick wallpaper","d":"Animated WebGL shader background in the Warp style. Live Ink variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0400F","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"frodev-cr","st":"indexed","pl":"https://cdn.21st.dev/frodev-cr/streamclick-wallpaper/default/preview.1785532566653-216524e0-6fec-4ac1-9013-de7a71035b0f.webp","pc":"frodev-cr"},{"id":"21st:fuma-nama__accordion","t":"Accordion","d":"Accordions to your documentation\n\nBased on Radix UI Accordion, useful for FAQ sections.\n\n\nLinking to Accordion\nYou can specify an id for accordion. The accordion will automatically","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"fuma-nama","st":"indexed","u":107,"pl":"https://cdn.21st.dev/user_fuma-nama/accordion.png","pc":"fuma-nama","tg":["accordion","faq"]},{"id":"21st:fuma-nama__banner","t":"Banner","d":"Place the element at the top of your root layout to display announcements.\nBy default, the banner uses a style tag to modify Fumadocs layouts, such as reducing the sidebar height. ","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"fuma-nama","st":"indexed","u":84,"pl":"https://cdn.21st.dev/user_fuma-nama/banner.png","pc":"fuma-nama","tg":["announcement","dashboard"]},{"id":"21st:fuma-nama__inline-toc","t":"Inline toc","k":"component","s":"21st","c":"navigation/table-of-contents","g":"navigation","a":"fuma-nama","st":"indexed","pl":"https://cdn.21st.dev/user_fuma-nama/inline-toc.png","pc":"fuma-nama"},{"id":"21st:fuma-nama__root-toggle","t":"Root toggle","d":"A select component for switching between major sections of your application, with support for descriptions and icons.\n\nFeatures\n- Smooth animations\n- Support for icons and descript","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"fuma-nama","st":"indexed","u":38,"pl":"https://cdn.21st.dev/user_fuma-nama/root-toggle.png","pc":"fuma-nama","tg":["select"]},{"id":"21st:fuma-nama__tabs","t":"Tabs","d":"A tabs component with support for persistent state, shared values across instances, and URL hash navigation.\n\nFeatures\n- Shared state across multiple instances\n- Persistent state w","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"fuma-nama","st":"indexed","u":27,"pl":"https://cdn.21st.dev/user_fuma-nama/tabs.png","pc":"fuma-nama","tg":["tabs"]},{"id":"21st:fuma-nama__type-table","t":"Type table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"fuma-nama","st":"indexed","pl":"https://cdn.21st.dev/user_fuma-nama/type-table.png","pc":"fuma-nama","tg":["table","tooltip"]},{"id":"21st:fuma-nama__zoomable-image","t":"Zoomable image","d":"A responsive image component with zoom functionality, built on top of Next.js Image and react-medium-image-zoom.\n\nFeatures\n\n- Built on top of Next.js Image\n- Smooth zoom animations","k":"component","s":"21st","c":"media/gallery","g":"media","a":"fuma-nama","st":"indexed","u":203,"pl":"https://cdn.21st.dev/user_fuma-nama/zoomable-image.png","pc":"fuma-nama"},{"id":"21st:fusioneery__gradient-button","t":"Gradient button","d":"A button with gradient inside, gradient on border, both of them are animated on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"fusioneery","st":"indexed","pl":"https://cdn.21st.dev/fusioneery/gradient-button/default/preview.1752057159756.png","pc":"fusioneery"},{"id":"21st:gabporcius__background-rowds-shop-v1","t":"Background rowds shop v1","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#16130E, #372F20, #9C8D63). Features: film grain. A drop-in, zero-de","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gabporcius","st":"indexed","pl":"https://cdn.21st.dev/gabporcius/background-rowds-shop-v1/default/preview.1784107564641.webp","pc":"gabporcius","tg":["background","hero"]},{"id":"21st:gabriellopes.ct07__vv","t":"Vv","d":"Animated (flicker) ASCII art in the Mosaic style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gabriellopes.ct07","st":"indexed","pl":"https://cdn.21st.dev/gabriellopes.ct07/vv/default/preview.1785777629758-167240fb-3335-4e57-bdae-5ae6f0460f5b.webp","pc":"gabriellopes.ct07"},{"id":"21st:galileouuu__test","t":"Test","d":"Animated (shimmer) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"galileouuu","st":"indexed","pl":"https://cdn.21st.dev/galileouuu/test/default/preview.1785473446154-35642d77-ebf7-4527-b1ac-dc7b7c33be01.webp","pc":"galileouuu"},{"id":"21st:gamerc0der__draggable-card","t":"Draggable card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"gamerc0der","st":"indexed","pl":"https://cdn.21st.dev/user_2urbZfDTaUDzPgiImqfnq7i95bJ/draggable-card/default/preview.png","pc":"gamerc0der"},{"id":"21st:gawdilley__baye-hero","t":"Baye hero","d":"I like turtles","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gawdilley","st":"indexed","pl":"https://cdn.21st.dev/gawdilley/baye-hero/default/preview.1780679449865.png","pc":"gawdilley"},{"id":"21st:gawdilley__baye-hero-v2","t":"Baye hero v2","d":"MLB pre-game hero with eyebrow, accent headline, and status pills","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gawdilley","st":"indexed","pl":"https://21st.dev/@gawdilley/components/baye-hero-v2","pc":"gawdilley"},{"id":"21st:gaxocif204__preloader","t":"Preloader","d":"Full-screen preloader that exits with a slide-up animation when the page is ready.","k":"component","s":"21st","c":"status/loader","g":"status","a":"gaxocif204","st":"indexed","pl":"https://cdn.21st.dev/gaxocif204/preloader/default/preview.1780300548748.png","pc":"gaxocif204","tg":["spinner"]},{"id":"21st:geekles007__multiple-select","t":"Multiple select","d":"Select option with multiple choices","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"geekles007","st":"indexed","u":144,"pl":"https://cdn.21st.dev/user_2sELOtPG8dY7rk9BbMQiXG3bWIt/multiple-select/default/preview.1738070829449.png","pc":"geekles007","tg":["chip","select"]},{"id":"21st:geekles007__navbar","t":"Navbar","d":"Navbar with hover animation effect","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"geekles007","st":"indexed","u":173,"pl":"https://cdn.21st.dev/user_2sELOtPG8dY7rk9BbMQiXG3bWIt/navbar/default/preview.1738071474750.png","pc":"geekles007","tg":["menu","navigation-menu"]},{"id":"21st:geekles007__select","t":"Select","d":"Reusable select option component built with framer motion and tailwindcss","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"geekles007","st":"indexed","u":99,"pl":"https://cdn.21st.dev/user_2sELOtPG8dY7rk9BbMQiXG3bWIt/select/default/preview.1738138213702.png","pc":"geekles007","tg":["dropdown","icon","list","select"]},{"id":"21st:geetanshg2__loader","t":"Loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"geetanshg2","st":"indexed","pl":"https://cdn.21st.dev/geetanshg2/loader/default/preview.1770656807092.png","pc":"geetanshg2"},{"id":"21st:ghcpuman902__snappy-slider","t":"Snappy slider","d":"SnappySlider is a highly interactive range input component that combines precise value control\nwith intuitive visual feedback. It features:\n\n- Snap-to points for accurate value sel","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ghcpuman902","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_2rfNH78jhL59YEAI1QyvN8pMfN3/snappy-slider/default/preview.png","pc":"ghcpuman902","tg":["slider"]},{"id":"21st:gianniszakpapakon__website","t":"Website","k":"component","s":"21st","c":"other","g":"other","a":"gianniszakpapakon","st":"indexed","pl":"https://cdn.21st.dev/gianniszakpapakon/website/default/preview.1754864674877.png","pc":"gianniszakpapakon"},{"id":"21st:glasscn__highlight-text","t":"Highlight text","d":"Inline text highlight that draws a skewed colored background behind words, with preset color variants and custom background support.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"glasscn","st":"indexed","pl":"https://cdn.21st.dev/glasscn/highlight-text/default/preview.1783714342384.png","pc":"glasscn","tg":["text"]},{"id":"21st:glasscn__liquid-text","t":"Liquid text","d":"Animated heading text filled with a flowing liquid smoke shader revealed through a text-shaped mask.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"glasscn","st":"indexed","pl":"https://cdn.21st.dev/glasscn/liquid-text/default/preview.1784681126981-7ab001c6-f5fd-4378-a767-b74231b78e25.png","pc":"glasscn"},{"id":"21st:glasscn__separator","t":"Separator","d":"A thin divider line to visually or semantically separate content, supporting horizontal and vertical orientations.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"glasscn","st":"indexed","pl":"https://cdn.21st.dev/glasscn/separator/default/preview.1785543806474-4dec75e7-e0bd-4446-bc95-f595ece72123.png","pc":"glasscn"},{"id":"21st:globalsoftwares74__login-page-by-the-vibe-code-0-ankit-jangid","t":"Login page by the vibe code 0 ankit jangid","d":"login page by the vibe code 0 Ankit jangid","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"globalsoftwares74","st":"indexed","pl":"https://cdn.21st.dev/globalsoftwares74/login-page-by-the-vibe-code-0-ankit-jangid/default/preview.1776928363514.png","pc":"globalsoftwares74"},{"id":"21st:globalsoftwares74__login-page-the-vibe-code-0","t":"Login page the vibe code 0","d":"login page the vibe code 0","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"globalsoftwares74","st":"indexed","pl":"https://cdn.21st.dev/globalsoftwares74/login-page-the-vibe-code-0/default/preview.1776929054858.png","pc":"globalsoftwares74"},{"id":"21st:globalsoftwares74__premium-login-page-login-system","t":"Premium login page login system","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"globalsoftwares74","st":"indexed","pl":"https://cdn.21st.dev/globalsoftwares74/premium-login-page-login-system/default/preview.1776927705500.png","pc":"globalsoftwares74"},{"id":"21st:gonzalochale__ai-chat-image-generation-1","t":"Ai chat image generation 1","d":"Simulates an AI Chat generating and image","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"gonzalochale","st":"indexed","u":107,"pl":"https://cdn.21st.dev/gonzalochale/ai-chat-image-generation/default/preview.png","pc":"gonzalochale","tg":["ai-chat"]},{"id":"21st:gonzalochale__commits-grid","t":"Commits grid","d":"Transforms any text into a GitHub-style commits grid, visually representing the text as contribution blocks.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"gonzalochale","st":"indexed","u":356,"pl":"https://cdn.21st.dev/user_2wR4WEGHtHNiHywsB7U98OWp9TT/commits-grid/default/preview.1746307467234.png","pc":"gonzalochale"},{"id":"21st:good-listener__liquid-button","t":"Liquid button","d":"An animated liquid-fill button with rolling waves, rising bubbles, focus states, and reduced-motion support.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"good-listener","st":"indexed","pl":"https://cdn.21st.dev/zigzaggg07/liquid-button/default/preview.1785755064283-c3aac6d6-935d-4e64-8ff3-8248d93d9552.png","pc":"good-listener"},{"id":"21st:good-listener__r3-f-macro-keypad","t":"R3 f macro keypad","d":"A transparent four-key R3F macro pad with independent spring switches, accessible controls, drag rotation, and colorful action keycaps.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"good-listener","st":"indexed","pl":"https://cdn.21st.dev/good-listener/r3-f-macro-keypad/default/preview.1786757996283-7322c2ff-32bd-461a-8b6b-9b3c2c8fa5cf.png","pc":"good-listener"},{"id":"21st:good-listener__waves-shader","t":"Waves shader","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 5-color palette (#06858E, #1E9EA6, #37B6BE, #5DC7CE, #8AD8DD). A drop-in, zero-depend","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"good-listener","st":"indexed","pl":"https://cdn.21st.dev/good-listener/waves-shader/default/preview.1785845764121-273372c5-afed-4719-8051-5a4d18fadaad.webp","pc":"good-listener"},{"id":"21st:gooseui__border-beam","t":"Border beam","d":"An animated beam of light that travels along the border of a container to highlight cards, buttons, and inputs.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"gooseui","st":"indexed","pl":"https://cdn.21st.dev/gooseui/border-beam/default/preview.1785375572904-144f502c-3436-43d7-8e03-de160fc382e6.png","pc":"gooseui"},{"id":"21st:gooseui__features-grid","t":"Features grid","d":"A responsive grid of product feature cards with icons, titles and descriptions for landing page sections.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"gooseui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/gooseui/features-grid/default/preview.1784378909879-7c0d3f75-8aa1-44d1-88eb-b519f605729c.png","pc":"gooseui","tg":["features"]},{"id":"21st:gooseui__typography","t":"Typography","d":"A text component with semantic variants (headings, paragraph, blockquote, code) plus gradient and highlight styles for consistent typography.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"gooseui","st":"indexed","pl":"https://cdn.21st.dev/gooseui/typography/default/preview.1784786384533-8fe61fdb-9e91-4839-bdf3-897cb52f1b47.png","pc":"gooseui"},{"id":"21st:gopalrajlohiya2__nsutx","t":"Nsutx","d":"Animated (wave) ASCII art in the Cross style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, and","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gopalrajlohiya2","st":"indexed","pl":"https://cdn.21st.dev/gopalrajlohiya2/nsutx/default/preview.1786776625542-95cf578f-12d7-4a66-b60b-992d110c50a3.webp","pc":"gopalrajlohiya2"},{"id":"21st:gordongedacheril1__almoayyed","t":"Almoayyed","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#D7D5D5, #310527, #39051F, #FFFFFF). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gordongedacheril1","st":"indexed","pl":"https://cdn.21st.dev/gordongedacheril1/almoayyed/default/preview.1784235358696-a49d63a6-765a-4b77-882e-55f9fe452509.webp","pc":"gordongedacheril1","tg":["background","hero"]},{"id":"21st:gpt-vis__gpt-vis","t":"Gpt vis","d":"A React chart component that renders AI/LLM-generated data visualizations from vis-syntax strings or config objects, supporting 26 chart types via @antv/gpt-vis.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"gpt-vis","st":"indexed","pl":"https://cdn.21st.dev/gpt-vis/gpt-vis/default/preview.1784724376558-d0bdc0be-e025-446a-b46b-42e833876f11.png","pc":"gpt-vis","tg":["ai-chat","data-visualization"]},{"id":"21st:gravitty99__black-and-white-shader","t":"Black and white shader","d":"Animated WebGL shader background in the Warp stripes style. Generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). Features: film grain, cu","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gravitty99","st":"indexed","pl":"https://cdn.21st.dev/gravitty99/black-and-white-shader/default/preview.1785807924043-f4f5ce3e-a83f-4958-be9c-fd7c19ca8ad7.webp","pc":"gravitty99"},{"id":"21st:gravitty99__light-blue-plasma-shader-w-grain-interactive","t":"Light blue plasma shader w grain interactive","d":"Animated WebGL shader background in the Plasma style. Generated by the 21st.dev Shader Builder. 4-color palette (#160B0B, #C2402A, #F49D37, #FFE8C2). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gravitty99","st":"indexed","pl":"https://cdn.21st.dev/gravitty99/light-blue-plasma-shader-w-grain-interactive/default/preview.1785807964385-fb68c3aa-b405-4291-9422-2da5e1ff6030.webp","pc":"gravitty99"},{"id":"21st:gravitty99__red-plasma","t":"Red plasma","d":"Animated WebGL shader background in the Plasma style. Generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gravitty99","st":"indexed","pl":"https://cdn.21st.dev/gravitty99/red-plasma/default/preview.1785807943483-241d5706-3f0c-4309-9245-9468bcbe331f.webp","pc":"gravitty99"},{"id":"21st:grootstudio__blurred-marquee","t":"Blurred marquee","d":"An infinite logo marquee slider with progressively blurred mask edges and hover-controlled scroll speed.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"grootstudio","st":"indexed","u":7,"pl":"https://cdn.21st.dev/grootstudio/blurred-marquee/default/preview.1784313042638-9858073f-f09f-40b8-8910-7b2b372f75ec.png","pc":"grootstudio","tg":["marquee","scroll-area"]},{"id":"21st:grootstudio__cursor-trail","t":"Cursor trail","d":"A cursor trail effect that spawns and animates a stream of images interpolated along the mouse movement path.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"grootstudio","st":"indexed","pl":"https://cdn.21st.dev/grootstudio/cursor-trail/default/preview.1784708924596-e02911ae-c581-4060-a741-3c7b68dfc911.png","pc":"grootstudio","tg":["cursor","image"]},{"id":"21st:grootstudio__gradient-text-fill","t":"Gradient text fill","d":"Text component whose letters are filled with animated moving color orbs for a 3D gradient effect on any background.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"grootstudio","st":"indexed","pl":"https://cdn.21st.dev/grootstudio/gradient-text-fill/default/preview.1783718625307.png","pc":"grootstudio","tg":["text"]},{"id":"21st:grootstudio__logo-marquee","t":"Logo marquee","d":"An infinite horizontal marquee that scrolls a row of brand logos with mask-faded edges and hover-to-slow speed control.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"grootstudio","st":"indexed","u":10,"pl":"https://cdn.21st.dev/grootstudio/logo-marquee/default/preview.1784389182251-e6a49ded-6afe-48e7-94ea-c9a1950c9828.png","pc":"grootstudio","tg":["marquee","scroll-area"]},{"id":"21st:gughigug__ufo-hero","t":"Ufo hero","d":"A cinematic, physics-driven hero: a UFO drifts through end-credit text, pushing letters aside and burning them with its tractor beam on click. Fully responsive, built with a custom","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gughigug","st":"indexed","pl":"https://cdn.21st.dev/gughigug/ufo-hero/default/preview.1786554526541-95f9ed75-f01c-4a18-92eb-12bc4adbc1e0.png","pc":"gughigug"},{"id":"21st:gurukirans615__dot-loader","t":"Dot loader","d":"A clean,reusable React loader component styled with Tailwind CSS. It uses a custom CSS keyframe animation to create three sequential pulsing dots, providing visual feedback during ","k":"component","s":"21st","c":"status/loader","g":"status","a":"gurukirans615","st":"indexed","pl":"https://cdn.21st.dev/gurukirans615/dot-loader/default/preview.1761543438121.png","pc":"gurukirans615"},{"id":"21st:gurukirans615__orb-button","t":"Orb button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"gurukirans615","st":"indexed","pl":"https://cdn.21st.dev/gurukirans615/orb-button/default/preview.1761544906381.png","pc":"gurukirans615"},{"id":"21st:gurvinder-singh02__bold-on-hover","t":"Bold on hover","d":"When you hover over this text, each letter will become bolder, creating a new minimal text effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"gurvinder-singh02","st":"indexed","u":10,"pl":"https://cdn.21st.dev/user_2rGTqRjkIsgwvWVRkyQ9zAKInnT/bold-on-hover/bold-on-hover-demo/preview.png","pc":"gurvinder-singh02"},{"id":"21st:gustavo.camara__pipo","t":"Pipo","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 3-color palette (#E6B093, #A3CEFF, #FAF9EF). Features: soft blur finish, film grain.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"gustavo.camara","st":"indexed","pl":"https://cdn.21st.dev/gustavo.camara/pipo/default/preview.1784327196688-374b18e5-60e4-4e77-b1a5-80aec4067031.webp","pc":"gustavo.camara","tg":["background","hero"]},{"id":"21st:gvozdovic__hero-boutique","t":"Hero boutique","d":"Warm-cream hero with grain-texture overlay, Playfair Display serif, pull-quote slot and side image panel. Perfect for small boutique property projects.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-boutique","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-business","t":"Hero business","d":"Split-panel hero: dark navy left with specs table, right image or grid pattern. Tabular typography and no rounded corners for a professional B2B commercial property feel.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-business","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-heritage","t":"Hero heritage","d":"Centred heritage hero with ornamental chapter-heading dividers, aged-paper background and sepia image treatment. For renovated or historic building landing pages.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-heritage","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-luxury","t":"Hero luxury","d":"Sparse editorial hero for premium properties. Near-black bg, serif typography at large scale, outlined CTAs, wide letter-spacing. Designed for high-end real estate landing pages.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-luxury","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-natural","t":"Hero natural","d":"Warm-earth hero with noise-texture overlay, forest-green palette and organic rounded corners. Ideal for eco-friendly or suburban family residential projects.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-natural","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-penthouse","t":"Hero penthouse","d":"Ultra-minimal full-viewport hero in near-black with gold accent only. Wide letter-spacing, diamond ornament, gold-rule borders. For exclusive penthouse or luxury units.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-penthouse","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-section","t":"Hero section","d":"Flexible hero section with badge, headline, subheadline, primary/secondary CTAs, and an optional media slot. Supports center or left alignment. Styled with Tailwind and shadcn toke","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-section","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-seed","t":"Hero seed","d":"Botanical apothecary hero with announcement bar, floating pill nav, 48px weight-300 display headline, and cream product-image panel. Based on Seed design system: Forest Canopy + Li","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-seed","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-soft","t":"Hero soft","d":"Light, airy centred hero with sky-blue tints, trust-item checklist and large rounded-corner image frame. For affordable or mid-range residential landing pages.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-soft","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-urban","t":"Hero urban","d":"High-contrast dark-navy hero with diagonal clip-path bottom, amber accent bar and stat callout. Strong geometric feel for city-centre development landing pages.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-urban","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-vibrant","t":"Hero vibrant","d":"Energetic two-column hero with purple/coral palette, optional highlight word in accent colour, pill CTAs and a hover-rotate image panel. For starter homes or student housing.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-vibrant","pc":"gvozdovic"},{"id":"21st:gvozdovic__hero-waterfront","t":"Hero waterfront","d":"Full-viewport resort hero with wave SVG divider, ocean-navy gradient, aqua badge and rounded-pill CTAs. For waterfront or coastal residential projects.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"gvozdovic","st":"indexed","pl":"https://21st.dev/@gvozdovic/components/hero-waterfront","pc":"gvozdovic"},{"id":"21st:h0bb5__bloom","t":"Bloom","d":"Trippy animation of repitition","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"h0bb5","st":"indexed","u":16,"pl":"https://cdn.21st.dev/h0bb5/bloom/default/preview.1750322827651.png","pc":"h0bb5"},{"id":"21st:h0bb5__cool-blob-effect","t":"Cool blob effect","d":"A fun blob effect in pure css. \n\nUses keyframes and blur filters.","k":"component","s":"21st","c":"other","g":"other","a":"h0bb5","st":"indexed","u":20,"pl":"https://cdn.21st.dev/h0bb5/cool-blob-effect/default/preview.1750314570640.png","pc":"h0bb5"},{"id":"21st:h0bb5__customizable-loader-spinner-transition","t":"Customizable loader spinner transition","d":"Set number of squares and speed.\nPause at certain points. Scale to a size you like and have fun.\n\nCan also create cool effects such as a hero/feature or transition animations. \n\n**","k":"component","s":"21st","c":"status/loader","g":"status","a":"h0bb5","st":"indexed","u":24,"pl":"https://cdn.21st.dev/h0bb5/customizable-loader-spinner-transition/default/preview.1785467810972-94a36b12-5e26-4640-8066-79b7fa927bd6.png","pc":"h0bb5"},{"id":"21st:h0bb5__generative-art","t":"Generative art","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"h0bb5","st":"indexed","pl":"https://cdn.21st.dev/h0bb5/generative-art/default/preview.1750314238767.png","pc":"h0bb5","tg":["background"]},{"id":"21st:h0bb5__zima-blue","t":"Zima blue","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"h0bb5","st":"indexed","pl":"https://cdn.21st.dev/h0bb5/zima-blue/default/preview.1750315793635.png","pc":"h0bb5"},{"id":"21st:hackergut__ff","t":"Ff","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. Styled with a neon look. A drop-in, zero-dependency React compon","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hackergut","st":"indexed","pl":"https://cdn.21st.dev/hackergut/ff/default/preview.1785336629210-1d75ef14-1459-4e0e-a62e-7189be5bf356.png","pc":"hackergut"},{"id":"21st:hackergut__orgblu","t":"Orgblu","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 5-color palette (#EAF4FC, #251EA4, #F94F07, #000000, #8C00FF). A drop-in, zero-depend","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hackergut","st":"indexed","pl":"https://cdn.21st.dev/hackergut/orgblu/default/preview.1785180338741-501ff233-efe9-4b18-af4a-c5f8c5591222.png","pc":"hackergut"},{"id":"21st:haibachi__cumulative-density-filter","t":"Cumulative density filter","d":"A cumulative density filter which allows viewing the number of a certain metric which is selected when varying the equality operator. Supports log transform.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"haibachi","st":"indexed","pl":"https://cdn.21st.dev/haibachi/cumulative-density-filter/default/preview.1761908529016.png","pc":"haibachi"},{"id":"21st:hamiddos__glitching-button","t":"Glitching button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hamiddos","st":"indexed","pl":"https://cdn.21st.dev/hamiddos/glitching-button/default/preview.1786766622207-0eb3994b-326d-4ed7-a409-7ea6b0e84ef6.png","pc":"hamiddos"},{"id":"21st:hamiddos__spotlight-table","t":"Spotlight table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"hamiddos","st":"indexed","u":29,"pl":"https://cdn.21st.dev/addstegeman/spotlight-table/default/preview.1765218263756.png","pc":"hamiddos","tg":["search","table"]},{"id":"21st:hamiddos__text-scramble","t":"Text scramble","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"hamiddos","st":"indexed","pl":"https://cdn.21st.dev/addstegeman/text-scramble/default/preview.1765217751433.png","pc":"hamiddos"},{"id":"21st:hammamikhairi__animated-gradient-background","t":"Animated gradient background","d":"An animated Gradient Background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hammamikhairi","st":"indexed","u":1003,"pl":"https://cdn.21st.dev/user_2raao7ewdsV3POoFtbzjac3ufnv/animated-gradient-background/default/preview.1737970588556.png","pc":"hammamikhairi","tg":["background"]},{"id":"21st:hammoud4paypal__footer","t":"Footer","d":"Responsive Next.js multi-column site footer with clean grids and trust indicators.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"hammoud4paypal","st":"indexed","pl":"https://21st.dev/@hammoud4paypal/components/footer","pc":"hammoud4paypal"},{"id":"21st:hammoud4paypal__navbar","t":"Navbar","d":"Sticky responsive Next.js navigation bar with mobile drawer and active link sliding Framer Motion animations.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"hammoud4paypal","st":"indexed","pl":"https://21st.dev/@hammoud4paypal/components/navbar","pc":"hammoud4paypal"},{"id":"21st:hardcoretiff__dotgridshaderoncrack","t":"Dotgridshaderoncrack","d":"Animated WebGL shader background in the Dot Grid style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 6-color palette (#00","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hardcoretiff","st":"indexed","pl":"https://cdn.21st.dev/hardcoretiff/dotgridshaderoncrack/default/preview.1785897963203-5e0e912a-e6b3-4e89-8de1-fd391d7d1ef6.webp","pc":"hardcoretiff"},{"id":"21st:hardik0110__download-hover-button","t":"Download hover button","d":"A rounded download button that smoothly expands on hover and collapses when not hovered, providing a clean, interactive experience.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"hardik0110","st":"indexed","u":48,"pl":"https://cdn.21st.dev/user_2vtkEZqLHOZPKLGGX0sUbzF9iZD/download-hover-button/default/preview.1745917361400.png","pc":"hardik0110"},{"id":"21st:hardik0110__mini-calendar","t":"Mini calendar","d":"This is a sleek and responsive mini calendar component built using React and TailwindCSS, designed to display weekly views with a focus on minimalism and clarity. The selected day ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"hardik0110","st":"indexed","u":58,"pl":"https://cdn.21st.dev/user_2vtkEZqLHOZPKLGGX0sUbzF9iZD/mini-calendar/default/preview.1746112336999.png","pc":"hardik0110","tg":["calendar","date-picker"]},{"id":"21st:hardikjk3132006__web-gl-hero-component","t":"Web gl hero component","d":"The Best WebGL Hero Section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hardikjk3132006","st":"indexed","pl":"https://cdn.21st.dev/hardikjk3132006/web-gl-hero-component/default/preview.1769159256428.png","pc":"hardikjk3132006"},{"id":"21st:hardikkashiyani123456788__argent-loop-infinite-slider","t":"Argent loop infinite slider","d":"A high-performance, seamless infinite slider designed for luxury retail and premium product discovery. This component utilizes a \"frictionless\" motion logic to create an unending s","k":"component","s":"21st","c":"media/carousel","g":"media","a":"hardikkashiyani123456788","st":"indexed","u":123,"pl":"https://cdn.21st.dev/hardikkashiyani123456788/argent-loop-infinite-slider/default/preview.1769942086807.png","pc":"hardikkashiyani123456788","tg":["carousel","gallery","scroll-area"]},{"id":"21st:hardikkashiyani123456788__connoisseur-stack-interactor","t":"Connoisseur stack interactor","k":"component","s":"21st","c":"media/gallery","g":"media","a":"hardikkashiyani123456788","st":"indexed","pl":"https://cdn.21st.dev/user_36PocTYc7us01xfx9KNTqyoT4SJ/connoisseur-stack-interactor/default/preview.1785854009183.png","pc":"hardikkashiyani123456788","tg":["image"]},{"id":"21st:hardikkashiyani123456788__executive-impact-carousel","t":"Executive impact carousel","d":"A performance-optimized carousel designed to showcase high-stakes technical solutions. Features a dual-state interaction model (scroll-hover) that highlights system depth and \"Smar","k":"component","s":"21st","c":"media/carousel","g":"media","a":"hardikkashiyani123456788","st":"indexed","u":32,"pl":"https://cdn.21st.dev/hardikkashiyani123456788/executive-impact-carousel/default/preview.1768746777744.png","pc":"hardikkashiyani123456788","tg":["carousel"]},{"id":"21st:hardikkashiyani123456788__experience-hero","t":"Experience hero","d":"Elevate your agency's first impression with a high-performance, GSAP-powered hero section. This \"Obsidian Vault\" design features spatial logic animations, narrative apertures, and ","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"hardikkashiyani123456788","st":"indexed","u":100,"pl":"https://cdn.21st.dev/user_36PocTYc7us01xfx9KNTqyoT4SJ/experience-hero/default/preview.1785837957879.png","pc":"hardikkashiyani123456788","tg":["cta"]},{"id":"21st:hardikkashiyani123456788__flow-gradient-hero-section","t":"Flow gradient hero section","d":"An authoritative UI component featuring fluid liquid gradients and kinetic typography. Designed for premium dark-mode experiences, it combines a sophisticated grainy texture with b","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hardikkashiyani123456788","st":"indexed","u":158,"pl":"https://cdn.21st.dev/hardikkashiyani123456788/flow-gradient-hero-section/default/preview.1769358696285.png","pc":"hardikkashiyani123456788","tg":["hero"]},{"id":"21st:hardikkashiyani123456788__lumina-interactive-list","t":"Lumina interactive list","d":"A sophisticated, hover-responsive showcase block designed for high-end creative portfolios and luxury brand websites. This component features a minimalist vertical navigation list ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"hardikkashiyani123456788","st":"indexed","u":229,"pl":"https://cdn.21st.dev/hardikkashiyani123456788/lumina-interactive-list/default/preview.1769360528343.png","pc":"hardikkashiyani123456788","tg":["gallery","list"]},{"id":"21st:hardikkashiyani123456788__obsidian-gate-loader","t":"Obsidian gate loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"hardikkashiyani123456788","st":"indexed","pl":"https://cdn.21st.dev/hardikkashiyani123456788/obsidian-gate-loader/default/preview.1770538700639.png","pc":"hardikkashiyani123456788"},{"id":"21st:hardikkashiyani123456788__sterling-gate-kinetic-navigation","t":"Sterling gate kinetic navigation","d":"An authoritative full-screen navigation component designed for high-end digital experiences. This menu utilizes a \"Reveal\" logic—where the interface transitions from a focused view","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"hardikkashiyani123456788","st":"indexed","u":308,"pl":"https://cdn.21st.dev/hardikkashiyani123456788/sterling-gate-kinetic-navigation/default/preview.1770546943886.png","pc":"hardikkashiyani123456788","tg":["menu","navigation-menu"]},{"id":"21st:hardikkashiyani123456788__vanguard-scroll-reveal-reviews","t":"Vanguard scroll reveal reviews","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"hardikkashiyani123456788","st":"indexed","pl":"https://cdn.21st.dev/hardikkashiyani123456788/vanguard-scroll-reveal-reviews/default/preview.1769944688507.png","pc":"hardikkashiyani123456788"},{"id":"21st:hari__button-8","t":"Button 8","d":"Here is magic button component","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"hari","st":"indexed","u":142,"pl":"https://cdn.21st.dev/larsen66/button-8/default/preview.1750178482676.png","pc":"hari","tg":["ai-chat"]},{"id":"21st:hari__card-comment","t":"Card comment","d":"Here is card comment component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"hari","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card-comment/default/preview.1750177692885.png","pc":"hari"},{"id":"21st:hari__flower-menu","t":"Flower menu","d":"Here is modern minimalistic flower menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"hari","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/flower-menu/default/preview.1750179001462.png","pc":"hari","tg":["menu"]},{"id":"21st:hari__reveal-images","t":"Reveal images","d":"Reveals the images on hover.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"hari","st":"indexed","u":234,"pl":"https://cdn.21st.dev/user_hari/reveal-images.png","pc":"hari","tg":["gallery","list"]},{"id":"21st:hari__scheduler","t":"Scheduler","d":"Here is notification scheduler component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"hari","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scheduler/default/preview.1750178697741.png","pc":"hari","tg":["notification"]},{"id":"21st:hari__transaction-list","t":"Transaction list","d":"Here is modern minimalistic Transaction List component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"hari","st":"indexed","pl":"https://cdn.21st.dev/larsen66/transaction-list/default/preview.1750179263015.png","pc":"hari","tg":["list"]},{"id":"21st:harshit.cool.devv__fds","t":"Fds","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#DCEBF7, #B9D4EC, #F3D9E4, #F7EFE3). Features: film grain, vignette.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"harshit.cool.devv","st":"indexed","pl":"https://cdn.21st.dev/harshit.cool.devv/fds/default/preview.1785441344983-057bf071-fce4-4de3-8b60-f349c3519be8.webp","pc":"harshit.cool.devv"},{"id":"21st:harshjadhavconnect__cursor-driven-particles-typography","t":"Cursor driven particles typography","d":"Interactive particle-based typography rendered on canvas. \nText is constructed from dynamic particles that disperse on cursor interaction and smoothly return with spring physics.\n\n","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"harshjadhavconnect","st":"indexed","u":42,"pl":"https://cdn.21st.dev/harshjadhavconnect/cursor-driven-particles-typography/default/preview.1772375136220.png","pc":"harshjadhavconnect","tg":["cursor"]},{"id":"21st:harshsingh15dec__shader-background","t":"Shader background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"harshsingh15dec","st":"indexed","pl":"https://cdn.21st.dev/harshsingh15dec/shader-background/default/preview.1760696326948.png","pc":"harshsingh15dec"},{"id":"21st:haydenbleasel__ai-input","t":"Ai input","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/ai-input/default/preview.png","pc":"haydenbleasel","tg":["ai-chat","textarea"]},{"id":"21st:haydenbleasel__announcement","t":"Announcement","d":"A compound badge designed to display an announcement.\n\n","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"haydenbleasel","st":"indexed","u":233,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/announcement/default/preview.1737987848451.png","pc":"haydenbleasel","tg":["announcement"]},{"id":"21st:haydenbleasel__banner","t":"Banner","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/banner/default/preview.1740317278330.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__calendar","t":"Calendar","d":"The calendar view displays features on a grid calendar. Specifically it shows the end date of each feature, and groups features by day.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_haydenbleasel/calendar.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__color-picker","t":"Color picker","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"haydenbleasel","st":"indexed","u":252,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/color-picker/default/preview.1738139440951.png","pc":"haydenbleasel","tg":["slider"]},{"id":"21st:haydenbleasel__cursor","t":"Cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/cursor/default/preview.png","pc":"haydenbleasel","tg":["cursor"]},{"id":"21st:haydenbleasel__data-table","t":"Data table","d":"Table views are used to display data in a tabular format. They are useful for displaying large amounts of data in a structured way.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_haydenbleasel/data-table.png","pc":"haydenbleasel","tg":["dashboard","table"]},{"id":"21st:haydenbleasel__dialog-stack","t":"Dialog stack","d":"Stacked dialog component inspired by Radix UI Dialog. Accessible. Customizable. Open Source. Pre-styled for shadcn/ui.\n\nFeatures\n\t•\tStacked dialog interface with smooth transitions","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"haydenbleasel","st":"indexed","u":64,"pl":"https://cdn.21st.dev/user_haydenbleasel/dialog-stack.png","pc":"haydenbleasel","tg":["modal","steps"]},{"id":"21st:haydenbleasel__dropzone","t":"Dropzone","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/dropzone/default/preview.png","pc":"haydenbleasel","tg":["empty-state","upload-download"]},{"id":"21st:haydenbleasel__gantt","t":"Gantt","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"haydenbleasel","st":"rated","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/gantt/default/preview.1738139570198.png","pc":"haydenbleasel","tg":["sidebar","timeline"],"sc":19},{"id":"21st:haydenbleasel__hero-section-2","t":"Hero section 2","d":"Here is Hero Section  component","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"haydenbleasel","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/hero-section-2/default/preview.1755251450486.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__image-crop","t":"Image crop","d":"An interactive image cropper with customizable aspect ratios, circular crop mode, and apply/reset controls that returns the cropped result as a PNG data URL.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/haydenbleasel/image-crop/default/preview.1784719349941-00a5e0fb-88f3-4c44-b895-12a580c8ab1e.png","pc":"haydenbleasel","tg":["image","upload-download"]},{"id":"21st:haydenbleasel__image-zoom","t":"Image zoom","d":"A component that lets users click or tap an image to zoom in with a blurred backdrop and smooth transitions.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/haydenbleasel/image-zoom/default/preview.1784657490011-94aacf41-3726-4b7d-bc78-9187b8e1a3f6.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__kanban","t":"Kanban","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_haydenbleasel/kanban.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__list","t":"List","d":"List views are a great way to show a list of tasks grouped by status and ranked by priority.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_haydenbleasel/list.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__marquee","t":"Marquee","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"haydenbleasel","st":"indexed","u":136,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/marquee/default/preview.1738138270430.png","pc":"haydenbleasel","tg":["carousel","gallery","marquee","scroll-area"]},{"id":"21st:haydenbleasel__pill","t":"Pill","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"haydenbleasel","st":"indexed","u":130,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/pill/default/preview.png","pc":"haydenbleasel","tg":["badge","avatar","chip"]},{"id":"21st:haydenbleasel__rating","t":"Rating","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"haydenbleasel","st":"indexed","u":86,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/rating/default/preview.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__relative-time","t":"Relative time","d":"Here is Relative Time component","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/larsen66/relative-time/default/preview.1755200263750.png","pc":"haydenbleasel","tg":["date-picker"]},{"id":"21st:haydenbleasel__sandbox","t":"Sandbox","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/sandbox/default/preview.1738138349206.png","pc":"haydenbleasel","tg":["tabs"]},{"id":"21st:haydenbleasel__snippet","t":"Snippet","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"haydenbleasel","st":"indexed","u":55,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/snippet/default/preview.1738139646815.png","pc":"haydenbleasel","tg":["tabs"]},{"id":"21st:haydenbleasel__spinner","t":"Spinner","k":"component","s":"21st","c":"status/loader","g":"status","a":"haydenbleasel","st":"indexed","u":903,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/spinner/default/preview.1737988148384.png","pc":"haydenbleasel","tg":["spinner"]},{"id":"21st:haydenbleasel__status","t":"Status","d":"Here is Status component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/larsen66/status/default/preview.1755199676329.png","pc":"haydenbleasel","tg":["badge"]},{"id":"21st:haydenbleasel__stories-carousel","t":"Stories carousel","d":"Here is Stories Carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"haydenbleasel","st":"indexed","u":149,"pl":"https://cdn.21st.dev/larsen66/stories-carousel/default/preview.1753955275243.png","pc":"haydenbleasel","tg":["avatar","carousel","gallery","image"]},{"id":"21st:haydenbleasel__tags","t":"Tags","k":"component","s":"21st","c":"other","g":"other","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/tags/default/preview.1738138422208.png","pc":"haydenbleasel"},{"id":"21st:haydenbleasel__theme-switcher","t":"Theme switcher","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"haydenbleasel","st":"indexed","u":242,"pl":"https://cdn.21st.dev/user_2rdQLmsxuhvWx0tfvW2jDPWI7CY/theme-switcher/default/preview.png","pc":"haydenbleasel","tg":["toggle"]},{"id":"21st:haydenbleasel__ticker","t":"Ticker","d":"A composable finance ticker for displaying a stock symbol, logo, price, and color-coded price change.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/haydenbleasel/ticker/default/preview.1784463360584-ea0b1e80-f6e6-4f1c-ba3e-0d5659d682f3.png","pc":"haydenbleasel","tg":["stat"]},{"id":"21st:haydenbleasel__tree","t":"Tree","d":"Here is Tree component","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"haydenbleasel","st":"indexed","u":39,"pl":"https://cdn.21st.dev/larsen66/tree/default/preview.1755196224797.png","pc":"haydenbleasel","tg":["file-tree","list","navigation-menu","select"]},{"id":"21st:haydenbleasel__video-player","t":"Video player","d":"Here is Video Player component","k":"component","s":"21st","c":"media/player","g":"media","a":"haydenbleasel","st":"indexed","pl":"https://cdn.21st.dev/larsen66/video-player/default/preview.1755198771254.png","pc":"haydenbleasel","tg":["video"]},{"id":"21st:hazelgrace3026__ocean-grain","t":"Ocean grain","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#08243B, #12507A, #2E8FA6, #7DD0C0). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hazelgrace3026","st":"indexed","pl":"https://cdn.21st.dev/hazelgrace3026/ocean-grain/default/preview.1786465556314-9381e068-dcde-43ab-9bca-8b05e6526e44.webp","pc":"hazelgrace3026"},{"id":"21st:hazelgrace3026__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#08243B, #12507A, #2E8FA6, #7DD0C0). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hazelgrace3026","st":"indexed","pl":"https://cdn.21st.dev/hazelgrace3026/silk-blend-gradient/default/preview.1786465546117-a47a0e11-b879-44fd-9c88-3491d9989138.webp","pc":"hazelgrace3026"},{"id":"21st:hedevelope__estimated-arrival","t":"Estimated arrival","d":"An interactive Estşmated Arrival Date React component displaying an estimated delivery date with expandable details and animations.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"hedevelope","st":"indexed","pl":"https://cdn.21st.dev/hedevelope/estimated-arrival/default/preview.1765013313353.png","pc":"hedevelope","tg":["date-picker"]},{"id":"21st:hedevelope__estimated-arrival-date","t":"Estimated arrival date","d":"A beautiful, animated estimated arrival date card component built with React and TypeScript.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"hedevelope","st":"indexed","pl":"https://cdn.21st.dev/hedevelope/estimated-arrival-date/default/preview.1765010550928.png","pc":"hedevelope"},{"id":"21st:hedevelope__fomo-social-proof","t":"Fomo social proof","d":"The main component that displays animated metrics in a rotating carousel.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"hedevelope","st":"indexed","pl":"https://cdn.21st.dev/hedevelope/fomo-social-proof/default/preview.1765003279708.png","pc":"hedevelope"},{"id":"21st:hedevelope__live-visitor","t":"Live visitor","d":"Animated Avatars Live Visitor Counter","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"hedevelope","st":"indexed","pl":"https://cdn.21st.dev/hedevelope/live-visitor/default/preview.1764946536020.png","pc":"hedevelope"},{"id":"21st:hedevelope__truck-estimated-date","t":"Truck estimated date","d":"A clean delivery information widget with Lottie animation and dashed border design.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"hedevelope","st":"indexed","pl":"https://cdn.21st.dev/hedevelope/truck-estimated-date/default/preview.1765014401895.png","pc":"hedevelope"},{"id":"21st:hero_ui__heroui-accordion","t":"Heroui accordion","d":"HeroUI v3 Accordion — a collapsible content panel built with the real @heroui/react package. Default and surface variants, single or multiple expanded, controlled and default-expan","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"hero_ui","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/heroui-accordion/default/preview.1780270047692.png","pc":"hero_ui","tg":["accordion","faq"]},{"id":"21st:hero_ui__heroui-alert","t":"Heroui alert","d":"HeroUI v3 Alert — status-aware feedback messages built with the real @heroui/react package. Includes default, accent, success, warning and danger statuses, action buttons, close bu","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-alert/default/preview.1780180468308.png","pc":"hero_ui","tg":["announcement","alert","notification"]},{"id":"21st:hero_ui__heroui-alert-dialog","t":"Heroui alert dialog","d":"HeroUI AlertDialog for critical confirmations, with status icons, placements, backdrop variants, sizes, custom icons, dismiss behavior, controlled state and custom trigger examples","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"hero_ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/heroui-alert-dialog/default/preview.1780180682494.png","pc":"hero_ui","tg":["alert","modal"]},{"id":"21st:hero_ui__heroui-autocomplete","t":"Heroui autocomplete","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-autocomplete/default/preview.1782930275159.png","pc":"hero_ui","tg":["avatar","form","search","select"]},{"id":"21st:hero_ui__heroui-avatar","t":"Heroui avatar","d":"Display user profile images with customizable fallback content.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"hero_ui","st":"indexed","u":5,"pl":"https://cdn.21st.dev/reapollo/heroui-avatar/default/preview.1780252844076.png","pc":"hero_ui","tg":["avatar","profile"]},{"id":"21st:hero_ui__heroui-badge","t":"Heroui badge","d":"Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"hero_ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/reapollo/heroui-badge/default/preview.1780254468142.png","pc":"hero_ui","tg":["badge","notification"]},{"id":"21st:hero_ui__heroui-breadcrumbs","t":"Heroui breadcrumbs","d":"Display the current page location within a navigational hierarchy.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"hero_ui","st":"indexed","u":3,"pl":"https://cdn.21st.dev/reapollo/heroui-breadcrumbs/default/preview.1780254281824.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-button","t":"Heroui button","d":"HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-widt","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"hero_ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/heroui-button/default/preview.1780175863873.png","pc":"hero_ui","tg":["sign-in","upload-download"]},{"id":"21st:hero_ui__heroui-button-group","t":"Heroui button group","d":"HeroUI v3 ButtonGroup — grouped buttons with separators, variants, sizes, orientation, icons and full-width layout.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-button-group/default/preview.1782317555643.png","pc":"hero_ui","tg":["button"]},{"id":"21st:hero_ui__heroui-calendar","t":"Heroui calendar","d":"HeroUI v3 Calendar — date calendar with year picker, controlled state, week/day views, min/max, unavailable dates, multiple selection, read-only, focused value, cell indicators, mu","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-calendar/default/preview.1783013515225.png","pc":"hero_ui","tg":["calendar","date-picker","grid","select"]},{"id":"21st:hero_ui__heroui-card","t":"Heroui card","d":"Flexible container component for grouping related content and actions.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"hero_ui","st":"indexed","u":5,"pl":"https://cdn.21st.dev/reapollo/heroui-card/default/preview.1780254434805.png","pc":"hero_ui","tg":["profile","team"]},{"id":"21st:hero_ui__heroui-checkbox","t":"Heroui checkbox","d":"A selectable control for binary choices, form options, indeterminate states, labels, and validation messaging.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"hero_ui","st":"indexed","u":3,"pl":"https://cdn.21st.dev/reapollo/heroui-checkbox/default/preview.1780258040183.png","pc":"hero_ui","tg":["checkbox"]},{"id":"21st:hero_ui__heroui-checkbox-group","t":"Heroui checkbox group","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-checkbox-group/default/preview.1782930743867.png","pc":"hero_ui","tg":["checkbox"]},{"id":"21st:hero_ui__heroui-chip","t":"Heroui chip","d":"Small informational badges for displaying labels, statuses, and categories.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"hero_ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/reapollo/heroui-chip/default/preview.1780264594989.png","pc":"hero_ui","tg":["chip"]},{"id":"21st:hero_ui__heroui-close-button","t":"Heroui close button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-close-button/default/preview.1783009277489.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-color-area","t":"Heroui color area","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-color-area/default/preview.1782934599459.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-color-field","t":"Heroui color field","d":"Color input field with labels, descriptions, validation, and HSL channel editing.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/reapollo/heroui-color-field/default/preview.1780271409351.png","pc":"hero_ui","tg":["form","input"]},{"id":"21st:hero_ui__heroui-color-picker","t":"Heroui color picker","d":"HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for s","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"hero_ui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/heroui-color-picker/default/preview.1782934716287.png","pc":"hero_ui","tg":["popover","slider"]},{"id":"21st:hero_ui__heroui-color-slider","t":"Heroui color slider","d":"HeroUI v3 ColorSlider — slider for a single color channel (RGB/HSL/alpha), vertical, disabled, controlled and custom render.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-color-slider/default/preview.1783013335540.png","pc":"hero_ui","tg":["slider"]},{"id":"21st:hero_ui__heroui-color-swatch","t":"Heroui color swatch","d":"A visual preview of a color value with accessibility support.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/reapollo/heroui-color-swatch/default/preview.1780278032535.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-color-swatch-picker","t":"Heroui color swatch picker","d":"A list of color swatches that allows users to select a color from a predefined palette.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/reapollo/heroui-color-swatch-picker/default/preview.1780278136205.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-combo-box","t":"Heroui combo box","d":"A filterable select field that lets people search, choose, and enter values from a popover list.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"hero_ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/reapollo/heroui-combo-box/default/preview.1780281654285.png","pc":"hero_ui","tg":["popover","search","select"]},{"id":"21st:hero_ui__heroui-date-field","t":"Heroui date field","d":"Date input field with labels, descriptions, and validation built on React Aria DateField.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/reapollo/heroui-date-field/default/preview.1780281808380.png","pc":"hero_ui","tg":["input","select","tooltip"]},{"id":"21st:hero_ui__heroui-date-picker","t":"Heroui date picker","d":"Composable date picker built on React Aria DatePicker with DateField and Calendar composition.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/reapollo/heroui-date-picker/default/preview.1780348199534.png","pc":"hero_ui","tg":["calendar","date-picker","form","input"]},{"id":"21st:hero_ui__heroui-date-range-picker","t":"Heroui date range picker","d":"Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/reapollo/heroui-date-range-picker/default/preview.1780351512219.png","pc":"hero_ui","tg":["calendar","date-picker","select","toggle"]},{"id":"21st:hero_ui__heroui-description","t":"Heroui description","d":"Provides supplementary text for form fields and other components.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/reapollo/heroui-description/default/preview.1780351337826.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-disclosure","t":"Heroui disclosure","d":"A collapsible section with a header trigger and animated panel content.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"hero_ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/reapollo/heroui-disclosure/default/preview.1780351375133.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-disclosure-group","t":"Heroui disclosure group","d":"Container from HeroUI v3 that coordinates Disclosure items and manages their expanded state. Includes default and controlled examples with accessible triggers and panels built on R","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-disclosure-group/default/preview.1782139249741.png","pc":"hero_ui","tg":["accordion"]},{"id":"21st:hero_ui__heroui-drawer","t":"Heroui drawer","d":"HeroUI v3 Drawer — slide-out panel with placements, backdrop variants, non-dismissable, scrollable content, controlled state, forms and a navigation drawer.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"hero_ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/heroui-drawer/default/preview.1782324890364.png","pc":"hero_ui","tg":["modal","navigation-menu","scroll-area","sidebar"]},{"id":"21st:hero_ui__heroui-dropdown","t":"Heroui dropdown","d":"Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), group","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"hero_ui","st":"indexed","u":7,"pl":"https://cdn.21st.dev/hero_ui/heroui-dropdown/default/preview.1782324392000.png","pc":"hero_ui","tg":["avatar","checkbox","dropdown","menu"]},{"id":"21st:hero_ui__heroui-error-message","t":"Heroui error message","d":"HeroUI v3 ErrorMessage — form validation message that appears when a field group is invalid, shown under a TagGroup with selection validation.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-error-message/default/preview.1782326731396.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-field-error","t":"Heroui field error","d":"HeroUI v3 FieldError — per-field validation error display for TextField, covering basic and custom validation, dynamic messages and multiple errors.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-field-error/default/preview.1782330244710.png","pc":"hero_ui","tg":["form","input"]},{"id":"21st:hero_ui__heroui-fieldset","t":"Heroui fieldset","d":"HeroUI v3 Fieldset — groups related form fields with a legend, description and actions, including an on-surface variant.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-fieldset/default/preview.1782326947304.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-form","t":"Heroui form","d":"HeroUI v3 Form — accessible form wrapper with built-in validation, submit/reset handling and a custom render-function API.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-form/default/preview.1782393822891.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-input","t":"Heroui input","d":"Primitive single-line text input that accepts standard HTML attributes.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-input/default/preview.1782165827711.png","pc":"hero_ui","tg":["input"]},{"id":"21st:hero_ui__heroui-input-group","t":"Heroui input group","d":"HeroUI v3 InputGroup — inputs with prefix/suffix addons: icons, text, copy button, password toggle, keyboard shortcut, loading state, variants and textarea.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-input-group/default/preview.1782393958812.png","pc":"hero_ui","tg":["textarea","tooltip"]},{"id":"21st:hero_ui__heroui-input-otp","t":"Heroui input otp","d":"HeroUI v3 InputOTP — segmented one-time-password input: digit counts, patterns, disabled, controlled, validation, on-complete, form integration, variants and on-surface.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-input-otp/default/preview.1782394098112.png","pc":"hero_ui","tg":["form","input"]},{"id":"21st:hero_ui__heroui-label","t":"Heroui label","d":"HeroUI v3 Label — accessible form label primitive that associates a caption with an input via htmlFor.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-label/default/preview.1782926181971.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-list-box","t":"Heroui list box","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-list-box/default/preview.1783009626068.png","pc":"hero_ui","tg":["avatar","list","menu","select"]},{"id":"21st:hero_ui__heroui-meter","t":"Heroui meter","d":"A HeroUI meter for visualizing a value within a range — storage, usage, progress toward a goal. Built on react-aria with an accessible label and formatted output. Supports accent/s","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-meter/default/preview.1783958433914.png","pc":"hero_ui","tg":["progress"]},{"id":"21st:hero_ui__heroui-modal","t":"Heroui modal","d":"Accessible dialog overlay for focused user interactions, with sizes, placement, dismiss control, and controlled state.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-modal/default/preview.1780620392504.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-number-field","t":"Heroui number field","d":"HeroUI v3 NumberField — numeric input with steppers, min/max, step values, format options, validation, variants and form usage.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"hero_ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/heroui-number-field/default/preview.1782933342094.png","pc":"hero_ui","tg":["input"]},{"id":"21st:hero_ui__heroui-progress-bar","t":"Heroui progress bar","d":"A HeroUI progress bar for showing completion of a task — loading, uploads, multi-step flows. Built on react-aria with an accessible label and formatted output. Supports accent/succ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-progress-bar/default/preview.1783959323144.png","pc":"hero_ui","tg":["progress","spinner","upload-download"]},{"id":"21st:hero_ui__heroui-radio-group","t":"Heroui radio group","d":"HeroUI v3 RadioGroup — single-select radio options with descriptions, custom indicators, orientation, controlled/uncontrolled, validation, variants and surface usage.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-radio-group/default/preview.1782933480732.png","pc":"hero_ui","tg":["card","form","radio-group"]},{"id":"21st:hero_ui__heroui-range-calendar","t":"Heroui range calendar","d":"A HeroUI range calendar for selecting a contiguous span of dates, built on react-aria. Supports default and controlled values, min/max bounds, unavailable and non-contiguous ranges","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-range-calendar/default/preview.1783614840643.png","pc":"hero_ui","tg":["calendar","date-picker"]},{"id":"21st:hero_ui__heroui-scroll-shadow","t":"Heroui scroll shadow","d":"HeroUI v3 ScrollShadow — adds a fade/shadow to scrollable overflow containers, with orientation, hidden scrollbar, custom shadow size, visibility change and card usage.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-scroll-shadow/default/preview.1782492162196.png","pc":"hero_ui","tg":["scroll-area"]},{"id":"21st:hero_ui__heroui-search-field","t":"Heroui search field","d":"HeroUI v3 SearchField — search input with clear button: descriptions, required, validation, disabled, controlled, custom icons, full width, variants and form usage.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-search-field/default/preview.1782491179798.png","pc":"hero_ui","tg":["form","input","search"]},{"id":"21st:hero_ui__heroui-select","t":"Heroui select","d":"Accessible select built on React Aria, from HeroUI v3. A collapsible listbox with single and multiple selection, descriptions, grouped sections with headers and separators, disable","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"hero_ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/heroui-select/default/preview.1782312659436.png","pc":"hero_ui","tg":["dropdown","select"]},{"id":"21st:hero_ui__heroui-separator","t":"Heroui separator","d":"HeroUI v3 Separator — horizontal/vertical divider with content, variants, on-surface usage and a custom render-function API.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-separator/default/preview.1782491295759.png","pc":"hero_ui","tg":["list","link","onboarding"]},{"id":"21st:hero_ui__heroui-slider","t":"Heroui slider","d":"Accessible slider from HeroUI v3 for selecting one or more values within a range. Compound API (Slider.Track / Slider.Fill / Slider.Thumb / Slider.Output) with single-value, range,","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-slider/default/preview.1782131832827.png","pc":"hero_ui","tg":["slider"]},{"id":"21st:hero_ui__heroui-spinner","t":"Heroui spinner","d":"A HeroUI spinner — a lightweight animated loading indicator for buttons, panels, and full-page states. Built on HeroUI with current/accent/success/warning/danger colors and sm/md/l","k":"component","s":"21st","c":"status/loader","g":"status","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-spinner/default/preview.1783961253294.png","pc":"hero_ui","tg":["spinner"]},{"id":"21st:hero_ui__heroui-surface","t":"Heroui surface","d":"A HeroUI surface — a themeable container that provides consistent background layering for cards, panels, and overlays. Supports default, secondary, and tertiary background levels p","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-surface/default/preview.1783964905319.png","pc":"hero_ui","tg":["card"]},{"id":"21st:hero_ui__heroui-switch","t":"Heroui switch","d":"HeroUI v3 Switch — toggle with sizes, label position, icons, descriptions, disabled/selected states, groups, render props and custom styles.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-switch/default/preview.1782935238125.png","pc":"hero_ui","tg":["form","icon","toggle"]},{"id":"21st:hero_ui__heroui-table","t":"Heroui table","d":"HeroUI v3 Table — data table with sorting, selection, custom cells, expandable rows, pagination, column resizing, empty state and async loading.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-table/default/preview.1783013197092.png","pc":"hero_ui","tg":["avatar","checkbox","chip","file-tree"]},{"id":"21st:hero_ui__heroui-tabs","t":"Heroui tabs","d":"HeroUI tabs to organize content into sections with primary and secondary variants.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-tabs/default/preview.1780620246315.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-tag-group","t":"Heroui tag group","d":"HeroUI v3 TagGroup — selectable tags with sizes, variants, disabled, selection modes, controlled state, error message, prefix, removable tags and list-data management.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-tag-group/default/preview.1782325166571.png","pc":"hero_ui","tg":["avatar","chip","form","icon"]},{"id":"21st:hero_ui__heroui-text-area","t":"Heroui text area","d":"Multi-line text input for longer free-form content, with primary and secondary variants, configurable rows, and full-width layout. Thin re-export of the real @heroui/react TextArea","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-text-area/default/preview.1782226712365.png","pc":"hero_ui","tg":["textarea"]},{"id":"21st:hero_ui__heroui-time-field","t":"Heroui time field","d":"Time input field with labels, descriptions, and validation built on React Aria, from HeroUI v3. Segmented hour/minute editing with a blue accent focus highlight, prefix/suffix icon","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-time-field/default/preview.1782304179187.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-toggle-button","t":"Heroui toggle button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-toggle-button/default/preview.1783009492390.png","pc":"hero_ui","tg":["button","icon","toggle"]},{"id":"21st:hero_ui__heroui-toggle-button-group","t":"Heroui toggle button group","d":"Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options with single or multiple selection modes.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-toggle-button-group/default/preview.1782160845833.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-toolbar","t":"Heroui toolbar","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-toolbar/default/preview.1782214006203.png","pc":"hero_ui"},{"id":"21st:hero_ui__heroui-tooltip","t":"Heroui tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/hero_ui/heroui-tooltip/default/preview.1782315701961.png","pc":"hero_ui","tg":["chip","tooltip"]},{"id":"21st:hero_ui__heroui-typography","t":"Heroui typography","d":"HeroUI v3 Typography — heading and body type scale, primitives (Heading/Paragraph/Code), Prose for rich text, and the render-prop polymorphic API.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hero_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heroui-typography/default/preview.1782325019747.png","pc":"hero_ui"},{"id":"21st:hero_ui__skeleton","t":"Skeleton","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"hero_ui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/lyanchouss/skeleton/default/preview.1781783404554.png","pc":"hero_ui","tg":["empty-state","list","profile"]},{"id":"21st:hero_ui__the-pagination","t":"The pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"hero_ui","st":"indexed","u":30,"pl":"https://cdn.21st.dev/lyanchouss/the-pagination/default/preview.1781778870606.png","pc":"hero_ui","tg":["navigation-menu","pagination","table"]},{"id":"21st:heygaia__raised-button","t":"Raised button","d":"A 3D raised button with a glossy top highlight, press animation, and customizable colors that auto-adjust text contrast.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"heygaia","st":"indexed","pl":"https://cdn.21st.dev/heygaia/raised-button/default/preview.1784725274150-dcdf57ff-36ca-45a8-ad6d-76963398c113.png","pc":"heygaia"},{"id":"21st:heygaia__tool-calls-section","t":"Tool calls section","d":"An expandable section that shows AI agent tool usage as a collapsible timeline with stacked category icons and per-call inputs and outputs.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"heygaia","st":"rated","pl":"https://cdn.21st.dev/heygaia/tool-calls-section/default/preview.1784355239570-9dfb4cde-306f-4cc5-b38f-120aaba6acc9.png","pc":"heygaia","tg":["ai-chat","icon","timeline"],"sc":22},{"id":"21st:heygaia__wave-spinner","t":"Wave spinner","d":"An animated loading spinner made of pulsing dots with configurable wave patterns, grid layouts, colors, sizes, and dot shapes.","k":"component","s":"21st","c":"status/loader","g":"status","a":"heygaia","st":"indexed","pl":"https://cdn.21st.dev/heygaia/wave-spinner/default/preview.1784671634765-1aae4ba2-5f1b-4c94-b189-428a84624a3e.png","pc":"heygaia","tg":["grid","spinner"]},{"id":"21st:heyquincy__cursor-dither-trail","t":"Cursor dither trail","d":"A fluid, single-colour dither tail that follows the cursor. 100 % canvas-based, zero dependencies, fully customizable (colour, dot size, fade speed). Perfect for splash pages, hero","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"heyquincy","st":"indexed","u":17,"pl":"https://cdn.21st.dev/heyquincy/cursor-dither-trail/default/preview.1748886114971.png","pc":"heyquincy","tg":["cursor"]},{"id":"21st:hfroget__footer-newsletter","t":"Footer newsletter","d":"Responsive 4-column footer with company info, useful links, social follows, and an inline newsletter subscription form with animated success/error feedback. Theme-adaptive via shad","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"hfroget","st":"indexed","pl":"https://21st.dev/@hfroget/components/footer-newsletter","pc":"hfroget"},{"id":"21st:hfroget__test-publish-check","t":"Test publish check","d":"Minimal test component to verify publishing works.","k":"component","s":"21st","c":"other","g":"other","a":"hfroget","st":"indexed","pl":"https://21st.dev/@hfroget/components/test-publish-check","pc":"hfroget"},{"id":"21st:hibatillah__data-table-filter","t":"Data table filter","d":"shadcn/ui data-table with grouped/standalone filter","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"hibatillah","st":"indexed","pl":"https://cdn.21st.dev/user_2v5A5RXQlrr4ryzkjamsEl7tpJ2/data-table-filter/data-table-filter/preview.png","pc":"hibatillah"},{"id":"21st:hibatillah__date-badge","t":"Date badge","d":"Badge to display date shorten.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"hibatillah","st":"indexed","u":39,"pl":"https://cdn.21st.dev/user_2v5A5RXQlrr4ryzkjamsEl7tpJ2/date-badge/default/preview.1746003143808.png","pc":"hibatillah","tg":["badge","calendar","date-picker","tooltip"]},{"id":"21st:hihahihahoho__circle-progress","t":"Circle progress","d":"CircleProgress displays progress, completion status, or usage metrics in a circular format.\nIt provides visual feedback about processes, tasks completion, or resource utilization.\n","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"hihahihahoho","st":"indexed","u":118,"pl":"https://cdn.21st.dev/user_2ryL1QG6P953wIAdUUA3nj8N4tL/circle-progress/default/preview.1743158355323.png","pc":"hihahihahoho","tg":["data-visualization","progress"]},{"id":"21st:hihahihahoho__use-item-overflow","t":"Use item overflow","d":"Responsive and dynamically calculates the number of items that can fit within a container without overflowing, while accounting for a \"+X\" overflow indicator. It automatically adju","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"hihahihahoho","st":"indexed","u":40,"pl":"https://cdn.21st.dev/user_2ryL1QG6P953wIAdUUA3nj8N4tL/use-item-overflow/default/preview.1737989737637.png","pc":"hihahihahoho","tg":["hook"]},{"id":"21st:hild__copybutton","t":"Copybutton","d":"A button that copies a given value to the clipboard and shows a checkmark confirmation for a moment. Graceful fallback when the Clipboard API is blocked.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"hild","st":"indexed","pl":"https://21st.dev/@hild/components/copybutton","pc":"hild"},{"id":"21st:himal9626__animated-tab-component","t":"Animated tab component","d":"An Animated Tab Component using a Shadcn/RadixUI","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"himal9626","st":"indexed","pl":"https://cdn.21st.dev/himal9626/animated-tab-component/default/preview.1760970646139.png","pc":"himal9626"},{"id":"21st:hinedy__reveal-wave-image","t":"Reveal wave image","d":"An interactive WebGL image component with animated wave distortion, dithering, and a mouse-driven color reveal effect.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"hinedy","st":"indexed","u":113,"pl":"https://cdn.21st.dev/hinedy/reveal-wave-image/default/preview.1785307527216-e8220335-b0cb-44dc-8d11-1bd52a33b6b0.png","pc":"hinedy"},{"id":"21st:hirael__cta-06","t":"Cta 06","d":"A framed call-to-action banner over a tokenized gradient surface with an eyebrow label, serif headline with italic emphasis, sub-copy, and a primary action button that reveals on s","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"hirael","st":"indexed","pl":"https://cdn.21st.dev/hirael/cta-06/default/preview.1784789818624-423e9987-7e0d-4aac-b277-b382e5f91651.png","pc":"hirael"},{"id":"21st:hirael__not-found-01","t":"Not found 01","d":"A centered 404 not-found page with a mono eyebrow, serif display headline, paired call-to-action buttons and a suggested-routes list.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"hirael","st":"indexed","u":4,"pl":"https://cdn.21st.dev/hirael/not-found-01/default/preview.1784798788843-10b9f187-dc6a-433b-a46a-4c9a4c9b112c.png","pc":"hirael"},{"id":"21st:hirael__toc","t":"Toc","d":"On-this-page navigation that tracks the active heading as you scroll and highlights it with a moving border marker.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"hirael","st":"indexed","pl":"https://cdn.21st.dev/hirael/toc/default/preview.1784488118775-d628fbab-89b8-465c-9b1e-fe98616e5e2c.png","pc":"hirael","tg":["table"]},{"id":"21st:hochart.gabriel.svis__blue-halftone","t":"Blue halftone","d":"Animated WebGL shader background in the Halftone style, generated by the 21st.dev Shader Builder. 5-color palette (#3B82F6, #2563EB, #1D4ED8, #1E40AF, #1E3A8A). Features: film grai","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hochart.gabriel.svis","st":"indexed","pl":"https://cdn.21st.dev/hochart.gabriel.svis/blue-halftone/default/preview.1784123170683.webp","pc":"hochart.gabriel.svis"},{"id":"21st:holetarget__21st-navbar","t":"21st navbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"holetarget","st":"indexed","pl":"https://cdn.21st.dev/user_2rfd0BT4DFm0irLKSfM6xuhywgt/21st-navbar.png","pc":"holetarget"},{"id":"21st:hsuanyi-chou__multiple-selector","t":"Multiple selector","d":"Fast, composable, fully-featured multiple selector for React.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"hsuanyi-chou","st":"indexed","u":215,"pl":"https://cdn.21st.dev/user_hsuanyi-chou/multiple-selector.png","pc":"hsuanyi-chou","tg":["select"]},{"id":"21st:hugo_1a34d4f7__atlasaurora","t":"Atlasaurora","d":"A calm, premium animated aurora background: three slow-drifting blurred colour fields blended with light, plus a soft diagonal sweep. Self-contained, themeable, and reduced-motion ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"hugo_1a34d4f7","st":"indexed","pl":"https://21st.dev/@hugo_1a34d4f7/components/atlasaurora","pc":"hugo_1a34d4f7"},{"id":"21st:hugo_1a34d4f7__statband","t":"Statband","d":"A calm row of in-view count-up stats on glassy cards; numbers animate from zero on scroll-in via IntersectionObserver + rAF. No dependencies, themeable, reduced-motion aware.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"hugo_1a34d4f7","st":"indexed","pl":"https://21st.dev/@hugo_1a34d4f7/components/statband","pc":"hugo_1a34d4f7"},{"id":"21st:hugo_1a34d4f7__wordreveal","t":"Wordreveal","d":"A calm word-by-word headline reveal (rise + fade) with an optional glowing accent run. Pure CSS, no dependencies, themeable, reduced-motion aware.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"hugo_1a34d4f7","st":"indexed","pl":"https://21st.dev/@hugo_1a34d4f7/components/wordreveal","pc":"hugo_1a34d4f7"},{"id":"21st:hurerag24__bolt-style-chat","t":"Bolt style chat","d":"A Bolt inspired hero chat interface with a prompt input, model selector, glowing ray background, and modern dark UI for AI product landing pages.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"hurerag24","st":"indexed","u":185,"pl":"https://cdn.21st.dev/hurerag24/bolt-style-chat/default/preview.1768931386220.png","pc":"hurerag24","tg":["ai-chat","hero"]},{"id":"21st:hurerag24__hero-grid-section","t":"Hero grid section","d":"Modern hero with subtle background grid, stacked avatars & CTA buttons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"hurerag24","st":"indexed","u":39,"pl":"https://cdn.21st.dev/hurerag24/hero-grid-section/default/preview.1767456252680.png","pc":"hurerag24"},{"id":"21st:hurerag24__interactive-hover-links","t":"Interactive hover links","d":"Interactive hover links with fluid cursor tracking, animated typography, and floating preview images.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"hurerag24","st":"indexed","u":53,"pl":"https://cdn.21st.dev/hurerag24/interactive-hover-links/default/preview.1768155091619.png","pc":"hurerag24","tg":["cursor","link"]},{"id":"21st:hurerag24__iphone-carousel","t":"Iphone carousel","d":"Apple-inspired video highlights carousel with GSAP animations, progress indicators, and smooth slide transitions.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"hurerag24","st":"indexed","pl":"https://cdn.21st.dev/hurerag24/iphone-carousel/default/preview.1770312348404.png","pc":"hurerag24"},{"id":"21st:hurerag24__shifting-dropdown","t":"Shifting dropdown","d":"An animated navigation menu with shifting content. Hovering or clicking on a dropdown smoothly reveals its content with motion transitions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"hurerag24","st":"indexed","u":39,"pl":"https://cdn.21st.dev/hurerag24/shifting-dropdown/default/preview.1768122520833.png","pc":"hurerag24","tg":["menu","navigation-menu"]},{"id":"21st:hyggemethat__tinder-like-swipe","t":"Tinder like swipe","d":"Here is Tinder Like Swipe component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"hyggemethat","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tinder-like-swipe/default/preview.1754051550341.png","pc":"hyggemethat","tg":["gallery","image"]},{"id":"21st:iamsatish4564__animated-profile-card","t":"Animated profile card","d":"Here is Animated Profile Card component","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"iamsatish4564","st":"indexed","u":50,"pl":"https://cdn.21st.dev/larsen66/animated-profile-card/default/preview.1767719758884.png","pc":"iamsatish4564","tg":["link","profile"]},{"id":"21st:iamsatish4564__curtain-button","t":"Curtain button","d":"Here is Curtain Button components","k":"component","s":"21st","c":"actions/button","g":"actions","a":"iamsatish4564","st":"indexed","pl":"https://cdn.21st.dev/larsen66/curtain-button/default/preview.1767626147953.png","pc":"iamsatish4564"},{"id":"21st:iamsatish4564__eclipse-button","t":"Eclipse button","d":"Here is Eclipse Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"iamsatish4564","st":"indexed","pl":"https://cdn.21st.dev/larsen66/eclipse-button/default/preview.1767633698039.png","pc":"iamsatish4564","tg":["button"]},{"id":"21st:iamsatish4564__micro-expander","t":"Micro expander","d":"Here is Micro Expander component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"iamsatish4564","st":"indexed","pl":"https://cdn.21st.dev/larsen66/micro-expander/default/preview.1767626727445.png","pc":"iamsatish4564","tg":["button"]},{"id":"21st:iamsatish4564__morph-button","t":"Morph button","d":"Here is Morph Button components","k":"component","s":"21st","c":"actions/button","g":"actions","a":"iamsatish4564","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/morph-button/default/preview.1767628408233.png","pc":"iamsatish4564","tg":["button"]},{"id":"21st:iamsatish4564__portfolio-and-image-gallery","t":"Portfolio and image gallery","d":"Here is Portfolio and Image Gallery component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"iamsatish4564","st":"indexed","u":133,"pl":"https://cdn.21st.dev/larsen66/portfolio-and-image-gallery/default/preview.1767718290542.png","pc":"iamsatish4564","tg":["gallery","steps"]},{"id":"21st:iamsatish4564__prime-button","t":"Prime button","d":"Here is Prime Button component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"iamsatish4564","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/prime-button/default/preview.1767632917239.png","pc":"iamsatish4564","tg":["upload-download"]},{"id":"21st:ian.veber__space-station-journey","t":"Space station journey","d":"An immersive 3D space station experience where scroling moves you through depth, guided by a robot compnion through 5 distinct rooms.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ian.veber","st":"indexed","pl":"https://cdn.21st.dev/ian.veber/space-station-journey/default/preview.1779904561772.png","pc":"ian.veber"},{"id":"21st:ibelick__accordion","t":"Accordion","d":"A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsi","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ibelick","st":"indexed","u":47,"pl":"https://cdn.21st.dev/user_motion_primitives/accordion.png","pc":"ibelick","tg":["accordion","faq"]},{"id":"21st:ibelick__animated-background","t":"Animated background","d":"The AnimatedBackground component visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":165,"pl":"https://cdn.21st.dev/user_motion_primitives/animated-background.png","pc":"ibelick"},{"id":"21st:ibelick__animated-group","t":"Animated group","d":"A wrapper that adds animated transitions to a group of child elements. It's perfect for creating staggered animations for lists, grids, or any collection of components.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_motion_primitives/animated-group.png","pc":"ibelick","tg":["gallery"]},{"id":"21st:ibelick__animated-number","t":"Animated number","d":"Easily animate numbers.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ibelick","st":"indexed","u":54,"pl":"https://cdn.21st.dev/user_motion_primitives/animated-number.png","pc":"ibelick","tg":["number"]},{"id":"21st:ibelick__animated-tabs","t":"Animated tabs","d":"Animated Tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ibelick","st":"indexed","u":195,"pl":"https://cdn.21st.dev/user_motion_primitives/animated-tabs.png","pc":"ibelick","tg":["tabs"]},{"id":"21st:ibelick__background-snippets","t":"Background snippets","d":"Here is Background snippets component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":196,"pl":"https://cdn.21st.dev/larsen66/background-snippets/default/preview.1756794181084.png","pc":"ibelick","tg":["background","grid","hero"]},{"id":"21st:ibelick__border-trail","t":"Border trail","d":"Animated border effect that moves along the edges of its parent container.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_motion_primitives/border-trail.png","pc":"ibelick","tg":["border","textarea"]},{"id":"21st:ibelick__carousel","t":"Carousel","d":"A flexible and easy-to-use carousel with customizable navigation and indicators.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ibelick","st":"indexed","u":476,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/carousel/default/preview.png","pc":"ibelick","tg":["carousel"]},{"id":"21st:ibelick__code-block","t":"Code block","d":"A component for displaying code snippets with syntax highlighting and customizable styling.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ibelick","st":"indexed","u":327,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/code-block/default/preview.png","pc":"ibelick"},{"id":"21st:ibelick__cursor","t":"Cursor","d":"A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_motion_primitives/cursor.png","pc":"ibelick","tg":["cursor","image","tooltip"]},{"id":"21st:ibelick__disclosure","t":"Disclosure","d":"The Disclosure component allows users to toggle the visibility of content, either collapsed or expanded.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"ibelick","st":"indexed","u":77,"pl":"https://cdn.21st.dev/user_motion_primitives/disclosure.png","pc":"ibelick"},{"id":"21st:ibelick__dock","t":"Dock","d":"A versatile UI element that provides a flexible and customizable way to organize and display menu items within your application.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ibelick","st":"indexed","u":1536,"pl":"https://cdn.21st.dev/user_motion_primitives/dock.png","pc":"ibelick","tg":["dock","icon","menu","navigation-menu"]},{"id":"21st:ibelick__glow-effect","t":"Glow effect","d":"A customizable glow effect with animation modes, colors, blur, and transitions\n","k":"component","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":924,"pl":"https://cdn.21st.dev/user_motion_primitives/glow-effect/default/preview.png","pc":"ibelick"},{"id":"21st:ibelick__gradient-background-4","t":"Gradient background 4","d":"Gradient Background 4","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":47,"pl":"https://cdn.21st.dev/aghasisahakyan1/gradient-background-4/default/preview.1756603331443.png","pc":"ibelick","tg":["background","hero"]},{"id":"21st:ibelick__image-comparison","t":"Image comparison","d":"Interactively compare two images with a draggable slider to reveal differences.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ibelick","st":"indexed","u":135,"pl":"https://cdn.21st.dev/user_motion_primitives/image-comparison.png","pc":"ibelick","tg":["image","slider"]},{"id":"21st:ibelick__in-view","t":"In view","d":"Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ibelick","st":"indexed","u":156,"pl":"https://cdn.21st.dev/user_motion_primitives/in-view.png","pc":"ibelick","tg":["gallery","scroll-area"]},{"id":"21st:ibelick__infinite-slider","t":"Infinite slider","d":"Infinite scrolling slider component that smoothly loops through its children. It supports both horizontal and vertical directions, with customizable speed and speed on hover. Ideal","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"ibelick","st":"indexed","u":2427,"pl":"https://cdn.21st.dev/user_motion_primitives/infinite-slider.png","pc":"ibelick","tg":["carousel","clients","gallery","marquee"]},{"id":"21st:ibelick__jsx-preview","t":"Jsx preview","d":"A component for rendering JSX strings as React components, with support for streaming content and automatic tag completion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/jsx-preview/default/preview.png","pc":"ibelick","tg":["ai-chat"]},{"id":"21st:ibelick__light-theme-tailwind-css-background-snippet","t":"Light theme tailwind css background snippet","d":"Light theme Tailwind CSS Background Snippet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":20,"pl":"https://cdn.21st.dev/aghasisahakyan1/light-theme-tailwind-css-background-snippet/default/preview.1756603120195.png","pc":"ibelick","tg":["background"]},{"id":"21st:ibelick__loader","t":"Loader","d":"A loading component with multiple variants to indicate processing states and provide visual feedback to users during wait times.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ibelick","st":"indexed","u":212,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/loader/default/preview.png","pc":"ibelick","tg":["spinner"]},{"id":"21st:ibelick__magnetic","t":"Magnetic","d":"A magnetic effect for elements that allows them to be attracted to the mouse cursor.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ibelick","st":"indexed","u":155,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/magnetic/default/preview.png","pc":"ibelick","tg":["cursor"]},{"id":"21st:ibelick__markdown","t":"Markdown","k":"component","s":"21st","c":"other","g":"other","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/markdown/default/preview.png","pc":"ibelick"},{"id":"21st:ibelick__morphing-dialog","t":"Morphing dialog","d":"A dialog that uses layout animations to transition content into a focused view. It supports click-outside and escape key functionalities for closing.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ibelick","st":"indexed","u":169,"pl":"https://cdn.21st.dev/user_motion_primitives/morphing-dialog.png","pc":"ibelick","tg":["gallery","image","modal","video"]},{"id":"21st:ibelick__morphing-popover","t":"Morphing popover","d":"A popover that transforms from its trigger into the content using layout animations. It visually morphs instead of appearing as a separate element.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ibelick","st":"indexed","u":204,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/morphing-popover/default/preview.png","pc":"ibelick","tg":["popover","textarea"]},{"id":"21st:ibelick__popover","t":"Popover","d":"A simple popover for quick user interactions over existing content. It pops up on command, and closes easily with a click outside or on a close button.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ibelick","st":"indexed","u":61,"pl":"https://cdn.21st.dev/user_motion_primitives/popover.png","pc":"ibelick","tg":["popover"]},{"id":"21st:ibelick__progressive-blur","t":"Progressive blur","d":"A Progressive Blur component creates a layered blur effect using motion and gradient masks. It progressively blurs layers based on direction and intensity, adding visual depth.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"ibelick","st":"indexed","u":1441,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/progressive-blur/default/preview.png","pc":"ibelick","tg":["gallery","image","marquee","scroll-area"]},{"id":"21st:ibelick__prompt-input","t":"Prompt input","d":"An input field that allows users to enter and submit text to an AI model.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/prompt-input/default/preview.png","pc":"ibelick","tg":["textarea","upload-download"]},{"id":"21st:ibelick__prompt-suggestion","t":"Prompt suggestion","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/prompt-suggestion/default/preview.png","pc":"ibelick","tg":["ai-chat"]},{"id":"21st:ibelick__promt-input-with-actions","t":"Promt input with actions","d":"Here is Promt Input with Actions component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/larsen66/promt-input-with-actions/default/preview.1755906325386.png","pc":"ibelick","tg":["ai-chat","input","textarea"]},{"id":"21st:ibelick__response-stream","t":"Response stream","d":"A component for displaying text with streaming animations, perfect for chat interfaces, AI responses, or any text that should appear progressively.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ibelick","st":"rated","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/response-stream/default/preview.png","pc":"ibelick","tg":["ai-chat"],"sc":17},{"id":"21st:ibelick__scroll-button","t":"Scroll button","d":"A floating button component that appears when users scroll up in a container, allowing them to quickly return to the bottom of the content with a single click.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ibelick","st":"indexed","u":40,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/scroll-button/default/preview.png","pc":"ibelick","tg":["scroll-area"]},{"id":"21st:ibelick__scroll-progress","t":"Scroll progress","d":"Animated scroll progress for your web pages.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ibelick","st":"indexed","u":146,"pl":"https://cdn.21st.dev/user_motion_primitives/scroll-progress.png","pc":"ibelick","tg":["progress","scroll-area"]},{"id":"21st:ibelick__sliding-number","t":"Sliding number","d":"A component that slides numbers.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ibelick","st":"indexed","u":217,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/sliding-number/default/preview.png","pc":"ibelick","tg":["number","slider","text"]},{"id":"21st:ibelick__spinning-text","t":"Spinning text","d":"Easily animate text circularly. Customize the animation with variants and transitions.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ibelick","st":"indexed","u":97,"pl":"https://cdn.21st.dev/user_motion_primitives/spinning-text.png","pc":"ibelick"},{"id":"21st:ibelick__spotlight","t":"Spotlight","d":"A dynamic spotlight effect component that follows cursor movement.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"ibelick","st":"indexed","u":208,"pl":"https://cdn.21st.dev/user_motion_primitives/spotlight.png","pc":"ibelick","tg":["border","cursor","grid"]},{"id":"21st:ibelick__tailwind-css-background-snippet","t":"Tailwind css background snippet","d":"Tailwind CSS Background Snippet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ibelick","st":"indexed","u":60,"pl":"https://cdn.21st.dev/aghasisahakyan1/tailwind-css-background-snippet/default/preview.1756602753286.png","pc":"ibelick","tg":["background","hero"]},{"id":"21st:ibelick__text-effect","t":"Text effect","d":"Easily animate text content with various effects. You can apply animations per character or per word, and customize the animation effects using custom variants or preset animations","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":1910,"pl":"https://cdn.21st.dev/user_motion_primitives/text-effect.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__text-loop","t":"Text loop","d":"Text animation that transitions between multiple items, creating an engaging looping effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":320,"pl":"https://cdn.21st.dev/user_motion_primitives/text-loop.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__text-morph","t":"Text morph","d":"Animates text by morphing shared letters between words, creating fluid transitions","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":27,"pl":"https://cdn.21st.dev/user_motion_primitives/text-morph.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__text-roll","t":"Text roll","d":"A text roll component that rotates each character, fully customizable for nice text animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":160,"pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/text-roll/default/preview.1738001150128.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__text-scramble","t":"Text scramble","d":"Text animation that transforms text by randomly cycling through characters before settling on the final content, creating an engaging cryptographic effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":483,"pl":"https://cdn.21st.dev/user_motion_primitives/text-scramble.png","pc":"ibelick"},{"id":"21st:ibelick__text-shimmer","t":"Text shimmer","d":"Shimmer effect on text. Easily adjust the duration and the spread of the shimmer effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":2791,"pl":"https://cdn.21st.dev/user_motion_primitives/text-shimmer.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__text-shimmer-wave","t":"Text shimmer wave","d":"Shimmer wave effect on text. Easily adjust the wave effect, spread, duration, and more.\n\nYou can use the [--base-color] and [--base-gradient-color] CSS variables to customize the c","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ibelick","st":"indexed","u":450,"pl":"https://cdn.21st.dev/user_motion_primitives/text-shimmer-wave.png","pc":"ibelick","tg":["text"]},{"id":"21st:ibelick__tilt","t":"Tilt","d":"3D tilt effect that responds to mouse movement, enhancing UI elements with a dynamic depth effect, customizable rotation factors and spring options.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ibelick","st":"indexed","u":414,"pl":"https://cdn.21st.dev/user_motion_primitives/tilt.png","pc":"ibelick","tg":["image"]},{"id":"21st:ibelick__toolbar-dynamic","t":"Toolbar dynamic","d":"A toolbar that changes its height as needed. It grows to show more content and shrinks to save space, keeping your screen neat.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ibelick","st":"indexed","u":16,"pl":"https://cdn.21st.dev/user_motion_primitives/toolbar-dynamic.png","pc":"ibelick","tg":["profile"]},{"id":"21st:ibelick__toolbar-expandable","t":"Toolbar expandable","d":"A toolbar that adjusts its width based on what you need to do. It starts small and can expand to offer more tools.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"ibelick","st":"indexed","u":34,"pl":"https://cdn.21st.dev/user_motion_primitives/toolbar-expandable.png","pc":"ibelick","tg":["search"]},{"id":"21st:ibelick__transition-panel","t":"Transition panel","d":"Easy way to switch between different pieces of content with enter and exit animations. It's perfect for enhancing user experience in areas such as onboarding card, settings adjustm","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ibelick","st":"indexed","u":71,"pl":"https://cdn.21st.dev/user_motion_primitives/transition-panel.png","pc":"ibelick","tg":["onboarding","tabs"]},{"id":"21st:ibrahimabdz__securityconsolehero","t":"Securityconsolehero","d":"Dark developer/security console hero: asymmetric split with typewriter role line, stat strip and an animated terminal card. Self-contained, IDE palette (code dark + run green), res","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ibrahimabdz","st":"indexed","pl":"https://21st.dev/@ibrahimabdz/components/securityconsolehero","pc":"ibrahimabdz"},{"id":"21st:ibssibss7__elixr","t":"Elixr","d":"Made for elixr copied","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ibssibss7","st":"indexed","pl":"https://cdn.21st.dev/ibssibss7/elixr/default/preview.1755313634240.png","pc":"ibssibss7"},{"id":"21st:imarkytanky__pinlist","t":"Pinlist","d":"A beautiful, responsive pin/marker directory component with search, filter, categories, star ratings, and four layout variants (default, compact, grid, card). Perfect for travel gu","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"imarkytanky","st":"indexed","pl":"https://21st.dev/@imarkytanky/components/pinlist","pc":"imarkytanky"},{"id":"21st:inference-sh__sidebar-light","t":"Sidebar light","d":"Lightweight sidebar navigation with nested items, icons, and active route highlighting.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"inference-sh","st":"indexed","u":6,"pl":"https://cdn.21st.dev/inference-sh/sidebar-light/default/preview.1783729093009.png","pc":"inference-sh","tg":["dashboard","sidebar"]},{"id":"21st:inference-sh__table-of-contents","t":"Table of contents","d":"An auto-scrolling table of contents that highlights the active section using an intersection observer as the reader scrolls.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"inference-sh","st":"indexed","pl":"https://cdn.21st.dev/inference-sh/table-of-contents/default/preview.1784718030348-03461537-ce39-4fc3-bf13-9623dd5e947b.png","pc":"inference-sh","tg":["list","navigation-menu","table"]},{"id":"21st:inference-sh__youtube-embed","t":"Youtube embed","d":"Responsive YouTube video embed with an aspect-ratio container and a loading spinner shown until the iframe finishes loading.","k":"component","s":"21st","c":"media/player","g":"media","a":"inference-sh","st":"indexed","pl":"https://cdn.21st.dev/inference-sh/youtube-embed/default/preview.1783720016284.png","pc":"inference-sh","tg":["video"]},{"id":"21st:inference-sh__zoomable-image","t":"Zoomable image","d":"Click-to-zoom image component with a medium.com-style lightbox that expands on click and closes on scroll.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"inference-sh","st":"indexed","pl":"https://cdn.21st.dev/inference-sh/zoomable-image/default/preview.1784362056572-286b6265-29c8-47e3-95c9-2d28e965da1e.png","pc":"inference-sh","tg":["gallery","image"]},{"id":"21st:info-mdshakeeb__image-cropper","t":"Image cropper","d":"A reusable React image uploader with cropping support for Next.js.\nSupports drag & drop, file validation, fixed size or aspect ratio cropping.\nIncludes live preview, error handling","k":"component","s":"21st","c":"media/gallery","g":"media","a":"info-mdshakeeb","st":"indexed","u":26,"pl":"https://cdn.21st.dev/info-mdshakeeb/image-cropper/default/preview.1756297395589.png","pc":"info-mdshakeeb","tg":["image","upload-download"]},{"id":"21st:info-mdshakeeb__image-uploader","t":"Image uploader","d":"This is a reusable ImageUploadField React component built with Next.js and Tailwind CSS. It allows users to upload and preview an image with optional error display, loading skeleto","k":"component","s":"21st","c":"media/gallery","g":"media","a":"info-mdshakeeb","st":"indexed","u":43,"pl":"https://cdn.21st.dev/info-mdshakeeb/image-uploader/default/preview.1748947450680.png","pc":"info-mdshakeeb","tg":["image","upload-download"]},{"id":"21st:info-mdshakeeb__preloader","t":"Preloader","d":"he Preloader React component creates an animated loading screen using Framer Motion and React hooks. It cycles through greeting words in various languages (\"Hello\", \"Bonjour\", etc.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"info-mdshakeeb","st":"indexed","u":190,"pl":"https://cdn.21st.dev/info-mdshakeeb/preloader/default/preview.1749015323255.png","pc":"info-mdshakeeb"},{"id":"21st:ingaedulobby-boop__features","t":"Features","d":"$39","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ingaedulobby-boop","st":"indexed","pl":"https://cdn.21st.dev/ingaedulobby-boop/features/default/preview.1774125592150.png","pc":"ingaedulobby-boop"},{"id":"21st:intentui__bar-chart","t":"Bar chart","d":"Here is Bar Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"intentui","st":"indexed","u":26,"pl":"https://cdn.21st.dev/larsen66/bar-chart/default/preview.1750536625471.png","pc":"intentui","tg":["card","data-visualization","dashboard"]},{"id":"21st:intentui__container","t":"Container","d":"A responsive layout wrapper that centers content with a max width and consistent horizontal padding, with constrained or full-width options.","k":"component","s":"21st","c":"other","g":"other","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/container/default/preview.1784735571158-273616b1-f1d3-47d6-b5bb-30111a7f88ec.png","pc":"intentui"},{"id":"21st:intentui__field","t":"Field","d":"Composable, accessible form field primitives — label, description, error message, fieldset, and legend — for building consistent form layouts.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/field/default/preview.1784763783724-c7511438-b16c-41ba-a15e-b2d08960a004.png","pc":"intentui"},{"id":"21st:intentui__file-trigger","t":"File trigger","d":"Here is FIle Trigger component ","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/file-trigger/default/preview.1750535979101.png","pc":"intentui","tg":["upload-download"]},{"id":"21st:intentui__file-trigger-13","t":"File trigger 13","d":"Here is File Trigger component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/file-trigger-13/default/preview.1756779282114.png","pc":"intentui","tg":["button","input","upload-download"]},{"id":"21st:intentui__heading","t":"Heading","d":"A typographic heading component that renders semantic h1–h4 elements with hierarchical font sizing for section titles.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/heading/default/preview.1784686741170-51aeddff-2fc8-4a92-8a4f-a65c1c6246fb.png","pc":"intentui"},{"id":"21st:intentui__keyboard","t":"Keyboard","d":"A keyboard shortcut label that renders inline hint keys (like ⌘K) next to menu items, commands, and actions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/keyboard/default/preview.1784753867817-6a69448f-f2b1-46e7-8299-f1d4fb6f2a46.png","pc":"intentui","tg":["list","menu"]},{"id":"21st:intentui__loader","t":"Loader","d":"Here is Loader component","k":"component","s":"21st","c":"status/loader","g":"status","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/loader/default/preview.1756737634704.png","pc":"intentui","tg":["spinner"]},{"id":"21st:intentui__pie-chart","t":"Pie chart","d":"Here is Pie Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pie-chart/default/preview.1750537391648.png","pc":"intentui","tg":["card","data-visualization"]},{"id":"21st:intentui__progress-bar","t":"Progress bar","d":"An accessible progress bar that tracks task completion, loading, or step-based processes with determinate and indeterminate states.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/progress-bar/default/preview.1784386432320-1cec7e91-0bb5-4f75-a801-5989339108c0.png","pc":"intentui","tg":["progress"]},{"id":"21st:intentui__progress-circle","t":"Progress circle","d":"A circular progress indicator for showing task completion, uploads, or loading states, with determinate and indeterminate modes.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/progress-circle/default/preview.1784407626558-b821ac9c-7072-472a-a2b1-6af8d7feb4d3.png","pc":"intentui","tg":["progress"]},{"id":"21st:intentui__radar-chart","t":"Radar chart","d":"Here is Radar Chart comopnent","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radar-chart/default/preview.1750537532242.png","pc":"intentui","tg":["data-visualization","dashboard"]},{"id":"21st:intentui__radial-chart","t":"Radial chart","d":"Here is Radial Chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radial-chart/default/preview.1750537553406.png","pc":"intentui","tg":["data-visualization"]},{"id":"21st:intentui__tag-group","t":"Tag group","d":"A collection of tags displayed together for categorizing, filtering, selecting, or removing multiple labels, built on React Aria Components.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/tag-group/default/preview.1785099175810-85e44fbf-b565-410e-84cd-c5101e9c7fc8.png","pc":"intentui"},{"id":"21st:intentui__toggle","t":"Toggle","d":"Here is Toggle component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle/default/preview.1750536159627.png","pc":"intentui"},{"id":"21st:intentui__toggle-group","t":"Toggle group","d":"Here is Toggle Group component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-group/default/preview.1750536184913.png","pc":"intentui","tg":["toggle"]},{"id":"21st:intentui__use-clipboard","t":"Use clipboard","d":"A React hook that copies text to the clipboard and tracks a temporary copied state for showing feedback.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"intentui","st":"indexed","pl":"https://cdn.21st.dev/intentui/use-clipboard/default/preview.1786683094843-1d9f0923-e6fd-4d7d-8a83-70c64742c3e2.png","pc":"intentui"},{"id":"21st:inv4rrow__mine","t":"Mine","d":"Animated (flicker) ASCII art in the Contour style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, c","k":"component","s":"21st","c":"media/player","g":"media","a":"inv4rrow","st":"indexed","pl":"https://cdn.21st.dev/inv4rrow/mine/default/preview.1784017282923.webp","pc":"inv4rrow","tg":["video"]},{"id":"21st:isaiahbjork__agent-plan","t":"Agent plan","d":"An animated task plan for your agent, including subtasks and assigned MCP servers.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/user_2tkbBPFWYn8YMjZNHwgIuP3yzvd/agent-plan/agent-plan/preview.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__ai-chat-voice-input","t":"Ai chat voice input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/ai-chat-voice-input/default/preview.1757810263929.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-card-options","t":"Animated card options","d":"An interactive animated card selector that uses Framer Motion to smoothly reveal a chosen option while fading out the others with randomized stagger effects. Perfect for onboarding","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"isaiahbjork","st":"indexed","u":17,"pl":"https://cdn.21st.dev/isaiahbjork/animated-card-options/default/preview.1785356960779-a10439df-9e3e-4ae6-8b14-03572ca6d150.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-dashboard-card","t":"Animated dashboard card","d":"Perfect for financial dashboards and employee reward systems, this animated bonuses and incentives card displays total compensation with sophisticated dot patterns and smooth entra","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"isaiahbjork","st":"indexed","u":109,"pl":"https://cdn.21st.dev/isaiahbjork/animated-dashboard-card/default/preview.1757772368173.png","pc":"isaiahbjork","tg":["card","dashboard"]},{"id":"21st:isaiahbjork__animated-download","t":"Animated download","d":"Animated Download with a sci-fi HUD (heads-up display) style theme. Completely customizable.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"isaiahbjork","st":"indexed","u":59,"pl":"https://cdn.21st.dev/user_2tkbBPFWYn8YMjZNHwgIuP3yzvd/animated-download/default/preview.1750804844125.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-hud-button","t":"Animated hud button","d":"An animated button perfect for HUD style displays or themes.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/animated-hud-button/default/preview.1748467241573.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-hud-button-two","t":"Animated hud button two","d":"An animated HUD button perfect for sci-fi, gaming, and military themes","k":"component","s":"21st","c":"actions/button","g":"actions","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/animated-hud-button-two/default/preview.1748490463127.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-hud-targeting-ui","t":"Animated hud targeting ui","d":"The HUD targeting UI is a sophisticated animated component featuring intricate SVG crosshairs with animated targeting patterns, center reticle system, and coordinated motion effect","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"isaiahbjork","st":"indexed","u":10,"pl":"https://cdn.21st.dev/isaiahbjork/animated-hud-targeting-ui/default/preview.1757879941494.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-project-cards","t":"Animated project cards","d":"This component renders a list of animated, expandable project cards with smooth framer-motion transitions, hover/tap effects, dynamic chevron toggling, and staggered child animatio","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"isaiahbjork","st":"indexed","u":84,"pl":"https://cdn.21st.dev/isaiahbjork/animated-project-cards/default/preview.1748667007142.png","pc":"isaiahbjork","tg":["accordion"]},{"id":"21st:isaiahbjork__animated-radial-chart","t":"Animated radial chart","d":"This is a dynamic radial progress chart component that animates a semi-circular arc to visually represent a percentage value, using smooth framer-motion transitions, SVG gradients,","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"isaiahbjork","st":"indexed","u":58,"pl":"https://cdn.21st.dev/isaiahbjork/animated-radial-chart/default/preview.1785450617109-fe785ee4-862d-4c6d-a546-fc79affa8aa6.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__animated-status-badge","t":"Animated status badge","d":"This interactive status card features an animated \"Running\" badge with smooth transitions and a delayed \"Completed\" confirmation, triggered by a single action button. Perfect for d","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"isaiahbjork","st":"indexed","u":41,"pl":"https://cdn.21st.dev/isaiahbjork/animated-status-badge/default/preview.1748618396627.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__audio-upload-card","t":"Audio upload card","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/audio-upload-card/default/preview.1758498328731.png","pc":"isaiahbjork","tg":["upload-download"]},{"id":"21st:isaiahbjork__card-status-list","t":"Card status list","d":"This component displays a dynamic list of status-driven cards with built-in syncing animations, hover-activated actions, and staggered motion transitions using framer-motion. It su","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"isaiahbjork","st":"indexed","u":65,"pl":"https://cdn.21st.dev/isaiahbjork/card-status-list/default/preview.1748719823525.png","pc":"isaiahbjork","tg":["list","onboarding","progress"]},{"id":"21st:isaiahbjork__coach-scheduling-card","t":"Coach scheduling card","d":"This is a fully interactive, motion-enhanced Coach Scheduling Card that allows users to view a coach’s weekly availability, select time slots, choose a location, and confirm bookin","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"isaiahbjork","st":"rated","u":82,"pl":"https://cdn.21st.dev/isaiahbjork/coach-scheduling-card/default/preview.1749006856310.png","pc":"isaiahbjork","tg":["calendar","profile"],"sc":22},{"id":"21st:isaiahbjork__contacts-table-with-modal","t":"Contacts table with modal","d":"The ContactsTable component is a production-ready data table that displays a list of contacts with advanced filtering, sorting, and selection capabilities. It features a grid-style","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"isaiahbjork","st":"indexed","u":108,"pl":"https://cdn.21st.dev/isaiahbjork/contacts-table-with-modal/default/preview.1760562026962.png","pc":"isaiahbjork","tg":["modal","pagination","table"]},{"id":"21st:isaiahbjork__crypto-swap","t":"Crypto swap","k":"component","s":"21st","c":"other","g":"other","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/crypto-swap/default/preview.1749871307721.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__dashboard-card-with-modal","t":"Dashboard card with modal","d":"A versatile dashboard card component featuring a modal overlay for data management, designed to display user information alongside interactive elements like copy-to-clipboard funct","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"isaiahbjork","st":"indexed","u":35,"pl":"https://cdn.21st.dev/isaiahbjork/dashboard-card-with-modal/default/preview.1757889693004.png","pc":"isaiahbjork","tg":["modal"]},{"id":"21st:isaiahbjork__event-countdown-card","t":"Event countdown card","d":"This Event Countdown Card is a fully animated promotional block designed to highlight and convert users for upcoming live events. It features a real-time countdown timer, urgency c","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"isaiahbjork","st":"rated","u":52,"pl":"https://cdn.21st.dev/isaiahbjork/event-countdown-card/default/preview.1749155511699.png","pc":"isaiahbjork","sc":21},{"id":"21st:isaiahbjork__financial-markets-table","t":"Financial markets table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/financial-markets-table/default/preview.1760558340760.png","pc":"isaiahbjork","tg":["table"]},{"id":"21st:isaiahbjork__glitchy-404","t":"Glitchy 404","d":"Renders a stylized animated “404” using motion-shaken SVG segments and a dynamic fuzzy canvas distortion effect for a glitchy, reactive visual. Perfect for error pages, HUD, sci-fi","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/glitchy-404/default/preview.1748564874574.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__glitchy-404-1","t":"Glitchy 404 1","d":"Renders a stylized animated “404” using motion-shaken SVG segments and a dynamic fuzzy canvas distortion effect for a glitchy, reactive visual. Perfect for error pages, HUD, sci-fi","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"isaiahbjork","st":"indexed","u":130,"pl":"https://cdn.21st.dev/isaiahbjork/glitchy-404-1/default/preview.1748967879727.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__gradient-selector-card","t":"Gradient selector card","d":"This is a highly interactive and animated gradient-based selector component that visualizes progress through milestone dots connected by gradient lines. Each option is represented ","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"isaiahbjork","st":"indexed","u":28,"pl":"https://cdn.21st.dev/isaiahbjork/gradient-selector-card/default/preview.1748755845713.png","pc":"isaiahbjork","tg":["progress","slider"]},{"id":"21st:isaiahbjork__gsap-draggable-rope","t":"Gsap draggable rope","k":"component","s":"21st","c":"media/icon","g":"media","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/gsap-draggable-rope/default/preview.1757812698310.png","pc":"isaiahbjork","tg":["icon"]},{"id":"21st:isaiahbjork__hover-detail-card","t":"Hover detail card","d":"This component is a highly interactive, animated detail card that reveals contextual actions and visual flair when hovered. It displays a grid of images, pills with status and meta","k":"component","s":"21st","c":"media/gallery","g":"media","a":"isaiahbjork","st":"indexed","u":37,"pl":"https://cdn.21st.dev/isaiahbjork/hover-detail-card/default/preview.1748878411408.png","pc":"isaiahbjork","tg":["gallery"]},{"id":"21st:isaiahbjork__hover-image-gallery","t":"Hover image gallery","d":"A responsive image viewer that changes the visible image based on the horizontal mouse position, and enhanced with a glassmorphic tooltip. Perfect for showcasing art collections, p","k":"component","s":"21st","c":"media/gallery","g":"media","a":"isaiahbjork","st":"indexed","u":28,"pl":"https://cdn.21st.dev/isaiahbjork/hover-image-gallery/default/preview.1748561399424.png","pc":"isaiahbjork","tg":["carousel","gallery"]},{"id":"21st:isaiahbjork__hud-area-chart","t":"Hud area chart","d":"An animated area chart/graph component with a custom frame, perfect for HUD displays. ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/hud-area-chart/default/preview.1748554065424.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__hud-area-chart-1","t":"Hud area chart 1","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/hud-area-chart-1/default/preview.1785442175445-e7e69e55-acad-4462-89b1-c5e0fa40854e.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__hud-background-frame","t":"Hud background frame","d":"Perfect for gaming, military, sci-fi style themes. Includes customizable chamfers, You can use background images, videos, use map components, etc.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/hud-background-frame/default/preview.1748489861501.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__hud-button","t":"Hud button","d":"This is a styled HUD-themed button showcase page that demonstrates two custom design systems (style1 and style2) with animated entrance effects using framer-motion. Style 1 feature","k":"component","s":"21st","c":"media/icon","g":"media","a":"isaiahbjork","st":"indexed","u":18,"pl":"https://cdn.21st.dev/isaiahbjork/hud-button/default/preview.1748972492448.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__hud-status","t":"Hud status","d":"An animated HUD status perfect for use as a custom toast or sonner.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/hud-status/default/preview.1748491176670.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__hud-status-1","t":"Hud status 1","d":"This is a themed status indicator component that renders a glowing SVG badge with animated text to signal system activity. It adapts dynamically to light/dark themes using color lo","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"isaiahbjork","st":"indexed","u":7,"pl":"https://cdn.21st.dev/isaiahbjork/hud-status-1/default/preview.1748975039404.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__leads-data-table","t":"Leads data table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/leads-data-table/default/preview.1757887831797.png","pc":"isaiahbjork","tg":["table"]},{"id":"21st:isaiahbjork__message-dock","t":"Message dock","d":"This is an animated, expandable message dock component that allows users to select a character and send contextual messages through a sleek, reactive UI. It supports emoji-based av","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"isaiahbjork","st":"indexed","u":436,"pl":"https://cdn.21st.dev/isaiahbjork/message-dock/default/preview.1748722456995.png","pc":"isaiahbjork","tg":["dock"]},{"id":"21st:isaiahbjork__onboarding-stages","t":"Onboarding stages","d":"This is a dynamic, themed onboarding checklist component that visually breaks down setup stages with animated progress indicators, completion badges, and a customizable action butt","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"isaiahbjork","st":"indexed","u":38,"pl":"https://cdn.21st.dev/isaiahbjork/onboarding-stages/default/preview.1748814854249.png","pc":"isaiahbjork","tg":["onboarding","progress"]},{"id":"21st:isaiahbjork__portfolio-gallery","t":"Portfolio gallery","d":"The PortfolioGallery component creates an engaging visual showcase of portfolio items with a 3D overlapping layout on desktop and a smooth horizontal marquee on mobile devices. It ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"isaiahbjork","st":"indexed","u":108,"pl":"https://cdn.21st.dev/isaiahbjork/portfolio-gallery/default/preview.1757974061317.png","pc":"isaiahbjork","tg":["gallery","image"]},{"id":"21st:isaiahbjork__prediction-market-card","t":"Prediction market card","d":"This is an interactive prediction market card component that lets users place live bets on time-sensitive sports outcomes, featuring a dual-view layout with a dynamic voting interf","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"isaiahbjork","st":"rated","u":32,"pl":"https://cdn.21st.dev/isaiahbjork/prediction-market-card/default/preview.1748909882371.png","pc":"isaiahbjork","tg":["modal"],"sc":20},{"id":"21st:isaiahbjork__product-reveal-card","t":"Product reveal card","d":"This Product Reveal Card is a premium interactive e-commerce component that blends high-quality visuals with micro-interactions to increase conversion. It supports live hover revea","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"isaiahbjork","st":"indexed","u":114,"pl":"https://cdn.21st.dev/isaiahbjork/product-reveal-card/default/preview.1749155801189.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__profile-card","t":"Profile card","d":"This is a high-fidelity Animated Profile Card component designed for user discovery or social interactions. It includes layered blur effects, animated reveal of bio/stats, motion-e","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"isaiahbjork","st":"indexed","u":133,"pl":"https://cdn.21st.dev/isaiahbjork/profile-card/default/preview.1749155017729.png","pc":"isaiahbjork","tg":["profile","stat"]},{"id":"21st:isaiahbjork__radial-countdown-timer","t":"Radial countdown timer","d":"This is an animated circular timer with gradient stroke, tick marks, and responsive play/pause/reset controls, built using framer-motion for smooth state transitions and microinter","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/radial-countdown-timer/default/preview.1748713405885.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__resizable-table","t":"Resizable table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/resizable-table/default/preview.1761070875272.png","pc":"isaiahbjork","tg":["dashboard","pagination","table"]},{"id":"21st:isaiahbjork__reveal-text","t":"Reveal text","d":"Animated text component that reveals each letter with a spring-in effect, hover-triggered image masking, and a timed overlay sweep for cinematic emphasis. Perfect for hero sections","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"isaiahbjork","st":"indexed","u":155,"pl":"https://cdn.21st.dev/isaiahbjork/reveal-text/default/preview.1748557810417.png","pc":"isaiahbjork","tg":["image","text"]},{"id":"21st:isaiahbjork__ruler-carousel","t":"Ruler carousel","d":"An animated, interactive, customizable ruler style carousel perfect for showing off logos of brands you have worked with.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"isaiahbjork","st":"indexed","u":76,"pl":"https://cdn.21st.dev/isaiahbjork/ruler-carousel/default/preview.1748548937290.png","pc":"isaiahbjork","tg":["carousel","clients","marquee"]},{"id":"21st:isaiahbjork__server-management-table","t":"Server management table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/server-management-table/default/preview.1757883904819.png","pc":"isaiahbjork","tg":["badge","dashboard","table"]},{"id":"21st:isaiahbjork__system-monitor","t":"System monitor","d":"A system monitor component, can be used for resources, AI agents, GPU, CPU, network, etc.","k":"component","s":"21st","c":"layout/dashboard","g":"layout","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/system-monitor/default/preview.1785356721983-8765a0d5-49f7-42bc-95a6-82e3d8f75888.png","pc":"isaiahbjork"},{"id":"21st:isaiahbjork__video-scroll-hero","t":"Video scroll hero","d":"The Video Scroll Hero component creates an engaging scroll-triggered video scaling effect where a video starts at a very small size (25% scale) and smoothly expands to full size as","k":"component","s":"21st","c":"media/player","g":"media","a":"isaiahbjork","st":"indexed","u":107,"pl":"https://cdn.21st.dev/isaiahbjork/video-scroll-hero/default/preview.1757969807899.png","pc":"isaiahbjork","tg":["scroll-area","video"]},{"id":"21st:isaiahbjork__video-upload-card","t":"Video upload card","d":"A video upload card component that provides an interactive drop zone for video files with a dramatic vending machine-style animation where the uploaded video appears to drop in fro","k":"component","s":"21st","c":"media/player","g":"media","a":"isaiahbjork","st":"indexed","u":44,"pl":"https://cdn.21st.dev/isaiahbjork/video-upload-card/default/preview.1758503972511.png","pc":"isaiahbjork","tg":["upload-download","video"]},{"id":"21st:isaiahbjork__voice-powered-orb","t":"Voice powered orb","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"isaiahbjork","st":"indexed","pl":"https://cdn.21st.dev/isaiahbjork/voice-powered-orb/default/preview.1757897718443.png","pc":"isaiahbjork","tg":["ai-chat"]},{"id":"21st:isaiahbjork__weekly-kpi-chart","t":"Weekly kpi chart","d":"This is an interactive day-based data chart that visualizes values (like revenue or activity) using minimalistic vertical lines and animated gradient highlights. It’s perfect for d","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"isaiahbjork","st":"indexed","u":20,"pl":"https://cdn.21st.dev/isaiahbjork/weekly-kpi-chart/default/preview.1785302842690-e6074757-0636-409b-9adc-0d1e603c7fd9.png","pc":"isaiahbjork"},{"id":"21st:ishamsu__curved-menu","t":"Curved menu","d":"A modern React navigation component with an animated curved sidebar, interactive menu items, and social media footer. with smooth animations","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ishamsu","st":"indexed","u":91,"pl":"https://cdn.21st.dev/ishamsu/curved-menu/default/preview.1747620613612.png","pc":"ishamsu","tg":["menu","link","sidebar"]},{"id":"21st:ishamsu__immersive-scroll-gallery","t":"Immersive scroll gallery","d":"A scroll-based image gallery that creates depth and dimension through dynamic scaling animations. As users scroll, images scale up at different rates while a text overlay fades in,","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ishamsu","st":"indexed","u":79,"pl":"https://cdn.21st.dev/ishamsu/immersive-scroll-gallery/default/preview.1747015107761.png","pc":"ishamsu","tg":["gallery"]},{"id":"21st:ishamsu__retro-testimonial","t":"Retro testimonial","d":"Retro Animated Testimonial is a sleek carousel of vintage-inspired cards, each featuring a user’s photo, name, role, and feedback over a stylish background. Perfect for adding trus","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ishamsu","st":"indexed","u":198,"pl":"https://cdn.21st.dev/ishamsu/retro-testimonial/default/preview.1747178884381.png","pc":"ishamsu","tg":["carousel","testimonials"]},{"id":"21st:ishamsu__scroll-cards","t":"Scroll cards","d":"A smooth gallery where cards stack on scroll, each showing an image, title, and description.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ishamsu","st":"indexed","u":201,"pl":"https://cdn.21st.dev/ishamsu/scroll-cards/default/preview.1747191676062.png","pc":"ishamsu","tg":["carousel","gallery","scroll-area"]},{"id":"21st:ishamsu__smooth-scroll-hero","t":"Smooth scroll hero","d":"A React component that creates a smooth-scrolling hero section with parallax background effects. Features responsive images for mobile and desktop, with customizable scroll animati","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ishamsu","st":"indexed","u":225,"pl":"https://cdn.21st.dev/ishamsu/smooth-scroll-hero/default/preview.1747142616016.png","pc":"ishamsu","tg":["hero","image"]},{"id":"21st:itaizeilig__tetris-loader","t":"Tetris loader","d":"A minimalist, high-contrast Tetris-inspired loading animation built with React and TypeScript. This component delivers a clean, pure black-and-white aesthetic with full dark mode s","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"itaizeilig","st":"indexed","u":187,"pl":"https://cdn.21st.dev/itaizeilig/tetris-loader/default/preview.1751903082913.png","pc":"itaizeilig","tg":["grid","spinner"]},{"id":"21st:itsankitverma__3d-card","t":"3d card","d":"This is a neat, clean and animated 3d card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/3d-card/default/preview.1760591568941.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__3d-testimonial-stack","t":"3d testimonial stack","d":"This is a simple 3D Testimonial stack component","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/3d-testimonial-stack/default/preview.1760762969107.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__404-not-found-page-component","t":"404 not found page component","d":"A modern, visually engaging 404 error page React component featuring a gradient “404” headline, soft blurred background blobs, and a prominent “Back to Home” button. Designed for c","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/404-not-found-page-component/default/preview.1750666552947.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__accordian","t":"Accordian","d":"This is a simple accordian","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/accordian/default/preview.1757576258717.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__ai-starter-page","t":"Ai starter page","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/ai-starter-page/default/preview.1755436539944.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__animated-button","t":"Animated button","d":"A dynamic button with smooth transitions that reacts to user interaction. Enhances UX by providing visual feedback on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/animated-button/default/preview.1751010370045.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__animated-menu-bar","t":"Animated menu bar","d":"A modern, responsive menu bar React component featuring animated icon expansion, active state highlighting, and smooth transitions. Supports both dark and light themes out of the b","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"itsankitverma","st":"indexed","u":33,"pl":"https://cdn.21st.dev/itsankitverma/animated-menu-bar/default/preview.1750674620046.png","pc":"itsankitverma","tg":["navigation-menu","tooltip"]},{"id":"21st:itsankitverma__biometric-authentication","t":"Biometric authentication","d":"This is a nice and clean Biometric Authentication component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/biometric-authentication/default/preview.1756842650957.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__budget-calculator","t":"Budget calculator","d":"This is a simple, neat. clean and responsive budget calculator app","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/budget-calculator/default/preview.1765290440298.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__card-stack-1","t":"Card stack 1","d":"This is a simple Card Stack Component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/card-stack-1/default/preview.1760507601404.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__circular-text","t":"Circular text","d":"This is a Circular Text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/circular-text/default/preview.1757773405963.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__credit-card-2","t":"Credit card 2","d":"This is a simple neat and cleanly made credit card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/credit-card-2/default/preview.1759412943656.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__dialog-box","t":"Dialog box","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/dialog-box/default/preview.1750676786492.png","pc":"itsankitverma","tg":["modal"]},{"id":"21st:itsankitverma__digital-number-animation","t":"Digital number animation","d":"Experience a vibrant, animated display of digital numbers with smooth transitions and modern color themes. This demo highlights various number formats—counters, percentages, curren","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/digital-number-animation/default/preview.1750676040604.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__error-404-page","t":"Error 404 page","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/error-404-page/default/preview.1750668842203.png","pc":"itsankitverma","tg":["empty-state"]},{"id":"21st:itsankitverma__file-uploader","t":"File uploader","d":"A clean, modern, and accessible file upload component for React/Next.js. Features drag-and-drop support, multi-file selection with badge-style display, single-file image preview, a","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/file-uploader/default/preview.1750671383226.png","pc":"itsankitverma","tg":["badge","progress","upload-download"]},{"id":"21st:itsankitverma__listing-card","t":"Listing card","d":"Unwind in luxury at this exclusive beachfront retreat with panoramic ocean views, private infinity pool, and direct beach access.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/listing-card/default/preview.1762163898584.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__magic-bento","t":"Magic bento","d":"This is a nice and clean Magic Bento Component!","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/magic-bento/default/preview.1757774784828.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__path-drawing","t":"Path drawing","d":"This is a simple path drawing component","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/path-drawing/default/preview.1759413291822.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__path-morphing","t":"Path morphing","d":"This is s simple reusable Path morphing component","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/path-morphing/default/preview.1757055469704.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__personal-landing","t":"Personal landing","d":"A modern, responsive landing component with avatar, headline, social links, and a live message input with validation and toast notifications. Ideal for personal portfolios or digit","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"itsankitverma","st":"indexed","u":49,"pl":"https://cdn.21st.dev/itsankitverma/personal-landing/default/preview.1751009849007.png","pc":"itsankitverma","tg":["hero","link","toast"]},{"id":"21st:itsankitverma__personal-website","t":"Personal website","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/personal-website/default/preview.1755236145382.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__pricing-page","t":"Pricing page","d":"This is a simple pricing page","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/pricing-page/default/preview.1761292180915.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__scroll-linked-spring-animation","t":"Scroll linked spring animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/scroll-linked-spring-animation/default/preview.1757397571041.png","pc":"itsankitverma","tg":["scroll-area","text"]},{"id":"21st:itsankitverma__shared-layout-animation","t":"Shared layout animation","d":"A reusable component for layout animation","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/shared-layout-animation/default/preview.1760510285411.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__shuffle-text","t":"Shuffle text","d":"This is a simple shuffle text component!","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/shuffle-text/default/preview.1757774053607.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__solar-system","t":"Solar system","k":"component","s":"21st","c":"other","g":"other","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/solar-system/default/preview.1755876852440.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__stack-card","t":"Stack card","d":"This is a simple Stack Card","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"itsankitverma","st":"indexed","u":70,"pl":"https://cdn.21st.dev/itsankitverma/stack-card/default/preview.1756982991350.png","pc":"itsankitverma","tg":["scroll-area"]},{"id":"21st:itsankitverma__subscription-screen","t":"Subscription screen","d":"This is a simple subscription screen","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/subscription-screen/default/preview.1761979974658.png","pc":"itsankitverma"},{"id":"21st:itsankitverma__toggle-switch","t":"Toggle switch","d":"This is a custom reusable switch component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"itsankitverma","st":"indexed","pl":"https://cdn.21st.dev/itsankitverma/toggle-switch/default/preview.1757131179969.png","pc":"itsankitverma"},{"id":"21st:itsmarkbryant__marquee-button","t":"Marquee button","d":"Infinite Marquee Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"itsmarkbryant","st":"indexed","pl":"https://cdn.21st.dev/itsmarkbryant/marquee-button/default/preview.1776195906146.png","pc":"itsmarkbryant"},{"id":"21st:ivlev.danich__avatar","t":"Avatar","d":"User avatar component with image support and automatic fallback to initials. Features gradient background, loading states, and multiple sizes.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/avatar/default/preview.1768845071841.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__button","t":"Button","d":"Versatile button component with 5 variants (solid, bordered, flat, light, ghost), 6 colors, loading state, and icon support. Features smooth animations and full accessibility.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/button/default/preview.1768845736017.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__card","t":"Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/card/default/preview.1768846139695.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__cv-basic-info","t":"Cv basic info","d":"Hero section for CV/Resume with photo, name, position, and approval badge. Professional layout with responsive design.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/cv-basic-info/default/preview.1768846648932.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__cv-header","t":"Cv header","d":"Header component for CV/Resume pages with logo support and customizable background color. Clean and professional design.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/cv-header/default/preview.1768847235567.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__cv-skills-section","t":"Cv skills section","d":"Skills section for CV/Resume with responsive grid layout, star ratings, and info tooltip. Displays multiple skills in a clean, organized format.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/cv-skills-section/default/preview.1768847581306.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__icon-wrapper","t":"Icon wrapper","d":"Flexible icon wrapper component for SVGs and icon components. Supports size presets and custom styling. Works with any icon library.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ivlev.danich","st":"rated","pl":"https://cdn.21st.dev/ivlev.danich/icon-wrapper/default/preview.1768847852470.png","pc":"ivlev.danich","sc":17},{"id":"21st:ivlev.danich__input","t":"Input","d":"Form input component with label, description, error state, and support for start/end icons. Fully accessible with proper ARIA attributes.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/input/default/preview.1768848107257.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__profile-card","t":"Profile card","d":"User profile card displaying avatar, name, contact information (email, phone), location, and skills. Supports click interactions and skill limits.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/profile-card/default/preview.1768848889493.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__review-card","t":"Review card","d":"Testimonial and review card component with author info, avatar, star rating, and quote styling. Perfect for displaying customer feedback and testimonials.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/review-card/default/preview.1768849422476.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__skill-card","t":"Skill card","d":"Compact card component for displaying skills with star rating. Supports read-only and interactive modes. Perfect for portfolios and CV sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/skill-card/default/preview.1768849988997.png","pc":"ivlev.danich"},{"id":"21st:ivlev.danich__star-rating","t":"Star rating","d":"Interactive star rating component with hover effects, keyboard navigation, and customizable colors. Supports read-only display mode and controlled/uncontrolled usage.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ivlev.danich","st":"indexed","pl":"https://cdn.21st.dev/ivlev.danich/star-rating/default/preview.1768844584377.png","pc":"ivlev.danich"},{"id":"21st:j1zuzz__empty","t":"Empty","d":"An empty state component that displays messages when no content is available.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"j1zuzz","st":"indexed","u":111,"pl":"https://cdn.21st.dev/j1zuzz/empty/default/preview.1761762786797.png","pc":"j1zuzz","tg":["empty-state","icon"]},{"id":"21st:j1zuzz__welcome","t":"Welcome","d":"A confirmation screen component with confetti animation, typically used after account creation.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"j1zuzz","st":"indexed","pl":"https://cdn.21st.dev/j1zuzz/welcome/default/preview.1754373634429.png","pc":"j1zuzz","tg":["empty-state","onboarding"]},{"id":"21st:jabezllave__note-app","t":"Note app","d":"Note App UI","k":"component","s":"21st","c":"other","g":"other","a":"jabezllave","st":"rated","pl":"https://cdn.21st.dev/jabezllave/note-app/default/preview.1774638469311.png","pc":"jabezllave","sc":23},{"id":"21st:jacob.hurvitz__messageloading","t":"Messageloading","d":"JumpGPT animated three-dot thinking indicator (themeable via currentColor)","k":"component","s":"21st","c":"status/loader","g":"status","a":"jacob.hurvitz","st":"indexed","pl":"https://21st.dev/@jacob.hurvitz/components/messageloading","pc":"jacob.hurvitz"},{"id":"21st:jacobharris0505__mission-control","t":"Mission control","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jacobharris0505","st":"indexed","pl":"https://cdn.21st.dev/jacobharris0505/mission-control/default/preview.1786525787558-d82d1ffa-d644-44ec-9d6b-ddeb6636088a.png","pc":"jacobharris0505"},{"id":"21st:jahed__ai-chat-input","t":"Ai chat input","d":"A modular, single-file React input bar designed for generative AI interfaces and agentic chat workloads, built on the shadcn/ui and Tailwind CSS architecture. Features dynamic spri","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jahed","st":"indexed","pl":"https://cdn.21st.dev/easemize/ai-chat-input/default/preview.1783271974588.png","pc":"jahed"},{"id":"21st:jahed__sign-in","t":"Sign in","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"jahed","st":"indexed","pl":"https://cdn.21st.dev/easemize/sign-in/default/preview.1750759166859.png","pc":"jahed"},{"id":"21st:jahirulislamrayhan07__animated-404-page","t":"Animated 404 page","d":"A stunning dark-themed 404 page featuring an interactive fan and a framer-motion ripple effect.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"jahirulislamrayhan07","st":"indexed","pl":"https://cdn.21st.dev/jahirulislamrayhan07/animated-404-page/default/preview.1781840215008.png","pc":"jahirulislamrayhan07","tg":["empty-state"]},{"id":"21st:jahirulislamrayhan07__retro-space-shooter-git-hub-calendar","t":"Retro space shooter git hub calendar","d":"An interactive GitHub contribution calendar that transforms into a playable retro space shooter game. Features smooth canvas animations, spaceship controls, particle explosions, an","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"jahirulislamrayhan07","st":"indexed","pl":"https://cdn.21st.dev/jahirulislamrayhan07/retro-space-shooter-git-hub-calendar/default/preview.1785313518440-5d6f9bd0-bd3c-41ff-95f7-d37b6cad60ae.png","pc":"jahirulislamrayhan07"},{"id":"21st:jaivardhandalal__toast-notification","t":"Toast notification","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"jaivardhandalal","st":"indexed","pl":"https://cdn.21st.dev/jaivardhandalal/toast-notification/default/preview.1775789270765.png","pc":"jaivardhandalal"},{"id":"21st:jakapatb__7-segment-number","t":"7 segment number","d":"7 segment number","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"jakapatb","st":"indexed","u":23,"pl":"https://cdn.21st.dev/user_2x7kMlHfq3teBhhFd9FAXtjXXcZ/7-segment-number/7-segment-number/preview.png","pc":"jakapatb","tg":["number"]},{"id":"21st:jakobhoeg__button","t":"Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/button.png","pc":"jakobhoeg"},{"id":"21st:jakobhoeg__chat-bubble","t":"Chat bubble","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/chat-bubble.png","pc":"jakobhoeg","tg":["ai-chat","avatar"]},{"id":"21st:jakobhoeg__chat-input","t":"Chat input","d":"The ChatInput component (chat-input.tsx) is used as an text-area with predefined styling to fit well with the other components.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/chat-input.png","pc":"jakobhoeg"},{"id":"21st:jakobhoeg__chat-message-list","t":"Chat message list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/chat-message-list.png","pc":"jakobhoeg"},{"id":"21st:jakobhoeg__expandable-chat","t":"Expandable chat","k":"component","s":"21st","c":"data-display/chat-thread","g":"data-display","a":"jakobhoeg","st":"rated","pl":"https://cdn.21st.dev/user_jakobhoeg/expandable-chat.png","pc":"jakobhoeg","sc":22},{"id":"21st:jakobhoeg__message-loading","t":"Message loading","d":"Message Loading animation","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/message-loading.png","pc":"jakobhoeg","tg":["ai-chat"]},{"id":"21st:jakobhoeg__use-auto-scroll","t":"Use auto scroll","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"jakobhoeg","st":"indexed","pl":"https://cdn.21st.dev/user_jakobhoeg/use-auto-scroll.png","pc":"jakobhoeg"},{"id":"21st:jashshah854-a11y__bread-and-butter","t":"Bread and butter","d":"Animated (pulse) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a pixel look. A drop-in, zero-dependency React compone","k":"component","s":"21st","c":"media/player","g":"media","a":"jashshah854-a11y","st":"indexed","pl":"https://cdn.21st.dev/jashshah854-a11y/bread-and-butter/default/preview.1783799464202.webp","pc":"jashshah854-a11y","tg":["video"]},{"id":"21st:jatin-yadav05__3d-folder","t":"3d folder","d":"A beautifully crafted folder with back panel, tab, front panel, and a subtle shine effect that opens smoothly on hover","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"jatin-yadav05","st":"indexed","u":285,"pl":"https://cdn.21st.dev/jatin-yadav05/3d-folder/default/preview.1765386950541.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__analytics-bento","t":"Analytics bento","d":"Polished budget bento card with smooth interactions.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"jatin-yadav05","st":"rated","u":97,"pl":"https://cdn.21st.dev/jatin-yadav05/analytics-bento/default/preview.1765553239650.png","pc":"jatin-yadav05","tg":["tooltip"],"sc":24},{"id":"21st:jatin-yadav05__animated-ai-chat","t":"Animated ai chat","d":"An AI chat interface with glass-morphism design and smart command features. Built with React and Framer Motion for smooth animations and professional interactions.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jatin-yadav05","st":"rated","pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/animated-ai-chat/default/preview.1746632407641.png","pc":"jatin-yadav05","tg":["ai-chat","input"],"sc":18},{"id":"21st:jatin-yadav05__animated-button","t":"Animated button","d":"A 3D animated subscribe button with perspective transforms, and glowing bottom border on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/animated-button/default/preview.1752985688928.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__animated-geometric-card","t":"Animated geometric card","d":"Interactive geometric card component with animated shapes, floating particles, and customizable color gradients.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","u":20,"pl":"https://cdn.21st.dev/jatin-yadav05/animated-geometric-card/default/preview.1754583468463.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__animated-radio","t":"Animated radio","d":"An animated radio button group with a smooth sliding purple glider that moves vertically to highlight the selected option.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"jatin-yadav05","st":"rated","u":49,"pl":"https://cdn.21st.dev/jatin-yadav05/animated-radio/default/preview.1753188477987.png","pc":"jatin-yadav05","tg":["radio-group"],"sc":18},{"id":"21st:jatin-yadav05__anime-navbar","t":"Anime navbar","d":"The AnimeNavBar is a responsive, animated navigation bar built with React, Framer Motion, and Tailwind CSS. It supports hover effects, active state highlighting, and animations for","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"jatin-yadav05","st":"indexed","u":592,"pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/anime-navbar.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__audio-chat","t":"Audio chat","d":"Polished voice chat component with smooth expand/collapse animations.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/audio-chat/default/preview.1765963820462.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__battery-indicator","t":"Battery indicator","d":"Interactive battery component with themes and animations","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/battery-indicator/default/preview.1754635651176.png","pc":"jatin-yadav05","tg":["slider"]},{"id":"21st:jatin-yadav05__book-a-call-button","t":"Book a call button","d":"A polished call-to-action button featuring smooth Framer Motion spring animations where call icons transition vertically on hover for an engaging user experience.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/book-a-call-button/default/preview.1755791134942.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__bouncy-toggle","t":"Bouncy toggle","d":"Micro interaction clean toggle switch with bouncy effect and press effect.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"jatin-yadav05","st":"indexed","u":51,"pl":"https://cdn.21st.dev/jatin-yadav05/bouncy-toggle/default/preview.1765300724840.png","pc":"jatin-yadav05","tg":["toggle"]},{"id":"21st:jatin-yadav05__box-loader","t":"Box loader","d":"A sleek 3D animated loader featuring rotating cubes.","k":"component","s":"21st","c":"status/loader","g":"status","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/box-loader/default/preview.1753203523464.png","pc":"jatin-yadav05","tg":["spinner"]},{"id":"21st:jatin-yadav05__clean-profile-card","t":"Clean profile card","d":"A very clean and polished profile card for portfolios","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/clean-profile-card/default/preview.1767288661121.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__clean-testimonial","t":"Clean testimonial","d":"Clean testimonial component with unique features.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jatin-yadav05","st":"indexed","u":131,"pl":"https://cdn.21st.dev/jatin-yadav05/clean-testimonial/default/preview.1765647490858.png","pc":"jatin-yadav05","tg":["profile","testimonials"]},{"id":"21st:jatin-yadav05__click-trigger","t":"Click trigger","d":"An interactive card with click animation effects. When clicked, it displays animated rectangles forming a plus shape that slide outward from the click position and fade way.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/click-trigger/default/preview.1758215817363.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__click-trigger-particles","t":"Click trigger particles","d":"An interactive particle burst effect when clicked. Generates multiple animated particles that radiate outward from the click position with customizable animations and automatic cle","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/click-trigger-particles/default/preview.1758216199748.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__color-swatch","t":"Color swatch","d":"A polished color palette component with smooth hover expansion animations and a copy-to-clipboard feature.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/color-swatch/default/preview.1766170440081.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__component-collection","t":"Component collection","d":"A clean and polished curated collections of components.","k":"component","s":"21st","c":"other","g":"other","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/component-collection/default/preview.1766428321386.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__copy-button","t":"Copy button","d":"Click to copy component - a minimal copy-to-clipboard interaction for portfolios","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/copy-button/default/preview.1765186291628.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__copy-email-button","t":"Copy email button","d":"A minimal, one-click contact component for portfolios. Hover reveals a subtle arrow hint, and clicking triggers a smooth flip animation.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/copy-email-button/default/preview.1765187012507.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__curved-loop","t":"Curved loop","d":"A draggable, animated curved text component that loops infinitely along a customizable SVG path.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/curved-loop/default/preview.1753981003611.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__curved-text-ticker","t":"Curved text ticker","d":"A dynamic background component featuring rotating curved text rings with smooth animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/curved-text-ticker/default/preview.1753981981459.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__dark-gradient-background","t":"Dark gradient background","d":"A sophisticated dark-to-cyan gradient with noise texture and geometric overlays","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jatin-yadav05","st":"indexed","u":12,"pl":"https://cdn.21st.dev/jatin-yadav05/dark-gradient-background/default/preview.1755188759144.png","pc":"jatin-yadav05","tg":["background","grid","hero"]},{"id":"21st:jatin-yadav05__design-testimonial","t":"Design testimonial","d":"A completely unique asymmetric layout testimonial. Features include a vertical left column with rotated \"Testimonials\" text and an animated progress bar.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"jatin-yadav05","st":"indexed","u":271,"pl":"https://cdn.21st.dev/jatin-yadav05/design-testimonial/default/preview.1766074338821.png","pc":"jatin-yadav05","tg":["carousel","marquee","progress","testimonials"]},{"id":"21st:jatin-yadav05__editorial-testimonial","t":"Editorial testimonial","d":"An editorial-style testimonial with a bold typographic.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jatin-yadav05","st":"indexed","u":55,"pl":"https://cdn.21st.dev/jatin-yadav05/editorial-testimonial/default/preview.1765306115293.png","pc":"jatin-yadav05","tg":["carousel","testimonials"]},{"id":"21st:jatin-yadav05__elegant-dark-pattern","t":"Elegant dark pattern","d":"Sophisticated gradients meet subtle textures for modern interfaces.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jatin-yadav05","st":"indexed","u":26,"pl":"https://cdn.21st.dev/jatin-yadav05/elegant-dark-pattern/default/preview.1755191590435.png","pc":"jatin-yadav05","tg":["background"]},{"id":"21st:jatin-yadav05__emoji-rating","t":"Emoji rating","d":"A minimal emoji rating component with smooth blur/scale text transitions and grayscale-to-color hover effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":63,"pl":"https://cdn.21st.dev/jatin-yadav05/emoji-rating/default/preview.1765275491566.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__etheral-shadow","t":"Etheral shadow","d":"Creates an animated, ethereal shadow effect with customizable noise, color, and animation properties, featuring a centered text overlay with responsive typography.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"jatin-yadav05","st":"indexed","u":2330,"pl":"https://cdn.21st.dev/jatin-yadav05/etheral-shadow/default/preview.1748327080862.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__expand-map","t":"Expand map","d":"Click on this component to get a clean map street view with some details.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"jatin-yadav05","st":"indexed","u":232,"pl":"https://cdn.21st.dev/jatin-yadav05/expand-map/default/preview.1765303872044.png","pc":"jatin-yadav05","tg":["map"]},{"id":"21st:jatin-yadav05__feature-spotlight","t":"Feature spotlight","d":"This component is a feature spotlight card where you can showcase in any landing page.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"jatin-yadav05","st":"indexed","u":79,"pl":"https://cdn.21st.dev/jatin-yadav05/feature-spotlight/default/preview.1765211823237.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__file-tree","t":"File tree","d":"A minimal, dark-themed file tree component with smooth expand/collapse animations, color-coded file icons, and subtle hover glow effects.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"jatin-yadav05","st":"rated","pl":"https://cdn.21st.dev/jatin-yadav05/file-tree/default/preview.1765212257192.png","pc":"jatin-yadav05","tg":["file-tree"],"sc":17},{"id":"21st:jatin-yadav05__flip-hover","t":"Flip hover","k":"component","s":"21st","c":"media/gallery","g":"media","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/flip-hover/default/preview.1758213434011.png","pc":"jatin-yadav05","tg":["image"]},{"id":"21st:jatin-yadav05__fluid-canvas","t":"Fluid canvas","d":"A visually enhanced interactive fluid simulation React component rendered on a canvas with mouse-driven effects.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"jatin-yadav05","st":"indexed","u":14,"pl":"https://cdn.21st.dev/jatin-yadav05/fluid-canvas/default/preview.1748752552756.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__github-inline-diff","t":"Github inline diff","d":"Hover a diff line to reveal “add comment,” opening a compact inline thread with Open/Resolved chips and a 2‑row editor—fully keyboard-accessible.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"jatin-yadav05","st":"indexed","u":53,"pl":"https://cdn.21st.dev/jatin-yadav05/github-inline-diff/default/preview.1756750346716.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__glowing-card","t":"Glowing card","d":"Step into the realm of innovation with our glowing-card component. A blend of sleek design and captivating visuals, it’s built to make your content shine and stand out like never b","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/glowing-card.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__gradient-card","t":"Gradient card","d":"A premium 3D interactive card with smooth motion animations, and a sophisticated purple-blue glow that creates an immersive, futuristic UI experience.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","u":250,"pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/gradient-card/gradient-card/preview.png","pc":"jatin-yadav05","tg":["card"]},{"id":"21st:jatin-yadav05__grid-loading","t":"Grid loading","d":"A compact animated grid loader with 9 pulsing squares that adapts to light and dark themes.","k":"component","s":"21st","c":"status/loader","g":"status","a":"jatin-yadav05","st":"indexed","u":10,"pl":"https://cdn.21st.dev/jatin-yadav05/grid-loading/default/preview.1753634156831.png","pc":"jatin-yadav05","tg":["spinner"]},{"id":"21st:jatin-yadav05__hover-cards","t":"Hover cards","d":"This is a hover animation which looks very cool on hover and can be used everywhere.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/hover-cards/default/preview.1761905591875.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__icon-3d-hover","t":"Icon 3d hover","d":"A 3D animated card component with a rotating cube icon and smooth text fill effect that triggers on hover.","k":"component","s":"21st","c":"media/icon","g":"media","a":"jatin-yadav05","st":"indexed","u":85,"pl":"https://cdn.21st.dev/jatin-yadav05/icon-3d-hover/default/preview.1748779083397.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__image-reveal","t":"Image reveal","d":"A responsive image hover component that creates a smooth circular reveal effect with a blurred overlay mask that follows the mouse cursor.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"jatin-yadav05","st":"indexed","u":24,"pl":"https://cdn.21st.dev/jatin-yadav05/image-reveal/default/preview.1748767438767.png","pc":"jatin-yadav05","tg":["cursor"]},{"id":"21st:jatin-yadav05__interactive-accordion","t":"Interactive accordion","d":"A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"jatin-yadav05","st":"indexed","u":97,"pl":"https://cdn.21st.dev/jatin-yadav05/interactive-accordion/default/preview.1765212751015.png","pc":"jatin-yadav05","tg":["accordion","faq"]},{"id":"21st:jatin-yadav05__interactive-button","t":"Interactive button","d":"A cosmic-themed interactive button with dynamic mouse-tracking animations and smooth hover effects.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/interactive-button/default/preview.1747568964487.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__interactive-string","t":"Interactive string","d":"An interactive canvas of glowing strings that respond to mouse movement with elegant animations.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/interactive-string/default/preview.1749492690009.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__keyboard-keys","t":"Keyboard keys","d":"Interactive Keyboard Keys which animates on clicking or pressing the key on keyboard.","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/keyboard-keys/default/preview.1765201335497.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__leather-button","t":"Leather button","d":"A premium leather-textured button component with authentic stitching effects, smooth hover animations.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/leather-button/default/preview.1753286890557.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__lets-work-section","t":"Lets work section","d":"A minimal, standout \"Let's Work Together\" component with a hover effect and smooth micro-interactions","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"jatin-yadav05","st":"indexed","u":246,"pl":"https://cdn.21st.dev/jatin-yadav05/lets-work-section/default/preview.1765913083128.png","pc":"jatin-yadav05","tg":["cta"]},{"id":"21st:jatin-yadav05__location-tag","t":"Location tag","d":"A compact, interactive location indicator with a live pulsing dot and smooth text-swap animation. Hover reveals your current local time.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"jatin-yadav05","st":"indexed","u":140,"pl":"https://cdn.21st.dev/jatin-yadav05/location-tag/default/preview.1765188430491.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__magic-text-reveal","t":"Magic text reveal","d":"A responsive particle-based text reveal component that disperses text into animated particles and reforms on hover with smooth transitions.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":100,"pl":"https://cdn.21st.dev/jatin-yadav05/magic-text-reveal/default/preview.1748773392614.png","pc":"jatin-yadav05","tg":["text"]},{"id":"21st:jatin-yadav05__marketing-badges","t":"Marketing badges","d":"Beautiful 3D marketing badges with smooth interactions.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jatin-yadav05","st":"indexed","u":72,"pl":"https://cdn.21st.dev/jatin-yadav05/marketing-badges/default/preview.1765705786013.png","pc":"jatin-yadav05","tg":["badge"]},{"id":"21st:jatin-yadav05__mini-chart","t":"Mini chart","d":"This is a mini chart which shows real time analytics.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"jatin-yadav05","st":"indexed","u":130,"pl":"https://cdn.21st.dev/jatin-yadav05/mini-chart/default/preview.1765288344961.png","pc":"jatin-yadav05","tg":["tooltip"]},{"id":"21st:jatin-yadav05__minimal-dock","t":"Minimal dock","d":"This component renders a modern, animated dock with icon tooltips and a reflection effect, inspired by macOS.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"jatin-yadav05","st":"rated","u":91,"pl":"https://cdn.21st.dev/jatin-yadav05/minimal-dock/default/preview.1750949716211.png","pc":"jatin-yadav05","tg":["dock","navigation-menu","tooltip"],"sc":16},{"id":"21st:jatin-yadav05__minimal-testimonial","t":"Minimal testimonial","d":"A clean, minimal testimonial with just the essentials - a beautifully typeset quote with smooth fade/blur transitions.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jatin-yadav05","st":"indexed","u":102,"pl":"https://cdn.21st.dev/jatin-yadav05/minimal-testimonial/default/preview.1765307707624.png","pc":"jatin-yadav05","tg":["testimonials"]},{"id":"21st:jatin-yadav05__morph-loading","t":"Morph loading","d":"A modern animated loading component with gradient orbs that rotate in a smooth morphing pattern.","k":"component","s":"21st","c":"status/loader","g":"status","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/morph-loading/default/preview.1753633018239.png","pc":"jatin-yadav05","tg":["spinner"]},{"id":"21st:jatin-yadav05__morphing-cursor","t":"Morphing cursor","d":"An exceptional cursor-follow component with smooth morphing, color inversion, and magnetic effects.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/morphing-cursor/default/preview.1765368431094.png","pc":"jatin-yadav05","tg":["cursor"]},{"id":"21st:jatin-yadav05__morphing-spinner","t":"Morphing spinner","d":"A minimal and unique loading spinner that smoothly transitions between geometric shapes.","k":"component","s":"21st","c":"status/loader","g":"status","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/morphing-spinner/default/preview.1759159924719.png","pc":"jatin-yadav05","tg":["spinner"]},{"id":"21st:jatin-yadav05__multistep-form","t":"Multistep form","d":"An exceptional multi-step form component that designers will love!","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"jatin-yadav05","st":"rated","u":83,"pl":"https://cdn.21st.dev/jatin-yadav05/multistep-form/default/preview.1765555104328.png","pc":"jatin-yadav05","tg":["progress","steps"],"sc":23},{"id":"21st:jatin-yadav05__notch-nav","t":"Notch nav","d":"A center-aligned, fit‑content navigation bar with a softly rounded, smoothly animated notch indicator and full keyboard accessibility that stands out without visual noise.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"jatin-yadav05","st":"indexed","u":22,"pl":"https://cdn.21st.dev/jatin-yadav05/notch-nav/default/preview.1759158845068.png","pc":"jatin-yadav05","tg":["navigation-menu"]},{"id":"21st:jatin-yadav05__old-television-shader","t":"Old television shader","d":"An interactive shader with black and white gradient waves, mouse-responsive animations, and canvas noise texture overlay for modern visual effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/old-television-shader/default/preview.1757953843867.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__orbital-clock","t":"Orbital clock","d":"This component shows the time in form of clock and on hover shows day and date.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/orbital-clock/default/preview.1765190555832.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__pixel-trail","t":"Pixel trail","d":"A beautiful smooth cursor pixel trail effect.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"jatin-yadav05","st":"indexed","u":41,"pl":"https://cdn.21st.dev/jatin-yadav05/pixel-trail/default/preview.1765709044398.png","pc":"jatin-yadav05","tg":["cursor"]},{"id":"21st:jatin-yadav05__potfolio-text","t":"Potfolio text","d":"Elegant animated text component with the rotating diamond visual replacing the \"o\" character.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":48,"pl":"https://cdn.21st.dev/jatin-yadav05/potfolio-text/default/preview.1765558650871.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__premium-verification-widget","t":"Premium verification widget","d":"A sleek, animated verification component featuring a rotating gradient ring, smooth state transitions, and polished micro-interactions.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","u":4,"pl":"https://cdn.21st.dev/jatin-yadav05/premium-verification-widget/default/preview.1753350106605.png","pc":"jatin-yadav05","tg":["onboarding"]},{"id":"21st:jatin-yadav05__pricing-component","t":"Pricing component","d":"A modern three-tier pricing table with monthly/annual toggle, dark/light mode support, and glass morphism design effects.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"jatin-yadav05","st":"indexed","u":102,"pl":"https://cdn.21st.dev/jatin-yadav05/pricing-component/default/preview.1753625549000.png","pc":"jatin-yadav05","tg":["pricing-section","table"]},{"id":"21st:jatin-yadav05__progress-bar","t":"Progress bar","d":"A beautiful segmented progress bar with rounded rectangular segments - filled segments in a terracotta/coral color and unfilled ones in dark gray.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"jatin-yadav05","st":"indexed","u":47,"pl":"https://cdn.21st.dev/jatin-yadav05/progress-bar/default/preview.1765554123731.png","pc":"jatin-yadav05","tg":["progress","slider"]},{"id":"21st:jatin-yadav05__project-showcase","t":"Project showcase","d":"A minimal, list-based portfolio section with a cursor-following image preview. On hover, a smooth floating image appears and tracks your mouse using lerp-based animation.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"jatin-yadav05","st":"indexed","u":295,"pl":"https://cdn.21st.dev/jatin-yadav05/project-showcase/default/preview.1765262638096.png","pc":"jatin-yadav05","tg":["cursor","image","list"]},{"id":"21st:jatin-yadav05__radial-orbital-timeline","t":"Radial orbital timeline","d":"A dynamic orbital visualization component that displays nodes in a circular pattern around a central point. Each node represents a data point with title, status, and energy level.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/radial-orbital-timeline/default/preview.1745917317806.png","pc":"jatin-yadav05","tg":["data-visualization","timeline"]},{"id":"21st:jatin-yadav05__reaction-chip","t":"Reaction chip","d":"A tiny hover-revealed reaction chip for messages that lets users toggle a single emoji reaction with smooth animations.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jatin-yadav05","st":"indexed","u":19,"pl":"https://cdn.21st.dev/jatin-yadav05/reaction-chip/default/preview.1756724150962.png","pc":"jatin-yadav05","tg":["chip"]},{"id":"21st:jatin-yadav05__reveal-text","t":"Reveal text","d":"This component displays animated, theme-adaptive text with a ripple reveal effect on hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":28,"pl":"https://cdn.21st.dev/jatin-yadav05/reveal-text/default/preview.1750830596573.png","pc":"jatin-yadav05","tg":["text"]},{"id":"21st:jatin-yadav05__scale-letter","t":"Scale letter","d":"Component displays interactive text where individual letters animate with 3D effects, scaling","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":14,"pl":"https://cdn.21st.dev/jatin-yadav05/scale-letter/default/preview.1751219152011.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__shimmer-bg-text","t":"Shimmer bg text","d":" A large \"Hover Me\" text with a shimmering gradient effect on hover","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":11,"pl":"https://cdn.21st.dev/jatin-yadav05/shimmer-bg-text/default/preview.1751216955667.png","pc":"jatin-yadav05","tg":["text"]},{"id":"21st:jatin-yadav05__showcase-card-1","t":"Showcase card 1","d":"An elegant Bali Island showcase card with smooth animations, interactive elements, and a gradient text header that presents travel information in a visually appealing dark-themed i","k":"component","s":"21st","c":"media/gallery","g":"media","a":"jatin-yadav05","st":"indexed","u":57,"pl":"https://cdn.21st.dev/jatin-yadav05/showcase-card/default/preview.1747143097700.png","pc":"jatin-yadav05","tg":["image"]},{"id":"21st:jatin-yadav05__sign-in-card-2","t":"Sign in card 2","d":"A sophisticated sign-in form with subtle animated light beams traveling along the borders, creating an elegant, high-tech aesthetic with minimalist design elements.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"jatin-yadav05","st":"indexed","u":636,"pl":"https://cdn.21st.dev/jatin-yadav05/sign-in-card/default/preview.1747033488284.png","pc":"jatin-yadav05","tg":["border","sign-in"]},{"id":"21st:jatin-yadav05__skills-showcase","t":"Skills showcase","d":"This component can be used in portfolio to showcase the skills.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"jatin-yadav05","st":"indexed","u":43,"pl":"https://cdn.21st.dev/jatin-yadav05/skills-showcase/default/preview.1765261140643.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__sleek-navbar","t":"Sleek navbar","d":"A sleek animated navigation menu bar with hover effects and dynamic gradient highlights using Framer Motion.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/sleek-navbar/default/preview.1752163860881.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__smoke-card","t":"Smoke card","d":"Brings interactive smoke effects to life. As your mouse moves, ethereal particles dance and swirl, adding a touch of magic to any web interface.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"jatin-yadav05","st":"indexed","u":27,"pl":"https://cdn.21st.dev/user_2ra80vx0iKMyQWJ5AESmNfFbCHD/smoke-card/default/preview.1738001761942.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__social-icons","t":"Social icons","d":"This is a social icons navigation like icons hover with a tooltip.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"jatin-yadav05","st":"indexed","u":97,"pl":"https://cdn.21st.dev/jatin-yadav05/social-icons/default/preview.1765198473491.png","pc":"jatin-yadav05","tg":["dock","link","tooltip"]},{"id":"21st:jatin-yadav05__split-testimonial","t":"Split testimonial","d":"This is a testimonial component which changes text and image with next testimonial.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jatin-yadav05","st":"indexed","u":58,"pl":"https://cdn.21st.dev/jatin-yadav05/split-testimonial/default/preview.1765305663855.png","pc":"jatin-yadav05","tg":["avatar","testimonials"]},{"id":"21st:jatin-yadav05__subtle-button","t":"Subtle button","d":"An animated, glowing \"Get Started\" button with interactive hover and press effects","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"jatin-yadav05","st":"indexed","u":56,"pl":"https://cdn.21st.dev/jatin-yadav05/subtle-button/default/preview.1751214526442.png","pc":"jatin-yadav05","tg":["cta"]},{"id":"21st:jatin-yadav05__text-hover-effect","t":"Text hover effect","d":"This text effect is very clean and polished and expands on hover in very smooth manner.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","pl":"https://cdn.21st.dev/jatin-yadav05/text-hover-effect/default/preview.1762530993847.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__text-scramble","t":"Text scramble","d":"A component of text which changes its nature and randomises and finally settles down and shows a scramble effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":155,"pl":"https://cdn.21st.dev/jatin-yadav05/text-scramble/default/preview.1765189215769.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__unique-testimonial","t":"Unique testimonial","d":"A minimal testimonial component featuring a centered quote with smooth fade/blur transitions when switching between testimonials.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jatin-yadav05","st":"indexed","u":146,"pl":"https://cdn.21st.dev/jatin-yadav05/unique-testimonial/default/preview.1765215540565.png","pc":"jatin-yadav05","tg":["testimonials"]},{"id":"21st:jatin-yadav05__vapour-text-effect","t":"Vapour text effect","d":"A React component that creates text vaporization animations using Canvas, with customizable text cycling and particle effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jatin-yadav05","st":"indexed","u":737,"pl":"https://cdn.21st.dev/jatin-yadav05/vapour-text-effect/default/preview.1747562393196.png","pc":"jatin-yadav05"},{"id":"21st:jatin-yadav05__vertical-image-stack","t":"Vertical image stack","d":"A polished vertical stack images interaction with smooth drag and scroll animation.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"jatin-yadav05","st":"indexed","u":117,"pl":"https://cdn.21st.dev/jatin-yadav05/vertical-image-stack/default/preview.1765442658266.png","pc":"jatin-yadav05","tg":["gallery","image"]},{"id":"21st:javierdev0__client-reviews","t":"Client reviews","d":"Client Reviews","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"javierdev0","st":"indexed","pl":"https://cdn.21st.dev/user_2rOaJzeYmWcsYVMWFS0A1Jq23sQ/client-reviews/default/preview.png","pc":"javierdev0"},{"id":"21st:javierdev0__order-state","t":"Order state","d":"E-commerce order state","k":"component","s":"21st","c":"media/icon","g":"media","a":"javierdev0","st":"indexed","pl":"https://cdn.21st.dev/user_2rOaJzeYmWcsYVMWFS0A1Jq23sQ/order-state/default/preview.png","pc":"javierdev0","tg":["icon"]},{"id":"21st:javierdev0__order-summary","t":"Order summary","d":"Order Summary","k":"component","s":"21st","c":"other","g":"other","a":"javierdev0","st":"indexed","pl":"https://cdn.21st.dev/user_2rOaJzeYmWcsYVMWFS0A1Jq23sQ/order-summary/default/preview.png","pc":"javierdev0"},{"id":"21st:javierdev0__order-tracking","t":"Order tracking","d":"Order tracking","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"javierdev0","st":"indexed","pl":"https://cdn.21st.dev/user_2rOaJzeYmWcsYVMWFS0A1Jq23sQ/order-tracking/default/preview.png","pc":"javierdev0","tg":["steps","timeline"]},{"id":"21st:jayashish45__nextraisepaywall","t":"Nextraisepaywall","d":"Value-led ATS upgrade paywall (light theme). variant=full|value-only (intent-gen arm routes to a pricing page); configurable score, plans, issues, features and testimonial. Single ","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"jayashish45","st":"indexed","pl":"https://21st.dev/@jayashish45/components/nextraisepaywall","pc":"jayashish45"},{"id":"21st:jaydeep.pawar10__modal-close-interaction","t":"Modal close interaction","d":"Modal interaction: Instead of showing an close Icon in the modal, when user hover outside of it it appears ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"jaydeep.pawar10","st":"indexed","pl":"https://cdn.21st.dev/jaydeep.pawar10/modal-close-interaction/default/preview.1766474428200.png","pc":"jaydeep.pawar10"},{"id":"21st:jayur830__shadcn-button","t":"Shadcn button","d":"default shadcn button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jayur830","st":"indexed","pl":"https://cdn.21st.dev/user_2vExdOlmWGt26PI5nKPBVSpxIqF/shadcn-button/shadcn-button/preview.png","pc":"jayur830"},{"id":"21st:jean.duthil13__hero-scrub","t":"Hero scrub","d":"Cinematic scroll-scrubbed hero with an image sequence rendered on canvas. The central card scales from a thumbnail to cover the viewport while scrubbing through your video frames, ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"jean.duthil13","st":"indexed","u":36,"pl":"https://cdn.21st.dev/jean.duthil13/hero-scrub/default/preview.1776866028764.png","pc":"jean.duthil13","tg":["hero","scroll-area","video"]},{"id":"21st:jean.duthil13__mac-book-neo-hero","t":"Mac book neo hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"jean.duthil13","st":"indexed","pl":"https://cdn.21st.dev/jean.duthil13/mac-book-neo-hero/default/preview.1777246243067.png","pc":"jean.duthil13"},{"id":"21st:jefatura.frontend__button-1","t":"Button 1","d":"Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jefatura.frontend","st":"indexed","pl":"https://cdn.21st.dev/jefatura.frontend/button-1/default/preview.1756222158992.png","pc":"jefatura.frontend"},{"id":"21st:jefatura.frontend__rb-button","t":"Rb button","d":"Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jefatura.frontend","st":"indexed","pl":"https://cdn.21st.dev/jefatura.frontend/rb-button/default/preview.1754953172011.png","pc":"jefatura.frontend"},{"id":"21st:jefatura.frontend__sbbutton","t":"Sbbutton","d":"Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jefatura.frontend","st":"indexed","pl":"https://cdn.21st.dev/jefatura.frontend/sbbutton/default/preview.1755631482601.png","pc":"jefatura.frontend"},{"id":"21st:jevin-f__blog-layout","t":"Blog layout","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"jevin-f","st":"indexed","pl":"https://cdn.21st.dev/jevin-f/blog-layout/default/preview.1753258583888.png","pc":"jevin-f"},{"id":"21st:jevin-f__counter","t":"Counter","d":"just for test","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"jevin-f","st":"indexed","pl":"https://cdn.21st.dev/jevin-f/counter/default/preview.1753174585977.png","pc":"jevin-f"},{"id":"21st:jh3yy_deleted__impossible-checkbox","t":"Impossible checkbox","d":"Here is Impossible Checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"jh3yy_deleted","st":"indexed","pl":"https://cdn.21st.dev/larsen66/impossible-checkbox/default/preview.1755278417730.png","pc":"jh3yy_deleted","tg":["checkbox","toggle"]},{"id":"21st:jh3yy_deleted__you-can-scroll","t":"You can scroll","d":"you can scroll. component","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"jh3yy_deleted","st":"indexed","pl":"https://cdn.21st.dev/larsen66/you-can-scroll/default/preview.1755279474784.png","pc":"jh3yy_deleted","tg":["grid","scroll-area","text"]},{"id":"21st:jhoan.rhz__a-shader","t":"A shader","d":"Animated WebGL shader background in the Aurora style. Generated by the 21st.dev Shader Builder. 4-color palette (#0A0A12, #5B2A86, #D64FA8, #FFC2E2). Features: cursor-reactive (rip","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jhoan.rhz","st":"indexed","pl":"https://cdn.21st.dev/jhoan.rhz/a-shader/default/preview.1785723326252-89e64ca8-5fbb-40f2-a1d8-a4ba13c346c6.webp","pc":"jhoan.rhz"},{"id":"21st:ji.okorafor__koinonia","t":"Koinonia","d":"Animated WebGL shader background in the Flow field style, generated by the 21st.dev Shader Builder. 3-color palette (#ED2521, #ED2521, #FEEBDC). Features: cursor-reactive (spotligh","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ji.okorafor","st":"indexed","pl":"https://cdn.21st.dev/ji.okorafor/koinonia/default/preview.1784236602488-910721c5-1639-441c-83b7-b7588a4a6a5d.png","pc":"ji.okorafor"},{"id":"21st:jnglepipo__bzd-hello","t":"Bzd hello","d":"Tiny test badge to verify publishing works.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jnglepipo","st":"indexed","pl":"https://21st.dev/@jnglepipo/components/bzd-hello","pc":"jnglepipo"},{"id":"21st:jnglepipo__service-lead-form","t":"Service lead form","d":"Micro lead-capture form: name, phone/email, call-text-email pills. Light/dark tones, hero/section variants, GA4 wired.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"jnglepipo","st":"indexed","pl":"https://21st.dev/@jnglepipo/components/service-lead-form","pc":"jnglepipo"},{"id":"21st:jobsrip__trippin-spiral","t":"Trippin spiral","d":"Animated (shimmer) ASCII art in the Hex Dump style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, card","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jobsrip","st":"indexed","pl":"https://cdn.21st.dev/jobsrip/trippin-spiral/default/preview.1786926008548-e1bd0a10-638e-4a85-b4b1-f099f6795dea.webp","pc":"jobsrip"},{"id":"21st:jod49034__accordion-slider","t":"Accordion slider","d":"A responsive accordion-style image slider for showcasing items with smooth transitions, detailed content, and interactive controls.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"jod49034","st":"indexed","pl":"https://cdn.21st.dev/jod49034/accordion-slider/default/preview.1758864051354.png","pc":"jod49034"},{"id":"21st:jod49034__button-primary","t":"Button primary","d":"A styled, accessible primary button with variants for size and loading state; supports icon, fullWidth, and onClick handlers.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jod49034","st":"indexed","pl":"https://cdn.21st.dev/jod49034/button-primary/default/preview.1759154087322.png","pc":"jod49034"},{"id":"21st:jod49034__glass-nav-bar","t":"Glass nav bar","d":"A compact, rounded glassmorphism navigation bar with icons and labels; lightweight CSS-only UI component designed for headers, toolbars, or inline controls. Includes accessible foc","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"jod49034","st":"indexed","pl":"https://cdn.21st.dev/jod49034/glass-nav-bar/default/preview.1758862560160.png","pc":"jod49034"},{"id":"21st:jod49034__slideshow","t":"Slideshow","d":"A full-screen image slideshow component with text overlay, navigation controls, and smooth transitions.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"jod49034","st":"indexed","u":202,"pl":"https://cdn.21st.dev/jod49034/slideshow/default/preview.1758867322467.png","pc":"jod49034","tg":["carousel","gallery"]},{"id":"21st:jod49034__tubes-curor","t":"Tubes curor","d":"A fullscreen WebGL cursor animation built with Three.js that renders animated colorful tube trails and reactive lights; click to randomize tube and light colors. Ideal as an intera","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"jod49034","st":"indexed","u":93,"pl":"https://cdn.21st.dev/jod49034/tubes-curor/default/preview.1758861425592.png","pc":"jod49034","tg":["cursor"]},{"id":"21st:johuniq__ai-prompt-box","t":"Ai prompt box","d":"An animated AI prompt input with expanding textarea, keyboard shortcuts, model selector, and file attachments.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"johuniq","st":"indexed","u":35,"pl":"https://cdn.21st.dev/johuniq/ai-prompt-box/default/preview.1773916120385.png","pc":"johuniq","tg":["input","textarea","upload-download"]},{"id":"21st:johuniq__animated-theme-toggle","t":"Animated theme toggle","d":"Smooth dark/light mode toggle with sun-to-moon SVG morph animation. Built with Framer Motion and next-themes integration.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"johuniq","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/animated-theme-toggle/demos/default/preview.1773268599810.png","pc":"johuniq","tg":["toggle"]},{"id":"21st:johuniq__date-wheel-picker","t":"Date wheel picker","d":"iOS-style date picker with 3D scrollable wheels for day, month, and year. Supports drag, mouse wheel, and keyboard navigation.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"johuniq","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/date-wheel-picker/demos/default/preview.1773268429528.png","pc":"johuniq","tg":["date-picker"]},{"id":"21st:johuniq__joly-button","t":"Joly button","d":"A fully accessible button with 10+ variants including shimmer, glow, and gradient effects. Motion-powered cursor tracking and spring animations.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"johuniq","st":"indexed","pl":"https://cdn.21st.dev/larsen66/joly-button/demos/default/preview.1773244565425.png","pc":"johuniq"},{"id":"21st:johuniq__liquid-metal-button","t":"Liquid metal button","d":"A button with liquid metal animation, metallic glowing borders, and fluid hover effects.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"johuniq","st":"indexed","u":257,"pl":"https://cdn.21st.dev/larsen66/liquid-metal-button/demos/default/preview.1773244704587.png","pc":"johuniq","tg":["border","button"]},{"id":"21st:joinceleste__bloom-field-gradient","t":"Bloom field gradient","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#E2E2E2, #1B9FFE, #1B9FFE, #4AC9FF). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"joinceleste","st":"indexed","pl":"https://cdn.21st.dev/joinceleste/bloom-field-gradient/default/preview.1786488946069-773ed863-d8db-4269-9f85-8722642d1230.webp","pc":"joinceleste"},{"id":"21st:joker4214__fluted-glass-waves-shader","t":"Fluted glass waves shader","d":"Animated WebGL shader background in the Fluted Glass style. Waves variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"joker4214","st":"indexed","pl":"https://cdn.21st.dev/joker4214/fluted-glass-waves-shader/default/preview.1786065356425-04d8cd24-0c7a-45c6-87f3-797d919fa300.webp","pc":"joker4214"},{"id":"21st:jolbol1__breadcrumbs","t":"Breadcrumbs","k":"component","s":"21st","c":"navigation/breadcrumb","g":"navigation","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/breadcrumbs.png","pc":"jolbol1"},{"id":"21st:jolbol1__button","t":"Button","d":"A button allows a user to perform an action, with mouse, touch, and keyboard interactions.\n\nOn the surface, building a custom styled button seems simple. However, there are many cr","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jolbol1","st":"indexed","u":279,"pl":"https://cdn.21st.dev/user_jolbol1/button.png","pc":"jolbol1"},{"id":"21st:jolbol1__button-1","t":"Button 1","d":"Here is Button component ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jolbol1","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/button-1/default/preview.1754504789482.png","pc":"jolbol1","tg":["button"]},{"id":"21st:jolbol1__calendar","t":"Calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/calendar.png","pc":"jolbol1","tg":["calendar","date-picker"]},{"id":"21st:jolbol1__checkbox","t":"Checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/checkbox.png","pc":"jolbol1","tg":["checkbox"]},{"id":"21st:jolbol1__checkbox-1","t":"Checkbox 1","d":"Here is Checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-1/default/preview.1754514747613.png","pc":"jolbol1","tg":["checkbox","form"]},{"id":"21st:jolbol1__color","t":"Color","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/color.png","pc":"jolbol1"},{"id":"21st:jolbol1__combobox","t":"Combobox","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/combobox.png","pc":"jolbol1"},{"id":"21st:jolbol1__date-picker","t":"Date picker","d":"A DatePicker combines a DateField and a Calendar popover to allow users to enter or select a date value.\n\nA date picker can be built using <input type=\"date\">, but this is very lim","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"jolbol1","st":"indexed","u":87,"pl":"https://cdn.21st.dev/user_jolbol1/date-picker.png","pc":"jolbol1","tg":["calendar","date-picker","popover"]},{"id":"21st:jolbol1__date-range-picker","t":"Date range picker","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/date-range-picker.png","pc":"jolbol1","tg":["calendar","date-picker"]},{"id":"21st:jolbol1__datefield","t":"Datefield","d":"A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/datefield.png","pc":"jolbol1"},{"id":"21st:jolbol1__dialog","t":"Dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/dialog.png","pc":"jolbol1"},{"id":"21st:jolbol1__dialog-2","t":"Dialog 2","d":"Here is Dialog component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dialog-2/default/preview.1754525515659.png","pc":"jolbol1","tg":["alert","modal","popover","sign-up"]},{"id":"21st:jolbol1__dropzone","t":"Dropzone","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/dropzone.png","pc":"jolbol1"},{"id":"21st:jolbol1__field","t":"Field","d":"A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors.\n\nThe HTML <form> element can be used to build forms. R","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"jolbol1","st":"indexed","u":416,"pl":"https://cdn.21st.dev/user_jolbol1/field.png","pc":"jolbol1","tg":["form"]},{"id":"21st:jolbol1__file-trigger","t":"File trigger","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/file-trigger.png","pc":"jolbol1","tg":["upload-download"]},{"id":"21st:jolbol1__file-trigger-2","t":"File trigger 2","d":"Here is File Trigger component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/file-trigger/default/preview.1754513363392.png","pc":"jolbol1","tg":["upload-download"]},{"id":"21st:jolbol1__grid-list","t":"Grid list","d":"A grid list displays a list of interactive items, with support for keyboard navigation, single or multiple selection, and row actions.\n\nA list can be built using <ul> or <ol> HTML ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"jolbol1","st":"indexed","u":59,"pl":"https://cdn.21st.dev/user_jolbol1/grid-list.png","pc":"jolbol1","tg":["checkbox","list"]},{"id":"21st:jolbol1__link","t":"Link","k":"component","s":"21st","c":"actions/link","g":"actions","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/link.png","pc":"jolbol1"},{"id":"21st:jolbol1__list-box","t":"List box","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/list-box.png","pc":"jolbol1"},{"id":"21st:jolbol1__list-box-2","t":"List box 2","d":"Here is ListBox component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"jolbol1","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/list-box/default/preview.1754506371445.png","pc":"jolbol1","tg":["empty-state","list","link","scroll-area"]},{"id":"21st:jolbol1__menu","t":"Menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/menu.png","pc":"jolbol1"},{"id":"21st:jolbol1__menu-1","t":"Menu 1","d":"Here is Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/menu-1/default/preview.1754518045127.png","pc":"jolbol1","tg":["menu"]},{"id":"21st:jolbol1__meter","t":"Meter","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/meter.png","pc":"jolbol1"},{"id":"21st:jolbol1__numberfield","t":"Numberfield","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/numberfield.png","pc":"jolbol1"},{"id":"21st:jolbol1__popover","t":"Popover","d":"A popover is an overlay element positioned relative to a trigger.\n\nThere is no built in way to create popovers in HTML. Popover helps achieve accessible popovers that can be styled","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"jolbol1","st":"indexed","u":295,"pl":"https://cdn.21st.dev/user_jolbol1/popover.png","pc":"jolbol1","tg":["popover"]},{"id":"21st:jolbol1__popover-1","t":"Popover 1","d":"A popover is an overlay element positioned relative to a trigger.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"jolbol1","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/popover-1/default/preview.1754515798185.png","pc":"jolbol1","tg":["button","popover","toggle","tooltip"]},{"id":"21st:jolbol1__progress","t":"Progress","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/progress.png","pc":"jolbol1","tg":["progress"]},{"id":"21st:jolbol1__radio-group","t":"Radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/radio-group.png","pc":"jolbol1"},{"id":"21st:jolbol1__range-calendar","t":"Range calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/range-calendar.png","pc":"jolbol1","tg":["calendar","date-picker"]},{"id":"21st:jolbol1__searchfield","t":"Searchfield","d":"A search field allows a user to enter and clear a search query.\n\nSearch fields can be built with <input type=\"search\">, but these can be hard to style consistently cross browser. S","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"jolbol1","st":"indexed","u":139,"pl":"https://cdn.21st.dev/user_jolbol1/searchfield.png","pc":"jolbol1","tg":["search"]},{"id":"21st:jolbol1__select","t":"Select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/select.png","pc":"jolbol1","tg":["dropdown","select"]},{"id":"21st:jolbol1__select-1","t":"Select 1","d":"Here is Select component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"jolbol1","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/select-1/default/preview.1754516832065.png","pc":"jolbol1","tg":["dropdown","form","select"]},{"id":"21st:jolbol1__slider","t":"Slider","d":"A slider allows a user to select one or more values within a range.\n\nThe <input type=\"range\"> HTML element can be used to build a slider, however it is very difficult to style cros","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"jolbol1","st":"indexed","u":26,"pl":"https://cdn.21st.dev/user_jolbol1/slider.png","pc":"jolbol1","tg":["slider"]},{"id":"21st:jolbol1__switch","t":"Switch","d":"A switch allows a user to turn a setting on or off.\n\nThere is no native HTML element with switch styling. <input type=\"checkbox\"> is the closest semantically, but isn't styled or e","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"jolbol1","st":"indexed","u":175,"pl":"https://cdn.21st.dev/user_jolbol1/switch.png","pc":"jolbol1","tg":["toggle"]},{"id":"21st:jolbol1__switch-1","t":"Switch 1","d":"Here is Switch component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"jolbol1","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/switch-1/default/preview.1754515503389.png","pc":"jolbol1","tg":["form","toggle"]},{"id":"21st:jolbol1__table","t":"Table","d":"A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys, and optionally supports row selection and sorting.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/table.png","pc":"jolbol1","tg":["checkbox","table"]},{"id":"21st:jolbol1__table-2","t":"Table 2","d":"Here is Table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/table/default/preview.1754518288565.png","pc":"jolbol1","tg":["checkbox","table"]},{"id":"21st:jolbol1__tabs","t":"Tabs","d":"Tabs organize content into multiple sections and allow users to navigate between them.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"jolbol1","st":"indexed","u":30,"pl":"https://cdn.21st.dev/user_jolbol1/tabs.png","pc":"jolbol1","tg":["tabs"]},{"id":"21st:jolbol1__tag-group","t":"Tag group","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/tag-group.png","pc":"jolbol1","tg":["chip"]},{"id":"21st:jolbol1__tag-group-2","t":"Tag group 2","d":"Here is Tag Group component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tag-group/default/preview.1754522880950.png","pc":"jolbol1","tg":["chip","empty-state"]},{"id":"21st:jolbol1__text-field-basic","t":"Text field basic","d":"Here is Text Field component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/text-field-basic/default/preview.1754511908349.png","pc":"jolbol1","tg":["form","input","textarea"]},{"id":"21st:jolbol1__textfield","t":"Textfield","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/textfield.png","pc":"jolbol1"},{"id":"21st:jolbol1__timefield","t":"Timefield","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/timefield.png","pc":"jolbol1"},{"id":"21st:jolbol1__toggle","t":"Toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/toggle.png","pc":"jolbol1"},{"id":"21st:jolbol1__toggle-button","t":"Toggle button","d":"Here is Toggle Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-button/default/preview.1754513833592.png","pc":"jolbol1"},{"id":"21st:jolbol1__toggle-group","t":"Toggle group","d":"Here is Toggle Group component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-group/default/preview.1754514116087.png","pc":"jolbol1","tg":["toggle"]},{"id":"21st:jolbol1__toolbar","t":"Toolbar","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/toolbar.png","pc":"jolbol1"},{"id":"21st:jolbol1__tooltip","t":"Tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/tooltip.png","pc":"jolbol1"},{"id":"21st:jolbol1__tree","t":"Tree","d":"A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation and selection.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/user_jolbol1/tree.png","pc":"jolbol1"},{"id":"21st:jolbol1__tree-2","t":"Tree 2","d":"Here is Tree component","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"jolbol1","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tree/default/preview.1754523723629.png","pc":"jolbol1","tg":["checkbox","file-tree"]},{"id":"21st:jonas-kgomo__merit","t":"Merit","d":"Merit works","k":"component","s":"21st","c":"other","g":"other","a":"jonas-kgomo","st":"indexed","pl":"https://cdn.21st.dev/jonas-kgomo/merit/default/preview.1781639259960.png","pc":"jonas-kgomo"},{"id":"21st:jonas-kgomo__merit-core","t":"Merit core","d":"merit core","k":"component","s":"21st","c":"other","g":"other","a":"jonas-kgomo","st":"indexed","pl":"https://cdn.21st.dev/jonas-kgomo/merit-core/default/preview.1781641012558.png","pc":"jonas-kgomo"},{"id":"21st:jonas-kgomo__player","t":"Player","d":"Video player aesthetic","k":"component","s":"21st","c":"media/player","g":"media","a":"jonas-kgomo","st":"indexed","pl":"https://cdn.21st.dev/jonas-kgomo/player/default/preview.1769367964233.png","pc":"jonas-kgomo"},{"id":"21st:jonguha__horizon-glow-gradient","t":"Horizon glow gradient","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 3-color palette (#F52929, #FB6A60, #FDA096). Features: film grain. A drop-in, zero-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jonguha","st":"indexed","pl":"https://cdn.21st.dev/jonguha/horizon-glow-gradient/default/preview.1785326139847-10a68c4e-0372-4890-9284-61f7a44cea46.webp","pc":"jonguha"},{"id":"21st:jorgevarelarz__laser-focus","t":"Laser focus","k":"component","s":"21st","c":"other","g":"other","a":"jorgevarelarz","st":"indexed","pl":"https://cdn.21st.dev/jorgevarelarz/laser-focus/default/preview.1782554812217.png","pc":"jorgevarelarz"},{"id":"21st:joshosullivan-au__card-stack","t":"Card stack","d":"Animated fanned card stack carousel with Framer Motion, keyboard navigation, and optional links for showcase content.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"joshosullivan-au","st":"indexed","pl":"https://21st.dev/@joshosullivan-au/components/card-stack","pc":"joshosullivan-au"},{"id":"21st:joshosullivan-au__cta-card-1","t":"Cta card 1","d":"Marketing CTA card with light, dark, and gradient variants, optional badge, icon, and subscribe-style button link.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"joshosullivan-au","st":"indexed","pl":"https://21st.dev/@joshosullivan-au/components/cta-card-1","pc":"joshosullivan-au"},{"id":"21st:joshosullivan-au__spotlight-card","t":"Spotlight card","d":"Card container with a mouse-following radial spotlight highlight for feature and pricing sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"joshosullivan-au","st":"indexed","pl":"https://21st.dev/@joshosullivan-au/components/spotlight-card","pc":"joshosullivan-au"},{"id":"21st:joyco__button","t":"Button","d":"A versatile button component with multiple variants and sizes, including muted, accent, and icon sizes, built on Radix Slot for use as any element via asChild.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"joyco","st":"indexed","pl":"https://cdn.21st.dev/joyco/button/default/preview.1785542991104-71284c8c-2db9-45cc-8492-7020566fa060.png","pc":"joyco","tg":["button"]},{"id":"21st:joyco__file-dropzone","t":"File dropzone","d":"A drag-and-drop file upload area with image preview, file-type and size validation, single or multiple file support, and error handling.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"joyco","st":"indexed","pl":"https://cdn.21st.dev/joyco/file-dropzone/default/preview.1783712252441.png","pc":"joyco","tg":["upload-download"]},{"id":"21st:joyco__hls-video-player","t":"Hls video player","d":"A headless HLS video player with native HLS detection, adaptive resolution control, and error handling.","k":"component","s":"21st","c":"media/player","g":"media","a":"joyco","st":"indexed","pl":"https://cdn.21st.dev/joyco/hls-video-player/default/preview.1783728078394.png","pc":"joyco","tg":["video"]},{"id":"21st:joyco__image-sequence","t":"Image sequence","d":"A canvas-based image sequence player that renders frame-by-frame animations with binary progressive loading for smooth playback.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"joyco","st":"indexed","pl":"https://cdn.21st.dev/joyco/image-sequence/default/preview.1784264262914-c1a9fc69-02dc-472e-b95e-46ff46c46d75.png","pc":"joyco","tg":["gallery"]},{"id":"21st:joyco__infinite-list","t":"Infinite list","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"joyco","st":"indexed","pl":"https://cdn.21st.dev/joyco/infinite-list/default/preview.1783712547465.png","pc":"joyco","tg":["hook","pagination","scroll-area"]},{"id":"21st:jqsafi__button","t":"Button","d":"Awesome header, footer and collection","k":"component","s":"21st","c":"actions/button","g":"actions","a":"jqsafi","st":"indexed","pl":"https://cdn.21st.dev/user_2tue4880vn55ttTzWqW69nYxIUX/button/button/preview.png","pc":"jqsafi"},{"id":"21st:jsaj2024__dynamic-background","t":"Dynamic background","d":"Dynamically adapts to the current theme (light or dark) using the next-themes library and draws organic, paint-like shapes that create a soft and visually engaging background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"jsaj2024","st":"indexed","u":26,"pl":"https://cdn.21st.dev/jsaj2024/dynamic-background/default/preview.1749532560847.png","pc":"jsaj2024"},{"id":"21st:jshguo__accordion","t":"Accordion","d":"A vertically stacked set of interactive headings that each reveal a section of content. Supports single/multiple selection, collapsible behavior, and disabled items.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/jshguo/accordion/default/preview.1774860533176.png","pc":"jshguo"},{"id":"21st:jshguo__avatar-variants-interfacesds","t":"Avatar variants interfacesds","d":"An image element with a fallback for representing the user. Built with Radix UI Avatar primitives.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/avatar-variants-interfacesds/default/preview.1775116252541.png","pc":"jshguo","tg":["profile"]},{"id":"21st:jshguo__interfaces-accordion","t":"Interfaces accordion","d":"A vertically stacked set of interactive headings that reveal or hide associated content. Supports single, collapsible, multiple, and disabled variants.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/jshguo/interfaces-accordion/default/preview.1774860331745.png","pc":"jshguo"},{"id":"21st:jshguo__interfaces-badge","t":"Interfaces badge","d":"Rounded pill badge component from Interfaces DS with default, secondary, destructive, and outline variants.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"jshguo","st":"indexed","u":7,"pl":"https://cdn.21st.dev/reapollo/interfaces-badge/default/preview.1775084429901.png","pc":"jshguo","tg":["badge"]},{"id":"21st:jshguo__interfaces-breadcrumb","t":"Interfaces breadcrumb","d":"Displays the path to the current resource using a hierarchy of links.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-breadcrumb/default/preview.1775116893995.png","pc":"jshguo","tg":["link"]},{"id":"21st:jshguo__interfaces-button","t":"Interfaces button","d":"A versatile button component from Interfaces DS with six visual variants and six size combinations per variant.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"jshguo","st":"indexed","u":14,"pl":"https://cdn.21st.dev/reapollo/interfaces-button/default/preview.1775117424832.png","pc":"jshguo"},{"id":"21st:jshguo__interfaces-card","t":"Interfaces card","d":"Card component from Interfaces DS — a flexible card shell with header, action, content, and footer slots.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-card/default/preview.1775116866117.png","pc":"jshguo","tg":["pricing-section"]},{"id":"21st:jshguo__interfaces-carousel","t":"Interfaces carousel","d":"Carousel component with Embla, supporting horizontal, vertical, and loop modes.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-carousel/default/preview.1775067014290.png","pc":"jshguo","tg":["carousel"]},{"id":"21st:jshguo__interfaces-chart","t":"Interfaces chart","d":"Composable chart primitives built on Recharts with theme-aware colors, tooltips, and legends.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-chart/default/preview.1775068187620.png","pc":"jshguo"},{"id":"21st:jshguo__interfaces-checkbox","t":"Interfaces checkbox","d":"Checkbox component with checked, disabled, and combined states.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-checkbox/default/preview.1775118393147.png","pc":"jshguo","tg":["checkbox"]},{"id":"21st:jshguo__interfaces-collapsible","t":"Interfaces collapsible","d":"Collapsible component from Interfaces DS — an expandable content panel with animated open and close states.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-collapsible/default/preview.1775117898499.png","pc":"jshguo"},{"id":"21st:jshguo__interfaces-hover-card","t":"Interfaces hover card","d":"For sighted users to preview content available behind a link.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"jshguo","st":"indexed","u":23,"pl":"https://cdn.21st.dev/reapollo/interfaces-hover-card/default/preview.1775121425751.png","pc":"jshguo","tg":["profile"]},{"id":"21st:jshguo__interfaces-input-otp","t":"Interfaces input otp","d":"Accessible one-time password component with copy paste support.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-input-otp/default/preview.1775122006600.png","pc":"jshguo","tg":["input"]},{"id":"21st:jshguo__interfaces-progress","t":"Interfaces progress","d":"Progress bar component built on Radix UI with smooth value transitions.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-progress/default/preview.1775122842901.png","pc":"jshguo","tg":["progress","steps"]},{"id":"21st:jshguo__interfaces-select","t":"Interfaces select","d":"Select dropdown built on Radix UI with support for groups, labels, and separators.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"jshguo","st":"indexed","u":27,"pl":"https://cdn.21st.dev/reapollo/interfaces-select/default/preview.1775122746071.png","pc":"jshguo","tg":["dropdown","select"]},{"id":"21st:jshguo__interfaces-slider","t":"Interfaces slider","d":"Slider component built on Radix UI — supports single value and range selection.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/jshguo/interfaces-slider/default/preview.1775147589534.png","pc":"jshguo","tg":["slider"]},{"id":"21st:jshguo__interfaces-switch","t":"Interfaces switch","d":"Toggle switch component built on Radix UI with smooth animation and focus states.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-switch/default/preview.1775122785453.png","pc":"jshguo"},{"id":"21st:jshguo__interfaces-textarea","t":"Interfaces textarea","d":"Multi-line text input component with auto-sizing and validation states.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/reapollo/interfaces-textarea/default/preview.1775122706584.png","pc":"jshguo","tg":["textarea"]},{"id":"21st:jshguo__sidebar-component","t":"Sidebar component","d":"Here is Sidebar Component ","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"jshguo","st":"indexed","u":599,"pl":"https://cdn.21st.dev/larsen66/sidebar-component/default/preview.1756233832684.png","pc":"jshguo","tg":["dashboard","navigation-menu","search","sidebar"]},{"id":"21st:jshguo__spinner","t":"Spinner","d":"A minimal loading spinner that renders an animated rotating icon, sizable and colorable via className.","k":"component","s":"21st","c":"status/loader","g":"status","a":"jshguo","st":"indexed","pl":"https://cdn.21st.dev/jshguo/spinner/default/preview.1784785778099-fef853eb-4c7f-4adf-a515-c1bd10fa9bbf.png","pc":"jshguo"},{"id":"21st:juan9987654321__adan-y-dios","t":"Adan y dios","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"juan9987654321","st":"indexed","pl":"https://cdn.21st.dev/juan9987654321/adan-y-dios/default/preview.1785864038805-c2dbdceb-8c9f-4f33-965f-829f23ce7d34.webp","pc":"juan9987654321"},{"id":"21st:julian.leistad__oki10","t":"Oki10","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). Features: cursor-reactive (swirl","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"julian.leistad","st":"indexed","pl":"https://cdn.21st.dev/julian.leistad/oki10/default/preview.1785204940961-fe193e5c-a35a-4efd-ad6d-a36c4d8c1415.webp","pc":"julian.leistad"},{"id":"21st:justinhamadeopsguru__volumeslider","t":"Volumeslider","d":"Volume Slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"justinhamadeopsguru","st":"indexed","pl":"https://cdn.21st.dev/justinhamadeopsguru/volumeslider/default/preview.png","pc":"justinhamadeopsguru"},{"id":"21st:justinlevinedotme__file-tree","t":"File tree","d":"Collapsible file and folder tree with colored language-specific icons for 24+ file types, path highlighting, and configurable expand/collapse. Zero dependencies — just React and Ta","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"justinlevinedotme","st":"rated","pl":"https://cdn.21st.dev/justinlevinedotme/file-tree/default/preview.1773722732574.png","pc":"justinlevinedotme","tg":["file-tree","icon"],"sc":20},{"id":"21st:k3menn__simple-tabs-with-underline-and-bold-font","t":"Simple tabs with underline and bold font","d":"shadcn/ui simple tabs with underline and bold font","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"k3menn","st":"indexed","u":112,"pl":"https://cdn.21st.dev/user_2qRK29ssFQqXVoQJMy4qdj6PIt5/simple-tabs-with-underline-and-bold-font.png","pc":"k3menn","tg":["tabs"]},{"id":"21st:k3menn__tabs-in-cell-for-navigation","t":"Tabs in cell for navigation","d":"shadcn/ui tabs in cell for navigation","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"k3menn","st":"indexed","u":209,"pl":"https://cdn.21st.dev/user_2qRK29ssFQqXVoQJMy4qdj6PIt5/tabs-in-cell-for-navigation.png","pc":"k3menn","tg":["navigation-menu","tabs"]},{"id":"21st:k3menn__tabs-like-bookmark","t":"Tabs like bookmark","d":"shadcn/ui tabs like bookmark","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"k3menn","st":"indexed","u":47,"pl":"https://cdn.21st.dev/user_2qRK29ssFQqXVoQJMy4qdj6PIt5/tabs-like-bookmark.png","pc":"k3menn","tg":["navigation-menu","tabs"]},{"id":"21st:kaczmarekpa__warp-stripes-shader","t":"Warp stripes shader","d":"Animated WebGL shader background in the Warp stripes style, generated by the 21st.dev Shader Builder. 4-color palette (#0D1B0F, #3E8E41, #C7F464, #FFFDE1). A drop-in, zero-dependen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kaczmarekpa","st":"indexed","u":4,"pl":"https://cdn.21st.dev/kaczmarekpa/warp-stripes-shader/default/preview.1784807185723-7e0e183c-efa5-45be-883d-0fb179837bb4.webp","pc":"kaczmarekpa"},{"id":"21st:kaif-ui__cicular-navigation-bar","t":"Cicular navigation bar","d":"Here is circular navigation bar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"kaif-ui","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/cicular-navigation-bar/default/preview.1750167166793.png","pc":"kaif-ui","tg":["menu","navigation-menu"]},{"id":"21st:kaif-ui__emoji-nav","t":"Emoji nav","d":"Here is emoji nav bar component","k":"component","s":"21st","c":"other","g":"other","a":"kaif-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/emoji-nav/default/preview.1750166794874.png","pc":"kaif-ui"},{"id":"21st:kaif-ui__infinite-slider-horizontal","t":"Infinite slider horizontal","d":"Here is horizontal img slider ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"kaif-ui","st":"indexed","u":62,"pl":"https://cdn.21st.dev/larsen66/infinite-slider-horizontal/default/preview.1750167021097.png","pc":"kaif-ui","tg":["carousel","gallery","scroll-area","slider"]},{"id":"21st:kaif-ui__macbook-keyboard","t":"Macbook keyboard","d":"Here is macbook keyboard component","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"kaif-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/macbook-keyboard/default/preview.1750168208998.png","pc":"kaif-ui"},{"id":"21st:kaif-ui__pendulum-component","t":"Pendulum component","d":"Here is animated pendulum component","k":"component","s":"21st","c":"other","g":"other","a":"kaif-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pendulum-component/default/preview.1750167344179.png","pc":"kaif-ui"},{"id":"21st:kalil0321__collapsible-header","t":"Collapsible header","d":"A collapsible header that collapses on scroll","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"kalil0321","st":"indexed","pl":"https://cdn.21st.dev/kalil0321/collapsible-header/default/preview.1748622844890.png","pc":"kalil0321"},{"id":"21st:kamaleshsa__gaming-login","t":"Gaming login","d":"A futuristic, gaming-themed NexusGate login UI built with React and TypeScript. ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"kamaleshsa","st":"indexed","pl":"https://cdn.21st.dev/kamaleshsa/gaming-login/default/preview.1747242747332.png","pc":"kamaleshsa","tg":["form","video"]},{"id":"21st:kapishdima__infinite-bento-pan","t":"Infinite bento pan","d":"A camera diagonally drifts across an oversized bento grid behind a soft vignette.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kapishdima","st":"indexed","u":7,"pl":"https://cdn.21st.dev/reapollo/infinite-bento-pan/default/preview.1776101499281.png","pc":"kapishdima"},{"id":"21st:kapishdima__inline-highlight","t":"Inline highlight","d":"Animates one word inside a sentence from a base color to a brand color.","k":"component","s":"21st","c":"other","g":"other","a":"kapishdima","st":"indexed","pl":"https://cdn.21st.dev/reapollo/inline-highlight/default/preview.1776101452954.png","pc":"kapishdima"},{"id":"21st:kapishdima__marker-highlight","t":"Marker highlight","d":"A typography primitive that mimics a marker stroke sweeping behind a word while the highlighted text shifts to a contrasting color.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"kapishdima","st":"indexed","u":18,"pl":"https://cdn.21st.dev/reapollo/marker-highlight/default/preview.1776100454147.png","pc":"kapishdima"},{"id":"21st:kapishdima__masked-slide-reveal","t":"Masked slide reveal","d":"Words slide up out of an invisible horizontal mask, one after another.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"kapishdima","st":"indexed","pl":"https://cdn.21st.dev/kapishdima/masked-slide-reveal/default/preview.1785311412888-8e6daa11-f271-423b-bc16-74ecdcc29ba2.png","pc":"kapishdima"},{"id":"21st:kapishdima__remocn-perspective-marquee","t":"Remocn perspective marquee","d":"A 3D-tilted infinite marquee with depth-of-field blur on items rolling toward the horizon.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"kapishdima","st":"indexed","u":29,"pl":"https://cdn.21st.dev/kapishdima/remocn-perspective-marquee/default/preview.1785371871820-dda737c8-0257-48ea-b4dd-10e8ac2a0066.png","pc":"kapishdima"},{"id":"21st:kapishdima__tracking-in","t":"Tracking in","d":"Letter-spacing collapses and blur clears with a springy entrance.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"kapishdima","st":"indexed","pl":"https://cdn.21st.dev/kapishdima/tracking-in/default/preview.1785371608314-6f35d3cc-d51d-4685-ae2e-1a7ad3a41961.png","pc":"kapishdima"},{"id":"21st:karthikmudunuri__animated-badge","t":"Animated badge","d":"An animated badge component with customizable text, color, and optional link functionality featuring a pulsing dot and smooth entrance animations.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"karthikmudunuri","st":"indexed","u":75,"pl":"https://cdn.21st.dev/karthikmudunuri/animated-badge/default/preview.1759924180722.png","pc":"karthikmudunuri","tg":["badge","link"]},{"id":"21st:karthikmudunuri__animated-card","t":"Animated card","d":"Here is Animated Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-card/default/preview.1750540472139.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__animated-list","t":"Animated list","d":"A dynamic list component with smooth animations that forms a column and scrolls through items continuously.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/karthikmudunuri/animated-list/default/preview.1762086426671.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__clerk-otp","t":"Clerk otp","d":"An animated OTP (One-Time Password) input component with random digits, customizable delay, hover control, and card customization for authentication flows.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/karthikmudunuri/clerk-otp/default/preview.1762086948159.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__cobe-globe","t":"Cobe globe","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/karthikmudunuri/cobe-globe/default/preview.1762087314109.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__dynamic-square","t":"Dynamic square","d":"Here is Dynamic Squraes component","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dynamic-square/default/preview.1750540230417.png","pc":"karthikmudunuri","tg":["announcement"]},{"id":"21st:karthikmudunuri__gradient-pricing","t":"Gradient pricing","d":"Here is Gradient Pricing component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/larsen66/gradient-pricing/default/preview.1750539705739.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__header-02","t":"Header 02","d":"A responsive site header with a navigation bar, animated logo, optional banner slot, and an animated mobile disclosure menu.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"karthikmudunuri","st":"indexed","u":36,"pl":"https://cdn.21st.dev/eldoraui/header-02/default/preview.1783571038832.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__integrations","t":"Integrations","d":"Animated integrations showcase component with marquee effects and gradient backgrounds.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/karthikmudunuri/integrations/default/preview.1762087738286.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__orbit-rotation","t":"Orbit rotation","d":"An animated component that rotates customizable tech/brand icons in concentric dotted orbits around a center icon.","k":"component","s":"21st","c":"media/icon","g":"media","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/eldoraui/orbit-rotation/default/preview.1783569872737.png","pc":"karthikmudunuri","tg":["icon"]},{"id":"21st:karthikmudunuri__terminal","t":"Terminal","d":"Interactive terminal component with typing animation and localhost notification.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"karthikmudunuri","st":"indexed","pl":"https://cdn.21st.dev/karthikmudunuri/terminal/default/preview.1762088293141.png","pc":"karthikmudunuri"},{"id":"21st:karthikmudunuri__testimonal-slider","t":"Testimonal slider","d":"Here is Testimonal Slider component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"karthikmudunuri","st":"indexed","u":58,"pl":"https://cdn.21st.dev/larsen66/testimonal-slider/default/preview.1750539877697.png","pc":"karthikmudunuri","tg":["carousel","slider","testimonials"]},{"id":"21st:karthikmudunuri__testimonals-carousel","t":"Testimonals carousel","d":"Here is Testimonals Carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"karthikmudunuri","st":"indexed","u":54,"pl":"https://cdn.21st.dev/larsen66/testimonals-carousel/default/preview.1750539203962.png","pc":"karthikmudunuri","tg":["carousel","testimonials"]},{"id":"21st:karthiksivacharan__neon-nebula","t":"Neon nebula","d":"Animated (wave) ASCII art in the Stars style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"component","s":"21st","c":"media/player","g":"media","a":"karthiksivacharan","st":"indexed","pl":"https://cdn.21st.dev/karthiksivacharan/neon-nebula/default/preview.1784528460121-feecbe98-ea68-4078-b314-a0baa4076664.webp","pc":"karthiksivacharan","tg":["background","video"]},{"id":"21st:kauasodreas__blur-text-effect","t":"Blur text effect","d":"A letter-by-letter animation that fades in each character with upward motion and blur removal for a soft, clean reveal. Ideal for expressive entrances or subtle emphasis in UI.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kauasodreas","st":"indexed","u":83,"pl":"https://cdn.21st.dev/kauasodreas/blur-text-effect/default/preview.1750630324126.png","pc":"kauasodreas","tg":["text"]},{"id":"21st:kauasodreas__stepper","t":"Stepper","d":"A draggable stepper component that lets users increment or decrement a number by dragging up or down. It includes smooth animations, clamping between min and max values, and works ","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"kauasodreas","st":"indexed","u":4,"pl":"https://cdn.21st.dev/kauasodreas/stepper/default/preview.1750147503099.png","pc":"kauasodreas"},{"id":"21st:kauasodreas__whisper-text","t":"Whisper text","d":"A scroll-triggered animation that reveals words with a smooth, staggered fade and slide, like a whisper on screen. Perfect for subtle UI transitions. Named “Whisper” for its soft a","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kauasodreas","st":"indexed","u":30,"pl":"https://cdn.21st.dev/kauasodreas/whisper-text/default/preview.1750629702111.png","pc":"kauasodreas","tg":["scroll-area","text"]},{"id":"21st:kaushalkadariya2062__spotlight-reveal-hero","t":"Spotlight reveal hero","d":"Cursor-tracked spotlight reveals a hidden image beneath the hero, with animated headline and CTA. Great for editorial or luxury/craft brands wanting a tactile first impression.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kaushalkadariya2062","st":"indexed","pl":"https://cdn.21st.dev/kaushalkadariya2062/spotlight-reveal-hero/default/preview.1785327358011-5f7cafae-8728-4b58-888a-07de62684ea1.webp","pc":"kaushalkadariya2062"},{"id":"21st:kauxhik77__card-fan","t":"Card fan","d":"3D deck of frosted-glass cards with immersive interaction. Scroll, drag, or use arrow keys to navigate a curved 3D carousel featuring frosted-glass styling, animated mesh gradients","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kauxhik77","st":"indexed","pl":"https://cdn.21st.dev/kauxhik77/card-fan/default/preview.1785147213372-7c179bb3-cf10-453b-845c-19c97f2961d1.png","pc":"kauxhik77"},{"id":"21st:kavikatiyar__3d-card","t":"3d card","d":"Destination Card – Showcase travel spots. Highlights locations with image, details, and a quick booking option for better trip planning.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":65,"pl":"https://cdn.21st.dev/kavikatiyar/3d-card/default/preview.1758427566770.png","pc":"kavikatiyar","tg":["card","image"]},{"id":"21st:kavikatiyar__accordion-1","t":"Accordion 1","d":"Accordion – Expandable content container. Organizes information into collapsible sections for better readability and space-saving layouts. Ideal for FAQs, settings, and multi-topic","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/accordion-1/default/preview.1761994592373.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__alert","t":"Alert","d":"Gradient Alert\nA theme-aware, animated alert component that displays contextual messages for different states like information, success, warning, and error.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"kavikatiyar","st":"indexed","u":32,"pl":"https://cdn.21st.dev/kavikatiyar/alert/default/preview.1758822077433.png","pc":"kavikatiyar","tg":["alert","notification"]},{"id":"21st:kavikatiyar__animated-card","t":"Animated card","d":"AnimatedJobCard\nThis component displays job posting information with a subtle, interactive 3D tilt animation on hover. It's designed to be highly reusable, accepting props for cont","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":36,"pl":"https://cdn.21st.dev/kavikatiyar/animated-card/default/preview.1758824534287.png","pc":"kavikatiyar","tg":["card","carousel"]},{"id":"21st:kavikatiyar__article-cards","t":"Article cards","d":"Article Card\nThis component displays a visually rich card for articles, featuring a background image with a gradient overlay, category, title, and a call-to-action button. It's des","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kavikatiyar","st":"indexed","u":7,"pl":"https://cdn.21st.dev/kavikatiyar/article-cards/default/preview.1758962252221.png","pc":"kavikatiyar","tg":["image"]},{"id":"21st:kavikatiyar__audiobook-card","t":"Audiobook card","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/audiobook-card/default/preview.1758519497227.png","pc":"kavikatiyar","tg":["slider"]},{"id":"21st:kavikatiyar__bento-product-features","t":"Bento product features","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"kavikatiyar","st":"indexed","u":356,"pl":"https://cdn.21st.dev/kavikatiyar/bento-product-features/default/preview.1760867363472.png","pc":"kavikatiyar","tg":["dashboard","features"]},{"id":"21st:kavikatiyar__call-to-action-cta","t":"Call to action cta","d":"Call to Action Card\nA full-width, visually engaging card that combines a background image with a title, description, and an email signup form. It's designed to capture user attenti","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"kavikatiyar","st":"indexed","u":115,"pl":"https://cdn.21st.dev/kavikatiyar/call-to-action-cta/default/preview.1760261921524.png","pc":"kavikatiyar","tg":["cta"]},{"id":"21st:kavikatiyar__card","t":"Card","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/card/default/preview.1757902159658.png","pc":"kavikatiyar","tg":["dashboard"]},{"id":"21st:kavikatiyar__card-1","t":"Card 1","d":"Cashback Partners Card\nThis component displays a card with a title and a grid of partner logos, names, and cashback percentages. It's designed to be responsive and theme-aware, ada","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":48,"pl":"https://cdn.21st.dev/kavikatiyar/card-1/default/preview.1757903345267.png","pc":"kavikatiyar","tg":["card","grid"]},{"id":"21st:kavikatiyar__card-2","t":"Card 2","d":"Quick Links Card\nA card component that displays a title, subtitle, and a set of actionable icon buttons for quick access to common tasks.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":15,"pl":"https://cdn.21st.dev/kavikatiyar/card-2/default/preview.1757903659626.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__card-3","t":"Card 3","d":"Payment Summary Card\nA visually appealing card to display financial summaries, featuring a main metric, a clickable sub-section, and an avatar stack.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kavikatiyar","st":"indexed","u":31,"pl":"https://cdn.21st.dev/kavikatiyar/card-3/default/preview.1757903988321.png","pc":"kavikatiyar","tg":["stat"]},{"id":"21st:kavikatiyar__card-4","t":"Card 4","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/card-4/default/preview.1757904473942.png","pc":"kavikatiyar","tg":["profile"]},{"id":"21st:kavikatiyar__card-5","t":"Card 5","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/card-5/default/preview.1758069842246.png","pc":"kavikatiyar","tg":["radio-group"]},{"id":"21st:kavikatiyar__card-6","t":"Card 6","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/card-6/default/preview.1758072983049.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__card-7","t":"Card 7","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/card-7/default/preview.1758073775405.png","pc":"kavikatiyar","tg":["image"]},{"id":"21st:kavikatiyar__card-8","t":"Card 8","d":"Alert Card\nA visually engaging, animated alert card to deliver","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"kavikatiyar","st":"indexed","u":30,"pl":"https://cdn.21st.dev/kavikatiyar/card-8/default/preview.1758081929728.png","pc":"kavikatiyar","tg":["alert","notification"]},{"id":"21st:kavikatiyar__card-9","t":"Card 9","d":"PromoCard\nAn advanced, self-contained promotional card designed to be visually engaging and build user trust. It features an embedded animated dot-pattern background for texture, a","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":22,"pl":"https://cdn.21st.dev/kavikatiyar/card-9/default/preview.1758160328210.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__cards-grid","t":"Cards grid","d":"Resource Cards Grid\nA responsive grid of cards, perfect for displaying links to key resource sections like documentation, contracts, or policies. Each card features an icon, title,","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"kavikatiyar","st":"indexed","u":29,"pl":"https://cdn.21st.dev/kavikatiyar/cards-grid/default/preview.1760425786559.png","pc":"kavikatiyar","tg":["features"]},{"id":"21st:kavikatiyar__chat-bubble","t":"Chat bubble","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/chat-bubble/default/preview.1758288137841.png","pc":"kavikatiyar","tg":["modal"]},{"id":"21st:kavikatiyar__circular-progress-card","t":"Circular progress card","d":"Circular Progress Card\nThis component displays progress towards a goal using an animated circular bar. The color of the progress bar, along with other content, can be easily custom","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"kavikatiyar","st":"indexed","u":46,"pl":"https://cdn.21st.dev/kavikatiyar/circular-progress-card/default/preview.1758103636331.png","pc":"kavikatiyar","tg":["progress"]},{"id":"21st:kavikatiyar__command-prompt","t":"Command prompt","d":"This component provides an input field for user queries, enhanced with animated suggestion cards that appear on load. It is designed to be a central interaction point for an applic","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/command-prompt/default/preview.1758353926727.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__date-picker","t":"Date picker","d":"Weekly Date Picker\nA compact and interactive component for selecting a date within a weekly view. It supports keyboard navigation, is fully themeable using shadcn/ui variables, and","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"kavikatiyar","st":"indexed","u":8,"pl":"https://cdn.21st.dev/kavikatiyar/date-picker/default/preview.1757904287721.png","pc":"kavikatiyar","tg":["calendar","date-picker"]},{"id":"21st:kavikatiyar__email-client-card","t":"Email client card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/email-client-card/default/preview.1760156484045.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__faq-section","t":"Faq section","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/faq-section/default/preview.1760775932594.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__financial-goal-card","t":"Financial goal card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/financial-goal-card/default/preview.1759670814214.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__form","t":"Form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kavikatiyar","st":"rated","pl":"https://cdn.21st.dev/kavikatiyar/form/default/preview.1760615501220.png","pc":"kavikatiyar","sc":17},{"id":"21st:kavikatiyar__goal-tracker-card","t":"Goal tracker card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/goal-tracker-card/default/preview.1759672373106.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__hero-video-background","t":"Hero video background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/hero-video-background/default/preview.1758807106048.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__interactive-broker-card","t":"Interactive broker card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/interactive-broker-card/default/preview.1759420116661.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__meeting-scheduler","t":"Meeting scheduler","d":"Meeting Scheduler\nThis component provides a comprehensive interface for scheduling events, featuring a responsive calendar for date range selection, time inputs, and additional opt","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"kavikatiyar","st":"indexed","u":31,"pl":"https://cdn.21st.dev/kavikatiyar/meeting-scheduler/default/preview.1759055568324.png","pc":"kavikatiyar","tg":["calendar","date-picker"]},{"id":"21st:kavikatiyar__newsletter-card","t":"Newsletter card","d":"Newsletter Card\nA visually polished and accessible newsletter sign-up form. It features a distinct, theme-aware color palette and subtle animations on focus and hover to enhance us","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"kavikatiyar","st":"indexed","u":11,"pl":"https://cdn.21st.dev/kavikatiyar/newsletter-card/default/preview.1758909342782.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__onboarding-checklist","t":"Onboarding checklist","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/onboarding-checklist/default/preview.1760421380604.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__order-confirmation-card","t":"Order confirmation card","d":"Order Confirmation Card\nThis card provides a visually polished summary of a successful order. It's built to be reusable, accepting props for all dynamic data like order ID, payment","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":32,"pl":"https://cdn.21st.dev/kavikatiyar/order-confirmation-card/default/preview.1760520812282.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__order-history","t":"Order history","d":"Order History – Track every step. Shows order progress from placed to delivered with clear timeline.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"kavikatiyar","st":"indexed","u":23,"pl":"https://cdn.21st.dev/kavikatiyar/order-history/default/preview.1758097678410.png","pc":"kavikatiyar","tg":["timeline"]},{"id":"21st:kavikatiyar__otp-verification","t":"Otp verification","k":"component","s":"21st","c":"inputs/otp-input","g":"inputs","a":"kavikatiyar","st":"rated","pl":"https://cdn.21st.dev/kavikatiyar/otp-verification/default/preview.1759657526434.png","pc":"kavikatiyar","sc":17},{"id":"21st:kavikatiyar__performance-benchmark-card","t":"Performance benchmark card","d":"Performance Benchmark Card\nThis component provides a comprehensive view of a key metric against benchmarks and competitors. It's designed to be highly reusable, allowing you to fee","k":"section","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":51,"pl":"https://cdn.21st.dev/kavikatiyar/performance-benchmark-card/default/preview.1759907015018.png","pc":"kavikatiyar","tg":["comparison","dashboard","progress"]},{"id":"21st:kavikatiyar__performance-card","t":"Performance card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/performance-card/default/preview.1759668554029.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__phone-verification-form","t":"Phone verification form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kavikatiyar","st":"rated","pl":"https://cdn.21st.dev/kavikatiyar/phone-verification-form/default/preview.1759657012892.png","pc":"kavikatiyar","sc":16},{"id":"21st:kavikatiyar__price","t":"Price","d":"Pricing Card Component\nThis component is designed to be highly reusable and customizable through props. It uses framer-motion for animations, cva for handling style variants (like ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kavikatiyar","st":"indexed","u":28,"pl":"https://cdn.21st.dev/kavikatiyar/price/default/preview.1758032740310.png","pc":"kavikatiyar","tg":["pricing-section","table"]},{"id":"21st:kavikatiyar__pricing-card","t":"Pricing card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/pricing-card/default/preview.1759424226001.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__product-detail-page","t":"Product detail page","d":"Product Detail Page\nThis component displays the full details of a product, including an image gallery, pricing, description, and seller information. It is designed to be highly reu","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kavikatiyar","st":"indexed","u":95,"pl":"https://cdn.21st.dev/kavikatiyar/product-detail-page/default/preview.1759821230826.png","pc":"kavikatiyar","tg":["gallery"]},{"id":"21st:kavikatiyar__product-feature-card","t":"Product feature card","d":"Product Feature Card\nA visually polished card component with hover and load-in animations to showcase a product or feature.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"kavikatiyar","st":"indexed","u":13,"pl":"https://cdn.21st.dev/kavikatiyar/product-feature-card/default/preview.1758909975695.png","pc":"kavikatiyar","tg":["features"]},{"id":"21st:kavikatiyar__progress","t":"Progress","d":"Vo2 Max Card\nA visually polished card for displaying a key metric with an animated radial progress indicator. It's ideal for dashboards, fitness trackers, or any application needin","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"kavikatiyar","st":"indexed","u":52,"pl":"https://cdn.21st.dev/kavikatiyar/progress/default/preview.1758071118032.png","pc":"kavikatiyar","tg":["dashboard","progress","stat"]},{"id":"21st:kavikatiyar__progress-card","t":"Progress card","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/progress-card/default/preview.1758265266870.png","pc":"kavikatiyar","tg":["progress","upload-download"]},{"id":"21st:kavikatiyar__project-detail-view","t":"Project detail view","d":"Project Detail View\nA comprehensive view component designed to display the details of a project or a complex task. It includes sections for status, assignees, dates, tags, descript","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":93,"pl":"https://cdn.21st.dev/kavikatiyar/project-detail-view/default/preview.1759027797164.png","pc":"kavikatiyar","tg":["badge","avatar","table"]},{"id":"21st:kavikatiyar__promotional-popup","t":"Promotional popup","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/promotional-popup/default/preview.1762060119033.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__state","t":"State","d":"Full Mailbox State\nThis component informs the user that they have reached a limit, prompting them with primary and secondary actions. It is animated to draw attention and improve u","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"kavikatiyar","st":"indexed","u":10,"pl":"https://cdn.21st.dev/kavikatiyar/state/default/preview.1759325745215.png","pc":"kavikatiyar","tg":["empty-state"]},{"id":"21st:kavikatiyar__stats-card","t":"Stats card","d":" Animated Activity Stats Card\nDescription: A responsive and theme-adaptive card component designed to display key statistics and a corresponding bar chart. It's built to be highly ","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kavikatiyar","st":"indexed","u":42,"pl":"https://cdn.21st.dev/kavikatiyar/stats-card/default/preview.1758266775349.png","pc":"kavikatiyar","tg":["stat"]},{"id":"21st:kavikatiyar__stats-card-1","t":"Stats card 1","d":"Stats Card\nThis is a reusable card component designed to display a key metric, a descriptive summary, and a mini bar chart for trend visualization. It features animations that trig","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":55,"pl":"https://cdn.21st.dev/kavikatiyar/stats-card-1/default/preview.1758356287705.png","pc":"kavikatiyar","tg":["card","dashboard"]},{"id":"21st:kavikatiyar__stock-portfolio-card","t":"Stock portfolio card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/stock-portfolio-card/default/preview.1760113110534.png","pc":"kavikatiyar","tg":["carousel","stat"]},{"id":"21st:kavikatiyar__team-section","t":"Team section","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/team-section/default/preview.1760257288736.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__testimonial","t":"Testimonial","d":"Testimonial Section\nThis component renders a title and a grid of testimonial cards. It's designed to be highly reusable, accepting an array of testimonial objects to dynamically ge","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"kavikatiyar","st":"indexed","u":18,"pl":"https://cdn.21st.dev/kavikatiyar/testimonial/default/preview.1760507060169.png","pc":"kavikatiyar","tg":["testimonials"]},{"id":"21st:kavikatiyar__testimonial-slider","t":"Testimonial slider","d":"Testimonial Slider\nA modern, animated testimonial slider component that showcases user feedback with an image, quote, rating, and navigation controls. It's designed to be easily in","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"kavikatiyar","st":"indexed","u":33,"pl":"https://cdn.21st.dev/kavikatiyar/testimonial-slider/default/preview.1760247857737.png","pc":"kavikatiyar","tg":["carousel","slider","testimonials"]},{"id":"21st:kavikatiyar__testimonial-slider-1","t":"Testimonial slider 1","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"kavikatiyar","st":"indexed","u":131,"pl":"https://cdn.21st.dev/kavikatiyar/testimonial-slider-1/default/preview.1760864329166.png","pc":"kavikatiyar","tg":["carousel","testimonials"]},{"id":"21st:kavikatiyar__tracker-card","t":"Tracker card","d":"Calorie Tracker Card\nA visually engaging card to track daily calorie intake. It features an animated counter, a dynamic progress bar, and a list for food suggestions, all styled us","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","u":5,"pl":"https://cdn.21st.dev/kavikatiyar/tracker-card/default/preview.1758263710399.png","pc":"kavikatiyar"},{"id":"21st:kavikatiyar__tracker-card-1","t":"Tracker card 1","d":"Proposal Tracker Card\nThis component provides a clear, visual timeline for tracking the status of proposals or applications. It's designed to be flexible, allowing you to pass in s","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"kavikatiyar","st":"indexed","u":24,"pl":"https://cdn.21st.dev/kavikatiyar/tracker-card-1/default/preview.1758771247133.png","pc":"kavikatiyar","tg":["steps","timeline"]},{"id":"21st:kavikatiyar__trip-details-card","t":"Trip details card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/kavikatiyar/trip-details-card/default/preview.1758650125831.png","pc":"kavikatiyar"},{"id":"21st:kazmi066__loading-screen","t":"Loading screen","d":"Animated MacBook-style overlay that displays looping gradient skeleton rows with floating status messaging while a site build is in progress, using Framer Motion for smooth transit","k":"component","s":"21st","c":"status/loader","g":"status","a":"kazmi066","st":"indexed","pl":"https://cdn.21st.dev/kazmi066/loading-screen/default/preview.1761132822063.png","pc":"kazmi066"},{"id":"21st:kedhareswer.12110626__alice-scroll-story","t":"Alice scroll story","d":"An immersive scroll-triggered storytelling component featuring Alice's Adventures in Wonderland with GSAP animations, parallax effects, and dynamic text reveals. Perfect for creati","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"kedhareswer.12110626","st":"indexed","u":29,"pl":"https://cdn.21st.dev/kedhareswer.12110626/alice-scroll-story/default/preview.1758658484453.png","pc":"kedhareswer.12110626","tg":["scroll-area"]},{"id":"21st:kedhareswer.12110626__anchored-action-bar","t":"Anchored action bar","d":"A compact icon action bar with a floating “pointer” that snaps to the hovered or selected button using CSS Anchor Positioning. Includes Material Symbols icons, springy transitions,","k":"component","s":"21st","c":"actions/link","g":"actions","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/anchored-action-bar/default/preview.1759688635424.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__deer-logo","t":"Deer logo","d":"A responsive, interactive SVG animation component featuring a deer silhouette with drawing animation. The component uses Anime.js for smooth path drawing effects and includes paper","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"kedhareswer.12110626","st":"indexed","u":24,"pl":"https://cdn.21st.dev/kedhareswer.12110626/deer-logo/default/preview.1758873875733.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__festivity-hero","t":"Festivity hero","d":"Interactive 3D sphere animation with dynamic collisions, mouse interactions, and breathing effects. Features a loading animation sequence and responsive particle system perfect for","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kedhareswer.12110626","st":"indexed","u":6,"pl":"https://cdn.21st.dev/kedhareswer.12110626/festivity-hero/default/preview.1758782987004.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__frosted-hover","t":"Frosted hover","d":"Immersive navigation showcase that reveals frosted-glass ripples as you hover a grid of interactive hotspots layered over a hero image. Includes the full SVG filter stack for the s","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"kedhareswer.12110626","st":"indexed","u":31,"pl":"https://cdn.21st.dev/kedhareswer.12110626/frosted-hover/default/preview.1758964323973.png","pc":"kedhareswer.12110626","tg":["navigation-menu"]},{"id":"21st:kedhareswer.12110626__glass-cards","t":"Glass cards","d":"Neomorphic and glassmorphism stacked cards with smooth GSAP animations and interactive hover effects","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kedhareswer.12110626","st":"indexed","u":92,"pl":"https://cdn.21st.dev/kedhareswer.12110626/glass-cards/default/preview.1758815300580.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__glass-clock","t":"Glass clock","d":"Braun-inspired glass wall clock UI with real-time Berlin timezone hands, dynamic glass reflections, and an optional Tweakpane control panel for tuning shadows, colors, and motion.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/glass-clock/default/preview.1758982352759.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__hero-section","t":"Hero section","d":"A modern hero section component with gradient background, professional imagery, and call-to-action elements. Features responsive design, glassmorphism effects, and IBM Plex Sans ty","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/hero-section/default/preview.1758860666609.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__hotel-showcase","t":"Hotel showcase","d":"Interactive hotel showcase with GSAP animations featuring image galleries, smooth transitions, and overlay details. Includes hover effects, keyboard navigation, and responsive desi","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"kedhareswer.12110626","st":"indexed","u":29,"pl":"https://cdn.21st.dev/kedhareswer.12110626/hotel-showcase/default/preview.1758729874707.png","pc":"kedhareswer.12110626","tg":["gallery","list"]},{"id":"21st:kedhareswer.12110626__liquid-glass-cards","t":"Liquid glass cards","d":"Apple-inspired liquid glass cards with neumorphic background layers, featuring smooth GSAP animations, scroll-triggered stacking effects, and light theme optimization with subtle g","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/liquid-glass-cards/default/preview.1758816625270.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__mouse-trail","t":"Mouse trail","d":"Interactive GSAP-powered flair trail that spawns floating images along the cursor path for playful motion graphics effects.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"kedhareswer.12110626","st":"indexed","u":25,"pl":"https://cdn.21st.dev/kedhareswer.12110626/mouse-trail/default/preview.1759682904405.png","pc":"kedhareswer.12110626","tg":["cursor"]},{"id":"21st:kedhareswer.12110626__particle-animation","t":"Particle animation","d":"Interactive particle animation with mouse tracking, gooey SVG effects, and animated text. Features a custom cursor that emits particles on movement, creating a dynamic mask reveal ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"kedhareswer.12110626","st":"indexed","u":36,"pl":"https://cdn.21st.dev/kedhareswer.12110626/particle-animation/default/preview.1758723593702.png","pc":"kedhareswer.12110626","tg":["cursor"]},{"id":"21st:kedhareswer.12110626__scroll-book","t":"Scroll book","d":"An interactive 3D scroll book component with GSAP animations that displays demo sketches as pages. Features smooth page-turning animations triggered by scroll, with each page conta","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/scroll-book/default/preview.1758725332239.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__scroll-cards","t":"Scroll cards","d":"A GSAP + ScrollTrigger scroll experience that pins each section and progressively scales and 3D-rotates content “cards” as you scroll. ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kedhareswer.12110626","st":"indexed","pl":"https://cdn.21st.dev/kedhareswer.12110626/scroll-cards/default/preview.1759686052767.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__smiley","t":"Smiley","d":"Interactive grid of animated smiley faces that respond to mouse movement with 3D transforms and morph from sad to happy expressions on hover","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"kedhareswer.12110626","st":"indexed","u":8,"pl":"https://cdn.21st.dev/kedhareswer.12110626/smiley/default/preview.1758726547632.png","pc":"kedhareswer.12110626"},{"id":"21st:kedhareswer.12110626__snow-ball-loading-spinner","t":"Snow ball loading spinner","d":"An animated spinner which gives a feel like rolling snow ball.","k":"component","s":"21st","c":"status/loader","g":"status","a":"kedhareswer.12110626","st":"indexed","u":117,"pl":"https://cdn.21st.dev/kedhareswer.12110626/snow-ball-loading-spinner/default/preview.1758819006200.png","pc":"kedhareswer.12110626","tg":["spinner"]},{"id":"21st:killolocoeurcy__alinyxe","t":"Alinyxe","d":"Animated (shimmer) ASCII art in the Hex Dump style, made with the 21st ASCII editor and baked to a looping video. Styled with a colorful, pixel, retro look. A drop-in, zero-depende","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"killolocoeurcy","st":"indexed","pl":"https://cdn.21st.dev/killolocoeurcy/alinyxe/default/preview.1785500422206-79682986-0949-439a-98fb-ba0d9a408f8a.webp","pc":"killolocoeurcy"},{"id":"21st:killolocoeurcy__alinyxe-2","t":"Alinyxe 2","d":"Animated (shimmer) ASCII art in the Hex Dump style, made with the 21st ASCII editor and baked to a looping video. Styled with a animated, terminal look. A drop-in, zero-dependency ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"killolocoeurcy","st":"indexed","pl":"https://cdn.21st.dev/killolocoeurcy/alinyxe/default/preview.1785500430866-8e7c7d39-dccf-47f4-bcba-10ddf8bb56db.webp","pc":"killolocoeurcy"},{"id":"21st:kimjoonho__silk-shader","t":"Silk shader","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#E0E4FF, #E5E9FF, #F0F2FF, #F0F2FF). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kimjoonho","st":"indexed","pl":"https://cdn.21st.dev/kimjoonho/silk-shader/default/preview.1785908764901-b5f75da9-d23d-49a1-bc0c-1411dcd7f499.webp","pc":"kimjoonho"},{"id":"21st:kinfe123__bento","t":"Bento","d":"Beautifully designed, fully responsive, expertly crafted Bento section","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kinfe123","st":"indexed","u":137,"pl":"https://cdn.21st.dev/kinfe123/bento/default/preview.1756550917692.png","pc":"kinfe123","tg":["card","features"]},{"id":"21st:kinfe123__colorful-pricing","t":"Colorful pricing","d":"beautifully crafted pricing section with amazing themes and fully support black and light mode.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kinfe123","st":"indexed","u":16,"pl":"https://cdn.21st.dev/kinfe123/colorful-pricing/default/preview.1756476643948.png","pc":"kinfe123","tg":["pricing-section"]},{"id":"21st:kinfe123__fuihero-section","t":"Fuihero section","d":"Beautifully designed, fully responsive, expertly crafted Hero examples","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/fuihero-section/default/preview.1751093291214.png","pc":"kinfe123"},{"id":"21st:kinfe123__hero-section","t":"Hero section","d":"Beautifully designed, fully responsive, expertly crafted Hero examples","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/hero-section/default/preview.1755081440274.png","pc":"kinfe123"},{"id":"21st:kinfe123__hero-section-dark","t":"Hero section dark","d":"Hero","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"kinfe123","st":"indexed","u":1511,"pl":"https://cdn.21st.dev/user_2rgfvfP6KhEePYzaDzrZPKcn1JO/hero-section-dark/default/preview.1738001828259.png","pc":"kinfe123","tg":["dashboard","cta"]},{"id":"21st:kinfe123__herowith-logos","t":"Herowith logos","d":"Beautifully designed, fully responsive, expertly crafted Hero examples","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"kinfe123","st":"indexed","u":39,"pl":"https://cdn.21st.dev/kinfe123/herowith-logos/default/preview.1755519875478.png","pc":"kinfe123","tg":["cta"]},{"id":"21st:kinfe123__jelly-animated-hero","t":"Jelly animated hero","d":"Beautifully designed, fully responsive, expertly crafted with amazing jelly animation.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kinfe123","st":"indexed","u":15,"pl":"https://cdn.21st.dev/kinfe123/jelly-animated-hero/default/preview.1756378271789.png","pc":"kinfe123","tg":["dashboard","cta","hero","stat"]},{"id":"21st:kinfe123__jelly-hero","t":"Jelly hero","d":"Beautifully designed, fully responsive, expertly crafted Hero examples","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/jelly-hero/default/preview.1755079019693.png","pc":"kinfe123"},{"id":"21st:kinfe123__pricing","t":"Pricing","d":"Beautifully designed, fully responsive, expertly crafted Auth examples","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/pricing/default/preview.1751198853167.png","pc":"kinfe123"},{"id":"21st:kinfe123__pricing-2","t":"Pricing 2","d":"Beautifully designed, fully responsive, expertly crafted Auth example","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/pricing-2/default/preview.1757078618665.png","pc":"kinfe123"},{"id":"21st:kinfe123__sliding-testimonial","t":"Sliding testimonial","d":"Beautifully designed, fully responsive, expertly crafted Testimonial with sliding animation.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"kinfe123","st":"indexed","u":61,"pl":"https://cdn.21st.dev/kinfe123/sliding-testimonial/default/preview.1757076812503.png","pc":"kinfe123","tg":["carousel","testimonials"]},{"id":"21st:kinfe123__testimonial-2","t":"Testimonial 2","d":"Beautifully designed, fully responsive, expertly crafted Testimonial ","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/kinfe123/testimonial-2/default/preview.1757192528703.png","pc":"kinfe123"},{"id":"21st:kingleonardjr19__blue-noise","t":"Blue noise","d":"Animated WebGL shader background in the Neuro Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kingleonardjr19","st":"indexed","pl":"https://cdn.21st.dev/kingleonardjr19/blue-noise/default/preview.1785714324031-5cef01e5-cb3f-4ac6-8389-12b285506aa2.webp","pc":"kingleonardjr19"},{"id":"21st:kizimmaxim__gpu-accelerated-3d-blur-swiper-gallery","t":"Gpu accelerated 3d blur swiper gallery","d":"A highly optimized, hardware-accelerated image gallery and modal swiper. Features extremely smooth 3D transitions with blur depth effects. Implements intelligent DOM windowing (ren","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kizimmaxim","st":"indexed","pl":"https://cdn.21st.dev/kizimmaxim/gpu-accelerated-3d-blur-swiper-gallery/default/preview.1772566790745.png","pc":"kizimmaxim"},{"id":"21st:kleimeier.maurice__marbs123","t":"Marbs123","d":"Animated (flicker) ASCII art in the Pixel Art style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections,","k":"component","s":"21st","c":"media/player","g":"media","a":"kleimeier.maurice","st":"indexed","pl":"https://cdn.21st.dev/kleimeier.maurice/marbs123/default/preview.1783943482545.webp","pc":"kleimeier.maurice","tg":["video"]},{"id":"21st:kmchiii69__kim","t":"Kim","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 4-color palette (#001219, #005F73, #94D2BD, #E9D8A6). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kmchiii69","st":"indexed","pl":"https://cdn.21st.dev/kmchiii69/kim/default/preview.1786452321229-b647cad3-3899-4b1f-9a79-5ac386e7b871.webp","pc":"kmchiii69"},{"id":"21st:kokonutd__action-search-bar","t":"Action search bar","d":"Action search bar inspired from Raycast","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"kokonutd","st":"rated","u":492,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/action-search-bar/default/preview.1737986716282.png","pc":"kokonutd","tg":["list","search"],"sc":24},{"id":"21st:kokonutd__activity-card","t":"Activity card","d":"A versatile card component for displaying fitness and activity tracking data with interactive goals and metrics visualization.\n\nFeatures\n\n- Metric Rings\n  - Circular progress indic","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kokonutd","st":"indexed","u":136,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/activity-card.png","pc":"kokonutd","tg":["checkbox","stat"]},{"id":"21st:kokonutd__ai-input","t":"Ai input","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-input.png","pc":"kokonutd","tg":["textarea"]},{"id":"21st:kokonutd__ai-input-with-file","t":"Ai input with file","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-input-with-file.png","pc":"kokonutd","tg":["textarea","upload-download"]},{"id":"21st:kokonutd__ai-input-with-loading","t":"Ai input with loading","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-input-with-loading.png","pc":"kokonutd","tg":["ai-chat","input","textarea"]},{"id":"21st:kokonutd__ai-input-with-search","t":"Ai input with search","d":"A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transit","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"kokonutd","st":"indexed","u":567,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-input-with-search.png","pc":"kokonutd","tg":["search","textarea","upload-download"]},{"id":"21st:kokonutd__ai-input-with-suggestions","t":"Ai input with suggestions","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-input-with-suggestions.png","pc":"kokonutd","tg":["ai-chat","chip","textarea"]},{"id":"21st:kokonutd__ai-loading","t":"Ai loading","d":"An animated AI loading state that cycles through task statuses with scrolling terminal-style log lines and a colorful circular progress spinner.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/ai-loading/default/preview.1783694025886.png","pc":"kokonutd","tg":["ai-chat","spinner"]},{"id":"21st:kokonutd__ai-text-loading","t":"Ai text loading","d":"An animated loading indicator that cycles through status text with a shimmering gradient sweep, ideal for AI thinking or processing states.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/ai-text-loading/default/preview.1783694022621.png","pc":"kokonutd","tg":["spinner","text"]},{"id":"21st:kokonutd__ai-voice-input","t":"Ai voice input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-voice-input.png","pc":"kokonutd"},{"id":"21st:kokonutd__animated-ai-input","t":"Animated ai input","d":"AI input with animated model switching. ","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"kokonutd","st":"rated","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/animated-ai-input/default/preview.1746444542947.png","pc":"kokonutd","tg":["ai-chat","upload-download"],"sc":18},{"id":"21st:kokonutd__apple-activity-ring","t":"Apple activity ring","d":"Animated rings based on Apple Fitness. ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/apple-activity-ring/default/preview.1750944579105.png","pc":"kokonutd","tg":["progress"]},{"id":"21st:kokonutd__avatar-picker","t":"Avatar picker","d":"Animated avatar picker. ","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"kokonutd","st":"indexed","u":44,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/avatar-picker/default/preview.1745329189628.png","pc":"kokonutd","tg":["avatar","profile"]},{"id":"21st:kokonutd__background-circles","t":"Background circles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kokonutd","st":"indexed","u":391,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/background-circles/default/preview.png","pc":"kokonutd","tg":["background"]},{"id":"21st:kokonutd__background-paths","t":"Background paths","d":"Landing Background paths with Gradient Title","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kokonutd","st":"indexed","u":5827,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/background-paths/default/preview.png","pc":"kokonutd","tg":["cta","hero"]},{"id":"21st:kokonutd__beams-background","t":"Beams background","d":"Beams Bacground animated with colors","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/beams-background/default/preview.png","pc":"kokonutd","tg":["background"]},{"id":"21st:kokonutd__bento-grid","t":"Bento grid","d":"A nice Bento Grid with hover items and shadow.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"kokonutd","st":"indexed","u":1253,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/bento-grid/default/preview.1738072374201.png","pc":"kokonutd"},{"id":"21st:kokonutd__button-colorful","t":"Button colorful","k":"component","s":"21st","c":"actions/button","g":"actions","a":"kokonutd","st":"indexed","u":1067,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/button-colorful.png","pc":"kokonutd"},{"id":"21st:kokonutd__button-shiny","t":"Button shiny","d":"Shiny Button with shadow gradiant","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"kokonutd","st":"indexed","u":249,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/button-shiny.png","pc":"kokonutd","tg":["cta"]},{"id":"21st:kokonutd__carousel-cards","t":"Carousel cards","d":"A horizontally scrollable carousel of experience cards with image, rating, price, and favorite button, ideal for showcasing listings or products.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"kokonutd","st":"indexed","u":11,"pl":"https://cdn.21st.dev/kokonutd/carousel-cards/default/preview.1783709793306.png","pc":"kokonutd","tg":["carousel","gallery","scroll-area"]},{"id":"21st:kokonutd__chat-card","t":"Chat card","d":"A modern chat interface component that provides a complete messaging experience with reactions, status indicators, and theme support.\n\nFeatures\n\n- Message Display\n  - Message histo","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kokonutd","st":"rated","u":81,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/chat-card.png","pc":"kokonutd","sc":20},{"id":"21st:kokonutd__color-input","t":"Color input","d":"A sophisticated color input component with opacity control, color swatches, and clipboard integration.\n\nFeatures\n\n- Color Management\n  - HEX color input\n  - Visual color preview\n  ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"kokonutd","st":"indexed","u":88,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/color-input.png","pc":"kokonutd","tg":["slider"]},{"id":"21st:kokonutd__creative-pricing","t":"Creative pricing","d":"A nice creative design ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kokonutd","st":"indexed","u":441,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/creative-pricing/default/preview.png","pc":"kokonutd","tg":["badge","icon","pricing-section","table"]},{"id":"21st:kokonutd__faq","t":"Faq","d":"A comprehensive FAQ section component with animated accordions, gradient styling, and an optional contact prompt. Built with shadcn/ui primitives and Framer Motion animations.\n\nFea","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"kokonutd","st":"indexed","u":569,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/faq.png","pc":"kokonutd","tg":["accordion","faq"]},{"id":"21st:kokonutd__faq-with-categories","t":"Faq with categories","d":"A comprehensive FAQ section component that features categorized questions using shadcn/ui primitives, including accordion items with category badges.\n\nFeatures\n\n- Header Section\n  ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"kokonutd","st":"indexed","u":135,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/faq-with-categories.png","pc":"kokonutd","tg":["accordion","faq"]},{"id":"21st:kokonutd__glitch-text","t":"Glitch text","d":"An animated glitch text effect with configurable color schemes, intensity, and size for headings and hero titles.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/glitch-text/default/preview.1784397724573-a361e842-88f4-433b-bc64-0f00e7784f61.png","pc":"kokonutd","tg":["text"]},{"id":"21st:kokonutd__hand-writing-text","t":"Hand writing text","d":"A nice svg hand written text","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","u":658,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/hand-writing-text/default/preview.png","pc":"kokonutd","tg":["text"]},{"id":"21st:kokonutd__hero-fashion","t":"Hero fashion","d":"Minimalist Hero for Fashion brand with minimalist animations. ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kokonutd","st":"indexed","u":34,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/hero-fashion/demo-hero-fashion/preview.png","pc":"kokonutd","tg":["hero"]},{"id":"21st:kokonutd__hold-and-release-button","t":"Hold and release button","d":"Hold and Release Button, great for deletion confirmation. ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/hold-and-release-button.png","pc":"kokonutd"},{"id":"21st:kokonutd__input","t":"Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/input.png","pc":"kokonutd","tg":["input"]},{"id":"21st:kokonutd__interactive-checkout","t":"Interactive checkout","d":"Interactive checkout when adding items to shopping cart.","k":"component","s":"21st","c":"other","g":"other","a":"kokonutd","st":"indexed","u":142,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/interactive-checkout/default/preview.1738000138226.png","pc":"kokonutd"},{"id":"21st:kokonutd__magnetize-button","t":"Magnetize button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"kokonutd","st":"indexed","u":352,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/magnetize-button.png","pc":"kokonutd"},{"id":"21st:kokonutd__matrix-text","t":"Matrix text","d":"Matrix Text Animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/matrix-text/default/preview.png","pc":"kokonutd","tg":["text"]},{"id":"21st:kokonutd__modal-pricing","t":"Modal pricing","d":"A modal to choose between two pricing. ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"kokonutd","st":"indexed","u":135,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/modal-pricing/default/preview.1738070756820.png","pc":"kokonutd","tg":["modal","pricing-section"]},{"id":"21st:kokonutd__numeric-input","t":"Numeric input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/numeric-input.png","pc":"kokonutd","tg":["input","progress"]},{"id":"21st:kokonutd__particle-button","t":"Particle button","d":"A little particle animation on submit","k":"component","s":"21st","c":"actions/button","g":"actions","a":"kokonutd","st":"indexed","u":312,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/particle-button/default/preview.1738000939635.png","pc":"kokonutd"},{"id":"21st:kokonutd__password-input","t":"Password input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/password-input.png","pc":"kokonutd"},{"id":"21st:kokonutd__pricing-cards","t":"Pricing cards","d":"A responsive pricing cards component with customizable tiers, features, and dark mode support.\n\nFeatures\n- Responsive grid layout (1 column on mobile, 2 columns on desktop)\n- Dark ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kokonutd","st":"indexed","u":150,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/pricing-cards.png","pc":"kokonutd","tg":["features","pricing-section"]},{"id":"21st:kokonutd__pricing-section","t":"Pricing section","d":"Pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kokonutd","st":"indexed","u":487,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/pricing-section.png","pc":"kokonutd","tg":["badge","pricing-section","table","toggle"]},{"id":"21st:kokonutd__pricing-table","t":"Pricing table","d":"A feature comparison pricing table component with animated pricing, interval switching, and plan selection.\n\nFeatures\n- Animated price transitions with NumberFlow\n- Monthly/Yearly ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"kokonutd","st":"indexed","u":351,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/pricing-table.png","pc":"kokonutd","tg":["comparison","pricing-section","table"]},{"id":"21st:kokonutd__profile-dropdown","t":"Profile dropdown","d":"A profile dropdown for Users.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"kokonutd","st":"indexed","u":111,"pl":"https://cdn.21st.dev/kokonutd/profile-dropdown/default/preview.1759675196471.png","pc":"kokonutd","tg":["badge","avatar","dropdown","menu"]},{"id":"21st:kokonutd__shape-landing-hero","t":"Shape landing hero","d":"A nicely landing with shapes and color.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"kokonutd","st":"indexed","u":4541,"pl":"https://cdn.21st.dev/kokonutd/shape-landing-hero/default/preview.1785431272869-4471b98b-d626-4c8e-979f-e8f3ec494409.png","pc":"kokonutd"},{"id":"21st:kokonutd__sliced-text","t":"Sliced text","d":"An animated text that splits into two horizontal halves and slices apart on hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/sliced-text/default/preview.1784686712601-525dff9f-05ef-43e9-aad0-55e33e77b00f.png","pc":"kokonutd","tg":["text"]},{"id":"21st:kokonutd__social-card","t":"Social card","d":"A modern, interactive social media card component with engagement features. Supports dark mode, animations, and customizable content.\n\nFeatures:\n\t•\tInteractive engagement buttons (","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kokonutd","st":"rated","u":123,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/social-card.png","pc":"kokonutd","sc":17},{"id":"21st:kokonutd__swoosh-text","t":"Swoosh text","d":"Bold italic text with a layered colorful drop-shadow that swooshes away on hover.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/swoosh-text/default/preview.1784419007879-a725beec-0bf4-4db4-a87a-1a8769783353.png","pc":"kokonutd"},{"id":"21st:kokonutd__tag-input","t":"Tag input","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/tag-input.png","pc":"kokonutd","tg":["chip"]},{"id":"21st:kokonutd__team-invitation","t":"Team invitation","d":"Team Invitation notification","k":"section","s":"21st","c":"data-display/card","g":"data-display","a":"kokonutd","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/team-invitation.png","pc":"kokonutd","tg":["notification","team"]},{"id":"21st:kokonutd__text-rewind","t":"Text rewind","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","u":114,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/text-rewind.png","pc":"kokonutd"},{"id":"21st:kokonutd__toolbar","t":"Toolbar","d":"Toolbar with actions","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/toolbar.png","pc":"kokonutd","tg":["search"]},{"id":"21st:kokonutd__type-writer","t":"Type writer","d":"An animated typewriter title that types, pauses, deletes and loops through a sequence of words with a blinking cursor and natural typing variance.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd/type-writer/default/preview.1784436957612-59158522-e6c7-4b63-b33b-7fe401d040c2.png","pc":"kokonutd"},{"id":"21st:kokonutd__use-auto-resize-textarea","t":"Use auto resize textarea","d":"A hook that automatically resizes a textarea based on its content","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/use-auto-resize-textarea.png","pc":"kokonutd","tg":["hook","textarea"]},{"id":"21st:kokonutd__use-file-input","t":"Use file input","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/use-file-input.png","pc":"kokonutd","tg":["hook","upload-download"]},{"id":"21st:kokonutd__use-tags","t":"Use tags","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/use-tags.png","pc":"kokonutd","tg":["chip","hook"]},{"id":"21st:kokonutd__v0-ai-chat","t":"V0 ai chat","d":"Design of the v0 AI Chat","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/v0-ai-chat/default/preview.png","pc":"kokonutd","tg":["ai-chat","upload-download"]},{"id":"21st:kokonutd__wave-text","t":"Wave text","d":"A basic Wave Text on Hover","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kokonutd","st":"indexed","u":124,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/wave-text/default/preview.1737985100989.png","pc":"kokonutd","tg":["text"]},{"id":"21st:kokonutd__x-gradient-card","t":"X gradient card","d":"A nice gradient Card displaying a post from X (Twitter)","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kokonutd","st":"indexed","u":274,"pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/x-gradient-card/default/preview.png","pc":"kokonutd"},{"id":"21st:kom.sujautra__liquid-glass-donut","t":"Liquid glass donut","d":"A refractive 3D torus built with MeshTransmissionMaterial, simulating realistic glass-like distortion and depth. It dynamically bends light and deforms text behind it","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kom.sujautra","st":"indexed","pl":"https://cdn.21st.dev/kom.sujautra/liquid-glass-donut/default/preview.1751116342760.png","pc":"kom.sujautra"},{"id":"21st:koppkvn__counter","t":"Counter","d":"Counting stuff","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"koppkvn","st":"indexed","pl":"https://cdn.21st.dev/koppkvn/counter/default/preview.1770199586910.png","pc":"koppkvn"},{"id":"21st:koushik890__desktop-mode-switcher","t":"Desktop mode switcher","d":"A mobile-responsive card component that prompts users to switch from mobile to desktop mode to access the full automation flow builder interface. Features a glassmorphic design wit","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"koushik890","st":"indexed","pl":"https://cdn.21st.dev/koushik890/desktop-mode-switcher/default/preview.1752407817392.png","pc":"koushik890"},{"id":"21st:koustubhayadiyala36__action-searchbar","t":"Action searchbar","d":"Action searchbar the name itself is enough\nAnimated smooth transtitional searchbar with framer motion","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"koustubhayadiyala36","st":"indexed","u":55,"pl":"https://cdn.21st.dev/koustubhayadiyala36/action-searchbar/default/preview.1764332963392.png","pc":"koustubhayadiyala36","tg":["list","search"]},{"id":"21st:koustubhayadiyala36__activity-feed","t":"Activity feed","d":"Activity Feed component for Notification UI component add-ons","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/activity-feed/default/preview.1765293543682.png","pc":"koustubhayadiyala36","sc":17},{"id":"21st:koustubhayadiyala36__analytical-loader","t":"Analytical loader","d":"Analytical Stat Dashboard Loader UI block","k":"component","s":"21st","c":"status/loader","g":"status","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/analytical-loader/default/preview.1765298705808.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__animated-component","t":"Animated component","d":"Complex Animated component for UI styling for websites that deal with AI integration and workflow showcasing","k":"component","s":"21st","c":"other","g":"other","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/animated-component/default/preview.1764330738494.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__animated-list","t":"Animated list","d":"Animated List UI","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/animated-list/default/preview.1772349742387.png","pc":"koustubhayadiyala36","sc":17},{"id":"21st:koustubhayadiyala36__animated-menu","t":"Animated menu","d":"Animated Menu bar with test transitions on hover \neasy transitions .","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"koustubhayadiyala36","st":"indexed","u":85,"pl":"https://cdn.21st.dev/koustubhayadiyala36/animated-menu/default/preview.1764337794160.png","pc":"koustubhayadiyala36","tg":["menu"]},{"id":"21st:koustubhayadiyala36__ascii-log-leet","t":"Ascii log leet","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a neon look. A drop-in, zero-dependency React co","k":"component","s":"21st","c":"media/player","g":"media","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/ascii-log-leet/default/preview.1784294479118-c5da0d28-6c13-4e88-8468-6e540716be5d.webp","pc":"koustubhayadiyala36","tg":["video"]},{"id":"21st:koustubhayadiyala36__callout","t":"Callout","d":"Callout Components . Use callouts to highlight important information in your documentation.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/callout/default/preview.1765298877909.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__circular-command-menu","t":"Circular command menu","d":"Circular Command Menu, toggled circular menu with default 5 menu components ,easily custamizable animated menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"koustubhayadiyala36","st":"indexed","u":48,"pl":"https://cdn.21st.dev/koustubhayadiyala36/circular-command-menu/default/preview.1764409802401.png","pc":"koustubhayadiyala36","tg":["menu","tooltip"]},{"id":"21st:koustubhayadiyala36__dashboard-overview","t":"Dashboard overview","d":"Dashboard Overview animated chart UI component , 2d UI animation","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/dashboard-overview/default/preview.1765299122796.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__empty-cart","t":"Empty cart","d":"Empty cart UI component showcase","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/empty-cart/default/preview.1765291994420.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__file-interactivity","t":"File interactivity","d":"File Interactivity component for UI purpose s, component file styling","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/file-interactivity/default/preview.1765293081123.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__file-tree","t":"File tree","d":"File Tree component UI component for ultiple file showcasing in code realted apps","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/file-tree/default/preview.1765292925016.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__file-upload-progress","t":"File upload progress","d":"File Upload Progress Animation interactive UI with animated loading feature","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/file-upload-progress/default/preview.1765297107809.png","pc":"koustubhayadiyala36","sc":18},{"id":"21st:koustubhayadiyala36__fluid-dropdown","t":"Fluid dropdown","d":"Fluid dropdown component with hover and smooth animations,\ncustomizable colors and Animation","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"koustubhayadiyala36","st":"indexed","u":58,"pl":"https://cdn.21st.dev/koustubhayadiyala36/fluid-dropdown/default/preview.1764602676839.png","pc":"koustubhayadiyala36","tg":["dropdown","menu"]},{"id":"21st:koustubhayadiyala36__inbox","t":"Inbox","d":"Inbox notification all caught up component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/inbox/default/preview.1765291857650.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__magnetbutton","t":"Magnetbutton","d":"hovering magnetic button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/magnetbutton/default/preview.1772349253268.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__morphing-card-stack","t":"Morphing card stack","d":"Unique Crad stack layout different types of layouts from presenting Your data and animations around switching them","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"koustubhayadiyala36","st":"indexed","u":256,"pl":"https://cdn.21st.dev/koustubhayadiyala36/morphing-card-stack/default/preview.1764410711764.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__multi-step-progress","t":"Multi step progress","d":"Multi Step Progress UI Block , for auth or login/account setup process ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/multi-step-progress/default/preview.1765297434733.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__navigation-menu","t":"Navigation menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/navigation-menu/default/preview.1764330563889.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__notification-ui","t":"Notification ui","d":"Notification center animation new type window animation","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/notification-ui/default/preview.1765293861984.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__otp-input","t":"Otp input","d":"otp  input right and wrong UI","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/otp-input/default/preview.1772350212350.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__particle-vortex","t":"Particle vortex","d":"Interactive particle Vortex, fun component for Interactive things as compoents","k":"component","s":"21st","c":"other","g":"other","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/particle-vortex/default/preview.1764411566588.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__preloader","t":"Preloader","k":"component","s":"21st","c":"status/loader","g":"status","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/preloader/default/preview.1764334247755.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__project-timeline","t":"Project timeline","d":"Project Timeline UI component vertical one","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/project-timeline/default/preview.1765296077567.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__real-time-analytics","t":"Real time analytics","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/real-time-analytics/default/preview.1765299824446.png","pc":"koustubhayadiyala36","tg":["dashboard"],"sc":22},{"id":"21st:koustubhayadiyala36__shatter-button","t":"Shatter button","d":"Burst feature on click of button component , can be used for payment submission login/signup's","k":"component","s":"21st","c":"actions/button","g":"actions","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/shatter-button/default/preview.1764412174848.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__spotlight-command-palette","t":"Spotlight command palette","d":"Spotlight Command Palette with on click animation and professional animated UI","k":"component","s":"21st","c":"navigation/command-palette","g":"navigation","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/spotlight-command-palette/default/preview.1765294199280.png","pc":"koustubhayadiyala36","sc":22},{"id":"21st:koustubhayadiyala36__stepper","t":"Stepper","d":"stepper onboarding UI","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/stepper/default/preview.1772349457003.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__task-board","t":"Task board","d":"Task Board draggable component , list item drag and drop funcitonality","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/task-board/default/preview.1765296409875.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__theme-toggle","t":"Theme toggle","d":"Unique type of them toggle from bottom with unique logo and easily changeable transition","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/theme-toggle/default/preview.1764336773284.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__tilt-card","t":"Tilt card","d":"Tilt Card UI","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/tilt-card/default/preview.1772350482173.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__trello-kanban-board","t":"Trello kanban board","d":"Trello Kanban Board drag and drop material component, project overview tasks boards","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"koustubhayadiyala36","st":"indexed","u":48,"pl":"https://cdn.21st.dev/user_35NAal4ngoiwl586UuIyinZjTsG/trello-kanban-board/default/preview.1785925970791.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__txt-animations","t":"Txt animations","d":"Txt Animations countdown,random money range,number flow in view","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/txt-animations/default/preview.1765560178669.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__upload-files","t":"Upload files","d":"File upload empty state Component with File icon floating","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/upload-files/default/preview.1765292255127.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__vercel-navbar","t":"Vercel navbar","d":"Vercel Navigatiob bar which smoothly transitions to upper navbar when scrolled and upper Navbar disappears smoothly and appears as scrolled back, one of vercel scrollbar UI compone","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"koustubhayadiyala36","st":"indexed","pl":"https://cdn.21st.dev/koustubhayadiyala36/vercel-navbar/default/preview.1764245438964.png","pc":"koustubhayadiyala36"},{"id":"21st:koustubhayadiyala36__vs-code-command-palette","t":"Vs code command palette","d":"VS Code Command Palette UI component with vscode theme based styling and icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"koustubhayadiyala36","st":"rated","pl":"https://cdn.21st.dev/koustubhayadiyala36/vs-code-command-palette/default/preview.1765295064866.png","pc":"koustubhayadiyala36","sc":18},{"id":"21st:kristen17__course-design-cards","t":"Course design cards","d":"Here is Course Design Cards component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"kristen17","st":"indexed","u":40,"pl":"https://cdn.21st.dev/larsen66/course-design-cards/default/preview.1753891440996.png","pc":"kristen17","tg":["avatar","card","dashboard","progress"]},{"id":"21st:kristen17__message-design-card-list","t":"Message design card list","d":"Here is Message Design Card List component","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"kristen17","st":"indexed","pl":"https://cdn.21st.dev/larsen66/message-design-card-list/default/preview.1753895144779.png","pc":"kristen17","tg":["sidebar"]},{"id":"21st:kristen17__rounded-box","t":"Rounded box","d":"Here is Rounded Box component","k":"component","s":"21st","c":"other","g":"other","a":"kristen17","st":"indexed","pl":"https://cdn.21st.dev/larsen66/rounded-box/default/preview.1753895583602.png","pc":"kristen17"},{"id":"21st:kristen17__upload-ui","t":"Upload ui","d":"Here is Upload Ui component","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"kristen17","st":"indexed","pl":"https://cdn.21st.dev/larsen66/upload-ui/default/preview.1753894766929.png","pc":"kristen17","tg":["card","progress","upload-download"]},{"id":"21st:kroist__copyableaddress","t":"Copyableaddress","d":"Copy-on-click web3 address component.","k":"component","s":"21st","c":"actions/copy-button","g":"actions","a":"kroist","st":"indexed","pl":"https://cdn.21st.dev/user_2nDnZNwEvM3PHGyEh2VS66CLx4j/copyableaddress.png","pc":"kroist"},{"id":"21st:ksumit1109__tic-tac-toe","t":"Tic tac toe","k":"component","s":"21st","c":"other","g":"other","a":"ksumit1109","st":"indexed","pl":"https://cdn.21st.dev/ksumit1109/tic-tac-toe/default/preview.1765365511927.png","pc":"ksumit1109"},{"id":"21st:kumail_ali_r__core-spin-loader","t":"Core spin loader","d":"Designed to fit seamlessly into dashboards, SaaS products, AI interfaces, and developer tools, CoreSpin Loader delivers a premium visual experience while remaining lightweight and ","k":"component","s":"21st","c":"status/loader","g":"status","a":"kumail_ali_r","st":"indexed","pl":"https://cdn.21st.dev/user_338YwMTIGt8stOiPgn1tRlIAZUm/core-spin-loader/default/preview.1787570522652.png","pc":"kumail_ali_r"},{"id":"21st:kurket21__progressive-hero","t":"Progressive hero","d":"here is progressive hero","k":"component","s":"21st","c":"media/player","g":"media","a":"kurket21","st":"indexed","u":26,"pl":"https://cdn.21st.dev/kurket21/progressive-hero/default/preview.1747357451432.png","pc":"kurket21","tg":["cta","video"]},{"id":"21st:kushal.ict2022__mtfuji","t":"Mtfuji","d":"Animated (flicker) ASCII art in the Diamond style, made with the 21st ASCII editor and baked to a looping video. Styled with a pixel look. A drop-in, zero-dependency React componen","k":"component","s":"21st","c":"media/gallery","g":"media","a":"kushal.ict2022","st":"indexed","pl":"https://cdn.21st.dev/kushal.ict2022/mtfuji/default/preview.1786864817937-155edaf8-afe5-43ee-8a71-dfe123bd9232.webp","pc":"kushal.ict2022"},{"id":"21st:kvnkld__ai-agent-input","t":"Ai agent input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/ai-agent-input/default/preview.1785549206103-42bde365-2942-465f-9ad7-4e676c544d96.png","pc":"kvnkld"},{"id":"21st:kvnkld__code-block","t":"Code block","d":"A compact code snippet block with a filename header, line numbers and a copy-to-clipboard button, ideal for showing code output in AI chat interfaces.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/code-block/default/preview.1785482944355-851d640c-1d50-4413-9584-d9cc5613048f.png","pc":"kvnkld"},{"id":"21st:kvnkld__comparison-table","t":"Comparison table","d":"A compact feature-comparison table that lays out plans across columns and marks which features each plan includes, ideal for pricing and plan comparisons in AI chat responses.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/comparison-table/default/preview.1785549154597-bcc991e8-e541-49c0-8434-77f4645b440a.png","pc":"kvnkld"},{"id":"21st:kvnkld__data-table","t":"Data table","d":"A compact comparison table listing AI models with their context window and price, each row prefixed with the provider's brand icon.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/data-table/default/preview.1785482974797-42b40023-44f8-4ca4-bb79-d14de92b7bec.png","pc":"kvnkld"},{"id":"21st:kvnkld__file-diff","t":"File diff","d":"A compact code file diff viewer showing added and removed lines with line numbers, a header filename, and add/remove counts.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"kvnkld","st":"rated","pl":"https://cdn.21st.dev/kvnkld/file-diff/default/preview.1785482914586-8bd1ffa5-e8cb-43bc-8379-79b6500643ff.png","pc":"kvnkld","sc":19},{"id":"21st:kvnkld__image-generation","t":"Image generation","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/image-generation/default/preview.1785481177160-addd2443-389c-41e3-ab8a-de5c740cb48a.png","pc":"kvnkld","tg":["ai-chat","spinner"]},{"id":"21st:kvnkld__inline-citations","t":"Inline citations","d":"Prose text with inline numbered citation chips that link to sources, reveal the reference name on hover, and list all references in a footer.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/inline-citations/default/preview.1785482929509-640b2bad-ebb8-4825-9616-a0d9aa0d9045.png","pc":"kvnkld","tg":["tooltip"]},{"id":"21st:kvnkld__orbs-helix","t":"Orbs helix","d":"Compact animated helix activity indicators for showing agent status without blocking the thread.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kvnkld","st":"rated","pl":"https://cdn.21st.dev/kvnkld/orbs-helix/default/preview.1786017365123-d7136674-f2ab-4671-b4ce-40a732035929.png","pc":"kvnkld","sc":17},{"id":"21st:kvnkld__orbs-lens","t":"Orbs lens","d":"Compact animated lens activity indicators for showing agent status without blocking the thread.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/orbs-lens/default/preview.1786017346297-0b68ec1a-ed26-401d-a7db-0a76587e1caf.png","pc":"kvnkld"},{"id":"21st:kvnkld__orbs-morph","t":"Orbs morph","d":"Compact animated morph activity indicators for showing agent status without blocking the thread.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/orbs-morph/default/preview.1786017385415-008f4a67-2c90-4cb4-98a2-a009c20b840d.png","pc":"kvnkld"},{"id":"21st:kvnkld__orbs-ring","t":"Orbs ring","d":"Compact animated ring activity indicators for showing agent status without blocking the thread.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/orbs-ring/default/preview.1786017365051-7e48c3df-f88e-4d47-8390-c227f1fa8f07.png","pc":"kvnkld"},{"id":"21st:kvnkld__streaming-text","t":"Streaming text","d":"Typewriter-style streaming text that reveals characters over time with a blinking caret, for AI agent chat and LLM response interfaces.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/streaming-text/default/preview.1785482959332-15d5e671-3e14-4644-a1fa-e0e065a860af.png","pc":"kvnkld"},{"id":"21st:kvnkld__task-list","t":"Task list","d":"An animated Cursor-style to-do checklist that an AI agent maintains, with a collapsible header showing overall progress and done, in-progress, and pending item states.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/task-list/default/preview.1785546579848-04431897-fd20-47b6-a7ce-1af84f61186e.png","pc":"kvnkld"},{"id":"21st:kvnkld__text-response","t":"Text response","d":"Clean prose styling for an AI assistant's text answer with paragraphs and inline code.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/text-response/default/preview.1785482898154-d17c0800-743a-483b-a55c-68f05d2dc493.png","pc":"kvnkld"},{"id":"21st:kvnkld__thinking-reasoning","t":"Thinking reasoning","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/thinking-reasoning/default/preview.1785481132260-1b8a1d49-81d3-4e2d-86c2-a394e9aef2ea.png","pc":"kvnkld","tg":["ai-chat"]},{"id":"21st:kvnkld__thinking-state","t":"Thinking state","d":"A minimal shimmering text label that signals an AI agent is processing before it answers.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"kvnkld","st":"indexed","pl":"https://cdn.21st.dev/kvnkld/thinking-state/default/preview.1785481085095-14b2b246-bdb1-4fbb-9255-71793a7bca0f.png","pc":"kvnkld"},{"id":"21st:kvnkld__web-search","t":"Web search","d":"An animated AI web-search state that streams a query, discovers source links one by one with a spinning globe, then marks each result done with a check.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"kvnkld","st":"rated","pl":"https://cdn.21st.dev/kvnkld/web-search/default/preview.1785545131887-fa0f5120-b757-4583-8cfd-641f3a40607d.png","pc":"kvnkld","sc":21},{"id":"21st:kyesebastian__mee","t":"Mee","d":"Animated (pulse) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, a","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kyesebastian","st":"indexed","pl":"https://cdn.21st.dev/kyesebastian/mee/default/preview.1786652452568-c3a27bc6-42c1-403b-8eab-e72535dbf56a.webp","pc":"kyesebastian"},{"id":"21st:kygsz29__lahit","t":"Lahit","d":"Animated (wave) ASCII art in the Pixel Art style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"kygsz29","st":"indexed","pl":"https://cdn.21st.dev/kygsz29/lahit/default/preview.1786864808975-59d2f8a2-a34c-40b8-9a66-513b19ce7e63.webp","pc":"kygsz29"},{"id":"21st:larsen66__3d-text","t":"3d text","d":"Here is 3D Text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/3d-text/default/preview.1750181195620.png","pc":"larsen66"},{"id":"21st:larsen66__admit-one-ticket","t":"Admit one ticket","d":"A dithered event ticket card with a perforated stub, 3D hover tilt, animated glare, and customizable event details.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/admit-one-ticket/default/preview.1785303886094-77c8e9c5-cc98-4f47-ab07-9d125d2f266d.png","pc":"larsen66","tg":["card"]},{"id":"21st:larsen66__animated-border","t":"Animated border","d":"Here is animated border component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-border/default/preview.1773076912612.png","pc":"larsen66"},{"id":"21st:larsen66__background-gradient-snippet","t":"Background gradient snippet","d":"Here is Background Gradient Snippet component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"larsen66","st":"indexed","u":70,"pl":"https://cdn.21st.dev/larsen66/background-gradient-snippet/default/preview.1756797835869.png","pc":"larsen66","tg":["background"]},{"id":"21st:larsen66__background-snippets-noise-effect11","t":"Background snippets noise effect11","d":"Here is Background Snippets Noise effect component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"larsen66","st":"indexed","u":109,"pl":"https://cdn.21st.dev/larsen66/background-snippets-noise-effect11/default/preview.1756797499983.png","pc":"larsen66","tg":["background","grid"]},{"id":"21st:larsen66__bento-features","t":"Bento features","d":"Here is Bento Features componhent","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"larsen66","st":"indexed","u":40,"pl":"https://cdn.21st.dev/larsen66/bento-features/default/preview.1759166271914.png","pc":"larsen66","tg":["features"]},{"id":"21st:larsen66__bento-monochrome","t":"Bento monochrome","d":"Here is Bento Monochrome component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"larsen66","st":"indexed","u":120,"pl":"https://cdn.21st.dev/larsen66/bento-monochrome/default/preview.1759204336628.png","pc":"larsen66","tg":["features"]},{"id":"21st:larsen66__bento-monochrome-1","t":"Bento monochrome 1","d":"Here is Bento Monochrome 1 componehnt","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"larsen66","st":"indexed","u":59,"pl":"https://cdn.21st.dev/larsen66/bento-monochrome-1/default/preview.1759206307543.png","pc":"larsen66","tg":["features"]},{"id":"21st:larsen66__blueprint-gradient-mesh","t":"Blueprint gradient mesh","d":"Here is Blueprint Gradient Mesh component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"larsen66","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/blueprint-gradient-mesh/default/preview.1756803128499.png","pc":"larsen66","tg":["background"]},{"id":"21st:larsen66__cursor-smoke","t":"Cursor smoke","d":"Here is smokey cursor component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cursor-smoke/default/preview.1750181241233.png","pc":"larsen66"},{"id":"21st:larsen66__expand-on-hover","t":"Expand on hover","d":"Here is expand on hover ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"larsen66","st":"indexed","u":33,"pl":"https://cdn.21st.dev/user_2wdgsmfD3BNOOm4oOqUDUS9IXZI/expand-on-hover/default/preview.1757686298097.png","pc":"larsen66","tg":["carousel","gallery","image"]},{"id":"21st:larsen66__expanded-tabs","t":"Expanded tabs","d":"Here is Expanded Tabs component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"larsen66","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/expanded-tabs/default/preview.1753312217746.png","pc":"larsen66"},{"id":"21st:larsen66__faq-monocrhome","t":"Faq monocrhome","d":"Here is FAQ monochrome section","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"larsen66","st":"indexed","u":152,"pl":"https://cdn.21st.dev/larsen66/faq-monocrhome/default/preview.1759204235333.png","pc":"larsen66","tg":["accordion","faq","toggle"]},{"id":"21st:larsen66__hero-ascii","t":"Hero ascii","d":"Here is Hero ASCII  component","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"larsen66","st":"indexed","u":236,"pl":"https://cdn.21st.dev/larsen66/hero-ascii/default/preview.1760453142930.png","pc":"larsen66"},{"id":"21st:larsen66__hero-ascii-one","t":"Hero ascii one","d":"Hero ASCII one","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"larsen66","st":"indexed","u":228,"pl":"https://cdn.21st.dev/larsen66/hero-ascii-one/default/preview.1760453288815.png","pc":"larsen66"},{"id":"21st:larsen66__hero-futuristic","t":"Hero futuristic","d":"This component renders an interactive 3D scene with a scanning effect and depth map using React Three Fiber and Three.js (WebGPU). It features:\n","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"larsen66","st":"indexed","u":900,"pl":"https://cdn.21st.dev/larsen66/hero-futuristic/default/preview.1747063193351.png","pc":"larsen66","tg":["hero"]},{"id":"21st:larsen66__hole-reveal-hero","t":"Hole reveal hero","d":"Here is Hole reveal Hero  component","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hole-reveal-hero/default/preview.1758877408840.png","pc":"larsen66","tg":["cta"]},{"id":"21st:larsen66__login","t":"Login","d":"a futuristic minimalistic interactive login page","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/login/default/preview.1747007416531.png","pc":"larsen66"},{"id":"21st:larsen66__login-inifinity","t":"Login inifinity","d":"Its simple infinitiy login styled button","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/login-inifinity/default/preview.1747354231995.png","pc":"larsen66"},{"id":"21st:larsen66__login-smoke","t":"Login smoke","d":"Its a simple minimalistic login/signup page with smoking effect","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/login-smoke/default/preview.1747350537411.png","pc":"larsen66"},{"id":"21st:larsen66__motion-accordion","t":"Motion accordion","d":"An accordion that expands and collapses with height and blur, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-accordion/default/preview.1787004234227-a0ea6b44-ce38-4d3f-9401-372b712b80ad.png","pc":"larsen66"},{"id":"21st:larsen66__motion-add-to-basket","t":"Motion add to basket","d":"A Motion for React add-to-basket animation that flies a Campus 00s tile into a cart along a curved arc, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-add-to-basket/default/preview.1786933515261-48286c9d-0432-4078-b738-2dd355d4bac9.png","pc":"larsen66"},{"id":"21st:larsen66__motion-along-path","t":"Motion along path","d":"A Motion for React box that travels an SVG path while the stroke draws in, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-along-path/default/preview.1786969554999-c22869f1-25f5-483a-b0f0-0cd3a212644e.png","pc":"larsen66"},{"id":"21st:larsen66__motion-animate-presence-modes","t":"Motion animate presence modes","d":"A Motion for React demo of AnimatePresence sync, wait, and popLayout modes, from the official Motion examples catalog.","k":"component","s":"21st","c":"status/status-dot","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-animate-presence-modes/default/preview.1786933552296-0b4b0199-3927-4fe3-a3a0-50043bdf0da2.png","pc":"larsen66"},{"id":"21st:larsen66__motion-apple-intelligence","t":"Motion apple intelligence","d":"A Motion for React Apple Intelligence ripple that clones the screen and animates a glow mask, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-apple-intelligence/default/preview.1787004306557-1c743cc6-e3cf-4498-aa70-e710ee174a60.png","pc":"larsen66"},{"id":"21st:larsen66__motion-aspect-ratio","t":"Motion aspect ratio","d":"A Motion for React box whose aspect ratio and width animate with layout, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-aspect-ratio/default/preview.1786990961360-ed176537-3c38-480f-97b6-9edae1ec0e58.png","pc":"larsen66"},{"id":"21st:larsen66__motion-bobble-hover","t":"Motion bobble hover","d":"A 3x3 grid of tiles that bobble with a spring when hovered, with the bounce scaled to how fast the pointer was moving, using Motion for React.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-bobble-hover/default/preview.1787004527884.png","pc":"larsen66"},{"id":"21st:larsen66__motion-bounce-easing","t":"Motion bounce easing","d":"A Motion for React vertical switch that springs on and bounces off, from the official Motion examples catalog.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-bounce-easing/default/preview.1786969581401-7ecdcccf-ce30-416e-a44b-0ea4c5cff495.png","pc":"larsen66"},{"id":"21st:larsen66__motion-card-stack","t":"Motion card stack","d":"A swipeable photo stack that sends the top image to the back, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-card-stack/default/preview.1787004288226-561f439e-2b68-41d4-8f4e-704d01e4bb97.png","pc":"larsen66"},{"id":"21st:larsen66__motion-characters-remaining","t":"Motion characters remaining","d":"An example of creating a character counter with spring animations in Motion for React","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-characters-remaining/default/preview.1786997637983-89302949-fa8c-4a03-a0c9-156fee9c9293.png","pc":"larsen66"},{"id":"21st:larsen66__motion-collision-hover-events-only","t":"Motion collision hover events only","d":"The naive approach: lighting grid cells on pointerenter, which skips cells on a fast cursor. The counter-example to swept collision detection in Motion for React.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-collision-hover-events-only/default/preview.1786997689967-33ac2a71-e25f-4123-a535-2270a7c0c182.png","pc":"larsen66"},{"id":"21st:larsen66__motion-color-interpolation","t":"Motion color interpolation","d":"A Motion for React demo comparing browser and Motion color interpolation, from the official Motion examples catalog.","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-color-interpolation/default/preview.1786990933326-37a83662-1ede-4e46-b1a2-5bb618054d5d.png","pc":"larsen66"},{"id":"21st:larsen66__motion-color-picker","t":"Motion color picker","d":"An example of creating a circular color picker with dots that react to cursor movement with soft springs using Motion for React.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-color-picker/default/preview.1787001632570-1fa8023a-4ca9-4cbd-95ee-482feaa9f879.png","pc":"larsen66"},{"id":"21st:larsen66__motion-confetti","t":"Motion confetti","d":"Celebratory confetti particle explosion triggered by a button press, with spring-driven button feedback and randomised particle physics","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-confetti/default/preview.1787004542255.png","pc":"larsen66"},{"id":"21st:larsen66__motion-conic-gradient-pointer","t":"Motion conic gradient pointer","d":"An example of creating a dynamic conic gradient with motion values and pointer position.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-conic-gradient-pointer/default/preview.1786997664746-5a65d366-0721-49d5-81fb-4ccf8ad3a085.png","pc":"larsen66"},{"id":"21st:larsen66__motion-context-menu","t":"Motion context menu","d":"A right-click context menu with nested Arrange and Transform items, from the official Motion examples catalog.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-context-menu/default/preview.1787006002696.png","pc":"larsen66"},{"id":"21st:larsen66__motion-copy-button","t":"Motion copy button","d":"Animated copy-to-clipboard button with icon swap, blur transitions, and pathLength checkmark draw","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-copy-button/default/preview.1787004530366.png","pc":"larsen66"},{"id":"21st:larsen66__motion-create-button","t":"Motion create button","d":"A create button that expands into a grid menu using shared layout animations and clip-path transitions","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-create-button/default/preview.1787004532684.png","pc":"larsen66"},{"id":"21st:larsen66__motion-css-spring","t":"Motion css spring","d":"A Motion for React box that springs between positions with a CSS spring, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-css-spring/default/preview.1786990881023-28d3a110-b9ca-4dda-8fa2-1d7aba00d212.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor","t":"Motion cursor","d":"A Motion for React custom cursor that adapts its caret size to hovered text, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor/default/preview.1787004254937-5b7a83bf-3706-4a32-b6a0-71f2813b5ff1.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-custom-content","t":"Motion cursor custom content","d":"A Motion for React cursor that swaps in custom content over a hover zone, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-custom-content/default/preview.1787004521106.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-floating-target","t":"Motion cursor floating target","d":"A Motion for React floating target that drifts away from the pointer, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-floating-target/default/preview.1787004526283.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-follow","t":"Motion cursor follow","d":"A Motion for React follow cursor that shows a photo caption beside the pointer, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-follow/default/preview.1787004339650-fe3f0074-52d0-4cbf-a0bd-4cb5efdad661.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-hover-follow","t":"Motion cursor hover follow","d":"A Motion for React hover cursor that follows the pointer with a clipped image, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-hover-follow/default/preview.1787004523960.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-magnetic","t":"Motion cursor magnetic","d":"A Motion for React magnetic cursor that snaps a reticule to nearby targets, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-magnetic/default/preview.1787004390186-8f573ec8-3c61-402f-9f55-f01f866d127c.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-multifollow","t":"Motion cursor multifollow","d":"A Motion for React multi-follow cursor with stacked rings at different springs, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-multifollow/default/preview.1787004280962-97581a3a-4889-4740-bdac-d8ce8a71d88d.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-trail","t":"Motion cursor trail","d":"A Motion for React image trail that stamps photos along the pointer path, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-trail/default/preview.1787004365187-a9875868-012e-4e1f-84f4-6409bc6dbf28.png","pc":"larsen66"},{"id":"21st:larsen66__motion-cursor-trail-velocity","t":"Motion cursor trail velocity","d":"A Motion for React image trail that flings photos with pointer velocity, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-cursor-trail-velocity/default/preview.1787004518712.png","pc":"larsen66"},{"id":"21st:larsen66__motion-dots-morph-button","t":"Motion dots morph button","d":"A button where four dots morph into crossing lines with a spring-animated SVG path transition","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-dots-morph-button/default/preview.1787004535083.png","pc":"larsen66"},{"id":"21st:larsen66__motion-drag","t":"Motion drag","d":"A Motion for React card that can be freely dragged, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-drag/default/preview.1786969503934-f4c4e684-152f-4195-9959-3580bb2a15b0.png","pc":"larsen66"},{"id":"21st:larsen66__motion-drag-constraints","t":"Motion drag constraints","d":"A Motion for React card dragged inside a parent constraint box with light elasticity, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-drag-constraints/default/preview.1786969528662-f73e0beb-85f6-4124-a9fd-7a91a94b23db.png","pc":"larsen66"},{"id":"21st:larsen66__motion-drag-lock-direction","t":"Motion drag lock direction","d":"A Motion for React box that locks drag to one axis, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-drag-lock-direction/default/preview.1786990907919-e7a39296-ef85-4ab2-94bf-66e20f308c44.png","pc":"larsen66"},{"id":"21st:larsen66__motion-enter-animation","t":"Motion enter animation","d":"A Motion for React circle that springs in from opacity 0 and scale 0, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-enter-animation/default/preview.1786969498802-343d3aad-bf5f-431a-a2df-c63c2fae90ed.png","pc":"larsen66"},{"id":"21st:larsen66__motion-exit-animation","t":"Motion exit animation","d":"A Motion for React box that exits with AnimatePresence when Hide is clicked, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-exit-animation/default/preview.1786969524588-fd631a38-bcc5-4065-996b-866fd834d0cb.png","pc":"larsen66"},{"id":"21st:larsen66__motion-floating-action-button","t":"Motion floating action button","d":"A FAB that expands into a staggered vertical menu of action items with spring animations and tooltip labels","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-floating-action-button/default/preview.1787004539934.png","pc":"larsen66"},{"id":"21st:larsen66__motion-follow-pointer","t":"Motion follow pointer","d":"A Motion for React circle that follows the pointer with a soft spring, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-follow-pointer/default/preview.1786933091011-4bfbc5dd-7cd0-4366-8dde-9c876804422b.png","pc":"larsen66"},{"id":"21st:larsen66__motion-footer-reveal","t":"Motion footer reveal","d":"A sticky footer that fades, scales, and unblurs as you scroll, from the official Motion examples catalog.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-footer-reveal/default/preview.1787004395967-4884ecea-1c97-459d-a96d-c58293903c56.png","pc":"larsen66"},{"id":"21st:larsen66__motion-gestures","t":"Motion gestures","d":"A Motion for React square that scales up on hover and down on tap, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-gestures/default/preview.1786969550794-aaffb41d-9ef6-411b-bf91-07337840b4b5.png","pc":"larsen66"},{"id":"21st:larsen66__motion-hero-stagger","t":"Motion hero stagger","d":"A staggered OSS hero with glowing orbs, metrics, and spring-blur enter, from the official Motion examples catalog.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-hero-stagger/default/preview.1787004369074-dfd91e23-565f-4d95-886a-f204e7666a00.png","pc":"larsen66"},{"id":"21st:larsen66__motion-hold-to-confirm","t":"Motion hold to confirm","d":"A Motion for React example showing long-press interaction. The button's events update a progress motion value that drives multiple animations of other motion values.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"larsen66","st":"rated","pl":"https://cdn.21st.dev/larsen66/motion-hold-to-confirm/default/preview.1787004537581.png","pc":"larsen66","sc":18},{"id":"21st:larsen66__motion-html-content","t":"Motion html content","d":"A Motion for React counter that animates a motion value from 0 to 100 and renders the rounded number as children, from the official Motion examples catalog.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-html-content/default/preview.1786991003174-ddf9d570-3789-4bf5-a643-85631410081a.png","pc":"larsen66"},{"id":"21st:larsen66__motion-image-reveal-slider","t":"Motion image reveal slider","d":"A before-and-after image slider that reveals a grayscale overlay, from the official Motion examples catalog.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-image-reveal-slider/default/preview.1787005997009.png","pc":"larsen66"},{"id":"21st:larsen66__motion-infinite-loading","t":"Motion infinite loading","d":"An example of creating an infinite loading list with staggered animations in Motion for React.","k":"component","s":"21st","c":"status/loader","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-infinite-loading/default/preview.1787004545212.png","pc":"larsen66"},{"id":"21st:larsen66__motion-ios-pointer","t":"Motion ios pointer","d":"An iOS-style magnetic pointer that follows the cursor over Appearance, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-ios-pointer/default/preview.1787004340916-219260ca-c9af-4536-9ddc-48d7bec86e1c.png","pc":"larsen66"},{"id":"21st:larsen66__motion-ios-slider","t":"Motion ios slider","d":"An iOS-style brightness slider that squishes and stretches as you drag, from the official Motion examples catalog.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-ios-slider/default/preview.1787004314307-f873b5cb-e71a-4030-a758-4928b4961da6.png","pc":"larsen66"},{"id":"21st:larsen66__motion-keyframes","t":"Motion keyframes","d":"A Motion for React box that keyframe-animates scale, rotate, and border-radius in a loop, from the official Motion examples catalog.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-keyframes/default/preview.1786969575525-89922d1f-6b64-41a2-9855-e5224b34ed5b.png","pc":"larsen66"},{"id":"21st:larsen66__motion-keyframes-wildcards","t":"Motion keyframes wildcards","d":"A Motion for React box that uses null wildcard keyframes on hover so scale can interrupt from the current value, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-keyframes-wildcards/default/preview.1786990919076-9cf1f663-176e-43cc-b272-69eaee7f1364.png","pc":"larsen66"},{"id":"21st:larsen66__motion-layout-anchor","t":"Motion layout anchor","d":"Control which point on a child element stays fixed during a parent's layout animation with layoutAnchor","k":"component","s":"21st","c":"actions/link","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-layout-anchor/default/preview.1786997717177-20b0333e-0330-4ae6-b8bc-9a90d10912c5.png","pc":"larsen66"},{"id":"21st:larsen66__motion-layout-animation","t":"Motion layout animation","d":"A Motion for React toggle that springs its handle between ends using layout animation, from the official Motion examples catalog.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-layout-animation/default/preview.1786933119748-c6407e0f-6035-428e-9558-a4c8730a811c.png","pc":"larsen66"},{"id":"21st:larsen66__motion-line-graph","t":"Motion line graph","d":"A line graph that draws on enter and shows compact percent deltas on hover, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-line-graph/default/preview.1787006000294.png","pc":"larsen66"},{"id":"21st:larsen66__motion-loading-circle-spinner","t":"Motion loading circle spinner","d":"A Motion for React loading spinner that rotates a 50px ring with a hue accent, from the official Motion examples catalog.","k":"component","s":"21st","c":"status/loader","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-loading-circle-spinner/default/preview.1786933058768-f837bbbf-ff2d-4ebb-9919-1248a5ea2d6c.png","pc":"larsen66"},{"id":"21st:larsen66__motion-loading-fill-text","t":"Motion loading fill text","d":"An example of creating a text fill loading animation with Motion for React.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-loading-fill-text/default/preview.1787004547564.png","pc":"larsen66"},{"id":"21st:larsen66__motion-loading-jumping-dots","t":"Motion loading jumping dots","d":"A Motion for React loading indicator with three dots that jump in a mirrored stagger, from the official Motion examples catalog.","k":"component","s":"21st","c":"status/loader","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-loading-jumping-dots/default/preview.1786933633085-72af439f-ba82-4417-9aa3-17afda4451e4.png","pc":"larsen66"},{"id":"21st:larsen66__motion-loading-line-reveal","t":"Motion loading line reveal","d":"An example of creating a line reveal loading animation with clipPath in Motion for React","k":"component","s":"21st","c":"status/loader","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-loading-line-reveal/default/preview.1787004549867.png","pc":"larsen66"},{"id":"21st:larsen66__motion-loading-pulse-dots","t":"Motion loading pulse dots","d":"A Motion for React loading indicator with three dots that pulse in a reverse stagger, from the official Motion examples catalog.","k":"component","s":"21st","c":"status/loader","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-loading-pulse-dots/default/preview.1786969479149-3d1ba4ed-2170-4a3a-9106-ba5f1402b256.png","pc":"larsen66"},{"id":"21st:larsen66__motion-path-drawing","t":"Motion path drawing","d":"A Motion for React SVG path-drawing demo that springs circle, X, and rounded-rect strokes into view, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-path-drawing/default/preview.1786933607286-e38e32a2-58cf-4607-8856-4f552ec7a992.png","pc":"larsen66"},{"id":"21st:larsen66__motion-path-morphing","t":"Motion path morphing","d":"A Motion for React SVG path morph that cycles star, heart, thumb, plane, bolt, and note shapes, from the official Motion examples catalog.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-path-morphing/default/preview.1786933693852-ed48421e-bbc8-4723-9603-269568ed57e5.png","pc":"larsen66"},{"id":"21st:larsen66__motion-reorder-grid","t":"Motion reorder grid","d":"An example of creating a multidimensional drag-to-reorder grid with Reorder in Motion for React.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-reorder-grid/default/preview.1786997743754-8d54c8e4-71dc-4c6a-b563-cd4b84f2e5fc.png","pc":"larsen66"},{"id":"21st:larsen66__motion-reorder-items","t":"Motion reorder items","d":"A Motion for React layout animation that shuffles four colored squares every second with a spring, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-reorder-items/default/preview.1786990974089-3c9e153d-6a1d-4a20-b1d1-7f822d92e6ee.png","pc":"larsen66"},{"id":"21st:larsen66__motion-rolling-text-button","t":"Motion rolling text button","d":"A Motion for React button that rolls a duplicate label into place on hover, from the official Motion examples catalog.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-rolling-text-button/default/preview.1786931803708-73bc8c1d-4116-4f28-a35b-31a2364575e2.png","pc":"larsen66"},{"id":"21st:larsen66__motion-rotate","t":"Motion rotate","d":"A Motion for React box that rotates 360 degrees, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-rotate/default/preview.1786990854247-9ff20ac3-83a5-4d6f-80e1-26d8d6b553b4.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-container","t":"Motion scroll container","d":"An example of a scroll-linked animation using a specific element's scroll position using Motion for React's useScroll hook.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-container/default/preview.1787001661484-0639b10e-bcd5-4922-9592-4967acde06a4.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-hide-header","t":"Motion scroll hide header","d":"A sticky header that hides when scrolling down and reappears when scrolling up. Uses useMotionValueEvent to detect scroll direction.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-hide-header/default/preview.1787001688579-92908b9a-ff29-4c46-9b7d-267341705328.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-horizontal","t":"Motion scroll horizontal","d":"A horizontal gallery that scrolls sideways as you scroll down. Uses sticky positioning with scroll-linked x translation.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-horizontal/default/preview.1787001715643-605e8f59-b4e5-43d5-a4f6-a56dd3b1e9b0.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-linked","t":"Motion scroll linked","d":"An example of linking an animation to scroll using Motion for React's useScroll hook.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-linked/default/preview.1787001596403-63cf06a1-5ec1-473f-baa8-1761057ffc03.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-linked-with-spring","t":"Motion scroll linked with spring","d":"An example of linking an animation to scroll using Motion for React's useScroll hook and smoothing it with useSpring.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-linked-with-spring/default/preview.1787001624484-b8c6efc2-3dcf-4224-bb8e-6cfcd331fec3.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-track-element","t":"Motion scroll track element","d":"An example of tracking an element within the viewport using Motion for React's useScroll hook.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-track-element/default/preview.1787001746150-59363be8-b375-43ce-b644-f23d36b92b1b.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-triggered","t":"Motion scroll triggered","d":"An example of triggering an animation when an element enters or leaves the viewport using Motion for React's whileInView prop.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-triggered/default/preview.1787001652303-b96decce-c309-4db7-a76f-ceec706ae916.png","pc":"larsen66"},{"id":"21st:larsen66__motion-scroll-word-reveal","t":"Motion scroll word reveal","d":"A Motion for React scroll scene that reveals each word as you scroll, from the official Motion examples catalog.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-scroll-word-reveal/default/preview.1786933241935-99a532f5-5f65-40ac-9efd-6b8b95600ac2.png","pc":"larsen66"},{"id":"21st:larsen66__motion-shared-layout-animation","t":"Motion shared layout animation","d":"A Motion for React tab bar that shares an underline and waits on the selected food icon, from the official Motion examples catalog.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-shared-layout-animation/default/preview.1786933150128-569f6925-ee09-4c85-9f9c-c3c43d190ebd.png","pc":"larsen66"},{"id":"21st:larsen66__motion-state-updates","t":"Motion state updates","d":"A Motion for React box that springs to x, y, and rotate values driven by range and number inputs, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-state-updates/default/preview.1786991032343-69b61a1d-7c32-421c-96bb-141ab8002173.png","pc":"larsen66"},{"id":"21st:larsen66__motion-svg-viewbox","t":"Motion svg viewbox","d":"A Motion for React SVG that springs its viewBox between a full map and a zoomed beacon, from the official Motion examples catalog.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-svg-viewbox/default/preview.1786997607039-86b5a694-92cd-4892-8606-dc0c53a583f0.png","pc":"larsen66"},{"id":"21st:larsen66__motion-transition","t":"Motion transition","d":"A Motion for React circle that fades and scales in with a delayed cubic-bezier transition, from the official Motion examples catalog.","k":"component","s":"21st","c":"other","g":"other","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-transition/default/preview.1786990947188-7e4b72ae-f8f9-4231-8969-9ca6ba7355ef.png","pc":"larsen66"},{"id":"21st:larsen66__motion-typewriter","t":"Motion typewriter","d":"A typewriter that types Hello world! with a blinking hue-1 caret, rebuilt from the official Motion example using motion/react.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-typewriter/default/preview.1787004260331-83420337-698e-4cd7-aef7-420f8ce3ad03.png","pc":"larsen66"},{"id":"21st:larsen66__motion-use-animation-frame","t":"Motion use animation frame","d":"An example of using Motion for React's useAnimationFrame hook to animate a 3D cube.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-use-animation-frame/default/preview.1786997580262-f2399ab5-b6c3-4b9d-a2dc-d2b2db7fb8d6.png","pc":"larsen66"},{"id":"21st:larsen66__motion-use-presence-data","t":"Motion use presence data","d":"An example of using usePresenceData to pass custom data through AnimatePresence to exiting elements.","k":"component","s":"21st","c":"status/status-dot","g":"status","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-use-presence-data/default/preview.1786997634572-7dab104d-9e2e-4983-aa38-eaeef1eb5e0a.png","pc":"larsen66"},{"id":"21st:larsen66__motion-use-time","t":"Motion use time","d":"An example of using the useTime hook to animate an element at a constant speed.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-use-time/default/preview.1786997662499-d7a29195-d618-4c4f-97c2-6c3d63b06c9b.png","pc":"larsen66"},{"id":"21st:larsen66__motion-use-transform","t":"Motion use transform","d":"An example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-use-transform/default/preview.1786997688467-7cd6b299-d862-4ee4-8290-ee8070d8108f.png","pc":"larsen66"},{"id":"21st:larsen66__motion-variants","t":"Motion variants","d":"A Motion for React sidebar nav that orchestrates clip-path, hamburger morph, and staggered items with variants, from the official Motion examples catalog.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-variants/default/preview.1786969601002-ab88a3d0-19bb-4f3b-9af6-d0c3280735c0.png","pc":"larsen66"},{"id":"21st:larsen66__navigation-menu","t":"Navigation menu","d":"Here is animated Navigation Menu","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"larsen66","st":"indexed","u":102,"pl":"https://cdn.21st.dev/larsen66/navigation-menu/default/preview.1750543206493.png","pc":"larsen66","tg":["navigation-menu"]},{"id":"21st:larsen66__noise-dark-blue-gradient-with-squares","t":"Noise dark blue gradient with squares","d":"Here is Noise Dark Blue Gradient with Squares component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"larsen66","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/noise-dark-blue-gradient-with-squares/default/preview.1756799900781.png","pc":"larsen66","tg":["background"]},{"id":"21st:larsen66__reui-button-group","t":"Reui button group","d":"ReUI Button Group with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"larsen66","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/reui-button-group/default/preview.1785400427482-cf173492-3e0c-46cc-929e-7628ed43a281.png","pc":"larsen66"},{"id":"21st:larsen66__reui-filters","t":"Reui filters","d":"ReUI Filters with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-filters/default/preview.1785390612636-e474ab5e-6a6c-4e55-b3b8-113d8b72eb20.png","pc":"larsen66"},{"id":"21st:larsen66__reui-phone-input","t":"Reui phone input","d":"ReUI Phone Input with the first 8 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-phone-input/default/preview.1785348517248-7ff02171-fa1d-4db8-8d5d-6aacb72ccde1.png","pc":"larsen66"},{"id":"21st:larsen66__waves","t":"Waves","d":"Interactive waves background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"larsen66","st":"indexed","pl":"https://cdn.21st.dev/larsen66/waves/default/preview.1747804054157.png","pc":"larsen66"},{"id":"21st:lavikatiyar__activity-stats-card","t":"Activity stats card","d":"Activity Stats Card\nA visually polished card component to display a key metric with an icon, title, and subtext. It features a count-up animation for the primary metric and is buil","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"lavikatiyar","st":"indexed","u":25,"pl":"https://cdn.21st.dev/lavikatiyar/activity-stats-card/default/preview.1758284546782.png","pc":"lavikatiyar","tg":["dashboard","stat"]},{"id":"21st:lavikatiyar__alert-banner","t":"Alert banner","d":"Alert Banner\nA dismissible alert component with variants, actions, and animations, designed to provide feedback to the user.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"lavikatiyar","st":"indexed","u":26,"pl":"https://cdn.21st.dev/lavikatiyar/alert-banner/default/preview.1757929172472.png","pc":"lavikatiyar","tg":["alert","notification"]},{"id":"21st:lavikatiyar__alert-toast","t":"Alert toast","d":"Alert Toast\nA responsive and theme-aware alert component designed to provide contextual feedback for different user actions. It includes variants for success, warning, info, and er","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"lavikatiyar","st":"indexed","u":83,"pl":"https://cdn.21st.dev/lavikatiyar/alert-toast/default/preview.1760426253532.png","pc":"lavikatiyar","tg":["alert","notification","toast"]},{"id":"21st:lavikatiyar__audio-show-creator","t":"Audio show creator","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/audio-show-creator/default/preview.1759029939284.png","pc":"lavikatiyar","tg":["modal","upload-download"]},{"id":"21st:lavikatiyar__bento-grid","t":"Bento grid","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"lavikatiyar","st":"indexed","u":104,"pl":"https://cdn.21st.dev/lavikatiyar/bento-grid/default/preview.1760866288248.png","pc":"lavikatiyar","tg":["features","stat"]},{"id":"21st:lavikatiyar__call-to-action-card","t":"Call to action card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/call-to-action-card/default/preview.1759418978049.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__card","t":"Card","d":"Hotel Card\nA visually polished card component to display property information, including an image, name, location, and rating. It is fully responsive and animated on hover.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":22,"pl":"https://cdn.21st.dev/lavikatiyar/card/default/preview.1757929388925.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__card-1","t":"Card 1","d":"Review Card\nA visually polished card component to display user reviews or testimonials, complete with an avatar, rating, and review text. It features a subtle entrance animation an","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"lavikatiyar","st":"indexed","u":27,"pl":"https://cdn.21st.dev/lavikatiyar/card-1/default/preview.1757929857702.png","pc":"lavikatiyar","tg":["testimonials"]},{"id":"21st:lavikatiyar__card-10","t":"Card 10","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/card-10/default/preview.1758353466381.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__card-11","t":"Card 11","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/card-11/default/preview.1758909818886.png","pc":"lavikatiyar","tg":["features","steps"]},{"id":"21st:lavikatiyar__card-2","t":"Card 2","d":"Review Summary Card\nThis component provides an animated display for product or service ratings. It features a count-up animation for the rating and review numbers and a staggered a","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"lavikatiyar","st":"indexed","u":27,"pl":"https://cdn.21st.dev/lavikatiyar/card-2/default/preview.1757930062640.png","pc":"lavikatiyar","tg":["stat"]},{"id":"21st:lavikatiyar__card-3","t":"Card 3","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/card-3/default/preview.1757930285736.png","pc":"lavikatiyar","tg":["image","slider"]},{"id":"21st:lavikatiyar__card-4","t":"Card 4","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/card-4/default/preview.1758070260156.png","pc":"lavikatiyar","tg":["stat"]},{"id":"21st:lavikatiyar__card-5","t":"Card 5","d":"Highlight Card\nA visually rich card component designed to draw attention to key metrics or highlights. It features a gradient background with a subtle dot pattern, a distinctive bo","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":27,"pl":"https://cdn.21st.dev/lavikatiyar/card-5/default/preview.1758070637065.png","pc":"lavikatiyar","tg":["stat"]},{"id":"21st:lavikatiyar__card-6","t":"Card 6","d":"Animated Steps Tracker Card\nThis component provides a visually engaging way to display step-count data for a given period. It features a fluid counter animation for the total steps","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"lavikatiyar","st":"rated","u":13,"pl":"https://cdn.21st.dev/lavikatiyar/card-6/default/preview.1758072283847.png","pc":"lavikatiyar","tg":["stat"],"sc":21},{"id":"21st:lavikatiyar__card-7","t":"Card 7","d":"Travel Card\nThis component encapsulates the visual representation of a travel destination. It is highly reusable, accepting props for the image, logo, text content, and pricing, ma","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"lavikatiyar","st":"indexed","u":147,"pl":"https://cdn.21st.dev/lavikatiyar/card-7/default/preview.1758074039018.png","pc":"lavikatiyar","tg":["image","pricing-section"]},{"id":"21st:lavikatiyar__card-8","t":"Card 8","d":"Spending Limit Card\nA responsive card component that displays a spending limit with an animated, segmented progress bar.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":21,"pl":"https://cdn.21st.dev/lavikatiyar/card-8/default/preview.1758102570546.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__card-9","t":"Card 9","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/card-9/default/preview.1758265780270.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__cards","t":"Cards","d":"Hover Reveal Cards\nDescription: A responsive grid of cards that highlights the card currently being hovered or focused. The other cards subtly blur and fade into the background, cr","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":27,"pl":"https://cdn.21st.dev/lavikatiyar/cards/default/preview.1758355051886.png","pc":"lavikatiyar","tg":["card","gallery","grid","image"]},{"id":"21st:lavikatiyar__carousel","t":"Carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/carousel/default/preview.1759422960957.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__conversion-stats-card","t":"Conversion stats card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/conversion-stats-card/default/preview.1758821906984.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__cta-card","t":"Cta card","d":"CtaCard\nThis is a reusable Call-to-Action (CTA) card that features an overlapping image and content block. It's built to be highly customizable through props and includes subtle an","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lavikatiyar","st":"indexed","u":63,"pl":"https://cdn.21st.dev/lavikatiyar/cta-card/default/preview.1760248394206.png","pc":"lavikatiyar","tg":["cta"]},{"id":"21st:lavikatiyar__destination-carousel","t":"Destination carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/destination-carousel/default/preview.1759672098690.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__feature-bar","t":"Feature bar","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/feature-bar/default/preview.1760507773171.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__feature-card","t":"Feature card","d":"Feature Card","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"lavikatiyar","st":"indexed","u":41,"pl":"https://cdn.21st.dev/lavikatiyar/feature-card/default/preview.1758911130634.png","pc":"lavikatiyar","tg":["features"]},{"id":"21st:lavikatiyar__feature-grid","t":"Feature grid","d":"Feature Grid\nA responsive grid component designed to showcase a list of features or services. Each item in the grid consists of an image, a title, and a description, presented in a","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"lavikatiyar","st":"indexed","u":53,"pl":"https://cdn.21st.dev/lavikatiyar/feature-grid/default/preview.1759326335398.png","pc":"lavikatiyar","tg":["features"]},{"id":"21st:lavikatiyar__feature-section","t":"Feature section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/feature-section/default/preview.1759652427320.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__form","t":"Form","d":"Booking Form\nDescription: A compact and visually polished form for handling travel or accommodation bookings. It features distinct sections for destination, dates, rooms, and guest","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"lavikatiyar","st":"indexed","u":33,"pl":"https://cdn.21st.dev/lavikatiyar/form/default/preview.1757930637683.png","pc":"lavikatiyar","tg":["date-picker"]},{"id":"21st:lavikatiyar__freelancer-profile-card","t":"Freelancer profile card","d":"Freelancer Profile Card\nA responsive and animated profile card component, ideal for showcasing freelancers, team members, or user profiles. It features a banner, avatar, user detai","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":73,"pl":"https://cdn.21st.dev/lavikatiyar/freelancer-profile-card/default/preview.1760765906990.png","pc":"lavikatiyar","tg":["profile"]},{"id":"21st:lavikatiyar__growth-hero-section","t":"Growth hero section","d":"Growth Hero Section\nA responsive hero section component that features a title, descriptive paragraphs, a call-to-action link, and a visually engaging, animated image gallery.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lavikatiyar","st":"indexed","u":7,"pl":"https://cdn.21st.dev/lavikatiyar/growth-hero-section/default/preview.1758804517097.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__hero-section","t":"Hero section","d":"Financial Hero\nThis component is a responsive hero section designed for SaaS and financial platforms. It features an animated text section on the left and a dynamic, layered card i","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lavikatiyar","st":"indexed","u":130,"pl":"https://cdn.21st.dev/lavikatiyar/hero-section/default/preview.1760260926493.png","pc":"lavikatiyar","tg":["cta"]},{"id":"21st:lavikatiyar__image-uploader","t":"Image uploader","d":"Image Uploader\n\nThe ImageUploader is a highly interactive and accessible component for handling file uploads. It supports drag-and-drop, file selection through a dialog, and provid","k":"component","s":"21st","c":"media/gallery","g":"media","a":"lavikatiyar","st":"indexed","u":40,"pl":"https://cdn.21st.dev/lavikatiyar/image-uploader/default/preview.1759904869589.png","pc":"lavikatiyar","tg":["image","upload-download"]},{"id":"21st:lavikatiyar__info-card","t":"Info card","d":"Info Card – Highlight key insights. Compact card design to showcase personalized tips, insights, or recommendations in an engaging way.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/info-card/default/preview.1758264768596.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__insurance-card","t":"Insurance card","d":"Insurance Card\nA modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"lavikatiyar","st":"indexed","u":27,"pl":"https://cdn.21st.dev/lavikatiyar/insurance-card/default/preview.1760523632982.png","pc":"lavikatiyar","tg":["profile"]},{"id":"21st:lavikatiyar__invite-card","t":"Invite card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/invite-card/default/preview.1760247069422.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__list","t":"List","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/list/default/preview.1758069432017.png","pc":"lavikatiyar","tg":["list"]},{"id":"21st:lavikatiyar__location-card","t":"Location card","d":"Location Card\nA visually polished card component to display a location with an image, title, subtitle, and an animated call-to-action button. It is fully responsive, theme-adaptive","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":13,"pl":"https://cdn.21st.dev/lavikatiyar/location-card/default/preview.1758519025947.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__login","t":"Login","d":"Auth Form Split Screen\nThis component provides a full-page, two-column layout for user authentication. The left panel contains the form, and the right panel displays a promotional ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"lavikatiyar","st":"indexed","u":92,"pl":"https://cdn.21st.dev/lavikatiyar/login/default/preview.1760596417118.png","pc":"lavikatiyar","tg":["form","sign-in"]},{"id":"21st:lavikatiyar__menu","t":"Menu","d":"Account Menu – Manage with ease. Quick access to orders, reviews, addresses, favorites, and settings in one place.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"lavikatiyar","st":"rated","u":25,"pl":"https://cdn.21st.dev/lavikatiyar/menu/default/preview.1758097914089.png","pc":"lavikatiyar","tg":["menu","profile","sidebar"],"sc":19},{"id":"21st:lavikatiyar__offer-card","t":"Offer card","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/offer-card/default/preview.1758650942647.png","pc":"lavikatiyar","tg":["grid","image"]},{"id":"21st:lavikatiyar__offers-carousel","t":"Offers carousel","d":"Offers Carousel\nThis component provides a visually polished layout to display a primary offer alongside a carousel of related items. It's built to be highly reusable, allowing you ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"lavikatiyar","st":"indexed","u":62,"pl":"https://cdn.21st.dev/lavikatiyar/offers-carousel/default/preview.1758705556473.png","pc":"lavikatiyar","tg":["carousel","pricing-section"]},{"id":"21st:lavikatiyar__pricing","t":"Pricing","d":"Pricing Plan Selection UI that helps users compare subscription tiers. It presents two options — Basic for individuals and small teams with limited features, and Pro for growing te","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"lavikatiyar","st":"indexed","u":20,"pl":"https://cdn.21st.dev/lavikatiyar/pricing/default/preview.1758082169204.png","pc":"lavikatiyar","tg":["pricing-section","slider"]},{"id":"21st:lavikatiyar__pricing-page-1","t":"Pricing page 1","d":"A comprehensive pricing comparison component that transforms your design into a fully reusable, production-ready UI component with advanced animations!","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/pricing-page-1/default/preview.1761995612132.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__profile-card","t":"Profile card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/profile-card/default/preview.1759668440266.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__progress-card","t":"Progress card","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/progress-card/default/preview.1758277784005.png","pc":"lavikatiyar","tg":["progress","stat"]},{"id":"21st:lavikatiyar__referral-card","t":"Referral card","d":"Referral Card\nThis component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":33,"pl":"https://cdn.21st.dev/lavikatiyar/referral-card/default/preview.1758822561403.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__reset-password-form","t":"Reset password form","d":"Reset Password Form\nA multi-step form component that guides users through verifying a code and setting a new password, complete with real-time validation and smooth animations.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"lavikatiyar","st":"indexed","u":28,"pl":"https://cdn.21st.dev/lavikatiyar/reset-password-form/default/preview.1760113447540.png","pc":"lavikatiyar","tg":["form","steps"]},{"id":"21st:lavikatiyar__seat-selection","t":"Seat selection","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/seat-selection/default/preview.1758160983442.png","pc":"lavikatiyar","tg":["grid"]},{"id":"21st:lavikatiyar__service-card","t":"Service card","d":"Service Card\nA visually engaging card component designed to showcase services or features. It includes a title, a call-to-action link, and a decorative image. The card features a s","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","u":91,"pl":"https://cdn.21st.dev/lavikatiyar/service-card/default/preview.1758962818948.png","pc":"lavikatiyar","tg":["card","features","grid","link"]},{"id":"21st:lavikatiyar__shipment-status-card","t":"Shipment status card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/shipment-status-card/default/preview.1759670660677.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__status-badge","t":"Status badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/status-badge/default/preview.1760421710964.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__testimonial","t":"Testimonial","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/testimonial/default/preview.1760157558465.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__testimonial-1","t":"Testimonial 1","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/testimonial-1/default/preview.1760256664638.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__travel-card","t":"Travel card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/travel-card/default/preview.1758802190544.png","pc":"lavikatiyar"},{"id":"21st:lavikatiyar__travel-slider-hero","t":"Travel slider hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lavikatiyar","st":"indexed","pl":"https://cdn.21st.dev/lavikatiyar/travel-slider-hero/default/preview.1760862683872.png","pc":"lavikatiyar"},{"id":"21st:laziekiki__filter-token-bar","t":"Filter token bar","d":"Linear-style composable filter tokens (field · operator · value) with roving-tabindex keyboard navigation, async option loading, multi/single select, hand-drawn assignee avatars, a","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"laziekiki","st":"indexed","pl":"https://cdn.21st.dev/khushidiwan953/filter-token-bar/default/preview.1788886031638-26352313-937f-4e19-b388-2c40d5d36a6a.png","pc":"laziekiki"},{"id":"21st:leonelsilva0601__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#1F614A, #328F61, #8BDAB0, #CBF6E0). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"leonelsilva0601","st":"indexed","pl":"https://cdn.21st.dev/leonelsilva0601/silk-blend-gradient/default/preview.1786044324124-5c5ecb30-053a-44ec-a065-b65abeec9026.webp","pc":"leonelsilva0601"},{"id":"21st:lepikhinb__sparkles","t":"Sparkles","d":"Animated floating particles component.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"lepikhinb","st":"indexed","u":1198,"pl":"https://cdn.21st.dev/lepikhinb/sparkles/default/preview.1785355398368-838428b2-3e03-4e79-9461-661f964ca242.png","pc":"lepikhinb"},{"id":"21st:likhonsdev__animated-tabs","t":"Animated tabs","d":"Animated tabs using Framer Motion with a smoothly transitioning active background that animates from one tab to another","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"likhonsdev","st":"indexed","pl":"https://cdn.21st.dev/likhonsdev/animated-tabs/default/preview.1748191669634.png","pc":"likhonsdev"},{"id":"21st:limeplay__media-provider","t":"Media provider","d":"Headless media player provider that creates a per-instance Zustand store, typed event emitter, and feature setup for building custom video and audio player UIs.","k":"component","s":"21st","c":"media/player","g":"media","a":"limeplay","st":"indexed","pl":"https://cdn.21st.dev/limeplay/media-provider/default/preview.1783728300379.png","pc":"limeplay","tg":["video"]},{"id":"21st:limeplay__player-layout","t":"Player layout","d":"Composable structural containers for building a video player UI — a media frame plus overlay and top/bottom control layers with proper pointer-event layering.","k":"component","s":"21st","c":"media/player","g":"media","a":"limeplay","st":"indexed","u":2,"pl":"https://cdn.21st.dev/limeplay/player-layout/default/preview.1783727770092.png","pc":"limeplay","tg":["progress","video"]},{"id":"21st:lina.sameer__scroll-area-1","t":"Scroll area 1","d":"Here is Scroll Area component","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"lina.sameer","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/scroll-area-1/default/preview.1756365537905.png","pc":"lina.sameer","tg":["carousel","gallery","list","popover"]},{"id":"21st:liveblocks__emoji-picker","t":"Emoji picker","d":"A lightweight, unstyled, and composable emoji picker for React.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"liveblocks","st":"indexed","u":92,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/emoji-picker/default/preview.png","pc":"liveblocks","tg":["popover","search"]},{"id":"21st:llaxmi__tilt-card","t":"Tilt card","d":"The TiltCard component is a stylish, interactive card that tilts and scales when hovered over, providing a dynamic visual effect. It's perfect for highlighting important informatio","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"llaxmi","st":"indexed","u":25,"pl":"https://cdn.21st.dev/user_llaxmi/tilt-card.png","pc":"llaxmi"},{"id":"21st:ln-dev7__animated-navigation-tabs","t":"Animated navigation tabs","d":"A dynamic, animated navigation component with interactive tabs that dynamically highlight active and hover states.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ln-dev7","st":"indexed","u":78,"pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/animated-navigation-tabs/default/preview.1737985259234.png","pc":"ln-dev7","tg":["navigation-menu","tabs"]},{"id":"21st:ln-dev7__assignee-user","t":"Assignee user","d":"Here is user assignation component by indev ui","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/assignee-user/default/preview.1749413425517.png","pc":"ln-dev7","tg":["team"]},{"id":"21st:ln-dev7__assisted-password-confirmation","t":"Assisted password confirmation","d":"Password confirmation component with visual feedback and animations for matching or incorrect inputs","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/assisted-password-confirmation/default/preview.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__auto-layout-card","t":"Auto layout card","d":"Here is Auto layout interactive card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ln-dev7","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/auto-layout-card/default/preview.1749422387878.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__breadcrumb","t":"Breadcrumb","d":"Breadcrumb component","k":"component","s":"21st","c":"actions/link","g":"actions","a":"ln-dev7","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/breadcrumb/default/preview.1749312441276.png","pc":"ln-dev7","tg":["link"]},{"id":"21st:ln-dev7__button","t":"Button","d":"here is button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button/default/preview.1749312836629.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__dorpdown-navigation","t":"Dorpdown navigation","d":"A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ln-dev7","st":"indexed","u":230,"pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/dorpdown-navigation/default/preview.1738004320039.png","pc":"ln-dev7","tg":["dropdown","icon","menu","navigation-menu"]},{"id":"21st:ln-dev7__dynamic-action","t":"Dynamic action","d":"Here is dynamic action bar component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dynamic-action/default/preview.1749423422420.png","pc":"ln-dev7","tg":["dock","list","menu","tabs"]},{"id":"21st:ln-dev7__feedback-slider","t":"Feedback slider","d":"Here is colored feedback slider component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ln-dev7","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/feedback-slider/default/preview.1749422892262.png","pc":"ln-dev7","tg":["slider"]},{"id":"21st:ln-dev7__flip-button","t":"Flip button","d":"A reusable flip button component that dynamically switches between two customizable texts with a smooth rotation animation.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ln-dev7","st":"indexed","u":35,"pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/flip-button/default/preview.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__floating-button","t":"Floating button","d":"Here is floating action button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/floating-button/default/preview.1749421483716.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__follower-counter","t":"Follower counter","d":"Here is follower counter card","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ln-dev7","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/follower-counter/default/preview.1749422478218.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__help-button","t":"Help button","d":"Here is help button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ln-dev7","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/help-button/default/preview.1749372346585.png","pc":"ln-dev7","tg":["button","dropdown","link","popover"]},{"id":"21st:ln-dev7__indev-dialog","t":"Indev dialog","d":"here is modern dialog by indev ui","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indev-dialog/default/preview.1749317696518.png","pc":"ln-dev7","tg":["modal","profile"]},{"id":"21st:ln-dev7__indev-inputui","t":"Indev inputui","d":"Here is modern input component from idevui","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indev-inputui/default/preview.1749318141935.png","pc":"ln-dev7","tg":["input"]},{"id":"21st:ln-dev7__indevui-card","t":"Indevui card","d":"Here is indeveui card base component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-card/default/preview.1749313548191.png","pc":"ln-dev7","tg":["notification"]},{"id":"21st:ln-dev7__indevui-checkbox","t":"Indevui checkbox","d":"Here is checkbox base component of indevui","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-checkbox/default/preview.1749313715374.png","pc":"ln-dev7","tg":["checkbox"]},{"id":"21st:ln-dev7__indevui-collapsible","t":"Indevui collapsible","d":"here is collapsible demo by indev ui","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-collapsible/default/preview.1749316951793.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__indevui-context-menu","t":"Indevui context menu","d":"here is indevui context menu demo","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ln-dev7","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/indevui-context-menu/default/preview.1749317114667.png","pc":"ln-dev7","tg":["menu"]},{"id":"21st:ln-dev7__indevui-dropdown-menu","t":"Indevui dropdown menu","d":"Here is modern component of indevuiDropDown menu","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-dropdown-menu/default/preview.1749317972365.png","pc":"ln-dev7","tg":["checkbox","radio-group"]},{"id":"21st:ln-dev7__indevui-label","t":"Indevui label","d":"Here is modern label by indevui","k":"component","s":"21st","c":"media/icon","g":"media","a":"ln-dev7","st":"indexed","u":3,"pl":"https://cdn.21st.dev/larsen66/indevui-label/default/preview.1749318839470.png","pc":"ln-dev7","tg":["icon"]},{"id":"21st:ln-dev7__indevui-popover","t":"Indevui popover","d":"Here is modern popover component by indevui","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-popover/default/preview.1749319105694.png","pc":"ln-dev7","tg":["popover"]},{"id":"21st:ln-dev7__indevui-select","t":"Indevui select","d":"Here is modern select component by indevui","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-select/default/preview.1749319603182.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__indevui-separator","t":"Indevui separator","d":"Here is separator component ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-separator/default/preview.1749319569200.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__indevui-sheet","t":"Indevui sheet","d":"Here is modern sheet component by indevui","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-sheet/default/preview.1749319756904.png","pc":"ln-dev7","tg":["modal"]},{"id":"21st:ln-dev7__indevui-skeleton","t":"Indevui skeleton","d":"Here is modern animated skeleton by indevui","k":"component","s":"21st","c":"status/skeleton","g":"status","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-skeleton/default/preview.1749319705778.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__indevui-switch","t":"Indevui switch","d":"Here is switch component by indevui","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-switch/default/preview.1749320015181.png","pc":"ln-dev7","tg":["toggle"]},{"id":"21st:ln-dev7__indevui-table","t":"Indevui table","d":"Here is base table component by indev ui ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ln-dev7","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/indevui-table/default/preview.1749320307268.png","pc":"ln-dev7","tg":["table"]},{"id":"21st:ln-dev7__indevui-tabs","t":"Indevui tabs","d":"here is modern indev ui tabs component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-tabs/default/preview.1749320525421.png","pc":"ln-dev7","tg":["tabs"]},{"id":"21st:ln-dev7__indevui-textarea","t":"Indevui textarea","d":"Here is indevui Text component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-textarea/default/preview.1749320833863.png","pc":"ln-dev7","tg":["textarea"]},{"id":"21st:ln-dev7__indevui-toaster","t":"Indevui toaster","d":"Here is toaster component by indevui","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ln-dev7","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/indevui-toaster/default/preview.1749320176759.png","pc":"ln-dev7","tg":["alert","notification","toast"]},{"id":"21st:ln-dev7__indevui-toggle","t":"Indevui toggle","d":"Here is indevui toggle component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevui-toggle/default/preview.1749321130042.png","pc":"ln-dev7","tg":["toggle"]},{"id":"21st:ln-dev7__indevuisidebar","t":"Indevuisidebar","d":"here is indevui modern sidebar component","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevuisidebar/default/preview.1749330511992.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__indevuitooltip","t":"Indevuitooltip","d":"here is indev ui tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/indevuitooltip/default/preview.1749321724656.png","pc":"ln-dev7","tg":["tooltip"]},{"id":"21st:ln-dev7__issue-context-menu","t":"Issue context menu","d":"Here is ContextMenu by indevui","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/issue-context-menu/default/preview.1749371901757.png","pc":"ln-dev7","tg":["menu"]},{"id":"21st:ln-dev7__label-badges","t":"Label badges","d":"Here is modern Label Badges component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ln-dev7","st":"rated","u":16,"pl":"https://cdn.21st.dev/larsen66/label-badges/default/preview.1749371129655.png","pc":"ln-dev7","tg":["badge"],"sc":20},{"id":"21st:ln-dev7__label-selector","t":"Label selector","d":"Here is Label Selector component by IndevUi","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ln-dev7","st":"rated","u":3,"pl":"https://cdn.21st.dev/larsen66/label-selector/default/preview.1749370037430.png","pc":"ln-dev7","sc":21},{"id":"21st:ln-dev7__mega-menu","t":"Mega menu","d":"Here is vercel styled menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ln-dev7","st":"indexed","u":210,"pl":"https://cdn.21st.dev/larsen66/mega-menu/default/preview.1749420432320.png","pc":"ln-dev7","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:ln-dev7__member-list","t":"Member list","d":"Here is modern Member list by indev ui","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ln-dev7","st":"indexed","u":81,"pl":"https://cdn.21st.dev/larsen66/member-list/default/preview.1749417771902.png","pc":"ln-dev7","tg":["dashboard","list","profile","team"]},{"id":"21st:ln-dev7__members-table","t":"Members table","d":"Here is modern members-table ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/members-table/default/preview.1749296035868.png","pc":"ln-dev7","tg":["avatar","table","team"]},{"id":"21st:ln-dev7__post-scheduler","t":"Post scheduler","d":"Here is Post Scheduler component","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ln-dev7","st":"rated","pl":"https://cdn.21st.dev/larsen66/post-scheduler/default/preview.1749420988373.png","pc":"ln-dev7","tg":["date-picker"],"sc":25},{"id":"21st:ln-dev7__pricing-interaction","t":"Pricing interaction","d":"A reusable pricing selector component that supports three plans (Free, Starter, Pro) with toggles between monthly and annual pricing, and highlights the selected plan dynamically.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ln-dev7","st":"indexed","u":222,"pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/pricing-interaction/default/preview.png","pc":"ln-dev7","tg":["pricing-section","radio-group","table"]},{"id":"21st:ln-dev7__priority-selector","t":"Priority selector","d":"Here is priority selector icon by indev ui","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ln-dev7","st":"rated","pl":"https://cdn.21st.dev/larsen66/priority-selector/default/preview.1749412324106.png","pc":"ln-dev7","tg":["popover"],"sc":21},{"id":"21st:ln-dev7__project-badge","t":"Project badge","d":"Here is modern project badge component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ln-dev7","st":"rated","u":26,"pl":"https://cdn.21st.dev/larsen66/project-badge/default/preview.1749371333062.png","pc":"ln-dev7","sc":18},{"id":"21st:ln-dev7__project-selector","t":"Project selector","d":"Here is modern project selector component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ln-dev7","st":"rated","u":8,"pl":"https://cdn.21st.dev/larsen66/project-selector/default/preview.1749370966580.png","pc":"ln-dev7","sc":21},{"id":"21st:ln-dev7__projects-table","t":"Projects table","d":"Here is modern projects-table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/projects-table/default/preview.1749298665800.png","pc":"ln-dev7","tg":["table"]},{"id":"21st:ln-dev7__settings","t":"Settings","d":"here is modern settings component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/settings/default/preview.1749299119930.png","pc":"ln-dev7","tg":["dashboard","features"]},{"id":"21st:ln-dev7__social-links","t":"Social links","d":"Here is animated social links component","k":"component","s":"21st","c":"actions/link","g":"actions","a":"ln-dev7","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/social-links/default/preview.1749421857897.png","pc":"ln-dev7","tg":["link"]},{"id":"21st:ln-dev7__spend-migrator","t":"Spend migrator","d":"Here is spend migrator component","k":"component","s":"21st","c":"other","g":"other","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/spend-migrator/default/preview.1785926002964.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__status-selector","t":"Status selector","d":"Here is modern Status Selector component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/status-selector/default/preview.1749370380026.png","pc":"ln-dev7"},{"id":"21st:ln-dev7__tag-input","t":"Tag input","d":"Here is tag input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ln-dev7","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tag-input/default/preview.1749420137552.png","pc":"ln-dev7","tg":["chip","input"]},{"id":"21st:ln-dev7__tags-selector","t":"Tags selector","d":"The Tags Selector component is a reusable UI element for selecting and managing tags from a predefined list.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ln-dev7","st":"indexed","u":166,"pl":"https://cdn.21st.dev/user_2rmPdOT0hL8MtSnYm8IpqqrYTVg/tags-selector/default/preview.1738000984358.png","pc":"ln-dev7","tg":["chip"]},{"id":"21st:ln-dev7__visualize-booking","t":"Visualize booking","d":"Here is bookings vizualizationg component","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"ln-dev7","st":"indexed","u":97,"pl":"https://cdn.21st.dev/larsen66/visualize-booking/default/preview.1749421584098.png","pc":"ln-dev7","tg":["calendar","dashboard"]},{"id":"21st:loading-ui__accordion-loader","t":"Accordion loader","d":"An ASCII block loading indicator whose stacked glyphs slide across a track like an accordion to signal an in-progress state.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/accordion-loader/default/preview.1784215377992-cf2b4468-b1ea-4a95-8d2f-b408f3934a09.png","pc":"loading-ui","tg":["progress","spinner"]},{"id":"21st:loading-ui__analyzing-image","t":"Analyzing image","d":"An animated image-scanning loader that sweeps a highlight bar across a picture icon to indicate image analysis in progress.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/analyzing-image/default/preview.1784374509030-416ff722-0dbd-4ea8-a9db-f3193a2a4d36.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__arc","t":"Arc","d":"A circular arc loading spinner that rotates continuously to indicate an in-progress state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/arc/default/preview.1784219393674-a2a36e85-8f94-4a1a-a803-bc2ce271e187.png","pc":"loading-ui"},{"id":"21st:loading-ui__bars","t":"Bars","d":"An animated bars loading indicator with a configurable number of wave-animated bars.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/bars/default/preview.1784217136111-5fd35c98-86bb-4b82-ab0e-158b9fe6481c.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__bobbing-dots","t":"Bobbing dots","d":"A loading indicator of dots that bounce up and down in a staggered phase, for playful in-progress states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/bobbing-dots/default/preview.1784374515249-77d4d137-a4db-403b-a09d-fb5594ad49ec.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__bouncing-dots","t":"Bouncing dots","d":"An animated bouncing dots loading indicator that inherits the current text color and supports a configurable number of dots.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/bouncing-dots/default/preview.1784375827049-cac43718-d119-4f56-8909-140a5ac59618.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__classic","t":"Classic","d":"A classic 12-bar rotating loading spinner that fades each bar in sequence to indicate a busy or loading state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/classic/default/preview.1784212561815-92534740-e592-487d-91b1-c628eb882b40.png","pc":"loading-ui"},{"id":"21st:loading-ui__clock-ring","t":"Clock ring","d":"A circular loading spinner with a rotating clock-hand tick that inherits the current text color.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/clock-ring/default/preview.1784374533186-014f1fb9-884b-4bcc-8560-ba7428eb4a88.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__comet-spinner","t":"Comet spinner","d":"A rotating comet loading spinner with a bright head and sweeping tail for animated loading and throughput states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/comet-spinner/default/preview.1784375833175-53bfc2f8-5d20-4648-a0f8-b2e9eb18e01e.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__concentric-ring","t":"Concentric ring","d":"A layered dual-ring loading spinner with a static outer guide ring and a rotating inner segment that inherits the current text color.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/concentric-ring/default/preview.1784374551609-8b665a8f-00e9-46c7-aa01-364f18fdbc95.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__conveyor-loop","t":"Conveyor loop","d":"An ASCII-style loading indicator that moves a staggered unicode block trail across a fixed text track in a one-way conveyor loop.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/conveyor-loop/default/preview.1784216004131-15617750-9bdd-4097-b481-0f11fa80f38d.png","pc":"loading-ui"},{"id":"21st:loading-ui__dash-ring","t":"Dash ring","d":"An animated circular dash-ring spinner SVG that indicates loading or busy states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/dash-ring/default/preview.1784213495825-a091d233-dcd6-4968-aa4c-089f584009e1.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__diamond","t":"Diamond","d":"An animated pixel-style diamond loading spinner with sequentially fading segments that indicate a busy or loading state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/diamond/default/preview.1784216960190-0c0a8ad1-1bc6-4897-b429-1c081e262796.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__dots","t":"Dots","d":"Animated three-dot loading indicator with staggered blinking dots that inherit the current text color.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/dots/default/preview.1784374521567-9df168a3-422e-4348-851f-3cef07be28eb.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__dots-ring","t":"Dots ring","d":"A circular loading spinner made of pulsing dots arranged in a ring, with configurable dot count, dot size, and radius.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/dots-ring/default/preview.1784219128957-84d48b21-9ba7-46e6-84de-5aaf38951151.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__dual-arc","t":"Dual arc","d":"A minimal circular loading spinner that rotates two opposing arcs to indicate progress.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/dual-arc/default/preview.1784219674592-3687c4ba-19ba-46f0-8b6d-786abe04a5e7.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__fade-arc","t":"Fade arc","d":"An animated SVG arc spinner with dual gradient fade for indicating loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/fade-arc/default/preview.1784220033262-40bf9ce9-4e5f-4b7a-b562-f2c7ddb57e19.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__infinity","t":"Infinity","d":"An SVG infinity-path loading spinner that animates a continuous dash for long-running or ongoing loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/infinity/default/preview.1784215203755-1addd3a4-0b7d-4117-be28-052fccc527ea.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__infinity-square-snake","t":"Infinity square snake","d":"A monospace ASCII block loading indicator that traces an infinity-shaped path around two squares.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/infinity-square-snake/default/preview.1784216446443-2991152f-efcf-4b25-a2be-bedf75468534.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__infinity-track","t":"Infinity track","d":"A monospace unicode loading indicator that animates staggered block glyphs along an infinity-shaped track.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/infinity-track/default/preview.1784375803254-96a3b3e5-7a1b-441b-b0a7-b70205aab9ec.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__morphing-infinity","t":"Morphing infinity","d":"An animated SVG loading spinner that morphs a circle into an infinity shape and back in a continuous loop.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/morphing-infinity/default/preview.1784215016024-33a8c95b-ab0c-4ee8-b39b-70453409d791.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__orbit-ring","t":"Orbit ring","d":"A circular loading spinner with an orbiting arc that rotates outside the base ring to indicate ongoing activity.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/orbit-ring/default/preview.1784374545580-54e1c1d6-e866-4640-ae02-253a2e7552df.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__pulse-dot","t":"Pulse dot","d":"A pulsing dot loading indicator that scales and fades to signal an in-progress state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/pulse-dot/default/preview.1784673931635-5739c219-b3b2-4d29-a091-1de8c8342a05.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__quarter-ring","t":"Quarter ring","d":"A compact quarter-arc rotating ring loading spinner for tight spaces like buttons, badges, and inline labels.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/quarter-ring/default/preview.1784213310211-3c41ef00-2708-463c-a99c-1532f824a5bf.png","pc":"loading-ui"},{"id":"21st:loading-ui__ripple","t":"Ripple","d":"An animated SVG ripple loading spinner with expanding concentric circles that fade out, ideal for indicating loading or pending states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/ripple/default/preview.1783578760432.png","pc":"loading-ui"},{"id":"21st:loading-ui__satellite-ring","t":"Satellite ring","d":"A circular loading spinner with a satellite dot that orbits the ring edge for propagation-style loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/satellite-ring/default/preview.1784374539546-36111aa0-f66c-4c09-847b-1864d243caa7.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__spiral","t":"Spiral","d":"An animated loading spinner whose dots pulse around a circular spiral path to signal a busy state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/spiral/default/preview.1784377355975-fcd9926b-2964-40b1-8db1-c082e5249954.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__spokes","t":"Spokes","d":"An animated spinning spokes loading indicator rendered as a self-contained SVG spinner.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/spokes/default/preview.1784218880472-c2f37a06-065b-423e-bd92-30f64b8ad9eb.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__square-accordion","t":"Square accordion","d":"An animated ASCII square loader whose block glyphs trace the perimeter like an accordion for loading states.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/square-accordion/default/preview.1784215805933-d2069a8f-093c-4855-ace8-1f773d302fd8.png","pc":"loading-ui"},{"id":"21st:loading-ui__square-grid","t":"Square grid","d":"A monospace ASCII loading spinner that traces a unicode square track with a block trail orbiting the outer edge.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/square-grid/default/preview.1784389188313-03a92997-26dc-4bd0-b818-d2baf52597dc.png","pc":"loading-ui"},{"id":"21st:loading-ui__square-snake","t":"Square snake","d":"An ASCII block loading spinner where shaded square glyphs chase each other around a square path.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/square-snake/default/preview.1784216177157-9570d0d7-ee00-4197-9fcc-0ecdb4baa7c9.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__swirling","t":"Swirling","d":"An animated SVG loading spinner with a swirling stroke-dash circle that spins and morphs continuously.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/swirling/default/preview.1786705724111-c3748cac-df8f-4279-9f2e-6f834a460ac1.png","pc":"loading-ui"},{"id":"21st:loading-ui__symmetric-wave","t":"Symmetric wave","d":"An ASCII-style animated loading indicator where blocks pulse in a symmetric wave pattern.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/symmetric-wave/default/preview.1784215543802-39128e14-b996-4109-9c67-4aebb52a1544.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__text-blink","t":"Text blink","d":"A text component that gently pulses its opacity to signal an in-place loading or activity state for short labels.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/text-blink/default/preview.1784677396555-58aef2d6-9232-4efd-8e5b-65ce03ca6fe3.png","pc":"loading-ui","tg":["text"]},{"id":"21st:loading-ui__triple-dot-spinner","t":"Triple dot spinner","d":"A compact loading spinner of three dots rotating around a shared center, sized for buttons, badges, and table rows.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/triple-dot-spinner/default/preview.1784375808640-1e763996-9ebc-492e-ac15-57bb144bedec.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__twin-orbit","t":"Twin orbit","d":"A compact loading spinner with two markers orbiting a center dot in a half-cycle offset for balanced circular motion.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/twin-orbit/default/preview.1784355266794-a7c6b15d-d80f-428e-9e2c-592e08d1be2e.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:loading-ui__typing","t":"Typing","d":"An animated typing indicator with vertically bouncing dots that signals live input in chat, search, and collaborative editing surfaces.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/typing/default/preview.1784356742232-78b3d9c7-6bf4-40e1-b040-20bc2c249afd.png","pc":"loading-ui"},{"id":"21st:loading-ui__wave","t":"Wave","d":"An animated wave loading indicator built from bars that pulse vertically to signal a busy or loading state.","k":"component","s":"21st","c":"status/loader","g":"status","a":"loading-ui","st":"indexed","pl":"https://cdn.21st.dev/loading-ui/wave/default/preview.1783578966995.png","pc":"loading-ui","tg":["spinner"]},{"id":"21st:localhost_danverr__123123","t":"123123","d":"123123123123123123","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/123123/default/preview.1750173386154.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__123123-1","t":"123123 1","d":"123123123123123123","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/123123-1/default/preview.1750228341241.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__1231231111","t":"1231231111","d":"http://localhost:3000/magic-chathttp://localhost:3000/magic-chat","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/1231231111/default/preview.1753211470189.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__123attttt","t":"123attttt","d":"123attttt123attttt","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/123attttt/default/preview.1750228895892.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__22222","t":"22222","d":"222222222222222","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/22222/default/preview.1749201843092.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__abobka-kek","t":"Abobka kek","d":"abobka_kekabobka_kekabobka_kek","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/abobka-kek/default/preview.1748462573964.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__animated-blur-number","t":"Animated blur number","d":"A React number that animates digit-by-digit with an iOS-style spring and blur on changing digits.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/animated-blur-number/default/preview.1780483105301.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__asfgfsgs","t":"Asfgfsgs","d":"asfgfsgsasfgfsgsasfgfsgs","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/asfgfsgs/default/preview.1750229118048.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__codex-dummy-card-e2e","t":"Codex dummy card e2e","d":"Private registry prod E2E dummy card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/codex-dummy-card-e2e","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__codex-unlisted-card-e2e","t":"Codex unlisted card e2e","d":"Unlisted registry prod E2E dummy card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/codex-unlisted-card-e2e","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__dadadadddddd","t":"Dadadadddddd","d":"dadadadddddddadadadddddd","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/dadadadddddd/default/preview.1779721349140.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__dagfsdgasg","t":"Dagfsdgasg","d":"dagfsdgasgdagfsdgasgdagfsdgasg","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/dagfsdgasg/default/preview.1750230092760.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__demo-three","t":"Demo three","d":"Demo ThreeDemo ThreeDemo ThreeDemo Three","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/demo-three/default/preview.1750111014434.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__deps-test","t":"Deps test","d":"deps testdeps testdeps test","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/deps-test/default/preview.1749912652492.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__fasfaaaa","t":"Fasfaaaa","d":"fasfaaaafasfaaaa","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/fasfaaaa/default/preview.1750232201499.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__fqwetetetet","t":"Fqwetetetet","d":"fqwetetetetfqwetetetetfqwetetetet","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/fqwetetetet/default/preview.1750232953748.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__multi-demo-support-e2e-20260604-001","t":"Multi demo support e2e 20260604 001","d":"E2E fixture for multiple demos and component/demo support dependencies.","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/multi-demo-support-e2e-20260604-001","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__studio-team-seed-mpecx59h","t":"Studio team seed mpecx59h","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/studio-team-seed-mpecx59h","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__sukabtn","t":"Sukabtn","d":"sukabtnsukabtnsukabtnsukabtn","k":"component","s":"21st","c":"actions/button","g":"actions","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/danverr/sukabtn/default/preview.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__support-graph-e2e-202606041003","t":"Support graph e2e 202606041003","d":"E2E fixture with nested local support files, CSS imports, SVG assets, and JSON data.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/support-graph-e2e-202606041003","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__support-graph-e2e-202606041007","t":"Support graph e2e 202606041007","d":"E2E fixture with nested local support files, CSS imports, SVG assets, and JSON data.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"localhost_danverr","st":"indexed","pl":"https://21st.dev/@localhost_danverr/components/support-graph-e2e-202606041007","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__test-hi-david","t":"Test hi david","d":"test-hi_davidtest-hi_davidtest-hi_david","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/test-hi-david/default/preview.1760536064812.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__testtest","t":"Testtest","d":"testtesttesttest","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/testtest/default/preview.1750164500151.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__testtesttest","t":"Testtesttest","d":"hi serafim!hi serafim!hi serafim!","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/testtesttest/default/preview.1750152044776.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__testtesttestte","t":"Testtesttestte","d":"testtesttesttesttest","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/testtesttestte/default/preview.1752520954931.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__testtesttesttest","t":"Testtesttesttest","d":"testtesttesttest","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/testtesttesttest/default/preview.1748894720716.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__testtttt","t":"Testtttt","d":"testtttttesttttttesttttt","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/testtttt/default/preview.1750167935195.png","pc":"localhost_danverr"},{"id":"21st:localhost_danverr__yoyoyoyoyo","t":"Yoyoyoyoyo","d":"yoyoyoyoyo yoyoyoyoyo yoyoyoyoyo","k":"component","s":"21st","c":"other","g":"other","a":"localhost_danverr","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/yoyoyoyoyo/default/preview.1750227782069.png","pc":"localhost_danverr"},{"id":"21st:localhost_serafim__dialog","t":"Dialog","d":"Dialog with Glassmorphic Container inspired by cloud.laravel.com","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"localhost_serafim","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/dialog/default/preview.png","pc":"localhost_serafim"},{"id":"21st:localhost_serafim__fdsfdffsdf","t":"Fdsfdffsdf","d":"аывавыаывавыа","k":"component","s":"21st","c":"other","g":"other","a":"localhost_serafim","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/fdsfdffsdf/default/preview.1760503160622.png","pc":"localhost_serafim"},{"id":"21st:localhost_serafim__ff","t":"Ff","d":"fffffffffff","k":"component","s":"21st","c":"other","g":"other","a":"localhost_serafim","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/ff/default/preview.1760502970736.png","pc":"localhost_serafim"},{"id":"21st:localhost_serafim__fsdfdsfsdfdsfsdf","t":"Fsdfdsfsdfdsfsdf","d":"fsdfsfdsfsdf","k":"component","s":"21st","c":"other","g":"other","a":"localhost_serafim","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/fsdfdsfsdfdsfsdf/default/preview.1760503841553.png","pc":"localhost_serafim"},{"id":"21st:localhost_serafim__gkjhhjhjkhj","t":"Gkjhhjhjkhj","d":"hjhljhjkjkjhjkhkj","k":"component","s":"21st","c":"other","g":"other","a":"localhost_serafim","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/gkjhhjhjkhj/default/preview.1760503312154.png","pc":"localhost_serafim"},{"id":"21st:lolyxmoon__dd","t":"Dd","d":"Animated (ripple) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lolyxmoon","st":"indexed","pl":"https://cdn.21st.dev/lolyxmoon/dd/default/preview.1785793831756-9249a939-9abc-4f1a-983f-4c971580ad92.webp","pc":"lolyxmoon"},{"id":"21st:lovesickfromthe6ix__3d-cube-hero","t":"3d cube hero","d":"Hero section fully customizable with dedicated collapsible control panel interactive 3d visualization, scroll animation, and post processing effects made with zero dependencies","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/3d-cube-hero/default/preview.1749080910432.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__3d-hero-section","t":"3d hero section","d":"Futuristic hero section with animated 3d background, animated gradient text, and animated call to action without using external libraries","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/3d-hero-section/default/preview.1749020718520.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__animated-menu","t":"Animated menu","d":"Animated drop don menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/animated-menu/default/preview.1749162505139.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__animated-menu-1","t":"Animated menu 1","d":"Bold, modern, scrollable self contained collapsible menu system with micro and macro animations fully customizable through props","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/animated-menu-1/default/preview.1755119001259.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__calculator","t":"Calculator","d":"A functional calculator with history and  proper display formatting","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/calculator/default/preview.1750392718262.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__ethereal","t":"Ethereal","d":"scrolling hero section with animted webgl background and navigation bar. Includes post processing","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","u":40,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/ethereal/default/preview.1755896385015.png","pc":"lovesickfromthe6ix","tg":["hero"]},{"id":"21st:lovesickfromthe6ix__fluid-rainbow-hero","t":"Fluid rainbow hero","d":"An SAAS Hero section with a procedural animated fluid simulation background. Includes marketing header and call-to-action with hover animations","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/fluid-rainbow-hero/default/preview.1755234083683.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__full-screen-scroll-fx","t":"Full screen scroll fx","d":"React + GSAP full-screen scroll slideshow with animated sidebar navigation and smooth scroll triggered animations, fully customizable through props","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"lovesickfromthe6ix","st":"indexed","u":357,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/full-screen-scroll-fx/default/preview.1755782340506.png","pc":"lovesickfromthe6ix","tg":["sidebar"]},{"id":"21st:lovesickfromthe6ix__gradient-button","t":"Gradient button","d":"Highly customizable button component with animations and custom gradient effects using webgl and gsap","k":"component","s":"21st","c":"actions/button","g":"actions","a":"lovesickfromthe6ix","st":"indexed","u":24,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/gradient-button/default/preview.1749336701014.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__hero","t":"Hero","d":"Hero section with WebGL particle field animated background, gradient text, hover animations and idle text animations","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/hero/default/preview.1757057944313.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__hero-section","t":"Hero section","d":"An animated modern responsive hero section for a startup or saas with webgl visuals, post processing, bold styling, hover effects, and CTA","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/hero-section/default/preview.1758596931568.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__horizon-hero-section","t":"Horizon hero section","d":"3d hero section component with interactive animations, 3d elements, parallax, post processing, scroll animation, and animated sidebar menu","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"lovesickfromthe6ix","st":"indexed","u":1133,"pl":"https://cdn.21st.dev/user_2y0orG0S3NPUGUs5U6oQCBMLMkR/horizon-hero-section/default/preview.1750811163361.png","pc":"lovesickfromthe6ix","tg":["sidebar"]},{"id":"21st:lovesickfromthe6ix__infinite-drag-grid","t":"Infinite drag grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/infinite-drag-grid/default/preview.1749991514743.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__interactive-hero-section","t":"Interactive hero section","d":"A hero section component with interactive bold, animated gradient text and a call to action button with hover animation. All is pure css no external libraries","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/interactive-hero-section/default/preview.1748982959474.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__interactive-map","t":"Interactive map","d":"An interactive GPS map with multiple visualization styles and custom map markers","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"lovesickfromthe6ix","st":"indexed","u":181,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/interactive-map/default/preview.1752059124545.png","pc":"lovesickfromthe6ix","tg":["data-visualization","map","search"]},{"id":"21st:lovesickfromthe6ix__iphone-mockup","t":"Iphone mockup","d":"A configurable Iphone mockup","k":"component","s":"21st","c":"other","g":"other","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/iphone-mockup/default/preview.1756419508539.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__loading-animation","t":"Loading animation","d":"Custom page loading animation component","k":"component","s":"21st","c":"status/loader","g":"status","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/loading-animation/default/preview.1756393684482.png","pc":"lovesickfromthe6ix","tg":["spinner"]},{"id":"21st:lovesickfromthe6ix__loading-animation-1","t":"Loading animation 1","d":"Custom loading animation component","k":"component","s":"21st","c":"status/loader","g":"status","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/loading-animation-1/default/preview.1756395256528.png","pc":"lovesickfromthe6ix","tg":["spinner"]},{"id":"21st:lovesickfromthe6ix__meta-ball-hero","t":"Meta ball hero","d":"Customizable 2d Metaball background visualization ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/meta-ball-hero/default/preview.1751638688675.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__music-player","t":"Music player","d":"Customizable music player with playlist display, album art, playback controls and an optional waveform display. fully customizable through props","k":"component","s":"21st","c":"media/player","g":"media","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/music-player/default/preview.1755134006457.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__music-portfolio","t":"Music portfolio","d":"A sophisticated React component for displaying music portfolios, discographies, or creative project collections with stunning interactive effects. Features include text scrambling ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"lovesickfromthe6ix","st":"indexed","u":52,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/music-portfolio/default/preview.1756531625533.png","pc":"lovesickfromthe6ix","tg":["list"]},{"id":"21st:lovesickfromthe6ix__music-reactive-hero-section","t":"Music reactive hero section","d":"A modern, minimal and bold hero section with a dynamic audio reactive visualization background. Includes built in audio player with play / pause controls and beautiful post process","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","u":68,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/music-reactive-hero-section/default/preview.1785357502755-fb740e17-ed02-4b8a-bf55-4568a6755e82.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__omni-command-palette","t":"Omni command palette","d":"a fast, accessible, mobile-friendly command/search palette with async multi-sources, fuzzy highlighting, recents, presets, pinned actions, and keyboard shortcuts.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"lovesickfromthe6ix","st":"indexed","u":41,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/omni-command-palette/default/preview.1755732330312.png","pc":"lovesickfromthe6ix","tg":["dropdown","list","search"]},{"id":"21st:lovesickfromthe6ix__orbital-hero","t":"Orbital hero","d":"A futuristic hero section ith physicly based orbit system, post processing effects, text effects, animated gradients, hover animation, and responsive design. Visuals are all real t","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/orbital-hero/default/preview.1751002506110.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__particle-hero","t":"Particle hero","d":"Hero section particle background using webgl","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","u":15,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/particle-hero/default/preview.1748987252628.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__particle-text","t":"Particle text","d":"Interactive particle text effect with custom fluid dynamics, post processing, advanced animation and animated gradient. Particles can be configured to expand from mouse or attract ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"lovesickfromthe6ix","st":"indexed","u":35,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/particle-text/default/preview.1749206967882.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__pricing-section","t":"Pricing section","d":"Modern pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/pricing-section/default/preview.1758883430067.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__project-management-dashboard","t":"Project management dashboard","d":"$35","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/project-management-dashboard/default/preview.1755937173556.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__real-time-flow-field","t":"Real time flow field","d":"3d Flow field liquid simulation shader with post processing FX and an optional Hero overlay","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/real-time-flow-field/default/preview.1758706545687.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__revolution-hero","t":"Revolution hero","d":"Hero section with floating side panel navigation and an animated dynamic abstract background","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","u":68,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/revolution-hero/default/preview.1750326618503.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__saas-hero-section","t":"Saas hero section","d":"A modern hero section for an SAAS startup with an animated particle field background, animated floating text, CTA buttons with hover animation, subtle animated color gradient, and ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/saas-hero-section/default/preview.1758606943431.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__scroll-animated-video","t":"Scroll animated video","k":"component","s":"21st","c":"media/player","g":"media","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/scroll-animated-video/default/preview.1755743375859.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__shader-animation","t":"Shader animation","d":"Animated hero background with procedural gradient animation using webgl","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lovesickfromthe6ix","st":"indexed","u":55,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/shader-animation/default/preview.1755805553789.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__shooting-stars-hero","t":"Shooting stars hero","d":"Hero section with dynamic animated partile system with trails and post processing effects","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/shooting-stars-hero/default/preview.1757038559333.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__sign-in-flo","t":"Sign in flo","d":"A modern sign in flow with animated elements and minimal dependencies","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"lovesickfromthe6ix","st":"rated","u":54,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/sign-in-flo/default/preview.1749002042485.png","pc":"lovesickfromthe6ix","tg":["sign-in"],"sc":18},{"id":"21st:lovesickfromthe6ix__sroll-animation","t":"Sroll animation","d":"A dynamic 3d scroll animated experience that reveals a header and call-to-action.. A procedural 3d forest scene  with an old enchanted doorway. As the user scrolls the camera moves","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","pl":"https://cdn.21st.dev/lovesickfromthe6ix/sroll-animation/default/preview.1757124531818.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__turbulent-flow","t":"Turbulent flow","d":"animated background component featuring a turbulent gradient flow using a custom written shader","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lovesickfromthe6ix","st":"indexed","u":28,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/turbulent-flow/default/preview.1749368479987.png","pc":"lovesickfromthe6ix"},{"id":"21st:lovesickfromthe6ix__vhs-hero-section","t":"Vhs hero section","d":"Hero section ith an ethereal VHS retro aesthetic. Includes interactive animations, text effects and call to action","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lovesickfromthe6ix","st":"indexed","u":41,"pl":"https://cdn.21st.dev/lovesickfromthe6ix/vhs-hero-section/default/preview.1750313356268.png","pc":"lovesickfromthe6ix","tg":["cta"]},{"id":"21st:lran1028__smoky-button","t":"Smoky button","d":"A WebGL-powered button with customizable, silk-like animated smoke.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"lran1028","st":"indexed","pl":"https://cdn.21st.dev/lran1028/smoky-button/default/preview.1785579563793-9fe7d5c0-6e0f-41db-aa14-d577ab711e7b.webp","pc":"lran1028"},{"id":"21st:lucaszanini096__waves-background","t":"Waves background","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lucaszanini096","st":"indexed","pl":"https://cdn.21st.dev/lucaszanini096/waves-background/default/preview.1785716124374-49981210-780c-4a04-b1a2-9ed6bc19e40f.png","pc":"lucaszanini096"},{"id":"21st:lucaszanini096__waves-background-2","t":"Waves background 2","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lucaszanini096","st":"indexed","pl":"https://cdn.21st.dev/lucaszanini096/waves-background-2/default/preview.1785716143095-5ce8d278-0c5d-41df-b00d-9a00e11e9a51.png","pc":"lucaszanini096"},{"id":"21st:luizmb.producao__animatedcounter","t":"Animatedcounter","d":"Number that counts up when it scrolls into view, then stops. Custom formatter for currency/percent, configurable duration and delay; respects reduced motion.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"luizmb.producao","st":"indexed","pl":"https://21st.dev/@luizmb.producao/components/animatedcounter","pc":"luizmb.producao"},{"id":"21st:luizmb.producao__marquee","t":"Marquee","d":"Seamless infinite horizontal marquee for logo clouds and badge rows. Dual-track edge-to-edge loop with CSS edge-fade mask; respects reduced motion.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"luizmb.producao","st":"indexed","pl":"https://21st.dev/@luizmb.producao/components/marquee","pc":"luizmb.producao"},{"id":"21st:luizmb.producao__whatsappfloatingbutton","t":"Whatsappfloatingbutton","d":"Site-wide floating WhatsApp button with an auto-appearing, dismissible teaser bubble. Both the button and bubble open the chat. Configurable color, name and message.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"luizmb.producao","st":"indexed","pl":"https://21st.dev/@luizmb.producao/components/whatsappfloatingbutton","pc":"luizmb.producao"},{"id":"21st:lujx1994__counter-button","t":"Counter button","d":"CounterButton","k":"component","s":"21st","c":"actions/button","g":"actions","a":"lujx1994","st":"indexed","pl":"https://cdn.21st.dev/lujx1994/counter-button/default/preview.1750583814547.png","pc":"lujx1994"},{"id":"21st:lukacho__copy-to-clipboard","t":"Copy to clipboard","d":"Copy to Clipboard Component","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"lukacho","st":"indexed","pl":"https://cdn.21st.dev/user_lukacho/copy-to-clipboard.png","pc":"lukacho"},{"id":"21st:lukacho__custom-cursor","t":"Custom cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"lukacho","st":"indexed","pl":"https://cdn.21st.dev/user_lukacho/custom-cursor.png","pc":"lukacho","tg":["cursor"]},{"id":"21st:lukacho__figma-cursor","t":"Figma cursor","d":"Useful for team work illustrations","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"lukacho","st":"indexed","pl":"https://cdn.21st.dev/user_lukacho/figma-cursor.png","pc":"lukacho"},{"id":"21st:lukacho__image-swiper","t":"Image swiper","d":"Image swiper card for a real estate website\n\n","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"lukacho","st":"indexed","u":87,"pl":"https://cdn.21st.dev/user_lukacho/image-swiper.png","pc":"lukacho","tg":["gallery","slider"]},{"id":"21st:lukacho__marquee","t":"Marquee","d":"Very useful while showcasing comments or technologies","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"lukacho","st":"indexed","u":1177,"pl":"https://cdn.21st.dev/user_lukacho/marquee.png","pc":"lukacho","tg":["grid","marquee","scroll-area"]},{"id":"21st:lukacho__tiles","t":"Tiles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lukacho","st":"indexed","pl":"https://cdn.21st.dev/user_lukacho/tiles.png","pc":"lukacho","tg":["background","grid"]},{"id":"21st:luxcompsred__test","t":"Test","d":"Comps.Red UI with Magic.","k":"component","s":"21st","c":"other","g":"other","a":"luxcompsred","st":"indexed","pl":"https://cdn.21st.dev/luxcompsred/test/default/preview.1756005430662.png","pc":"luxcompsred"},{"id":"21st:lyanchouss__asd","t":"Asd","d":"Animated blueprint-grid shader background used across the Dali Agents UI on daliagents.com, with a discreet daliagents.com credit link.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/user_2xFgBhIEcC8WVjxizPEzB14AOkb/asd/default/preview.1756894585457.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__cta-with-marquee","t":"Cta with marquee","d":"CTA section with image and video marquee variants that invites visitors to start with one working agent from daliagents.com, part of the Dali Agents UI.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lyanchouss","st":"indexed","u":90,"pl":"https://cdn.21st.dev/lyanchouss/cta-with-marquee/default/preview.1759331424506.png","pc":"lyanchouss","tg":["ai-chat","cta","gallery","marquee"]},{"id":"21st:lyanchouss__cta-with-text-marquee","t":"Cta with text marquee","d":"Call-to-action section for daliagents.com with a scrolling marquee of Dali Agents service lanes, inviting visitors to start with one fixed-scope agent.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"lyanchouss","st":"indexed","u":221,"pl":"https://cdn.21st.dev/lyanchouss/cta-with-text-marquee/default/preview.1759339049804.png","pc":"lyanchouss","tg":["cta","marquee"]},{"id":"21st:lyanchouss__dark-grid","t":"Dark grid","d":"Dark capability grid for daliagents.com showing what Dali Agents ships - agents wired into real workflows, structured outputs, and acceptance-tested delivery - as part of the Dali ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"lyanchouss","st":"indexed","u":46,"pl":"https://cdn.21st.dev/lyanchouss/dark-grid/default/preview.1760138599724.png","pc":"lyanchouss","tg":["features"]},{"id":"21st:lyanchouss__dock","t":"Dock","d":"Minimal dock for the daliagents.com console, giving one-click access to the Dali Agents surfaces - Agents, Leads, Operations, Support, Care, and Rescue.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/dock/default/preview.1759592925726.png","pc":"lyanchouss","tg":["dock","navigation-menu"]},{"id":"21st:lyanchouss__fallback-card","t":"Fallback card","d":"Empty and fallback state card for the daliagents.com client console, shown when no agents are running or a workflow has no runs yet, part of the Dali Agents UI.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/fallback-card/default/preview.1758602065436.png","pc":"lyanchouss","tg":["empty-state"]},{"id":"21st:lyanchouss__hero-minimalism","t":"Hero minimalism","d":"A minimal full-screen hero for daliagents.com stating the Dali Agents promise - working AI agents with fixed scope and an upfront acceptance test - as part of the Dali Agents UI.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"lyanchouss","st":"indexed","u":182,"pl":"https://cdn.21st.dev/lyanchouss/hero-minimalism/default/preview.1785602015747.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__login-signup","t":"Login signup","d":"Minimal login, sign-up, and forgot-password cards for the Dali Agents client console on daliagents.com, where clients sign in to track their agents.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"lyanchouss","st":"indexed","u":255,"pl":"https://cdn.21st.dev/lyanchouss/login-signup/default/preview.1785602015747.png","pc":"lyanchouss","tg":["checkbox","form","sign-in","sign-up"]},{"id":"21st:lyanchouss__one-dialog","t":"One dialog","d":"Dialog primitive with 20 variants covering the daliagents.com console surfaces - go-live confirms, Agent Care upsell and cancel, invites, OTP verification, dashboard sharing, and e","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/one-dialog/default/preview.1780071602869.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__pricing-cards","t":"Pricing cards","d":"Pricing section for daliagents.com showing the Dali Agents packages - Starter, Agent Care, and Rescue & Migration - as part of the Dali Agents UI.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"lyanchouss","st":"indexed","u":119,"pl":"https://cdn.21st.dev/lyanchouss/pricing-cards/default/preview.1757402696088.png","pc":"lyanchouss","tg":["badge","pricing-section","radio-group","table"]},{"id":"21st:lyanchouss__processing-card","t":"Processing card","d":"An animated status card for daliagents.com showing a Dali agent working through a live lead run - qualifying, routing, replying - as part of the Dali Agents UI.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"lyanchouss","st":"rated","pl":"https://cdn.21st.dev/lyanchouss/processing-card/default/preview.1758602377997.png","pc":"lyanchouss","tg":["progress"],"sc":20},{"id":"21st:lyanchouss__spinner-morph","t":"Spinner morph","d":"Morphing SVG loader from the Dali Agents UI on daliagents.com, shown while a Dali agent runs a workflow.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/spinner-morph/default/preview.1758740990192.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__spinning-sphere","t":"Spinning sphere","d":"Animated wireframe sphere accent for daliagents.com with a discreet daliagents.com credit link, used as a minimal visual element in the Dali Agents UI.","k":"component","s":"21st","c":"status/loader","g":"status","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/spinning-sphere/default/preview.1758740792909.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__test","t":"Test","d":"A minimal counter card from the Dali Agents UI at daliagents.com - count up from zero to your first working agent.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/test/default/preview.1772115880658.png","pc":"lyanchouss"},{"id":"21st:lyanchouss__theme-switch","t":"Theme switch","d":"Light/dark theme toggle for the Dali Agents console at daliagents.com, with five switch variants used across the Dali Agents UI.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"lyanchouss","st":"indexed","u":240,"pl":"https://cdn.21st.dev/lyanchouss/theme-switch/default/preview.1757056210193.png","pc":"lyanchouss","tg":["toggle"]},{"id":"21st:m.kumailalirajpoot__alert-dialog","t":"Alert dialog","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/alert-dialog/default/preview.1762543557463.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__circle-unique-load","t":"Circle unique load","d":"A beautiful laoding component rotate regular and changes color and loading state text with diffrent symbols.","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.kumailalirajpoot","st":"indexed","u":32,"pl":"https://cdn.21st.dev/m.kumailalirajpoot/circle-unique-load/default/preview.1767718620616.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__core-header-navbar","t":"Core header navbar","d":"CoreHeader – A sleek top navigation bar for dashboards and apps. Displays the page title, user identity, and avatar, with a subtle background pattern for a modern look.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"m.kumailalirajpoot","st":"indexed","u":38,"pl":"https://cdn.21st.dev/user_338YwMTIGt8stOiPgn1tRlIAZUm/core-header-navbar/default/preview.1785838679873.png","pc":"m.kumailalirajpoot","tg":["dashboard","tabs"]},{"id":"21st:m.kumailalirajpoot__core-spin-loader","t":"Core spin loader","d":"Designed to fit seamlessly into dashboards, SaaS products, AI interfaces, and developer tools, CoreSpin Loader delivers a premium visual experience while remaining lightweight and ","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/user_338YwMTIGt8stOiPgn1tRlIAZUm/core-spin-loader/default/preview.1785926585842.png","pc":"m.kumailalirajpoot","tg":["spinner"]},{"id":"21st:m.kumailalirajpoot__empty-state-for-friends","t":"Empty state for friends","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/empty-state-for-friends/default/preview.1767181734915.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__group-list-card","t":"Group list card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/group-list-card/default/preview.1768131542496.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__holo-matrix-environment","t":"Holo matrix environment","d":"A futuristic neon grid background with animated corner glyphs, ambient gradients, and subtle motion effects, designed to create a high-tech, immersive interface experience.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/holo-matrix-environment/default/preview.1768488716047.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__lost-grid","t":"Lost grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/user_338YwMTIGt8stOiPgn1tRlIAZUm/lost-grid/default/preview.1769192946717.jpeg","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__neon-flow","t":"Neon flow","d":"Neon Flow is a full-screen, animated canvas React component that simulates a cyberpunk-style aurora effect using a high-density particle system.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/neon-flow/default/preview.1768498065152.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__neon-matrix-loader","t":"Neon matrix loader","d":"The Neon Matrix Loader is a modern, futuristic loading animation built with a 3×3 grid of animated squares.","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/neon-matrix-loader/default/preview.1768487824283.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__preference-modal","t":"Preference modal","d":"The Switch component in ShadCN UI is toggle button used to turn settings on or off with a smooth sliding motion. It provides a clean and accessible way to control binary options li","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/preference-modal/default/preview.1762584539341.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__prism-flux-loader","t":"Prism flux loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.kumailalirajpoot","st":"indexed","u":59,"pl":"https://cdn.21st.dev/user_338YwMTIGt8stOiPgn1tRlIAZUm/prism-flux-loader/default/preview.1769192886377.jpeg","pc":"m.kumailalirajpoot","tg":["spinner"]},{"id":"21st:m.kumailalirajpoot__quantum-loader","t":"Quantum loader","d":"A minimal quantum-inspired spin loader with a glowing center and smooth color-shifting animation around of their circles from its center.","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/quantum-loader/default/preview.1769272368771.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__test-2","t":"Test 2","d":"Test 2 because my real component didn't submit!","k":"component","s":"21st","c":"other","g":"other","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/test-2/default/preview.1762089624770.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__text-reveal-animation","t":"Text reveal animation","d":"This component animates each letter of \"Animations\" sequentially using a staggered effect based on its index. Clicking the button resets the state to replay the animation.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"m.kumailalirajpoot","st":"indexed","u":25,"pl":"https://cdn.21st.dev/m.kumailalirajpoot/text-reveal-animation/default/preview.1769194006668.png","pc":"m.kumailalirajpoot","tg":["text"]},{"id":"21st:m.kumailalirajpoot__unique-group-invitation-card","t":"Unique group invitation card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/unique-group-invitation-card/default/preview.1767516490436.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__unique-pricing-chart-modal","t":"Unique pricing chart modal","d":"A reusable step-style line chart component built with Recharts and ShadCN UI, used to visualize monthly data trends. It accepts an array of { month, value } objects and dynamically","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/unique-pricing-chart-modal/default/preview.1762623538088.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__update-password-modal","t":"Update password modal","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/update-password-modal/default/preview.1762585698336.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.kumailalirajpoot__vpn-featured-modal","t":"Vpn featured modal","d":"The TurboVpn component is a ShadCN-based dialog that lets users manage VPN settings. It includes a main switch to turn the VPN on or off and feature toggles for third-party app acc","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"m.kumailalirajpoot","st":"indexed","pl":"https://cdn.21st.dev/m.kumailalirajpoot/vpn-featured-modal/default/preview.1762797728736.png","pc":"m.kumailalirajpoot"},{"id":"21st:m.umairwaheedansari__aether-card","t":"Aether card","d":"A sleek, motion-driven info card featuring a drifting grid and reactive wave animation that flows like air.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/aether-card/default/preview.1761914067515.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__card","t":"Card","d":"A Animation Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/card/default/preview.1755263280980.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__flip-card","t":"Flip card","d":"A Stylish and Animated Flip Card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"m.umairwaheedansari","st":"indexed","u":196,"pl":"https://cdn.21st.dev/m.umairwaheedansari/flip-card/default/preview.1755254813154.png","pc":"m.umairwaheedansari","tg":["card","icon"]},{"id":"21st:m.umairwaheedansari__hero-section","t":"Hero section","d":"A Heavenly created Hero Section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/hero-section/default/preview.1759653868164.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__image-cursor-trail","t":"Image cursor trail","d":"A unique interactive component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"m.umairwaheedansari","st":"indexed","u":44,"pl":"https://cdn.21st.dev/m.umairwaheedansari/image-cursor-trail/default/preview.1755522265273.png","pc":"m.umairwaheedansari","tg":["cursor","gallery"]},{"id":"21st:m.umairwaheedansari__landing-page","t":"Landing page","d":"A 3D Interactive Landing page","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"m.umairwaheedansari","st":"indexed","u":110,"pl":"https://cdn.21st.dev/m.umairwaheedansari/landing-page/default/preview.1758288581462.png","pc":"m.umairwaheedansari","tg":["globe"]},{"id":"21st:m.umairwaheedansari__like-button","t":"Like button","d":"A SImple Like Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"m.umairwaheedansari","st":"indexed","u":10,"pl":"https://cdn.21st.dev/m.umairwaheedansari/like-button/default/preview.1756049519910.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__navbar-hero","t":"Navbar hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/navbar-hero/default/preview.1755240316540.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__particles-bg","t":"Particles bg","d":"It is a uniquely interactive Particle Background component. It connects the mouse pointer with particles, and on click, it creates more particles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/particles-bg/default/preview.1755518162678.png","pc":"m.umairwaheedansari","tg":["background"]},{"id":"21st:m.umairwaheedansari__password-feild","t":"Password feild","d":"A descriptive and strong password recommendation field","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/password-feild/default/preview.1755259351291.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__push-button","t":"Push button","d":"A Button that gives manual push vibe","k":"component","s":"21st","c":"actions/button","g":"actions","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/push-button/default/preview.1756106247864.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__react","t":"React","d":"An animated React logo","k":"component","s":"21st","c":"other","g":"other","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/react/default/preview.1758786978507.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__send-button","t":"Send button","d":"A Uniquely Animated Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/send-button/default/preview.1756050245453.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__siri-orb","t":"Siri orb","d":"A fascinating Orb","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/siri-orb/default/preview.1785468298292-ca50d236-7d17-49d7-8d25-583322b398ef.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__slime-floating","t":"Slime floating","d":"A Slimy Background component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/slime-floating/default/preview.1756986885867.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__star-button","t":"Star button","d":"A Uniquely Animated Button for hover effect","k":"component","s":"21st","c":"actions/button","g":"actions","a":"m.umairwaheedansari","st":"indexed","u":48,"pl":"https://cdn.21st.dev/m.umairwaheedansari/star-button/default/preview.1756107155194.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__star-loader","t":"Star loader","d":"A Star Loader made by Moving chunks of lines","k":"component","s":"21st","c":"status/loader","g":"status","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/star-loader/default/preview.1761031405515.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__tags-select","t":"Tags select","d":"A Component to select tags, simple and stylish","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"m.umairwaheedansari","st":"indexed","u":17,"pl":"https://cdn.21st.dev/m.umairwaheedansari/tags-select/default/preview.1756041512539.png","pc":"m.umairwaheedansari","tg":["chip","input","select"]},{"id":"21st:m.umairwaheedansari__toggle-button","t":"Toggle button","d":"A Uniquely Animated toggle button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"m.umairwaheedansari","st":"indexed","pl":"https://cdn.21st.dev/m.umairwaheedansari/toggle-button/default/preview.1756484816828.png","pc":"m.umairwaheedansari"},{"id":"21st:m.umairwaheedansari__tunnel-hero","t":"Tunnel hero","d":"An Animated 3D Hero Background","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"m.umairwaheedansari","st":"indexed","u":28,"pl":"https://cdn.21st.dev/m.umairwaheedansari/tunnel-hero/default/preview.1756713170517.png","pc":"m.umairwaheedansari"},{"id":"21st:m2vipin__bloom-field-gradient","t":"Bloom field gradient","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#DCEBF7, #B9D4EC, #F3D9E4, #F7EFE3). Features: soft blur finish, fi","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"m2vipin","st":"indexed","pl":"https://cdn.21st.dev/m2vipin/bloom-field-gradient/default/preview.1785614146665-a80bf17b-b99b-4c5a-b974-017eb6a7394a.webp","pc":"m2vipin"},{"id":"21st:madichettyvishnu__dark-mode","t":"Dark mode","d":"Animated (shimmer) ASCII art in the Voxel style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"component","s":"21st","c":"media/player","g":"media","a":"madichettyvishnu","st":"indexed","pl":"https://cdn.21st.dev/madichettyvishnu/dark-mode/default/preview.1783828338318.webp","pc":"madichettyvishnu","tg":["video"]},{"id":"21st:madichettyvishnu__light-mode","t":"Light mode","d":"Animated (shimmer) ASCII art in the Voxel style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, car","k":"component","s":"21st","c":"media/player","g":"media","a":"madichettyvishnu","st":"indexed","pl":"https://cdn.21st.dev/madichettyvishnu/light-mode/default/preview.1783828294398.webp","pc":"madichettyvishnu","tg":["video"]},{"id":"21st:magicqrde__p1","t":"P1","d":"testy zobaczyny","k":"component","s":"21st","c":"other","g":"other","a":"magicqrde","st":"indexed","pl":"https://cdn.21st.dev/magicqrde/p1/default/preview.1752711940054.png","pc":"magicqrde"},{"id":"21st:maheshwarreddy970__chatfaq","t":"Chatfaq","d":"chat frequently asked questions ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"maheshwarreddy970","st":"indexed","pl":"https://cdn.21st.dev/maheshwarreddy970/chatfaq/default/preview.1753529685495.png","pc":"maheshwarreddy970"},{"id":"21st:maheshwarreddy970__pricing-section","t":"Pricing section","d":"Pricing Section ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"maheshwarreddy970","st":"indexed","pl":"https://cdn.21st.dev/maheshwarreddy970/pricing-section/default/preview.1753525273429.png","pc":"maheshwarreddy970"},{"id":"21st:maheshwarreddy970__scrollhidenavbar","t":"Scrollhidenavbar","d":"scrollhidenavbar","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"maheshwarreddy970","st":"indexed","pl":"https://cdn.21st.dev/maheshwarreddy970/scrollhidenavbar/default/preview.1753528991630.png","pc":"maheshwarreddy970"},{"id":"21st:maheshwarreddy970__threedpricing","t":"Threedpricing","d":"threedpricing","k":"component","s":"21st","c":"marketing","g":"marketing","a":"maheshwarreddy970","st":"indexed","pl":"https://cdn.21st.dev/maheshwarreddy970/threedpricing/default/preview.1753529290548.png","pc":"maheshwarreddy970"},{"id":"21st:makviesainte__contributors-section","t":"Contributors section","d":"A cinematic 3D \"wall of faces\" that celebrates an open-source community.","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"makviesainte","st":"indexed","u":5,"pl":"https://cdn.21st.dev/makviesainte/contributors-section/default/preview.1785313390191-ad4043b9-5fc8-44e8-97a8-ad7d898350aa.png","pc":"makviesainte"},{"id":"21st:makviesainte__country-accordion","t":"Country accordion","d":"A collapsible international money transfer UI that groups countries by region. Each row expands to reveal additional destinations with a fluid height animation powered by Framer Mo","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"makviesainte","st":"indexed","pl":"https://cdn.21st.dev/makviesainte/country-accordion/default/preview.1776721948777.png","pc":"makviesainte","tg":["accordion","cta","list"]},{"id":"21st:makviesainte__hover-brand-logo","t":"Hover brand logo","d":"An interactive horizontal banner that animates the displayed brand name as you hover over its icon.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"makviesainte","st":"indexed","u":12,"pl":"https://cdn.21st.dev/makviesainte/hover-brand-logo/default/preview.1776727034591.png","pc":"makviesainte"},{"id":"21st:makviesainte__progress-metric-card","t":"Progress metric card","d":"A KPI stat card pairing a large headline figure with a data-driven chart, rendered with Recharts and switchable between a smooth progression curve and bars.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"makviesainte","st":"rated","u":50,"pl":"https://cdn.21st.dev/makviesainte/progress-metric-card/default/preview.1782062854405.png","pc":"makviesainte","tg":["card","dashboard"],"sc":23},{"id":"21st:makviesainte__team-showcase","t":"Team showcase","d":"A magazine-style team section featuring a three-column staggered photo grid paired with an interactive member list. Photos default to grayscale; hovering a photo or a name entry si","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"makviesainte","st":"indexed","u":114,"pl":"https://cdn.21st.dev/makviesainte/team-showcase/default/preview.1772451666470.png","pc":"makviesainte","tg":["gallery","link","team"]},{"id":"21st:mananpoojara__hero-page-lorenz-attractor-animation","t":"Hero page lorenz attractor animation","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mananpoojara","st":"indexed","pl":"https://cdn.21st.dev/mananpoojara/hero-page-lorenz-attractor-animation/default/preview.1764998367961.png","pc":"mananpoojara"},{"id":"21st:manfromexistence__liquid-glass","t":"Liquid glass","d":"Apple Liquid Glass","k":"component","s":"21st","c":"motion/background","g":"motion","a":"manfromexistence","st":"indexed","u":57,"pl":"https://cdn.21st.dev/manfromexistence/liquid-glass/default/preview.1785458546925-4d2b94f6-e56e-441d-b3c0-eba5b38f275b.png","pc":"manfromexistence"},{"id":"21st:manuarora700__3d-card-effect","t":"3d card effect","d":"Here is 3D Card Effect","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"manuarora700","st":"indexed","u":263,"pl":"https://cdn.21st.dev/larsen66/3d-card-effect/default/preview.1750552787385.png","pc":"manuarora700"},{"id":"21st:manuarora700__3d-marquee","t":"3d marquee","d":"Here is 3D Marquee component ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"manuarora700","st":"indexed","u":113,"pl":"https://cdn.21st.dev/larsen66/3d-marquee/default/preview.1750552641642.png","pc":"manuarora700","tg":["marquee"]},{"id":"21st:manuarora700__3d-pin","t":"3d pin","d":"A gradient pin that animates on hover, perfect for product links.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"manuarora700","st":"indexed","u":286,"pl":"https://cdn.21st.dev/user_aceternity/3d-pin/default/preview.png","pc":"manuarora700"},{"id":"21st:manuarora700__animated-modal","t":"Animated modal","d":"A customizable, compound modal component with animated transitions","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"manuarora700","st":"indexed","u":145,"pl":"https://cdn.21st.dev/user_aceternity/animated-modal.png","pc":"manuarora700","tg":["gallery","modal"]},{"id":"21st:manuarora700__animated-testimonials","t":"Animated testimonials","d":"Minimal testimonials sections with image and quote.\n\nFeatures:\n-  Image Carousel: Enjoy smooth animated image transitions with cool 3D rotation effects.  \n-  Word Animation: Watch ","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"manuarora700","st":"indexed","u":1586,"pl":"https://cdn.21st.dev/user_aceternity/animated-testimonials.png","pc":"manuarora700","tg":["carousel","image","testimonials"]},{"id":"21st:manuarora700__animated-tooltip","t":"Animated tooltip","d":"A cool tooltip that reveals on hover, follows mouse pointer\n\nFeatures:  \n-  Mouse Following: The tooltip moves and rotates with your cursor.  \n-  Spring Animation: Enjoy smooth, sp","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"manuarora700","st":"indexed","u":640,"pl":"https://cdn.21st.dev/user_aceternity/animated-tooltip.png","pc":"manuarora700","tg":["profile","team","tooltip"]},{"id":"21st:manuarora700__aurora-background","t":"Aurora background","d":"A subtle Aurora or Southern Lights background for your website.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":6929,"pl":"https://cdn.21st.dev/user_aceternity/aurora-background.png","pc":"manuarora700","tg":["background"]},{"id":"21st:manuarora700__background-beams","t":"Background beams","d":"Multiple background beams that follow a path of SVG, makes a good hero section background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":1187,"pl":"https://cdn.21st.dev/user_aceternity/background-beams.png","pc":"manuarora700"},{"id":"21st:manuarora700__background-beams-with-collision","t":"Background beams with collision","d":"Exploding beams in the background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":421,"pl":"https://cdn.21st.dev/user_aceternity/background-beams-with-collision.png","pc":"manuarora700","tg":["background"]},{"id":"21st:manuarora700__background-boxes","t":"Background boxes","d":"A full width background box container that highlights on hover","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":969,"pl":"https://cdn.21st.dev/user_aceternity/background-boxes.png","pc":"manuarora700","tg":["background"]},{"id":"21st:manuarora700__background-gradient","t":"Background gradient","d":"An animated gradient that sits at the background of a card, button or anything.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"manuarora700","st":"indexed","u":337,"pl":"https://cdn.21st.dev/user_aceternity/background-gradient.png","pc":"manuarora700","tg":["border"]},{"id":"21st:manuarora700__background-gradient-animation","t":"Background gradient animation","d":"A smooth and elegant background gradient animation that changes the gradient position over time.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":1675,"pl":"https://cdn.21st.dev/user_aceternity/background-gradient-animation.png","pc":"manuarora700"},{"id":"21st:manuarora700__background-ripple-effect","t":"Background ripple effect","d":"A Hero component where background cells once clicked, create a ripple effect","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":235,"pl":"https://cdn.21st.dev/user_aceternity/background-ripple-effect/default/preview.png","pc":"manuarora700"},{"id":"21st:manuarora700__badge","t":"Badge","d":"An animated badge with radial gradient hover effect and an animated arrow path. Perfect for announcements and CTAs.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"manuarora700","st":"indexed","u":4,"pl":"https://cdn.21st.dev/aceternity/badge/demos/default/preview.1773393691591.png","pc":"manuarora700","tg":["announcement"]},{"id":"21st:manuarora700__bento-grid","t":"Bento grid","d":"A skewed grid layout with Title, description and a header component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"manuarora700","st":"indexed","u":2676,"pl":"https://cdn.21st.dev/user_aceternity/bento-grid.png","pc":"manuarora700","tg":["features"]},{"id":"21st:manuarora700__button","t":"Button","d":"A curated list of awesome, battle tested Tailwind CSS buttons components","k":"component","s":"21st","c":"actions/button","g":"actions","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/button.png","pc":"manuarora700"},{"id":"21st:manuarora700__canvas-reveal-effect","t":"Canvas reveal effect","d":"A dot background that expands on hover, as seen on Clerk's website\n\nFeatures:\n-  Animated Reveal: Smooth animations grab users' attention as content pops up.  \n-  Customizable Spee","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"manuarora700","st":"indexed","u":540,"pl":"https://cdn.21st.dev/user_aceternity/canvas-reveal-effect.png","pc":"manuarora700"},{"id":"21st:manuarora700__card-spotlight","t":"Card spotlight","d":"A card component with a spotlight effect revealing a radial gradient background","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"manuarora700","st":"indexed","u":470,"pl":"https://cdn.21st.dev/user_aceternity/card-spotlight.png","pc":"manuarora700"},{"id":"21st:manuarora700__card-stack","t":"Card stack","d":"Cards stack on top of each other after some interval. Perfect for showing testimonials.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"manuarora700","st":"indexed","u":140,"pl":"https://cdn.21st.dev/user_aceternity/card-stack.png","pc":"manuarora700","tg":["testimonials"]},{"id":"21st:manuarora700__carousel","t":"Carousel","d":"A customizable carousel with microinteractions and slider.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"manuarora700","st":"indexed","u":427,"pl":"https://cdn.21st.dev/user_aceternity/carousel/default/preview.png","pc":"manuarora700","tg":["carousel","gallery","image"]},{"id":"21st:manuarora700__code-block","t":"Code block","d":"Code block","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/code-block.png","pc":"manuarora700"},{"id":"21st:manuarora700__colourful-text","t":"Colourful text","d":"A text component with various colours, filter and scale effects.\n\n","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":18,"pl":"https://cdn.21st.dev/user_aceternity/colourful-text/default/preview.png","pc":"manuarora700"},{"id":"21st:manuarora700__compare","t":"Compare","d":"A comparison component between two images, slide or drag to compare","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"manuarora700","st":"indexed","u":422,"pl":"https://cdn.21st.dev/user_aceternity/compare.png","pc":"manuarora700","tg":["image","slider"]},{"id":"21st:manuarora700__container-scroll-animation","t":"Container scroll animation","d":"A scroll animation that rotates in 3d on scroll. Perfect for hero or marketing sections.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"manuarora700","st":"indexed","u":4075,"pl":"https://cdn.21st.dev/user_aceternity/container-scroll-animation.png","pc":"manuarora700","tg":["dashboard","scroll-area"]},{"id":"21st:manuarora700__container-text-flip","t":"Container text flip","d":"Here is Container Text Flip component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/larsen66/container-text-flip/default/preview.1750553127277.png","pc":"manuarora700"},{"id":"21st:manuarora700__cover","t":"Cover","d":"A Cover component that wraps any children, providing beams and space effect, hover to reveal speed.","k":"component","s":"21st","c":"other","g":"other","a":"manuarora700","st":"indexed","u":116,"pl":"https://cdn.21st.dev/user_aceternity/cover.png","pc":"manuarora700"},{"id":"21st:manuarora700__diagram-card","t":"Diagram card","d":"A mousemove effect that reveals text content by dragging the cursor across the card. As seen on Diagram's website.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":16,"pl":"https://cdn.21st.dev/aceternity/diagram-card/demos/default/preview.1773393863788.png","pc":"manuarora700","tg":["text"]},{"id":"21st:manuarora700__direction-aware-hover","t":"Direction aware hover","d":"A direction aware hover effect using Framer Motion, Tailwindcss and good old javascript.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"manuarora700","st":"indexed","u":141,"pl":"https://cdn.21st.dev/user_aceternity/direction-aware-hover.png","pc":"manuarora700"},{"id":"21st:manuarora700__draggable-card","t":"Draggable card","d":"Here is Draggable Card component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"manuarora700","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/draggable-card/default/preview.1750553163692.png","pc":"manuarora700","tg":["gallery"]},{"id":"21st:manuarora700__encrypted-text","t":"Encrypted text","d":"A text component that scrambles into gibberish and gradually decrypts to reveal the real characters when it scrolls into view.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/manuarora700/encrypted-text/default/preview.1784704334593-045d7840-2164-43ec-8823-37f23d976773.png","pc":"manuarora700","tg":["scroll-area"]},{"id":"21st:manuarora700__evervault-card","t":"Evervault card","d":"A cool card with amazing hover effect, reveals encrypted text and a mixed gradient.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"manuarora700","st":"indexed","u":475,"pl":"https://cdn.21st.dev/user_aceternity/evervault-card.png","pc":"manuarora700"},{"id":"21st:manuarora700__feature-block-animated-card","t":"Feature block animated card","d":"Feature Block Animated Card with logos","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"manuarora700","st":"indexed","u":235,"pl":"https://cdn.21st.dev/user_aceternity/feature-block-animated-card.png","pc":"manuarora700","tg":["ai-chat","features"]},{"id":"21st:manuarora700__feature-section-with-bento-grid","t":"Feature section with bento grid","d":"Feature section with Bento Grid, like product pics, YouTube videos, and a globe.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"manuarora700","st":"indexed","u":463,"pl":"https://cdn.21st.dev/user_aceternity/feature-section-with-bento-grid.png","pc":"manuarora700","tg":["features","globe","video"]},{"id":"21st:manuarora700__feature-section-with-card-gradient","t":"Feature section with card gradient","d":"Feature Section with card gradient","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"manuarora700","st":"indexed","u":286,"pl":"https://cdn.21st.dev/user_aceternity/feature-section-with-card-gradient.png","pc":"manuarora700","tg":["features","grid"]},{"id":"21st:manuarora700__feature-section-with-hover-effects","t":"Feature section with hover effects","d":"Feature Section with hover effects","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"manuarora700","st":"indexed","u":2494,"pl":"https://cdn.21st.dev/user_aceternity/feature-section-with-hover-effects.png","pc":"manuarora700","tg":["features","grid"]},{"id":"21st:manuarora700__file-upload","t":"File upload","d":"A minimal file upload form with background grid, drag and drop, and micro interactions.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"manuarora700","st":"indexed","u":610,"pl":"https://cdn.21st.dev/user_aceternity/file-upload.png","pc":"manuarora700","tg":["upload-download"]},{"id":"21st:manuarora700__flip-words","t":"Flip words","d":"A component that flips through a list of words","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":435,"pl":"https://cdn.21st.dev/user_aceternity/flip-words.png","pc":"manuarora700","tg":["text"]},{"id":"21st:manuarora700__floating-dock","t":"Floating dock","d":"A macOS-style dock navigation where icons magnify on hover, with a separate collapsible menu on mobile.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"manuarora700","st":"rated","pl":"https://cdn.21st.dev/aceternity/floating-dock/default/preview.1783571133794.png","pc":"manuarora700","tg":["dock","icon","navigation-menu","tooltip"],"sc":19},{"id":"21st:manuarora700__focus-cards","t":"Focus cards","d":"Hover over the card to focus on it, blurring the rest of the cards.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"manuarora700","st":"indexed","u":297,"pl":"https://cdn.21st.dev/user_aceternity/focus-cards.png","pc":"manuarora700","tg":["gallery"]},{"id":"21st:manuarora700__following-pointer","t":"Following pointer","d":"A custom pointer that follows mouse arrow and animates in pointer and content.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/following-pointer.png","pc":"manuarora700"},{"id":"21st:manuarora700__framer-motion-switch","t":"Framer motion switch","d":"A smooth animated toggle switch built with Framer Motion. The thumb morphs and slides with a liquid animation effect.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"manuarora700","st":"indexed","u":19,"pl":"https://cdn.21st.dev/aceternity/framer-motion-switch/demos/default/preview.1773393778427.png","pc":"manuarora700"},{"id":"21st:manuarora700__glare-card","t":"Glare card","d":"A glare effect that happens on hover, as seen on Linear's website","k":"component","s":"21st","c":"media/carousel","g":"media","a":"manuarora700","st":"indexed","u":486,"pl":"https://cdn.21st.dev/user_aceternity/glare-card.png","pc":"manuarora700"},{"id":"21st:manuarora700__glowing-background-stars-card","t":"Glowing background stars card","d":"Card background stars that animate on hover and animate anyway","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":148,"pl":"https://cdn.21st.dev/user_aceternity/glowing-background-stars-card.png","pc":"manuarora700"},{"id":"21st:manuarora700__glowing-effect","t":"Glowing effect","d":"A border glowing effect that adapts to any container or card, as seen on Cursor's website","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"manuarora700","st":"indexed","u":3876,"pl":"https://cdn.21st.dev/manuarora700/glowing-effect/default/preview.1785354797569-beab0bd6-8414-4d42-9103-cbdbbe633b41.png","pc":"manuarora700"},{"id":"21st:manuarora700__glowing-stars","t":"Glowing stars","d":"Card background stars that animate on hover and animate anyway\n","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"manuarora700","st":"indexed","u":85,"pl":"https://cdn.21st.dev/user_aceternity/glowing-stars.png","pc":"manuarora700"},{"id":"21st:manuarora700__google-gemini-effect","t":"Google gemini effect","d":"An effect of SVGs as seen on the Google Gemini Website","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"manuarora700","st":"indexed","u":581,"pl":"https://cdn.21st.dev/user_aceternity/google-gemini-effect.png","pc":"manuarora700","tg":["hero"]},{"id":"21st:manuarora700__hero-highlight","t":"Hero highlight","d":"A background effect with a text highlight component, perfect for hero sections.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"manuarora700","st":"indexed","u":675,"pl":"https://cdn.21st.dev/user_aceternity/hero-highlight.png","pc":"manuarora700"},{"id":"21st:manuarora700__hero-parallax","t":"Hero parallax","d":"A scroll effect with rotation, translation and opacity animations.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"manuarora700","st":"indexed","u":564,"pl":"https://cdn.21st.dev/user_aceternity/hero-parallax.png","pc":"manuarora700","tg":["hero"]},{"id":"21st:manuarora700__hero-section","t":"Hero section","d":"Here is Hero Section ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"manuarora700","st":"indexed","u":68,"pl":"https://cdn.21st.dev/larsen66/hero-section/default/preview.1750553470360.png","pc":"manuarora700"},{"id":"21st:manuarora700__hover-border-gradient","t":"Hover border gradient","d":"A hover effect that expands to the entire container with a gradient border.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"manuarora700","st":"indexed","u":351,"pl":"https://cdn.21st.dev/user_aceternity/hover-border-gradient.png","pc":"manuarora700","tg":["border"]},{"id":"21st:manuarora700__infinite-moving-cards","t":"Infinite moving cards","d":"A customizable group of cards that move infinitely in a loop. Made with Framer Motion and Tailwind CSS.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"manuarora700","st":"indexed","u":275,"pl":"https://cdn.21st.dev/user_aceternity/infinite-moving-cards.png","pc":"manuarora700","tg":["carousel","marquee","scroll-area","testimonials"]},{"id":"21st:manuarora700__lamp","t":"Lamp","d":"A lamp effect as seen on linear, great for section headers.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/lamp.png","pc":"manuarora700","tg":["hero","text"]},{"id":"21st:manuarora700__layout-grid","t":"Layout grid","d":"A layout effect that animates the grid item on click, powered by framer motion layout","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"manuarora700","st":"indexed","u":318,"pl":"https://cdn.21st.dev/user_aceternity/layout-grid.png","pc":"manuarora700","tg":["gallery","grid","image"]},{"id":"21st:manuarora700__lens","t":"Lens","d":"A lens component to zoom into images, videos, or practically anything.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"manuarora700","st":"indexed","u":82,"pl":"https://cdn.21st.dev/user_aceternity/lens.png","pc":"manuarora700"},{"id":"21st:manuarora700__link-preview","t":"Link preview","d":"Dynamic link previews for your anchor tags","k":"component","s":"21st","c":"actions/link","g":"actions","a":"manuarora700","st":"indexed","u":334,"pl":"https://cdn.21st.dev/user_aceternity/link-preview.png","pc":"manuarora700","tg":["link"]},{"id":"21st:manuarora700__meteors","t":"Meteors","d":"A group of beams in the background of a container, sort of like meteors.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"manuarora700","st":"indexed","u":514,"pl":"https://cdn.21st.dev/user_aceternity/meteors.png","pc":"manuarora700"},{"id":"21st:manuarora700__moving-border","t":"Moving border","d":"A border that moves around the container. Perfect for making your buttons stand out.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/moving-border.png","pc":"manuarora700","tg":["border"]},{"id":"21st:manuarora700__navbar-menu","t":"Navbar menu","d":"A navbar menu that animates its children on hover, makes a beautiful bignav","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"manuarora700","st":"indexed","u":1057,"pl":"https://cdn.21st.dev/user_aceternity/navbar-menu.png","pc":"manuarora700","tg":["menu"]},{"id":"21st:manuarora700__parallax-scroll","t":"Parallax scroll","d":"A grid where two columns scroll in oposite directions, giving a parallax effect.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"manuarora700","st":"indexed","u":238,"pl":"https://cdn.21st.dev/user_aceternity/parallax-scroll.png","pc":"manuarora700","tg":["gallery","scroll-area"]},{"id":"21st:manuarora700__placeholders-and-vanish-input","t":"Placeholders and vanish input","d":"Sliding in placeholders and vanish effect of input on submit","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"manuarora700","st":"indexed","u":843,"pl":"https://cdn.21st.dev/user_aceternity/placeholders-and-vanish-input.png","pc":"manuarora700","tg":["search"]},{"id":"21st:manuarora700__pointer-highlight","t":"Pointer highlight","d":"Here is Pointer Highlight component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"manuarora700","st":"indexed","u":120,"pl":"https://cdn.21st.dev/larsen66/pointer-highlight/default/preview.1750553291426.png","pc":"manuarora700","tg":["cursor"]},{"id":"21st:manuarora700__pulse-beams","t":"Pulse beams","d":"Multiple beams that converge into a single point, as seen on Next.js website","k":"component","s":"21st","c":"status/status-dot","g":"status","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/pulse-beams/default/preview.png","pc":"manuarora700"},{"id":"21st:manuarora700__radar-effect","t":"Radar effect","d":"A rotating radar animation with concentric circles and floating icons. Great for tech or security themed sections.","k":"component","s":"21st","c":"media/icon","g":"media","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/aceternity/radar-effect/demos/default/preview.1773405167421.png","pc":"manuarora700"},{"id":"21st:manuarora700__resizable-navbar","t":"Resizable navbar","d":"Here is Resizable Navbar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"manuarora700","st":"indexed","u":393,"pl":"https://cdn.21st.dev/larsen66/resizable-navbar/default/preview.1750553635255.png","pc":"manuarora700","tg":["navigation-menu"]},{"id":"21st:manuarora700__shooting-stars","t":"Shooting stars","d":"A shooting star animation, as seen on figmaplug.in","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/shooting-stars.png","pc":"manuarora700"},{"id":"21st:manuarora700__sidebar","t":"Sidebar","d":"Expandable sidebar that expands on hover, mobile responsive and dark mode support","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"manuarora700","st":"indexed","u":4720,"pl":"https://cdn.21st.dev/user_aceternity/sidebar.png","pc":"manuarora700","tg":["dashboard","navigation-menu","sidebar"]},{"id":"21st:manuarora700__signup-form","t":"Signup form","d":"A customizable form built on top of shadcn's input and label, with a touch of framer motion","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"manuarora700","st":"indexed","u":299,"pl":"https://cdn.21st.dev/user_aceternity/signup-form.png","pc":"manuarora700","tg":["sign-up"]},{"id":"21st:manuarora700__sparkles","t":"Sparkles","d":"A configurable sparkles component that can be used as a background or as a standalone component.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":4184,"pl":"https://cdn.21st.dev/user_aceternity/sparkles.png","pc":"manuarora700","tg":["background"]},{"id":"21st:manuarora700__spotlight","t":"Spotlight","d":"A spotlight effect with Tailwind CSS, good for drawing attention to a particular element on the page.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"manuarora700","st":"indexed","u":782,"pl":"https://cdn.21st.dev/user_aceternity/spotlight.png","pc":"manuarora700"},{"id":"21st:manuarora700__spotlight-new","t":"Spotlight new","d":"A new spotlight component with left and right spotlight, configurable and customizable.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/spotlight-new/default/preview.png","pc":"manuarora700"},{"id":"21st:manuarora700__squiggly-text","t":"Squiggly text","d":"An animated text wrapper that applies a wobbling squiggly effect using SVG turbulence and displacement filters.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/aceternity/squiggly-text/default/preview.1783584435546.png","pc":"manuarora700","tg":["text"]},{"id":"21st:manuarora700__squiggly-underline","t":"Squiggly underline","d":"Navigation links with animated squiggly SVG underline on the active item. Built with Framer Motion.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"manuarora700","st":"indexed","u":9,"pl":"https://cdn.21st.dev/aceternity/squiggly-underline/demos/default/preview.1773393734249.png","pc":"manuarora700","tg":["navigation-menu"]},{"id":"21st:manuarora700__stars-background","t":"Stars background","d":"A shooting starry background, as seen on figmaplug.in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/manuarora700/stars-background/default/preview.1785466676729-292f3891-b28c-43d6-9c78-6bc3ff8760a5.png","pc":"manuarora700"},{"id":"21st:manuarora700__sticky-banner","t":"Sticky banner","d":"Here is Sticky Banner component","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"manuarora700","st":"indexed","u":39,"pl":"https://cdn.21st.dev/larsen66/sticky-banner/default/preview.1750553600671.png","pc":"manuarora700","tg":["announcement","alert"]},{"id":"21st:manuarora700__sticky-scroll-reveal","t":"Sticky scroll reveal","d":"A sticky container that sticks while scrolling, text reveals on scroll","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"manuarora700","st":"indexed","u":611,"pl":"https://cdn.21st.dev/user_aceternity/sticky-scroll-reveal.png","pc":"manuarora700","tg":["features","scroll-area"]},{"id":"21st:manuarora700__svg-mask-effect","t":"Svg mask effect","d":"A mask reveal effect — move the cursor to reveal hidden content beneath. Built with Framer Motion mask animations.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"manuarora700","st":"indexed","u":26,"pl":"https://cdn.21st.dev/aceternity/svg-mask-effect/demos/default/preview.1773406000831.png","pc":"manuarora700","tg":["cursor"]},{"id":"21st:manuarora700__tabs","t":"Tabs","d":"Tabs to switch content, click on a tab to check background animation.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/tabs.png","pc":"manuarora700"},{"id":"21st:manuarora700__text-flipping-board","t":"Text flipping board","d":"A split-flap display that animates text with mechanical flip transitions, inspired by Vestaboard message boards.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":8,"pl":"https://cdn.21st.dev/manuarora700/text-flipping-board/default/preview.1784480070067-17ea692f-36e6-4d12-a8cb-827fd3c1dbc5.png","pc":"manuarora700"},{"id":"21st:manuarora700__text-generate-effect","t":"Text generate effect","d":"A cool text effect that fades in text on page load, one by one.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":827,"pl":"https://cdn.21st.dev/user_aceternity/text-generate-effect.png","pc":"manuarora700"},{"id":"21st:manuarora700__text-hover-effect","t":"Text hover effect","d":"A text hover effect that animates and outlines gradient on hover, as seen on x.ai","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"manuarora700","st":"indexed","u":102,"pl":"https://cdn.21st.dev/user_aceternity/text-hover-effect.png","pc":"manuarora700"},{"id":"21st:manuarora700__text-reveal-card","t":"Text reveal card","d":"Mousemove effect to reveal text content at the bottom of the card.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"manuarora700","st":"indexed","u":137,"pl":"https://cdn.21st.dev/user_aceternity/text-reveal-card.png","pc":"manuarora700"},{"id":"21st:manuarora700__timeline","t":"Timeline","d":"A timeline component with sticky header and scroll beam follow.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"manuarora700","st":"indexed","u":3439,"pl":"https://cdn.21st.dev/user_aceternity/timeline.png","pc":"manuarora700","tg":["scroll-area","timeline"]},{"id":"21st:manuarora700__tracing-beam","t":"Tracing beam","d":"A Beam that follows the path of an SVG as the user scrolls. Adjusts beam length with scroll speed.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/tracing-beam.png","pc":"manuarora700","tg":["scroll-area"]},{"id":"21st:manuarora700__typewriter-effect","t":"Typewriter effect","d":"Text generates as if it is being typed on the screen.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"manuarora700","st":"indexed","u":582,"pl":"https://cdn.21st.dev/user_aceternity/typewriter-effect.png","pc":"manuarora700","tg":["cta"]},{"id":"21st:manuarora700__vortex","t":"Vortex","d":"A wavy, swirly, vortex background ideal for CTAs and backgrounds.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","u":633,"pl":"https://cdn.21st.dev/user_aceternity/vortex.png","pc":"manuarora700"},{"id":"21st:manuarora700__wavy-background","t":"Wavy background","d":"A cool background effect with waves that move.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/wavy-background.png","pc":"manuarora700","tg":["background"]},{"id":"21st:manuarora700__world-map","t":"World map","d":"A world map with animated lines and dots, programatically generated.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"manuarora700","st":"indexed","pl":"https://cdn.21st.dev/user_aceternity/world-map.png","pc":"manuarora700","tg":["map"]},{"id":"21st:manucadomingues__njkhbjkhjkhjkhkjhjkh","t":"Njkhbjkhjkhjkhkjhjkh","d":"Animated (ripple) ASCII art in the Pixel Art style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, card","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manucadomingues","st":"indexed","pl":"https://cdn.21st.dev/manucadomingues/njkhbjkhjkhjkhkjhjkh/default/preview.1786308612179-b8442507-51a7-477a-adc9-7f39495ac6e1.webp","pc":"manucadomingues"},{"id":"21st:manucadomingues__piroca-foda-dnv-pqp-mt-foda","t":"Piroca foda dnv pqp mt foda","d":"Animated WebGL shader background in the Flow field style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #8686CB, #555584, #FFFFFF). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manucadomingues","st":"indexed","pl":"https://cdn.21st.dev/manucadomingues/piroca-foda-dnv-pqp-mt-foda/default/preview.1786304789226-5fb6338a-8ebf-47dc-8a34-abe9942d7d84.webp","pc":"manucadomingues"},{"id":"21st:manucadomingues__pqp","t":"Pqp","d":"Animated WebGL shader background in the Flow field style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #8080BC, #555584, #FFFFFF). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manucadomingues","st":"indexed","pl":"https://cdn.21st.dev/manucadomingues/pqp/default/preview.1786306550037-08c0f023-7c2f-4a8e-9667-63241932b96e.webp","pc":"manucadomingues"},{"id":"21st:manucadomingues__shader-foda-azul-dnv","t":"Shader foda azul dnv","d":"Animated WebGL shader background in the Flow field style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #8686CB, #555584, #FFFFFF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manucadomingues","st":"indexed","pl":"https://cdn.21st.dev/manucadomingues/shader-foda-azul-dnv/default/preview.1786304769793-1e75ae28-17b1-40e9-b931-f351bcbc7cb9.webp","pc":"manucadomingues"},{"id":"21st:manucadomingues__shader-foda-rosa","t":"Shader foda rosa","d":"Animated WebGL shader background in the Flow field style. Generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"manucadomingues","st":"indexed","pl":"https://cdn.21st.dev/manucadomingues/shader-foda-rosa/default/preview.1786304750558-77a6d4f1-ee63-4cb8-b320-540d585587b1.webp","pc":"manucadomingues"},{"id":"21st:mapcn__map","t":"Map","d":"Here is map component ","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/map/default/preview.1767616256325.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-custom-layer","t":"Mapcn custom layer","d":"A MapLibre custom layer control that toggles interactive GeoJSON park polygons over a themed map.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-custom-layer/default/preview.1785543751361-38c9d7a4-e5ca-4465-a94b-8f3cfda35b0c.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-layer-markers","t":"Mapcn layer markers","d":"A high-performance MapLibre marker layer that renders many clickable point markers from GeoJSON.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-layer-markers/default/preview.1785532250353-e8cc550e-e635-4a6c-b828-df3f41076a95.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-map-arc","t":"Mapcn map arc","d":"A MapLibre arc layer component for curved origin-destination connections with hover details.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-map-arc/default/preview.1785532962704-da1abef7-a593-4aa4-a147-b9654c7fd5a4.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-map-controls","t":"Mapcn map controls","d":"Interactive map controls for zoom, compass, geolocation, and fullscreen actions.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-map-controls/default/preview.1785531351539-ec84c052-b6fd-4ebe-a778-4ad0dc78eb75.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-map-marker","t":"Mapcn map marker","d":"DOM-based map markers with custom content, tooltips, popups, and draggable marker support.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-map-marker/default/preview.1785312882069-1e39656c-a644-47ab-8ba5-2b43522f49a8.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-map-popup","t":"Mapcn map popup","d":"A standalone MapLibre popup component for controlled overlays at specific coordinates.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-map-popup/default/preview.1785372961810-3d11e5c0-289e-4c35-bbf9-e530a83a4421.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-marker-content","t":"Mapcn marker content","d":"Custom marker content rendered inside a MapLibre marker.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","u":3,"pl":"https://cdn.21st.dev/reapollo/mapcn-marker-content/default/preview.1780350008960.png","pc":"mapcn","tg":["map","tooltip"]},{"id":"21st:mapcn__mapcn-marker-label","t":"Mapcn marker label","d":"Positioned marker labels for MapLibre marker content.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/reapollo/mapcn-marker-label/default/preview.1780350397877.png","pc":"mapcn","tg":["map"]},{"id":"21st:mapcn__mapcn-marker-popup","t":"Mapcn marker popup","d":"Marker popups for rich location cards with labels, media, ratings, hours, and actions.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","pl":"https://cdn.21st.dev/mapcn/mapcn-marker-popup/default/preview.1785447928528-5fc33625-edd9-4928-9574-ecb32d218624.png","pc":"mapcn"},{"id":"21st:mapcn__mapcn-marker-tooltip","t":"Mapcn marker tooltip","d":"Hover tooltip content for MapLibre markers.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"mapcn","st":"indexed","u":6,"pl":"https://cdn.21st.dev/reapollo/mapcn-marker-tooltip/default/preview.1780350239698.png","pc":"mapcn","tg":["map","tooltip"]},{"id":"21st:mara.stefana.ilie__hero-personal-website","t":"Hero personal website","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a portrait, retro look. A drop-in, zero-dependen","k":"component","s":"21st","c":"media/player","g":"media","a":"mara.stefana.ilie","st":"indexed","pl":"https://cdn.21st.dev/mara.stefana.ilie/hero-personal-website/default/preview.1783765993831.webp","pc":"mara.stefana.ilie","tg":["video"]},{"id":"21st:mara.stefana.ilie__hero-personal-website-2","t":"Hero personal website 2","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a portrait, retro look. A drop-in, zero-dependen","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mara.stefana.ilie","st":"indexed","pl":"https://cdn.21st.dev/mara.stefana.ilie/hero-personal-website/default/preview.1783766018117.webp","pc":"mara.stefana.ilie"},{"id":"21st:marktantongco__pinlist","t":"Pinlist","d":"A beautiful, responsive pin/marker directory component with search, filter, categories, star ratings, and four layout variants (default, compact, grid, card). Perfect for travel gu","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"marktantongco","st":"indexed","pl":"https://21st.dev/@marktantongco/components/pinlist","pc":"marktantongco"},{"id":"21st:mathewsaju210__native-mobile-nav","t":"Native mobile nav","d":"Sleek native-style mobile bottom nav with an SVG cutout, glowing floating action button, and Framer Motion spring animations for fast, premium app-like interactions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mathewsaju210","st":"indexed","pl":"https://cdn.21st.dev/mathewsaju210/native-mobile-nav/default/preview.1784094711008.png","pc":"mathewsaju210"},{"id":"21st:mathewsaju210__nexus-orb","t":"Nexus orb","d":"NexusOrb is an interactive 3D React component (Three.js) featuring a customizable low-poly sphere and a dynamic, proximity-linked particle network. It includes drag-to-rotate physi","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"mathewsaju210","st":"indexed","pl":"https://cdn.21st.dev/mathewsaju210/nexus-orb/default/preview.1782120494760.png","pc":"mathewsaju210"},{"id":"21st:mathewsaju210__radial-time-picker","t":"Radial time picker","d":"Interactive time inputs featuring a radial weapon wheel and orbit circles for high-speed micro-adjustments. Built with Framer Motion, strict 24h autocompletion, and native dark mod","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"mathewsaju210","st":"indexed","pl":"https://cdn.21st.dev/mathewsaju210/radial-time-picker/default/preview.1783400199808.png","pc":"mathewsaju210"},{"id":"21st:mathewsaju210__scrubbable-inputs","t":"Scrubbable inputs","d":"Blender and Unity style input fields that allow infinite value scrubbing by clicking and dragging.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"mathewsaju210","st":"indexed","pl":"https://cdn.21st.dev/mathewsaju210/scrubbable-inputs/default/preview.1779875238090.png","pc":"mathewsaju210"},{"id":"21st:mathewsaju210__trail-grid","t":"Trail grid","d":"A high-performance, interactive background grid for React. Tracks cursor movement to create a customizable glowing trail effect using pure DOM elements and CSS Grid. Fully responsi","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"mathewsaju210","st":"indexed","pl":"https://cdn.21st.dev/mathewsaju210/trail-grid/default/preview.1785451959826-57d7f389-126b-427f-b831-4a6263ccc6fe.png","pc":"mathewsaju210"},{"id":"21st:maxfu826__forest","t":"Forest","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections","k":"component","s":"21st","c":"media/player","g":"media","a":"maxfu826","st":"indexed","pl":"https://cdn.21st.dev/maxfu826/forest/default/preview.1784019079589.png","pc":"maxfu826","tg":["video"]},{"id":"21st:maxim.bort.devel__bauhaus-card","t":"Bauhaus card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/bauhaus-card/default/preview.1749917426849.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__chronicle-button","t":"Chronicle button","d":"A button with a unique hover effect.\n\nYou can also get this component from https://namer-ui.netlify.app/ and https://namer-ui-for-vue.netlify.app/components/chronicle-button\n\nCredi","k":"component","s":"21st","c":"actions/button","g":"actions","a":"maxim.bort.devel","st":"indexed","u":84,"pl":"https://cdn.21st.dev/user_2y2drtMewFmNG5frU3Xkd1R9rsu/chronicle-button/default/preview.1750810496266.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__circular-testimonials","t":"Circular testimonials","d":"An animated testimonial section that displays user feedback in a visually engaging way.\n\nFor the disclaimer, credit information, and the Vanilla HTML/CSS/JS version, please visit h","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"maxim.bort.devel","st":"indexed","u":771,"pl":"https://cdn.21st.dev/maxim.bort.devel/circular-testimonials/default/preview.1749048275501.png","pc":"maxim.bort.devel","tg":["image","testimonials"]},{"id":"21st:maxim.bort.devel__diced-hero-section","t":"Diced hero section","d":"A customizable hero section with diced image grid, gradient text, and responsive design for showcasing content.\n\nCredit: https://codepen.io/kristen17/pen/GRXgqaB https://codepen.io","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"maxim.bort.devel","st":"indexed","u":99,"pl":"https://cdn.21st.dev/maxim.bort.devel/diced-hero-section/default/preview.1749831107177.png","pc":"maxim.bort.devel","tg":["cta","gallery","grid","hero"]},{"id":"21st:maxim.bort.devel__fancy-card","t":"Fancy card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/fancy-card/default/preview.1750951864797.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__fishy-button","t":"Fishy button","d":"A sleek button featuring floating fish that appear on hover.\n\nCredit: https://codepen.io/ash_creator/pen/GRGZYyV","k":"component","s":"21st","c":"actions/button","g":"actions","a":"maxim.bort.devel","st":"indexed","u":14,"pl":"https://cdn.21st.dev/maxim.bort.devel/fishy-button/default/preview.1750085023757.png","pc":"maxim.bort.devel","tg":["button"]},{"id":"21st:maxim.bort.devel__fishy-file-drop","t":"Fishy file drop","d":"An unorthodox drop zone.\n\nCredit: https://codepen.io/ash_creator/pen/GRGZYyV https://codepen.io/Juxtopposed/pen/mdQaNbG https://codepen.io/Juxtopposed/pen/xxQNozB https://www.pexel","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"maxim.bort.devel","st":"indexed","u":10,"pl":"https://cdn.21st.dev/maxim.bort.devel/fishy-file-drop/default/preview.1750468924400.png","pc":"maxim.bort.devel","tg":["upload-download"]},{"id":"21st:maxim.bort.devel__floating-label-input","t":"Floating label input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/floating-label-input/default/preview.1753282779268.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__halomot-button","t":"Halomot button","d":"A stylish button with a vibrant gradient that fills it on hover.\n\nFor credit information and Vue version, please visit https://namer-ui-for-vue.netlify.app/components/halomot-butto","k":"component","s":"21st","c":"actions/button","g":"actions","a":"maxim.bort.devel","st":"indexed","u":21,"pl":"https://cdn.21st.dev/user_2y2drtMewFmNG5frU3Xkd1R9rsu/halomot-button/default/preview.1750809911762.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__inflected-card","t":"Inflected card","d":"A versatile card component with an unorthodox shape.\n\nFor the disclaimer, credit information, and Vue version, please visit https://namer-ui-for-vue.netlify.app/components/inflecte","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"maxim.bort.devel","st":"indexed","u":24,"pl":"https://cdn.21st.dev/maxim.bort.devel/inflected-card/default/preview.1749044869142.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__info-card","t":"Info card","d":"A simple card with interactive border.\n\nFor the credit information, and the Vanilla HTML/CSS/JS version, please visit https://codepen.io/Northstrix/pen/EaYbRxG\n","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"maxim.bort.devel","st":"indexed","u":50,"pl":"https://cdn.21st.dev/maxim.bort.devel/info-card/default/preview.1749488249962.png","pc":"maxim.bort.devel","tg":["card","border","image"]},{"id":"21st:maxim.bort.devel__metamorphic-loader","t":"Metamorphic loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/metamorphic-loader/default/preview.1749543831041.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__product-card","t":"Product card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/product-card/default/preview.1749349475785.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__project-showcase","t":"Project showcase","d":"A customized version of the Aceternity's Animated Testimonials component.\n\nThis component is also available on Namer UI: https://namer-ui.netlify.app\n\nA slightly different Vue vers","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"maxim.bort.devel","st":"indexed","u":25,"pl":"https://cdn.21st.dev/maxim.bort.devel/project-showcase/default/preview.1749729779117.png","pc":"maxim.bort.devel","tg":["carousel","testimonials"]},{"id":"21st:maxim.bort.devel__radio-group","t":"Radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/radio-group/default/preview.1750006567599.png","pc":"maxim.bort.devel","tg":["radio-group"]},{"id":"21st:maxim.bort.devel__satellite-toast","t":"Satellite toast","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/satellite-toast/default/preview.1758294794052.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__shamayim-toggle-switch","t":"Shamayim toggle switch","d":"A celestial-themed toggle switch with a smooth animation and mirroring option.\n\nCredit: https://codepen.io/nicolasjesenberger/pen/NWOyxyO https://dribbble.com/shots/14326768-Kn-bz-","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"maxim.bort.devel","st":"indexed","u":14,"pl":"https://cdn.21st.dev/maxim.bort.devel/shamayim-toggle-switch/default/preview.1751128745221.png","pc":"maxim.bort.devel","tg":["toggle"]},{"id":"21st:maxim.bort.devel__simple-code-block","t":"Simple code block","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/simple-code-block/default/preview.1750158897193.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__slider-hero-section","t":"Slider hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/slider-hero-section/default/preview.1749046442864.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__splashed-push-notifications","t":"Splashed push notifications","d":"Simple, splashed push notifications created from templates I found on CodePen.\n\nFor credit info, please visit https://github.com/Northstrix/Splashed-Push-Notifications\n\nThis demo u","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"maxim.bort.devel","st":"indexed","u":39,"pl":"https://cdn.21st.dev/maxim.bort.devel/splashed-push-notifications/default/preview.1749572433233.png","pc":"maxim.bort.devel","tg":["alert","notification","toast"]},{"id":"21st:maxim.bort.devel__text-swap","t":"Text swap","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"maxim.bort.devel","st":"indexed","pl":"https://cdn.21st.dev/maxim.bort.devel/text-swap/default/preview.1754493928057.png","pc":"maxim.bort.devel"},{"id":"21st:maxim.bort.devel__truncating-navbar","t":"Truncating navbar","d":"A sleek, animated navbar that slides down and increases its padding on scroll, creating a smooth truncating effect.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"maxim.bort.devel","st":"indexed","u":17,"pl":"https://cdn.21st.dev/maxim.bort.devel/truncating-navbar/default/preview.1749051691833.png","pc":"maxim.bort.devel","tg":["search"]},{"id":"21st:mbtrgurbuz__waves-header-green","t":"Waves header green","d":"Animated WebGL shader background in the Waves style. Generated by the 21st.dev Shader Builder. 4-color palette (#0D1B0F, #3E8E41, #C7F464, #FFFDE1). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mbtrgurbuz","st":"indexed","pl":"https://cdn.21st.dev/mbtrgurbuz/waves-header-green/default/preview.1786526121749-fd8ba628-94a0-4967-8fd1-015c70c21086.webp","pc":"mbtrgurbuz"},{"id":"21st:mclcuts__hi","t":"Hi","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mclcuts","st":"indexed","pl":"https://cdn.21st.dev/mclcuts/hi/default/preview.1786143053635-5de9d009-a3b2-4118-ae3e-6adbb9fc012c.webp","pc":"mclcuts"},{"id":"21st:mdadul__cta","t":"Cta","d":"A modern CTA section with customer review","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"mdadul","st":"indexed","pl":"https://cdn.21st.dev/mdadul/cta/default/preview.1749983077913.png","pc":"mdadul"},{"id":"21st:mdadul__hero","t":"Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mdadul","st":"indexed","pl":"https://cdn.21st.dev/mdadul/hero/default/preview.1747682445577.png","pc":"mdadul"},{"id":"21st:mdafsarx__banner","t":"Banner","d":"A stylish banner component for modern UIs, built with accessibility and animation in mind.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"mdafsarx","st":"indexed","u":97,"pl":"https://cdn.21st.dev/mdafsarx/banner/default/preview.1760488875110.png","pc":"mdafsarx","tg":["announcement"]},{"id":"21st:mdafsarx__counter-loader","t":"Counter loader","d":"A visually engaging counter animation component using CSS grid and keyframe animations.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"mdafsarx","st":"indexed","u":22,"pl":"https://cdn.21st.dev/mdafsarx/counter-loader/default/preview.1760313326280.png","pc":"mdafsarx"},{"id":"21st:mdafsarx__glowing-card","t":"Glowing card","d":"A stylish glowing-card component for modern UIs, built with accessibility and animation in mind.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"mdafsarx","st":"indexed","pl":"https://cdn.21st.dev/mdafsarx/glowing-card/default/preview.1760679405294.png","pc":"mdafsarx"},{"id":"21st:mdafsarx__gradient-button","t":"Gradient button","d":"The Gradient Button component is a stylised React button (part of the Nurui UI library) designed for modern UIs. It features an animated, rainbow-gradient border, supports accessib","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mdafsarx","st":"indexed","pl":"https://cdn.21st.dev/mdafsarx/gradient-button/default/preview.1761434261430.png","pc":"mdafsarx"},{"id":"21st:mdafsarx__gradient-hero","t":"Gradient hero","d":"A modern and visually captivating gradient hero section designed for sleek, responsive interfaces. It features smooth animations, accessibility compliance, and seamless integration","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mdafsarx","st":"indexed","pl":"https://cdn.21st.dev/mdafsarx/gradient-hero/default/preview.1760680035502.png","pc":"mdafsarx"},{"id":"21st:mdafsarx__gradient-text","t":"Gradient text","d":"A stylish gradient text component for modern UIs, built with accessibility and animation in mind.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"mdafsarx","st":"indexed","pl":"https://cdn.21st.dev/mdafsarx/gradient-text/default/preview.1760313792549.png","pc":"mdafsarx"},{"id":"21st:mdafsarx__hover-footer","t":"Hover footer","d":"Hover Footer animation to our modern React and Next.js-based UI component library! Enhance your projects with this animation.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"mdafsarx","st":"indexed","u":539,"pl":"https://cdn.21st.dev/mdafsarx/hover-footer/default/preview.1760085852599.png","pc":"mdafsarx","tg":["footer","link"]},{"id":"21st:mdafsarx__tech-curosr","t":"Tech curosr","d":" stylish following tech cursor component for modern UIs, built with accessibility and animation in mind.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"mdafsarx","st":"indexed","pl":"https://cdn.21st.dev/mdafsarx/tech-curosr/default/preview.1759971693346.png","pc":"mdafsarx","tg":["cursor"]},{"id":"21st:medanasknan__god-rays-linear-shader","t":"God rays linear shader","d":"Animated WebGL shader background in the God Rays style. Linear variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#050","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"medanasknan","st":"indexed","pl":"https://cdn.21st.dev/medanasknan/god-rays-linear-shader/default/preview.1786234568927-ae942225-2c14-436b-9329-06ee5b6f1071.webp","pc":"medanasknan"},{"id":"21st:medanasknan__halftone-shader","t":"Halftone shader","d":"Animated WebGL shader background in the Halftone style. Generated by the 21st.dev Shader Builder. 4-color palette (#231A10, #A47148, #E3B587, #F9F1E7). Features: cursor-reactive (r","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"medanasknan","st":"indexed","pl":"https://cdn.21st.dev/medanasknan/halftone-shader/default/preview.1786234549397-a68ace82-78df-4194-9b31-00eb11aefd1e.webp","pc":"medanasknan"},{"id":"21st:medanasknan__neon-citi","t":"Neon citi","d":"Animated (pulse) ASCII art in the Stars style, made with the 21st ASCII editor and baked to a looping video. Styled with a neon look. A drop-in, zero-dependency React component for","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"medanasknan","st":"indexed","pl":"https://cdn.21st.dev/medanasknan/neon-citi/default/preview.1786234813386-c2f3ac39-458d-4d63-9382-7575e4c5159e.webp","pc":"medanasknan"},{"id":"21st:meenic__chat-preview","t":"Chat preview","d":"A dynamic chat preview component for showcasing real-time messages in channels. Supports gradient backgrounds, customizable messages, and responsive design.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"meenic","st":"indexed","u":38,"pl":"https://cdn.21st.dev/user_2s2kRinALCKIhCcpGOEmg5LrAmW/chat-preview/default/preview.1737987924922.png","pc":"meenic"},{"id":"21st:meerbahadin10__stripe-like-gradient-shader","t":"Stripe like gradient shader","d":"High-performance React component for animated WebGL gradient backgrounds with real-time customization.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"meerbahadin10","st":"indexed","u":79,"pl":"https://cdn.21st.dev/meerbahadin10/stripe-like-gradient-shader/default/preview.1761130704227.png","pc":"meerbahadin10"},{"id":"21st:meghtrix__background-components","t":"Background components","d":"Here is Background Components component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"meghtrix","st":"indexed","u":532,"pl":"https://cdn.21st.dev/larsen66/background-components/default/preview.1758000384735.png","pc":"meghtrix","tg":["background","grid"]},{"id":"21st:meghtrix__background-gradient-glow","t":"Background gradient glow","d":"Here is Background Gradient Glow component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"meghtrix","st":"indexed","u":85,"pl":"https://cdn.21st.dev/larsen66/background-gradient-glow/default/preview.1757787288212.png","pc":"meghtrix","tg":["background","hero"]},{"id":"21st:meghtrix__gradient-backgrounds","t":"Gradient backgrounds","d":"Here is Gradient Background Bottom Blue","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"meghtrix","st":"indexed","u":103,"pl":"https://cdn.21st.dev/larsen66/gradient-backgrounds/default/preview.1757782149747.png","pc":"meghtrix","tg":["background","hero"]},{"id":"21st:meghtrix__gradient-blur-bg","t":"Gradient blur bg","d":"Here is Gradient Blur Bg component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"meghtrix","st":"indexed","u":76,"pl":"https://cdn.21st.dev/larsen66/gradient-blur-bg/default/preview.1757785100413.png","pc":"meghtrix","tg":["background","grid","hero"]},{"id":"21st:meghtrix__grid-background","t":"Grid background","d":"Here is Grid Background component ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"meghtrix","st":"indexed","u":111,"pl":"https://cdn.21st.dev/larsen66/grid-background/default/preview.1758011498573.png","pc":"meghtrix","tg":["grid","hero"]},{"id":"21st:meghtrix__radial-glow-background","t":"Radial glow background","d":"Here is Radial Glow Background component\n","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meghtrix","st":"indexed","u":73,"pl":"https://cdn.21st.dev/larsen66/radial-glow-background/default/preview.1757785656422.png","pc":"meghtrix","tg":["hero"]},{"id":"21st:mehmetekutlu__testsqft","t":"Testsqft","d":"test sqft button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mehmetekutlu","st":"indexed","pl":"https://cdn.21st.dev/mehmetekutlu/testsqft/default/preview.1750912350935.png","pc":"mehmetekutlu"},{"id":"21st:meschacirung__call-to-action","t":"Call to action","d":"Here is Call To Action component","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"meschacirung","st":"indexed","u":56,"pl":"https://cdn.21st.dev/larsen66/call-to-action/default/preview.1753821470052.png","pc":"meschacirung","tg":["cta"]},{"id":"21st:meschacirung__call-to-action-3","t":"Call to action 3","d":"A centered call-to-action section with a heading, subtext, and an inline email input with a submit button for newsletter or waitlist signups.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"meschacirung","st":"indexed","u":4,"pl":"https://cdn.21st.dev/meschacirung/call-to-action-3/default/preview.1784380412875-251d6f63-ec23-469c-bc71-317e0ca96aca.png","pc":"meschacirung","tg":["cta"]},{"id":"21st:meschacirung__contact-form","t":"Contact form","d":"Here is Contact Form component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"meschacirung","st":"indexed","u":48,"pl":"https://cdn.21st.dev/larsen66/contact-form/default/preview.1753874363843.png","pc":"meschacirung","tg":["textarea"]},{"id":"21st:meschacirung__content-block","t":"Content block","d":"Here is Content Block component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/larsen66/content-block/default/preview.1755256076877.png","pc":"meschacirung","tg":["ai-chat","dashboard","features"]},{"id":"21st:meschacirung__content-default","t":"Content default","d":"Here is Content component","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/larsen66/content-default/default/preview.1753819021754.png","pc":"meschacirung","tg":["ai-chat","avatar","features","icon"]},{"id":"21st:meschacirung__customers-section","t":"Customers section","d":"Customers Section with Moption Primitives","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/customers-section/default/preview.png","pc":"meschacirung","tg":["clients"]},{"id":"21st:meschacirung__customers-section-2","t":"Customers section 2","d":"Customers Section with infinite slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/customers-section-2/default/preview.png","pc":"meschacirung"},{"id":"21st:meschacirung__faqs-component","t":"Faqs component","d":"Here is  FAQs Component ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"meschacirung","st":"indexed","u":394,"pl":"https://cdn.21st.dev/larsen66/faqs-component/default/preview.1755262393589.png","pc":"meschacirung","tg":["accordion","faq"]},{"id":"21st:meschacirung__features","t":"Features","d":"Here is Features Component ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","u":363,"pl":"https://cdn.21st.dev/larsen66/features/default/preview.1755253892469.png","pc":"meschacirung","tg":["ai-chat","dashboard","features","sidebar"]},{"id":"21st:meschacirung__features-1","t":"Features 1","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-1/default/preview.png","pc":"meschacirung","tg":["features","grid"]},{"id":"21st:meschacirung__features-10","t":"Features 10","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-10/default/preview.1746449264720.png","pc":"meschacirung","tg":["card","features","table"]},{"id":"21st:meschacirung__features-11","t":"Features 11","d":"Bento features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","u":344,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-11/default/preview.1746632532198.png","pc":"meschacirung","tg":["calendar","features"]},{"id":"21st:meschacirung__features-12","t":"Features 12","d":"Features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-12/default/preview.png","pc":"meschacirung"},{"id":"21st:meschacirung__features-2","t":"Features 2","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-2/default/preview.png","pc":"meschacirung","tg":["features","grid","icon"]},{"id":"21st:meschacirung__features-3","t":"Features 3","d":"features section with chained cards","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","u":37,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-3/default/preview.1746632553353.png","pc":"meschacirung","tg":["features","grid","icon"]},{"id":"21st:meschacirung__features-4","t":"Features 4","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-4/default/preview.png","pc":"meschacirung","tg":["features","grid","icon"]},{"id":"21st:meschacirung__features-5","t":"Features 5","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-5/default/preview.1746631938412.png","pc":"meschacirung","tg":["features","icon","list","table"]},{"id":"21st:meschacirung__features-6","t":"Features 6","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-6/default/preview.png","pc":"meschacirung","tg":["dashboard","features"]},{"id":"21st:meschacirung__features-7","t":"Features 7","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-7/default/preview.1746632578863.png","pc":"meschacirung","tg":["dashboard","features"]},{"id":"21st:meschacirung__features-8","t":"Features 8","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-8/default/preview.png","pc":"meschacirung","tg":["card","features"]},{"id":"21st:meschacirung__features-9","t":"Features 9","d":"features section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/features-9/default/preview.1746632221385.png","pc":"meschacirung","tg":["features","map"]},{"id":"21st:meschacirung__footer","t":"Footer","d":"Here is Footer component","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"meschacirung","st":"indexed","u":293,"pl":"https://cdn.21st.dev/larsen66/footer/default/preview.1753822147806.png","pc":"meschacirung","tg":["footer","grid","link","navigation-menu"]},{"id":"21st:meschacirung__forgot-password","t":"Forgot password","d":"Here is Forgot Password component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/larsen66/forgot-password/default/preview.1751848180634.png","pc":"meschacirung"},{"id":"21st:meschacirung__hero-section-1","t":"Hero section 1","d":"Modern saas hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":3498,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-1/default/preview.png","pc":"meschacirung","tg":["dashboard","cta","hero"]},{"id":"21st:meschacirung__hero-section-2","t":"Hero section 2","d":"Modern marketing hero section","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"meschacirung","st":"indexed","u":445,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-2/default/preview.png","pc":"meschacirung","tg":["dashboard","sidebar"]},{"id":"21st:meschacirung__hero-section-3","t":"Hero section 3","d":"Mobile app hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":413,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-3/default/preview.png","pc":"meschacirung"},{"id":"21st:meschacirung__hero-section-4","t":"Hero section 4","d":"Modern SaaS hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":624,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-4/default/preview.png","pc":"meschacirung","tg":["hero"]},{"id":"21st:meschacirung__hero-section-5","t":"Hero section 5","d":"Modern hero section with video background","k":"component","s":"21st","c":"media/player","g":"media","a":"meschacirung","st":"indexed","u":1295,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-5/default/preview.png","pc":"meschacirung","tg":["video"]},{"id":"21st:meschacirung__hero-section-6","t":"Hero section 6","d":"Saas Hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":259,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-6/default/preview.png","pc":"meschacirung","tg":["gallery","hero"]},{"id":"21st:meschacirung__hero-section-9","t":"Hero section 9","d":"Modern hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":929,"pl":"https://cdn.21st.dev/user_2tUYFzCDCVfrMrVC3TfB9DUBAyx/hero-section-9/default/preview.png","pc":"meschacirung","tg":["dashboard","cta","grid","hero"]},{"id":"21st:meschacirung__hero-section-note","t":"Hero section note","d":"Here is Hero Section component","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"meschacirung","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/hero-section-note/default/preview.1755251736478.png","pc":"meschacirung","tg":["dashboard","cta"]},{"id":"21st:meschacirung__integrations-3","t":"Integrations 3","d":"Marketing section that showcases app integrations as a grid of branded logo cards next to a headline and call-to-action.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"meschacirung","st":"indexed","u":4,"pl":"https://cdn.21st.dev/meschacirung/integrations-3/default/preview.1784404026081-b0bfab6a-2fb0-4f7c-bd7a-64f00d659416.png","pc":"meschacirung","tg":["cta","features","grid"]},{"id":"21st:meschacirung__integrations-4","t":"Integrations 4","d":"An integrations section that arranges brand logo cards around a central app logo with connecting lines, a headline, and a call-to-action button.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/integrations-4/default/preview.1784692313814-f5363318-59ba-44ec-8a15-5957e2663116.png","pc":"meschacirung"},{"id":"21st:meschacirung__integrations-5","t":"Integrations 5","d":"A marketing integrations section arranging brand logos in animated concentric orbit rings around a central logo, with a heading and call-to-action button.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"meschacirung","st":"indexed","u":4,"pl":"https://cdn.21st.dev/meschacirung/integrations-5/default/preview.1783659514828.png","pc":"meschacirung","tg":["cta","hero"]},{"id":"21st:meschacirung__integrations-6","t":"Integrations 6","d":"A marketing section that lists LLM/service integrations as a bordered card with brand logos, names, descriptions, and add buttons, plus a heading and call to action.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/integrations-6/default/preview.1784696766678-b52a1abc-7e66-4742-a804-1d7601a33fed.png","pc":"meschacirung"},{"id":"21st:meschacirung__integrations-component","t":"Integrations component","d":"Here is Integrations Components","k":"component","s":"21st","c":"media/icon","g":"media","a":"meschacirung","st":"indexed","u":425,"pl":"https://cdn.21st.dev/larsen66/integrations-component/default/preview.1753817940760.png","pc":"meschacirung","tg":["ai-chat","card","cta","features"]},{"id":"21st:meschacirung__integrations-three","t":"Integrations three","d":"A marketing section that showcases third-party integrations as a responsive grid of logo cards with title and description.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"meschacirung","st":"indexed","u":10,"pl":"https://cdn.21st.dev/meschacirung/integrations-three/default/preview.1784470244662-dd02f8c8-2b71-4dff-9c28-c6e77c9d36d4.png","pc":"meschacirung","tg":["card","features","grid"]},{"id":"21st:meschacirung__login-1","t":"Login 1","d":"Here is Login component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"meschacirung","st":"rated","pl":"https://cdn.21st.dev/larsen66/login-1/default/preview.1755265989505.png","pc":"meschacirung","tg":["sign-in","sign-up"],"sc":18},{"id":"21st:meschacirung__login-2","t":"Login 2","d":"A centered card login page with email and password fields, social sign-in buttons, and a create-account link.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"meschacirung","st":"indexed","u":4,"pl":"https://cdn.21st.dev/meschacirung/login-2/default/preview.1784385396773-fa588612-d76f-4af9-86bf-8a6d8ffd27cf.png","pc":"meschacirung","tg":["sign-in"]},{"id":"21st:meschacirung__logo-cloud","t":"Logo cloud","d":"Here is Logo Cloud Blocks","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"meschacirung","st":"indexed","u":223,"pl":"https://cdn.21st.dev/larsen66/logo-cloud/default/preview.1785940836015.png","pc":"meschacirung","tg":["marquee","scroll-area"]},{"id":"21st:meschacirung__logo-cloud-2","t":"Logo cloud 2","d":"A marketing logo cloud section that displays customer or partner brand logos in a responsive grid with a hover-reveal \"Meet Our Customers\" link.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"meschacirung","st":"indexed","u":2,"pl":"https://cdn.21st.dev/meschacirung/logo-cloud-2/default/preview.1784701819223-7a0084ff-5248-4b8f-9807-7099821c4d44.png","pc":"meschacirung","tg":["clients"]},{"id":"21st:meschacirung__mist-integrations-2","t":"Mist integrations 2","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/mist-integrations-2/default/preview.1784422342622-46c1bdd7-ec96-4f2e-8095-2323c65c54d9.png","pc":"meschacirung","tg":["grid"]},{"id":"21st:meschacirung__mist-pricing-1","t":"Mist pricing 1","d":"A single-plan pricing section with a large price, call-to-action button, feature checklist, and a trusted-by row of company logos.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/mist-pricing-1/default/preview.1784657560888-011bd380-ffe4-47d5-b823-98f05c6154fe.png","pc":"meschacirung"},{"id":"21st:meschacirung__mist-testimonials-5","t":"Mist testimonials 5","d":"A centered single-testimonial section with a quote icon, avatar, name and handle.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"meschacirung","st":"indexed","u":8,"pl":"https://cdn.21st.dev/meschacirung/mist-testimonials-5/default/preview.1784693453476-39ae1ef8-13b7-4d3d-b6b7-6677ea2e7e67.png","pc":"meschacirung","tg":["avatar","testimonials"]},{"id":"21st:meschacirung__pricing","t":"Pricing","d":"Here is Pricing component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"meschacirung","st":"indexed","u":54,"pl":"https://cdn.21st.dev/larsen66/pricing/default/preview.1755261763181.png","pc":"meschacirung","tg":["cta","pricing-section"]},{"id":"21st:meschacirung__pricing-base","t":"Pricing base","d":"Here is Pricing compoenent","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"meschacirung","st":"indexed","u":159,"pl":"https://cdn.21st.dev/larsen66/pricing-base/default/preview.1753823025318.png","pc":"meschacirung","tg":["badge","card","button","pricing-section"]},{"id":"21st:meschacirung__sign-up","t":"Sign up","d":"Here is Sign Up form","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"meschacirung","st":"indexed","u":161,"pl":"https://cdn.21st.dev/larsen66/sign-up/default/preview.1751848930922.png","pc":"meschacirung","tg":["sign-up"]},{"id":"21st:meschacirung__stats","t":"Stats","d":"Here is Stats component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"meschacirung","st":"indexed","u":99,"pl":"https://cdn.21st.dev/larsen66/stats/default/preview.1755258121203.png","pc":"meschacirung","tg":["card","grid","list","number"]},{"id":"21st:meschacirung__stats-defautlt","t":"Stats defautlt","d":"Here is Stats component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"meschacirung","st":"indexed","u":65,"pl":"https://cdn.21st.dev/larsen66/stats-defautlt/default/preview.1753820351742.png","pc":"meschacirung","tg":["card","stat","testimonials"]},{"id":"21st:meschacirung__team","t":"Team","d":"Here is Team component","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"meschacirung","st":"indexed","u":296,"pl":"https://cdn.21st.dev/larsen66/team/default/preview.1753820575848.png","pc":"meschacirung","tg":["avatar","grid","profile","team"]},{"id":"21st:meschacirung__testimonials","t":"Testimonials","d":"Here is Testimonials components","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"meschacirung","st":"indexed","u":337,"pl":"https://cdn.21st.dev/larsen66/testimonials/default/preview.1753820944713.png","pc":"meschacirung","tg":["avatar","card","grid","testimonials"]},{"id":"21st:meschacirung__testimonials-5","t":"Testimonials 5","d":"A responsive testimonials section that arranges customer quote cards with avatars into a three-column masonry-style wall of love.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/testimonials-5/default/preview.1784696813620-30eee51f-3692-45a4-84c4-f71d095f1e1e.png","pc":"meschacirung"},{"id":"21st:meschacirung__veil-pricing-1","t":"Veil pricing 1","d":"A three-tier pricing section with feature lists, a highlighted plan, and call-to-action buttons.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"meschacirung","st":"indexed","pl":"https://cdn.21st.dev/meschacirung/veil-pricing-1/default/preview.1784692366609-70f79fae-8086-4007-b6ab-877ea6049fd7.png","pc":"meschacirung"},{"id":"21st:meschacirung__veil-sign-up-2","t":"Veil sign up 2","d":"A centered sign-up card with email signup, social login buttons for Google and GitHub, and a link to an existing account.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"meschacirung","st":"indexed","u":8,"pl":"https://cdn.21st.dev/meschacirung/veil-sign-up-2/default/preview.1783657946255.png","pc":"meschacirung","tg":["sign-up"]},{"id":"21st:meshavie__bed-laptop-ascii","t":"Bed laptop ascii","d":"Animated (flicker) ASCII art in the Dots style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, a","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"meshavie","st":"indexed","pl":"https://cdn.21st.dev/meshavie/bed-laptop-ascii/default/preview.1786193412180-d7ac2814-8d5a-4be2-b555-4131228fc417.webp","pc":"meshavie"},{"id":"21st:mhmhaseef88__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#FF3CAC, #784BA0, #2B86C5). Features: film grain, vignette. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mhmhaseef88","st":"indexed","pl":"https://cdn.21st.dev/mhmhaseef88/silk-blend-gradient/default/preview.1786420547306-35357557-acad-48da-9b38-f77b3fc44764.webp","pc":"mhmhaseef88"},{"id":"21st:mhmxd7x__apple-26-toggle","t":"Apple 26 toggle","d":"IOS/MacOS toggle style (no liquid glass, if anyone could get that working that'd be great, ur free to do it)","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"mhmxd7x","st":"indexed","pl":"https://cdn.21st.dev/mhmxd7x/apple-26-toggle/default/preview.1780334717157.png","pc":"mhmxd7x"},{"id":"21st:michailbul__liquid-search","t":"Liquid search","d":"An animated search component with a liquid SVG filter effect. Expands from a pill button into a search input with a floating search icon, and displays results as stacked animated p","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"michailbul","st":"indexed","pl":"https://cdn.21st.dev/michailbul/liquid-search/default/preview.1773786802536.png","pc":"michailbul"},{"id":"21st:micka_design__accordion","t":"Accordion","d":"A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"micka_design","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/accordion/demos/default/preview.1773165393889.png","pc":"micka_design","tg":["accordion","faq"]},{"id":"21st:micka_design__badge-fluid-functionalism","t":"Badge fluid functionalism","d":"Compact label with solid and dot variants, Tailwind color palette, and three sizes.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"micka_design","st":"indexed","u":7,"pl":"https://cdn.21st.dev/reapollo/badge-fluid-functionalism/solid/preview.1776934243852.png","pc":"micka_design","tg":["badge"]},{"id":"21st:micka_design__button","t":"Button","d":"A fluid button with primary, secondary, tertiary, and ghost variants. Supports sizes, leading/trailing icons, icon-only mode, and animated loading state.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"micka_design","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/button/demos/default/preview.1773161633384.png","pc":"micka_design"},{"id":"21st:micka_design__checkbox-group","t":"Checkbox group","d":"A checkbox group with proximity hover, animated checkmarks, contiguous selection merging, and spring transitions. Built on Radix UI with Framer Motion.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"micka_design","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-group/demos/default/preview.1773176324356.png","pc":"micka_design"},{"id":"21st:micka_design__dialog","t":"Dialog","d":"A fluid dialog with spring animations, backdrop overlay, and composable header/footer/title components. Built on Radix UI with Framer Motion.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"micka_design","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dialog/demos/default/preview.1773177346227.png","pc":"micka_design","tg":["modal"]},{"id":"21st:micka_design__select","t":"Select","d":"A fluid select dropdown with proximity hover, animated checkmark, grouped options, and spring transitions. Built with Framer Motion and portal rendering.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"micka_design","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/select/demos/default/preview.1773176843881.png","pc":"micka_design","tg":["select"]},{"id":"21st:micka_design__slider","t":"Slider","d":"A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"micka_design","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/slider/demos/default/preview.1773164879060.png","pc":"micka_design","tg":["steps","slider","tooltip"]},{"id":"21st:micka_design__switch","t":"Switch","d":"A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"micka_design","st":"indexed","pl":"https://cdn.21st.dev/larsen66/switch/demos/default/preview.1773162635498.png","pc":"micka_design","tg":["toggle"]},{"id":"21st:micka_design__table","t":"Table","d":"A data table with proximity hover highlighting, animated row backgrounds, smooth transitions, and composable header/body/row/cell components.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"micka_design","st":"indexed","pl":"https://cdn.21st.dev/larsen66/table/demos/default/preview.1773177599649.png","pc":"micka_design","tg":["dashboard","table"]},{"id":"21st:micka_design__tabs-base","t":"Tabs base","d":"A segmented tab control with a sliding selected-tab background and a fluid hover highlight that follows the cursor, used to switch between grouped panels of content.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"micka_design","st":"indexed","pl":"https://cdn.21st.dev/micka_design/tabs-base/default/preview.1788999297881-b99c1e0b-ad79-4500-a71e-7768ca4020e7.png","pc":"micka_design"},{"id":"21st:mikolajdobrucki__cta-with-glow","t":"Cta with glow","d":"A powerful Call-to-Action component built with shadcn's design system.\n\nThis component features multiple styles including box layouts and beam effects, all following shadcn's minim","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"mikolajdobrucki","st":"indexed","u":204,"pl":"https://cdn.21st.dev/user_mikolajdobrucki/cta-with-glow.png","pc":"mikolajdobrucki","tg":["cta"]},{"id":"21st:mikolajdobrucki__cta-with-rectangle","t":"Cta with rectangle","d":"A powerful Call-to-Action component built with shadcn's design system.\n\nThis component features multiple styles including box layouts and beam effects, all following shadcn's minim","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"mikolajdobrucki","st":"indexed","u":499,"pl":"https://cdn.21st.dev/user_mikolajdobrucki/cta-with-rectangle.png","pc":"mikolajdobrucki","tg":["cta"]},{"id":"21st:mikolajdobrucki__footer","t":"Footer","d":"Website footer section with brand logo, navigation link columns, copyright, policy links, and a light/dark theme toggle.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"mikolajdobrucki","st":"indexed","u":12,"pl":"https://cdn.21st.dev/mikolajdobrucki/footer/default/preview.1784827671378-3fc965d1-486b-4b83-8ced-a2ef84639148.png","pc":"mikolajdobrucki","tg":["footer"]},{"id":"21st:mikolajdobrucki__glow","t":"Glow","d":"A collection of demos showcasing different use cases for the Glow component:\n\t1.\tGlowBasic\n\t▪\tBasic implementation with top positioning\n\t▪\tDemonstrates default animation\n\t2.\tGlowCe","k":"component","s":"21st","c":"media/gallery","g":"media","a":"mikolajdobrucki","st":"indexed","u":1178,"pl":"https://cdn.21st.dev/user_mikolajdobrucki/glow.png","pc":"mikolajdobrucki"},{"id":"21st:mikolajdobrucki__hero-section","t":"Hero section","d":"A powerful hero section component built with shadcn/ui.\n\nCreate stunning hero sections with multiple variants including illustration-based layouts, glowing effects, and mobile app ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mikolajdobrucki","st":"indexed","u":2101,"pl":"https://cdn.21st.dev/user_mikolajdobrucki/hero-section.png","pc":"mikolajdobrucki"},{"id":"21st:mikolajdobrucki__mockup","t":"Mockup","k":"component","s":"21st","c":"other","g":"other","a":"mikolajdobrucki","st":"indexed","pl":"https://cdn.21st.dev/user_mikolajdobrucki/mockup.png","pc":"mikolajdobrucki"},{"id":"21st:mikolajdobrucki__pricing","t":"Pricing","d":"A responsive pricing section with feature-list plan cards, glass effects and highlighted tiers for landing pages.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"mikolajdobrucki","st":"indexed","u":4,"pl":"https://cdn.21st.dev/mikolajdobrucki/pricing/default/preview.1783659498998.png","pc":"mikolajdobrucki","tg":["cta","pricing-section","table"]},{"id":"21st:mikolajdobrucki__screenshot","t":"Screenshot","d":"A theme-aware image component that automatically swaps between light and dark screenshots based on the active color scheme.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"mikolajdobrucki","st":"indexed","pl":"https://cdn.21st.dev/mikolajdobrucki/screenshot/default/preview.1785558306898-13f4723b-11b1-4a0b-8e58-06f9137f271d.png","pc":"mikolajdobrucki"},{"id":"21st:minhxthanh__3d-box-loader-animation","t":"3d box loader animation","d":"Component creates a sophisticated 3D loading animation","k":"component","s":"21st","c":"status/loader","g":"status","a":"minhxthanh","st":"indexed","u":71,"pl":"https://cdn.21st.dev/minhxthanh/3d-box-loader-animation/default/preview.1749185897771.png","pc":"minhxthanh","tg":["spinner"]},{"id":"21st:minhxthanh__3d-parallax-effect-on-hover","t":"3d parallax effect on hover","d":"3D parallax effect on hover","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":23,"pl":"https://cdn.21st.dev/minhxthanh/3d-parallax-effect-on-hover/default/preview.1747578697988.png","pc":"minhxthanh","tg":["gallery"]},{"id":"21st:minhxthanh__3d-textured-cube","t":"3d textured cube","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/3d-textured-cube/default/preview.1759760535849.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__activity-dropdown","t":"Activity dropdown","d":"Activity Dropdown: Features a staggered reveal animation where each notification item fades in sequentially, a rotating chevron indicator, and full light/dark theme support.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"minhxthanh","st":"rated","u":83,"pl":"https://cdn.21st.dev/minhxthanh/activity-dropdown/default/preview.1764078672755.png","pc":"minhxthanh","tg":["dropdown","notification"],"sc":18},{"id":"21st:minhxthanh__animated-background-component","t":"Animated background component","d":"Animated Background Component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/animated-background-component/default/preview.1753967141132.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__animated-background-component-1","t":"Animated background component 1","d":"Animated Background Component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/animated-background-component-1/default/preview.1753967875440.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__animated-background-lines","t":"Animated background lines","d":"Animated Background Lines","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"minhxthanh","st":"indexed","u":58,"pl":"https://cdn.21st.dev/minhxthanh/animated-background-lines/default/preview.1749444550142.png","pc":"minhxthanh","tg":["cta"]},{"id":"21st:minhxthanh__animated-border-cards","t":"Animated border cards","d":"Animated Border Cards","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/animated-border-cards/default/preview.1764324925767.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__animated-feature-carousel","t":"Animated feature carousel","d":"An animated carousel component for showcasing features with smooth transitions and interactive elements","k":"component","s":"21st","c":"media/carousel","g":"media","a":"minhxthanh","st":"indexed","u":297,"pl":"https://cdn.21st.dev/minhxthanh/animated-feature-carousel/default/preview.1751117866573.png","pc":"minhxthanh","tg":["carousel","features","image","steps"]},{"id":"21st:minhxthanh__animated-infinity-background","t":"Animated infinity background","d":"It uses Framer Motion to generate a captivating animation of endlessly drawing and fading SVG infinity loops. The component centers on an animated title with a letter-by-letter rev","k":"component","s":"21st","c":"status/loader","g":"status","a":"minhxthanh","st":"indexed","u":11,"pl":"https://cdn.21st.dev/minhxthanh/animated-infinity-background/default/preview.1751120591035.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__animated-input","t":"Animated input","d":"Animated Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/animated-input/default/preview.1755752930690.png","pc":"minhxthanh","tg":["input"]},{"id":"21st:minhxthanh__animated-scroll","t":"Animated scroll","d":"An animated two-panel scroll adventure","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":110,"pl":"https://cdn.21st.dev/minhxthanh/animated-scroll/default/preview.1749530767626.png","pc":"minhxthanh","tg":["image","scroll-area"]},{"id":"21st:minhxthanh__animated-section-with-gradient-and-dynamic-lines","t":"Animated section with gradient and dynamic lines","d":"Animated Dark‐Mode Section with Gradient Heading and Dynamic SVG Lines","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"minhxthanh","st":"indexed","u":32,"pl":"https://cdn.21st.dev/minhxthanh/animated-section-with-gradient-and-dynamic-lines/default/preview.1748845152350.png","pc":"minhxthanh","tg":["cta"]},{"id":"21st:minhxthanh__animated-shader-background","t":"Animated shader background","d":"a real-time animated shader background built with Three.js and GLSL","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":1819,"pl":"https://cdn.21st.dev/minhxthanh/animated-shader-background/default/preview.1749003393329.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__animated-svg-sparkle","t":"Animated svg sparkle","k":"component","s":"21st","c":"other","g":"other","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/animated-svg-sparkle/default/preview.1752676654230.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__arc-gallery-hero-component","t":"Arc gallery hero component","d":"\"Arc Gallery - Interactive Image Showcase\": A stunning interactive image gallery featuring a curved arc layout with smooth animations and responsive design","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":276,"pl":"https://cdn.21st.dev/minhxthanh/arc-gallery-hero-component/default/preview.1755274289055.png","pc":"minhxthanh","tg":["cta","gallery"]},{"id":"21st:minhxthanh__background-grid-beam","t":"Background grid beam","d":"Background Grid Beam\n","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":113,"pl":"https://cdn.21st.dev/minhxthanh/background-grid-beam/default/preview.1750823589444.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__bio-board-card","t":"Bio board card","d":"Bio Board Card, Glowing Card Components","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/bio-board-card/default/preview.1756343499002.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__black-hole-vortex-animation","t":"Black hole vortex animation","d":"This React component uses Framer Motion and SVG to create a captivating black hole animation. It features a central vortex that pulls in surrounding particles in a smooth, spiralin","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","u":18,"pl":"https://cdn.21st.dev/minhxthanh/black-hole-vortex-animation/default/preview.1752554941340.png","pc":"minhxthanh","tg":["hero"]},{"id":"21st:minhxthanh__bubble-text","t":"Bubble text","d":"Bubble Text Hover Animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":52,"pl":"https://cdn.21st.dev/minhxthanh/bubble-text/default/preview.1757593772661.png","pc":"minhxthanh","tg":["text"]},{"id":"21st:minhxthanh__cards-beam-animation","t":"Cards beam animation","d":"React component featuring an infinite horizontal stream of credit cards with an interactive scanning beam effect. When the vertical beam intersects with cards, it reveals dynamic A","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/cards-beam-animation/default/preview.1759759987026.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__carousel-circular-image-gallery","t":"Carousel circular image gallery","d":"Carousel Circular Image Gallery","k":"component","s":"21st","c":"media/carousel","g":"media","a":"minhxthanh","st":"indexed","u":76,"pl":"https://cdn.21st.dev/minhxthanh/carousel-circular-image-gallery/default/preview.1759915914081.png","pc":"minhxthanh","tg":["carousel","gallery","image"]},{"id":"21st:minhxthanh__cat-loading-animation","t":"Cat loading animation","d":"Cat Loading Animation","k":"component","s":"21st","c":"status/loader","g":"status","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/cat-loading-animation/default/preview.1759889320854.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__circular-flip-card-gallery","t":"Circular flip card gallery","d":"Circular Flip Card Gallery, Hover Animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":22,"pl":"https://cdn.21st.dev/minhxthanh/circular-flip-card-gallery/default/preview.1759065213913.png","pc":"minhxthanh","tg":["gallery"]},{"id":"21st:minhxthanh__copy-code-button","t":"Copy code button","d":"Copy Code Button Animation","k":"component","s":"21st","c":"actions/button","g":"actions","a":"minhxthanh","st":"indexed","u":37,"pl":"https://cdn.21st.dev/minhxthanh/copy-code-button/default/preview.1764412227747.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__countdown-timer","t":"Countdown timer","d":"Countdown Timer / Clock Countdown","k":"component","s":"21st","c":"inputs/time-picker","g":"inputs","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/countdown-timer/default/preview.1750082227616.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__dance-text-animation","t":"Dance text animation","d":"A dynamic text effect with layered animations that create a mesmerizing dance-like motion","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":17,"pl":"https://cdn.21st.dev/minhxthanh/dance-text-animation/default/preview.1748758345928.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__dashboard-metrics","t":"Dashboard metrics","d":"Animated financial metrics displaying annual profits and expense breakdown with interactive visualizations.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/dashboard-metrics/default/preview.1764082203071.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__digital-serenity-animated-landing-page","t":"Digital serenity animated landing page","d":"Component creates a visually immersive and calming landing page. It features a dark UI with animated text quotes appearing word by word, a dynamic grid background, subtle floating ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"minhxthanh","st":"indexed","u":269,"pl":"https://cdn.21st.dev/minhxthanh/digital-serenity-animated-landing-page/default/preview.1748705926625.png","pc":"minhxthanh","tg":["grid","hero"]},{"id":"21st:minhxthanh__drag-cards","t":"Drag cards","d":" Draggable Cards","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/drag-cards/default/preview.1753181177425.png","pc":"minhxthanh","tg":["gallery"]},{"id":"21st:minhxthanh__dynamic-animated-hero-section-with-gradient","t":"Dynamic animated hero section with gradient","d":"A visually striking React hero section featuring a gradient-text animation that cycles through vibrant colors, SVG line-drawing effects for geometric shapes, subtle background patt","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","u":64,"pl":"https://cdn.21st.dev/minhxthanh/dynamic-animated-hero-section-with-gradient/default/preview.1749609235449.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__dynamic-border-animations-card","t":"Dynamic border animations card","d":"This card features animated border elements that continuously move around the perimeter, creating a dynamic visual effect using React and Tailwind CSS.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/dynamic-border-animations-card/default/preview.1749444959442.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__dynamic-text-slider","t":"Dynamic text slider","d":"This is a React component that creates a full-screen hero section. It features a unique, interactive headline where the words \"Video Editor\" are revealed inside a draggable range s","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"minhxthanh","st":"indexed","u":100,"pl":"https://cdn.21st.dev/minhxthanh/dynamic-text-slider/default/preview.1752573427533.png","pc":"minhxthanh","tg":["slider"]},{"id":"21st:minhxthanh__dynamic-wave-canvas-background","t":"Dynamic wave canvas background","d":"Component that creates a dynamic, colorful wave animation as a canvas background. Ideal for visually captivating hero sections, blending smooth animations with deep blues, purples,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":195,"pl":"https://cdn.21st.dev/minhxthanh/dynamic-wave-canvas-background/default/preview.1748749826586.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__feature-showcase-cards","t":"Feature showcase cards","d":"Elegant bento-style grid for displaying product features or capabilities. Includes smooth hover effects, animated corner accents, and responsive breakpoints.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/feature-showcase-cards/default/preview.1764436833845.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__flip-gallery","t":"Flip gallery","d":"Flip animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":70,"pl":"https://cdn.21st.dev/minhxthanh/flip-gallery/default/preview.1750650983130.png","pc":"minhxthanh","tg":["carousel","gallery"]},{"id":"21st:minhxthanh__fluid-gradient-background","t":"Fluid gradient background","d":"Fluid Gradient, Animated Three.js Background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/fluid-gradient-background/default/preview.1759920836152.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__glowing-input","t":"Glowing input","d":"Glowing Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/glowing-input/default/preview.1755277194747.png","pc":"minhxthanh","tg":["ai-chat","input"]},{"id":"21st:minhxthanh__gradient-card-showcase","t":"Gradient card showcase","d":"Displays a set of interactive cards with skewed gradient back-panels, glowing blur highlights, and smooth hover transitions","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"minhxthanh","st":"indexed","u":142,"pl":"https://cdn.21st.dev/minhxthanh/gradient-card-showcase/default/preview.1747651603028.png","pc":"minhxthanh","tg":["card"]},{"id":"21st:minhxthanh__gradient-menu","t":"Gradient menu","d":"Gradient Menu: Button Icon Hover Effects with Text And Gradient Drop Shadow","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"minhxthanh","st":"indexed","u":260,"pl":"https://cdn.21st.dev/minhxthanh/gradient-menu/default/preview.1747649717151.png","pc":"minhxthanh","tg":["menu"]},{"id":"21st:minhxthanh__gradient-wavy-animation","t":"Gradient wavy animation","d":"Component that displays a wavy text with gradient fill, using CSS clip-path animation for a dynamic effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/gradient-wavy-animation/default/preview.1749194816739.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__grid-hero-animated","t":"Grid hero animated","d":"Grid Hero Animated","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"minhxthanh","st":"indexed","u":14,"pl":"https://cdn.21st.dev/minhxthanh/grid-hero-animated/default/preview.1755752243331.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__hero-landing-page-with-interactive-animations","t":"Hero landing page with interactive animations","d":"React hero section featuring a dark gradient background with floating morphing particles, dual mouse-tracking cursors, shimmer text effects, and floating icons. Includes smooth scr","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/hero-landing-page-with-interactive-animations/default/preview.1749892615551.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__hover-expand-gallery","t":"Hover expand gallery","d":"Images Hover Expand Gallery Vertical","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/hover-expand-gallery/default/preview.1757345088037.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__hover-preview","t":"Hover preview","d":"Hover Preview Component that displays image previews above text links when hovering.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"minhxthanh","st":"indexed","u":85,"pl":"https://cdn.21st.dev/minhxthanh/hover-preview/default/preview.1764082704077.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__image-carousel","t":"Image carousel","d":"Image Carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/image-carousel/default/preview.1758005282685.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__image-comparison","t":"Image comparison","d":"Image Comparison: Drag the handle or use the keyboard to compare images.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/image-comparison/default/preview.1760773093422.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__image-comparison-slider","t":"Image comparison slider","d":"Image Comparison Slider. Drag the slider to compare the two images.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":166,"pl":"https://cdn.21st.dev/minhxthanh/image-comparison-slider/default/preview.1758190242046.png","pc":"minhxthanh","tg":["image","slider"]},{"id":"21st:minhxthanh__images-scrolling-animation","t":"Images scrolling animation","d":"Images Scrolling Animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":107,"pl":"https://cdn.21st.dev/minhxthanh/images-scrolling-animation/default/preview.1757434163508.png","pc":"minhxthanh","tg":["gallery","image"]},{"id":"21st:minhxthanh__interactive-image-accordion","t":"Interactive image accordion","d":"Interactive Image Accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"minhxthanh","st":"indexed","u":817,"pl":"https://cdn.21st.dev/minhxthanh/interactive-image-accordion/default/preview.1755082133925.png","pc":"minhxthanh","tg":["accordion","ai-chat","gallery"]},{"id":"21st:minhxthanh__interactive-neural-vortex-background","t":"Interactive neural vortex background","d":"This code creates a dynamic, immersive WebGL background featuring a swirling, organic \"neuro\" effect that reacts to user interaction","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","u":147,"pl":"https://cdn.21st.dev/minhxthanh/interactive-neural-vortex-background/default/preview.1748941718772.png","pc":"minhxthanh","tg":["cta","hero"]},{"id":"21st:minhxthanh__interactive-particle-typography-1","t":"Interactive particle typography 1","d":"A React component that renders a full-screen interactive particle animation forming the word \"21ST.DEV\". Particles are attracted to text-shaped targets and respond to mouse or touc","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"minhxthanh","st":"indexed","u":56,"pl":"https://cdn.21st.dev/minhxthanh/interactive-particle-typography-1/default/preview.1785361870799-8a63a107-e997-4bc6-8a01-01fc483cf8ae.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__interactive-scrolling-story-component","t":"Interactive scrolling story component","d":"This React component creates an immersive, full-page scrolling animation designed to showcase a series of features or messages. As the user scrolls down, the content on the left sm","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"minhxthanh","st":"indexed","u":98,"pl":"https://cdn.21st.dev/minhxthanh/interactive-scrolling-story-component/default/preview.1756285201945.png","pc":"minhxthanh","tg":["cta","features","grid","scroll-area"]},{"id":"21st:minhxthanh__interactive-selector","t":"Interactive selector","d":"A visually striking, interactive React component showcasing premium camping options with smooth animations, responsive layout","k":"component","s":"21st","c":"media/gallery","g":"media","a":"minhxthanh","st":"indexed","u":454,"pl":"https://cdn.21st.dev/minhxthanh/interactive-selector/default/preview.1748943013917.png","pc":"minhxthanh","tg":["gallery"]},{"id":"21st:minhxthanh__landing-page-animated-backgrounds","t":"Landing page animated backgrounds","d":"Landing page with animated backgrounds, a responsive navbar, and smooth animations.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/landing-page-animated-backgrounds/default/preview.1755423478498.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__lightning-text","t":"Lightning text","d":"Lightning Text Animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":33,"pl":"https://cdn.21st.dev/minhxthanh/lightning-text/default/preview.1750081495596.png","pc":"minhxthanh","tg":["text"]},{"id":"21st:minhxthanh__liquid-effect-animation","t":"Liquid effect animation","d":"Liquid Effect Animation","k":"component","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":52,"pl":"https://cdn.21st.dev/minhxthanh/liquid-effect-animation/default/preview.1760769765612.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__login-form","t":"Login form","d":"Login Form and the smokey background effect","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"minhxthanh","st":"indexed","u":199,"pl":"https://cdn.21st.dev/minhxthanh/login-form/default/preview.1755857543824.png","pc":"minhxthanh","tg":["form"]},{"id":"21st:minhxthanh__mac-os-animated-shortcut-keyboard","t":"Mac os animated shortcut keyboard","d":"MacOS Keyboard Animated Shortcut Keyboard","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/mac-os-animated-shortcut-keyboard/default/preview.1750850277337.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__magic-button","t":"Magic button","d":"Magic Button, Animated Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/magic-button/default/preview.1758189111676.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__menu-hover-effects","t":"Menu hover effects","d":"Menu Hover Effects","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"minhxthanh","st":"indexed","u":85,"pl":"https://cdn.21st.dev/minhxthanh/menu-hover-effects/default/preview.1747659410131.png","pc":"minhxthanh","tg":["menu","navigation-menu"]},{"id":"21st:minhxthanh__mouse-responsive-background","t":"Mouse responsive background","d":"Mouse-Responsive Parallax Background Component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":8,"pl":"https://cdn.21st.dev/minhxthanh/mouse-responsive-background/default/preview.1749180585681.png","pc":"minhxthanh","tg":["background"]},{"id":"21st:minhxthanh__moving-dot-card","t":"Moving dot card","d":"A dynamic views counter card featuring an animated dot traversing the border, gradient-highlighted count display, and stylized corner lines for a sci-fi UI effect","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"minhxthanh","st":"indexed","u":189,"pl":"https://cdn.21st.dev/minhxthanh/moving-dot-card/default/preview.1747715829045.png","pc":"minhxthanh","tg":["card","border"]},{"id":"21st:minhxthanh__neon-orbs","t":"Neon orbs","d":"Neon Orbs Animation","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"minhxthanh","st":"indexed","u":84,"pl":"https://cdn.21st.dev/minhxthanh/neon-orbs/default/preview.1764337353769.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__otp-input","t":"Otp input","d":"OTP Input, OTP Form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/otp-input/default/preview.1785367839846-50aa1414-750d-445b-9730-f9ae5a6632a0.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__otp-verify","t":"Otp verify","d":"OTP verify with GIF","k":"component","s":"21st","c":"inputs/otp-input","g":"inputs","a":"minhxthanh","st":"rated","pl":"https://cdn.21st.dev/minhxthanh/otp-verify/default/preview.1755502076175.png","pc":"minhxthanh","sc":18},{"id":"21st:minhxthanh__page-not-found","t":"Page not found","d":"Page Not Found 404","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/page-not-found/default/preview.1747655878437.png","pc":"minhxthanh","tg":["empty-state"]},{"id":"21st:minhxthanh__panda-login-form","t":"Panda login form","d":"Panda Login Form Component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/panda-login-form/default/preview.1750650648841.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__parallax-and-animations","t":"Parallax and animations","d":"Component renders a full‑screen hero section featuring a dark background, dynamic geometric shapes (triangles, hexagons, lines, circles) with float, slide, and rotate animations, a","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/parallax-and-animations/default/preview.1750081876477.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__parallax-scrolling-effect","t":"Parallax scrolling effect","d":"Component implements a parallax scrolling effect on a webpage. It features a background image that zooms out and blurs as the user scrolls down, creating a sense of depth.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"minhxthanh","st":"indexed","u":31,"pl":"https://cdn.21st.dev/minhxthanh/parallax-scrolling-effect/default/preview.1748948535144.png","pc":"minhxthanh","tg":["scroll-area"]},{"id":"21st:minhxthanh__platform-hero-section","t":"Platform hero section","d":"Hero section features a visually striking and interactive design for an AI-powered development platform. It includes a dynamic background with animated light lines and subtle float","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/platform-hero-section/default/preview.1750651371397.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__radio-button","t":"Radio button","d":"Radio button animated","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/radio-button/default/preview.1756720432867.png","pc":"minhxthanh","tg":["radio-group"]},{"id":"21st:minhxthanh__schema-card-with-animated-wave-visualizer","t":"Schema card with animated wave visualizer","d":"Schema Card with Animated Wave Visualizer.  This component renders a full-screen, procedurally generated wave visualizer in the background and overlays a “glassmorphic” database sc","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"minhxthanh","st":"indexed","u":154,"pl":"https://cdn.21st.dev/minhxthanh/schema-card-with-animated-wave-visualizer/default/preview.1748425103154.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__scrolling-animation","t":"Scrolling animation","d":"Scrolling animation, Profile images","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"minhxthanh","st":"indexed","u":100,"pl":"https://cdn.21st.dev/minhxthanh/scrolling-animation/default/preview.1755858994611.png","pc":"minhxthanh","tg":["avatar"]},{"id":"21st:minhxthanh__shader-background","t":"Shader background","d":"Component that renders a full-screen WebGL canvas behind all other content. It compiles and executes custom vertex and fragment shaders to create an animated purple-blue plasma gri","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"minhxthanh","st":"indexed","u":1454,"pl":"https://cdn.21st.dev/minhxthanh/shader-background/default/preview.1748699860662.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__simple-ui","t":"Simple ui","d":"This is a simple UI used for generating images and displaying the image list","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"minhxthanh","st":"indexed","u":90,"pl":"https://cdn.21st.dev/minhxthanh/simple-ui/default/preview.1749176329605.png","pc":"minhxthanh","tg":["dashboard","gallery"]},{"id":"21st:minhxthanh__slide-tabs","t":"Slide tabs","d":"Slide Tabs, Menu Nav","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"minhxthanh","st":"indexed","u":157,"pl":"https://cdn.21st.dev/minhxthanh/slide-tabs/default/preview.1757595194990.png","pc":"minhxthanh","tg":["menu","navigation-menu","tabs"]},{"id":"21st:minhxthanh__spider-cursor","t":"Spider cursor","d":"Spider Cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/spider-cursor/default/preview.1757432195680.png","pc":"minhxthanh","tg":["cursor"]},{"id":"21st:minhxthanh__spinning-arc-logo-with-gradient-text-1","t":"Spinning arc logo with gradient text 1","d":"A React component that renders multiple animated SVG arcs rotating at different speeds around a central badge. The central text displays a continuously cycling gradient, all styled","k":"component","s":"21st","c":"status/loader","g":"status","a":"minhxthanh","st":"indexed","u":10,"pl":"https://cdn.21st.dev/minhxthanh/spinning-arc-logo-with-gradient-text/default/preview.1747799378362.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__sticky-scroll-cards-section","t":"Sticky scroll cards section","d":"Sticky scroll cards section – React + Tailwind + Framer Motion","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"minhxthanh","st":"indexed","u":250,"pl":"https://cdn.21st.dev/minhxthanh/sticky-scroll-cards-section/default/preview.1755080220030.png","pc":"minhxthanh","tg":["ai-chat","features"]},{"id":"21st:minhxthanh__svg-path-drawing-text-animation","t":"Svg path drawing text animation","d":"A smooth SVG text animation component that creates a mesmerizing path drawing effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":35,"pl":"https://cdn.21st.dev/minhxthanh/svg-path-drawing-text-animation/default/preview.1749905025545.png","pc":"minhxthanh","tg":["text"]},{"id":"21st:minhxthanh__text-animation","t":"Text animation","d":"Text Animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":28,"pl":"https://cdn.21st.dev/minhxthanh/text-animation/default/preview.1749911345784.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__text-explode","t":"Text explode","d":"Text explode effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"minhxthanh","st":"indexed","u":42,"pl":"https://cdn.21st.dev/minhxthanh/text-explode/default/preview.1750824053339.png","pc":"minhxthanh","tg":["text"]},{"id":"21st:minhxthanh__theme-toggle-buttons","t":"Theme toggle buttons","d":"Theme toggle buttons","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"minhxthanh","st":"indexed","u":116,"pl":"https://cdn.21st.dev/minhxthanh/theme-toggle-buttons/default/preview.1785530901963-9042c57d-d366-4305-879a-45dd5239772a.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__triangles-falling","t":"Triangles falling","d":"Animated visual effect with floating, rotating triangles that look like they are being sucked into a black","k":"component","s":"21st","c":"other","g":"other","a":"minhxthanh","st":"indexed","u":10,"pl":"https://cdn.21st.dev/minhxthanh/triangles-falling/default/preview.1748942167513.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__waitlist-hero","t":"Waitlist hero","d":"Waitlist Hero Animation","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"minhxthanh","st":"indexed","u":324,"pl":"https://cdn.21st.dev/minhxthanh/waitlist-hero/default/preview.1764083294693.png","pc":"minhxthanh"},{"id":"21st:minhxthanh__weave-spinner","t":"Weave spinner","d":"A visually complex loading spinner with threads weaving around a central pulsing node","k":"component","s":"21st","c":"status/loader","g":"status","a":"minhxthanh","st":"indexed","pl":"https://cdn.21st.dev/minhxthanh/weave-spinner/default/preview.1757345706106.png","pc":"minhxthanh","tg":["spinner"]},{"id":"21st:minhxthanh__web3-hero-section","t":"Web3 hero section","d":"Animated Web3 Hero Section","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"minhxthanh","st":"indexed","u":16,"pl":"https://cdn.21st.dev/minhxthanh/web3-hero-section/default/preview.1759067404894.png","pc":"minhxthanh","tg":["cta"]},{"id":"21st:misbahansar__card-hover","t":"Card hover","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"misbahansar","st":"indexed","pl":"https://cdn.21st.dev/misbahansar/card-hover/default/preview.1764270905996.png","pc":"misbahansar"},{"id":"21st:mishra.archana0148__whitecurd-original","t":"Whitecurd original","d":"Animated (wave) ASCII art in the Rings style, made with the 21st ASCII editor and baked to a looping video. Styled with a pixel look. A drop-in, zero-dependency React component for","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mishra.archana0148","st":"indexed","pl":"https://cdn.21st.dev/mishra.archana0148/whitecurd-original/default/preview.1786270812128-ca07517a-d815-409e-b228-e7956689301f.webp","pc":"mishra.archana0148"},{"id":"21st:mishraathrav917__ass","t":"Ass","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#03120E, #0E7C5A, #7CE577, #F4FFC7). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mishraathrav917","st":"indexed","u":4,"pl":"https://cdn.21st.dev/mishraathrav917/ass/default/preview.1784034995367.webp","pc":"mishraathrav917"},{"id":"21st:miyamura80__world-map","t":"World map","d":"Wild map visualization to show data by individual country. ","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"miyamura80","st":"indexed","pl":"https://cdn.21st.dev/miyamura80/world-map/default/preview.1760198087178.png","pc":"miyamura80"},{"id":"21st:mkasiak__act-of-creation","t":"Act of creation","d":"Animated (wave) ASCII art in the Voxel style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic, portrait, retro look. A drop-in, zero-dependen","k":"component","s":"21st","c":"media/player","g":"media","a":"mkasiak","st":"indexed","pl":"https://cdn.21st.dev/mkasiak/act-of-creation/default/preview.1784049681308.png","pc":"mkasiak","tg":["video"]},{"id":"21st:mkhalif-xyz__registry-test-badge","t":"Registry test badge","d":"A tiny dependency-free badge used to verify that publishing to the 21st.dev registry works end to end.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"mkhalif-xyz","st":"indexed","pl":"https://21st.dev/@mkhalif-xyz/components/registry-test-badge","pc":"mkhalif-xyz"},{"id":"21st:mo040__mo-mosaic","t":"Mo mosaic","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mo040","st":"indexed","pl":"https://cdn.21st.dev/amin.sabzevari/mo-mosaic/default/preview.1785016222991-a8221aa4-14f6-4635-8c4d-ec67c40a227a.webp","pc":"mo040"},{"id":"21st:moazamtrade__3d-gallery-photography","t":"3d gallery photography","d":"3D Gallery Photography Using React Three Fiber ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moazamtrade","st":"indexed","u":352,"pl":"https://cdn.21st.dev/moazamtrade/3d-gallery-photography/default/preview.1758834375690.png","pc":"moazamtrade","tg":["gallery"]},{"id":"21st:moazamtrade__3d-image-gallery","t":"3d image gallery","d":"3D Image gallery ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moazamtrade","st":"indexed","u":117,"pl":"https://cdn.21st.dev/moazamtrade/3d-image-gallery/default/preview.1756500906139.png","pc":"moazamtrade","tg":["gallery"]},{"id":"21st:moazamtrade__3d-orbit-gallery","t":"3d orbit gallery","d":"3d orbit gallery with nice smooth ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moazamtrade","st":"indexed","u":106,"pl":"https://cdn.21st.dev/moazamtrade/3d-orbit-gallery/default/preview.1759011848701.png","pc":"moazamtrade","tg":["gallery"]},{"id":"21st:moazamtrade__ai-chat-screen","t":"Ai chat screen","d":"Chat Screen with working open router free ai models fully design page with nice user ai response chat screen for simple text tasks ","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/ai-chat-screen/default/preview.1758704156884.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__ai-models-preview","t":"Ai models preview","d":"Ai Models Preview  with dialog details smooth sleek animation designed block with props ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"moazamtrade","st":"indexed","u":61,"pl":"https://cdn.21st.dev/moazamtrade/ai-models-preview/default/preview.1758547125079.png","pc":"moazamtrade","tg":["ai-chat","modal"]},{"id":"21st:moazamtrade__animate-card-animation","t":"Animate card animation","d":"Animate Card Animation with framer motion","k":"component","s":"21st","c":"media/carousel","g":"media","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/animate-card-animation/default/preview.1765799713910.png","pc":"moazamtrade","tg":["carousel"]},{"id":"21st:moazamtrade__animated-generate-button-shadcn-tailwind","t":"Animated generate button shadcn tailwind","d":"A reusable, accessible React button that mirrors the Uiverse “dexter-st” glow/flicker animation using Tailwind utilities and scoped CSS. It integrates with shadcn theme tokens, sup","k":"component","s":"21st","c":"actions/button","g":"actions","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/animated-generate-button-shadcn-tailwind/default/preview.1785193208073-db249ed0-b53a-485d-a03a-957ce6e0d489.png","pc":"moazamtrade","tg":["ai-chat","button"]},{"id":"21st:moazamtrade__background-shader","t":"Background shader","d":"Background Shader blur gredient paper design bg ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","u":116,"pl":"https://cdn.21st.dev/moazamtrade/background-shader/default/preview.1757400993195.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__background-shaders","t":"Background shaders","d":"Background Shaders Using @paper-design/shaders-react","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","u":42,"pl":"https://cdn.21st.dev/moazamtrade/background-shaders/default/preview.1756499155707.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__background-shades","t":"Background shades","d":"goldbar background with paper design","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","u":17,"pl":"https://cdn.21st.dev/moazamtrade/background-shades/default/preview.1756563418344.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__carousel","t":"Carousel","d":"Sleek designed Carousel Section for your landing page ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/carousel/default/preview.1765363774957.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__chat-page","t":"Chat page","d":"Chat Page with glass design ","k":"component","s":"21st","c":"data-display/chat-thread","g":"data-display","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/chat-page/default/preview.1759390412944.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__cookies-banner","t":"Cookies banner","d":"Cookies Banner with sleek design and dark mode supported","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"moazamtrade","st":"indexed","u":14,"pl":"https://cdn.21st.dev/moazamtrade/cookies-banner/default/preview.1757802096669.png","pc":"moazamtrade","tg":["modal"]},{"id":"21st:moazamtrade__crypto-swap-card","t":"Crypto swap card","d":"Crypto Swap Card With Real Time Pricing of Currency Using CoinGecko Free api ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moazamtrade","st":"indexed","u":29,"pl":"https://cdn.21st.dev/moazamtrade/crypto-swap-card/default/preview.1758659350801.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__d-heat-wave","t":"D heat wave","d":"D heatwave example with paper","k":"component","s":"21st","c":"other","g":"other","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/d-heat-wave/default/preview.1757499347204.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__distort-text","t":"Distort text","d":"Distort Text with gsap","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/distort-text/default/preview.1757240310923.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__feature","t":"Feature","d":"Sleek design animated Featured Cards Section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"moazamtrade","st":"indexed","u":121,"pl":"https://cdn.21st.dev/moazamtrade/feature/default/preview.1765049519557.png","pc":"moazamtrade","tg":["features"]},{"id":"21st:moazamtrade__feature-shader-cards","t":"Feature shader cards","d":"Feature Shader Cards","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/feature-shader-cards/default/preview.1757238664169.png","pc":"moazamtrade","tg":["features"]},{"id":"21st:moazamtrade__fireworks-background","t":"Fireworks background","d":"Fireworks Background with smooth animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/fireworks-background/default/preview.1757334109118.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__flashcard-stack","t":"Flashcard stack","d":"An interactive flashcard stack with a hover animation that smoothly expands into individual cards using spring-based motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/flashcard-stack/default/preview.1774611469319.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__glass-card","t":"Glass card","d":"Glass Card With Props ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/glass-card/default/preview.1758322852430.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__glass-real-time-crypto-chart","t":"Glass real time crypto chart","d":"Glass Real time crypto Chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"moazamtrade","st":"indexed","u":22,"pl":"https://cdn.21st.dev/moazamtrade/glass-real-time-crypto-chart/default/preview.1756500193987.png","pc":"moazamtrade","tg":["data-visualization","dashboard"]},{"id":"21st:moazamtrade__hero","t":"Hero","d":"Sleek designed Fully responsive hero section and navbar dark designed smooth animations","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/hero/default/preview.1756498304992.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__hero-button-expendable","t":"Hero button expendable","d":"Hero Button Expendable ","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"moazamtrade","st":"indexed","u":147,"pl":"https://cdn.21st.dev/moazamtrade/hero-button-expendable/default/preview.1765526195036.png","pc":"moazamtrade","tg":["cta"]},{"id":"21st:moazamtrade__hero-dithering-card","t":"Hero dithering card","d":"A responsive, banner-style Hero section featuring a subtle, physics-based dithering shader effect in the background. Built with Framer Motion, Shaders, and React.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","u":511,"pl":"https://cdn.21st.dev/moazamtrade/hero-dithering-card/default/preview.1769113686730.png","pc":"moazamtrade","tg":["cta","hero"]},{"id":"21st:moazamtrade__hero-section","t":"Hero section","d":"Hero Section with bg video clean designed","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/hero-section/default/preview.1775480195685.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__hero-section-with-smooth-bg-shader","t":"Hero section with smooth bg shader","d":"Hero section with smooth Shader and data passing using props","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","u":617,"pl":"https://cdn.21st.dev/moazamtrade/hero-section-with-smooth-bg-shader/default/preview.1785306771653-8afad706-0ce2-41a7-90c9-9f8dc41f7168.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__hexagon-background","t":"Hexagon background","d":"A flexible, TypeScript-ready Hexagon Background component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/hexagon-background/default/preview.1757277183060.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__hover-animation-button","t":"Hover animation button","d":"Hover animation Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/hover-animation-button/default/preview.1756449211716.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__logo-cloud","t":"Logo cloud","d":"A compact, responsive grid showcasing partner and client logos.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/logo-cloud/default/preview.1761293030759.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__marquee-hover-button","t":"Marquee hover button","d":"A reusable React + TypeScript button component that replicates a marquee-on-hover animation using Tailwind CSS and Framer Motion. ","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/marquee-hover-button/default/preview.1759405186253.png","pc":"moazamtrade","tg":["marquee"]},{"id":"21st:moazamtrade__neon-dither","t":"Neon dither","d":"Reactive ambient background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","u":57,"pl":"https://cdn.21st.dev/moazamtrade/neon-dither/default/preview.1757621342725.png","pc":"moazamtrade","tg":["background"]},{"id":"21st:moazamtrade__paper-design-shader-background","t":"Paper design shader background","d":"Paper design shader Background ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/paper-design-shader-background/default/preview.1756567728912.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__pinky-news-letter","t":"Pinky news letter","d":"Pinky News Letter  with paper design ","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"moazamtrade","st":"indexed","u":60,"pl":"https://cdn.21st.dev/moazamtrade/pinky-news-letter/default/preview.1756713762008.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__portfolio-hero-with-paper-shaders","t":"Portfolio hero with paper shaders","d":"Portfolio Hero with paper shaders","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","u":114,"pl":"https://cdn.21st.dev/moazamtrade/portfolio-hero-with-paper-shaders/default/preview.1756447637590.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__shader-hero","t":"Shader hero","d":"bg shader Hero component ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/shader-hero/default/preview.1756288228791.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__sleek-hero-with-orb","t":"Sleek hero with orb","d":"Sleek Hero with Orb dark & light mode supported fully responsive with floating header","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moazamtrade","st":"indexed","u":14,"pl":"https://cdn.21st.dev/moazamtrade/sleek-hero-with-orb/default/preview.1758063233940.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__stacked-panels-cursor-intereactive-component","t":"Stacked panels cursor intereactive component","d":"Interactive 3D panel stack built with Framer Motion springs. Mouse position drives per-panel wave lift and scale via a Gaussian falloff curve.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moazamtrade","st":"indexed","u":70,"pl":"https://cdn.21st.dev/moazamtrade/stacked-panels-cursor-intereactive-component/default/preview.1774046820081.png","pc":"moazamtrade","tg":["gallery","image"]},{"id":"21st:moazamtrade__text-hover-effect","t":"Text hover effect","d":"Interactive SVG text animation using GSAP - reveals a colorful gradient that follows cursor or touch movement.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"moazamtrade","st":"indexed","u":20,"pl":"https://cdn.21st.dev/moazamtrade/text-hover-effect/default/preview.1760788726070.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__the-future-arrives-soon-cta","t":"The future arrives soon cta","d":"A full-width promotional banner with a live countdown timer, designed to create urgency for upcoming launches, events, or early access signups.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/the-future-arrives-soon-cta/default/preview.1774047998004.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__the-infinite-grid","t":"The infinite grid","d":"Grid cursor infinity grid ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"moazamtrade","st":"indexed","u":491,"pl":"https://cdn.21st.dev/moazamtrade/the-infinite-grid/default/preview.1765266775347.png","pc":"moazamtrade","tg":["cursor","hero"]},{"id":"21st:moazamtrade__transparent-pricing","t":"Transparent pricing","d":"transparent pricing","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"moazamtrade","st":"indexed","pl":"https://cdn.21st.dev/moazamtrade/transparent-pricing/default/preview.1765272064527.png","pc":"moazamtrade"},{"id":"21st:moazamtrade__wireframe-dotted-globe","t":"Wireframe dotted globe","d":"interactive 3D globe that allows you to rotate and zoom in on Earth with intuitive mouse controls","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"moazamtrade","st":"indexed","u":725,"pl":"https://cdn.21st.dev/moazamtrade/wireframe-dotted-globe/default/preview.1757537780531.png","pc":"moazamtrade","tg":["globe"]},{"id":"21st:moazamtrade__wrap-shader","t":"Wrap shader","d":"mesh type shaders paper design ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moazamtrade","st":"indexed","u":412,"pl":"https://cdn.21st.dev/moazamtrade/wrap-shader/default/preview.1756971132325.png","pc":"moazamtrade"},{"id":"21st:mohammad.naim.sheikh__perspective-parallax-animation","t":"Perspective parallax animation","d":"A smooth perspective parallax animation component built with React and Tailwind CSS that responds seamlessly to scroll interactions. As users scroll, elements shift with a subtle 3","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"mohammad.naim.sheikh","st":"indexed","pl":"https://cdn.21st.dev/mohammad.naim.sheikh/perspective-parallax-animation/default/preview.1774437995513.png","pc":"mohammad.naim.sheikh"},{"id":"21st:mohammadalhabil1999__time-picker","t":"Time picker","d":"A simple and intuitive time picker that lets users easily select hours, minutes, and seconds. It supports both 12-hour (AM/PM) and 24-hour formats, with smooth scrolling and clear ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"mohammadalhabil1999","st":"indexed","pl":"https://cdn.21st.dev/mohammadalhabil1999/time-picker/default/preview.1753323420987.png","pc":"mohammadalhabil1999","tg":["form","scroll-area"]},{"id":"21st:mohitham1220__prism-fold-3d-logo-animation","t":"Prism fold 3d logo animation","k":"component","s":"21st","c":"marketing","g":"marketing","a":"mohitham1220","st":"indexed","pl":"https://cdn.21st.dev/mohitham1220/prism-fold-3d-logo-animation/default/preview.1767615552115.png","pc":"mohitham1220"},{"id":"21st:mokshithcodez__call-to-action","t":"Call to action","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mokshithcodez","st":"indexed","pl":"https://cdn.21st.dev/mokshithcodez/call-to-action/default/preview.1783628265452.png","pc":"mokshithcodez","tg":["cta","hero"]},{"id":"21st:mokshithcodez__counter","t":"Counter","d":"An Simple React Counter","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"mokshithcodez","st":"indexed","pl":"https://cdn.21st.dev/mokshithcodez/counter/default/preview.1783274185498.png","pc":"mokshithcodez"},{"id":"21st:mokshithcodez__dev-tool-landing-page","t":"Dev tool landing page","d":"A high-craft landing page block designed for developer tools. Features an interactive code-stepper hero and hover-to-reveal diagnostic feature cards.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mokshithcodez","st":"indexed","u":6,"pl":"https://cdn.21st.dev/mokshithcodez/dev-tool-landing-page/default/preview.1784374196005-54529962-8ec9-4b0d-97ca-b24ac8774a6b.png","pc":"mokshithcodez","tg":["hero"]},{"id":"21st:mokshithcodez__featuresgrid","t":"Featuresgrid","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"mokshithcodez","st":"indexed","u":5,"pl":"https://cdn.21st.dev/mokshithcodez/featuresgrid/default/preview.1783617897701.png","pc":"mokshithcodez","tg":["features"]},{"id":"21st:mokshithcodez__modern-landing-hero","t":"Modern landing hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"mokshithcodez","st":"indexed","u":13,"pl":"https://cdn.21st.dev/mokshithcodez/modern-landing-hero/default/preview.1783617372063.png","pc":"mokshithcodez","tg":["badge","cta","hero"]},{"id":"21st:mokshithcodez__navigationbar","t":"Navigationbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"mokshithcodez","st":"indexed","pl":"https://cdn.21st.dev/mokshithcodez/navigationbar/default/preview.1783677195002.png","pc":"mokshithcodez"},{"id":"21st:mokshithcodez__pricing-section","t":"Pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"mokshithcodez","st":"indexed","u":5,"pl":"https://cdn.21st.dev/mokshithcodez/pricing-section/default/preview.1783631303281.png","pc":"mokshithcodez","tg":["pricing-section","table","toggle"]},{"id":"21st:mokshithcodez__simple-navbar","t":"Simple navbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"mokshithcodez","st":"indexed","pl":"https://cdn.21st.dev/mokshithcodez/simple-navbar/default/preview.1783274794070.png","pc":"mokshithcodez"},{"id":"21st:molecule-lab-rushil__animate-checkbox","t":"Animate checkbox","d":"An animated checkbox component with smooth transitions and hover effects built on Radix UI primitives.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/animate-checkbox/default/preview.1753084013109.png","pc":"molecule-lab-rushil","tg":["checkbox"]},{"id":"21st:molecule-lab-rushil__bouncing-dots","t":"Bouncing dots","d":"An animated loading indicator featuring three bouncing dots with customizable colors and spacing.","k":"component","s":"21st","c":"status/loader","g":"status","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/bouncing-dots/default/preview.1753184049396.png","pc":"molecule-lab-rushil","tg":["spinner"]},{"id":"21st:molecule-lab-rushil__dialog","t":"Dialog","d":"A pop-up layered above the application window or dialog, which makes the background content inert.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/dialog/default/preview.1756056464810.png","pc":"molecule-lab-rushil","tg":["modal"]},{"id":"21st:molecule-lab-rushil__discussion","t":"Discussion","d":"A component for displaying nested discussions or comment threads.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/discussion/default/preview.1753106672080.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__expandable-button","t":"Expandable button","d":"A button that smoothly transitions between collapsed and expanded states using spring animations. Shows only an icon when collapsed and reveals text alongside the icon when expande","k":"component","s":"21st","c":"actions/button","g":"actions","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/expandable-button/default/preview.1754244560998.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__glass-card","t":"Glass card","d":"A glassmorphism card component with frosted glass effect and backdrop blur. Includes flexible sub-components (header, title, content, footer) for building modern transparent UI car","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"molecule-lab-rushil","st":"indexed","u":77,"pl":"https://cdn.21st.dev/molecule-lab-rushil/glass-card/default/preview.1755363903337.png","pc":"molecule-lab-rushil","tg":["card","form","sign-in"]},{"id":"21st:molecule-lab-rushil__morphing-square","t":"Morphing square","d":"A customisable morphing square loader component for indicating loading states in your application. Features smooth shape transitions and optional loading messages.","k":"component","s":"21st","c":"status/loader","g":"status","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/morphing-square/default/preview.1753107077148.png","pc":"molecule-lab-rushil","tg":["spinner"]},{"id":"21st:molecule-lab-rushil__not-found","t":"Not found","d":"A responsive 404 error page that displays when users navigate to a non-existent route.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/not-found/default/preview.1755094130014.png","pc":"molecule-lab-rushil","tg":["empty-state","search"]},{"id":"21st:molecule-lab-rushil__not-found-1","t":"Not found 1","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/not-found-1/default/preview.1755187551613.png","pc":"molecule-lab-rushil","tg":["empty-state","grid","link"]},{"id":"21st:molecule-lab-rushil__orbital-loader","t":"Orbital loader","d":"A customisable orbital loader component for indicating loading states in your application. Features smooth orbital animations and optional loading messages.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/orbital-loader/default/preview.1753107293298.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__star-rating","t":"Star rating","d":"An interactive star rating component with configurable scale, sizes (sm/md/lg), and readonly mode. Users can click stars to set ratings with smooth hover animations and visual feed","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"molecule-lab-rushil","st":"indexed","u":23,"pl":"https://cdn.21st.dev/molecule-lab-rushil/star-rating/default/preview.1755371085990.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__swipe-row","t":"Swipe row","d":"A swipe row for providing actions of swipe of left and right","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/swipe-row/default/preview.1753194649426.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__swipe-row-1","t":"Swipe row 1","d":"A swipe row for providing actions of swipe of left and right","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/swipe-row-1/default/preview.1754980888612.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__vignette-grid-background","t":"Vignette grid background","d":"Renders a full-screen grid background with an optional radial vignette effect, customizable in size, position, and intensity.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"molecule-lab-rushil","st":"indexed","u":45,"pl":"https://cdn.21st.dev/molecule-lab-rushil/vignette-grid-background/default/preview.1755260765587.png","pc":"molecule-lab-rushil","tg":["background","cta","grid","hero"]},{"id":"21st:molecule-lab-rushil__voice-input","t":"Voice input","d":" An interactive voice recording interface with animated visual feedback, timer display, and customizable start/stop callbacks.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/voice-input/default/preview.1753461345442.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__warp-dialog","t":"Warp dialog","d":"A visually striking dialog component with 3D warp animations and smooth transitions. Features perspective transformations, animated backgrounds, and spring-based motion effects for","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"molecule-lab-rushil","st":"indexed","u":61,"pl":"https://cdn.21st.dev/molecule-lab-rushil/warp-dialog/default/preview.1754242659080.png","pc":"molecule-lab-rushil","tg":["modal"]},{"id":"21st:molecule-lab-rushil__wave-loader","t":"Wave loader","d":"An animated loading indicator featuring vertical bars that scale up and down in a wave-like pattern to indicate loading states.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"molecule-lab-rushil","st":"indexed","pl":"https://cdn.21st.dev/molecule-lab-rushil/wave-loader/default/preview.1753184349012.png","pc":"molecule-lab-rushil"},{"id":"21st:molecule-lab-rushil__word-rotate","t":"Word rotate","d":"A text animation component that smoothly rotates through an array of words with customizable duration and motion effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"molecule-lab-rushil","st":"indexed","u":12,"pl":"https://cdn.21st.dev/molecule-lab-rushil/word-rotate/default/preview.1754327321134.png","pc":"molecule-lab-rushil","tg":["text"]},{"id":"21st:mona_biasia__gradient-shimmer","t":"Gradient shimmer","d":"A zero-dependency React text shimmer that sweeps a multi-stop gradient highlight across your text. Web-Animations-API driven — no CSS import, no Tailwind, no runtime deps. The grad","k":"component","s":"21st","c":"status/loader","g":"status","a":"mona_biasia","st":"indexed","u":4,"pl":"https://cdn.21st.dev/mona_biasia/gradient-shimmer/default/preview.1785452352383-aeab1551-501d-4582-a37a-af4d23ca2d8f.png","pc":"mona_biasia"},{"id":"21st:monkjin1983__ascii-811f593a","t":"Ascii 811f593a","d":"Animated (flicker) ASCII art in the Matrix style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"monkjin1983","st":"indexed","pl":"https://cdn.21st.dev/monkjin1983/ascii-811f593a/default/preview.1783999294739.webp","pc":"monkjin1983","tg":["video"]},{"id":"21st:monolythdev__ai-agent-pipeline","t":"Ai agent pipeline","d":"An animated visualization of an AI agent pipeline — shows a request flowing from trigger through vector search into an LLM agent, then fanning out into parallel tool calls (email, ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"monolythdev","st":"indexed","pl":"https://cdn.21st.dev/dani_0212bfb0/ai-agent-pipeline/default/preview.1784539505048-93a381a6-1e9b-4df4-95f4-6dbd62affd1e.png","pc":"monolythdev","tg":["ai-chat","data-visualization","dashboard"]},{"id":"21st:montekkundan__ascii-cube","t":"Ascii cube","d":"Cube animation, tweak the rotation speed, axis and cube color!","k":"component","s":"21st","c":"other","g":"other","a":"montekkundan","st":"indexed","u":34,"pl":"https://cdn.21st.dev/user_2tY5eyHFe790HANvv6qCrSJdMQq/ascii-cube/default/preview.1750810650350.png","pc":"montekkundan"},{"id":"21st:montekkundan__ascii-pyramid","t":"Ascii pyramid","d":"pyramid rendered in ascii text","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"montekkundan","st":"indexed","pl":"https://cdn.21st.dev/montekkundan/ascii-pyramid/default/preview.1748019296413.png","pc":"montekkundan"},{"id":"21st:montekkundan__knot-animation","t":"Knot animation","k":"component","s":"21st","c":"status/loader","g":"status","a":"montekkundan","st":"indexed","pl":"https://cdn.21st.dev/montekkundan/knot-animation/default/preview.1748479223308.png","pc":"montekkundan"},{"id":"21st:moorejp__course-compass-logo","t":"Course compass logo","d":"Compass SVG logo with optional wordmark for CourseCompass. Accepts size, primaryColor (cardinal red), accentColor (gold needle), and showWordmark props. Used in nav and footer acro","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"moorejp","st":"indexed","pl":"https://21st.dev/@moorejp/components/course-compass-logo","pc":"moorejp"},{"id":"21st:moorejp__editorial-eyebrow","t":"Editorial eyebrow","d":"Editorial-style section opener: a short colored rule + uppercase label above a Playfair Display headline. Exports EditorialEyebrow (standalone) and EditorialSection (eyebrow + head","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"moorejp","st":"indexed","pl":"https://21st.dev/@moorejp/components/editorial-eyebrow","pc":"moorejp"},{"id":"21st:moorejp__school-selector-panel","t":"School selector panel","d":"Floating panel for selecting a university from a list. Renders institution rows with logo, name, tagline, left-border hover accent, and animated arrow. Includes an AI-live badge fo","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"moorejp","st":"indexed","pl":"https://21st.dev/@moorejp/components/school-selector-panel","pc":"moorejp"},{"id":"21st:moumensoliman__about-us-section-baseui","t":"About us section baseui","d":"An about us section with a heading, four value cards with icons, and a call-to-action, using animated scroll-reveal effects.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/about-us-section-baseui/default/preview.1784926892362-176ff58c-ce50-418d-9338-fae7531990ac.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__action-dropdown","t":"Action dropdown","d":"A click-driven action picker whose multi-level submenu opens beside the row, jumps straight to the selected item, and drills in place with an animated breadcrumb at a fixed width.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/action-dropdown/default/preview.1782595179855.png","pc":"moumensoliman","tg":["dropdown","list","menu"]},{"id":"21st:moumensoliman__appshell","t":"Appshell","d":"Appshell component from Efferdui","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/appshell/default/preview.1779969393178.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__avatar-hover-card","t":"Avatar hover card","d":"Avatar card that expands on hover to reveal profile information with smooth animations.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"moumensoliman","st":"indexed","u":31,"pl":"https://cdn.21st.dev/moumensoliman/avatar-hover-card/default/preview.1768413711275.png","pc":"moumensoliman","tg":["profile"]},{"id":"21st:moumensoliman__avatar-with-name","t":"Avatar with name","d":"Avatar component that displays a name tooltip on hover with directional animations.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"moumensoliman","st":"indexed","u":32,"pl":"https://cdn.21st.dev/moumensoliman/avatar-with-name/default/preview.1768412745353.png","pc":"moumensoliman","tg":["avatar","tooltip"]},{"id":"21st:moumensoliman__breadcrumb-efferdui","t":"Breadcrumb efferdui","d":"breadcrumb","k":"component","s":"21st","c":"navigation/breadcrumb","g":"navigation","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/breadcrumb-efferdui/default/preview.1779965000204.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__chart-one","t":"Chart one","d":"here is chart ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/chart-one/default/preview.1779974908470.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__dashboard-invoices","t":"Dashboard invoices","d":"here is Dashboard Invoices  components","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dashboard-invoices/default/preview.1779973648959.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__delete-button","t":"Delete button","d":"Delete button that expands to show a confirmation button with smooth animations.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"moumensoliman","st":"indexed","u":53,"pl":"https://cdn.21st.dev/moumensoliman/delete-button/default/preview.1768800782521.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__delta","t":"Delta","d":"Here is Delta component","k":"component","s":"21st","c":"other","g":"other","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/delta/default/preview.1779970097781.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__efferd-ui-logo","t":"Efferd ui logo","d":"Efferd Ui logo","k":"component","s":"21st","c":"marketing","g":"marketing","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/efferd-ui-logo/default/preview.1779965646058.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__elastic-switch-shadcnui","t":"Elastic switch shadcnui","d":"Toggle switch with elastic spring animation","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"moumensoliman","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/elastic-switch-shadcnui/demos/default/preview.1773286616582.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__expanding-search-dock-shadcnui","t":"Expanding search dock shadcnui","d":"Minimal search icon that expands into full input with blur","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"moumensoliman","st":"indexed","u":41,"pl":"https://cdn.21st.dev/larsen66/expanding-search-dock-shadcnui/default/preview.1773287697394.png","pc":"moumensoliman","tg":["dock","search"]},{"id":"21st:moumensoliman__faq-section-shadcnui","t":"Faq section shadcnui","d":"Animated FAQ section with expandable questions and smooth transitions","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"moumensoliman","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/faq-section-shadcnui/demos/default/preview.1773287092429.png","pc":"moumensoliman","tg":["accordion","faq"]},{"id":"21st:moumensoliman__feature-cards-block-baseui","t":"Feature cards block baseui","d":"A responsive three-column grid of feature cards with icons, glassmorphism backdrop blur, and hover scale effects for product landing pages.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/feature-cards-block-baseui/default/preview.1784926911916-a4f9a85c-002e-4310-a80d-49b882ba676e.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__floating-gradient-shadcnui","t":"Floating gradient shadcnui","d":"Animated floating gradient background with soft blurred color blobs that drift and scale behind centered content.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moumensoliman","st":"indexed","u":4,"pl":"https://cdn.21st.dev/moumensoliman/floating-gradient-shadcnui/default/preview.1783734880940.png","pc":"moumensoliman","tg":["hero"]},{"id":"21st:moumensoliman__fullwidth-divider","t":"Fullwidth divider","d":"Here is Fullwidth Divider component","k":"component","s":"21st","c":"other","g":"other","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/fullwidth-divider/default/preview.1779967679801.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__gallery-grid-block-shadcnui","t":"Gallery grid block shadcnui","d":"Filterable image gallery with animated lightbox and navigation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moumensoliman","st":"indexed","u":73,"pl":"https://cdn.21st.dev/larsen66/gallery-grid-block-shadcnui/default/preview.1773288628507.png","pc":"moumensoliman","tg":["gallery"]},{"id":"21st:moumensoliman__glass-account-settings-card-shadcnui","t":"Glass account settings card shadcnui","d":"Account management card with subscription overview and billing actions in glassmorphic style","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"moumensoliman","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/glass-account-settings-card-shadcnui/demos/default/preview.1773287998715.png","pc":"moumensoliman","tg":["pricing-section"]},{"id":"21st:moumensoliman__glass-blog-card-shadcnui","t":"Glass blog card shadcnui","d":"Glassmorphism blog card with image zoom, author info, and read action","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moumensoliman","st":"indexed","u":111,"pl":"https://cdn.21st.dev/larsen66/glass-blog-card-shadcnui/demos/default/preview.1773288074949.png","pc":"moumensoliman","tg":["image"]},{"id":"21st:moumensoliman__glass-checkout-card-shadcnui","t":"Glass checkout card shadcnui","d":"Glassmorphism checkout card with payment method selector and input fields","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moumensoliman","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/glass-checkout-card-shadcnui/demos/default/preview.1773288142350.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__glassmorphism-listen-app-block-shadcnui","t":"Glassmorphism listen app block shadcnui","d":"Music streaming block with glassmorphism player, curated highlights, and animated controls","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"moumensoliman","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/glassmorphism-listen-app-block-shadcnui/default/preview.1773289124465.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__glassmorphism-minimal-metrics-block-shadcnui","t":"Glassmorphism minimal metrics block shadcnui","d":"Focused metric cards with glass surfaces, subtle motion, and concierge insight CTA banner","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"moumensoliman","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/glassmorphism-minimal-metrics-block-shadcnui/default/preview.1773289513641.png","pc":"moumensoliman","tg":["dashboard"]},{"id":"21st:moumensoliman__glassmorphism-portfolio-block-shadcnui","t":"Glassmorphism portfolio block shadcnui","d":"Personal portfolio spotlight with profile portrait, narrative highlights, and animated social links","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"moumensoliman","st":"indexed","u":56,"pl":"https://cdn.21st.dev/larsen66/glassmorphism-portfolio-block-shadcnui/default/preview.1773289414205.png","pc":"moumensoliman","tg":["link","profile"]},{"id":"21st:moumensoliman__glassmorphism-testimonials-block-baseui","t":"Glassmorphism testimonials block baseui","d":"A customer testimonials section with glassmorphism cards, star ratings, and hover effects.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/glassmorphism-testimonials-block-baseui/default/preview.1784927937314-0cfc45e0-c76a-4994-9dca-a88d168ae731.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__glowy-waves-hero-shadcnui","t":"Glowy waves hero shadcnui","d":"Hero section with glowy waves effect","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moumensoliman","st":"indexed","u":197,"pl":"https://cdn.21st.dev/larsen66/glowy-waves-hero-shadcnui/default/preview.1773289758692.png","pc":"moumensoliman","tg":["cta","hero","stat"]},{"id":"21st:moumensoliman__gradient-animation-shadcnui","t":"Gradient animation shadcnui","d":"An animated background card that smoothly cycles through transitioning color gradients.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"moumensoliman","st":"indexed","u":4,"pl":"https://cdn.21st.dev/moumensoliman/gradient-animation-shadcnui/default/preview.1783734954245.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__heart-favorite-shadcnui","t":"Heart favorite shadcnui","d":"Animated heart icon for like/favorite actions","k":"component","s":"21st","c":"media/icon","g":"media","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heart-favorite-shadcnui/default/preview.1773290127499.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__hero-block-shadcnui","t":"Hero block shadcnui","d":"Personal portfolio hero section with animated avatar, staggered text, social links, and scroll indicator","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"moumensoliman","st":"indexed","u":51,"pl":"https://cdn.21st.dev/larsen66/hero-block-shadcnui/demos/default/preview.1773289680899.png","pc":"moumensoliman","tg":["hero","link"]},{"id":"21st:moumensoliman__hero-section-shadcnui","t":"Hero section shadcnui","d":"Hero section with staggered text and button reveal","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"moumensoliman","st":"indexed","u":132,"pl":"https://cdn.21st.dev/larsen66/hero-section-shadcnui/demos/default/preview.1773289749167.png","pc":"moumensoliman","tg":["stat"]},{"id":"21st:moumensoliman__holographic-wall-shadcnui","t":"Holographic wall shadcnui","d":"An interactive black wall of Pharaonic hieroglyphs that glow golden and scale up around a radial light following the cursor.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/holographic-wall-shadcnui/default/preview.1783734999839.png","pc":"moumensoliman","tg":["background","cursor"]},{"id":"21st:moumensoliman__image-slider-card-shadcnui","t":"Image slider card shadcnui","d":"An accessible image carousel card with keyboard navigation, dot indicators, reduced-motion support, and screen-reader-friendly labels.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/image-slider-card-shadcnui/default/preview.1784933466544-2f3a22c5-0a64-44a1-a29d-58fd16704912.png","pc":"moumensoliman","tg":["carousel","image","slider"]},{"id":"21st:moumensoliman__interactive-logs-table-shadcnui","t":"Interactive logs table shadcnui","d":"Observability logs panel with animated filters, search, and expandable rows","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interactive-logs-table-shadcnui/demos/default/preview.1773289980850.png","pc":"moumensoliman","tg":["badge","search","table"]},{"id":"21st:moumensoliman__liquid-cursor","t":"Liquid cursor","d":"Pointer-following liquid cursor effect: a fixed full-screen canvas overlay paints colored particles along the mouse path and runs them through an SVG gooey filter for a smooth, blo","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/reapollo/liquid-cursor/default/preview.1777655406113.png","pc":"moumensoliman","tg":["cursor"]},{"id":"21st:moumensoliman__minimal-resume-shadcnui","t":"Minimal resume shadcnui","d":"Vercel-inspired minimal resume with clean typography and grid layout","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/minimal-resume-shadcnui/default/preview.1773293965865.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__n8n-workflow-block-shadcnui","t":"N8n workflow block shadcnui","d":"Visual workflow automation builder with animated nodes, connections, and real-time execution monitoring","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"moumensoliman","st":"rated","pl":"https://cdn.21st.dev/larsen66/n8n-workflow-block-shadcnui/default/preview.1773324878444.png","pc":"moumensoliman","tg":["dashboard"],"sc":23},{"id":"21st:moumensoliman__native-button","t":"Native button","d":"Glassmorphism-inspired button wrapping shadcn/ui Button. Adds framer-motion whileHover/whileTap spring micro-interactions, an optional glow halo (shadow + blurred radial overlay), ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"moumensoliman","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/native-button/default/preview.1779920857266.png","pc":"moumensoliman","tg":["button","spinner"]},{"id":"21st:moumensoliman__native-typewriter-baseui","t":"Native typewriter baseui","d":"A typewriter text animation that types out one or more strings with adjustable speed, looping, a blinking cursor, and an optional per-character blur/morph effect.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/native-typewriter-baseui/default/preview.1784922998841-d4897607-3f7e-487f-9877-b03ece82b76c.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__nav-user","t":"Nav user","d":"Here is NavUser components, ","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/nav-user/default/preview.1779964005707.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__profile-notch","t":"Profile notch","d":"A dynamic expanding notch component for displaying user profiles with smooth spring animations.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/profile-notch/default/preview.1769547435126.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__scroll-fade-effect","t":"Scroll fade effect","d":"Fade content edges as you scroll, for both vertical and horizontal layouts.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scroll-fade-effect/demos/default/preview.1773282913237.png","pc":"moumensoliman","tg":["scroll-area"]},{"id":"21st:moumensoliman__sidebar-header","t":"Sidebar header","d":"Sidebar Header component","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/sidebar-header/default/preview.1779968075471.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__sidebar-one","t":"Sidebar one","d":"Here is Sidebar One component ","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/sidebar-one/default/preview.1779967497039.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__stats","t":"Stats","d":"Here is Stats component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/stats/default/preview.1779972197301.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__stats-counter-block-baseui","t":"Stats counter block baseui","d":"A statistics section with animated count-up numbers, colored icons, and gradient card backgrounds that reveal on scroll into view.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/stats-counter-block-baseui/default/preview.1784931189014-1a29bd77-758c-4d13-acf3-bf0b065e55a5.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__synced-lyric-captions-shadcnui","t":"Synced lyric captions shadcnui","d":"A timed caption player that reveals script lines bottom-to-top in sync with a timer or audio track, with play/pause, skip, volume, playback speed, and a clickable progress bar.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/synced-lyric-captions-shadcnui/default/preview.1784924583376-a0cabfbd-f90a-49a3-924b-3ea70fd5ce42.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__team-section-block-shadcnui","t":"Team section block shadcnui","d":"Animated team member cards with avatars, roles, and social links","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"moumensoliman","st":"indexed","u":43,"pl":"https://cdn.21st.dev/larsen66/team-section-block-shadcnui/demos/default/preview.1773295457851.png","pc":"moumensoliman","tg":["link","profile","team"]},{"id":"21st:moumensoliman__testimonials-block-baseui","t":"Testimonials block baseui","d":"An animated testimonials grid with staggered card reveals, avatar initials, star ratings, and hover effects.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/testimonials-block-baseui/default/preview.1784927337800-14a04c43-1f8a-455c-899c-ac31021be365.png","pc":"moumensoliman"},{"id":"21st:moumensoliman__volume-component-shadcnui","t":"Volume component shadcnui","d":"A smooth, draggable volume slider component with framer-motion animations and shadcn styling.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/larsen66/volume-component-shadcnui/default/preview.1773299063603.png","pc":"moumensoliman","tg":["slider"]},{"id":"21st:moumensoliman__wallet-card","t":"Wallet card","d":"Glassmorphism crypto wallet card with balance, trend, and action buttons","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"moumensoliman","st":"indexed","pl":"https://cdn.21st.dev/moumensoliman/wallet-card/default/preview.1768412092549.png","pc":"moumensoliman"},{"id":"21st:mrasadatik__rating","t":"Rating","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"mrasadatik","st":"rated","pl":"https://cdn.21st.dev/mrasadatik/rating/default/preview.1760398290528.png","pc":"mrasadatik","sc":20},{"id":"21st:mrhyddenn__hover-button","t":"Hover button","d":"Here is simple minimalistic hover button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mrhyddenn","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/hover-button/default/preview.1749425231817.png","pc":"mrhyddenn"},{"id":"21st:mrkebab362__time-tracking-app-1","t":"Time tracking app 1","d":"test","k":"component","s":"21st","c":"inputs/time-picker","g":"inputs","a":"mrkebab362","st":"rated","pl":"https://cdn.21st.dev/user_2tjwGEXvnLaThNAFvexO6CgtJ3X/time-tracking-app-1/demo-timeline/preview.png","pc":"mrkebab362","sc":22},{"id":"21st:mrpoli0828__almaascabins-ir","t":"Almaascabins ir","d":"mix componnet","k":"component","s":"21st","c":"other","g":"other","a":"mrpoli0828","st":"indexed","pl":"https://cdn.21st.dev/mrpoli0828/almaascabins-ir/default/preview.1753863040179.png","pc":"mrpoli0828"},{"id":"21st:mruderman__oval-eggs","t":"Oval eggs","d":"Animated (flicker) ASCII art in the Disco style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mruderman","st":"indexed","pl":"https://cdn.21st.dev/mruderman/oval-eggs/default/preview.1785217818892-fdbab28a-a5ff-4141-95e1-a947936dd08d.webp","pc":"mruderman"},{"id":"21st:msasaadarsalan__spinner","t":"Spinner","d":"A lightweight animated loading spinner built on lucide-react's Loader2Icon. Fully accessible with aria-label and role=status, accepts all SVG props, and supports size customization","k":"component","s":"21st","c":"status/loader","g":"status","a":"msasaadarsalan","st":"indexed","pl":"https://cdn.21st.dev/coss.com/spinner/default/preview.1774275779058.png","pc":"msasaadarsalan"},{"id":"21st:msjmohabali__alqemist-cta","t":"Alqemist cta","d":"Alqemist homepage call-to-action block with workforce messaging, conversion buttons, and animated brand grid.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-cta","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-footer","t":"Alqemist footer","d":"Alqemist marketing footer with product, resource, legal, social links, copyright, and brand summary.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-footer","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-hero","t":"Alqemist hero","d":"Responsive Alqemist homepage hero with install command, primary CTAs, brand background, and product demo entry point.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-hero","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-how-it-works","t":"Alqemist how it works","d":"Alqemist how-it-works section with six implementation steps from project setup to owned infrastructure.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-how-it-works","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-interactive-demo","t":"Alqemist interactive demo","d":"Interactive Alqemist product demo block showing projects, agents, integrations, scheduling, and security surfaces.","k":"component","s":"21st","c":"other","g":"other","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-interactive-demo","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-marketing-navbar","t":"Alqemist marketing navbar","d":"Responsive Alqemist marketing navbar with brand mark, product links, mobile menu, and conversion CTA.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-marketing-navbar","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-security","t":"Alqemist security","d":"Alqemist enterprise security block with interactive controls for isolation, credentials, auditability, and self-hosting.","k":"component","s":"21st","c":"other","g":"other","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-security","pc":"msjmohabali"},{"id":"21st:msjmohabali__alqemist-usp","t":"Alqemist usp","d":"Alqemist value proposition block pairing end-user workflow benefits with developer control.","k":"component","s":"21st","c":"other","g":"other","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/alqemist-usp","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-agent-status-pill","t":"Qreatify agent status pill","d":"Qreatify setup and agent status pill for ready, running, retry and error states.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-agent-status-pill","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-agent-template-card","t":"Qreatify agent template card","d":"Qreatify agent template card for 21st, Qreatify and operations agent presets.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-agent-template-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-builder-toolbar","t":"Qreatify builder toolbar","d":"Qreatify builder toolbar for preview, screens canvas, edit, code, cloud and tests modes.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-builder-toolbar","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-builder-topbar","t":"Qreatify builder topbar","d":"Qreatify builder topbar with project identity, toolbar, route bar, setup status and publish action.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-builder-topbar","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-chat-empty-state","t":"Qreatify chat empty state","d":"Qreatify chat side panel empty state for prompts, plans and chat-scoped automations.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-chat-empty-state","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-chat-rail","t":"Qreatify chat rail","d":"Compact Qreatify chat rail with new chat, prompts and automation panel actions.","k":"component","s":"21st","c":"navigation/sidebar","g":"navigation","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-chat-rail","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-composer-dock","t":"Qreatify composer dock","d":"Qreatify chat composer dock with suggestions, mode selector, tools, voice and send action.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-composer-dock","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-credit-summary-card","t":"Qreatify credit summary card","d":"Qreatify sidebar credit summary card for plan label, AI credits, integration credits and upgrade actions.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-credit-summary-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-home-action-card","t":"Qreatify home action card","d":"Qreatify homepage action card for create-from-framework and import-repository entry points.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-home-action-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-home-command-center","t":"Qreatify home command center","d":"Qreatify homepage command center with greeting, primary actions and prompt chips.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-home-command-center","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-preview-loading","t":"Qreatify preview loading","d":"Qreatify preview loading scene with browser skeleton, branded background and loading copy.","k":"component","s":"21st","c":"status/loader","g":"status","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-preview-loading","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-pricing-plan-card","t":"Qreatify pricing plan card","d":"Qreatify pricing plan card for subscription tiers, credit limits, highlights and upgrade CTAs.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-pricing-plan-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-project-app-card","t":"Qreatify project app card","d":"Qreatify project app card for recent apps, template shelves and workspace project lists.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-project-app-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-skill-registry-card","t":"Qreatify skill registry card","d":"Reusable skill registry card for installed workspace skills and skills.sh templates, with badges, command preview, light modal tone, status and actions.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-skill-registry-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-skill-start-card","t":"Qreatify skill start card","d":"Reusable start-from-scratch skill card for opening custom skill creation flows inside settings or registry pickers.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-skill-start-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-super-agent-card","t":"Qreatify super agent card","d":"Qreatify super agent card for project agents, triggers, tools, status and run action.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-super-agent-card","pc":"msjmohabali"},{"id":"21st:msjmohabali__qreatify-workspace-rail","t":"Qreatify workspace rail","d":"Qreatify workspace rail with app switcher, create action, navigation icons and utility actions.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/qreatify-workspace-rail","pc":"msjmohabali"},{"id":"21st:msjmohabali__resolvr-landing-system","t":"Resolvr landing system","d":"Resolvr branded SaaS landing page system with hero, product mockup, workflow cards, pricing, FAQ, CTA and footer sections.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/resolvr-landing-system","pc":"msjmohabali"},{"id":"21st:msjmohabali__resolvr-saas-system","t":"Resolvr saas system","d":"Resolvr branded SaaS dashboard component system with sidebar, conversations, contact panel, integrations, upload and premium overlay patterns.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/resolvr-saas-system","pc":"msjmohabali"},{"id":"21st:msjmohabali__resolvr-widget-system","t":"Resolvr widget system","d":"Resolvr branded customer support widget system with launcher, chat, inbox, voice, auth, contact, loading and error screens.","k":"component","s":"21st","c":"status/loader","g":"status","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/resolvr-widget-system","pc":"msjmohabali"},{"id":"21st:msjmohabali__whatsaas-app-shell","t":"Whatsaas app shell","d":"Reusable SaaS dashboard shell with sidebar navigation, header and workspace content area.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/whatsaas-app-shell","pc":"msjmohabali"},{"id":"21st:msjmohabali__whatsaas-chat-inbox","t":"Whatsaas chat inbox","d":"Reusable WhatsApp-style inbox component with chat list, conversation pane and CRM side panel.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/whatsaas-chat-inbox","pc":"msjmohabali"},{"id":"21st:msjmohabali__whatsaas-landing-hero","t":"Whatsaas landing hero","d":"Reusable WhatSaaS landing hero with SaaS product preview, CRM context and AI conversation signals.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/whatsaas-landing-hero","pc":"msjmohabali"},{"id":"21st:msjmohabali__whatsaas-landing-sections","t":"Whatsaas landing sections","d":"Reusable landing page sections for stats, use cases and testimonials in WhatsApp SaaS pages.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/whatsaas-landing-sections","pc":"msjmohabali"},{"id":"21st:msjmohabali__whatsaas-pricing-section","t":"Whatsaas pricing section","d":"Reusable SaaS pricing section with highlighted plan support and feature lists for WhatsApp products.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"msjmohabali","st":"indexed","pl":"https://21st.dev/@msjmohabali/components/whatsaas-pricing-section","pc":"msjmohabali"},{"id":"21st:mtorres6739__autoworks","t":"Autoworks","d":"Animated WebGL shader background in the Smoke style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). Features: cursor-reactive (repe","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mtorres6739","st":"indexed","pl":"https://cdn.21st.dev/mtorres6739/autoworks/default/preview.1786407321262-04175861-bfec-40ac-bb9f-08cbd6c73bf4.webp","pc":"mtorres6739"},{"id":"21st:mudasirshah9777__axis-blend-gradient","t":"Axis blend gradient","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#1D9657, #D1D1D1). Features: film grain. A drop-in, zero-dependency ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mudasirshah9777","st":"indexed","pl":"https://cdn.21st.dev/mudasirshah9777/axis-blend-gradient/default/preview.1786994758976-fd3fc6e8-f5f1-498b-9ef4-16d5c4929025.webp","pc":"mudasirshah9777"},{"id":"21st:muditgoel1512__ai-chat-bot","t":"Ai chat bot","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"muditgoel1512","st":"indexed","pl":"https://cdn.21st.dev/muditgoel1512/ai-chat-bot/default/preview.1764356110481.png","pc":"muditgoel1512"},{"id":"21st:muditgoel1512__sign-in-1","t":"Sign in 1","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"muditgoel1512","st":"indexed","pl":"https://cdn.21st.dev/user_2wiGZ0vADJpabTzFfCPXHPt0twL/sign-in-1/sign-in/preview.png","pc":"muditgoel1512"},{"id":"21st:muditgoel1512__text-flip-layout","t":"Text flip layout","d":"A modern dark-themed Text Flip Layout component featuring a smooth rotating word animation, glassy UI elements, and responsive layout design. Perfect for hero sections and landing ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"muditgoel1512","st":"indexed","pl":"https://cdn.21st.dev/muditgoel1512/text-flip-layout/default/preview.1764499363205.png","pc":"muditgoel1512"},{"id":"21st:muhammad-binsalman__3d-animated-mastercard-component","t":"3d animated mastercard component","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/3d-animated-mastercard-component/default/preview.1754567619452.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__3d-glass-shimmer-button","t":"3d glass shimmer button","d":"A premium React button component featuring a stunning 3D glass morphism design with animated shimmer effects. This component combines modern glassmorphism aesthetics with sophistic","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/3d-glass-shimmer-button/default/preview.1758338703486.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__3d-tic-tac-toe-weaving-loader","t":"3d tic tac toe weaving loader","d":"A mesmerizing React loading component that transforms the classic tic-tac-toe grid into a dynamic 3D weaving animation. This loader features four luminous threads that dance around","k":"component","s":"21st","c":"status/loader","g":"status","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/3d-tic-tac-toe-weaving-loader/default/preview.1758339368394.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ai-agent-workflow-visualization","t":"Ai agent workflow visualization","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/ai-agent-workflow-visualization/default/preview.1759488719366.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ai-animated-text-loader","t":"Ai animated text loader","d":"A beautiful, customizable React loading component featuring animated text with a rotating gradient background. Perfect for AI applications, data processing, or any modern web inter","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/ai-animated-text-loader/default/preview.1753790501049.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ai-grid-loader-animated-loading-component","t":"Ai grid loader animated loading component","d":"A modern, customizable 3x3 grid loading animation component built with React and Tailwind CSS. Features a sophisticated cube-scaling animation with staggered timing effects, perfec","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/ai-grid-loader-animated-loading-component/default/preview.1758338248264.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ai-marketing-hero-section","t":"Ai marketing hero section","d":"$34","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/ai-marketing-hero-section/default/preview.1756660296092.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ai-powered-creative-landing-hero","t":"Ai powered creative landing hero","d":"$37","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/ai-powered-creative-landing-hero/default/preview.1756497882600.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__airplane-ticket","t":"Airplane ticket","d":"a simple airplane ticket component for y'all to use, easy and clean UI ","k":"component","s":"21st","c":"other","g":"other","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/airplane-ticket/default/preview.1756211576873.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__animate-sparkle-toggle-with-magical-effects","t":"Animate sparkle toggle with magical effects","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/animate-sparkle-toggle-with-magical-effects/default/preview.1752650796853.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__animated-power-button","t":"Animated power button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/animated-power-button/default/preview.1756287130236.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__animated-scan-loader","t":"Animated scan loader","d":"A reusable React component styled with Tailwind CSS, featuring a dynamic \"Scan\" text effect with a futuristic scanning animation. The component includes a smooth hover color transi","k":"component","s":"21st","c":"status/loader","g":"status","a":"muhammad-binsalman","st":"indexed","u":18,"pl":"https://cdn.21st.dev/muhammad-binsalman/animated-scan-loader/default/preview.1756974654474.png","pc":"muhammad-binsalman","tg":["spinner"]},{"id":"21st:muhammad-binsalman__boxy-app-icons","t":"Boxy app icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/boxy-app-icons/default/preview.1756890672239.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__connect-with-us","t":"Connect with us","d":"a simple gradient connect with us section for your websites, cool icons with pretty funky animations ","k":"component","s":"21st","c":"actions/link","g":"actions","a":"muhammad-binsalman","st":"indexed","u":64,"pl":"https://cdn.21st.dev/muhammad-binsalman/connect-with-us/default/preview.1755528836513.png","pc":"muhammad-binsalman","tg":["link"]},{"id":"21st:muhammad-binsalman__discovery-saa-s-hero-section","t":"Discovery saa s hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/discovery-saa-s-hero-section/default/preview.1757974100098.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__dynamic-gallery-hero","t":"Dynamic gallery hero","d":"A unique, interactive component for creating stunning 3D carousels with a circular bending effect. Built with OGL and React, this component features smooth, hardware-accelerated an","k":"component","s":"21st","c":"media/gallery","g":"media","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/dynamic-gallery-hero/default/preview.1758128312886.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__ethereal-beams-hero","t":"Ethereal beams hero","d":"*A mesmerizing hero section featuring animated 3D light beams with glassmorphic navigation. Perfect for modern SaaS, creative agencies, and tech startups looking to make a bold fir","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","u":386,"pl":"https://cdn.21st.dev/muhammad-binsalman/ethereal-beams-hero/default/preview.1785359183139-42fb642f-ffae-47ec-9842-328b2fbc9fe7.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__finance-card","t":"Finance card","d":"a simple yet easy to use finance card, built using tailwind, with dark and light modes and cool modern aesthetic UI","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/finance-card/default/preview.1756373171318.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__flux-card-hero","t":"Flux card hero","d":"FluxCardHero is a dynamic, interactive hero section component that showcases multiple AI platform features through an innovative layered card animation system. The component featur","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","u":33,"pl":"https://cdn.21st.dev/muhammad-binsalman/flux-card-hero/default/preview.1756725019731.png","pc":"muhammad-binsalman","tg":["ai-chat","carousel","hero"]},{"id":"21st:muhammad-binsalman__futuristic-card-component","t":"Futuristic card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/futuristic-card-component/default/preview.1758108034670.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__galaxy-hero-section","t":"Galaxy hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/galaxy-hero-section/default/preview.1753558609016.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__glassmorphic-features-grid","t":"Glassmorphic features grid","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/glassmorphic-features-grid/default/preview.1752831269467.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__glassmorphic-testimonials-card","t":"Glassmorphic testimonials card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/glassmorphic-testimonials-card/default/preview.1757503441436.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__glassmorphic-wallet-card","t":"Glassmorphic wallet card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/glassmorphic-wallet-card/default/preview.1759142884242.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__gothic-matrix-hero","t":"Gothic matrix hero","d":"$35","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/gothic-matrix-hero/default/preview.1753101134780.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__i-phone-ui-component","t":"I phone ui component","d":"A sleek and interactive 3D iPhone UI component, meticulously crafted with React and Tailwind CSS. It features a realistic phone body with subtle depth, a dynamic island, and a simu","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/i-phone-ui-component/default/preview.1754559606613.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__light-saas-hero-section","t":"Light saas hero section","d":"A modern, light-themed hero section featuring an interactive plasma background, glassmorphic pill-shaped navigation bar, and compelling AI SaaS value proposition. This component co","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","u":32,"pl":"https://cdn.21st.dev/muhammad-binsalman/light-saas-hero-section/default/preview.1785434543513-3616183e-9b6f-48be-abaf-9cac7d29915d.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__luxury-elegance-button","t":"Luxury elegance button","d":"$38","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/luxury-elegance-button/default/preview.1755726504757.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__magic-keyboard-component","t":"Magic keyboard component","d":"A sleek, responsive keyboard component built with React and Tailwind CSS that replicates the look and feel of a physical keyboard. This component features Lucide React icons for ar","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/magic-keyboard-component/default/preview.1757501755926.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__minimalistic-pill-glasmorphic-navbar","t":"Minimalistic pill glasmorphic navbar","d":"A simple and minimalistic pill shaped glasmorphic navbar made in tailwind css, simple yet useful for websites with minimalistic look","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/minimalistic-pill-glasmorphic-navbar/default/preview.1757507548666.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__neon-quest-hero-section","t":"Neon quest hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/neon-quest-hero-section/default/preview.1757161879186.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__neural-dawn-ai-hero","t":"Neural dawn ai hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/neural-dawn-ai-hero/default/preview.1758121496157.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__premium-testimonials-section","t":"Premium testimonials section","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/premium-testimonials-section/default/preview.1758397558419.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__quantam-mysh-hero","t":"Quantam mysh hero","d":"A sleek, futuristic hero section component inspired by an AI studio landing page design. It features a dark theme with purple gradients, a badge-style tagline, bold headlines, subt","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"muhammad-binsalman","st":"indexed","u":35,"pl":"https://cdn.21st.dev/muhammad-binsalman/quantam-mysh-hero/default/preview.1756712951228.png","pc":"muhammad-binsalman","tg":["marquee"]},{"id":"21st:muhammad-binsalman__rainbow-borders-button","t":"Rainbow borders button","d":"A stunning button component featuring an animated rainbow gradient border with a sleek dark gradient background. The rainbow border cycles through vibrant colors with a smooth anim","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"muhammad-binsalman","st":"indexed","u":252,"pl":"https://cdn.21st.dev/muhammad-binsalman/rainbow-borders-button/default/preview.1754474690576.png","pc":"muhammad-binsalman","tg":["border"]},{"id":"21st:muhammad-binsalman__red-raven-saas-hero","t":"Red raven saas hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/red-raven-saas-hero/default/preview.1756503126019.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__shiny-borders-button","t":"Shiny borders button","d":"Shiny Borders Button is a modern, visually rich React component styled with Tailwind CSS. It features a soft inner glow, a radial gradient background, and dynamic green + white lig","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"muhammad-binsalman","st":"indexed","u":49,"pl":"https://cdn.21st.dev/muhammad-binsalman/shiny-borders-button/default/preview.1752146981868.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__shiny-button","t":"Shiny button","d":"A beautiful, animated, and theme-aware circular button component built with Tailwind CSS. Includes hover effects, rotating transitions, gradient overlays, and support for custom ic","k":"component","s":"21st","c":"actions/link","g":"actions","a":"muhammad-binsalman","st":"indexed","u":41,"pl":"https://cdn.21st.dev/muhammad-binsalman/shiny-button/default/preview.1752143778341.png","pc":"muhammad-binsalman","tg":["link"]},{"id":"21st:muhammad-binsalman__shiny-button-1","t":"Shiny button 1","d":"this is a really cool shiny button with dotted bg and a hover bg glow with multiple layers","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","u":100,"pl":"https://cdn.21st.dev/muhammad-binsalman/shiny-button-1/default/preview.1755446108769.png","pc":"muhammad-binsalman","tg":["button"]},{"id":"21st:muhammad-binsalman__spider-verse-glitch-button","t":"Spider verse glitch button","d":"A cyberpunk-inspired animated button with glitch effects reminiscent of the Spider-Verse aesthetic. Features multi-layered glitch animations, color shifting, scanning lines, and no","k":"component","s":"21st","c":"status/loader","g":"status","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/spider-verse-glitch-button/default/preview.1753100248648.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__spotify-style-music-player-component","t":"Spotify style music player component","k":"component","s":"21st","c":"media/player","g":"media","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/spotify-style-music-player-component/default/preview.1758337515660.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__star-button","t":"Star button","d":"A simple yellow star button with hover animations, useful for starring items or adding the in favourites/wishlist. SAVE IT FOR LATER","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/star-button/default/preview.1755530522155.png","pc":"muhammad-binsalman","tg":["button"]},{"id":"21st:muhammad-binsalman__stardust-button","t":"Stardust button","d":"A premium pearl-finish button with celestial star animations and glass morphism effects. Features smooth hover transitions between star symbols (✧ ↔ ✦) and satisfying tactile press","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"muhammad-binsalman","st":"indexed","u":62,"pl":"https://cdn.21st.dev/muhammad-binsalman/stardust-button/default/preview.1753787766958.png","pc":"muhammad-binsalman","tg":["cta"]},{"id":"21st:muhammad-binsalman__swipe-footer-component","t":"Swipe footer component","d":"$34","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/swipe-footer-component/default/preview.1758398396456.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__swipe-lead-generation-hero-section","t":"Swipe lead generation hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/swipe-lead-generation-hero-section/default/preview.1758396203757.png","pc":"muhammad-binsalman"},{"id":"21st:muhammad-binsalman__the-blueprint-of-digital-craft","t":"The blueprint of digital craft","d":"In a world of cookie-cutter templates, we return to the fundamentals of great design. At Mysh, we treat every digital project like a custom build, combining the precision of a geom","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/the-blueprint-of-digital-craft/default/preview.1770234766798.png","pc":"muhammad-binsalman","tg":["cta"]},{"id":"21st:muhammad-binsalman__vertical-volume-slider-with-mute-toggle","t":"Vertical volume slider with mute toggle","d":"A sleek vertical volume control component featuring a rotated range slider with smooth visual feedback. Includes an interactive volume icon that toggles between normal and muted st","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"muhammad-binsalman","st":"indexed","pl":"https://cdn.21st.dev/muhammad-binsalman/vertical-volume-slider-with-mute-toggle/default/preview.1752649961719.png","pc":"muhammad-binsalman","tg":["slider"]},{"id":"21st:muhammad-binsalman__waitlist-landing-page-with-countdown-timer","t":"Waitlist landing page with countdown timer","d":"A sleek waitlist component featuring a mesmerizing ethereal beam background, countdown timer, and social proof indicators. Perfect for product launches, beta releases, or early acc","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"muhammad-binsalman","st":"indexed","u":107,"pl":"https://cdn.21st.dev/muhammad-binsalman/waitlist-landing-page-with-countdown-timer/default/preview.1757590476421.png","pc":"muhammad-binsalman","tg":["avatar"]},{"id":"21st:muhammad-binsalman__wooden-cart-button","t":"Wooden cart button","d":"A  simple minimalistic Add To Cart button for ecommerce applications, made with tailwind css ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"muhammad-binsalman","st":"indexed","u":6,"pl":"https://cdn.21st.dev/muhammad-binsalman/wooden-cart-button/default/preview.1756884278121.png","pc":"muhammad-binsalman","tg":["button"]},{"id":"21st:muhammad-binsalman__yield-card","t":"Yield card","d":"A sleek, modern card component featuring a gradient border effect and analytics icon, perfect for your applications. The component showcases mutual funds return with a dark theme, ","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"muhammad-binsalman","st":"indexed","u":35,"pl":"https://cdn.21st.dev/muhammad-binsalman/yield-card/default/preview.1754565671619.png","pc":"muhammad-binsalman","tg":["border","features"]},{"id":"21st:muhammetbilgin__ai-chat-sheet","t":"Ai chat sheet","d":"AI Chat Sheet is a mock design for a responsive AI assistant panel. It showcases an interactive interface with quick action buttons, model selection, and a chat input, giving a rea","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"muhammetbilgin","st":"indexed","pl":"https://cdn.21st.dev/muhammetbilgin/ai-chat-sheet/default/preview.1760560087424.png","pc":"muhammetbilgin"},{"id":"21st:muhammetbilgin__cosmic-404","t":"Cosmic 404","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"muhammetbilgin","st":"indexed","pl":"https://cdn.21st.dev/muhammetbilgin/cosmic-404/default/preview.1759784630386.png","pc":"muhammetbilgin","tg":["globe"]},{"id":"21st:muneebable__comparison","t":"Comparison","d":"Reusable comparison component for showcasing time/efficiency differences between two solutions. Features customizable cards with step-by-step breakdowns, animated reveals, and a cl","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"muneebable","st":"indexed","pl":"https://cdn.21st.dev/muneebable/comparison/default/preview.1761130927204.png","pc":"muneebable"},{"id":"21st:muneebable__feature-card-with-video","t":"Feature card with video","d":"A modern, interactive feature card component with video preview capabilities, designed for showcasing product features, services, or content in an engaging way.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muneebable","st":"indexed","pl":"https://cdn.21st.dev/muneebable/feature-card-with-video/default/preview.1761132146501.png","pc":"muneebable"},{"id":"21st:muneebable__video-show-case-card","t":"Video show case card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"muneebable","st":"indexed","pl":"https://cdn.21st.dev/muneebable/video-show-case-card/default/preview.1761129700024.png","pc":"muneebable"},{"id":"21st:muntasirszn__input","t":"Input","d":"GSAP Recreation Of Aceternity UI's Signup Form Components Input Components","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"muntasirszn","st":"indexed","u":51,"pl":"https://cdn.21st.dev/muntasirszn/input/default/preview.1747577728736.png","pc":"muntasirszn","tg":["input"]},{"id":"21st:mvp_Subha__button-github","t":"Button github","d":"Here is Github Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mvp_Subha","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-github/default/preview.1753381081140.png","pc":"mvp_Subha","tg":["button"]},{"id":"21st:mvp_Subha__button-hover","t":"Button hover","d":"Here is Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"mvp_Subha","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-hover/default/preview.1753381349431.png","pc":"mvp_Subha"},{"id":"21st:mvp_Subha__footer-column","t":"Footer column","d":"Here is Footer component","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"mvp_Subha","st":"indexed","u":324,"pl":"https://cdn.21st.dev/larsen66/footer-column/default/preview.1753389294747.png","pc":"mvp_Subha","tg":["footer","link"]},{"id":"21st:mvp_Subha__loader","t":"Loader","d":"Here is Loader component","k":"component","s":"21st","c":"status/loader","g":"status","a":"mvp_Subha","st":"indexed","pl":"https://cdn.21st.dev/larsen66/loader/default/preview.1753381536233.png","pc":"mvp_Subha","tg":["spinner"]},{"id":"21st:mvp_Subha__pulsating-loader","t":"Pulsating loader","d":"Here is Pulsating Loader component","k":"component","s":"21st","c":"status/loader","g":"status","a":"mvp_Subha","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pulsating-loader/default/preview.1753381821369.png","pc":"mvp_Subha","tg":["spinner"]},{"id":"21st:mvp_Subha__terms-conditions","t":"Terms conditions","d":"Here is Terms & Conditions dialog","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"mvp_Subha","st":"indexed","u":51,"pl":"https://cdn.21st.dev/larsen66/terms-conditions/default/preview.1753383704974.png","pc":"mvp_Subha","tg":["alert","checkbox","modal","scroll-area"]},{"id":"21st:mwdesignhelp__plasma-shader","t":"Plasma shader","d":"Animated WebGL2 plasma effect with cosine palette color cycling. GPU-rendered retro demoscene plasma — zero dependencies, pure React + GLSL. Props: speed (animation multiplier).","k":"component","s":"21st","c":"motion/background","g":"motion","a":"mwdesignhelp","st":"indexed","pl":"https://cdn.21st.dev/mwdesignhelp/plasma-shader/default/preview.1774113022891.png","pc":"mwdesignhelp"},{"id":"21st:mxmmad17__bg","t":"Bg","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#EBF9FF, #57D2F4, #1B6AA7, #031C26). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"mxmmad17","st":"indexed","pl":"https://cdn.21st.dev/mxmmad17/bg/default/preview.1786704917947-0f31e292-9df8-498f-a68c-31f5b4df98fd.webp","pc":"mxmmad17"},{"id":"21st:n03936827__aryan-blue","t":"Aryan blue","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#EBF9FF, #57D2F4, #1B6AA7, #031C26). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"n03936827","st":"indexed","pl":"https://cdn.21st.dev/n03936827/aryan-blue/default/preview.1785061555569-d914e19e-e2cf-4b2e-9324-b4bf4a9b75ae.webp","pc":"n03936827"},{"id":"21st:n03936827__silk-blend-gradient","t":"Silk blend gradient","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#F7F3FF, #083DA9, #02006F, #000000). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"n03936827","st":"indexed","pl":"https://cdn.21st.dev/n03936827/silk-blend-gradient/default/preview.1785056156354-1d2f08fd-703d-49cb-b8e5-41c416199fd5.webp","pc":"n03936827"},{"id":"21st:n38693842__3d-card","t":"3d card","d":"this is the card with 3d animation.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","u":33,"pl":"https://cdn.21st.dev/n38693842/3d-card/default/preview.1760530951773.png","pc":"n38693842","tg":["card","image"]},{"id":"21st:n38693842__ai-button","t":"Ai button","d":"This is the button with cool animation on hovering you can directly use this for generation button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/ai-button/default/preview.1759756047087.png","pc":"n38693842"},{"id":"21st:n38693842__alarm-card","t":"Alarm card","d":"This is the card with having week days you can use this for alarm like things with his cool animation.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/alarm-card/default/preview.1759756241452.png","pc":"n38693842"},{"id":"21st:n38693842__animated-badge","t":"Animated badge","d":"This is the animated badge u can use for you website having different animation.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/animated-badge/default/preview.1761060996904.png","pc":"n38693842"},{"id":"21st:n38693842__animated-button","t":"Animated button","d":"This is the animated button with hover star animation","k":"component","s":"21st","c":"actions/button","g":"actions","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/animated-button/default/preview.1760640437779.png","pc":"n38693842"},{"id":"21st:n38693842__animated-card","t":"Animated card","d":"This is the hover animated card with cool animation.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","u":16,"pl":"https://cdn.21st.dev/n38693842/animated-card/default/preview.1760641977490.png","pc":"n38693842"},{"id":"21st:n38693842__animated-card-1","t":"Animated card 1","d":"This is the animated card having hover animation on the element in the card.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/animated-card-1/default/preview.1761061705556.png","pc":"n38693842"},{"id":"21st:n38693842__animated-progress-bar","t":"Animated progress bar","d":"Progress bar with cool animation you can use in your project","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/animated-progress-bar/default/preview.1757702933700.png","pc":"n38693842"},{"id":"21st:n38693842__bg-animation","t":"Bg animation","d":"Particles animation in the background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/bg-animation/default/preview.1757705667069.png","pc":"n38693842"},{"id":"21st:n38693842__card-animation","t":"Card animation","d":"This is the card animation in which by using navigation button card appears with smooth and ux friendly animation","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/card-animation/default/preview.1760721754315.png","pc":"n38693842"},{"id":"21st:n38693842__download-animation","t":"Download animation","d":"This is the download animation which is beautifully crafted you can use directly.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/download-animation/default/preview.1758486933610.png","pc":"n38693842"},{"id":"21st:n38693842__gallery-animation","t":"Gallery animation","d":"this is the gallery animation on hover pics are expended with smooth animation","k":"component","s":"21st","c":"media/gallery","g":"media","a":"n38693842","st":"indexed","u":90,"pl":"https://cdn.21st.dev/n38693842/gallery-animation/default/preview.1760722642799.png","pc":"n38693842","tg":["gallery"]},{"id":"21st:n38693842__hero-section","t":"Hero section","d":"this is the hero section which having small animation","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/hero-section/default/preview.1757434346814.png","pc":"n38693842"},{"id":"21st:n38693842__hero-section-1","t":"Hero section 1","d":"This is the minimal but ux friendly hero section with small and cool animations.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"n38693842","st":"indexed","u":22,"pl":"https://cdn.21st.dev/n38693842/hero-section-1/default/preview.1760291009178.png","pc":"n38693842","tg":["badge","cta","hero"]},{"id":"21st:n38693842__lens-card","t":"Lens card","d":"card with having lens effect in the img. you can directly use this thing.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/lens-card/default/preview.1757703489722.png","pc":"n38693842"},{"id":"21st:n38693842__loading","t":"Loading","d":"this is the loading animation which will out of the box looking and ux friendly animation.","k":"component","s":"21st","c":"status/loader","g":"status","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/loading/default/preview.1757437710704.png","pc":"n38693842"},{"id":"21st:n38693842__loading-animation","t":"Loading animation","d":"This is the cool and animated loading which you can use for aesthetics.","k":"component","s":"21st","c":"status/loader","g":"status","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/loading-animation/default/preview.1761978052194.png","pc":"n38693842"},{"id":"21st:n38693842__loading-balls","t":"Loading balls","d":"this is bouncing balls animation anyone can use this as their loader or represent thinking of modal or agent.","k":"component","s":"21st","c":"status/loader","g":"status","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/loading-balls/default/preview.1758486287329.png","pc":"n38693842"},{"id":"21st:n38693842__mac-os-dock","t":"Mac os dock","d":"MacOS dock smooth animation you can use","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/user_31xiWFWGCT7hUJEfSU5KG2zqd2n/mac-os-dock/default/preview.1785528163965.png","pc":"n38693842","tg":["dock","navigation-menu"]},{"id":"21st:n38693842__pricing-cards","t":"Pricing cards","d":"This is the pricing card with smooth and ux friendly animation with card and button","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/pricing-cards/default/preview.1761888671327.png","pc":"n38693842"},{"id":"21st:n38693842__process-task","t":"Process task","d":"This is the click animation on the button according to the type of loading with full process","k":"component","s":"21st","c":"status/loader","g":"status","a":"n38693842","st":"rated","pl":"https://cdn.21st.dev/n38693842/process-task/default/preview.1760727169354.png","pc":"n38693842","sc":21},{"id":"21st:n38693842__rays-card-animation","t":"Rays card animation","d":"This is the animated card having cool animation of rays","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/rays-card-animation/default/preview.1760724138625.png","pc":"n38693842"},{"id":"21st:n38693842__ripple-button","t":"Ripple button","d":"this is the ripple style animated button you can use making good ux","k":"component","s":"21st","c":"media/icon","g":"media","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/ripple-button/default/preview.1759638143508.png","pc":"n38693842"},{"id":"21st:n38693842__text-animation","t":"Text animation","d":"This is the text letter animation of hovering on the text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/text-animation/default/preview.1761062742649.png","pc":"n38693842"},{"id":"21st:n38693842__user-authentication-card","t":"User authentication card","d":"User authentication card having border animation and button animation. one card with register or login both.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/user-authentication-card/default/preview.1757704674822.png","pc":"n38693842"},{"id":"21st:n38693842__website-preview","t":"Website preview","d":"This is the hover animation of the webpage preview.","k":"component","s":"21st","c":"other","g":"other","a":"n38693842","st":"indexed","pl":"https://cdn.21st.dev/n38693842/website-preview/default/preview.1760723289401.png","pc":"n38693842"},{"id":"21st:nakulgupta2004__amazing-header","t":"Amazing header","d":"some attractive header going over here ","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"nakulgupta2004","st":"indexed","pl":"https://cdn.21st.dev/user_2x8Kl1Kxukzq2rrqZETp4Hcxj3t/amazing-header/nexus-the-ultima/preview.png","pc":"nakulgupta2004"},{"id":"21st:namanbansal580__3d-globe-animated","t":"3d globe animated","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"namanbansal580","st":"indexed","pl":"https://cdn.21st.dev/namanbansal580/3d-globe-animated/default/preview.1747256781704.png","pc":"namanbansal580"},{"id":"21st:namanbansal580__animated-feature-cards","t":"Animated feature cards","d":"Animated feature cards are interactive UI components that highlight key features or services of a product using motion effects. They typically include an icon or image, a title, an","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"namanbansal580","st":"indexed","pl":"https://cdn.21st.dev/namanbansal580/animated-feature-cards/default/preview.1747255279609.png","pc":"namanbansal580"},{"id":"21st:namanbansal580__neon-sign-in","t":"Neon sign in","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"namanbansal580","st":"indexed","pl":"https://cdn.21st.dev/namanbansal580/neon-sign-in/default/preview.1747255435067.png","pc":"namanbansal580"},{"id":"21st:nayan_radadiya6__first-place-leaderboard","t":"First place leaderboard","d":"Here is First Place Leaderboard component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"nayan_radadiya6","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/first-place-leaderboard/default/preview.1756569312329.png","pc":"nayan_radadiya6","tg":["badge","avatar","card","profile"]},{"id":"21st:nayan_radadiya6__kpi-card","t":"Kpi card","d":"Here is KPI card component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"nayan_radadiya6","st":"indexed","u":52,"pl":"https://cdn.21st.dev/larsen66/kpi-card/default/preview.1756507642594.png","pc":"nayan_radadiya6","tg":["dashboard","stat"]},{"id":"21st:nayan_radadiya6__pricing-card-triple","t":"Pricing card triple","d":"Here is Pricing Card Triple  component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"nayan_radadiya6","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pricing-card-triple/default/preview.1756507463262.png","pc":"nayan_radadiya6","tg":["icon","pricing-section","table"]},{"id":"21st:nayan_radadiya6__pricing-cart-duo","t":"Pricing cart duo","d":"Here is Pricing Cart Duo component","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"nayan_radadiya6","st":"indexed","pl":"https://cdn.21st.dev/larsen66/pricing-cart-duo/default/preview.1756507381885.png","pc":"nayan_radadiya6","tg":["badge","pricing-section","table"]},{"id":"21st:nayan_radadiya6__testimonial","t":"Testimonial","d":"Here is Testimonial component","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"nayan_radadiya6","st":"indexed","pl":"https://cdn.21st.dev/larsen66/testimonial/default/preview.1756507308456.png","pc":"nayan_radadiya6","tg":["carousel","testimonials"]},{"id":"21st:nayan_radadiya6__timeline-rail","t":"Timeline rail","d":"Here is Timeline Rail component","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"nayan_radadiya6","st":"indexed","u":41,"pl":"https://cdn.21st.dev/larsen66/timeline-rail/default/preview.1756507139925.png","pc":"nayan_radadiya6","tg":["progress","steps","timeline"]},{"id":"21st:nblairwalker__m-ascii","t":"M ascii","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a monochrome look. A drop-in, zero-dependency Re","k":"component","s":"21st","c":"media/player","g":"media","a":"nblairwalker","st":"indexed","pl":"https://cdn.21st.dev/nblairwalker/m-ascii/default/preview.1784407905435-6a191e5a-1813-4848-b651-845713524aab.webp","pc":"nblairwalker","tg":["video"]},{"id":"21st:nblairwalker__n-ascii","t":"N ascii","d":"Animated (shimmer) ASCII art in the Hex Dump style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a terminal look. A drop-in, zero-dependency React ","k":"component","s":"21st","c":"media/player","g":"media","a":"nblairwalker","st":"indexed","pl":"https://cdn.21st.dev/nblairwalker/n-ascii/default/preview.1784407861848-26571f2c-6998-44aa-bb31-98b5e16c6df9.webp","pc":"nblairwalker","tg":["video"]},{"id":"21st:nblairwalker__nm","t":"Nm","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a minimal, terminal look. A drop-in, zero-depend","k":"component","s":"21st","c":"media/player","g":"media","a":"nblairwalker","st":"indexed","pl":"https://cdn.21st.dev/nblairwalker/nm/default/preview.1784407954705-d96bade1-8911-4907-809c-bebc6b7b24f0.webp","pc":"nblairwalker","tg":["video"]},{"id":"21st:ncdai__apple-hello-effect","t":"Apple hello effect","d":"Create a \"Hello\" writing effect inspired by Apple using Motion for React.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ncdai","st":"indexed","u":215,"pl":"https://cdn.21st.dev/ncdai/apple-hello-effect/default/preview.1748432446616.png","pc":"ncdai","tg":["text"]},{"id":"21st:ncdai__brand-assets-menu","t":"Brand assets menu","d":"Right-click context menu for copying a brand's logomark and logotype as SVG and opening brand guideline and asset download links.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/brand-assets-menu/default/preview.1785524969962-ec62ed6e-f7f9-4c3e-82bc-b0b32a89ad7f.png","pc":"ncdai"},{"id":"21st:ncdai__chevrons-up-down-icon","t":"Chevrons up down icon","d":"Animated chevrons icon that morphs between up and down directions on trigger.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/chevrons-up-down-icon/default/preview.1784758281479-6245edbb-a201-409f-acad-0fee6e7a72ca.png","pc":"ncdai"},{"id":"21st:ncdai__hello-apple-style","t":"Hello apple style","d":"Here is Hello Apple style component","k":"component","s":"21st","c":"other","g":"other","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hello-apple-style/default/preview.1756729066010.png","pc":"ncdai"},{"id":"21st:ncdai__hero-01","t":"Hero 01","d":"A marketing hero section with a golden spiral background, headline, call-to-action buttons, and a tech-stack logo row.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ncdai","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ncdai/hero-01/default/preview.1783679828361.png","pc":"ncdai","tg":["cta","hero"]},{"id":"21st:ncdai__icon-swap","t":"Icon swap","d":"Animate swapping between icons with scale, blur, and fade transitions when the active icon changes.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/icon-swap/default/preview.1784759530839-ffb8faa1-805f-4b2e-83b2-9c4fd01ce016.png","pc":"ncdai"},{"id":"21st:ncdai__middle-truncation","t":"Middle truncation","d":"A text component that truncates long strings in the middle with an ellipsis, preserving the start and end while auto-recalculating on container resize.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/middle-truncation/default/preview.1784705310203-5c5bd481-3b1f-4664-a449-49c1b2e17959.png","pc":"ncdai"},{"id":"21st:ncdai__mobius-loop-icon","t":"Mobius loop icon","d":"Animated SVG icon that continuously morphs between two circles and an infinity shape.","k":"component","s":"21st","c":"media/icon","g":"media","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/mobius-loop-icon/default/preview.1784758509842-024297c4-558b-4846-a3fe-93587223f2f8.png","pc":"ncdai","tg":["icon"]},{"id":"21st:ncdai__spinning-circular-text","t":"Spinning circular text","d":"Text arranged in a circle with a continuous spinning animation, with adjustable character spacing and font size.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ncdai","st":"indexed","pl":"https://cdn.21st.dev/ncdai/spinning-circular-text/default/preview.1784703017247-68e8df17-37cd-4fca-8398-5e7a7bf09652.png","pc":"ncdai"},{"id":"21st:ncdai__testimonial","t":"Testimonial","d":"A composable testimonial card for displaying user feedback with a quote, author name, avatar with ring, tagline, and verified badge.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ncdai","st":"indexed","u":5,"pl":"https://cdn.21st.dev/ncdai/testimonial/default/preview.1784460661754-a0005e0f-7c7c-4496-bf62-7923f5b79751.png","pc":"ncdai","tg":["profile","testimonials"]},{"id":"21st:ncdai__testimonial-2","t":"Testimonial 2","d":"A testimonial quote block with a serif pull-quote, author name, tagline, and a link to the source.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ncdai","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ncdai/testimonial-2/default/preview.1784432011538-dd098c63-30c7-46d8-a97c-1c0ec51e5c4d.png","pc":"ncdai","tg":["testimonials"]},{"id":"21st:ncdai__theme-switcher-1","t":"Theme switcher 1","d":"Here is Theme Switcher component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ncdai","st":"indexed","u":38,"pl":"https://cdn.21st.dev/larsen66/theme-switcher-1/default/preview.1756728825114.png","pc":"ncdai","tg":["toggle"]},{"id":"21st:ncdai__wheel-picker","t":"Wheel picker","d":"iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ncdai","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ncdai/wheel-picker/default/preview.1748433378520.png","pc":"ncdai","tg":["scroll-area"]},{"id":"21st:neelvp2004__navabar","t":"Navabar","d":"A clean navbar that looks invisible at the top and smoothly turns into a blurred bar when you scroll down. The text stays white and doesn’t move or change size.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"neelvp2004","st":"indexed","pl":"https://cdn.21st.dev/neelvp2004/navabar/default/preview.1757604336707.png","pc":"neelvp2004"},{"id":"21st:nellycyberpro__maomao","t":"Maomao","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a crt, cyberpunk, monochrome look. A drop-in, zero-d","k":"component","s":"21st","c":"media/player","g":"media","a":"nellycyberpro","st":"indexed","pl":"https://cdn.21st.dev/nellycyberpro/maomao/default/preview.1784575257508-79d1648c-51b1-403a-a5e1-ded4b4e6f34e.webp","pc":"nellycyberpro","tg":["video"]},{"id":"21st:nelwincatalogo__x-scroll","t":"X scroll","d":"Responsive Horizontal Scroll Area","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"nelwincatalogo","st":"indexed","u":67,"pl":"https://cdn.21st.dev/user_2rtF7GBob1asfHOFfd2LxOZyMAT/x-scroll/default/preview.png","pc":"nelwincatalogo","tg":["scroll-area"]},{"id":"21st:netaji9850__border-beam-button","t":"Border beam button","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"netaji9850","st":"indexed","pl":"https://cdn.21st.dev/netaji9850/border-beam-button/default/preview.1764890621469.png","pc":"netaji9850"},{"id":"21st:netaji9850__glowing-chat-input","t":"Glowing chat input","d":"A glowing chat input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"netaji9850","st":"indexed","pl":"https://cdn.21st.dev/netaji9850/glowing-chat-input/default/preview.1764891715973.png","pc":"netaji9850"},{"id":"21st:netaji9850__rainbow-sidebar","t":"Rainbow sidebar","d":"A simple rainbow sidebar","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"netaji9850","st":"indexed","pl":"https://cdn.21st.dev/netaji9850/rainbow-sidebar/default/preview.1764914757573.png","pc":"netaji9850"},{"id":"21st:nevsky118__footer","t":"Footer","d":"Footer","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"nevsky118","st":"indexed","u":1284,"pl":"https://cdn.21st.dev/user_nevsky118/footer/default/preview.png","pc":"nevsky118","tg":["footer","link","navigation-menu"]},{"id":"21st:nevsky118__not-found","t":"Not found","d":"Not found page 05","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"nevsky118","st":"indexed","pl":"https://cdn.21st.dev/user_nevsky118/not-found/default/preview.1738157638216.png","pc":"nevsky118","tg":["button","empty-state","search"]},{"id":"21st:neweartheconomy__iris","t":"Iris","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"neweartheconomy","st":"indexed","pl":"https://cdn.21st.dev/neweartheconomy/iris/default/preview.1785289842168-6445ebd3-e286-4b8b-8b59-d261c7f825ea.webp","pc":"neweartheconomy"},{"id":"21st:nextjsshop__animated-arrow-button","t":"Animated arrow button","d":"A playful button with a minimal dotted-arrow animation that gives a quirky \"plop\" effect. Designed for fun, experimental, or creative interfaces, it adds a touch of humor and uniqu","k":"component","s":"21st","c":"actions/button","g":"actions","a":"nextjsshop","st":"indexed","u":61,"pl":"https://cdn.21st.dev/nextjsshop/animated-arrow-button/default/preview.1756659517971.png","pc":"nextjsshop","tg":["button"]},{"id":"21st:nextjsshop__arrow-dots-button","t":"Arrow dots button","d":"A sleek button featuring an animated dotted arrow, ideal for navigation or call-to-action elements. Its minimal design and smooth motion make it perfect for modern interfaces that ","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"nextjsshop","st":"indexed","u":90,"pl":"https://cdn.21st.dev/nextjsshop/arrow-dots-button/default/preview.1756717047899.png","pc":"nextjsshop","tg":["cta"]},{"id":"21st:nextjsshop__file-upload","t":"File upload","d":"A drag-and-drop file upload component with support for images, documents, and PDFs. It features a clean card-style design, making it easy to integrate into forms, dashboards, or fi","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/nextjsshop/file-upload/default/preview.1756720233675.png","pc":"nextjsshop","tg":["upload-download"]},{"id":"21st:nextjsshop__filter-chips-breadcrumb","t":"Filter chips breadcrumb","d":"A filter bar component that displays active filters as removable chips with a clear-all option. Ideal for e-commerce, dashboards, and search interfaces, it helps users easily manag","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"nextjsshop","st":"indexed","u":28,"pl":"https://cdn.21st.dev/nextjsshop/filter-chips-breadcrumb/default/preview.1756724211140.png","pc":"nextjsshop","tg":["chip"]},{"id":"21st:nextjsshop__icon-accordion","t":"Icon accordion","d":"An accordion component with icons, titles, and descriptions for each section. Ideal for organizing content, features, or settings into collapsible panels, making information easy t","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"nextjsshop","st":"indexed","u":27,"pl":"https://cdn.21st.dev/nextjsshop/icon-accordion/default/preview.1756722427586.png","pc":"nextjsshop","tg":["accordion"]},{"id":"21st:nextjsshop__nextjsshop-button","t":"Nextjsshop button","d":"A versatile button component that supports different styles, sizes, and states. It can be used for primary actions, secondary actions, and interactive UI elements while maintaining","k":"component","s":"21st","c":"actions/button","g":"actions","a":"nextjsshop","st":"indexed","u":59,"pl":"https://cdn.21st.dev/nextjsshop/nextjsshop-button/default/preview.1756641923089.png","pc":"nextjsshop"},{"id":"21st:nextjsshop__pixel-broke-button","t":"Pixel broke button","d":"A glitchy pixel-styled button that mimics a broken or distorted look. Ideal for creative projects, retro game UIs, or playful error states, it adds a unique visual effect that stan","k":"component","s":"21st","c":"actions/button","g":"actions","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/nextjsshop/pixel-broke-button/default/preview.1756658714410.png","pc":"nextjsshop"},{"id":"21st:nextjsshop__pixel-button","t":"Pixel button","d":"A retro-styled button inspired by classic pixel art and arcade games. Perfect for projects with a nostalgic or playful theme, it combines blocky aesthetics with interactive functio","k":"component","s":"21st","c":"actions/button","g":"actions","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/nextjsshop/pixel-button/default/preview.1756642572674.png","pc":"nextjsshop"},{"id":"21st:nextjsshop__sneaky-button","t":"Sneaky button","d":"A playful button with a sliding arrow animation that sneaks in from the side. Perfect for adding fun interactions to navigation, menus, or call-to-actions while keeping a clean and","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/nextjsshop/sneaky-button/default/preview.1756717693248.png","pc":"nextjsshop"},{"id":"21st:nextjsshop__tags-breadcrumb","t":"Tags breadcrumb","d":"A tag list Breadcrumb component with counters, ideal for displaying categories, filters, or topics with their associated counts.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/nextjsshop/tags-breadcrumb/default/preview.1756723395585.png","pc":"nextjsshop"},{"id":"21st:nexus-ui__animated-countdown","t":"Animated countdown","d":"A flip-style countdown timer with animated number transitions and modern, digital, minimal, and classic variants.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/animated-countdown/default/preview.1783719370557.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__animated-select-headline","t":"Animated select headline","d":"A hero heading that cycles through keyword variants with blur-fade transitions, highlighting the active word with an accent gradient.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"nexus-ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/nexus-ui/animated-select-headline/default/preview.1784681111964-60c5f66d-9394-4af7-b0a8-ed9ceb5b56a3.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__ask-nexus-input","t":"Ask nexus input","d":"An AI-style ask input with a rotating placeholder and a canvas particle disintegration animation that dissolves the query text on submit.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"nexus-ui","st":"rated","pl":"https://cdn.21st.dev/nexus-ui/ask-nexus-input/default/preview.1784286717205-a8f0427a-d7d1-4c20-a647-e31feb12a800.png","pc":"nexus-ui","tg":["ai-chat"],"sc":20},{"id":"21st:nexus-ui__beam-sweep-field","t":"Beam sweep field","d":"An animated background with a slow sweeping vertical light beam over a subtle grid, for cinematic section backdrops.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/beam-sweep-field/default/preview.1783581551869.png","pc":"nexus-ui","tg":["grid"]},{"id":"21st:nexus-ui__chat-messages","t":"Chat messages","d":"Animated chat conversation with sequential message bubbles, typing indicators, and optional interactive input for AI and chatbot demos.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/chat-messages/default/preview.1784358333941-8fe47408-1d90-4abb-8d79-ab5cb29f46aa.png","pc":"nexus-ui","tg":["ai-chat","avatar","input"]},{"id":"21st:nexus-ui__cinematic-logo-cloud","t":"Cinematic logo cloud","d":"A logo cloud that reveals brand logos with a staggered blur-fade entrance, with grid and marquee layout variants.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"nexus-ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/nexus-ui/cinematic-logo-cloud/default/preview.1784712712559-f552daa0-8218-459e-a326-7bae6930eb4e.png","pc":"nexus-ui","tg":["clients","grid"]},{"id":"21st:nexus-ui__circular-carousel","t":"Circular carousel","d":"An animated orbital carousel that arcs cards along a curved track with smooth active-card transitions, autoplay, dot indicators, and keyboard navigation.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/circular-carousel/default/preview.1784917780107-1874b319-d482-4189-9cb8-abe5f5bee9c2.png","pc":"nexus-ui","tg":["carousel","slider"]},{"id":"21st:nexus-ui__depth-testimonials","t":"Depth testimonials","d":"Stacked testimonial cards that layer with depth and reveal on scroll with staggered motion.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"nexus-ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/nexus-ui/depth-testimonials/default/preview.1784739975465-56c56c9b-eaa2-4899-becc-1fafa2333380.png","pc":"nexus-ui","tg":["testimonials"]},{"id":"21st:nexus-ui__dot-grid-hero","t":"Dot grid hero","d":"Cinematic hero section with a Canvas-rendered dot grid that reacts to cursor proximity, with particles that scale, brighten, and spring back to rest.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/dot-grid-hero/default/preview.1785376441104-4f7102ec-4832-4001-8320-82a1eebfce49.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__forge-ai-command-bar","t":"Forge ai command bar","d":"A glassmorphic command input bar for AI copilots with an animated motion layout container.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"nexus-ui","st":"rated","pl":"https://cdn.21st.dev/nexus-ui/forge-ai-command-bar/default/preview.1784662285644-d7bdde6c-f039-4f07-b26e-83a33bea76b0.png","pc":"nexus-ui","tg":["ai-chat"],"sc":19},{"id":"21st:nexus-ui__hover-highlight-text","t":"Hover highlight text","d":"Animated heading where a cursor-tracked spotlight reveals an outlined version of the text beneath a faint base layer, using spring physics for a smooth cinematic hover effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/hover-highlight-text/default/preview.1784754981567-587baace-6032-413b-9dc0-a0a926cb966c.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__image-trail","t":"Image trail","d":"A cursor trail that spawns and cycles through a configurable image array as you move the pointer, with fade-blur transitions and an optional magnetic repulsion effect.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/image-trail/default/preview.1783581735514.png","pc":"nexus-ui","tg":["cursor","gallery"]},{"id":"21st:nexus-ui__infinite-moving-cards","t":"Infinite moving cards","d":"A horizontally scrolling marquee of cards with seamless infinite looping, direction and speed controls, pause on hover, and edge fade masks — ideal for testimonials, logo strips, a","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"nexus-ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/nexus-ui/infinite-moving-cards/default/preview.1784354284757-456c55df-7d12-4ff3-8d8e-0590e2e25ead.png","pc":"nexus-ui","tg":["carousel","marquee","scroll-area","testimonials"]},{"id":"21st:nexus-ui__logo-clouds","t":"Logo clouds","d":"Animated logo cloud sections for showcasing partner and brand logos, with marquee, spotlight, blur, single-row, and swap-reveal variants.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"nexus-ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/nexus-ui/logo-clouds/default/preview.1784460668169-f46bb524-1543-41a7-8e34-77c957079868.png","pc":"nexus-ui","tg":["clients"]},{"id":"21st:nexus-ui__nebula-cta-glow","t":"Nebula cta glow","d":"A call-to-action button with a pulsing nebula glow effect animated behind it.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/nebula-cta-glow/default/preview.1783728316341.png","pc":"nexus-ui","tg":["cta"]},{"id":"21st:nexus-ui__orbit-footer","t":"Orbit footer","d":"Compact dark footer with a brand name and inline developer links like docs and status.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"nexus-ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/nexus-ui/orbit-footer/default/preview.1783728529715.png","pc":"nexus-ui","tg":["footer","link"]},{"id":"21st:nexus-ui__shader-flow","t":"Shader flow","d":"An animated shader-style background with flowing gradient blobs, a subtle noise overlay, and optional cursor-reactive motion for hero sections.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/shader-flow/default/preview.1784824047551-7d0e8a1e-0ff7-40c4-8a0a-de26ca1e5ca4.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__shooting-stars-grid","t":"Shooting stars grid","d":"Animated dot-grid background with diagonal shooting star streaks and glowing nodes for hero sections and feature blocks.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/shooting-stars-grid/default/preview.1783581449869.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__sparkles","t":"Sparkles","d":"Configurable animated particle field for hero highlights, card backgrounds, and decorative UI layers with optional pointer interaction.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/sparkles/default/preview.1785378238380-2b5dcb29-9ec9-4aea-b06d-715aea75fef2.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__starfield-hero","t":"Starfield hero","d":"Dark hero section with a cursor-reactive canvas starfield where glowing particles stretch, brighten, and rotate toward the pointer.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/starfield-hero/default/preview.1785377504128-81cfe36d-7c2a-4203-ae2b-4ba932c23844.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__text-reveal-card","t":"Text reveal card","d":"Interactive spotlight card with a mouse-follow glow and a cursor-driven text reveal at the bottom for features, case studies, and portfolio sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"nexus-ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/nexus-ui/text-reveal-card/default/preview.1783718687259.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__typewriter-effect","t":"Typewriter effect","d":"Character-by-character typewriter text animation with a blinking cursor, optional deleting, looping across phrases, and semantic heading support.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/typewriter-effect/default/preview.1784658490276-8f4a9da7-6d1b-4826-9c93-193d180bef41.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__vector-tilt-scene","t":"Vector tilt scene","d":"A spring-driven 3D tilt glass panel that follows the cursor, for hero cards and feature highlights.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"nexus-ui","st":"indexed","pl":"https://cdn.21st.dev/nexus-ui/vector-tilt-scene/default/preview.1783581366846.png","pc":"nexus-ui"},{"id":"21st:nexus-ui__workbench-sidebar","t":"Workbench sidebar","d":"A dense glassmorphic sidebar navigation with animated hover for dashboards and internal tools.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"nexus-ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/nexus-ui/workbench-sidebar/default/preview.1783728703460.png","pc":"nexus-ui","tg":["dashboard","sidebar"]},{"id":"21st:nexxeondigitalsolutions-cmyk__wonder","t":"Wonder","d":"Animated (wave) ASCII art in the Pixel Art style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nexxeondigitalsolutions-cmyk","st":"indexed","pl":"https://cdn.21st.dev/nexxeondigitalsolutions-cmyk/wonder/default/preview.1787007035224-1fe1a8ea-43ee-4148-beb3-8f1b21e716c1.png","pc":"nexxeondigitalsolutions-cmyk"},{"id":"21st:nicolassalok1__flavers","t":"Flavers","d":"Animated WebGL shader background in the Static Mesh Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nicolassalok1","st":"indexed","pl":"https://cdn.21st.dev/nicolassalok1/flavers/default/preview.1785894362986-dea931ff-7088-45b0-82da-a034376aaec4.webp","pc":"nicolassalok1"},{"id":"21st:niganuga__button","t":"Button","d":"test test test button as an example","k":"component","s":"21st","c":"actions/button","g":"actions","a":"niganuga","st":"indexed","pl":"https://cdn.21st.dev/niganuga/button/default/preview.1773264780940.png","pc":"niganuga"},{"id":"21st:nikhiljainsam__draggable-priority-list","t":"Draggable priority list","d":"A keyboard and drag-and-drop reorderable list with rank numbers, smooth transitions, and full accessibility support. Built with native HTML5 DnD.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"nikhiljainsam","st":"indexed","pl":"https://cdn.21st.dev/nikhiljainsam/draggable-priority-list/default/preview.1778525361062.png","pc":"nikhiljainsam","tg":["list"]},{"id":"21st:nilsnomane__hero-section-5","t":"Hero section 5","d":"Full-page hero block with animated sticky header, infinite logo slider with brand logos, and background video. Standalone — no registry dependencies.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"nilsnomane","st":"indexed","pl":"https://21st.dev/@nilsnomane/components/hero-section-5","pc":"nilsnomane"},{"id":"21st:nilsnomane__testbutton","t":"Testbutton","d":"Simple test button to verify publishing works.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"nilsnomane","st":"indexed","pl":"https://21st.dev/@nilsnomane/components/testbutton","pc":"nilsnomane"},{"id":"21st:nitishniraj06__document-searching-animation","t":"Document searching animation","d":"A clean and simple loading animation for a document search function. The magnifying glass smoothly scans over the files, providing clear visual feedback to the user that their quer","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"nitishniraj06","st":"indexed","pl":"https://cdn.21st.dev/nitishniraj06/document-searching-animation/default/preview.1752138326449.png","pc":"nitishniraj06"},{"id":"21st:nlace-com__mesh-gradient-shader","t":"Mesh gradient shader","d":"Animated mesh gradient shader background, ideal for hero sections and decorative elements.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nlace-com","st":"indexed","u":6,"pl":"https://cdn.21st.dev/nlace-com/mesh-gradient-shader/default/preview.1785313636357-71229eb5-4d72-4da5-9e7b-eea20484a422.png","pc":"nlace-com"},{"id":"21st:norway81__dq","t":"Dq","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#03120E, #0E7C5A, #7CE577, #F4FFC7). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"norway81","st":"indexed","pl":"https://cdn.21st.dev/norway81/dq/default/preview.1785829545473-3e99d2cf-3500-42b6-aa8c-00926528f6e9.png","pc":"norway81"},{"id":"21st:notshekharsahu__waves-shader","t":"Waves shader","d":"Animated WebGL shader background in the Waves style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). Features: cursor-reactive (spot","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"notshekharsahu","st":"indexed","pl":"https://cdn.21st.dev/notshekharsahu/waves-shader/default/preview.1783781207773.png","pc":"notshekharsahu"},{"id":"21st:notskyzzer__nice-bg","t":"Nice bg","d":"Animated WebGL shader background in the Halftone style, generated by the 21st.dev Shader Builder. 2-color palette (#3C3483, #161A41). Features: film grain, cursor-reactive (swirl).","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"notskyzzer","st":"indexed","u":4,"pl":"https://cdn.21st.dev/notskyzzer/nice-bg/default/preview.1784238394976-520bed26-57c8-4445-b8dc-941b2b260598.webp","pc":"notskyzzer","tg":["cursor"]},{"id":"21st:noveminfo__aa","t":"Aa","d":"aaaaaaaaaffewfwefaffafffff","k":"component","s":"21st","c":"other","g":"other","a":"noveminfo","st":"indexed","pl":"https://cdn.21st.dev/noveminfo/aa/default/preview.1751708510354.png","pc":"noveminfo"},{"id":"21st:nparashar150__ai-writer","t":"Ai writer","d":"A powerful rich text editor with AI capabilities built with Tiptap.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"nparashar150","st":"indexed","pl":"https://cdn.21st.dev/nparashar150/ai-writer/default/preview.1769365278497.png","pc":"nparashar150"},{"id":"21st:nparashar150__query-builder","t":"Query builder","d":"A powerful, shadcn-styled query builder for filtering data. Supports nested groups, multiple field types, and exports clean JSON.","k":"component","s":"21st","c":"other","g":"other","a":"nparashar150","st":"rated","pl":"https://cdn.21st.dev/nparashar150/query-builder/default/preview.1767302124639.png","pc":"nparashar150","sc":21},{"id":"21st:nparashar150__timeline","t":"Timeline","d":"Multi-track timeline editor","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"nparashar150","st":"rated","pl":"https://cdn.21st.dev/nparashar150/timeline/default/preview.1758562057771.png","pc":"nparashar150","sc":22},{"id":"21st:npouliss__test","t":"Test","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a pixel look. A drop-in, zero-dependency React componen","k":"component","s":"21st","c":"media/player","g":"media","a":"npouliss","st":"indexed","pl":"https://cdn.21st.dev/npouliss/test/default/preview.1783929080840.png","pc":"npouliss","tg":["video"]},{"id":"21st:nuova.esperienza.1993__shader-anima","t":"Shader anima","d":"Animated WebGL shader background in the Warp stripes style, generated by the 21st.dev Shader Builder. 4-color palette (#04212A, #143943, #7DD4E8, #C7D0D6). Features: film grain, cu","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"nuova.esperienza.1993","st":"indexed","pl":"https://cdn.21st.dev/nuova.esperienza.1993/shader-anima/default/preview.1784213170033-9950b707-700e-409f-a15f-bc7826dbbbf1.webp","pc":"nuova.esperienza.1993","tg":["cursor"]},{"id":"21st:nyxbui__globe","t":"Globe","d":"Here is animated Globe ","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"nyxbui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/globe/default/preview.1750173776553.png","pc":"nyxbui","tg":["globe"]},{"id":"21st:nyxbui__stepper","t":"Stepper","d":"Display content divided into a steps sequence.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"nyxbui","st":"indexed","u":267,"pl":"https://cdn.21st.dev/user_nyxbui/stepper.png","pc":"nyxbui","tg":["steps"]},{"id":"21st:nyxbui__timeline","t":"Timeline","d":"Displays a list of events in chronological order.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"nyxbui","st":"indexed","u":203,"pl":"https://cdn.21st.dev/user_nyxbui/timeline.png","pc":"nyxbui","tg":["timeline"]},{"id":"21st:nyxbui__video-modal","t":"Video modal","d":"Example component for demonstrating Video Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"nyxbui","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_nyxbui/video-modal.png","pc":"nyxbui","tg":["modal","video"]},{"id":"21st:nyxbui__warp-background","t":"Warp background","d":"Here is Warp Background animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"nyxbui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/warp-background/default/preview.1750173412665.png","pc":"nyxbui"},{"id":"21st:obscurepastas__background-1","t":"Background 1","d":"Animated WebGL shader background in the Metaballs style. Background variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"obscurepastas","st":"indexed","pl":"https://cdn.21st.dev/obscurepastas/background-1/default/preview.1786724122314-3d8274fd-47ac-4649-96d7-a295610d3847.webp","pc":"obscurepastas"},{"id":"21st:oeneco__dynamic-frame-layout","t":"Dynamic frame layout","d":"Dynamic Frame Layout","k":"component","s":"21st","c":"media/player","g":"media","a":"oeneco","st":"indexed","u":259,"pl":"https://cdn.21st.dev/user_oeneco/dynamic-frame-layout/default/preview.png","pc":"oeneco","tg":["gallery","video"]},{"id":"21st:ohmfordev__hero","t":"Hero","d":"A hero section component with animated gradient background and customizable content.\n\nFeatures\n\n- Animated gradient background\n- Customizable title and subtitle\n- Configurable acti","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ohmfordev","st":"indexed","u":1049,"pl":"https://cdn.21st.dev/user_ohmfordev/hero.png","pc":"ohmfordev","tg":["ai-chat","cta"]},{"id":"21st:ola.leandroaraujo__shader-r","t":"Shader r","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#03120E, #0E7C5A, #7CE577, #F4FFC7). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ola.leandroaraujo","st":"indexed","u":5,"pl":"https://cdn.21st.dev/ola.leandroaraujo/shader-r/default/preview.1783885601979.webp","pc":"ola.leandroaraujo"},{"id":"21st:oladejibidmus__aki3","t":"Aki3","d":"a beutiiful saas fashyboard","k":"component","s":"21st","c":"other","g":"other","a":"oladejibidmus","st":"indexed","pl":"https://cdn.21st.dev/oladejibidmus/aki3/default/preview.1752540325628.png","pc":"oladejibidmus"},{"id":"21st:oldkong88__cartoon-button","t":"Cartoon button","d":"Cartoon Style Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"oldkong88","st":"indexed","u":60,"pl":"https://cdn.21st.dev/user_2vOYzEX38Q67e1sovzgyVj7bzuU/cartoon-button/cartoon-style-button/preview.png","pc":"oldkong88"},{"id":"21st:oldkong88__windows-container","t":"Windows container","d":"A retro-style container for nostalgic UI","k":"component","s":"21st","c":"other","g":"other","a":"oldkong88","st":"indexed","pl":"https://cdn.21st.dev/oldkong88/windows-container/default/preview.1746860236472.png","pc":"oldkong88"},{"id":"21st:olivier_1b6cd5bc__accordion","t":"Accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/accordion","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__accordion-1","t":"Accordion 1","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"olivier_1b6cd5bc","st":"indexed","u":10,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/accordion-1","pc":"olivier_1b6cd5bc","tg":["accordion","faq","icon","list"]},{"id":"21st:olivier_1b6cd5bc__alert-dialog","t":"Alert dialog","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/alert-dialog","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__aspect-ratio-1","t":"Aspect ratio 1","k":"component","s":"21st","c":"other","g":"other","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/aspect-ratio-1","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__avatar-1","t":"Avatar 1","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/avatar-1","pc":"olivier_1b6cd5bc","tg":["avatar","profile"]},{"id":"21st:olivier_1b6cd5bc__breadcrumb-1","t":"Breadcrumb 1","d":"Here is Breadcrumb component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"olivier_1b6cd5bc","st":"indexed","u":13,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/breadcrumb-1","pc":"olivier_1b6cd5bc","tg":["badge","icon","link","navigation-menu"]},{"id":"21st:olivier_1b6cd5bc__button-1","t":"Button 1","d":"Here is Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"olivier_1b6cd5bc","st":"indexed","u":10,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/button-1","pc":"olivier_1b6cd5bc","tg":["button","icon","link","spinner"]},{"id":"21st:olivier_1b6cd5bc__checkbox-group-1","t":"Checkbox group 1","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/checkbox-group-1","pc":"olivier_1b6cd5bc","tg":["checkbox","list"]},{"id":"21st:olivier_1b6cd5bc__collapsible-1","t":"Collapsible 1","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/collapsible-1","pc":"olivier_1b6cd5bc","tg":["list"]},{"id":"21st:olivier_1b6cd5bc__context-menu-1","t":"Context menu 1","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/context-menu-1","pc":"olivier_1b6cd5bc","tg":["menu"]},{"id":"21st:olivier_1b6cd5bc__dialog-2","t":"Dialog 2","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/dialog-2","pc":"olivier_1b6cd5bc","tg":["alert","notification","modal"]},{"id":"21st:olivier_1b6cd5bc__input-1","t":"Input 1","d":"Here is Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"olivier_1b6cd5bc","st":"indexed","u":10,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/input-1","pc":"olivier_1b6cd5bc","tg":["input"]},{"id":"21st:olivier_1b6cd5bc__menubar-1","t":"Menubar 1","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/menubar-1","pc":"olivier_1b6cd5bc","tg":["menu","navigation-menu"]},{"id":"21st:olivier_1b6cd5bc__navigation-menu-4","t":"Navigation menu 4","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/navigation-menu-4","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__number-field-1","t":"Number field 1","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/number-field-1","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__popover-1","t":"Popover 1","d":"Here is Popover component","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","u":21,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/popover-1","pc":"olivier_1b6cd5bc","tg":["notification","popover","tooltip"]},{"id":"21st:olivier_1b6cd5bc__preview-card","t":"Preview card","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/preview-card","pc":"olivier_1b6cd5bc","tg":["link","popover","tooltip"]},{"id":"21st:olivier_1b6cd5bc__progress-1","t":"Progress 1","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/progress-1","pc":"olivier_1b6cd5bc","tg":["progress"]},{"id":"21st:olivier_1b6cd5bc__radio-1","t":"Radio 1","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/radio-1","pc":"olivier_1b6cd5bc","tg":["radio-group"]},{"id":"21st:olivier_1b6cd5bc__scroll-area-1","t":"Scroll area 1","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/scroll-area-1","pc":"olivier_1b6cd5bc","tg":["scroll-area"]},{"id":"21st:olivier_1b6cd5bc__select-1","t":"Select 1","d":"Here is Select component","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"olivier_1b6cd5bc","st":"indexed","u":22,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/select-1","pc":"olivier_1b6cd5bc","tg":["select"]},{"id":"21st:olivier_1b6cd5bc__separator-1","t":"Separator 1","k":"component","s":"21st","c":"other","g":"other","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/separator-1","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__slider-1","t":"Slider 1","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/slider-1","pc":"olivier_1b6cd5bc","tg":["slider"]},{"id":"21st:olivier_1b6cd5bc__switch-1","t":"Switch 1","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/switch-1","pc":"olivier_1b6cd5bc","tg":["toggle"]},{"id":"21st:olivier_1b6cd5bc__tabs-1","t":"Tabs 1","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/tabs-1","pc":"olivier_1b6cd5bc","tg":["tabs"]},{"id":"21st:olivier_1b6cd5bc__toast-1","t":"Toast 1","d":"Here is Toast component","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","u":26,"pl":"https://21st.dev/@olivier_1b6cd5bc/components/toast-1","pc":"olivier_1b6cd5bc","tg":["alert","notification","toast"]},{"id":"21st:olivier_1b6cd5bc__toggle-group","t":"Toggle group","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/toggle-group","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__toolbar-1","t":"Toolbar 1","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/toolbar-1","pc":"olivier_1b6cd5bc"},{"id":"21st:olivier_1b6cd5bc__tooltip-1","t":"Tooltip 1","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"olivier_1b6cd5bc","st":"indexed","pl":"https://21st.dev/@olivier_1b6cd5bc/components/tooltip-1","pc":"olivier_1b6cd5bc","tg":["tooltip"]},{"id":"21st:olovajs__orbiting-carousel-with-animated-icons","t":"Orbiting carousel with animated icons","d":"This variation of the Orbiting Carousel adds a layer of interactivity with animated icons. Each item in the carousel not only orbits but also features its own animation, drawing at","k":"component","s":"21st","c":"media/carousel","g":"media","a":"olovajs","st":"indexed","u":41,"pl":"https://cdn.21st.dev/olovajs/orbiting-carousel-with-animated-icons/default/preview.1755764039075.png","pc":"olovajs","tg":["carousel","profile"]},{"id":"21st:olovajs__orbiting-skills","t":"Orbiting skills","d":"A dynamic and visually appealing component that displays a set of skills or technologies in an orbiting pattern. Perfect for showcasing expertise, proficiency, or areas of interest","k":"component","s":"21st","c":"media/carousel","g":"media","a":"olovajs","st":"indexed","pl":"https://cdn.21st.dev/olovajs/orbiting-skills/default/preview.1755766060280.png","pc":"olovajs"},{"id":"21st:om3gaholdings__rds-silk","t":"Rds silk","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#140A00, #1E1D1D, #FFC300, #FFF1B8). Features: cursor-reactive (swirl","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"om3gaholdings","st":"indexed","pl":"https://cdn.21st.dev/om3gaholdings/rds-silk/default/preview.1785685525611-b17309a2-c8dd-42e7-9d92-e3eb97c81fa1.webp","pc":"om3gaholdings"},{"id":"21st:omrohilla6__3d-adaptive-navigation-bar","t":"3d adaptive navigation bar","d":"A stunning 3D navigation component with ultra-realistic depth, lighting, and material effects. Features:\n\n• Premium 3D design with photorealistic shadows and gradients\n• Smooth hov","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"omrohilla6","st":"indexed","u":161,"pl":"https://cdn.21st.dev/omrohilla6/3d-adaptive-navigation-bar/default/preview.1762522751145.png","pc":"omrohilla6"},{"id":"21st:omrohilla6__cinematic-theme-switcher","t":"Cinematic theme switcher","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"omrohilla6","st":"indexed","u":138,"pl":"https://cdn.21st.dev/omrohilla6/cinematic-theme-switcher/default/preview.1761421089647.png","pc":"omrohilla6","tg":["icon","toggle"]},{"id":"21st:omrohilla6__comet-hero-section","t":"Comet hero section","d":"A stunning animated hero section featuring a  planet with  orbiting asteroids, twinkling stars, and an interactive comet cursor trail. Perfect for AI, space-themed landing pages. I","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"omrohilla6","st":"indexed","pl":"https://cdn.21st.dev/omrohilla6/comet-hero-section/default/preview.1761821047937.png","pc":"omrohilla6"},{"id":"21st:openstatusHQ__datetime-picker","t":"Datetime picker","d":"A <TimePickerInput /> component built with React and Shadcn UI.\n\n- No additional library\n- Listens to keydown events\n- Supports arrow navigation\n- Formats date values\n- Optimizes m","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"openstatusHQ","st":"indexed","u":158,"pl":"https://cdn.21st.dev/user_openstatusHQ/datetime-picker.png","pc":"openstatusHQ","tg":["calendar","date-picker"]},{"id":"21st:operaccav__test","t":"Test","d":"test component","k":"component","s":"21st","c":"other","g":"other","a":"operaccav","st":"indexed","pl":"https://cdn.21st.dev/operaccav/test/default/preview.1752632206345.png","pc":"operaccav"},{"id":"21st:originui__accordion","t":"Accordion","d":"Enchanced shadcn/ui accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"originui","st":"indexed","u":1012,"pl":"https://cdn.21st.dev/user_originui/accordion/default/preview.1737991123511.png","pc":"originui","tg":["accordion","faq"]},{"id":"21st:originui__alert-dialog","t":"Alert dialog","d":"Alert Dialog","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"originui","st":"indexed","u":123,"pl":"https://cdn.21st.dev/user_originui/alert-dialog.png","pc":"originui","tg":["alert","modal"]},{"id":"21st:originui__avatar","t":"Avatar","d":"Enchanced shadcn/ui avatar","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"originui","st":"indexed","u":1199,"pl":"https://cdn.21st.dev/user_originui/avatar/default/preview.png","pc":"originui","tg":["badge","avatar","notification","profile"]},{"id":"21st:originui__breadcrumb","t":"Breadcrumb","d":"Enchanced shadcn/ui breadcrumb","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"originui","st":"indexed","u":328,"pl":"https://cdn.21st.dev/user_originui/breadcrumb/default/preview.png","pc":"originui","tg":["link","navigation-menu"]},{"id":"21st:originui__breadcrumb--with-slash","t":"With slash","k":"component","s":"21st","c":"navigation/breadcrumb","g":"navigation","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/breadcrumb/with-slash/preview.1786744594052.png","pc":"originui"},{"id":"21st:originui__button","t":"Button","d":"Enhanced shadcn/ui button","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"originui","st":"indexed","u":7323,"pl":"https://cdn.21st.dev/user_originui/button/default/preview.png","pc":"originui","tg":["dropdown","link","notification","radio-group"]},{"id":"21st:originui__calendar","t":"Calendar","d":"Calendar [React Day Picker]","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"originui","st":"indexed","u":2028,"pl":"https://cdn.21st.dev/user_originui/calendar/default/preview.1737991983843.png","pc":"originui","tg":["calendar","date-picker","dropdown","input"]},{"id":"21st:originui__calendar-rac","t":"Calendar rac","d":"Calendar [React-Area]","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/calendar-rac/default/preview.1737992261935.png","pc":"originui","tg":["calendar","date-picker"]},{"id":"21st:originui__checkbox","t":"Checkbox","d":"Enhanced checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"originui","st":"indexed","u":236,"pl":"https://cdn.21st.dev/user_originui/checkbox/default/preview.png","pc":"originui","tg":["checkbox"]},{"id":"21st:originui__command","t":"Command","d":"Enhanced shadcn/ui command","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"originui","st":"rated","u":345,"pl":"https://cdn.21st.dev/user_originui/command/default/preview.1737992708652.png","pc":"originui","tg":["search"],"sc":16},{"id":"21st:originui__compact-pagination","t":"Compact pagination","d":"Compact Pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/compact-pagination/default/preview.1737992481914.png","pc":"originui"},{"id":"21st:originui__dialog","t":"Dialog","d":"Enhanced shadcn/ui dialog","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"originui","st":"indexed","u":1873,"pl":"https://cdn.21st.dev/user_originui/dialog/default/preview.1737994194561.png","pc":"originui","tg":["alert","checkbox","faq","modal"]},{"id":"21st:originui__dialog--edit-profile-dialog","t":"Edit profile dialog","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/dialog/edit-profile-dialog/preview.png?v=1","pc":"originui"},{"id":"21st:originui__dialog--onboardin-dialog","t":"Onboardin dialog","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/dialog/onboardin-dialog/preview.png?v=1","pc":"originui"},{"id":"21st:originui__dialog--scrollable-sticky-footer","t":"Scrollable sticky footer","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/dialog/scrollable-sticky-footer/preview.png?v=1","pc":"originui"},{"id":"21st:originui__dropdown-menu","t":"Dropdown menu","d":"Enhanced shadcn/ui dropdown menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"originui","st":"indexed","u":1043,"pl":"https://cdn.21st.dev/user_originui/dropdown-menu/default/preview.png","pc":"originui","tg":["checkbox","dropdown","menu","profile"]},{"id":"21st:originui__hero-pill","t":"Hero pill","d":"A pill-shaped component for highlighting key features or messages with optional icons and animations.\n\nFeatures\n- Optional leading icon\n- Smooth entrance animation\n- Dark mode supp","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"originui","st":"indexed","u":139,"pl":"https://cdn.21st.dev/user_originui/hero-pill.png","pc":"originui"},{"id":"21st:originui__image-crop","t":"Image crop","d":"Here is Image Crop component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"originui","st":"indexed","u":81,"pl":"https://cdn.21st.dev/larsen66/image-crop/default/preview.1751068736580.png","pc":"originui","tg":["image","slider","upload-download"]},{"id":"21st:originui__input","t":"Input","d":"Upgaraded shadcn/ui Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"originui","st":"indexed","u":3518,"pl":"https://cdn.21st.dev/user_originui/input/default/preview.png","pc":"originui","tg":["calendar","date-picker","icon","input"]},{"id":"21st:originui__input-with-inner-tags","t":"Input with inner tags","d":"shadcn/ui input with inner tags","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"originui","st":"indexed","u":153,"pl":"https://cdn.21st.dev/user_originui/input-with-inner-tags.png","pc":"originui","tg":["chip","input"]},{"id":"21st:originui__input-with-tags","t":"Input with tags","d":"shadcn/ui input with tags","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/input-with-tags.png","pc":"originui"},{"id":"21st:originui__joined-pagination","t":"Joined pagination","d":" ","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/user_originui/joined-pagination/default/preview.1737992324526.png","pc":"originui","tg":["list","pagination"]},{"id":"21st:originui__label","t":"Label","d":"Upgaraded shadcn/ui label","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"originui","st":"indexed","u":421,"pl":"https://cdn.21st.dev/user_originui/label/default/preview.png","pc":"originui"},{"id":"21st:originui__multiselect","t":"Multiselect","d":"multiselect","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"originui","st":"indexed","u":604,"pl":"https://cdn.21st.dev/user_originui/multiselect/default/preview.png","pc":"originui","tg":["select"]},{"id":"21st:originui__navigation-bar","t":"Navigation bar","d":"Here is navigation bar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"originui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/navigation-bar/default/preview.1750354774711.png","pc":"originui"},{"id":"21st:originui__navigation-menu","t":"Navigation menu","d":"Here is Navigation Menu component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"originui","st":"indexed","u":185,"pl":"https://cdn.21st.dev/larsen66/navigation-menu/default/preview.1750354086939.png","pc":"originui","tg":["navigation-menu"]},{"id":"21st:originui__navigation-menu-4","t":"Navigation menu 4","d":"Here is Navigation Bar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"originui","st":"indexed","u":177,"pl":"https://cdn.21st.dev/larsen66/navigation-menu-4/default/preview.1750969209946.png","pc":"originui","tg":["dropdown","notification","navigation-menu","search"]},{"id":"21st:originui__newsletter-section","t":"Newsletter section","d":"A customizable newsletter subscription section with a modern design, loading states, and background effects.\n\nFeatures\n- Customizable title and styling\n- Built-in form handling and","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"originui","st":"indexed","u":45,"pl":"https://cdn.21st.dev/user_originui/newsletter-section.png","pc":"originui"},{"id":"21st:originui__numbered-pagination","t":"Numbered pagination","d":" ","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","u":37,"pl":"https://cdn.21st.dev/user_originui/numbered-pagination/default/preview.1737992372368.png","pc":"originui","tg":["pagination"]},{"id":"21st:originui__pagination","t":"Pagination","d":"Enhanced shadcn/ui pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","u":89,"pl":"https://cdn.21st.dev/user_originui/pagination/default/preview.png","pc":"originui","tg":["navigation-menu","pagination"]},{"id":"21st:originui__popover","t":"Popover","d":"Enhanced shadcn/ui popover","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"originui","st":"indexed","u":943,"pl":"https://cdn.21st.dev/user_originui/popover/default/preview.png","pc":"originui","tg":["avatar","checkbox","dropdown","icon"]},{"id":"21st:originui__popover--notifications-with-avatars","t":"Notifications with avatars","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/popover/notifications-with-avatars/preview.png?v=1","pc":"originui"},{"id":"21st:originui__radio-group","t":"Radio group","d":"Enhanced shadcn/ui radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"originui","st":"indexed","u":363,"pl":"https://cdn.21st.dev/user_originui/radio-group/default/preview.png","pc":"originui","tg":["badge","form","icon","image"]},{"id":"21st:originui__select","t":"Select","d":"Enhanced shadcn/ui select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"originui","st":"indexed","u":942,"pl":"https://cdn.21st.dev/user_originui/select/default/preview.png","pc":"originui","tg":["select"]},{"id":"21st:originui__select-native","t":"Select native","d":"Native select in shadcn/ui style","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"originui","st":"indexed","u":119,"pl":"https://cdn.21st.dev/user_originui/select-native/default/preview.1737996317098.png","pc":"originui","tg":["select"]},{"id":"21st:originui__simple-pagination","t":"Simple pagination","d":"Simple Pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/simple-pagination/default/preview.1737992529924.png","pc":"originui"},{"id":"21st:originui__slider","t":"Slider","d":"Enhanced shadcn/ui slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"originui","st":"indexed","u":745,"pl":"https://cdn.21st.dev/user_originui/slider/default/preview.png","pc":"originui","tg":["slider","tooltip"]},{"id":"21st:originui__stepper","t":"Stepper","d":"Stepper","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"originui","st":"indexed","u":1060,"pl":"https://cdn.21st.dev/user_originui/stepper/default/preview.png","pc":"originui","tg":["avatar","progress","spinner","steps"]},{"id":"21st:originui__table","t":"Table","d":"Shadcn table with enhanced appearance","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"originui","st":"indexed","u":2122,"pl":"https://cdn.21st.dev/user_originui/table/default/preview.png","pc":"originui","tg":["badge","avatar","checkbox","comparison"]},{"id":"21st:originui__tabs","t":"Tabs","d":"Enchanced shadcn/ui tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"originui","st":"indexed","u":1024,"pl":"https://cdn.21st.dev/user_originui/tabs/default/preview.png","pc":"originui","tg":["border","navigation-menu","scroll-area","tabs"]},{"id":"21st:originui__text-pagination","t":"Text pagination","d":"Pagination with text buttons","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","u":24,"pl":"https://cdn.21st.dev/user_originui/text-pagination/default/preview.1737992436440.png","pc":"originui","tg":["pagination"]},{"id":"21st:originui__textarea","t":"Textarea","d":"Enhanced shadcn/ui textarea","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"originui","st":"indexed","u":511,"pl":"https://cdn.21st.dev/user_originui/textarea/default/preview.png","pc":"originui","tg":["textarea"]},{"id":"21st:originui__tooltip","t":"Tooltip","d":"Enhanced shadcn/ui tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"originui","st":"indexed","u":1506,"pl":"https://cdn.21st.dev/user_originui/tooltip/default/preview.png","pc":"originui","tg":["stat","tooltip"]},{"id":"21st:originui__tree","t":"Tree","d":"Here is Tree component","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"originui","st":"indexed","u":135,"pl":"https://cdn.21st.dev/larsen66/tree/default/preview.1753192171005.png","pc":"originui","tg":["file-tree","list","search"]},{"id":"21st:originui__tree--tree-with-filtering","t":"Tree with filtering","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/tree/tree-with-filtering/preview.1786998865608.png","pc":"originui"},{"id":"21st:originui__use-character-limit","t":"Use character limit","d":"useCharacterLimit hook","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/use-character-limit/default/preview.1737999477677.png","pc":"originui","tg":["hook"]},{"id":"21st:originui__use-image-upload","t":"Use image upload","d":"Hook for image uploading","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/use-image-upload/default/preview.1737993011796.png","pc":"originui","tg":["hook","upload-download"]},{"id":"21st:originui__use-pagination","t":"Use pagination","d":"usePagination hook","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"originui","st":"indexed","pl":"https://cdn.21st.dev/user_originui/use-pagination/default/preview.1738000533345.png","pc":"originui","tg":["hook","pagination"]},{"id":"21st:originui__use-slider-with-input","t":"Use slider with input","d":"A React hook that manages the state and logic for a slider component with corresponding input fields. Provides validation, range constraints, and synchronized updates between slide","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"originui","st":"indexed","u":48,"pl":"https://cdn.21st.dev/user_originui/use-slider-with-input.png","pc":"originui","tg":["hook","slider"]},{"id":"21st:osiris-balonga__date-wheel-picker","t":"Date wheel picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"osiris-balonga","st":"indexed","pl":"https://cdn.21st.dev/osiris-balonga/date-wheel-picker/default/preview.1768783490638.png","pc":"osiris-balonga","tg":["date-picker","scroll-area"]},{"id":"21st:osiris-balonga__emoji-rating-selector","t":"Emoji rating selector","d":"Rating with emoji feedback.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"osiris-balonga","st":"indexed","pl":"https://cdn.21st.dev/osiris-balonga/emoji-rating-selector/default/preview.1769476181833.png","pc":"osiris-balonga"},{"id":"21st:osiris-balonga__member-selector","t":"Member selector","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"osiris-balonga","st":"indexed","pl":"https://cdn.21st.dev/osiris-balonga/member-selector/default/preview.1768780041067.png","pc":"osiris-balonga","tg":["select","team"]},{"id":"21st:osiris-balonga__story-viewer","t":"Story viewer","k":"component","s":"21st","c":"media/carousel","g":"media","a":"osiris-balonga","st":"indexed","u":85,"pl":"https://cdn.21st.dev/osiris-balonga/story-viewer/default/preview.1769474518521.png","pc":"osiris-balonga","tg":["carousel"]},{"id":"21st:osmosupply__draw-random-underline","t":"Draw random underline","d":"Here is Draw Random Underline component","k":"component","s":"21st","c":"other","g":"other","a":"osmosupply","st":"indexed","pl":"https://cdn.21st.dev/larsen66/draw-random-underline/default/preview.1753898125030.png","pc":"osmosupply"},{"id":"21st:osmosupply__looping-words-with-gsap","t":"Looping words with gsap","d":"Here is Looping words with GSAP","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"osmosupply","st":"indexed","pl":"https://cdn.21st.dev/larsen66/looping-words-with-gsap/default/preview.1753898518403.png","pc":"osmosupply","tg":["text"]},{"id":"21st:osmosupply__parallax-scrolling","t":"Parallax scrolling","d":"Here is Parallax Scrolling component","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"osmosupply","st":"indexed","u":345,"pl":"https://cdn.21st.dev/larsen66/parallax-scrolling/default/preview.1753957121379.png","pc":"osmosupply","tg":["hero","scroll-area","text"]},{"id":"21st:owencope__green-border","t":"Green border","d":"Animated WebGL shader background in the Pulsing Border style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palett","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"owencope","st":"indexed","pl":"https://cdn.21st.dev/owencope/green-border/default/preview.1786601721622-48278f82-90ad-402e-9d7f-80a510a5e59e.webp","pc":"owencope"},{"id":"21st:ozantekin__back-button","t":"Back button","d":"A stylish animated button component that reveals an arrow icon on hover, perfect for navigation and going back to previous pages.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ozantekin","st":"indexed","u":56,"pl":"https://cdn.21st.dev/user_2uBFUQQFefvDfuYzup60HJNvIkO/back-button/default/preview.1741970456308.png","pc":"ozantekin","tg":["navigation-menu"]},{"id":"21st:ozantekin__bookmark-icon-button","t":"Bookmark icon button","d":"A toggle-able bookmark button with animated icon and counter effects, perfect for favoriting or bookmarking content.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ozantekin","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_2uBFUQQFefvDfuYzup60HJNvIkO/bookmark-icon-button/default/preview.1741970396721.png","pc":"ozantekin"},{"id":"21st:ozantekin__brightness-control","t":"Brightness control","d":"An interactive brightness control component with animated transitions, providing a user-friendly interface for adjusting brightness levels from 0-6.","k":"component","s":"21st","c":"other","g":"other","a":"ozantekin","st":"indexed","pl":"https://cdn.21st.dev/user_2uBFUQQFefvDfuYzup60HJNvIkO/brightness-control/default/preview.1741970646711.png","pc":"ozantekin"},{"id":"21st:ozantekin__get-started-button","t":"Get started button","d":"An animated call-to-action button that reveals a chevron icon on hover, perfect for primary actions and onboarding experiences.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ozantekin","st":"indexed","u":480,"pl":"https://cdn.21st.dev/user_2uBFUQQFefvDfuYzup60HJNvIkO/get-started-button/default/preview.1741970557358.png","pc":"ozantekin","tg":["cta","onboarding"]},{"id":"21st:ozhangebesoglu__lamp-toggle-theme-switcher","t":"Lamp toggle theme switcher","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ozhangebesoglu","st":"indexed","pl":"https://cdn.21st.dev/ozhangebesoglu/lamp-toggle-theme-switcher/default/preview.1754856984179.png","pc":"ozhangebesoglu"},{"id":"21st:ozhangebesoglu__parallax-card-grid","t":"Parallax card grid","d":"Animation Parallax Card Grid","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ozhangebesoglu","st":"indexed","pl":"https://cdn.21st.dev/ozhangebesoglu/parallax-card-grid/default/preview.1754858919615.png","pc":"ozhangebesoglu"},{"id":"21st:paboene25__waterfall","t":"Waterfall","d":"Animated (flicker) ASCII art in the Diamond style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paboene25","st":"indexed","pl":"https://cdn.21st.dev/paboene25/waterfall/default/preview.1787037645418-19569732-4697-46e6-a9aa-7811458e6a59.webp","pc":"paboene25"},{"id":"21st:pacekit__ai-response-writer","t":"Ai response writer","d":"An auto-scrolling text display that smoothly keeps the latest streamed AI response always visible as new text arrives.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/ai-response-writer/default/preview.1786712305002-3c1f9e34-5993-4036-8680-39a9cb3a6fc5.png","pc":"pacekit","tg":["ai-chat"]},{"id":"21st:pacekit__ai-suggestions","t":"Ai suggestions","d":"A horizontally scrollable row of AI prompt suggestion chips that animate in and out, for chat and prompt input interfaces.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/ai-suggestions/default/preview.1784311536063-091a60d7-9c79-4dd2-8aea-e3461c3d0173.png","pc":"pacekit","tg":["ai-chat","chip","scroll-area"]},{"id":"21st:pacekit__bouncing-text","t":"Bouncing text","d":"Animated text that splits into individual characters and bounces them into place in sequence.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/bouncing-text/default/preview.1783717039042.png","pc":"pacekit","tg":["text"]},{"id":"21st:pacekit__gradient-shadow","t":"Gradient shadow","d":"A wrapper that adds an animated, gradient glowing shadow behind its child on hover.","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/gradient-shadow/default/preview.1784707423629-83d039a7-63cb-4a55-abdb-cac06e7169d3.png","pc":"pacekit"},{"id":"21st:pacekit__mouse-wave-text","t":"Mouse wave text","d":"Interactive text that ripples with a wave-like bounce effect as the mouse moves across the screen.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/mouse-wave-text/default/preview.1783719025742.png","pc":"pacekit"},{"id":"21st:pacekit__scramble-text","t":"Scramble text","d":"A hover-triggered text effect that scrambles and restores its characters with smooth GSAP motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/scramble-text/default/preview.1784473914057-ad1b59ee-b9f0-448d-9d7c-6cc92958d340.png","pc":"pacekit"},{"id":"21st:pacekit__squash-text","t":"Squash text","d":"Animated heading whose characters bounce and squash into place with a playful, dynamic GSAP effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pacekit","st":"indexed","pl":"https://cdn.21st.dev/pacekit/squash-text/default/preview.1783719108564.png","pc":"pacekit","tg":["text"]},{"id":"21st:paceui__dot-flow","t":"Dot flow","d":"here is Dot Flow component ","k":"component","s":"21st","c":"other","g":"other","a":"paceui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dot-flow/default/preview.1750531970101.png","pc":"paceui"},{"id":"21st:paceui__dot-loader","t":"Dot loader","d":"Here is Dot Loader component","k":"component","s":"21st","c":"status/loader","g":"status","a":"paceui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dot-loader/default/preview.1750436362336.png","pc":"paceui","tg":["spinner"]},{"id":"21st:paceui__draw-line-text","t":"Draw line text","d":"Here is drawing line text component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"paceui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/draw-line-text/default/preview.1750436397740.png","pc":"paceui","tg":["text"]},{"id":"21st:paceui__flip-reveal","t":"Flip reveal","d":"Here is Flip Reveal component","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"paceui","st":"indexed","u":115,"pl":"https://cdn.21st.dev/larsen66/flip-reveal/default/preview.1750436764971.png","pc":"paceui"},{"id":"21st:paceui__liquid-cursor","t":"Liquid cursor","d":"Here is Liquid Cursor component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"paceui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/liquid-cursor/default/preview.1750436925541.png","pc":"paceui","tg":["cursor"]},{"id":"21st:paceui__liquid-glass","t":"Liquid glass","d":"Here is Liquid Glass component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"paceui","st":"indexed","u":46,"pl":"https://cdn.21st.dev/larsen66/liquid-glass/default/preview.1750437048273.png","pc":"paceui","tg":["cursor"]},{"id":"21st:paceui__profile-peek","t":"Profile peek","d":"Here is profile peek component","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"paceui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/profile-peek/default/preview.1750436529100.png","pc":"paceui","tg":["popover","profile"]},{"id":"21st:pandasama2025__666","t":"666","d":"gougou panda","k":"component","s":"21st","c":"other","g":"other","a":"pandasama2025","st":"indexed","pl":"https://cdn.21st.dev/pandasama2025/666/default/preview.1752500265926.png","pc":"pandasama2025"},{"id":"21st:paper-design__color-panels","t":"Color panels","d":"Animated WebGL shader background in the Color Panels style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/color-panels/default/preview.1784835765757-86f81c69-1ea2-466f-a84b-c49fbe295b15.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__color-panels-glass","t":"Color panels glass","d":"Animated WebGL shader background in the Color Panels style. Glass variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/color-panels-glass/default/preview.1784835767330-5a24a6b5-fd22-4c2b-a2c4-436d61de783d.webp","pc":"paper-design"},{"id":"21st:paper-design__color-panels-gradient","t":"Color panels gradient","d":"Animated WebGL shader background in the Color Panels style. Gradient variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/color-panels-gradient/default/preview.1784835771853-dd29816a-d70c-499d-a027-18966bbb5902.webp","pc":"paper-design"},{"id":"21st:paper-design__color-panels-opening","t":"Color panels opening","d":"Animated WebGL shader background in the Color Panels style. Opening variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/color-panels-opening/default/preview.1784835786951-a8d86a94-e246-480c-9687-dcced1b2efe2.webp","pc":"paper-design"},{"id":"21st:paper-design__dithering","t":"Dithering","d":"Animated WebGL shader background in the Dithering style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":6,"pl":"https://cdn.21st.dev/paper-design/dithering/default/preview.1784835203978-f7089665-fdf3-4dfd-9d47-68b83787722e.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__dithering-bugs","t":"Dithering bugs","d":"Animated WebGL shader background in the Dithering style. Bugs variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0B","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dithering-bugs/default/preview.1784835241106-96e11a54-0d19-4dd3-b785-e1ef3ae505df.webp","pc":"paper-design"},{"id":"21st:paper-design__dithering-ripple","t":"Dithering ripple","d":"Animated WebGL shader background in the Dithering style. Ripple variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#AD","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dithering-ripple/default/preview.1784835225016-2f590454-b362-44a5-b719-5dca342f3bee.webp","pc":"paper-design"},{"id":"21st:paper-design__dithering-sine-wave","t":"Dithering sine wave","d":"Animated WebGL shader background in the Dithering style. Sine Wave variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dithering-sine-wave/default/preview.1784835222353-f07b3fd3-deb4-45d9-ab60-b48a8a66d775.webp","pc":"paper-design"},{"id":"21st:paper-design__dithering-swirl","t":"Dithering swirl","d":"Animated WebGL shader background in the Dithering style. Swirl variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/dithering-swirl/default/preview.1784835244188-780b50bc-f2e9-45d9-bc9c-c0f923cbe006.webp","pc":"paper-design"},{"id":"21st:paper-design__dithering-warp","t":"Dithering warp","d":"Animated WebGL shader background in the Dithering style. Warp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0B","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dithering-warp/default/preview.1784835219159-fdab0791-5e05-42ae-b115-5c0168c7354f.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__dot-grid","t":"Dot grid","d":"Animated WebGL shader background in the Dot Grid style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#07","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-grid/default/preview.1784835246472-84d7e894-26df-4f6a-97fa-e495d6d70977.webp","pc":"paper-design"},{"id":"21st:paper-design__dot-grid-tree-line","t":"Dot grid tree line","d":"Animated WebGL shader background in the Dot Grid style. Tree line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-grid-tree-line/default/preview.1784835264828-8573c319-aa60-4adb-bca5-472a268b83ed.webp","pc":"paper-design"},{"id":"21st:paper-design__dot-grid-triangles","t":"Dot grid triangles","d":"Animated WebGL shader background in the Dot Grid style. Triangles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-grid-triangles/default/preview.1784835261742-c166035c-b1b4-4c05-b5ae-aaef5f6a9a07.webp","pc":"paper-design"},{"id":"21st:paper-design__dot-grid-wallpaper","t":"Dot grid wallpaper","d":"Animated WebGL shader background in the Dot Grid style. Wallpaper variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-grid-wallpaper/default/preview.1784835268729-6ea26557-e579-4e9d-8626-ec585f8b65b8.webp","pc":"paper-design"},{"id":"21st:paper-design__dot-orbit","t":"Dot orbit","d":"Animated multi-color dots pattern with each dot orbiting around its cell center. Supports many colors plus shape and motion controls. Great for playful, dynamic backgrounds and UI ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-orbit/default/preview.1785208963260-98c0adeb-4435-4b30-bfa9-9d7194d5f47a.png","pc":"paper-design"},{"id":"21st:paper-design__dot-orbit-bubbles","t":"Dot orbit bubbles","d":"Animated WebGL shader background in the Dot Orbit style. Bubbles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-orbit-bubbles/default/preview.1784835838046-7580ee54-ffea-4be2-b8c1-8143449ca291.webp","pc":"paper-design"},{"id":"21st:paper-design__dot-orbit-hallucinatory","t":"Dot orbit hallucinatory","d":"Animated WebGL shader background in the Dot Orbit style. Hallucinatory variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-orbit-hallucinatory/default/preview.1784835844209-e421c976-7d07-4a12-a4d6-31db569ea381.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__dot-orbit-shine","t":"Dot orbit shine","d":"Animated WebGL shader background in the Dot Orbit style. Shine variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#FBB","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/dot-orbit-shine/default/preview.1784835836884-7c59090a-9498-48cb-99b0-c7f0dc7fd6f0.webp","pc":"paper-design"},{"id":"21st:paper-design__fluted-glass","t":"Fluted glass","d":"Animated WebGL shader background in the Fluted Glass style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/fluted-glass/default/preview.1784835542106-5c53f8f2-2578-40e9-af3c-389e92f139d5.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__fluted-glass-abstract","t":"Fluted glass abstract","d":"Animated WebGL shader background in the Fluted Glass style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/fluted-glass-abstract/default/preview.1784835547797-d2e70bed-8bcc-4e83-bd49-315f862e74b4.webp","pc":"paper-design"},{"id":"21st:paper-design__fluted-glass-folds","t":"Fluted glass folds","d":"Animated WebGL shader background in the Fluted Glass style. Folds variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/fluted-glass-folds/default/preview.1784835564458-3c66c608-725c-4a4e-a843-5e66b1de4b43.webp","pc":"paper-design"},{"id":"21st:paper-design__fluted-glass-waves","t":"Fluted glass waves","d":"Animated WebGL shader background in the Fluted Glass style. Waves variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/fluted-glass-waves/default/preview.1784835550809-fe7fe70d-5e6a-4f3e-8417-67aa139fe6e3.webp","pc":"paper-design"},{"id":"21st:paper-design__gem-smoke","t":"Gem smoke","d":"Animated WebGL shader background in the Gem Smoke style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":7,"pl":"https://cdn.21st.dev/paper-design/gem-smoke/default/preview.1784835503709-69c94cdc-e487-4f9a-b898-06a38f20af77.webp","pc":"paper-design"},{"id":"21st:paper-design__gem-smoke-circle","t":"Gem smoke circle","d":"Animated WebGL shader background in the Gem Smoke style. Circle variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#11","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/gem-smoke-circle/default/preview.1784835508448-42184caa-38f9-4c68-b235-9e257b1c2b61.webp","pc":"paper-design"},{"id":"21st:paper-design__gem-smoke-daisy","t":"Gem smoke daisy","d":"Animated WebGL shader background in the Gem Smoke style. Daisy variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F59","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/gem-smoke-daisy/default/preview.1784835518543-6789ebdd-3840-4c7b-93ff-f3c42349249b.webp","pc":"paper-design"},{"id":"21st:paper-design__gem-smoke-diamond","t":"Gem smoke diamond","d":"Animated WebGL shader background in the Gem Smoke style. Diamond variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/gem-smoke-diamond/default/preview.1784835526055-a1ed60a6-98df-4ca8-9abe-75e15415d6ce.webp","pc":"paper-design"},{"id":"21st:paper-design__gem-smoke-metaballs","t":"Gem smoke metaballs","d":"Animated WebGL shader background in the Gem Smoke style. Metaballs variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/gem-smoke-metaballs/default/preview.1784835529624-38224717-7570-4e7d-9170-e97784231794.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__god-rays","t":"God rays","d":"Animated WebGL shader background in the God Rays style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#05","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/god-rays/default/preview.1784835703720-13910a6d-71ba-4572-a2ed-5c0407b715c6.webp","pc":"paper-design"},{"id":"21st:paper-design__god-rays-ether","t":"God rays ether","d":"Animated WebGL shader background in the God Rays style. Ether variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#E35D","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/god-rays-ether/default/preview.1784835725195-d48ffa83-9713-4f54-bc18-5ddf945c41de.webp","pc":"paper-design"},{"id":"21st:paper-design__god-rays-linear","t":"God rays linear","d":"Animated WebGL shader background in the God Rays style. Linear variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#E35","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/god-rays-linear/default/preview.1784835723282-eb35b37f-bb2c-437e-87a2-779575f3171c.webp","pc":"paper-design"},{"id":"21st:paper-design__god-rays-warp","t":"God rays warp","d":"Animated WebGL shader background in the God Rays style. Warp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#05030","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/god-rays-warp/default/preview.1784835707933-1711fcb7-0527-4f39-bc7f-31f882ac41fd.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient","t":"Grain gradient","d":"Animated WebGL shader background in the Grain Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/grain-gradient/default/preview.1784835882133-4d47d651-09d8-4c21-9ce7-06b4a564def0.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient-blob","t":"Grain gradient blob","d":"Animated WebGL shader background in the Grain Gradient style. Blob variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/grain-gradient-blob/default/preview.1784835928644-525d9bb8-16d5-402b-b7b2-7f95bab4c407.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient-dots","t":"Grain gradient dots","d":"Animated WebGL shader background in the Grain Gradient style. Dots variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/grain-gradient-dots/default/preview.1784835904576-3774e0b4-23fc-4826-87c4-ce7c1fa06438.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient-ripple","t":"Grain gradient ripple","d":"Animated WebGL shader background in the Grain Gradient style. Ripple variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/grain-gradient-ripple/default/preview.1784835912306-68aa7536-d0a4-4b06-9a06-203e4301c8f3.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient-truchet","t":"Grain gradient truchet","d":"Animated WebGL shader background in the Grain Gradient style. Truchet variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/grain-gradient-truchet/default/preview.1784835906380-2f997983-6ae5-41f2-929a-a71fd2905081.webp","pc":"paper-design"},{"id":"21st:paper-design__grain-gradient-wave","t":"Grain gradient wave","d":"Animated WebGL shader background in the Grain Gradient style. Wave variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/grain-gradient-wave/default/preview.1784835886640-d77a1261-7e26-41c9-94d5-7ab181e88c37.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-cmyk","t":"Halftone cmyk","d":"Animated WebGL shader background in the Halftone CMYK style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/halftone-cmyk/default/preview.1784835594070-dd1e691a-ded9-476d-8f43-e1e1d7e73de3.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-cmyk-drops","t":"Halftone cmyk drops","d":"Animated WebGL shader background in the Halftone CMYK style. Drops variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/halftone-cmyk-drops/default/preview.1784835610201-3f69717a-8f63-48df-9ecb-e8bf8b2df225.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-cmyk-newspaper","t":"Halftone cmyk newspaper","d":"Animated WebGL shader background in the Halftone CMYK style. Newspaper variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/halftone-cmyk-newspaper/default/preview.1784835613191-b09eadc1-e9d4-42c0-b3b2-8f062f926e93.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-cmyk-vintage","t":"Halftone cmyk vintage","d":"Animated WebGL shader background in the Halftone CMYK style. Vintage variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/halftone-cmyk-vintage/default/preview.1784835617655-c4c7c409-2ffe-493f-a3f4-c4ba53b01215.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-dots","t":"Halftone dots","d":"Animated WebGL shader background in the Halftone Dots style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":6,"pl":"https://cdn.21st.dev/paper-design/halftone-dots/default/preview.1784835568822-6eb573e1-12be-4b72-b192-5cd00df55af9.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__halftone-dots-led-screen","t":"Halftone dots led screen","d":"Animated WebGL shader background in the Halftone Dots style. LED screen variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pale","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/halftone-dots-led-screen/default/preview.1784835572116-98b231cf-9899-4312-a868-f185d572ffc5.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-dots-mosaic","t":"Halftone dots mosaic","d":"Animated WebGL shader background in the Halftone Dots style. Mosaic variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/halftone-dots-mosaic/default/preview.1784835587804-831444c8-1fb1-4d10-b627-941e22430b5c.webp","pc":"paper-design"},{"id":"21st:paper-design__halftone-dots-round-and-square","t":"Halftone dots round and square","d":"Animated WebGL shader background in the Halftone Dots style. Round and square variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-colo","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/halftone-dots-round-and-square/default/preview.1784835590831-17f6f2cb-f1c6-491f-8b62-86aef35016e0.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__heatmap","t":"Heatmap","d":"Animated WebGL shader background in the Heatmap style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 6-color palette (#000","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/heatmap/default/preview.1784835635246-b4a4a07b-b57b-4a47-8f68-cb6e9f7af572.webp","pc":"paper-design"},{"id":"21st:paper-design__heatmap-sepia","t":"Heatmap sepia","d":"Animated WebGL shader background in the Heatmap style. Sepia variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 6-color palette (#00000","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/heatmap-sepia/default/preview.1784835636131-a96975e5-a7d3-4afb-b31e-1025d9edad6e.webp","pc":"paper-design"},{"id":"21st:paper-design__image-dithering","t":"Image dithering","d":"Animated WebGL shader background in the Image Dithering style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/image-dithering/default/preview.1784835180123-0e5fe071-468c-4309-a147-77bd3d747052.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__image-dithering-natural","t":"Image dithering natural","d":"Animated WebGL shader background in the Image Dithering style. Natural variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"component","s":"21st","c":"media/gallery","g":"media","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/image-dithering-natural/default/preview.1784835201318-1b2c966b-ef7f-41fb-be4c-32fa9325bad0.webp","pc":"paper-design"},{"id":"21st:paper-design__image-dithering-noise","t":"Image dithering noise","d":"Animated WebGL shader background in the Image Dithering style. Noise variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"component","s":"21st","c":"media/gallery","g":"media","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/image-dithering-noise/default/preview.1784835180911-8c465389-80c1-466d-9561-05d8e5775abb.webp","pc":"paper-design"},{"id":"21st:paper-design__image-dithering-retro","t":"Image dithering retro","d":"Animated WebGL shader background in the Image Dithering style. Retro variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"component","s":"21st","c":"media/gallery","g":"media","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/image-dithering-retro/default/preview.1784835197752-c7d2483f-3028-48db-8a13-c1a44d7e7618.webp","pc":"paper-design"},{"id":"21st:paper-design__liquid-metal","t":"Liquid metal","d":"Animated WebGL shader background in the Liquid Metal style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":6,"pl":"https://cdn.21st.dev/paper-design/liquid-metal/default/preview.1784835473355-aeb359bc-7395-4b26-8a10-bbb153922a77.webp","pc":"paper-design"},{"id":"21st:paper-design__liquid-metal-backdrop","t":"Liquid metal backdrop","d":"Animated WebGL shader background in the Liquid Metal style. Backdrop variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/liquid-metal-backdrop/default/preview.1784835485672-330d4ae9-7968-4123-bac1-f67fce9853d5.webp","pc":"paper-design"},{"id":"21st:paper-design__liquid-metal-noir","t":"Liquid metal noir","d":"Animated WebGL shader background in the Liquid Metal style. Noir variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/liquid-metal-noir/default/preview.1784835481251-9a983d2d-da06-4c44-b2a2-02efc65a17ec.webp","pc":"paper-design"},{"id":"21st:paper-design__liquid-metal-stripes","t":"Liquid metal stripes","d":"Animated WebGL shader background in the Liquid Metal style. Stripes variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/liquid-metal-stripes/default/preview.1784835495809-a20ad779-fde5-44aa-8a78-565e14b821b9.webp","pc":"paper-design"},{"id":"21st:paper-design__mesh-gradient","t":"Mesh gradient","d":"Animated WebGL shader background in the Mesh Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":14,"pl":"https://cdn.21st.dev/paper-design/mesh-gradient/default/preview.1784835038194-d68adef5-1887-4ea1-8d5c-e73b8df6b7e1.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__mesh-gradient-beach","t":"Mesh gradient beach","d":"Animated WebGL shader background in the Mesh Gradient style. Beach variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/mesh-gradient-beach/default/preview.1784835037854-0d7c4735-f34e-4e85-9a60-798a5831f15b.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__mesh-gradient-ink","t":"Mesh gradient ink","d":"Animated WebGL shader background in the Mesh Gradient style. Ink variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/mesh-gradient-ink/default/preview.1784834910912-14d0bca4-fd27-43eb-85b4-c80efdedf18d.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__mesh-gradient-purple","t":"Mesh gradient purple","d":"Animated WebGL shader background in the Mesh Gradient style. Purple variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/mesh-gradient-purple/default/preview.1784835038165-a04e266e-19e2-417d-aeab-38114c84a056.webp","pc":"paper-design"},{"id":"21st:paper-design__metaballs","t":"Metaballs","d":"Animated WebGL shader background in the Metaballs style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/metaballs/default/preview.1784835442952-bc09ecfe-6882-4c18-a43c-1327d61656ba.webp","pc":"paper-design"},{"id":"21st:paper-design__metaballs-background","t":"Metaballs background","d":"Animated WebGL shader background in the Metaballs style. Background variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/metaballs-background/default/preview.1784835464285-6c7fbb1f-6cb4-4b16-a71d-d993cc6e9046.webp","pc":"paper-design"},{"id":"21st:paper-design__metaballs-ink-drops","t":"Metaballs ink drops","d":"Animated WebGL shader background in the Metaballs style. Ink Drops variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/metaballs-ink-drops/default/preview.1784835451281-c312182e-92d1-404d-afc0-0be493550ed0.webp","pc":"paper-design"},{"id":"21st:paper-design__metaballs-solar","t":"Metaballs solar","d":"Animated WebGL shader background in the Metaballs style. Solar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#FB9","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/metaballs-solar/default/preview.1784835459105-7dcca5ac-4a01-4a59-babd-4ce9c77a364b.webp","pc":"paper-design"},{"id":"21st:paper-design__neuro-noise","t":"Neuro noise","d":"Animated WebGL shader background in the Neuro Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/neuro-noise/default/preview.1784835640450-654598dd-8578-4c4c-a781-b388086a7e1e.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__neuro-noise-bloodstream","t":"Neuro noise bloodstream","d":"Animated WebGL shader background in the Neuro Noise style. Bloodstream variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/neuro-noise-bloodstream/default/preview.1784835658277-7b2c934d-6b6c-4a74-8df8-2a577334fcdd.webp","pc":"paper-design"},{"id":"21st:paper-design__neuro-noise-ghost","t":"Neuro noise ghost","d":"Animated WebGL shader background in the Neuro Noise style. Ghost variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#D","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/neuro-noise-ghost/default/preview.1784835663337-1566f1c9-9749-4152-9df1-13289e6e59f9.webp","pc":"paper-design"},{"id":"21st:paper-design__neuro-noise-sensation","t":"Neuro noise sensation","d":"Animated WebGL shader background in the Neuro Noise style. Sensation variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/neuro-noise-sensation/default/preview.1784835657561-2901364e-08e9-40b8-9343-0933067fdce6.webp","pc":"paper-design"},{"id":"21st:paper-design__paper-texture","t":"Paper texture","d":"Animated WebGL shader background in the Paper Texture style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/paper-texture/default/preview.1784835114400-8fa97a86-f518-4239-b2c8-b35c5ac74976.webp","pc":"paper-design"},{"id":"21st:paper-design__paper-texture-abstract","t":"Paper texture abstract","d":"Animated WebGL shader background in the Paper Texture style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/paper-texture-abstract/default/preview.1784835136417-16f6798a-0589-4afe-81c2-fa2011f96431.webp","pc":"paper-design"},{"id":"21st:paper-design__paper-texture-cardboard","t":"Paper texture cardboard","d":"Animated WebGL shader background in the Paper Texture style. Cardboard variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/paper-texture-cardboard/default/preview.1784835131403-99769b1d-0555-4ee3-b98c-74ba0142d761.webp","pc":"paper-design"},{"id":"21st:paper-design__paper-texture-details","t":"Paper texture details","d":"Animated WebGL shader background in the Paper Texture style. Details variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/paper-texture-details/default/preview.1784835136060-251db343-ec15-4a47-8d62-f83922b7eb86.webp","pc":"paper-design"},{"id":"21st:paper-design__paper-waves","t":"Paper waves","d":"Animated WebGL shader background in the Waves style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#03192","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/paper-waves/default/preview.1784835356068-dd8dc00f-e59f-4ba0-804c-1f631f22752a.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__perlin-noise","t":"Perlin noise","d":"Animated WebGL shader background in the Perlin Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/perlin-noise/default/preview.1784835382818-d602a21a-3f7f-440d-a7f8-273c9ab9fc88.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__perlin-noise-moss","t":"Perlin noise moss","d":"Animated WebGL shader background in the Perlin Noise style. Moss variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/perlin-noise-moss/default/preview.1784835399860-e9887832-66a5-49b0-ae19-342385894aec.webp","pc":"paper-design"},{"id":"21st:paper-design__perlin-noise-nintendo-water","t":"Perlin noise nintendo water","d":"Animated WebGL shader background in the Perlin Noise style. Nintendo Water variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color p","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/perlin-noise-nintendo-water/default/preview.1784835393516-a63780d5-0b60-408f-b947-8c7bfd2474fc.webp","pc":"paper-design"},{"id":"21st:paper-design__perlin-noise-worms","t":"Perlin noise worms","d":"Animated WebGL shader background in the Perlin Noise style. Worms variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/perlin-noise-worms/default/preview.1784835407967-b3540143-a944-4e4e-8934-b64e12a24e8c.webp","pc":"paper-design"},{"id":"21st:paper-design__pulsing-border","t":"Pulsing border","d":"Animated WebGL shader background in the Pulsing Border style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","u":9,"pl":"https://cdn.21st.dev/paper-design/pulsing-border/default/preview.1784835728404-a919dbd0-45b1-4eb2-9275-b5c7acafce24.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__pulsing-border-circle","t":"Pulsing border circle","d":"Animated WebGL shader background in the Pulsing Border style. Circle variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/pulsing-border-circle/default/preview.1784835744687-caf4cdf4-015b-4d79-ab39-968abbe4cfa6.webp","pc":"paper-design"},{"id":"21st:paper-design__pulsing-border-northern-lights","t":"Pulsing border northern lights","d":"Animated WebGL shader background in the Pulsing Border style. Northern lights variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-colo","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/pulsing-border-northern-lights/default/preview.1784835745489-919cccba-88e9-45f2-a863-da578a2e2545.webp","pc":"paper-design"},{"id":"21st:paper-design__pulsing-border-solid-line","t":"Pulsing border solid line","d":"Animated WebGL shader background in the Pulsing Border style. Solid line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pal","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/pulsing-border-solid-line/default/preview.1784835750103-82580357-d1d8-4693-9984-17a9e0ce86a7.webp","pc":"paper-design"},{"id":"21st:paper-design__simplex-noise","t":"Simplex noise","d":"Animated WebGL shader background in the Simplex Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/simplex-noise/default/preview.1784835415225-9b4051f1-7e84-4abd-8937-82565b9af146.webp","pc":"paper-design"},{"id":"21st:paper-design__simplex-noise-bubblegum","t":"Simplex noise bubblegum","d":"Animated WebGL shader background in the Simplex Noise style. Bubblegum variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palet","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/simplex-noise-bubblegum/default/preview.1784835437019-21f7739e-202c-43b5-bf79-156c3ec6da84.webp","pc":"paper-design"},{"id":"21st:paper-design__simplex-noise-first-contact","t":"Simplex noise first contact","d":"Animated WebGL shader background in the Simplex Noise style. First contact variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color p","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/simplex-noise-first-contact/default/preview.1784835429481-9673908d-ec4f-43ee-80bb-e3c72fc0d2b2.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__simplex-noise-spots","t":"Simplex noise spots","d":"Animated WebGL shader background in the Simplex Noise style. Spots variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/simplex-noise-spots/default/preview.1784835421560-ccf247b2-ce38-46b6-b5b1-161913a12cd7.webp","pc":"paper-design"},{"id":"21st:paper-design__smoke-ring","t":"Smoke ring","d":"Animated WebGL shader background in the Smoke Ring style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/smoke-ring/default/preview.1784835680179-d950ef45-c047-490a-bc1e-e7e2a06be9ee.webp","pc":"paper-design"},{"id":"21st:paper-design__smoke-ring-cloud","t":"Smoke ring cloud","d":"Animated WebGL shader background in the Smoke Ring style. Cloud variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#6A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/smoke-ring-cloud/default/preview.1784835702170-b160eeef-e301-4ae4-a5d2-7fe9a7bcc08c.webp","pc":"paper-design"},{"id":"21st:paper-design__smoke-ring-line","t":"Smoke ring line","d":"Animated WebGL shader background in the Smoke Ring style. Line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#050","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/smoke-ring-line/default/preview.1784835681639-5658525b-462c-452b-b83b-caa731a294c5.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__smoke-ring-solar","t":"Smoke ring solar","d":"Animated WebGL shader background in the Smoke Ring style. Solar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#6A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/smoke-ring-solar/default/preview.1784835685728-f4740e26-ee04-49ac-bb3a-2d5c8d5ba7b1.webp","pc":"paper-design"},{"id":"21st:paper-design__spiral","t":"Spiral","d":"Animated WebGL shader background in the Spiral style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0904","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/spiral/default/preview.1784835858282-11cd8d21-8358-4929-b4a3-83ae9afbebb9.webp","pc":"paper-design"},{"id":"21st:paper-design__spiral-droplet","t":"Spiral droplet","d":"Animated WebGL shader background in the Spiral style. Droplet variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#C026","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/spiral-droplet/default/preview.1784835864949-8cb51c93-ad0b-40ae-8226-f3f2ad637f51.webp","pc":"paper-design"},{"id":"21st:paper-design__spiral-jungle","t":"Spiral jungle","d":"Animated WebGL shader background in the Spiral style. Jungle variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#09041","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/spiral-jungle/default/preview.1784835859647-e7e1a405-edad-48ce-8d45-460a527f3fc9.webp","pc":"paper-design"},{"id":"21st:paper-design__spiral-swirl","t":"Spiral swirl","d":"Animated WebGL shader background in the Spiral style. Swirl variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#C026D3","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/spiral-swirl/default/preview.1784835880851-9bcb1a0d-306a-45ff-a4cb-4d8f6b6199d9.webp","pc":"paper-design"},{"id":"21st:paper-design__static-mesh-gradient","t":"Static mesh gradient","d":"Static WebGL shader background in the Static Mesh Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pa","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-mesh-gradient/default/preview.1784835060656-83350887-1f7f-4997-87e6-a4771fa4efda.webp","pc":"paper-design"},{"id":"21st:paper-design__static-mesh-gradient-1960s","t":"Static mesh gradient 1960s","d":"Static WebGL shader background in the Static Mesh Gradient style. 1960s variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pale","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-mesh-gradient-1960s/default/preview.1784835063569-68d694c7-b63d-44f6-9d3c-5207e1d0e4bc.webp","pc":"paper-design"},{"id":"21st:paper-design__static-mesh-gradient-sea","t":"Static mesh gradient sea","d":"Static WebGL shader background in the Static Mesh Gradient style. Sea variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","u":4,"pl":"https://cdn.21st.dev/paper-design/static-mesh-gradient-sea/default/preview.1784835087820-b2a414fd-0cc6-4943-a0e3-9fc8c6759eee.webp","pc":"paper-design"},{"id":"21st:paper-design__static-mesh-gradient-sunset","t":"Static mesh gradient sunset","d":"Static WebGL shader background in the Static Mesh Gradient style. Sunset variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pal","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-mesh-gradient-sunset/default/preview.1784835063264-4d9288a2-8fbd-432a-a0fb-4764401d993b.webp","pc":"paper-design"},{"id":"21st:paper-design__static-radial-gradient","t":"Static radial gradient","d":"Static WebGL shader background in the Static Radial Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color ","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-radial-gradient/default/preview.1784835090857-1a5fdd38-13b8-44a7-af32-1aae4e8c1711.webp","pc":"paper-design"},{"id":"21st:paper-design__static-radial-gradient-cross-section","t":"Static radial gradient cross section","d":"Static WebGL shader background in the Static Radial Gradient style. Cross Section variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-radial-gradient-cross-section/default/preview.1784835109688-94461fd7-40d8-4f36-aebb-43ad247c71c7.webp","pc":"paper-design"},{"id":"21st:paper-design__static-radial-gradient-lo-fi","t":"Static radial gradient lo fi","d":"Static WebGL shader background in the Static Radial Gradient style. Lo-Fi variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pa","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-radial-gradient-lo-fi/default/preview.1784835090210-9839edde-3eb5-4ed5-bace-ae7145acd780.webp","pc":"paper-design"},{"id":"21st:paper-design__static-radial-gradient-radial","t":"Static radial gradient radial","d":"Static WebGL shader background in the Static Radial Gradient style. Radial variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color p","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/static-radial-gradient-radial/default/preview.1784835113857-58ba9347-c892-41e5-b590-f1bfbf5707dd.webp","pc":"paper-design"},{"id":"21st:paper-design__swirl","t":"Swirl","d":"Animated WebGL shader background in the Swirl style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#09090","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/swirl/default/preview.1784835325173-8494241b-de6b-4214-9e70-25c06f056930.webp","pc":"paper-design"},{"id":"21st:paper-design__swirl-007","t":"Swirl 007","d":"Animated WebGL shader background in the Swirl style. 007 variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#09090B, #","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/swirl-007/default/preview.1784835332874-70dd6851-ebc2-455c-be61-518e3d88c083.webp","pc":"paper-design"},{"id":"21st:paper-design__swirl-candy","t":"Swirl candy","d":"Animated WebGL shader background in the Swirl style. Candy variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#A855F7,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/swirl-candy/default/preview.1784835348098-84e870ed-413a-4220-bc75-c46ca2af3491.webp","pc":"paper-design"},{"id":"21st:paper-design__swirl-opening","t":"Swirl opening","d":"Animated WebGL shader background in the Swirl style. Opening variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#A855F","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/swirl-opening/default/preview.1784835339183-fec87fe1-474e-45d2-9e7c-ab7daa816e6b.webp","pc":"paper-design"},{"id":"21st:paper-design__voronoi","t":"Voronoi","d":"Animated WebGL shader background in the Voronoi style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#061","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/voronoi/default/preview.1784835788924-1a5afe15-b76c-43cb-9bfd-07c1fa5991b7.webp","pc":"paper-design"},{"id":"21st:paper-design__voronoi-bubbles","t":"Voronoi bubbles","d":"Animated WebGL shader background in the Voronoi style. Bubbles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#67E","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/voronoi-bubbles/default/preview.1784835811435-55c98a30-9d20-4235-bfd8-ef4dd62008fd.webp","pc":"paper-design"},{"id":"21st:paper-design__voronoi-cells","t":"Voronoi cells","d":"Animated WebGL shader background in the Voronoi style. Cells variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#67E8F","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/voronoi-cells/default/preview.1784835809217-b2c10222-01f4-4b7b-bcd6-343243461b5e.webp","pc":"paper-design"},{"id":"21st:paper-design__voronoi-lights","t":"Voronoi lights","d":"Animated WebGL shader background in the Voronoi style. Lights variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0610","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/voronoi-lights/default/preview.1784835797402-d43c8cc9-038b-42e6-af05-4140712a71e9.webp","pc":"paper-design"},{"id":"21st:paper-design__warp","t":"Warp","d":"Animated color fields warped by noise and swirls over base patterns (checks, stripes, or split edge). Blends many colors with adjustable distribution, softness, distortion, and swi","k":"component","s":"21st","c":"other","g":"other","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp/default/preview.1785208848985-94b39b32-6e29-4a5a-847c-f31b577b7bca.png","pc":"paper-design"},{"id":"21st:paper-design__warp-cauldron-pot","t":"Warp cauldron pot","d":"Animated WebGL shader background in the Warp style. Cauldron Pot variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp-cauldron-pot/default/preview.1784835287343-557d4f46-52cb-45b8-b8d4-457718869c67.webp","pc":"paper-design"},{"id":"21st:paper-design__warp-kelp","t":"Warp kelp","d":"Animated WebGL shader background in the Warp style. Kelp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F43F5E, #","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp-kelp/default/preview.1784835303588-2b84a7e7-9dc1-4587-aeca-5420d47f42bb.webp","pc":"paper-design"},{"id":"21st:paper-design__warp-live-ink","t":"Warp live ink","d":"Animated WebGL shader background in the Warp style. Live Ink variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F43F5","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp-live-ink/default/preview.1784835293091-c85773d0-d4d4-4a98-9baf-32dfe495cf09.webp","pc":"paper-design"},{"id":"21st:paper-design__warp-nectar","t":"Warp nectar","d":"Animated WebGL shader background in the Warp style. Nectar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#16051B,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp-nectar/default/preview.1784835309435-c33ae061-35ec-4d48-82e0-7b4c090aa32e.webp","pc":"paper-design"},{"id":"21st:paper-design__warp-passion","t":"Warp passion","d":"Animated WebGL shader background in the Warp style. Passion variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#16051B","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/warp-passion/default/preview.1784835316177-2f663bef-9768-4376-af36-161dc3f448d7.webp","pc":"paper-design"},{"id":"21st:paper-design__water","t":"Water","d":"Animated WebGL shader background in the Water style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#10182","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/water/default/preview.1784835153707-dda6e97a-4ab2-4d31-ae4d-ad50df7ea4b5.webp","pc":"paper-design"},{"id":"21st:paper-design__water-abstract","t":"Water abstract","d":"Animated WebGL shader background in the Water style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#B8E1","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/water-abstract/default/preview.1784835159037-181989a2-77f1-4dc3-bc9e-52c764145860.webp","pc":"paper-design"},{"id":"21st:paper-design__water-slow-mo","t":"Water slow mo","d":"Animated WebGL shader background in the Water style. Slow-mo variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#10182","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/water-slow-mo/default/preview.1784835157898-71bc3ded-8143-400c-913b-435b82d54796.webp","pc":"paper-design","tg":["background"]},{"id":"21st:paper-design__water-streaming","t":"Water streaming","d":"Animated WebGL shader background in the Water style. Streaming variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#B8E","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/water-streaming/default/preview.1784835175251-3c1bf2de-3eaf-4414-88db-6475c003af7b.webp","pc":"paper-design"},{"id":"21st:paper-design__waves-groovy","t":"Waves groovy","d":"Animated WebGL shader background in the Waves style. Groovy variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#031926","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/waves-groovy/default/preview.1784835360505-358bbf54-e336-43c2-9b61-2013835b80c5.webp","pc":"paper-design"},{"id":"21st:paper-design__waves-ride-the-wave","t":"Waves ride the wave","d":"Animated WebGL shader background in the Waves style. Ride the wave variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/waves-ride-the-wave/default/preview.1784835378437-efc3bef9-c016-4bb0-b1a8-8ba95c879e79.webp","pc":"paper-design"},{"id":"21st:paper-design__waves-tangled-up","t":"Waves tangled up","d":"Animated WebGL shader background in the Waves style. Tangled up variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#38","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"paper-design","st":"indexed","pl":"https://cdn.21st.dev/paper-design/waves-tangled-up/default/preview.1784835370071-9d360123-5bdf-4b51-aa99-69003141ccff.webp","pc":"paper-design"},{"id":"21st:passerhub__grid-background","t":"Grid background","d":"InfiniteGridBackground","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"passerhub","st":"indexed","pl":"https://cdn.21st.dev/passerhub/grid-background/default/preview.1774885934683.png","pc":"passerhub"},{"id":"21st:pate1kiran__code-pen-home-skeuomorphism-in-the-dark-button","t":"Code pen home skeuomorphism in the dark button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"pate1kiran","st":"indexed","pl":"https://cdn.21st.dev/larsen66/code-pen-home-skeuomorphism-in-the-dark-button/default/preview.1753799633878.png","pc":"pate1kiran"},{"id":"21st:pate1kiran__daybreak-text-reveal","t":"Daybreak text reveal","d":"Here is Text Reveal component","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pate1kiran","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/daybreak-text-reveal/default/preview.1753889455685.png","pc":"pate1kiran","tg":["text"]},{"id":"21st:pate1kiran__progressive-blur-modal","t":"Progressive blur modal","d":"Here is  Progressive Blur Modal component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"pate1kiran","st":"indexed","u":33,"pl":"https://cdn.21st.dev/larsen66/progressive-blur-modal/default/preview.1753800146112.png","pc":"pate1kiran","tg":["list","modal"]},{"id":"21st:patrick-xin__onboarding-dialog","t":"Onboarding dialog","d":"A multi-step onboarding dialog with carousel navigation, animated progress dots, and cross-fading content. Built with Embla Carousel and Motion.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"patrick-xin","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/onboarding-dialog/demos/default/preview.1773281994274.png","pc":"patrick-xin","tg":["carousel","modal","onboarding","progress"]},{"id":"21st:patrick-xin__vercel-notification-popover","t":"Vercel notification popover","d":"A Vercel-style notification center that adapts to the device. Renders as a popover on desktop and a bottom sheet on mobile, with animated tabs and hover actions.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"patrick-xin","st":"rated","u":23,"pl":"https://cdn.21st.dev/larsen66/vercel-notification-popover/default/preview.1773384460802.png","pc":"patrick-xin","tg":["notification","popover","tabs"],"sc":21},{"id":"21st:patrick.thomas.dunn.619__cursor","t":"Cursor","d":"Fun reactive cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"patrick.thomas.dunn.619","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn.619/cursor/default/preview.1756414748623.png","pc":"patrick.thomas.dunn.619"},{"id":"21st:patrick.thomas.dunn1988__20-demons","t":"20 demons","d":"card hover effects","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/20-demons/default/preview.1765617509478.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__add-requests","t":"Add requests","d":"A simple request feature","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/add-requests/default/preview.1761633101999.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__bloodline","t":"Bloodline","d":"Bloodline showcases a simple animated WebGL background","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"patrick.thomas.dunn1988","st":"indexed","u":56,"pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/bloodline/default/preview.1763626091198.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__desert-drift","t":"Desert drift","d":"As you scroll through the night time animation, a 1986 Toyota Corolla drifts on a desert highway, followed by particles and a camera. ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/desert-drift/default/preview.1750894933609.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__drift-master","t":"Drift master","d":"Scroll through a 3D environment which showcases some of the most iconic cars in the drift world today.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/drift-master/default/preview.1769800258597.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__glass-spiral","t":"Glass spiral","d":"Glass spiral with auto focus and zoom ","k":"component","s":"21st","c":"other","g":"other","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/glass-spiral/default/preview.1757910386234.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__glass-thread","t":"Glass thread","d":"A prismatic thread hero ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/glass-thread/default/preview.1765654844575.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__inferno","t":"Inferno","d":"Lava shader with cursor look at.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/inferno/default/preview.1774630829103.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__inverted-fluid","t":"Inverted fluid","d":"Fluid cursor with inverted mix-blend-mode and fluid canvas wake.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/inverted-fluid/default/preview.1773324596355.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__liquid-chrome","t":"Liquid chrome","d":"WebGL Liquid Chrome with click ripples","k":"component","s":"21st","c":"motion/background","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/liquid-chrome/default/preview.1763762808580.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__mil-sim","t":"Mil sim","d":"Military HUD","k":"component","s":"21st","c":"other","g":"other","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/mil-sim/default/preview.1764586367152.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__monaco-language-studio","t":"Monaco language studio","k":"component","s":"21st","c":"other","g":"other","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/monaco-language-studio/default/preview.1763724621179.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__parallax-star","t":"Parallax star","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/parallax-star/default/preview.1751707282407.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__phased-out","t":"Phased out","d":"Wavy Noise w/ Click Ripples","k":"component","s":"21st","c":"other","g":"other","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/phased-out/default/preview.1763627641930.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__quantum-orb","t":"Quantum orb","d":"Planet for Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/quantum-orb/default/preview.1767775190568.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__robot-flyby","t":"Robot flyby","d":"As you scroll through the animation, a door will open and a robot will fly down the spaceships hallway. ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/robot-flyby/default/preview.1750896216789.png","pc":"patrick.thomas.dunn1988","tg":["scroll-area"]},{"id":"21st:patrick.thomas.dunn1988__scroll-progress-bar","t":"Scroll progress bar","d":"Scroll to see a planetary progress indicator. ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/scroll-progress-bar/default/preview.1753955083570.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__sneak","t":"Sneak","d":"Interactive 3D Text Effect\nA WebGL text component that creates a dynamic ripple effect when you hover over it. The text \"bubbles up\" from the surface based on mouse proximity, with","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","u":22,"pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/sneak/default/preview.1755731715793.png","pc":"patrick.thomas.dunn1988","tg":["text"]},{"id":"21st:patrick.thomas.dunn1988__spotlight-card","t":"Spotlight card","d":"A high-fidelity, interactive card component with a cinematic lighting system driven by CSS and WebGL shader rendering","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/spotlight-card/default/preview.1775045299281.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__tidal-cursor","t":"Tidal cursor","d":"Fun Reactive Cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/tidal-cursor/default/preview.1756416011619.png","pc":"patrick.thomas.dunn1988","tg":["cursor"]},{"id":"21st:patrick.thomas.dunn1988__twentyfirsthero-tsx","t":"Twentyfirsthero tsx","d":"WebGL Hero with glass buttons and onHover effects","k":"component","s":"21st","c":"actions/button","g":"actions","a":"patrick.thomas.dunn1988","st":"indexed","pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/twentyfirsthero-tsx/default/preview.1766579276539.png","pc":"patrick.thomas.dunn1988"},{"id":"21st:patrick.thomas.dunn1988__wilderness","t":"Wilderness","d":"On Hover Parallax Hero","k":"component","s":"21st","c":"media/gallery","g":"media","a":"patrick.thomas.dunn1988","st":"indexed","u":62,"pl":"https://cdn.21st.dev/patrick.thomas.dunn1988/wilderness/default/preview.1760777238296.png","pc":"patrick.thomas.dunn1988","tg":["hero","image"]},{"id":"21st:paul.beresuita__new-component","t":"New component","d":"testing testing testing testing testing testing","k":"component","s":"21st","c":"other","g":"other","a":"paul.beresuita","st":"indexed","pl":"https://cdn.21st.dev/paul.beresuita/new-component/default/preview.1751460084754.png","pc":"paul.beresuita"},{"id":"21st:pbracker__brackerparqueinstalado","t":"Brackerparqueinstalado","d":"Placeholder component - content removed","k":"component","s":"21st","c":"other","g":"other","a":"pbracker","st":"indexed","pl":"https://21st.dev/@pbracker/components/brackerparqueinstalado","pc":"pbracker"},{"id":"21st:pdiger1209__chatgpt","t":"Chatgpt","d":"Make me chatgpt prompt for building a fully functional website generator ai chatbox","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"pdiger1209","st":"indexed","pl":"https://cdn.21st.dev/pdiger1209/chatgpt/default/preview.1760132332612.png","pc":"pdiger1209"},{"id":"21st:petermastras__statcard","t":"Statcard","d":"Cerulean Edge stat card with accent bar, trend indicator, and optional link. Used in dashboards to display key financial metrics with typographic-led design.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"petermastras","st":"indexed","pl":"https://21st.dev/@petermastras/components/statcard","pc":"petermastras"},{"id":"21st:phandangkhoa96__flipped-menu","t":"Flipped menu","d":"Flipped Menu brings a playful twist to navigation. When opened, the menu flips into view with a smooth 3D effect, like turning over a card. It adds a touch of depth and surprise th","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"phandangkhoa96","st":"indexed","pl":"https://cdn.21st.dev/user_2vwSXAKiCCwaQxQ9wGR4srwIXLe/flipped-menu/flipped-menu/preview.png","pc":"phandangkhoa96"},{"id":"21st:phandangkhoa96__momentum-lines","t":"Momentum lines","d":"Momentum Lines is an interactive visual component that brings fluidity to cursor movement.  As you move your cursor, vertical lines gently follow along with a soft, gliding motion ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"phandangkhoa96","st":"indexed","pl":"https://cdn.21st.dev/user_2vwSXAKiCCwaQxQ9wGR4srwIXLe/momentum-lines/momentum-lines/preview.png","pc":"phandangkhoa96","tg":["cursor"]},{"id":"21st:phandangkhoa96__tiles-background","t":"Tiles background","d":"An interactive grid of tiles that enhances user engagement. When a user hovers over a tile, it smoothly changes color and adds a subtle shine effect to highlight the tile. Each hov","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"phandangkhoa96","st":"indexed","pl":"https://cdn.21st.dev/user_2vwSXAKiCCwaQxQ9wGR4srwIXLe/tiles-background/tiles-background/preview.png","pc":"phandangkhoa96"},{"id":"21st:phucbm__draw-svg","t":"Draw svg","d":"Animate SVG path drawing with GSAP's DrawSVGPlugin support.","k":"component","s":"21st","c":"other","g":"other","a":"phucbm","st":"indexed","pl":"https://cdn.21st.dev/phucbm/draw-svg/default/preview.1762696456593.png","pc":"phucbm"},{"id":"21st:phucbm__infinite-image-carousel","t":"Infinite image carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"phucbm","st":"indexed","pl":"https://cdn.21st.dev/phucbm/infinite-image-carousel/default/preview.1762498399588.png","pc":"phucbm"},{"id":"21st:phucbm__magnetic","t":"Magnetic","d":"Add smooth magnetic attraction effects for any HTML elements.","k":"component","s":"21st","c":"motion/cursor","g":"motion","a":"phucbm","st":"indexed","pl":"https://cdn.21st.dev/phucbm/magnetic/default/preview.1762228962012.png","pc":"phucbm"},{"id":"21st:phucbm__moving-border","t":"Moving border","d":"Animated gradient border that smoothly travels around any element, from rounded rectangles to perfect circles.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"phucbm","st":"indexed","u":34,"pl":"https://cdn.21st.dev/phucbm/moving-border/default/preview.1762237382565.png","pc":"phucbm","tg":["border"]},{"id":"21st:phucbm__shimmer-layer","t":"Shimmer layer","d":"Work with any of your UI. Pure CSS to add an animated shimmer effect that activates on hover.","k":"component","s":"21st","c":"status/skeleton","g":"status","a":"phucbm","st":"indexed","pl":"https://cdn.21st.dev/phucbm/shimmer-layer/default/preview.1762786272850.png","pc":"phucbm"},{"id":"21st:phucbm__text-ripple","t":"Text ripple","d":"Mouse-tracked ripple effect applied to headline text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"phucbm","st":"indexed","pl":"https://cdn.21st.dev/phucbm/text-ripple/default/preview.1760931088936.png","pc":"phucbm"},{"id":"21st:pieetie__hero-section","t":"Hero section","d":"Modern hero section with dark mode support, CTA buttons and trust indicators for AI products.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section/default/preview.1751973428023.png","pc":"pieetie"},{"id":"21st:pieetie__hero-section-1","t":"Hero section 1","d":"Modern hero section with dark mode support, CTA buttons and trust indicators for AI products.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section-1/default/preview.1751976996165.png","pc":"pieetie"},{"id":"21st:pieetie__hero-section-2","t":"Hero section 2","d":"Modern hero section with dark mode support and CTA buttons for analytics products.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section-2/default/preview.1752266160756.png","pc":"pieetie"},{"id":"21st:pieetie__hero-section-3","t":"Hero section 3","d":"A centered hero section with bold typography and a clear cta to download the app for Mac or Windows.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section-3/default/preview.1752264925091.png","pc":"pieetie"},{"id":"21st:pieetie__hero-section-4","t":"Hero section 4","d":"Minimal hero with headline, subtext, and two action buttons on a soft gradient background.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section-4/default/preview.1752264315332.png","pc":"pieetie"},{"id":"21st:pieetie__hero-section-5","t":"Hero section 5","d":"Minimalist hero section for dark mode with a soft blue glowing background.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pieetie","st":"indexed","pl":"https://cdn.21st.dev/pieetie/hero-section-5/default/preview.1752008664695.png","pc":"pieetie"},{"id":"21st:pietro.calderini.nannerini__contatti-cta-mappa-embed","t":"Contatti cta mappa embed","d":"Contact section without form, for preview-mode demos of Italian local businesses: dark CTA panel (active call + disabled WhatsApp magnetic buttons), address/hours/contacts card wit","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/contatti-cta-mappa-embed","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__divisore-stone-rings-cerchi","t":"Divisore stone rings cerchi","d":"Pure-CSS section divider for beauty/wellness demos: concentric 'hot stones' rings between sections, zero assets and zero JS, colors from CSS variable tokens (--color-accent, --colo","k":"component","s":"21st","c":"other","g":"other","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/divisore-stone-rings-cerchi","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__footer-social-piva","t":"Footer social piva","d":"Minimal one-page footer for Italian local business sites: inline logo, single social link (Facebook SVG inline, lucide dropped brand icons), privacy link, copyright with P.IVA plac","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/footer-social-piva","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__gallery-lightbox-illustrated-florist-21st","t":"Gallery lightbox illustrated florist 21st","d":"Galleria per vetrina di fioraio: griglia responsive con hover-zoom e lightbox modale (frecce, Esc, focus) su illustrazioni di composizioni floreali. Scheletro da @larsen66/gallery-","k":"component","s":"21st","c":"media/gallery","g":"media","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/gallery-lightbox-illustrated-florist-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__hero-image-text-two-buttons-21st","t":"Hero image text two buttons 21st","d":"Hero for beauty/wellness studio demos, skeleton from 21st.dev @tommyjepsen/hero-with-image-text-and-two-buttons: 2-col grid, shadcn Badge eyebrow + kinetic H1 + copy + 2 CTAs (magn","k":"component","s":"21st","c":"actions/button","g":"actions","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/hero-image-text-two-buttons-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__hero-image-text-two-buttons-florist-21st","t":"Hero image text two buttons florist 21st","d":"Hero per vetrina di fioraio: badge eyebrow shadcn/ui, titolo con riga in corsivo, doppio CTA (WhatsApp + telefono) con motion magnetico, illustrazione firma a destra invece di foto","k":"component","s":"21st","c":"actions/button","g":"actions","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/hero-image-text-two-buttons-florist-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__hero-mosaico-vivaio-21st","t":"Hero mosaico vivaio 21st","d":"Hero vivaio/attività agricola: mosaico immagini 2x2 (skeleton 21st @tommyjepsen/hero-with-group-of-images), H1 cinetico, firma SVG linee-di-serra stroke-dashoffset, CTA telefono di","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/hero-mosaico-vivaio-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__perche-sceglierci-feature-advantages-21st","t":"Perche sceglierci feature advantages 21st","d":"Why-choose-us section for local business demos, skeleton from 21st.dev @tommyjepsen/feature-with-advantages: shadcn Badge kicker + H2 + intro + flat 2-col grid of check-icon/text r","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/perche-sceglierci-feature-advantages-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__perche-sceglierci-feature-advantages-florist-21st","t":"Perche sceglierci feature advantages florist 21st","d":"Sezione 'perché sceglierci' per vetrina di fioraio: badge kicker shadcn/ui, titolo, intro, griglia flat 2 colonne di punti di forza con icona Check — senza card separate, senza rec","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/perche-sceglierci-feature-advantages-florist-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__rituale-strip-passaggi","t":"Rituale strip passaggi","d":"Static 3-step narrative strip ('your moment' ritual) for beauty/wellness demos: kicker + H2 + 3 numbered steps in italic serif, scroll-reveal classes, tokenized on CSS vars. Not an","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/rituale-strip-passaggi","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__servizi-feature-72-21st","t":"Servizi feature 72 21st","d":"Services grid for beauty/wellness demos, skeleton from 21st.dev @shadcnblockscom/feature-72: header (kicker + H2 + arrow link) above, symmetric cards with 16/9 Recraft illustration","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/servizi-feature-72-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__servizi-feature-73-featured-florist-21st","t":"Servizi feature 73 featured florist 21st","d":"Services grid for florist demos, skeleton from 21st.dev @shadcnblockscom/feature-73: 1 full-width featured card (Recraft illustration, for the tier-pitch service) + N icon-panel ca","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/servizi-feature-73-featured-florist-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__stagioni-marquee-vivaio-21st","t":"Stagioni marquee vivaio 21st","d":"Striscia stagionalità 'calendario del vivaio': marquee CSS puro (skeleton 21st @tom_ui/marquee) con chip icone Recraft, pausa on hover, versione sr-only e fallback statico prefers-","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/stagioni-marquee-vivaio-21st","pc":"pietro.calderini.nannerini"},{"id":"21st:pietro.calderini.nannerini__storia-split-illustrata","t":"Storia split illustrata","d":"About/story section for local business demos: 2-col split (kicker + H2 + paragraphs left, abstract SVG illustration panel with gradient right), scroll-reveal classes, tokenized on ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"pietro.calderini.nannerini","st":"indexed","pl":"https://21st.dev/@pietro.calderini.nannerini/components/storia-split-illustrata","pc":"pietro.calderini.nannerini"},{"id":"21st:pilapilun__hs-office","t":"Hs office","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"pilapilun","st":"indexed","pl":"https://cdn.21st.dev/pilapilun/hs-office/default/preview.1786008047043-63668785-7d4f-47d8-ac0e-d2c24974bc63.webp","pc":"pilapilun"},{"id":"21st:piyushxdev__3d-parallax-unfurling-gallery","t":"3d parallax unfurling gallery","d":"A cinematic, scroll-driven image grid gallery with deep 3D matrix rotations, smooth multi-column parallax translation offsets, and responsive fluid boundaries for landing showcases","k":"component","s":"21st","c":"media/gallery","g":"media","a":"piyushxdev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/piyush.06719011722/3d-parallax-unfurling-gallery/default/preview.1784271262296-1f40b7e0-677f-4686-9f06-0736a44dedfa.png","pc":"piyushxdev","tg":["gallery","grid"]},{"id":"21st:piyushxdev__interactive-video-portfolio-scroller","t":"Interactive video portfolio scroller","d":"An interactive scroll-driven portfolio showcase featuring synchronized serif typography, a smooth vertical video track with autoplay controls, and mobile/iOS audio fallback support","k":"component","s":"21st","c":"media/carousel","g":"media","a":"piyushxdev","st":"indexed","pl":"https://cdn.21st.dev/piyushxdev/interactive-video-portfolio-scroller/default/preview.1786348513775-235fbf0d-6a99-4832-bb5b-23751fe17891.png","pc":"piyushxdev","tg":["carousel"]},{"id":"21st:platejs__block-list","t":"Block list","d":"Renders ordered and to-do list items with checkboxes inside a Plate rich-text editor.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/block-list/default/preview.1786689075210-1e0d60ca-0f74-460b-8295-4f96cbf32338.png","pc":"platejs","tg":["checkbox"]},{"id":"21st:platejs__block-selection","t":"Block selection","d":"A visual overlay that highlights selected blocks in a Plate rich-text editor.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"platejs","st":"indexed","u":15,"pl":"https://cdn.21st.dev/platejs/block-selection/default/preview.1784306917620-b997cb1b-9e3f-4299-9579-ec570b85ac1a.png","pc":"platejs"},{"id":"21st:platejs__blockquote-node","t":"Blockquote node","d":"A blockquote element for the Plate rich-text editor that renders quoted content with an italic, left-bordered style.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/blockquote-node/default/preview.1784354317374-5791b3e3-de24-4a31-b22d-67aa80d1c6c8.png","pc":"platejs"},{"id":"21st:platejs__caption","t":"Caption","d":"A text field for adding editable captions to media elements like images, videos, and files in a rich-text editor.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/caption/default/preview.1783728080179.png","pc":"platejs","tg":["image"]},{"id":"21st:platejs__code-node","t":"Code node","d":"An inline code leaf for the Plate editor that renders code snippets with monospace, muted-background styling.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/code-node/default/preview.1784303664019-0b9c03fe-cae4-460f-9875-7cb570e2254a.png","pc":"platejs"},{"id":"21st:platejs__cursor-overlay","t":"Cursor overlay","d":"A visual overlay that renders cursor positions and selection highlights on top of a Plate rich-text editor, keeping selections visible during drag & drop and when the editor loses ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"platejs","st":"indexed","u":9,"pl":"https://cdn.21st.dev/platejs/cursor-overlay/default/preview.1784355279224-7d2e254e-042e-4921-917d-cb32d49f327c.png","pc":"platejs","tg":["cursor"]},{"id":"21st:platejs__editor","t":"Editor","d":"A container component for building rich-text editors with Plate — it provides the editable content area, styling variants, and a static read-only view.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"platejs","st":"indexed","u":13,"pl":"https://cdn.21st.dev/platejs/editor/default/preview.1784741047903-4188c723-ad26-4a2b-9550-0d9918fd81e3.png","pc":"platejs","tg":["text"]},{"id":"21st:platejs__heading-node","t":"Heading node","d":"A rich-text editor heading element supporting levels H1 through H6 for the Plate editor.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"platejs","st":"indexed","u":3,"pl":"https://cdn.21st.dev/platejs/heading-node/default/preview.1784359244831-22fc41e3-9a85-4571-9eb0-b621d7b60548.png","pc":"platejs","tg":["text"]},{"id":"21st:platejs__highlight-node","t":"Highlight node","d":"A text highlighter leaf that renders marked inline text with a customizable highlight color inside a Plate editor.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"platejs","st":"indexed","u":9,"pl":"https://cdn.21st.dev/platejs/highlight-node/default/preview.1784355292230-62dba7de-0d57-41bd-aacd-0ed15db30118.png","pc":"platejs"},{"id":"21st:platejs__kbd-node","t":"Kbd node","d":"A styled keyboard-shortcut leaf that renders selected text as a keycap-styled kbd element in a Plate editor.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/kbd-node/default/preview.1784303372328-285620a6-667c-427f-9237-06e46de26bec.png","pc":"platejs"},{"id":"21st:platejs__link-node","t":"Link node","d":"A Plate editor element that renders inline hyperlinks with primary-colored underline styling and hover states.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"platejs","st":"indexed","u":10,"pl":"https://cdn.21st.dev/platejs/link-node/default/preview.1784306016040-abad1933-9f7e-4b2a-b86c-bbf6b0a55d93.png","pc":"platejs","tg":["link","text"]},{"id":"21st:platejs__math-base-kit","t":"Math base kit","d":"Plate editor plugin kit that adds static, read-only rendering of block and inline LaTeX equations for server-side and RSC content.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/math-base-kit/default/preview.1786694146611-a87ead9f-4146-4fa4-b166-ed3ce2dde94d.png","pc":"platejs"},{"id":"21st:platejs__resize-handle","t":"Resize handle","d":"A resizable wrapper with draggable resize handles for media elements in a Plate editor, letting users resize images and other blocks by dragging their side bars.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/resize-handle/default/preview.1784723137925-889e6647-af76-4889-84a5-bfbd2ce19907.png","pc":"platejs","tg":["image"]},{"id":"21st:platejs__tag-node","t":"Tag node","d":"A pill-shaped tag element for the Plate editor that renders selectable, styleable inline labels with focus and read-only link states.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/tag-node/default/preview.1784684211863-256e800a-13d4-45b4-915e-92477a23c9b8.png","pc":"platejs"},{"id":"21st:platejs__toc-base-kit","t":"Toc base kit","d":"A Plate editor plugin kit that registers a static table-of-contents element for server-side rendering of document headings.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"platejs","st":"indexed","pl":"https://cdn.21st.dev/platejs/toc-base-kit/default/preview.1786693306695-8db48e0d-f744-4fec-b421-3fd83c70f00a.png","pc":"platejs","tg":["table"]},{"id":"21st:pogotka__hero-anim-1","t":"Hero anim 1","d":"Animated WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). A drop-in, zero-dependency React","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"pogotka","st":"indexed","pl":"https://cdn.21st.dev/pogotka/hero-anim-1/default/preview.1786542321570-5519d5d2-4b0c-4bc4-97b2-9d6e427f3f00.webp","pc":"pogotka"},{"id":"21st:poyrazhawk__ascii","t":"Ascii","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. Styled with a animated look. A drop-in, zero-dependency React compone","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"poyrazhawk","st":"indexed","pl":"https://cdn.21st.dev/poyrazhawk/ascii/default/preview.1785865839248-c56bbe0f-a484-4283-bd1c-a65618157f34.webp","pc":"poyrazhawk"},{"id":"21st:poyrazhawk__gg","t":"Gg","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"poyrazhawk","st":"indexed","pl":"https://cdn.21st.dev/poyrazhawk/gg/default/preview.1785867640173-f6b5bc24-ae53-4890-bf2a-b6614e8b2484.webp","pc":"poyrazhawk"},{"id":"21st:poyrazhawk__kk","t":"Kk","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"poyrazhawk","st":"indexed","pl":"https://cdn.21st.dev/poyrazhawk/kk/default/preview.1785880239257-df4dc4b7-602e-4570-be59-865f526945b7.webp","pc":"poyrazhawk"},{"id":"21st:pqoqubbw__facebook","t":"Facebook","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"pqoqubbw","st":"indexed","pl":"https://cdn.21st.dev/user_2rfLLqHJTJWTimS7vS3vL6EhXRw/facebook/default/preview.1737985182969.png","pc":"pqoqubbw"},{"id":"21st:pqoqubbw__moon","t":"Moon","k":"component","s":"21st","c":"other","g":"other","a":"pqoqubbw","st":"indexed","pl":"https://cdn.21st.dev/user_2rfLLqHJTJWTimS7vS3vL6EhXRw/moon/default/preview.1737985496781.png","pc":"pqoqubbw"},{"id":"21st:pqoqubbw__smartphone-charging","t":"Smartphone charging","d":"Smartphone Charging Animated Icon","k":"component","s":"21st","c":"media/icon","g":"media","a":"pqoqubbw","st":"indexed","pl":"https://cdn.21st.dev/user_2rfLLqHJTJWTimS7vS3vL6EhXRw/smartphone-charging/default/preview.1737986614750.png","pc":"pqoqubbw"},{"id":"21st:pqoqubbw__vibrate","t":"Vibrate","k":"component","s":"21st","c":"other","g":"other","a":"pqoqubbw","st":"indexed","pl":"https://cdn.21st.dev/user_2rfLLqHJTJWTimS7vS3vL6EhXRw/vibrate/default/preview.1737986522634.png","pc":"pqoqubbw"},{"id":"21st:prashantsom75__fluid-spatial-hero","t":"Fluid spatial hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"prashantsom75","st":"indexed","pl":"https://cdn.21st.dev/prashantsom75/fluid-spatial-hero/default/preview.1772173336046.png","pc":"prashantsom75"},{"id":"21st:prashantsom75__perspective-scroll-showcase","t":"Perspective scroll showcase","d":"A highly immersive 3D scrolling showcase that flips between fullscreen project cards as you scroll, featuring a dynamic, infinite advertising marquee background that reacts to the ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"prashantsom75","st":"indexed","pl":"https://cdn.21st.dev/prashantsom75/perspective-scroll-showcase/default/preview.1772269413095.png","pc":"prashantsom75"},{"id":"21st:prashantsom75__scroll-morph-hero","t":"Scroll morph hero","d":"A stunning hero section that morphs from a scattered layout to a circle, and finally to a scroll-driven interactive rainbow arc.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"prashantsom75","st":"indexed","u":642,"pl":"https://cdn.21st.dev/prashantsom75/scroll-morph-hero/default/preview.1765164297799.png","pc":"prashantsom75","tg":["gallery","hero"]},{"id":"21st:prashantsom75__stacked-card-testimonials","t":"Stacked card testimonials","d":"A premium testimonial slider featuring a cyclic stacked card animation. Images loop seamlessly from front to back with smooth spring physics, complemented by a fluid, glassmorphic ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"prashantsom75","st":"indexed","pl":"https://cdn.21st.dev/prashantsom75/stacked-card-testimonials/default/preview.1769516863809.png","pc":"prashantsom75"},{"id":"21st:pratapsinghaswin__eclipse-nav-bar","t":"Eclipse nav bar","d":"A minimal navigation bar featuring a solar-eclipse dark mode switch, blending aesthetics with functionality.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"pratapsinghaswin","st":"indexed","pl":"https://cdn.21st.dev/pratapsinghaswin/eclipse-nav-bar/default/preview.1757410906725.png","pc":"pratapsinghaswin"},{"id":"21st:prebuiltui__about","t":"About","d":"Here is About section component","k":"component","s":"21st","c":"media/player","g":"media","a":"prebuiltui","st":"indexed","u":214,"pl":"https://cdn.21st.dev/prebuiltui/about/default/preview.1785191186002-e4f40010-3eb2-427b-9e8f-08fff91cad9d.png","pc":"prebuiltui","tg":["features","image","video"]},{"id":"21st:prebuiltui__autocomplete","t":"Autocomplete","d":"Here is Autocomplete component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"prebuiltui","st":"indexed","u":42,"pl":"https://cdn.21st.dev/larsen66/autocomplete/default/preview.1757050974664.png","pc":"prebuiltui","tg":["dropdown","input","search"]},{"id":"21st:prebuiltui__avatar-square","t":"Avatar square","d":"Here is Avatar Square component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"prebuiltui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/avatar-square/default/preview.1757057238721.png","pc":"prebuiltui","tg":["badge","avatar","border","notification"]},{"id":"21st:prebuiltui__badge-tag","t":"Badge tag","d":"Here is Badge Tag ","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"prebuiltui","st":"indexed","u":37,"pl":"https://cdn.21st.dev/larsen66/badge-tag/default/preview.1757090305326.png","pc":"prebuiltui","tg":["announcement","alert","badge","avatar"]},{"id":"21st:prebuiltui__banner-ui","t":"Banner ui","d":"Here is Banner ui component","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"prebuiltui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/banner-ui/default/preview.1757091327393.png","pc":"prebuiltui","tg":["announcement","ai-chat","alert","button"]},{"id":"21st:prebuiltui__breadcrumb","t":"Breadcrumb","d":"Here is Breadcrumb component","k":"component","s":"21st","c":"media/icon","g":"media","a":"prebuiltui","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/breadcrumb/default/preview.1757091856248.png","pc":"prebuiltui","tg":["icon","link","navigation-menu"]},{"id":"21st:prebuiltui__button-ui","t":"Button ui","d":"Here is Button Ui components","k":"component","s":"21st","c":"actions/button","g":"actions","a":"prebuiltui","st":"indexed","u":24,"pl":"https://cdn.21st.dev/larsen66/button-ui/default/preview.1757093042393.png","pc":"prebuiltui","tg":["border","button","icon"]},{"id":"21st:prebuiltui__cards","t":"Cards","d":"Here is Blog Card Component ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"prebuiltui","st":"indexed","u":79,"pl":"https://cdn.21st.dev/larsen66/cards/default/preview.1757561758863.png","pc":"prebuiltui","tg":["avatar","card","carousel","gallery"]},{"id":"21st:prebuiltui__checkbox-1","t":"Checkbox 1","d":"Here is Checkbox component","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"prebuiltui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/checkbox-1/default/preview.1757563685671.png","pc":"prebuiltui","tg":["checkbox","form","input","radio-group"]},{"id":"21st:prebuiltui__combobox","t":"Combobox","d":"Here is Combobox component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"prebuiltui","st":"indexed","u":75,"pl":"https://cdn.21st.dev/larsen66/combobox/default/preview.1757049781931.png","pc":"prebuiltui","tg":["chip","dropdown","popover","search"]},{"id":"21st:prebuiltui__cookies","t":"Cookies","d":"Here is Cookie Consent Popup component","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"prebuiltui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/cookies/default/preview.1757564166655.png","pc":"prebuiltui","tg":["card","modal"]},{"id":"21st:prebuiltui__dropdown-menu","t":"Dropdown menu","d":"Here is Dropdown Menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"prebuiltui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dropdown-menu/default/preview.1757565131835.png","pc":"prebuiltui","tg":["dropdown","list","menu","select"]},{"id":"21st:prebuiltui__faq-sections","t":"Faq sections","d":"Here is FAQ Sections component","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"prebuiltui","st":"indexed","u":173,"pl":"https://cdn.21st.dev/larsen66/faq-sections/default/preview.1757565917682.png","pc":"prebuiltui","tg":["accordion","faq","image"]},{"id":"21st:prebuiltui__feature-sections","t":"Feature sections","d":"Here is Feature Sections component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"prebuiltui","st":"indexed","u":146,"pl":"https://cdn.21st.dev/larsen66/feature-sections/default/preview.1757568317457.png","pc":"prebuiltui","tg":["badge","card","dashboard","features"]},{"id":"21st:prebuiltui__footer-1","t":"Footer 1","d":"Here is Footer component ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"prebuiltui","st":"indexed","u":108,"pl":"https://cdn.21st.dev/larsen66/footer-1/default/preview.1757569711350.png","pc":"prebuiltui","tg":["footer","link"]},{"id":"21st:prebuiltui__form-1","t":"Form 1","d":"Here is Form component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"prebuiltui","st":"indexed","u":96,"pl":"https://cdn.21st.dev/larsen66/form-1/default/preview.1757571359573.png","pc":"prebuiltui","tg":["button","form","input","sign-up"]},{"id":"21st:prebuiltui__hero-section","t":"Hero section","d":"Here is Hero section components","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"prebuiltui","st":"indexed","u":212,"pl":"https://cdn.21st.dev/larsen66/hero-section/default/preview.1757573862504.png","pc":"prebuiltui","tg":["announcement","cta","grid","hero"]},{"id":"21st:prebuiltui__image-gallery","t":"Image gallery","d":"Here is Image Gallery component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"prebuiltui","st":"indexed","u":246,"pl":"https://cdn.21st.dev/larsen66/image-gallery/default/preview.1757574232766.png","pc":"prebuiltui","tg":["gallery","grid","image"]},{"id":"21st:prebuiltui__login-form","t":"Login form","d":"Here is Login Form component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"prebuiltui","st":"rated","u":107,"pl":"https://cdn.21st.dev/larsen66/login-form/default/preview.1757655612272.png","pc":"prebuiltui","tg":["form","sign-in"],"sc":17},{"id":"21st:prebuiltui__newsletter","t":"Newsletter","d":"Here is Newsletter  components","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"prebuiltui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/newsletter/default/preview.1757656205398.png","pc":"prebuiltui"},{"id":"21st:prebuiltui__pricing-cards","t":"Pricing cards","d":"Here is Pricing Cards components ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"prebuiltui","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/pricing-cards/default/preview.1757656710832.png","pc":"prebuiltui","tg":["badge","card","button","list"]},{"id":"21st:prebuiltui__success-toast-notification","t":"Success toast notification","d":"Here is Success Toast Notification component ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"prebuiltui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/success-toast-notification/default/preview.1757088244805.png","pc":"prebuiltui"},{"id":"21st:prebuiltui__testimonial","t":"Testimonial","d":"Here is Testimonial component ","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"prebuiltui","st":"indexed","u":110,"pl":"https://cdn.21st.dev/user_prebuiltui/testimonial/default/preview.1785939395757.png","pc":"prebuiltui","tg":["badge","avatar","card","carousel"]},{"id":"21st:prebuiltui__toggle-switch","t":"Toggle switch","d":"Here is Toggle Switch component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"prebuiltui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/toggle-switch/default/preview.1757776562831.png","pc":"prebuiltui","tg":["checkbox","form","toggle"]},{"id":"21st:preetbiswas2006__preet-shader","t":"Preet shader","d":"Animated WebGL shader background in the Flow field style. Generated by the 21st.dev Shader Builder. 4-color palette (#160B0B, #C2402A, #F49D37, #FFE8C2). Features: film grain. A dr","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"preetbiswas2006","st":"indexed","pl":"https://cdn.21st.dev/preetbiswas2006/preet-shader/default/preview.1785771925030-68ca229f-c4af-4677-8d01-734d845792c3.webp","pc":"preetbiswas2006"},{"id":"21st:preetsuthar17__accordion","t":"Accordion","d":"A vertically stacked set of interactive headings that each reveal an associated section of content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/accordion/default/preview.1750836000118.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__accordion-1","t":"Accordion 1","d":"A vertically stacked set of interactive headings that each reveal an associated section of content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"preetsuthar17","st":"indexed","u":16,"pl":"https://cdn.21st.dev/preetsuthar17/accordion-1/default/preview.1750907260006.png","pc":"preetsuthar17","tg":["accordion","faq"]},{"id":"21st:preetsuthar17__ai-chat-history","t":"Ai chat history","d":"Display and manage conversation history with search and filtering.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-chat-history/default/preview.1763350169310.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__ai-chat-input","t":"Ai chat input","d":"Animated and interactive AI chat input component.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/ai-chat-input/default/preview.1747055351548.png","pc":"preetsuthar17","tg":["ai-chat"]},{"id":"21st:preetsuthar17__ai-chat-input-block","t":"Ai chat input block","d":"A block for AI product for prompting and tool usage.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-chat-input-block/default/preview.1760586244721.png","pc":"preetsuthar17","tg":["input"]},{"id":"21st:preetsuthar17__ai-error-handler","t":"Ai error handler","d":"An alert component that displays AI or API error messages with optional retry and dismiss actions.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/preetsuthar17/ai-error-handler/default/preview.1783696548825.png","pc":"preetsuthar17","tg":["ai-chat","alert"],"sc":19},{"id":"21st:preetsuthar17__ai-model-selector","t":"Ai model selector","d":"Select and switch between AI models","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-model-selector/default/preview.1763351382383.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__ai-prompt-templates","t":"Ai prompt templates","d":"Browse and use pre-built prompt templates.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-prompt-templates/default/preview.1763354411062.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__ai-thinking","t":"Ai thinking","d":"An animated AI reasoning panel that auto-scrolls a streaming chain-of-thought with an elapsed timer and fading edges.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-thinking/default/preview.1783696468239.png","pc":"preetsuthar17","tg":["ai-chat"]},{"id":"21st:preetsuthar17__ai-thinking-block","t":"Ai thinking block","d":"A thinking block component that simulates AI processing/thinking time before responding.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-thinking-block/default/preview.1759235527584.png","pc":"preetsuthar17","tg":["ai-chat","spinner"]},{"id":"21st:preetsuthar17__ai-usage-quota","t":"Ai usage quota","d":"Display AI usage and quota information.","k":"component","s":"21st","c":"other","g":"other","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/ai-usage-quota/default/preview.1763350897635.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__alert","t":"Alert","d":"A versatile alert component for displaying important messages, notifications, and status updates.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"preetsuthar17","st":"indexed","u":24,"pl":"https://cdn.21st.dev/preetsuthar17/alert/default/preview.1750836382890.png","pc":"preetsuthar17","tg":["alert","card","icon","notification"]},{"id":"21st:preetsuthar17__animated-counter","t":"Animated counter","d":"A simple animated counter component.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"preetsuthar17","st":"indexed","u":163,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/animated-counter/animated-counter/preview.png","pc":"preetsuthar17","tg":["number"]},{"id":"21st:preetsuthar17__animated-dock","t":"Animated dock","d":"A dock with animated icons that grow on hover.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"preetsuthar17","st":"indexed","u":111,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/animated-dock/animated-dock/preview.png","pc":"preetsuthar17","tg":["dock","link"]},{"id":"21st:preetsuthar17__animated-tabs","t":"Animated tabs","d":"Interactive tabs animated using clip path and framer motion ","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"preetsuthar17","st":"indexed","u":187,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/animated-tabs/animated-tabs/preview.png","pc":"preetsuthar17","tg":["tabs"]},{"id":"21st:preetsuthar17__animated-underline","t":"Animated underline","d":"Animate text with an underline effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"preetsuthar17","st":"indexed","u":67,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/animated-underline/animated-underline/preview.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__api-settings","t":"Api settings","k":"component","s":"21st","c":"flows/settings","g":"flows","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/preetsuthar17/api-settings/default/preview.1761363698163.png","pc":"preetsuthar17","sc":20},{"id":"21st:preetsuthar17__appearance-settings","t":"Appearance settings","d":"A block to customize appearance and interface.","k":"component","s":"21st","c":"flows/settings","g":"flows","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/appearance-settings/default/preview.1761149928844.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__auth-two-factor-setup","t":"Auth two factor setup","d":"A two-factor authentication setup card with QR code, manual secret key, backup codes, and enable/disable controls.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/auth-two-factor-setup/default/preview.1783695469311.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__auth-verify-email","t":"Auth verify email","d":"Email verification status card with pending, verifying, verified, expired, and error states plus a resend link with cooldown.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/auth-verify-email/default/preview.1783695196322.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__avatar","t":"Avatar","d":"An image element with a fallback for representing the user","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"preetsuthar17","st":"indexed","u":29,"pl":"https://cdn.21st.dev/preetsuthar17/avatar/default/preview.1753354556283.png","pc":"preetsuthar17","tg":["profile"]},{"id":"21st:preetsuthar17__avatar-group","t":"Avatar group","d":"A component that displays a group of avatars.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"preetsuthar17","st":"indexed","u":125,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/avatar-group/avatar-group/preview.png","pc":"preetsuthar17","tg":["avatar","profile","team","tooltip"]},{"id":"21st:preetsuthar17__basic-data-table","t":"Basic data table","d":"A powerful and flexible data table component with sorting, filtering, pagination, and customizable rendering.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/basic-data-table/default/preview.1749711514890.png","pc":"preetsuthar17","tg":["pagination","search","table"]},{"id":"21st:preetsuthar17__billing-plan-selector","t":"Billing plan selector","d":"A subscription plan selector with a monthly/annual billing toggle, feature lists, popular/current badges, and per-plan select buttons.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/billing-plan-selector/default/preview.1784685528122-ff5e282c-0d72-4e2f-8ad0-38a56a2d83a0.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__billing-upgrade-prompt","t":"Billing upgrade prompt","d":"A plan upgrade prompt that highlights recommended plan pricing, savings and feature benefits with banner and card layouts.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/billing-upgrade-prompt/default/preview.1784712697192-ed61da65-7e5a-45a6-ada2-6b08060ce1f6.png","pc":"preetsuthar17","tg":["pricing-section"]},{"id":"21st:preetsuthar17__blurred-stagger-text","t":"Blurred stagger text","d":"A stagger effect for text with a blur filter.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"preetsuthar17","st":"indexed","u":99,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/blurred-stagger-text/default/preview.1746088022007.png","pc":"preetsuthar17","tg":["text"]},{"id":"21st:preetsuthar17__brand-scoller","t":"Brand scoller","d":"An infinite scroller for brands or logos.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"preetsuthar17","st":"indexed","u":152,"pl":"https://cdn.21st.dev/preetsuthar17/brand-scoller/default/preview.1746801937675.png","pc":"preetsuthar17","tg":["marquee","scroll-area"]},{"id":"21st:preetsuthar17__breadcrumb","t":"Breadcrumb","d":"A navigation aid that shows users their current location within a website or application hierarchy","k":"component","s":"21st","c":"media/icon","g":"media","a":"preetsuthar17","st":"indexed","u":16,"pl":"https://cdn.21st.dev/preetsuthar17/breadcrumb/default/preview.1751000638752.png","pc":"preetsuthar17","tg":["icon","link","navigation-menu"]},{"id":"21st:preetsuthar17__button","t":"Button","d":"Displays a button component with various styles and states.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/button/default/preview.1751000972153.png","pc":"preetsuthar17","tg":["button","link"]},{"id":"21st:preetsuthar17__calender","t":"Calender","d":"A comprehensive calendar component for date selection with support for single dates, date ranges, and multiple date selection","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/calender/default/preview.1753353425015.png","pc":"preetsuthar17","tg":["calendar","date-picker"]},{"id":"21st:preetsuthar17__card","t":"Card","d":"A flexible container component for displaying content in a card layout with header, content, and footer sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/card/default/preview.1751036391355.png","pc":"preetsuthar17","tg":["card"]},{"id":"21st:preetsuthar17__card-1","t":"Card 1","d":"A flexible container component for displaying content in a card layout with header, content, and footer sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/card-1/default/preview.1755585258087.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__checkbox","t":"Checkbox","d":"A customizable checkbox component with smooth animations and multiple states.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/checkbox/default/preview.1751036617546.png","pc":"preetsuthar17","tg":["checkbox"]},{"id":"21st:preetsuthar17__checkout-block","t":"Checkout block","d":"A comprehensive multi-step checkout process with shipping, payment, and order review.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"preetsuthar17","st":"rated","u":177,"pl":"https://cdn.21st.dev/preetsuthar17/checkout-block/default/preview.1759234983537.png","pc":"preetsuthar17","tg":["steps"],"sc":19},{"id":"21st:preetsuthar17__chip","t":"Chip","d":"A compact, interactive element for displaying status, categories, or filters with optional icons and dismissible functionality.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"preetsuthar17","st":"indexed","u":21,"pl":"https://cdn.21st.dev/preetsuthar17/chip/default/preview.1751036791280.png","pc":"preetsuthar17","tg":["chip"]},{"id":"21st:preetsuthar17__citations","t":"Citations","d":"Show source citations and references for AI responses.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/citations/default/preview.1763350566492.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__clean-minimal-sign-in","t":"Clean minimal sign in","d":"Clean and minimal sign in component with form data validation","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"rated","u":282,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/clean-minimal-sign-in/clean-minimal-sign-in/preview.png","pc":"preetsuthar17","tg":["form","sign-in"],"sc":18},{"id":"21st:preetsuthar17__command-menu","t":"Command menu","d":"A command palette component with keyboard navigation, search, and shortcuts for quick actions and navigation.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"preetsuthar17","st":"indexed","u":24,"pl":"https://cdn.21st.dev/preetsuthar17/command-menu/default/preview.1753354227023.png","pc":"preetsuthar17","tg":["search"]},{"id":"21st:preetsuthar17__community-support-block","t":"Community support block","d":"Highlights community forums, user groups, trending topics, and top contributors. Includes 'Ask the community' quick action.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/community-support-block/default/preview.1755786096769.png","pc":"preetsuthar17","tg":["team"]},{"id":"21st:preetsuthar17__contact-support-block","t":"Contact support block","d":"A block for contacting support with status tracking.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"preetsuthar17","st":"indexed","u":18,"pl":"https://cdn.21st.dev/preetsuthar17/contact-support-block/default/preview.1755586646272.png","pc":"preetsuthar17","tg":["steps"]},{"id":"21st:preetsuthar17__draggable-list","t":"Draggable list","d":"A reorderable list component with drag and drop functionality.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/draggable-list/draggable-list/preview.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__drawer","t":"Drawer","d":"A customizable drawer component built on top of Vaul with smooth animations and flexible positioning.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/drawer/default/preview.1753353966567.png","pc":"preetsuthar17","tg":["modal"]},{"id":"21st:preetsuthar17__dropdown-menu","t":"Dropdown menu","d":"A versatile dropdown menu component with animations, multiple variants, and full accessibility support.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"preetsuthar17","st":"indexed","u":19,"pl":"https://cdn.21st.dev/preetsuthar17/dropdown-menu/default/preview.1752658109922.png","pc":"preetsuthar17","tg":["dropdown","menu"]},{"id":"21st:preetsuthar17__email-verification-block","t":"Email verification block","d":"Email verification interface with resend functionality and status checking.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"preetsuthar17","st":"indexed","u":5,"pl":"https://cdn.21st.dev/preetsuthar17/email-verification-block/default/preview.1758782392391.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__expandable-tabs-1","t":"Expandable tabs 1","d":"Animated tabs that expand when clicked.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"preetsuthar17","st":"indexed","u":42,"pl":"https://cdn.21st.dev/preetsuthar17/expandable-tabs-1/default/preview.1749137457796.png","pc":"preetsuthar17","tg":["tabs"]},{"id":"21st:preetsuthar17__faq-block","t":"Faq block","d":"A block for displaying frequently asked questions with search and filter.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"preetsuthar17","st":"indexed","u":32,"pl":"https://cdn.21st.dev/preetsuthar17/faq-block/default/preview.1755586203769.png","pc":"preetsuthar17","tg":["accordion","faq","search"]},{"id":"21st:preetsuthar17__file-upload","t":"File upload","d":"Interactive and animated file upload component with drag-and-drop and progress animations.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/file-upload/file-upload/preview.png","pc":"preetsuthar17","tg":["progress","upload-download"]},{"id":"21st:preetsuthar17__full-screen-signup","t":"Full screen signup","d":"Modern and Beautiful full screen Signup form with HextaUI","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":259,"pl":"https://cdn.21st.dev/preetsuthar17/full-screen-signup/default/preview.1746802598691.png","pc":"preetsuthar17","tg":["form","sign-up"]},{"id":"21st:preetsuthar17__general-settings","t":"General settings","d":"A block to manage or customize application settings.","k":"component","s":"21st","c":"flows/settings","g":"flows","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/preetsuthar17/general-settings/default/preview.1761150402302.png","pc":"preetsuthar17","sc":20},{"id":"21st:preetsuthar17__gradient-tracing","t":"Gradient tracing","d":"An animated line component with a moving gradient and optional logos at the endpoints.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"preetsuthar17","st":"indexed","u":259,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/gradient-tracing/default/preview.1737986352589.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__hero-1","t":"Hero 1","d":"Hero component for AI chat websites.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"preetsuthar17","st":"indexed","u":235,"pl":"https://cdn.21st.dev/preetsuthar17/hero-1/default/preview.png","pc":"preetsuthar17","tg":["ai-chat","cta","hero"]},{"id":"21st:preetsuthar17__hero-2-1","t":"Hero 2 1","d":"Beautiful, grainy hero component for an email-related website","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"preetsuthar17","st":"indexed","u":390,"pl":"https://cdn.21st.dev/preetsuthar17/hero-2-1/default/preview.1747451533178.png","pc":"preetsuthar17","tg":["dashboard","cta"]},{"id":"21st:preetsuthar17__hover-link-preview","t":"Hover link preview","d":"When a user hovers over a link, a preview of the link's destination appears.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"preetsuthar17","st":"indexed","u":68,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/hover-link-preview/hover-link-preview/preview.png","pc":"preetsuthar17","tg":["tooltip"]},{"id":"21st:preetsuthar17__infinite-text-marquee","t":"Infinite text marquee","d":"Awesome infinite text scrolling effect using framer-motion","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"preetsuthar17","st":"indexed","u":94,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/infinite-text-marquee/infinite-text-marquee/preview.png","pc":"preetsuthar17","tg":["marquee","tooltip"]},{"id":"21st:preetsuthar17__input","t":"Input","d":"Displays a form input field with enhanced features like password visibility toggle, clearable functionality, and Zod validation support.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/input/default/preview.1751157214550.png","pc":"preetsuthar17","tg":["input","search"]},{"id":"21st:preetsuthar17__input-otp","t":"Input otp","d":"A flexible and accessible one-time password input component with customizable slots, patterns, and animations.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/input-otp/default/preview.1758783022615.png","pc":"preetsuthar17","tg":["form","input"]},{"id":"21st:preetsuthar17__kbd","t":"Kbd","d":"A keyboard key component for displaying keyboard shortcuts and key combinations.","k":"component","s":"21st","c":"other","g":"other","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/kbd/default/preview.1751157591244.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__label","t":"Label","d":"Displays a label element with enhanced styling and accessibility features for form controls.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/label/default/preview.1752657605774.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__loader","t":"Loader","d":"A simple and elegant loading spinner component with multiple sizes and color variants.","k":"component","s":"21st","c":"status/loader","g":"status","a":"preetsuthar17","st":"indexed","u":69,"pl":"https://cdn.21st.dev/preetsuthar17/loader/default/preview.1751157409110.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__magic-text","t":"Magic text","d":"Simple animated text component that reveals as we scroll down the page.\n\n","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"preetsuthar17","st":"indexed","u":317,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/magic-text/magic-text/preview.png","pc":"preetsuthar17","tg":["scroll-area","text"]},{"id":"21st:preetsuthar17__menubar","t":"Menubar","d":"A horizontal menu bar component for navigation and actions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/menubar/default/preview.1753354963067.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__message-input-block","t":"Message input block","d":"A messaging input block with emoji, GIF and attachment support.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/message-input-block/default/preview.1760769276002.png","pc":"preetsuthar17","tg":["input"]},{"id":"21st:preetsuthar17__messaging-conversation","t":"Messaging conversation","d":"A simple Messaging Conversation block to display messages","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/messaging-conversation/default/preview.1761147658825.png","pc":"preetsuthar17","tg":["avatar"]},{"id":"21st:preetsuthar17__messaging-people-list","t":"Messaging people list","d":"A simple messaging component to display people list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/messaging-people-list/default/preview.1760764170324.png","pc":"preetsuthar17","tg":["badge","avatar","list","search"]},{"id":"21st:preetsuthar17__modern-stunning-sign-in","t":"Modern stunning sign in","d":"Dark theme modern and stunning sign-in component.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":292,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/modern-stunning-sign-in/modern-stunning-sign-in/preview.png","pc":"preetsuthar17","tg":["form","sign-in"]},{"id":"21st:preetsuthar17__mouse-following-eyes","t":"Mouse following eyes","d":"Animated eyes that follow the mouse cursor.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/mouse-following-eyes/mouse-following-eyes/preview.png","pc":"preetsuthar17","tg":["cursor"]},{"id":"21st:preetsuthar17__navbar-1","t":"Navbar 1","d":"Floating animated and responsive navbar component","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"preetsuthar17","st":"indexed","u":892,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/navbar-1/navbar-1/preview.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__newsletter-signup","t":"Newsletter signup","d":"A customizable newsletter signup form with validation and success message.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":45,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/newsletter-signup/newsletter-signup/preview.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__notification-settings","t":"Notification settings","d":"A component to manage and customize notification preferences.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/preetsuthar17/notification-settings/default/preview.1761363027887.png","pc":"preetsuthar17","sc":16},{"id":"21st:preetsuthar17__pagination","t":"Pagination","d":"Navigation component for splitting content across multiple pages with previous/next controls and page numbers","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/pagination/default/preview.1753352338179.png","pc":"preetsuthar17","tg":["navigation-menu","pagination"]},{"id":"21st:preetsuthar17__particles","t":"Particles","d":"Particles are small, interactive elements that can be used to create a variety of effects.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/particles/particles/preview.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__password-reset-block","t":"Password reset block","d":"Password reset flow with email input and success confirmation state.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","u":13,"pl":"https://cdn.21st.dev/preetsuthar17/password-reset-block/default/preview.1758428154658.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__password-strength-meter","t":"Password strength meter","d":"Visual indicator for password strength with validation criteria.","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/password-strength-meter/password-strength-meter/preview.png","pc":"preetsuthar17","sc":18},{"id":"21st:preetsuthar17__password-update-block","t":"Password update block","d":"Secure password update form with validation and confirmation fields.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","u":29,"pl":"https://cdn.21st.dev/preetsuthar17/password-update-block/default/preview.1758782057348.png","pc":"preetsuthar17","tg":["form","input"]},{"id":"21st:preetsuthar17__phone-input","t":"Phone input","d":"An international phone input component with country selection, smart validation, country-specific placeholders, and visual feedback for global phone numbers.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"preetsuthar17","st":"indexed","u":58,"pl":"https://cdn.21st.dev/preetsuthar17/phone-input/default/preview.1755091511187.png","pc":"preetsuthar17","tg":["dropdown","form","input","select"]},{"id":"21st:preetsuthar17__post-card","t":"Post card","d":"An Example card component of social media post.\n\n","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"preetsuthar17","st":"indexed","u":66,"pl":"https://cdn.21st.dev/preetsuthar17/post-card/default/preview.1749362931785.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__pricing-1","t":"Pricing 1","d":"A simple minimal grid pricing block","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"preetsuthar17","st":"indexed","u":63,"pl":"https://cdn.21st.dev/preetsuthar17/pricing-1/default/preview.1750407820150.png","pc":"preetsuthar17","tg":["grid","pricing-section","table"]},{"id":"21st:preetsuthar17__privacy-data-setting","t":"Privacy data setting","k":"component","s":"21st","c":"other","g":"other","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/privacy-data-setting/default/preview.1761149656456.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__profile-settings","t":"Profile settings","d":"A settings component for user profile management.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/profile-settings/default/preview.1761148651552.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__progress","t":"Progress","d":"A versatile progress component for displaying completion status, loading states, and step-by-step processes.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/progress/default/preview.1753351930347.png","pc":"preetsuthar17","tg":["progress","spinner"]},{"id":"21st:preetsuthar17__radio","t":"Radio","d":"A customizable radio group component with smooth animations and flexible layouts","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/radio/default/preview.1753351695021.png","pc":"preetsuthar17","tg":["radio-group"]},{"id":"21st:preetsuthar17__resizable","t":"Resizable","d":"Accessible resizable panel groups and layouts.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/resizable/default/preview.1753351511368.png","pc":"preetsuthar17","tg":["sidebar"]},{"id":"21st:preetsuthar17__responsive-masonry-layout","t":"Responsive masonry layout","d":"A beautiful, responsive masonry component that adapts seamlessly to various screen sizes.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"preetsuthar17","st":"indexed","u":42,"pl":"https://cdn.21st.dev/preetsuthar17/responsive-masonry-layout/default/preview.1748061836339.png","pc":"preetsuthar17","tg":["gallery","grid","image"]},{"id":"21st:preetsuthar17__scroll-area","t":"Scroll area","d":"A customizable scroll area component with smooth scrolling and accessible scrollbars.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"preetsuthar17","st":"indexed","u":146,"pl":"https://cdn.21st.dev/preetsuthar17/scroll-area/default/preview.1753351331701.png","pc":"preetsuthar17","tg":["scroll-area"]},{"id":"21st:preetsuthar17__select","t":"Select","d":"A comprehensive select component with support for single selection, icons, and animations.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"preetsuthar17","st":"indexed","u":169,"pl":"https://cdn.21st.dev/preetsuthar17/select/default/preview.1751034288717.png","pc":"preetsuthar17","tg":["select"]},{"id":"21st:preetsuthar17__selector-chips","t":"Selector chips","d":"Selector Chips are used to display a list of items that can be selected.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"preetsuthar17","st":"indexed","u":39,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/selector-chips/selector-chips/preview.png","pc":"preetsuthar17","tg":["chip"]},{"id":"21st:preetsuthar17__separator","t":"Separator","d":"A separator component for dividing content visually.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"preetsuthar17","st":"indexed","u":34,"pl":"https://cdn.21st.dev/preetsuthar17/separator/default/preview.1751035770559.png","pc":"preetsuthar17","tg":["navigation-menu"]},{"id":"21st:preetsuthar17__shining-text","t":"Shining text","d":"Animate text with a shining effect.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"preetsuthar17","st":"indexed","u":375,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/shining-text/shining-text/preview.png","pc":"preetsuthar17","tg":["ai-chat"]},{"id":"21st:preetsuthar17__sidebar","t":"Sidebar","d":"Animated and responsive sidebar component with multiple categories section and mobile device support","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"preetsuthar17","st":"indexed","u":184,"pl":"https://cdn.21st.dev/preetsuthar17/sidebar/default/preview.1747454227105.png","pc":"preetsuthar17","tg":["sidebar"]},{"id":"21st:preetsuthar17__sign-in-block","t":"Sign in block","d":"A clean sign-in form with email/password authentication and remember me option.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":76,"pl":"https://cdn.21st.dev/preetsuthar17/sign-in-block/default/preview.1758426410708.png","pc":"preetsuthar17","tg":["checkbox","form","sign-in"]},{"id":"21st:preetsuthar17__sign-up-block","t":"Sign up block","d":"A complete sign-up form with validation, password strength requirements, and terms acceptance.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":65,"pl":"https://cdn.21st.dev/preetsuthar17/sign-up-block/default/preview.1758425095009.png","pc":"preetsuthar17","tg":["checkbox","sign-up"]},{"id":"21st:preetsuthar17__signup-1","t":"Signup 1","d":"Full screen authentication component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/signup-1/default/preview.1747109210869.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__skeleton","t":"Skeleton","d":"Display placeholder content while loading to improve perceived performance.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"preetsuthar17","st":"indexed","u":84,"pl":"https://cdn.21st.dev/preetsuthar17/skeleton/default/preview.1751036069715.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__slider","t":"Slider","d":"A customizable range input component for selecting numeric values with multiple variants and sizes","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"preetsuthar17","st":"indexed","u":6,"pl":"https://cdn.21st.dev/preetsuthar17/slider/default/preview.1753350725415.png","pc":"preetsuthar17","tg":["slider"]},{"id":"21st:preetsuthar17__social-authentication-block","t":"Social authentication block","d":"Social authentication configured for auth flow with different messaging.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/social-authentication-block/default/preview.1758783810546.png","pc":"preetsuthar17","tg":["sign-in"]},{"id":"21st:preetsuthar17__spotlight-card","t":"Spotlight card","d":"Create a spotlight effect on hover on a card component.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"preetsuthar17","st":"indexed","u":82,"pl":"https://cdn.21st.dev/preetsuthar17/spotlight-card/default/preview.1747709960379.png","pc":"preetsuthar17","tg":["features"]},{"id":"21st:preetsuthar17__switch","t":"Switch","d":"A control that allows the user to toggle between checked and not checked with smooth animations and multiple variants.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"preetsuthar17","st":"indexed","u":13,"pl":"https://cdn.21st.dev/preetsuthar17/switch/default/preview.1753349928276.png","pc":"preetsuthar17","tg":["form","toggle"]},{"id":"21st:preetsuthar17__system-status-block","t":"System status block","d":"Displays real-time or simulated system/service status with incident history.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"preetsuthar17","st":"rated","pl":"https://cdn.21st.dev/preetsuthar17/system-status-block/default/preview.1755587780603.png","pc":"preetsuthar17","tg":["dashboard","timeline"],"sc":19},{"id":"21st:preetsuthar17__tabs","t":"Tabs","d":"A set of layered sections of content with smooth animations and modern styling.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"preetsuthar17","st":"indexed","u":34,"pl":"https://cdn.21st.dev/preetsuthar17/tabs/default/preview.1753349063253.png","pc":"preetsuthar17","tg":["tabs"]},{"id":"21st:preetsuthar17__team-invite","t":"Team invite","d":"A modern team invitation and member management component with permission controls","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/team-invite/default/preview.1755786918847.png","pc":"preetsuthar17","tg":["modal","team"]},{"id":"21st:preetsuthar17__testimonial-card","t":"Testimonial card","d":"A responsive testimonial card component with rating stars and author information.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"preetsuthar17","st":"indexed","u":297,"pl":"https://cdn.21st.dev/user_preetsuthar17/testimonial-card.png","pc":"preetsuthar17","tg":["testimonials"]},{"id":"21st:preetsuthar17__textarea","t":"Textarea","d":"Displays a multi-line text input field with enhanced features like clearable functionality, auto-resizing, and Zod validation support","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/textarea/default/preview.1753272940163.png","pc":"preetsuthar17","tg":["textarea"]},{"id":"21st:preetsuthar17__time-picker","t":"Time picker","d":"A flexible time picker component with 12-hour format, AM/PM selection, and optional current time button, designed for easy time selection in forms and applications.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/time-picker/default/preview.1754962627157.png","pc":"preetsuthar17","tg":["form","select"]},{"id":"21st:preetsuthar17__timeline","t":"Timeline","d":"A flexible timeline component for displaying chronological events, processes, and workflows with support for different orientations, statuses, and custom content.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"preetsuthar17","st":"indexed","u":267,"pl":"https://cdn.21st.dev/preetsuthar17/timeline/default/preview.1754962140735.png","pc":"preetsuthar17","tg":["timeline"]},{"id":"21st:preetsuthar17__toggle","t":"Toggle","d":"A two-state button that can be either on or off with smooth transitions and multiple variants.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/toggle/default/preview.1753272706536.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__toolbar","t":"Toolbar","d":"A text editor toolbar component with toggles","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/toolbar/default/preview.1750406802737.png","pc":"preetsuthar17"},{"id":"21st:preetsuthar17__tooltip","t":"Tooltip","d":"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"preetsuthar17","st":"indexed","u":30,"pl":"https://cdn.21st.dev/preetsuthar17/tooltip/default/preview.1752659404147.png","pc":"preetsuthar17","tg":["popover","tooltip"]},{"id":"21st:preetsuthar17__tree","t":"Tree","d":"A flexible tree view component with collapsible nodes, selection, and animations.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/tree/default/preview.1752658753414.png","pc":"preetsuthar17","tg":["file-tree"]},{"id":"21st:preetsuthar17__tree-view","t":"Tree view","d":"A hierarchical data display component with expand/collapse functionality, perfect for file explorers, organizational charts, or any nested data structure.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/tree-view/default/preview.1749807259570.png","pc":"preetsuthar17","tg":["file-tree"]},{"id":"21st:preetsuthar17__two-factor-authentication-block","t":"Two factor authentication block","d":"6-digit code input for two-factor authentication with auto-focus and paste support.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":14,"pl":"https://cdn.21st.dev/preetsuthar17/two-factor-authentication-block/default/preview.1758783334374.png","pc":"preetsuthar17","tg":["form","input"]},{"id":"21st:preetsuthar17__typewriter-text","t":"Typewriter text","d":"Animated Text component that types itself out like a typewriter.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"preetsuthar17","st":"indexed","u":655,"pl":"https://cdn.21st.dev/user_2rWolCuRnJW3DRiuQ5JHrl5kj8a/typewriter-text/default/preview.1738001373392.png","pc":"preetsuthar17","tg":["text"]},{"id":"21st:preetsuthar17__user-feedback-block","t":"User feedback block","d":"Collects user feedback on the help/support experience with multiple input types.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"preetsuthar17","st":"indexed","u":9,"pl":"https://cdn.21st.dev/preetsuthar17/user-feedback-block/default/preview.1755785150812.png","pc":"preetsuthar17","tg":["textarea"]},{"id":"21st:preetsuthar17__video-player","t":"Video player","d":"A modern, customizable video player component with full controls and keyboard shortcuts.","k":"component","s":"21st","c":"media/player","g":"media","a":"preetsuthar17","st":"indexed","pl":"https://cdn.21st.dev/preetsuthar17/video-player/default/preview.1752658489427.png","pc":"preetsuthar17","tg":["progress","video"]},{"id":"21st:preetsuthar17__waitlist-form-1","t":"Waitlist form 1","d":"Animated and minimal waitlist form with email input and submit button.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"preetsuthar17","st":"indexed","u":32,"pl":"https://cdn.21st.dev/preetsuthar17/waitlist-form/default/preview.1747797999827.png","pc":"preetsuthar17"},{"id":"21st:prince__cinematic-ui","t":"Cinematic ui","d":"on hover its change ui","k":"component","s":"21st","c":"other","g":"other","a":"prince","st":"indexed","pl":"https://cdn.21st.dev/prince/cinematic-ui/default/preview.1782378183011.png","pc":"prince"},{"id":"21st:priyanshugupta28__tabs-swicher","t":"Tabs swicher","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"priyanshugupta28","st":"indexed","pl":"https://cdn.21st.dev/priyanshugupta28/tabs-swicher/default/preview.1770654021083.png","pc":"priyanshugupta28"},{"id":"21st:priyanshujindal2006__card-showdown","t":"Card showdown","d":"Display of three cards, making a professional and polished ui","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"priyanshujindal2006","st":"indexed","pl":"https://cdn.21st.dev/priyanshujindal2006/card-showdown/default/preview.1750349972507.png","pc":"priyanshujindal2006"},{"id":"21st:productprod7__green-down","t":"Green down","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#236B26, #97FF99). A drop-in, zero-dependency React component for he","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"productprod7","st":"indexed","pl":"https://cdn.21st.dev/productprod7/green-down/default/preview.1784975155732-87963ac8-e5d7-46ae-a86a-41c8bc5095d1.webp","pc":"productprod7"},{"id":"21st:projetooticalucena__bot-o-whats-app","t":"Bot o whats app","k":"component","s":"21st","c":"other","g":"other","a":"projetooticalucena","st":"indexed","pl":"https://cdn.21st.dev/projetooticalucena/bot-o-whats-app/default/preview.1748633815887.png","pc":"projetooticalucena"},{"id":"21st:prv.ctech__baby-blue","t":"Baby blue","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#2E3192, #1BFFFF). Features: vignette. A drop-in, zero-dependency Re","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"prv.ctech","st":"indexed","pl":"https://cdn.21st.dev/prv.ctech/baby-blue/default/preview.1786038924546-99f94719-c0c5-44fc-bf5a-1e7c796d8b26.webp","pc":"prv.ctech"},{"id":"21st:pshopps04__1s1s","t":"1s1s","d":"Animated (wave) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, an","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"pshopps04","st":"indexed","pl":"https://cdn.21st.dev/pshopps04/1s1s/default/preview.1786206021027-f22fd05b-1421-43c6-a964-10dd383e8fef.webp","pc":"pshopps04"},{"id":"21st:pshopps04__is1s","t":"Is1s","d":"Animated (wave) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, an","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"pshopps04","st":"indexed","pl":"https://cdn.21st.dev/pshopps04/is1s/default/preview.1786206012036-dc7cb807-1391-4f2d-a6af-3486135d8fa5.webp","pc":"pshopps04"},{"id":"21st:pulkitxm__aurora-background","t":"Aurora background","d":"An animated canvas aurora background with multiple color variants (sunset, ocean, forest, lavender, ember, ice) that can wrap any content.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/aurora-background/default/preview.1783581774000.png","pc":"pulkitxm"},{"id":"21st:pulkitxm__cursor-spotlight","t":"Cursor spotlight","d":"A container that dims its background and reveals a bright radial spotlight that follows the cursor on hover.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/cursor-spotlight/default/preview.1783581899776.png","pc":"pulkitxm"},{"id":"21st:pulkitxm__fluid-cursor-trail","t":"Fluid cursor trail","d":"Canvas particle trail that follows the cursor as a fixed overlay, with customizable color, particle count, and physics.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/fluid-cursor-trail/default/preview.1783581807995.png","pc":"pulkitxm","tg":["cursor"]},{"id":"21st:pulkitxm__handwriting-svg","t":"Handwriting svg","d":"An SVG that draws itself on mount, rendering custom paths or converting text into animated handwriting strokes.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/handwriting-svg/default/preview.1786699438959-c61fcb9e-d1a7-4e67-ab04-ecfc09ffd573.png","pc":"pulkitxm","tg":["text"]},{"id":"21st:pulkitxm__horizontal-scroll-gallery","t":"Horizontal scroll gallery","d":"Pinned section where vertical scrolling drives a horizontal gallery's position, translating a track of items sideways as you scroll down.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"pulkitxm","st":"indexed","u":10,"pl":"https://cdn.21st.dev/pulkitxm/horizontal-scroll-gallery/default/preview.1784661081994-528a96c2-604d-4a44-a477-39cd0dbe7740.png","pc":"pulkitxm","tg":["gallery","scroll-area"]},{"id":"21st:pulkitxm__infinite-circular-scroll","t":"Infinite circular scroll","d":"A vertical list of cards that loops seamlessly as you scroll, with the scrollbar hidden for a continuous circular feel.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/infinite-circular-scroll/default/preview.1784355317156-b6475953-54e0-44d0-9f9b-5376db56c4d3.png","pc":"pulkitxm","tg":["scroll-area"]},{"id":"21st:pulkitxm__line-draw-svg","t":"Line draw svg","d":"An SVG path that animates drawing itself on scroll, hover, or mount, with built-in diamond, circle, star, heart, and arrow presets.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/line-draw-svg/default/preview.1784708961733-832fae3e-aa9b-4f32-983c-942a76aa331e.png","pc":"pulkitxm","tg":["scroll-area"]},{"id":"21st:pulkitxm__lqip-image","t":"Lqip image","d":"Image component with a Low Quality Image Placeholder (LQIP) that shows a blurred placeholder and fades into the full image once it loads.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"pulkitxm","st":"indexed","u":4,"pl":"https://cdn.21st.dev/pulkitxm/lqip-image/default/preview.1784664029910-c494bae9-10a8-44a3-a9b3-9db6d3b29874.png","pc":"pulkitxm"},{"id":"21st:pulkitxm__network-image","t":"Network image","d":"Image component that adapts its resolution and loading strategy in real time based on the visitor's network connection speed.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/network-image/default/preview.1784666410420-ce389b54-691e-4838-b008-9df402310e8b.png","pc":"pulkitxm","tg":["image","spinner"]},{"id":"21st:pulkitxm__not-found-page","t":"Not found page","d":"Animated 404 not found page with a subtly moving icon, customizable copy, and reduced-motion support.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/not-found-page/default/preview.1783730871392.png","pc":"pulkitxm","tg":["empty-state"]},{"id":"21st:pulkitxm__parallax-image","t":"Parallax image","d":"Scroll-linked parallax wrapper that shifts images or content vertically on scroll to create a sense of depth.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/parallax-image/default/preview.1784666327497-2d23e681-b32d-411a-bef2-1d35520e97ab.png","pc":"pulkitxm","tg":["gallery","scroll-area"]},{"id":"21st:pulkitxm__party-popper","t":"Party popper","d":"A wrapper that fires a GSAP confetti burst of particles and streamers from any trigger element when it is clicked.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/party-popper/default/preview.1785374583556-686161fc-e1f6-45ed-8144-18102d27ee2c.png","pc":"pulkitxm"},{"id":"21st:pulkitxm__scroll-linked-video-scrubber","t":"Scroll linked video scrubber","d":"A scroll-driven video component that pins to the viewport and scrubs the video's timeline forward or backward as the user scrolls, mapping scroll progress to playback position.","k":"component","s":"21st","c":"media/player","g":"media","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/scroll-linked-video-scrubber/default/preview.1784811266368-b2407975-e5d8-4e9c-a752-a24c65f780f1.png","pc":"pulkitxm","tg":["scroll-area","video"]},{"id":"21st:pulkitxm__stagger-reveal-grid","t":"Stagger reveal grid","d":"Grid that reveals its items with a wave-like stagger animation on scroll, with configurable columns and timing.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"pulkitxm","st":"indexed","pl":"https://cdn.21st.dev/pulkitxm/stagger-reveal-grid/default/preview.1784390686712-9edc8661-e478-4b80-9e73-fe8bbfa507fb.png","pc":"pulkitxm"},{"id":"21st:pulseawan__apple-calendar-picker","t":"Apple calendar picker","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"pulseawan","st":"rated","pl":"https://cdn.21st.dev/pulseawan/apple-calendar-picker/default/preview.1782651368419.png","pc":"pulseawan","tg":["calendar","date-picker","toggle"],"sc":23},{"id":"21st:pulseawan__apple-color-picker","t":"Apple color picker","d":"A pixel-perfect Apple-style color picker with Grid, Spectrum, and Slider tabs, opacity control, swatches, and recent colors.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"pulseawan","st":"indexed","pl":"https://cdn.21st.dev/pulseawan/apple-color-picker/default/preview.1782646897034.png","pc":"pulseawan","tg":["grid","slider","tabs"]},{"id":"21st:pulseawan__apple-emoji-picker","t":"Apple emoji picker","d":"A premium, production-ready, interactive Apple-style Emoji Picker component for React and Tailwind CSS. Supports dark mode, instant search, voice search, and recent emojis.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"pulseawan","st":"indexed","pl":"https://cdn.21st.dev/pulseawan/apple-emoji-picker/default/preview.1782649565621.png","pc":"pulseawan","tg":["grid","search"]},{"id":"21st:pulseawan__image-expansion","t":"Image expansion","d":"Pre-built image expansion & gallery components for modern landing pages — install on demand, no need to generate from scratch.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"pulseawan","st":"indexed","u":9,"pl":"https://cdn.21st.dev/pulseawan/image-expansion/default/preview.1782988320780.png","pc":"pulseawan","tg":["carousel","gallery","image","tabs"]},{"id":"21st:pulseawan__modern-login-signup","t":"Modern login signup","d":"Modern, responsive login and signup UI components built with React and Tailwind CSS — ready-to-use authentication forms with clean design and smooth UX.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"pulseawan","st":"indexed","u":13,"pl":"https://cdn.21st.dev/pulseawan/modern-login-signup/default/preview.1782801552351.png","pc":"pulseawan","tg":["form","sign-in"]},{"id":"21st:puppetrobi__animated-testimonials","t":"Animated testimonials","d":"sleek smooth animated testimonials with staggering text effect","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"puppetrobi","st":"indexed","pl":"https://cdn.21st.dev/puppetrobi/animated-testimonials/default/preview.1754308984072.png","pc":"puppetrobi"},{"id":"21st:qahwaaddiction__target","t":"Target","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 8-color palette (#F0EEEA, #15140F, #F0EEEA, #5B91F5, #F0EEEA, #76736B, #F0EEEA, #15140","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"qahwaaddiction","st":"indexed","pl":"https://cdn.21st.dev/qahwaaddiction/target/default/preview.1786544746331-fd99b111-e957-4b04-81a8-5ed3beeb6941.png","pc":"qahwaaddiction"},{"id":"21st:qahwaaddiction__target-2","t":"Target 2","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 8-color palette (#F0EEEA, #15140F, #F0EEEA, #5B91F5, #F0EEEA, #76736B, #F0EEEA, #15140","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"qahwaaddiction","st":"indexed","pl":"https://cdn.21st.dev/qahwaaddiction/target-2/default/preview.1786544755347-a17f898b-1b66-468c-8f15-f223a1e7a8cd.png","pc":"qahwaaddiction"},{"id":"21st:qakoraseeka__signup","t":"Signup","d":"Hello Guys Welcome","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"qakoraseeka","st":"indexed","pl":"https://cdn.21st.dev/qakoraseeka/signup/default/preview.1755950124062.png","pc":"qakoraseeka"},{"id":"21st:qualitiyjaden1__asdasd","t":"Asdasd","d":"asdasdasdasdasd","k":"component","s":"21st","c":"other","g":"other","a":"qualitiyjaden1","st":"indexed","pl":"https://cdn.21st.dev/qualitiyjaden1/asdasd/default/preview.1786060500934-a47a51f8-a279-4f31-bb1a-547fa72b4d25.png","pc":"qualitiyjaden1"},{"id":"21st:qualitiyjaden1__hero-futuristic","t":"Hero futuristic","d":"here is some futuristic hero page","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"qualitiyjaden1","st":"indexed","pl":"https://cdn.21st.dev/qualitiyjaden1/hero-futuristic/default/preview.1747355858621.png","pc":"qualitiyjaden1"},{"id":"21st:quentin.hoarau193__qweqw","t":"Qweqw","d":"Animated (pulse) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. Styled with a retro look. A drop-in, zero-dependency React component fo","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"quentin.hoarau193","st":"indexed","pl":"https://cdn.21st.dev/quentin.hoarau193/qweqw/default/preview.1786315812136-e8b21bb9-c22c-4343-934b-418051d9e7d3.webp","pc":"quentin.hoarau193"},{"id":"21st:quordix__quordix-hero","t":"Quordix hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"quordix","st":"indexed","pl":"https://cdn.21st.dev/quordix/quordix-hero/default/preview.1786895489670-938ae3df-0610-469e-beb9-54c70fd5e1d3.png","pc":"quordix"},{"id":"21st:quordix__quordix-work-hero","t":"Quordix work hero","d":"Full-viewport portfolio hero with magnetic letter physics, variable-weight subtitle words, animated orbit rings, and scroll parallax fade.\n","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"quordix","st":"indexed","pl":"https://cdn.21st.dev/quordix/quordix-work-hero/default/preview.1786897283154-74f12aa1-f08f-48b8-adf7-ede698154cf9.png","pc":"quordix"},{"id":"21st:radiumcoders__aqua-button","t":"Aqua button","d":"A glossy pill button inspired by Apple's classic Aqua interface, with layered top highlight, soft bottom diffusion, and rich inner shadows for the signature lickable look. Primary ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/larsen66/aqua-button/default/preview.1780145975334.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__brutal-button","t":"Brutal button","d":"A NeoBrutalism style button with thick borders, high-contrast colors, and a sharp offset shadow that snaps away on press. Fully theme-aware with overridable color, border, shadow, ","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/larsen66/brutal-button/default/preview.1780070758680.png","pc":"radiumcoders","tg":["border"]},{"id":"21st:radiumcoders__chrome-button","t":"Chrome button","d":"A pill button with an animated liquid-chrome WebGL surface that shifts under a difference-blended label and brightens on hover. Self-contained — the shader (ogl) is bundled in.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/chrome-button/default/preview.1780074997272.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__click-powerup","t":"Click powerup","d":"An animated button with sprung corner brackets, a diagonal patterned fill, and a power-up tap burst. On hover the brackets push outward and a fill panel arms; on tap it snaps to a ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/larsen66/click-powerup/default/preview.1780074170433.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__dither-button","t":"Dither button","d":"A button with a live ordered-dithering (Bayer matrix) canvas fill that animates a subtle wave across the surface, with stroked label and configurable dither color, size, and opacit","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dither-button/default/preview.1780081213960.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__frame-button","t":"Frame button","d":"A futuristic button with animated corner frames and tactile motion interactions. On hover the corner chevrons expand outward; supports default, secondary and outline variants with ","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/radiumcoders/frame-button/default/preview.1785372054657-515adc5d-9770-4fe5-a478-3a6716c5e9ea.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__grid-button","t":"Grid button","d":"A compact button with an animated dot-matrix square glyph in an amber tile beside the label, with a tactile press-down effect. The dot-matrix loader animates a ripple across an 11-","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/grid-button/default/preview.1780085632717.png","pc":"radiumcoders","tg":["button","spinner"]},{"id":"21st:radiumcoders__highlight-button","t":"Highlight button","d":"A button with a mouse-following highlight that darkens the surface as the cursor moves, fades in a soft border on hover, and bursts a radial ripple from the exact click point. Them","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"radiumcoders","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/highlight-button/default/preview.1780086421562.png","pc":"radiumcoders","tg":["border"]},{"id":"21st:radiumcoders__minimal-button","t":"Minimal button","d":"A clean, minimal button built on the shadcn Button with a faint diagonal hatch overlay and a soft drop shadow that adapts to light and dark themes. Understated by design.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/minimal-button/default/preview.1780086755135.png","pc":"radiumcoders","tg":["button"]},{"id":"21st:radiumcoders__movie-pass","t":"Movie pass","d":"A ticket-style button with rounded corner cut-outs punched into each corner, like a torn cinema pass, with a quick press-scale tactile effect. Theme-aware via primary and backgroun","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"radiumcoders","st":"indexed","u":5,"pl":"https://cdn.21st.dev/larsen66/movie-pass/default/preview.1780087248434.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__scroll-bars","t":"Scroll bars","d":"An animated ruler-style scroll progress indicator that moves an accent marker across a row of bars as the page scrolls.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/radiumcoders/scroll-bars/default/preview.1783712486871.png","pc":"radiumcoders"},{"id":"21st:radiumcoders__shiny-button","t":"Shiny button","d":"A glossy indigo button with a layered gradient bezel and an inner panel that sinks with an inset glow on press, giving a polished, candy-like depth. Theme-agnostic indigo finish.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radiumcoders","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shiny-button/default/preview.1780088166159.png","pc":"radiumcoders"},{"id":"21st:radu__checkout-button","t":"Checkout button","d":"A simple multi-variant Checkout Button for SaaS tiered plans. The Icon can be changed.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/checkout-button/default/preview.1753438159631.png","pc":"radu"},{"id":"21st:radu__colorful-bento-grid","t":"Colorful bento grid","d":"A section with live and coming soon pages to show on your landing page, no matter if you're a SaaS (show features) or an Agency. ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"radu","st":"indexed","u":116,"pl":"https://cdn.21st.dev/radu/colorful-bento-grid/default/preview.1753374289538.png","pc":"radu","tg":["features"]},{"id":"21st:radu__feature-card","t":"Feature card","d":"A simple FeatureCard with Hover Animations","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/feature-card/default/preview.1753434456057.png","pc":"radu"},{"id":"21st:radu__footer-taped-design","t":"Footer taped design","d":"A minimalistic Responsive Footer Navigation with Active and Coming Soon Elements That can Be used now but also be prepped for the future. ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"radu","st":"indexed","u":344,"pl":"https://cdn.21st.dev/radu/footer-taped-design/default/preview.1753375452848.png","pc":"radu","tg":["badge","footer","link","navigation-menu"]},{"id":"21st:radu__navbar-custom-dropdown-button","t":"Navbar custom dropdown button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/navbar-custom-dropdown-button/default/preview.1758387531284.png","pc":"radu"},{"id":"21st:radu__pricing-slider-loops","t":"Pricing slider loops","d":"1:1 replica of Loops pricing. An interactive pricing calculator component designed to help users estimate their monthly cost based on subscriber count. It features a range slider l","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"radu","st":"indexed","u":83,"pl":"https://cdn.21st.dev/radu/pricing-slider-loops/default/preview.1753451797948.png","pc":"radu","tg":["pricing-section","slider"]},{"id":"21st:radu__reviews-badge","t":"Reviews badge","d":"A simple Badge That illustrates the overall rating of your SaaS/Agency on specific product use cases. ","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/reviews-badge/default/preview.1753439050050.png","pc":"radu"},{"id":"21st:radu__saa-s-feature-section","t":"Saa s feature section","d":"A simple How it Works section with a minimalistic design touch. Nothing fancy, but get's the job done through simplicity. ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/saa-s-feature-section/default/preview.1753370209261.png","pc":"radu"},{"id":"21st:radu__saas-pricing-plan-card","t":"Saas pricing plan card","d":"A responsive, animated pricing tier card that dynamically displays monthly or quarterly billing info, a feature list, and a primary CTA. It supports theme variants (primary, second","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/saas-pricing-plan-card/default/preview.1753448861854.png","pc":"radu"},{"id":"21st:radu__simple-navigation-with-icons","t":"Simple navigation with icons","d":"A simple Navigation built for Product-Led SaaS companies to highlight their products strengths. The version is for desktop only, but can be remixed to quickly make it mobile friend","k":"component","s":"21st","c":"media/icon","g":"media","a":"radu","st":"indexed","pl":"https://cdn.21st.dev/radu/simple-navigation-with-icons/default/preview.1763568277536.png","pc":"radu"},{"id":"21st:rafa-porto__ai-assistant-interface","t":"Ai assistant interface","d":"An AI chat interface, with input, file uploads, suggestions and an animated logo","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"rafa-porto","st":"indexed","pl":"https://cdn.21st.dev/user_2uVKBUXqwkcxZZN4Qj9wxzr7maQ/ai-assistant-interface/demo1/preview.png","pc":"rafa-porto","tg":["ai-chat","upload-download"]},{"id":"21st:rafa-porto__ai-assistant-panel","t":"Ai assistant panel","d":"AI Assistant Panel for support","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"rafa-porto","st":"indexed","pl":"https://cdn.21st.dev/rafa-porto/ai-assistant-panel/default/preview.1763430199448.png","pc":"rafa-porto"},{"id":"21st:rafa-porto__hold-to-delete-button","t":"Hold to delete button","d":"A simple hold to delete button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"rafa-porto","st":"rated","pl":"https://cdn.21st.dev/rafa-porto/hold-to-delete-button/default/preview.1761351006077.png","pc":"rafa-porto","sc":21},{"id":"21st:rafa-porto__publish-button","t":"Publish button","d":"A hold to publish button","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"rafa-porto","st":"indexed","pl":"https://cdn.21st.dev/rafa-porto/publish-button/default/preview.1761352397095.png","pc":"rafa-porto"},{"id":"21st:rafa-porto__sign-in","t":"Sign in","d":"A simple sign in component","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"rafa-porto","st":"indexed","u":94,"pl":"https://cdn.21st.dev/user_2uVKBUXqwkcxZZN4Qj9wxzr7maQ/sign-in/default/preview.png","pc":"rafa-porto","tg":["form","sign-in"]},{"id":"21st:rafa-porto__sign-in-card","t":"Sign in card","d":"A simple and modern login card for use in your projects.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"rafa-porto","st":"indexed","pl":"https://cdn.21st.dev/rafa-porto/sign-in-card/default/preview.1761858561402.png","pc":"rafa-porto"},{"id":"21st:rafa-porto__to-do-card","t":"To do card","d":"Animated to-do list card","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"rafa-porto","st":"indexed","u":29,"pl":"https://cdn.21st.dev/rafa-porto/to-do-card/default/preview.1761484425538.png","pc":"rafa-porto","tg":["checkbox","list"]},{"id":"21st:rahil1202__3d-nested-cube","t":"3d nested cube","d":"3dNestedCube","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/3d-nested-cube/default/preview.1774348510254.png","pc":"rahil1202"},{"id":"21st:rahil1202__aether-hero","t":"Aether hero","d":"Animated Hero Section ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"rahil1202","st":"indexed","u":56,"pl":"https://cdn.21st.dev/rahil1202/aether-hero/default/preview.1760174440790.png","pc":"rahil1202"},{"id":"21st:rahil1202__agency-viral-hero","t":"Agency viral hero","d":"A full-screen, video-based hero section with an integrated glass-style navbar, designed for modern agency websites. It combines animated headline content, a high-impact background ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/agency-viral-hero/default/preview.1776746470951.png","pc":"rahil1202"},{"id":"21st:rahil1202__aurora-flux","t":"Aurora flux","d":"A beautiful hero section with aurora flux animation","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"rahil1202","st":"indexed","u":13,"pl":"https://cdn.21st.dev/rahil1202/aurora-flux/default/preview.1760278964290.png","pc":"rahil1202"},{"id":"21st:rahil1202__bell-glow-loader","t":"Bell glow loader","d":"Minimal loader with a bell that blinks softly during work and illuminates fully when done.","k":"component","s":"21st","c":"status/loader","g":"status","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/bell-glow-loader/default/preview.1759730819326.png","pc":"rahil1202"},{"id":"21st:rahil1202__bell-notify","t":"Bell notify","d":"Custom bell notify me button with light/illuminated animation for better UX","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/bell-notify/default/preview.1759728982474.png","pc":"rahil1202","tg":["notification"]},{"id":"21st:rahil1202__christmas-tree","t":"Christmas tree","d":" A fully animated SVG Christmas tree with particle effects using GSAP.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/christmas-tree/default/preview.1758805841646.png","pc":"rahil1202"},{"id":"21st:rahil1202__credit-card-form","t":"Credit card form","d":"Lightweight, fully controlled card form with live number/holder/expiry/CVV rendering, CVV back-face flip, and built-in validation. Customizable accent rings and layout.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahil1202","st":"indexed","u":27,"pl":"https://cdn.21st.dev/rahil1202/credit-card-form/default/preview.1758952495822.png","pc":"rahil1202","tg":["card"]},{"id":"21st:rahil1202__dot-matrix-display","t":"Dot matrix display","d":"A high-performance, dot-matrix display component that transforms images into dynamic pixel-art animations using the HTML5 Canvas API","k":"component","s":"21st","c":"media/gallery","g":"media","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/dot-matrix-display/default/preview.1774347461342.png","pc":"rahil1202"},{"id":"21st:rahil1202__electric-border-card","t":"Electric border card","d":"Electric Border Card ","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/electric-border-card/default/preview.1759915224496.png","pc":"rahil1202"},{"id":"21st:rahil1202__electric-card","t":"Electric card","d":"A highly customizable animated card component featuring real-time SVG turbulence, displacement, and hue-shift effects. Perfect for dramatic UI sections, feature highlights, hero ar","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/electric-card/default/preview.1758881278266.png","pc":"rahil1202"},{"id":"21st:rahil1202__fire-sphere","t":"Fire sphere","d":"A dynamic shader-driven 3D sphere with animated noise patterns, customizable bloom post-processing, and themeable colors — all controllable via React props.","k":"component","s":"21st","c":"other","g":"other","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/fire-sphere/default/preview.1759674260552.png","pc":"rahil1202"},{"id":"21st:rahil1202__glass-video-hero","t":"Glass video hero","d":"A premium landing hero featuring a full-screen video background, glassmorphism navigation bar, responsive mobile menu with focus trap, and interactive full-bleed height toggle. Des","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"rahil1202","st":"indexed","u":73,"pl":"https://cdn.21st.dev/rahil1202/glass-video-hero/default/preview.1775887842155.png","pc":"rahil1202","tg":["cta","hero","video"]},{"id":"21st:rahil1202__hover-deck-fx","t":"Hover deck fx","d":"Deck-style image hover animation that unfolds stacked images in a 3D-like motion.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/hover-deck-fx/default/preview.1760162340610.png","pc":"rahil1202"},{"id":"21st:rahil1202__interactive-gradient-background","t":"Interactive gradient background","d":"Interactive Graident Background with pointer movement","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"rahil1202","st":"indexed","u":60,"pl":"https://cdn.21st.dev/rahil1202/interactive-gradient-background/default/preview.1760281624902.png","pc":"rahil1202"},{"id":"21st:rahil1202__light-speed","t":"Light speed","d":"A lightweight, GPU-accelerated component that renders an animated warp-drive tunnel. Perfect for landing pages, hero sections, or interactive backgrounds.","k":"component","s":"21st","c":"status/loader","g":"status","a":"rahil1202","st":"indexed","u":18,"pl":"https://cdn.21st.dev/rahil1202/light-speed/default/preview.1759470911908.png","pc":"rahil1202"},{"id":"21st:rahil1202__metallic-business-card","t":"Metallic business card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/metallic-business-card/default/preview.1785369908228-885ffbc3-e971-40b7-aed4-406a86be50e8.png","pc":"rahil1202"},{"id":"21st:rahil1202__metallic-tilt-card","t":"Metallic tilt card","d":"Metallic Tilt Card with 3d animation","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/metallic-tilt-card/default/preview.1760164352781.png","pc":"rahil1202"},{"id":"21st:rahil1202__neural-noise-cursor","t":"Neural noise cursor","d":"A full-viewport WebGL shader backdrop that renders a layered “neural” noise field inspired . It’s pointer- and scroll-responsive, and sits non-interactively behind your content.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/neural-noise-cursor/default/preview.1759469693872.png","pc":"rahil1202","tg":["cursor"]},{"id":"21st:rahil1202__plasma-cursor","t":"Plasma cursor","d":"A mesmerizing grid of glowing particles that follow your cursor, pulse rhythmically, and move organically when idle. Fully customizable with props for color, density, motion, and r","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/plasma-cursor/default/preview.1759660013885.png","pc":"rahil1202"},{"id":"21st:rahil1202__prisma-hero","t":"Prisma hero","d":"A full-screen cinematic hero section with a background video, animated word reveal, and minimal floating navbar—designed to highlight a creative brand with strong visual storytelli","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"rahil1202","st":"indexed","u":49,"pl":"https://cdn.21st.dev/rahil1202/prisma-hero/default/preview.1776747545948.png","pc":"rahil1202","tg":["cta","hero","text","video"]},{"id":"21st:rahil1202__retro-dvd-tv","t":"Retro dvd tv","d":"A fun retro TV component with a classic DVD logo bouncing around the screen. Resize it, change colors, tweak the speed — and relive the 2000s!","k":"component","s":"21st","c":"other","g":"other","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/retro-dvd-tv/default/preview.1785306856286-e0efdf32-7588-408c-a867-8bfd94ef7511.png","pc":"rahil1202"},{"id":"21st:rahil1202__scanner-card-stream","t":"Scanner card stream","d":"A full-screen, Evervault-inspired scene that streams glossy card tiles under a central “scanner” beam with ASCII reveals, particle glow, inertial drag, and subtle parallax—fully co","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahil1202","st":"indexed","u":112,"pl":"https://cdn.21st.dev/rahil1202/scanner-card-stream/default/preview.1759252308254.png","pc":"rahil1202","tg":["card","scroll-area"]},{"id":"21st:rahil1202__scroll-hero-section","t":"Scroll hero section","d":"Animated Scroll keywords section with loading and scrolling animation","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"rahil1202","st":"indexed","u":84,"pl":"https://cdn.21st.dev/rahil1202/scroll-hero-section/default/preview.1759683737913.png","pc":"rahil1202"},{"id":"21st:rahil1202__scrolling-hero-marquee","t":"Scrolling hero marquee","d":"Animated headline scroller with layered motion and depth perspective for modern hero sections.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/scrolling-hero-marquee/default/preview.1760163850777.png","pc":"rahil1202"},{"id":"21st:rahil1202__star-shockwaves","t":"Star shockwaves","d":"A GPU-driven particle sculpture with shockwave pulses, theme switching, and cinematic bloom, built on Three.js and Tailwind.","k":"component","s":"21st","c":"status/loader","g":"status","a":"rahil1202","st":"indexed","u":5,"pl":"https://cdn.21st.dev/rahil1202/star-shockwaves/default/preview.1785369566321-ba8a340c-c638-40d9-9449-77c01ab54a4a.png","pc":"rahil1202"},{"id":"21st:rahil1202__text-scrammble","t":"Text scrammble","d":"Beautiful Text Scramble effect","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"rahil1202","st":"indexed","u":17,"pl":"https://cdn.21st.dev/rahil1202/text-scrammble/default/preview.1759845491228.png","pc":"rahil1202"},{"id":"21st:rahil1202__time-morph-clock","t":"Time morph clock","d":"A beautifully animated digital clock component that uses smooth SVG morphing transitions to display the current time. Each digit seamlessly transforms every second, creating a visu","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/time-morph-clock/default/preview.1759659006317.png","pc":"rahil1202"},{"id":"21st:rahil1202__tube-cursor","t":"Tube cursor","d":"An interactive background component that renders glowing animated tubes powered by Three.js. Designed for Next.js + React, it features customizable tube colors, light palettes, int","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rahil1202","st":"indexed","pl":"https://cdn.21st.dev/rahil1202/tube-cursor/default/preview.1758697964542.png","pc":"rahil1202","tg":["cursor"]},{"id":"21st:rahil1202__water-ripple-image","t":"Water ripple image","d":"Immersive hero background that applies animated water ripples to any image, theme-aware out of the box.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"rahil1202","st":"indexed","u":18,"pl":"https://cdn.21st.dev/rahil1202/water-ripple-image/default/preview.1760160835126.png","pc":"rahil1202"},{"id":"21st:rahuljangirwork__cookie-consent-banner","t":"Cookie consent banner","d":"A responsive React cookie-consent banner with three size variants (default, small, mini) and customizable callbacks—powered by your custom Card layout and ParticleButton click effe","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rahuljangirwork","st":"indexed","pl":"https://cdn.21st.dev/rahuljangirwork/cookie-consent-banner/default/preview.1752039270419.png","pc":"rahuljangirwork"},{"id":"21st:ramprasadre56__ai-feature-card","t":"Ai feature card","d":"A sleek, dark-themed Feature Card designed for modern SaaS landing pages. Features a glowing icon badge, typography for hierarchical content, and an interactive CTA button. Fully r","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/ai-feature-card/default/preview.1766951796342.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__ai-prompt-input-with-actions","t":"Ai prompt input with actions","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/ai-prompt-input-with-actions/default/preview.1767017731137.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__card-with-thumbnail","t":"Card with thumbnail","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/card-with-thumbnail/default/preview.1766976272988.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__gemini-3-input","t":"Gemini 3 input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/gemini-3-input/default/preview.1766954783668.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__grok-interface-kit","t":"Grok interface kit","d":"A high-fidelity chat interface inspired by xAI's Grok. Features a minimalist brutalist aesthetic, auto-resizing input, and a collapsible 'Thinking' process visualization for reason","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/grok-interface-kit/default/preview.1767074036397.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__modern-ai-chat-dashboard","t":"Modern ai chat dashboard","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/modern-ai-chat-dashboard/default/preview.1767016899198.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__orbiting-ecosystem","t":"Orbiting ecosystem","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/orbiting-ecosystem/default/preview.1767175546998.png","pc":"ramprasadre56"},{"id":"21st:ramprasadre56__prompt-input-full-line","t":"Prompt input full line","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ramprasadre56","st":"indexed","pl":"https://cdn.21st.dev/ramprasadre56/prompt-input-full-line/default/preview.1766977967403.png","pc":"ramprasadre56"},{"id":"21st:randomgoose__counter","t":"Counter","d":"CounterCounter","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"randomgoose","st":"indexed","pl":"https://cdn.21st.dev/randomgoose/counter/default/preview.1774164052261.png","pc":"randomgoose"},{"id":"21st:ranjansharma.ind__standard-card","t":"Standard card","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ranjansharma.ind","st":"indexed","pl":"https://cdn.21st.dev/ranjansharma.ind/standard-card/default/preview.1774621109440.png","pc":"ranjansharma.ind","tg":["carousel","features"]},{"id":"21st:ravikatiyar162__3d-card","t":"3d card","d":"A 3D card that appears on hover can make your website look beautiful.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ravikatiyar162/3d-card/default/preview.1752999832295.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__3d-pin","t":"3d pin","d":"Hover over the card to see the 3D pin animation","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/3d-pin/default/preview.1752909505742.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__3d-radio-group","t":"3d radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/3d-radio-group/default/preview.1755159401938.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__404-error-page","t":"404 error page","k":"component","s":"21st","c":"other","g":"other","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/404-error-page/default/preview.1755078123475.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__achievement-cards","t":"Achievement cards","d":"Achievement Cards – Visual recognition component. Highlights awards, partnerships, features, and milestones with branded icons and concise labels. Ideal for startup landing pages, ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ravikatiyar162/achievement-cards/default/preview.1753430189492.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__activity-chart-card","t":"Activity chart card","d":"Activity Chart Card\nThis component displays activity data in a bar chart format. It's designed to be reusable, accepting props for the title, total value, and chart data. The bars ","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"rated","u":131,"pl":"https://cdn.21st.dev/ravikatiyar162/activity-chart-card/default/preview.1758186277159.png","pc":"ravikatiyar162","tg":["dashboard"],"sc":21},{"id":"21st:ravikatiyar162__advanced-ai-chat-input","t":"Advanced ai chat input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/advanced-ai-chat-input/default/preview.1759026406514.png","pc":"ravikatiyar162","tg":["textarea","upload-download"]},{"id":"21st:ravikatiyar162__advanced-parallax-storytelling-interface","t":"Advanced parallax storytelling interface","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/advanced-parallax-storytelling-interface/default/preview.1752824396333.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__ai-image-generator-hero","t":"Ai image generator hero","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":195,"pl":"https://cdn.21st.dev/ravikatiyar162/ai-image-generator-hero/default/preview.1760853925745.png","pc":"ravikatiyar162","tg":["ai-chat","carousel","cta","gallery"]},{"id":"21st:ravikatiyar162__animated-earth-background","t":"Animated earth background","d":"A rotating Earth animation with glowing edges and twinkling stars on a dark cosmic backdrop. Ideal for landing pages, astronomy apps, or immersive websites needing a futuristic spa","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/animated-earth-background/default/preview.1755416179562.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__animated-feature-card","t":"Animated feature card","d":"Animated Feature Card\nA visually polished card component that uses framer-motion for a subtle load-in animation and hover effect. It's designed to be highly reusable for showcasing","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-feature-card/default/preview.1759047169404.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__animated-hero","t":"Animated hero","d":"Bold hero section featuring a red gradient title and animated dot grid that dynamically follows cursor movement. Ideal for creative portfolios, landing pages, and modern minimal we","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":27,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-hero/default/preview.1755369334576.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__animated-hero-section","t":"Animated hero section","d":"Full-screen hero section with a fiery gradient animation and smoke effect, featuring bold gradient typography for the main headline, a vibrant subheading, and prominent call-to-act","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/animated-hero-section/default/preview.1755279387289.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__animated-hero-section-1","t":"Animated hero section 1","d":"Animated Hero Section\nDescription: A responsive, full-screen hero section with a background image and text elements that animate into view. It features a customizable navigation ba","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":122,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-hero-section-1/default/preview.1758819014953.png","pc":"ravikatiyar162","tg":["cta","hero"]},{"id":"21st:ravikatiyar162__animated-hero-section-2","t":"Animated hero section 2","d":"Animated Roadmap\nThis component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of ","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"ravikatiyar162","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-hero-section-2/default/preview.1758819514630.png","pc":"ravikatiyar162","tg":["globe"]},{"id":"21st:ravikatiyar162__animated-profile-card","t":"Animated profile card","d":"Animated Profile Card\nA modern, animated profile card to showcase user details, stats, and skills. It features a subtle hover effect and staggered animations on load, built with Fr","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-profile-card/default/preview.1758935883837.png","pc":"ravikatiyar162","tg":["profile"]},{"id":"21st:ravikatiyar162__animated-shader-hero","t":"Animated shader hero","d":"Animated Shader Hero\nA stunning React hero component with animated WebGL shader backgrounds, smooth animations, and fully customizable content. Perfect for modern landing pages and","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":1318,"pl":"https://cdn.21st.dev/ravikatiyar162/animated-shader-hero/default/preview.1755360493434.png","pc":"ravikatiyar162","tg":["cta","hero"]},{"id":"21st:ravikatiyar162__animated-underline-hero-section","t":"Animated underline hero section","d":"Animated Underline Hero – Bold intro section with dynamic emphasis. Features large typography with animated underline effects to highlight key phrases, paired with high-contrast vi","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/animated-underline-hero-section/default/preview.1753449390770.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__app-download-section","t":"App download section","d":"App Download Section\nThis component provides a promotional section to encourage users to download an application. It features a QR code, a list of benefits, and a prominent visual ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ravikatiyar162/app-download-section/default/preview.1759083001986.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__apps-grid","t":"Apps grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/apps-grid/default/preview.1759473188881.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__asset-card","t":"Asset card","d":"Crypto Asset Card\nThis component is a responsive card designed to display key metrics for a crypto asset, such as price, percentage change, and portfolio value. It features a disti","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ravikatiyar162/asset-card/default/preview.1758607405055.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__author-form-card","t":"Author form card","d":"AuthorFormCard\nA responsive and theme-adaptive card component for creating or updating author profiles. It features an image upload area, input fields with tooltips, and integrated","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ravikatiyar162","st":"indexed","u":46,"pl":"https://cdn.21st.dev/ravikatiyar162/author-form-card/default/preview.1758934910257.png","pc":"ravikatiyar162","tg":["modal","profile","tooltip"]},{"id":"21st:ravikatiyar162__background-neon-rain-animation","t":"Background neon rain animation","d":"Animated diagonal streaks in glowing green, creating a futuristic rain effect. Perfect for cyberpunk themes or tech-inspired backgrounds.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/background-neon-rain-animation/default/preview.1755161706667.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__bag-checkout","t":"Bag checkout","d":"The component with sample products using your provided image URL. All animations are smooth and modern, enhancing the premium e-commerce experience!","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/bag-checkout/default/preview.1761998529124.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__baggage-add-on","t":"Baggage add on","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/baggage-add-on/default/preview.1758094995256.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__banner","t":"Banner","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/banner/default/preview.1758014543386.png","pc":"ravikatiyar162","tg":["alert"]},{"id":"21st:ravikatiyar162__battery-card","t":"Battery card","d":"Battery Card\nA visually polished component to display device battery status, featuring a dynamic, animated liquid-fill effect that reflects the current charge level.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ravikatiyar162/battery-card/default/preview.1759329204157.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__bento-gallery","t":"Bento gallery","d":"Interactive Image Bento Gallery\nDescription: A responsive, horizontally draggable bento-style gallery designed exclusively for images. It features smooth animations powered by Fram","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":237,"pl":"https://cdn.21st.dev/ravikatiyar162/bento-gallery/default/preview.1758349269185.png","pc":"ravikatiyar162","tg":["gallery","modal"]},{"id":"21st:ravikatiyar162__bento-grid","t":"Bento grid","d":"All-in-one tools for automation, content management, scheduling, and AI-powered efficiency.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ravikatiyar162/bento-grid/default/preview.1755772718333.png","pc":"ravikatiyar162","tg":["ai-chat","features"]},{"id":"21st:ravikatiyar162__bubble-button","t":"Bubble button","d":"Usage badge for free plan tracking. Displays remaining quota (e.g., 20/20 left) with a database icon. Ideal for freemium apps to show user limits transparently.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ravikatiyar162","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ravikatiyar162/bubble-button/default/preview.1753885282861.png","pc":"ravikatiyar162","tg":["badge","tooltip"]},{"id":"21st:ravikatiyar162__business-features","t":"Business features","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/business-features/default/preview.1759513564287.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__button","t":"Button","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/button/default/preview.1756628816919.png","pc":"ravikatiyar162","tg":["cta"]},{"id":"21st:ravikatiyar162__cancellation-policy","t":"Cancellation policy","k":"component","s":"21st","c":"other","g":"other","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/cancellation-policy/default/preview.1759648472352.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__card","t":"Card","d":"Displays location-specific highlights with imagery, title, and subtle UI elements like a \"like\" icon. Ideal for showcasing top destinations, promoting tours, or suggesting user-cur","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ravikatiyar162/card/default/preview.1754570152246.png","pc":"ravikatiyar162","tg":["image"]},{"id":"21st:ravikatiyar162__card-1","t":"Card 1","d":"Interactive Zoom Image\nAn image component that smoothly zooms in on the cursor's position on hover. It leverages framer-motion for fluid animations and is fully customizable throug","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ravikatiyar162/card-1/default/preview.1756026833976.png","pc":"ravikatiyar162","tg":["image"]},{"id":"21st:ravikatiyar162__card-10","t":"Card 10","d":"Stat Card\nThis card is designed to display a key metric, its title, and a percentage change from a previous period. It features a count-up animation for the main value and uses the","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":36,"pl":"https://cdn.21st.dev/ravikatiyar162/card-10/default/preview.1757830893277.png","pc":"ravikatiyar162","tg":["dashboard","stat"]},{"id":"21st:ravikatiyar162__card-11","t":"Card 11","d":"Latest News Card\nA card component designed to display a list of recent articles or news items. It features a main title, a \"View all\" link, and a list of animated news entries that","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":27,"pl":"https://cdn.21st.dev/ravikatiyar162/card-11/default/preview.1757832556180.png","pc":"ravikatiyar162","tg":["card","list"]},{"id":"21st:ravikatiyar162__card-12","t":"Card 12","d":"Opportunity Card\nA visually polished and responsive card component to display project opportunities or job offers, complete with user details, project specifications, and action bu","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ravikatiyar162/card-12/default/preview.1757833238403.png","pc":"ravikatiyar162","tg":["card"]},{"id":"21st:ravikatiyar162__card-13","t":"Card 13","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-13/default/preview.1757834104317.png","pc":"ravikatiyar162","tg":["date-picker","grid"]},{"id":"21st:ravikatiyar162__card-14","t":"Card 14","d":"Event Scheduler Card\nCompact scheduling widget highlighting upcoming events with date, time, and location. Ideal for calendar apps to provide at-a-glance reminders and quick event ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ravikatiyar162/card-14/default/preview.1757857992447.png","pc":"ravikatiyar162","tg":["image"]},{"id":"21st:ravikatiyar162__card-15","t":"Card 15","d":"Notification Card\nA responsive and animated notification card component that displays user information, a message, and status details. It is designed to be easily integrated and cu","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":35,"pl":"https://cdn.21st.dev/ravikatiyar162/card-15/default/preview.1757859241095.png","pc":"ravikatiyar162","tg":["notification","profile"]},{"id":"21st:ravikatiyar162__card-16","t":"Card 16","d":"Incoming Call Notification\nThis component displays an incoming call notification card. It's designed to be highly reusable, with props for caller information and action handlers. I","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ravikatiyar162","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ravikatiyar162/card-16/default/preview.1758026385416.png","pc":"ravikatiyar162","tg":["notification","toast"]},{"id":"21st:ravikatiyar162__card-17","t":"Card 17","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-17/default/preview.1758027475153.png","pc":"ravikatiyar162","tg":["image"]},{"id":"21st:ravikatiyar162__card-18","t":"Card 18","d":"BlogPostCard\nThis component is designed to display blog post information. It features two main variants: featured (large with an image) and default (compact, text-focused). It's re","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","u":67,"pl":"https://cdn.21st.dev/ravikatiyar162/card-18/default/preview.1758030112548.png","pc":"ravikatiyar162","tg":["grid"]},{"id":"21st:ravikatiyar162__card-19","t":"Card 19","d":"Product Card\nThis interactive card allows users to view product details, select variants like color and size, and add the item to their cart. It's built to be highly reusable and t","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ravikatiyar162/card-19/default/preview.1758099252870.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__card-2","t":"Card 2","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-2/default/preview.1756285709090.png","pc":"ravikatiyar162","tg":["profile"]},{"id":"21st:ravikatiyar162__card-20","t":"Card 20","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/card-20/default/preview.1758103430740.png","pc":"ravikatiyar162","sc":17},{"id":"21st:ravikatiyar162__card-21","t":"Card 21","d":"Destination Card\nA visually rich card component designed to showcase travel destinations. It features a background image, a content overlay, and an interactive 3D tilt effect on ho","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":237,"pl":"https://cdn.21st.dev/ravikatiyar162/card-21/default/preview.1758107835532.png","pc":"ravikatiyar162","tg":["image"]},{"id":"21st:ravikatiyar162__card-22","t":"Card 22","d":"Place Card\nA visually polished card component for displaying travel destinations or listings. It includes an image carousel, rating, tags, and booking information, with smooth anim","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":171,"pl":"https://cdn.21st.dev/ravikatiyar162/card-22/default/preview.1758109732424.png","pc":"ravikatiyar162","tg":["carousel","image"]},{"id":"21st:ravikatiyar162__card-23","t":"Card 23","d":"Article Card\nThis card component is designed to showcase an article, event, or location in a visually appealing and structured format. It's fully responsive and uses shadcn/ui them","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ravikatiyar162","st":"indexed","u":67,"pl":"https://cdn.21st.dev/ravikatiyar162/card-23/default/preview.1758160076315.png","pc":"ravikatiyar162","tg":["date-picker"]},{"id":"21st:ravikatiyar162__card-24","t":"Card 24","d":"Shipment Card – Real-time delivery update. Displays live order status with tracking option for better customer experience.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-24/default/preview.1758175367266.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__card-25","t":"Card 25","d":"Activity Card – Showcase adventures. Engaging UI element to display activities with images, duration, distance, and difficulty. Perfect for travel, fitness, and experience booking ","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":62,"pl":"https://cdn.21st.dev/ravikatiyar162/card-25/default/preview.1758281565185.png","pc":"ravikatiyar162","tg":["carousel","stat"]},{"id":"21st:ravikatiyar162__card-26","t":"Card 26","k":"component","s":"21st","c":"actions/link","g":"actions","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-26/default/preview.1758953199390.png","pc":"ravikatiyar162","tg":["link"]},{"id":"21st:ravikatiyar162__card-3","t":"Card 3","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-3/default/preview.1757402917798.png","pc":"ravikatiyar162","tg":["profile","stat"]},{"id":"21st:ravikatiyar162__card-4","t":"Card 4","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-4/default/preview.1757403639137.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__card-5","t":"Card 5","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-5/default/preview.1757412787865.png","pc":"ravikatiyar162","tg":["profile","stat"]},{"id":"21st:ravikatiyar162__card-6","t":"Card 6","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/card-6/default/preview.1757672295195.png","pc":"ravikatiyar162","tg":["notification"]},{"id":"21st:ravikatiyar162__card-7","t":"Card 7","d":"Product Card\nA sleek, image-centric card component designed to showcase products with a title, description, price, and brand logo. It features a gradient overlay for text readabili","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ravikatiyar162","st":"indexed","u":96,"pl":"https://cdn.21st.dev/ravikatiyar162/card-7/default/preview.1757730351389.png","pc":"ravikatiyar162","tg":["image","pagination"]},{"id":"21st:ravikatiyar162__card-8","t":"Card 8","d":"Article Card\nA responsive card component designed to display articles or blog posts, featuring an image, title, description, and author details. It adapts seamlessly to both light ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":26,"pl":"https://cdn.21st.dev/ravikatiyar162/card-8/default/preview.1757829315959.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__card-9","t":"Card 9","d":"Sentiment Analysis Card\nA visually engaging card component to display sentiment analysis results with an animated, segmented progress bar. It's built to be fully reusable by accept","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ravikatiyar162","st":"indexed","u":38,"pl":"https://cdn.21st.dev/ravikatiyar162/card-9/default/preview.1757830310901.png","pc":"ravikatiyar162","tg":["data-visualization","dashboard"]},{"id":"21st:ravikatiyar162__card-grid","t":"Card grid","d":"Article Card Grid\nThis component displays a title and a responsive grid of article cards. It's designed to be easily populated with data via props, making it highly reusable for di","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","u":26,"pl":"https://cdn.21st.dev/ravikatiyar162/card-grid/default/preview.1759553147367.png","pc":"ravikatiyar162","tg":["grid","image"]},{"id":"21st:ravikatiyar162__cards","t":"Cards","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/cards/default/preview.1756285179439.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__cards-1","t":"Cards 1","d":"Interactive Travel Card\nA visually polished card component that uses framer-motion for a 3D hover effect. It's designed to be fully responsive and reusable, with all content and ac","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":48,"pl":"https://cdn.21st.dev/ravikatiyar162/cards-1/default/preview.1758416730111.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__carousel","t":"Carousel","d":"Shareholder Reports Carousel\nThis component displays a collection of reports in a horizontally scrollable carousel. It features navigation arrows that appear contextually based on ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":86,"pl":"https://cdn.21st.dev/ravikatiyar162/carousel/default/preview.1759516555327.png","pc":"ravikatiyar162","tg":["carousel","scroll-area"]},{"id":"21st:ravikatiyar162__case-studies-section","t":"Case studies section","d":"Case Studies Section – Interactive category tabs with visual cards. Highlights product capabilities (like CRM) through images and concise descriptions. Supports quick comparison an","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/case-studies-section/default/preview.1753530434712.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__circular-fan-speed-knob","t":"Circular fan speed knob","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/circular-fan-speed-knob/default/preview.1755245371558.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__circular-gallery","t":"Circular gallery","d":"Showcase content in an interactive, rotating carousel that keeps users engaged. Ideal for portfolios, product displays, or immersive visual storytelling.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":385,"pl":"https://cdn.21st.dev/ravikatiyar162/circular-gallery/default/preview.1755773973094.png","pc":"ravikatiyar162","tg":["carousel","gallery","image"]},{"id":"21st:ravikatiyar162__circular-gallery-2","t":"Circular gallery 2","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":130,"pl":"https://cdn.21st.dev/ravikatiyar162/circular-gallery-2/default/preview.1761994137915.png","pc":"ravikatiyar162","tg":["carousel","gallery","scroll-area"]},{"id":"21st:ravikatiyar162__color-palette","t":"Color palette","d":"Branding Card\nA visually polished card to showcase brand typography and color palettes, featuring fluid animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ravikatiyar162","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ravikatiyar162/color-palette/default/preview.1758305127322.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__color-palette-card","t":"Color palette card","d":"A compact, modern card displaying a curated set of harmonious color swatches, perfect for design inspiration and theme selection. Each palette is paired with a save count, making i","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":17,"pl":"https://cdn.21st.dev/ravikatiyar162/color-palette-card/default/preview.1755243629924.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__community-hub-card","t":"Community hub card","d":"Community Hub Card\nThis card provides a centralized view of a community's key information, including member stats, an invite system, book progress, and an upcoming reading list.\n\n","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ravikatiyar162/community-hub-card/default/preview.1758994727734.png","pc":"ravikatiyar162","tg":["team"]},{"id":"21st:ravikatiyar162__composer-input","t":"Composer input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/composer-input/default/preview.1760165544765.png","pc":"ravikatiyar162","tg":["upload-download"]},{"id":"21st:ravikatiyar162__connect-wallet-modal","t":"Connect wallet modal","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/connect-wallet-modal/default/preview.1759971682031.png","pc":"ravikatiyar162","tg":["modal"]},{"id":"21st:ravikatiyar162__contact","t":"Contact","d":"Contact Section\nDescription: A comprehensive and visually appealing contact section component featuring an animated background, a navigation bar, a main title, a contact form with ","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ravikatiyar162","st":"indexed","u":101,"pl":"https://cdn.21st.dev/ravikatiyar162/contact/default/preview.1760506498496.png","pc":"ravikatiyar162","tg":["checkbox","form","link","textarea"]},{"id":"21st:ravikatiyar162__content-with-illustration","t":"Content with illustration","d":"Content With Illustration\nThis component displays a section with textual content alongside an illustration. It's built to be responsive, adapting from a stacked layout on mobile to","k":"component","s":"21st","c":"media/icon","g":"media","a":"ravikatiyar162","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ravikatiyar162/content-with-illustration/default/preview.1759559526916.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__credit-debit-card","t":"Credit debit card","d":"Sleek, minimal Mastercard design with gold chip and masked number, flipping on hover to reveal card details. Perfect for payment UI interactions and digital wallet animations.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":32,"pl":"https://cdn.21st.dev/ravikatiyar162/credit-debit-card/default/preview.1755175784199.png","pc":"ravikatiyar162","tg":["card"]},{"id":"21st:ravikatiyar162__crypto-performance-progress-card","t":"Crypto performance progress card","d":"I crafted this sleek, dark-themed crypto performance card to bring data to life—featuring bold stats, smooth micro-animations, glowing accents, and a polished layout perfect for da","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/crypto-performance-progress-card/default/preview.1753119667609.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__currency-exchange-card","t":"Currency exchange card","d":"Currency Exchange Card\nThis component provides a complete interface for currency conversion, including selectors, amount input, fee calculations, and a swap animation. It's built t","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":28,"pl":"https://cdn.21st.dev/ravikatiyar162/currency-exchange-card/default/preview.1758935424627.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__dashboard","t":"Dashboard","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/dashboard/default/preview.1757852319904.png","pc":"ravikatiyar162","tg":["dashboard"]},{"id":"21st:ravikatiyar162__dashboard-1","t":"Dashboard 1","d":"Marketing Dashboard\nDescription: An animated dashboard card to display marketing activities and team statistics. It features a main header, two distinct stat cards, and a call-to-a","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","u":68,"pl":"https://cdn.21st.dev/ravikatiyar162/dashboard-1/default/preview.1758132387821.png","pc":"ravikatiyar162","tg":["dashboard","cta","progress","stat"]},{"id":"21st:ravikatiyar162__dashboard-2","t":"Dashboard 2","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/dashboard-2/default/preview.1760588594109.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__delivery-scheduler","t":"Delivery scheduler","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/delivery-scheduler/default/preview.1758957058455.png","pc":"ravikatiyar162","tg":["calendar","date-picker"],"sc":25},{"id":"21st:ravikatiyar162__designer-profile-card","t":"Designer profile card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/designer-profile-card/default/preview.1753512803052.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__destructive-action-dialog","t":"Destructive action dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/destructive-action-dialog/default/preview.1760163206067.png","pc":"ravikatiyar162","sc":21},{"id":"21st:ravikatiyar162__donut-chart","t":"Donut chart","d":"Donut Chart – Visual data distribution widget. Displays categorized insights with a clean circular layout and color-coded segments. Perfect for analytics dashboards and performance","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/donut-chart/default/preview.1761628978651.png","pc":"ravikatiyar162","tg":["data-visualization","dashboard"]},{"id":"21st:ravikatiyar162__download-card","t":"Download card","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/download-card/default/preview.1758956804549.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__download-options-section","t":"Download options section","d":"Download Options Section – Platform-agnostic access panel. Clearly showcases download paths for Mac, Windows, Mobile, and Browser Extension. Designed with strong CTAs and responsiv","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/download-options-section/default/preview.1753528574307.png","pc":"ravikatiyar162","tg":["cta","features"]},{"id":"21st:ravikatiyar162__download-toast","t":"Download toast","d":"This project is a responsive React component that displays a list of file downloads with a sleek, modern design. It features an animated background, light/dark modes, and a progres","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"rated","u":34,"pl":"https://cdn.21st.dev/ravikatiyar162/download-toast/default/preview.1752912187425.png","pc":"ravikatiyar162","tg":["list","upload-download"],"sc":16},{"id":"21st:ravikatiyar162__economic-calendar","t":"Economic calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/economic-calendar/default/preview.1759420789533.png","pc":"ravikatiyar162","tg":["calendar","data-visualization","scroll-area"],"sc":22},{"id":"21st:ravikatiyar162__email-capture-section","t":"Email capture section","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/email-capture-section/default/preview.1760765197598.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__error","t":"Error","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/error/default/preview.1758098670822.png","pc":"ravikatiyar162","tg":["modal"]},{"id":"21st:ravikatiyar162__event-card","t":"Event card","d":"Event Card\nA visually appealing card to display event details, including title, date, time, location, and frequency. It features a subtle load-in and hover animation for a modern u","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ravikatiyar162/event-card/default/preview.1758978828073.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__event-card-component","t":"Event card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/event-card-component/default/preview.1760170800875.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__excel-style-table","t":"Excel style table","d":"A beautiful, minimal table component with Excel-like features. Double-click cells to edit, click headers to select entire rows/columns, drag to select ranges, and use Ctrl+C to cop","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/excel-style-table/default/preview.1760365701734.png","pc":"ravikatiyar162","tg":["data-visualization","table"]},{"id":"21st:ravikatiyar162__expandable-skill-tags","t":"Expandable skill tags","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/expandable-skill-tags/default/preview.1760509300064.png","pc":"ravikatiyar162","tg":["list","profile"]},{"id":"21st:ravikatiyar162__fare-selector","t":"Fare selector","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/fare-selector/default/preview.1758676046078.png","pc":"ravikatiyar162","tg":["pricing-section","table"]},{"id":"21st:ravikatiyar162__feature-card","t":"Feature card","d":"Feature Card\nA versatile, theme-adaptive card component with built-in animations to showcase product features elegantly.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"rated","u":31,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-card/default/preview.1758821186081.png","pc":"ravikatiyar162","tg":["features"],"sc":17},{"id":"21st:ravikatiyar162__feature-card-1","t":"Feature card 1","d":"Animated Feature Card\nThis component displays a feature or benefit in a visually engaging card format. It's designed to be highly reusable, accepting props for its content, image, ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":94,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-card-1/default/preview.1759299143270.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__feature-card-11","t":"Feature card 11","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-card-11/default/preview.1762319266679.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-card-2","t":"Feature card 2","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-card-2/default/preview.1760423134554.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-carousel","t":"Feature carousel","d":"Feature Carousel\nInteractive showcase for highlighting multiple app features in a swipeable, modern layout. Perfect for engaging users while promoting mobile-friendly tools and exp","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":399,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-carousel/default/preview.1756288349810.png","pc":"ravikatiyar162","tg":["carousel","gallery"]},{"id":"21st:ravikatiyar162__feature-grid","t":"Feature grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-grid/default/preview.1759429259409.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-grid-1","t":"Feature grid 1","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-grid-1/default/preview.1759515014105.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-highlight","t":"Feature highlight","d":"Feature Highlight Component\nThis component animates a list of features, a title, and an icon into view with a staggered effect. It's built to be highly reusable—you can pass any te","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ravikatiyar162","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-highlight/default/preview.1759052208301.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-highlight-1","t":"Feature highlight 1","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-highlight-1/default/preview.1760759777065.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-highlight-card","t":"Feature highlight card","d":"Feature Highlight Card\nThis component, FeatureHighlightCard, is designed to showcase a specific feature, complete with an image, title, description, and a call-to-action button. It","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":60,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-highlight-card/default/preview.1759643743454.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__feature-overview-section","t":"Feature overview section","d":"Introductory component for brand and product clarity. Combines a visual brand block with a list of key features or concepts, each paired with an icon and brief description. Ideal f","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-overview-section/default/preview.1753175177678.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-overview-section-1","t":"Feature overview section 1","d":"Introductory component for brand and product clarity. Combines a visual brand block with a list of key features or concepts, each paired with an icon and brief description. Ideal f","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-overview-section-1/default/preview.1753176139743.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-polaroid-section","t":"Feature polaroid section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-polaroid-section/default/preview.1759495824018.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-section","t":"Feature section","d":"Feature Grid\nA responsive grid layout designed to showcase different product features, use cases, or categories. It includes a header with a title and illustration, a grid of categ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-section/default/preview.1759488637337.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__feature-section-1","t":"Feature section 1","d":"Feature Section\nA responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a ","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":28,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-section-1/default/preview.1760114116071.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__feature-showcase","t":"Feature showcase","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feature-showcase/default/preview.1759475548348.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__feature-spotlight","t":"Feature spotlight","d":"Feature Spotlight\nA responsive section component designed to highlight a key product feature. It juxtaposes a detailed text description, including a pre-header, main heading, and c","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":78,"pl":"https://cdn.21st.dev/ravikatiyar162/feature-spotlight/default/preview.1759566054255.png","pc":"ravikatiyar162","tg":["cta","features"]},{"id":"21st:ravikatiyar162__feedback-widget","t":"Feedback widget","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/feedback-widget/default/preview.1758910733122.png","pc":"ravikatiyar162","tg":["textarea"]},{"id":"21st:ravikatiyar162__file-transfer-card","t":"File transfer card","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/file-transfer-card/default/preview.1760168079903.png","pc":"ravikatiyar162","tg":["upload-download"]},{"id":"21st:ravikatiyar162__file-upload-card","t":"File upload card","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/file-upload-card/default/preview.1759843184920.png","pc":"ravikatiyar162","tg":["progress","upload-download"],"sc":23},{"id":"21st:ravikatiyar162__file-uploader","t":"File uploader","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/file-uploader/default/preview.1760869840124.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__financial-dashboard","t":"Financial dashboard","k":"layout","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/financial-dashboard/default/preview.1759039352150.png","pc":"ravikatiyar162","tg":["dashboard"]},{"id":"21st:ravikatiyar162__flight-card","t":"Flight card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/flight-card/default/preview.1758705166717.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__flight-card-1","t":"Flight card 1","d":"Flight Card\nA visually polished card component to display flight details, complete with animations and theme support.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ravikatiyar162/flight-card-1/default/preview.1758823961763.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__flight-routes-conversion-card","t":"Flight routes conversion card","d":"I designed this sleek, minimalist conversion card to visually represent transitions—like flight routes or asset swaps.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/flight-routes-conversion-card/default/preview.1753121609272.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__flight-search","t":"Flight search","d":"Flight Search – Effortless trip planning with clear routes, dates, and passenger details. One tap to find the best flights","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/flight-search/default/preview.1758095840310.png","pc":"ravikatiyar162","tg":["date-picker","search"],"sc":20},{"id":"21st:ravikatiyar162__flight-status-card","t":"Flight status card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/flight-status-card/default/preview.1758292024507.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__flight-ticket","t":"Flight ticket","k":"component","s":"21st","c":"other","g":"other","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/flight-ticket/default/preview.1758083128033.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__floating-icons-hero-section","t":"Floating icons hero section","d":"Playful and tech-savvy. Centered bold headline with subtext, surrounded by floating soft-shadowed app icons. Creates a futuristic, ecosystem vibe. Ideal for SaaS, tech platforms, o","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":455,"pl":"https://cdn.21st.dev/ravikatiyar162/floating-icons-hero-section/default/preview.1753603294933.png","pc":"ravikatiyar162","tg":["cta","hero","image"]},{"id":"21st:ravikatiyar162__folder","t":"Folder","d":"An interactive folder animation that responds to hover, making file browsing visually engaging. Perfect for dashboards, file managers, and modern UI systems.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ravikatiyar162","st":"indexed","u":64,"pl":"https://cdn.21st.dev/ravikatiyar162/folder/default/preview.1755846786428.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__folder-card","t":"Folder card","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/folder-card/default/preview.1758014110485.png","pc":"ravikatiyar162","tg":["dashboard"]},{"id":"21st:ravikatiyar162__folding-cube-loader","t":"Folding cube loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/user_2zMtrqo9RMaaIn4f8F2z3oeY497/folding-cube-loader/default/preview.1753027648367.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__food-hero","t":"Food hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/food-hero/default/preview.1759651086359.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__footer","t":"Footer","d":" A versatile and responsive footer component designed for business websites. It includes branding information, useful links, social media links, and a newsletter subscription form ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ravikatiyar162","st":"indexed","u":111,"pl":"https://cdn.21st.dev/ravikatiyar162/footer/default/preview.1760589397059.png","pc":"ravikatiyar162","tg":["footer"]},{"id":"21st:ravikatiyar162__frame","t":"Frame","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/frame/default/preview.1757417840416.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__frosted-card","t":"Frosted card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/frosted-card/default/preview.1758820018480.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__glass-calendar","t":"Glass calendar","d":"A sleek, animated calendar component with a glassmorphism effect. It's interactive, theme-adaptive, and now features a smooth horizontal scroll to navigate the days of the month.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ravikatiyar162","st":"indexed","u":111,"pl":"https://cdn.21st.dev/ravikatiyar162/glass-calendar/default/preview.1754733047034.png","pc":"ravikatiyar162","tg":["calendar","date-picker","scroll-area"]},{"id":"21st:ravikatiyar162__glass-radio-group","t":"Glass radio group","d":"Sleek, pill-shaped option selector with frosted glass styling and a glowing highlight on the active choice. Ideal for membership tiers, pricing plans, or mode selection in premium ","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","u":28,"pl":"https://cdn.21st.dev/ravikatiyar162/glass-radio-group/default/preview.1755245476835.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__glow-hero-section","t":"Glow hero section","d":"Give your dead hero section some life with this amazing animated component that shines and make people notice","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/glow-hero-section/default/preview.1753204155161.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__glowing-card","t":"Glowing card","d":"A sleek, glassmorphic stat display card with a subtle glowing effect that highlights the featured metric. The card uses soft light streaks, rounded corners, and a dark translucent ","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":127,"pl":"https://cdn.21st.dev/ravikatiyar162/glowing-card/default/preview.1755200622157.png","pc":"ravikatiyar162","tg":["stat"]},{"id":"21st:ravikatiyar162__gradient-card","t":"Gradient card","d":"Gradient Card\nThis component is a flexible card with a status badge, title, description, call-to-action link, and a decorative background image. The gradients, colors, and content ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":67,"pl":"https://cdn.21st.dev/ravikatiyar162/gradient-card/default/preview.1758963058518.png","pc":"ravikatiyar162","tg":["badge","card","cta","features"]},{"id":"21st:ravikatiyar162__guest-selector","t":"Guest selector","d":"Guest Selector\nA dynamic and interactive counter for selecting a number of guests, with animated visuals that update with the count.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ravikatiyar162","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ravikatiyar162/guest-selector/default/preview.1758329984595.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero","t":"Hero","d":"Full-screen slider showcasing species with immersive photography and minimal typography. Ideal for conservation websites, awareness campaigns, or storytelling experiences.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/hero/default/preview.1756022759776.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-1","t":"Hero 1","d":"Apple Glow Hero\nGradient-glow typography highlighting innovation and intelligence. Perfect for impactful hero sections where bold visuals meet futuristic branding.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-1/default/preview.1756027155385.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-2","t":"Hero 2","d":"Hero Section – Aurora Background\nA visually immersive hero section with a smooth aurora-style animated background. Enhances first impressions with subtle motion while supporting bo","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ravikatiyar162","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-2/default/preview.1756997669048.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-3","t":"Hero 3","d":"Animated Marquee Hero\nA visually engaging hero section featuring a dynamic text reveal and an infinite, animated marquee of images. Perfect for capturing user attention on a landin","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":408,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-3/default/preview.1758015723244.png","pc":"ravikatiyar162","tg":["cta","gallery","hero","marquee"]},{"id":"21st:ravikatiyar162__hero-4","t":"Hero 4","d":"Hero Section with Animated Text\nThis component provides a full hero section layout. It features a title, an animated subtitle that cycles through a list of phrases with a typewrite","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":54,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-4/default/preview.1758382405856.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-5","t":"Hero 5","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-5/default/preview.1760864964235.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__hero-section","t":"Hero section","d":"Bold first impression block. Combines striking headline text, scenic imagery with creative masking, and a newsletter form to drive engagement. Ideal for adventure brands, landing p","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/hero-section/default/preview.1753279477147.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-section-1","t":"Hero section 1","d":"Hero Section – High-impact intro with dynamic motion. Combines animated visuals, bold typography, and clear CTAs to instantly capture attention. Ideal for landing pages, campaigns,","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-1/default/preview.1753514482988.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-section-2","t":"Hero section 2","d":"Clean, split-screen hero layout with bold headline, adventure call-to-action, and animated floral imagery for an engaging first impression.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":457,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-2/default/preview.1755165689225.png","pc":"ravikatiyar162","tg":["cta","hero"]},{"id":"21st:ravikatiyar162__hero-section-3","t":"Hero section 3","d":"Scroll-Triggered Image Animation Component\nThis React component uses Framer Motion to create a scroll-linked animation effect.  As the user scrolls, an image flies in from off-scre","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-3/default/preview.1755950969967.png","pc":"ravikatiyar162","tg":["hero","scroll-area"]},{"id":"21st:ravikatiyar162__hero-section-4","t":"Hero section 4","d":"Hero Section\nA full-screen, responsive hero section with staggered text and button animations, designed to capture user attention.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ravikatiyar162","st":"indexed","u":39,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-4/default/preview.1758031716034.png","pc":"ravikatiyar162","tg":["cta"]},{"id":"21st:ravikatiyar162__hero-section-5","t":"Hero section 5","d":"Animated Roadmap\nThis component visualizes a series of milestones on a path, with animations that trigger on scroll. It's designed to be highly reusable—you can pass any number of ","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ravikatiyar162","st":"indexed","u":95,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-5/default/preview.1758820655829.png","pc":"ravikatiyar162","tg":["map"]},{"id":"21st:ravikatiyar162__hero-section-6","t":"Hero section 6","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-6/default/preview.1759452576263.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-section-7","t":"Hero section 7","d":"Floating Food Hero\nA visually engaging hero section featuring a central text block surrounded by gently floating images. It's designed to be responsive and theme-aware, making it p","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":98,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-7/default/preview.1759479221396.png","pc":"ravikatiyar162","tg":["hero","image"]},{"id":"21st:ravikatiyar162__hero-section-8","t":"Hero section 8","d":"Form Builder Hero\nA responsive and animated hero section designed to capture user attention with a clean layout, a prominent call-to-action, and subtle animations.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":37,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-8/default/preview.1759488919081.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__hero-section-9","t":"Hero section 9","d":"Hero Section Component\nThis component creates a dynamic and engaging hero section, perfect for landing pages. It features a two-column layout with animated text, actionable buttons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":335,"pl":"https://cdn.21st.dev/ravikatiyar162/hero-section-9/default/preview.1760172786727.png","pc":"ravikatiyar162","tg":["cta","hero","stat"]},{"id":"21st:ravikatiyar162__horizontal-steps","t":"Horizontal steps","d":"Horizontal Steps – Step-by-step progress tracker. Displays stages in a clean, horizontal layout with clear indicators. Perfect for onboarding flows, timelines, or multi-step proces","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/horizontal-steps/default/preview.1753170768731.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__how-it-works","t":"How it works","d":"How It Works Section\nStep-by-step process layout with icons and concise explanations. Guides users from query entry to store contact in a structured flow. Ideal for onboarding, tut","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":215,"pl":"https://cdn.21st.dev/ravikatiyar162/how-it-works/default/preview.1756289542868.png","pc":"ravikatiyar162","tg":["features","onboarding","steps"]},{"id":"21st:ravikatiyar162__how-we-do-it-process-overview","t":"How we do it process overview","d":"How We Do It – Agile-driven process overview. Displays each stage from ideation to launch using bold cards and icons. Each block outlines a key phase (e.g., Brainstorming, QA, Rele","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":78,"pl":"https://cdn.21st.dev/ravikatiyar162/how-we-do-it-process-overview/default/preview.1753531055787.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__icon-set","t":"Icon set","d":"Icon Set Grid\nClean, minimal collection of social and productivity icons arranged in a grid layout. Enhances navigation and quick access to platforms. Ideal for dashboards, portfol","k":"component","s":"21st","c":"media/icon","g":"media","a":"ravikatiyar162","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ravikatiyar162/icon-set/default/preview.1756289108343.png","pc":"ravikatiyar162","tg":["grid","icon","link"]},{"id":"21st:ravikatiyar162__image-comparison-slider-horizontal","t":"Image comparison slider horizontal","d":"Horizontal Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable horizontal handle. Perfect for showcasing edits, retouchin","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":86,"pl":"https://cdn.21st.dev/ravikatiyar162/image-comparison-slider-horizontal/default/preview.1753443933843.png","pc":"ravikatiyar162","tg":["gallery","image","slider"]},{"id":"21st:ravikatiyar162__image-comparison-slider-vertical","t":"Image comparison slider vertical","d":"Vertical Image Comparison Slider – Interactive before/after viewer. Allows users to compare two images with a draggable vertical handle. Perfect for showcasing edits, retouching, o","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ravikatiyar162","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ravikatiyar162/image-comparison-slider-vertical/default/preview.1753442772744.png","pc":"ravikatiyar162","tg":["slider"]},{"id":"21st:ravikatiyar162__image-showcase","t":"Image showcase","d":"Animated Image Showcase\nThis component displays a title, subtitle, and a fanned-out stack of images. On hover, the images gracefully spread out and scale up, creating an engaging u","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ravikatiyar162/image-showcase/default/preview.1758954153007.png","pc":"ravikatiyar162","tg":["gallery","image"]},{"id":"21st:ravikatiyar162__image-slider","t":"Image slider","d":"Image slider for login/signup screens. Rotates lifestyle or product photos alongside the authentication form. Enhances visual appeal and storytelling during user login.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ravikatiyar162","st":"indexed","u":163,"pl":"https://cdn.21st.dev/ravikatiyar162/image-slider/default/preview.1754552350361.png","pc":"ravikatiyar162","tg":["sign-in","slider"]},{"id":"21st:ravikatiyar162__image-testimonial-grid","t":"Image testimonial grid","d":"Pinterest-style testimonial cards featuring user profile images, names, and quotes over scenic backgrounds. Ideal for showcasing customer stories, social proof, or community highli","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","u":144,"pl":"https://cdn.21st.dev/ravikatiyar162/image-testimonial-grid/default/preview.1755176582185.png","pc":"ravikatiyar162","tg":["gallery","testimonials"]},{"id":"21st:ravikatiyar162__info-card","t":"Info card","d":"The information card includes the name, designation, followers, a premium user button, and a message button.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":95,"pl":"https://cdn.21st.dev/ravikatiyar162/info-card/default/preview.1752934947053.png","pc":"ravikatiyar162","tg":["profile"]},{"id":"21st:ravikatiyar162__input","t":"Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/input/default/preview.1759058255735.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__insurance-policy-card","t":"Insurance policy card","d":"Insurance Policy Card\nDescription: A visually polished card to display key insurance policy details for a client. It includes sections for client info, policy data, a QR code, and ","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":7,"pl":"https://cdn.21st.dev/ravikatiyar162/insurance-policy-card/default/preview.1758935248756.png","pc":"ravikatiyar162","tg":["profile"]},{"id":"21st:ravikatiyar162__integration-showcase","t":"Integration showcase","d":"Integration Showcase\nThis component displays a title, subtitle, an illustration, and a responsive grid of integrations. It's designed to be easily populated with your own data.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":67,"pl":"https://cdn.21st.dev/ravikatiyar162/integration-showcase/default/preview.1759480550759.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__integrations-card","t":"Integrations card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/integrations-card/default/preview.1759424552680.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__interactive-hero-backgrounds","t":"Interactive hero backgrounds","d":"Minimal dark hero section with 3D physics-based floating spheres and a centered email signup for dynamic user engagement.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ravikatiyar162/interactive-hero-backgrounds/default/preview.1755167312014.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__interactive-list","t":"Interactive list","d":"Interactive List\nAn interactive list component designed for search interfaces or recent activity logs. It supports animated removal of list items and filter tags, is fully responsi","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ravikatiyar162","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ravikatiyar162/interactive-list/default/preview.1758205658138.png","pc":"ravikatiyar162","tg":["search"]},{"id":"21st:ravikatiyar162__invite-teammates","t":"Invite teammates","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/invite-teammates/default/preview.1759737444147.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__item-card","t":"Item card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/item-card/default/preview.1758823698476.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__job-card","t":"Job card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/job-card/default/preview.1759672911648.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__line-graph-statistics","t":"Line graph statistics","d":"This UI displays mobile vs desktop usage trends over June, with mobile consistently higher. A sidebar lets users toggle data for the last 7 days, 30 days, or 3 months.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ravikatiyar162","st":"indexed","u":69,"pl":"https://cdn.21st.dev/ravikatiyar162/line-graph-statistics/default/preview.1752827956218.png","pc":"ravikatiyar162","tg":["data-visualization","dashboard"]},{"id":"21st:ravikatiyar162__liquid-glass-timer","t":"Liquid glass timer","d":"Experience new age of liquid glass with this amazing clock component","k":"component","s":"21st","c":"inputs/time-picker","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/liquid-glass-timer/default/preview.1752913828251.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__liquid-loader","t":"Liquid loader","d":"Liquid loader for futuristic loading states. Features fluid-like animated blobs in vibrant gradients. Ideal for dark-themed UIs, splash screens, or playful transitions.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":75,"pl":"https://cdn.21st.dev/ravikatiyar162/liquid-loader/default/preview.1753950638665.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader","t":"Loader","d":"Minimalist loading animation featuring 3D cubes with rotating letters, creating a smooth sequential reveal effect that conveys progress in a clean, modern style.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":84,"pl":"https://cdn.21st.dev/ravikatiyar162/loader/default/preview.1755071665086.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-1","t":"Loader 1","d":"Creative pencil loader animation featuring a rotating blue pencil with eraser tip, drawing a circular progress path to indicate loading in an engaging, education-themed style.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-1/default/preview.1755084122277.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-10","t":"Loader 10","d":"A visually engaging loader with a \"gooey\" liquid-like animation effect, perfect for indicating loading states in a stylish way.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"ravikatiyar162","st":"indexed","u":117,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-10/default/preview.1756028689238.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-11","t":"Loader 11","d":"Animated Loader\nA smooth, eye-catching loader with circular motion. Designed to keep users engaged while content loads. Perfect for modern apps, dashboards, and websites where subt","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ravikatiyar162","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-11/default/preview.1756921298413.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-12","t":"Loader 12","d":"Server Stack Loader\nA sleek 3D server stack animation used as a loader. Communicates speed, reliability, and tech-savvy branding while keeping users engaged during wait times.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":55,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-12/default/preview.1757012771202.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-13","t":"Loader 13","d":"Infinity Loader\nA smooth looping animation symbolizing endless flow and continuity. Perfect for keeping users engaged with a modern, minimal loading experience.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-13/default/preview.1757013981586.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-14","t":"Loader 14","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/loader-14/default/preview.1757014582349.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-15","t":"Loader 15","d":"Gradient Ring Loader\nA sleek rotating loader with vibrant pink-to-orange gradients and reflection effect. Perfect for modern, stylish apps and creative digital products.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":74,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-15/default/preview.1757171285975.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-2","t":"Loader 2","d":"Minimalistic loader animation featuring the iconic Squid Game shapes (circle, triangle, square) outlined in bold black with a pulsating red dot. The shapes animate sequentially, cr","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":72,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-2/default/preview.1755347440536.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-3","t":"Loader 3","d":"3D Cube Loader – Geometric Animation\nFuturistic loader with a glowing blue 3D cube rotating above a triangular base, creating a smooth illusion of depth. Perfect for modern apps, S","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":63,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-3/default/preview.1755367230114.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__loader-4","t":"Loader 4","d":"Block Grid Loader – Reflective Animation\nMinimal loader animation using stacked green squares with a smooth gradient reflection effect. Perfect for modern dashboards, portfolio sit","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","u":46,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-4/default/preview.1755402119276.png","pc":"ravikatiyar162","tg":["grid","spinner"]},{"id":"21st:ravikatiyar162__loader-5","t":"Loader 5","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/loader-5/default/preview.1755432292636.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-6","t":"Loader 6","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/loader-6/default/preview.1755439458914.png","pc":"ravikatiyar162","tg":["spinner","upload-download"]},{"id":"21st:ravikatiyar162__loader-7","t":"Loader 7","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/loader-7/default/preview.1755614528106.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-8","t":"Loader 8","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/loader-8/default/preview.1755860211369.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-9","t":"Loader 9","d":"Loader\nMinimal 3D stacked-block animation symbolizing structure and flow. Keeps users engaged with a sleek, modern loading experience.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"ravikatiyar162","st":"indexed","u":44,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-9/default/preview.1755951618485.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__loader-animation","t":"Loader animation","d":"Minimal center-aligned loader with rotating multi-colored spheres inside a rounded black capsule, mimicking Figma’s brand aesthetic. Ideal for design-related product splash screens","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ravikatiyar162/loader-animation/default/preview.1755171840315.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__manage-access-component","t":"Manage access component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/manage-access-component/default/preview.1758910473039.png","pc":"ravikatiyar162","tg":["radio-group","team"],"sc":23},{"id":"21st:ravikatiyar162__marquee-logo-scroller","t":"Marquee logo scroller","d":"Marquee logo scroller for social proof. Horizontally scrolls brand logos with headline and supporting text. Ideal for showcasing trusted partners, clients, or integrations.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"ravikatiyar162","st":"indexed","u":105,"pl":"https://cdn.21st.dev/ravikatiyar162/marquee-logo-scroller/default/preview.1753947441639.png","pc":"ravikatiyar162","tg":["clients","marquee"]},{"id":"21st:ravikatiyar162__masonry-grid","t":"Masonry grid","d":"Masonry Grid\nA responsive, animated, and customizable masonry grid layout component, perfect for displaying items of varying heights in a visually appealing way.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","u":32,"pl":"https://cdn.21st.dev/ravikatiyar162/masonry-grid/default/preview.1758365643114.png","pc":"ravikatiyar162","tg":["gallery","grid"]},{"id":"21st:ravikatiyar162__masonry-grid-with-scroll-animation","t":"Masonry grid with scroll animation","d":"Masonry Grid with Scroll Animation\nThis component arranges items in a responsive masonry layout. As the user scrolls, each item animates into view with a subtle slide-and-rotate ef","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ravikatiyar162","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ravikatiyar162/masonry-grid-with-scroll-animation/default/preview.1758368293975.png","pc":"ravikatiyar162","tg":["gallery","image","scroll-area"]},{"id":"21st:ravikatiyar162__meeting-event-form","t":"Meeting event form","d":"I built this meeting event form to simplify planning—capturing all key details like date, time, location, and attendees for smooth coordination and communication.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/meeting-event-form/default/preview.1753067770745.png","pc":"ravikatiyar162","sc":21},{"id":"21st:ravikatiyar162__mentor-section","t":"Mentor section","d":"Mentor Section\nA responsive and animated component to display a filterable grid of mentors. It features smooth layout animations for filtering and subtle hover effects on each card","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/mentor-section/default/preview.1760170282296.png","pc":"ravikatiyar162","tg":["profile","team"]},{"id":"21st:ravikatiyar162__menu-item-card","t":"Menu item card","d":"Menu Item Card\nThis component displays a food item with its image, price, name, and an interactive \"ADD\" button. It's designed to be highly reusable and customizable through props.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ravikatiyar162","st":"indexed","u":33,"pl":"https://cdn.21st.dev/ravikatiyar162/menu-item-card/default/preview.1758278928941.png","pc":"ravikatiyar162","tg":["image","menu"]},{"id":"21st:ravikatiyar162__minimalist-hero","t":"Minimalist hero","d":"Minimalist Hero Section – \"Less is More\"\nBold visual storytelling. High-contrast monochrome portrait with a vibrant yellow circle creates strong focus. Typography is large, minimal","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":423,"pl":"https://cdn.21st.dev/ravikatiyar162/minimalist-hero/default/preview.1753540592718.png","pc":"ravikatiyar162","tg":["hero","link"]},{"id":"21st:ravikatiyar162__mission-success-dialog","t":"Mission success dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/mission-success-dialog/default/preview.1758805150513.png","pc":"ravikatiyar162","tg":["modal"],"sc":21},{"id":"21st:ravikatiyar162__modern-hero-section","t":"Modern hero section","d":"Modern hero section featuring bold headline typography, AI-focused subtext, and a collage of rounded-corner images arranged in an overlapping, floating layout to create depth and v","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ravikatiyar162","st":"indexed","u":97,"pl":"https://cdn.21st.dev/ravikatiyar162/modern-hero-section/default/preview.1754956383897.png","pc":"ravikatiyar162","tg":["ai-chat","gallery"]},{"id":"21st:ravikatiyar162__mouse-following-line","t":"Mouse following line","d":"Mouse-Following Line Field Animation\nA dynamic grid of lines that react and rotate smoothly toward cursor movement, creating an engaging motion effect. Perfect for interactive back","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ravikatiyar162","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ravikatiyar162/mouse-following-line/default/preview.1785365136445-f13fb4ae-ac39-4f85-a013-4232038c0b82.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__multi-step-form","t":"Multi step form","d":"Multi-Step Form\nA responsive and animated container for multi-step forms, providing progress tracking, navigation, and a clean layout. It uses framer-motion for smooth step transit","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":157,"pl":"https://cdn.21st.dev/ravikatiyar162/multi-step-form/default/preview.1759059265420.png","pc":"ravikatiyar162","tg":["progress","steps"]},{"id":"21st:ravikatiyar162__music-player","t":"Music player","k":"component","s":"21st","c":"media/player","g":"media","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/music-player/default/preview.1756287229047.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__music-player-card","t":"Music player card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/music-player-card/default/preview.1758894107820.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__navigation-bar-menu-bar","t":"Navigation bar menu bar","d":"Navigation Bar – Seamless access component. Offers quick navigation to key pages using clean links and icons. Ideal for websites and apps needing intuitive, structured flow.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/navigation-bar-menu-bar/default/preview.1753173884339.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__navigation-bar-menu-bar-with-card","t":"Navigation bar menu bar with card","d":"I created this smart UI component to make navigation seamless, with quick access to key pages and features through clean links and icons.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/navigation-bar-menu-bar-with-card/default/preview.1753037089606.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__navigation-bar-menu-bar-with-profile-and-search","t":"Navigation bar menu bar with profile and search","d":"I created this smart UI component to make navigation seamless, with quick access to key pages and features through clean links and icons.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/navigation-bar-menu-bar-with-profile-and-search/default/preview.1753042203666.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__newsletter-dialog","t":"Newsletter dialog","d":"Newsletter Dialog\nA promotional dialog component designed to capture user sign-ups for a newsletter. It features a prominent image, customizable text sections, an email input field","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ravikatiyar162/newsletter-dialog/default/preview.1759425320899.png","pc":"ravikatiyar162","tg":["cta","image","modal"]},{"id":"21st:ravikatiyar162__occasions-card","t":"Occasions card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/occasions-card/default/preview.1760680031496.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__offer-carousel","t":"Offer carousel","d":"Offer Carousel\nThis component provides a sleek, horizontally scrollable display for showcasing offers or featured items. It includes custom navigation arrows and smooth-scrolling f","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":133,"pl":"https://cdn.21st.dev/ravikatiyar162/offer-carousel/default/preview.1759491183362.png","pc":"ravikatiyar162","tg":["carousel"]},{"id":"21st:ravikatiyar162__onboarding","t":"Onboarding","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/onboarding/default/preview.1759301421272.png","pc":"ravikatiyar162","tg":["onboarding","profile","upload-download"]},{"id":"21st:ravikatiyar162__onboarding-1","t":"Onboarding 1","d":"Onboarding Questionnaire component. It manages the layout, animation, and internal state of the sliders, reporting the final values via callbacks.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/onboarding-1/default/preview.1761063346913.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__onboarding-card","t":"Onboarding card","d":"Product Onboarding Card\nThis component provides a structured layout for a feature or step in a process, guiding the user with a clear title, description, and call-to-action.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ravikatiyar162/onboarding-card/default/preview.1758823037120.png","pc":"ravikatiyar162","tg":["onboarding"]},{"id":"21st:ravikatiyar162__onboarding-checklist","t":"Onboarding checklist","d":"Onboarding Checklist\nDescription: A visually engaging card component that displays a checklist of required items alongside a video guide. It's designed to prepare users for an onbo","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ravikatiyar162/onboarding-checklist/default/preview.1759516044686.png","pc":"ravikatiyar162","tg":["onboarding","video"]},{"id":"21st:ravikatiyar162__onboarding-form","t":"Onboarding form","d":"Onboarding Form\nA visually engaging, animated onboarding form with a glassmorphism effect. It includes fields for avatar upload and display name, designed for reusability in any si","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":95,"pl":"https://cdn.21st.dev/ravikatiyar162/onboarding-form/default/preview.1760504439549.png","pc":"ravikatiyar162","tg":["onboarding","profile","sign-up","upload-download"]},{"id":"21st:ravikatiyar162__onboarding-welcome-screen","t":"Onboarding welcome screen","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/onboarding-welcome-screen/default/preview.1758008546210.png","pc":"ravikatiyar162","tg":["onboarding"]},{"id":"21st:ravikatiyar162__orbiting-avatars","t":"Orbiting avatars","d":"Orbiting Avatars CTA\nDescription: A visually engaging Call-to-Action (CTA) component that displays a central message, a button, and a configurable set of avatars that gently float ","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":36,"pl":"https://cdn.21st.dev/ravikatiyar162/orbiting-avatars/default/preview.1758351752339.png","pc":"ravikatiyar162","tg":["cta","team"]},{"id":"21st:ravikatiyar162__order-status-card","t":"Order status card","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/order-status-card/default/preview.1759999189492.png","pc":"ravikatiyar162","tg":["timeline"]},{"id":"21st:ravikatiyar162__order-status-tracker","t":"Order status tracker","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/order-status-tracker/default/preview.1758935641971.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__parallax-card","t":"Parallax card","d":"Parallax Tilt Card\nA visually engaging card that uses framer-motion to create a 3D parallax tilt effect based on the user's mouse position. Inner elements move at different rates t","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ravikatiyar162/parallax-card/default/preview.1758200405779.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__password-reset-form","t":"Password reset form","d":"Password Reset Form is a production-ready password reset component with intelligent validation and premium animations. It features real-time requirement checking with smooth stagge","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/password-reset-form/default/preview.1762057363384.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__payment","t":"Payment","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/payment/default/preview.1757844488547.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__payment-1","t":"Payment 1","d":"Payment Selection\nA sleek, user-friendly payment card selector with multiple options. Perfect for checkout flows to simplify and speed up transactions.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ravikatiyar162/payment-1/default/preview.1757849135215.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__photo-stack","t":"Photo stack","d":"Animated Photo Stack\nA playful, layered card component that displays team or profile photos in a stacked, draggable style with smooth animations. Perfect for showcasing creative te","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ravikatiyar162/photo-stack/default/preview.1756286227280.png","pc":"ravikatiyar162","tg":["gallery","image","team"]},{"id":"21st:ravikatiyar162__planner-card","t":"Planner card","d":"Route Planner Card\nA visually polished card component that displays route information, including duration, distance, an animated elevation graph, and a call-to-action. It's designe","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ravikatiyar162","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ravikatiyar162/planner-card/default/preview.1759251659290.png","pc":"ravikatiyar162","tg":["alert"]},{"id":"21st:ravikatiyar162__presence-card","t":"Presence card","d":"Animated Presence Card\nDescription: A visually striking card component designed to showcase a primary message or product. It features a prominent image, clear typography, and an in","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ravikatiyar162/presence-card/default/preview.1758609041396.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing","t":"Pricing","d":"A responsive, theme-adaptive pricing section with an interactive starfield background and a toggle for monthly/annual plans.\nAnimated pricing cards with Framer Motion\nInteractive m","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","u":195,"pl":"https://cdn.21st.dev/ravikatiyar162/pricing/default/preview.1755097748304.png","pc":"ravikatiyar162","tg":["pricing-section"]},{"id":"21st:ravikatiyar162__pricing-card","t":"Pricing card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-card/default/preview.1758483103153.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing-card-1","t":"Pricing card 1","d":"Pricing Card\nThis component is a flexible pricing card designed to display plan details, features, and a call-to-action. It uses framer-motion for subtle hover animations and is bu","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","u":57,"pl":"https://cdn.21st.dev/ravikatiyar162/pricing-card-1/default/preview.1758562162180.png","pc":"ravikatiyar162","tg":["pricing-section"]},{"id":"21st:ravikatiyar162__pricing-card-2","t":"Pricing card 2","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-card-2/default/preview.1759584657540.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing-card-3","t":"Pricing card 3","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-card-3/default/preview.1759905967615.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing-section","t":"Pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-section/default/preview.1759644327214.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing-sections","t":"Pricing sections","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-sections/default/preview.1759514206479.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__pricing-table","t":"Pricing table","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/pricing-table/default/preview.1759567528265.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__product-card","t":"Product card","d":"Product Highlight Card\nThis card uses a combination of CSS gradients and framer-motion to create a visually engaging experience. On hover, the card tilts, a subtle glow follows the","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":49,"pl":"https://cdn.21st.dev/ravikatiyar162/product-card/default/preview.1758304514329.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__product-card-1","t":"Product card 1","d":"Product Card\nThis reusable card component displays product information, including an image, title, ratings, specifications, and pricing details in a responsive layout.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ravikatiyar162","st":"indexed","u":13,"pl":"https://cdn.21st.dev/ravikatiyar162/product-card-1/default/preview.1758803559565.png","pc":"ravikatiyar162","tg":["pricing-section"]},{"id":"21st:ravikatiyar162__product-card-2","t":"Product card 2","d":"Product Card\nA visually polished ProductCard component designed to showcase products in a grid layout. It features a clean design, accepts various product details via props for max","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ravikatiyar162","st":"indexed","u":48,"pl":"https://cdn.21st.dev/ravikatiyar162/product-card-2/default/preview.1759073049075.png","pc":"ravikatiyar162","tg":["grid","slider"]},{"id":"21st:ravikatiyar162__product-card-3","t":"Product card 3","d":"Product Drop Card\nA sleek, carousel-style card component to showcase upcoming product drops or featured items. It includes navigation controls and a clean layout, perfect for highl","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":44,"pl":"https://cdn.21st.dev/ravikatiyar162/product-card-3/default/preview.1760096869077.png","pc":"ravikatiyar162","tg":["carousel","image"]},{"id":"21st:ravikatiyar162__product-carousel","t":"Product carousel","d":"Product Carousel\nThis component displays a horizontally scrollable list of products with a title and navigation controls. It's built to be highly reusable, accepting all content an","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ravikatiyar162/product-carousel/default/preview.1759113075764.png","pc":"ravikatiyar162","tg":["carousel","scroll-area"]},{"id":"21st:ravikatiyar162__product-definition-card","t":"Product definition card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/product-definition-card/default/preview.1759379871344.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__profile-card","t":"Profile card","d":"I designed this Profile Card to give a quick snapshot of the user—complete with an image and bio—all in one clean, compact component.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/profile-card/default/preview.1753147434756.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__profile-card-1","t":"Profile card 1","d":"Clean identity showcase. Features a rounded, shadowed layout to highlight user details in a minimal, floating style. Ideal for portfolios, team sections, or contact cards on modern","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":60,"pl":"https://cdn.21st.dev/ravikatiyar162/profile-card-1/default/preview.1753187505877.png","pc":"ravikatiyar162","tg":["link","profile","tooltip"]},{"id":"21st:ravikatiyar162__profile-selector","t":"Profile selector","d":"Profile Selector Component\nThis component, named ProfileSelector, displays a grid of user profiles for selection. It's built to be data-driven, accepting an array of profiles and h","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":49,"pl":"https://cdn.21st.dev/ravikatiyar162/profile-selector/default/preview.1760420860128.png","pc":"ravikatiyar162","tg":["profile"]},{"id":"21st:ravikatiyar162__project-card","t":"Project card","d":"A visually appealing card component designed to showcase projects. It features a hover-to-zoom image effect, a clear content section, and a call-to-action link, all while adapting ","k":"component","s":"21st","c":"actions/link","g":"actions","a":"ravikatiyar162","st":"indexed","u":125,"pl":"https://cdn.21st.dev/ravikatiyar162/project-card/default/preview.1756028031594.png","pc":"ravikatiyar162","tg":["image","link"]},{"id":"21st:ravikatiyar162__project-data-table","t":"Project data table","d":"Project Data Table\nThis component provides a responsive, animated table for displaying a list of projects. It features a clean, modern design inspired by your image, with status ba","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ravikatiyar162","st":"indexed","u":201,"pl":"https://cdn.21st.dev/ravikatiyar162/project-data-table/default/preview.1759681409078.png","pc":"ravikatiyar162","tg":["avatar","dashboard","table"]},{"id":"21st:ravikatiyar162__project-ticket-card","t":"Project ticket card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/project-ticket-card/default/preview.1759731713458.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__promo-card","t":"Promo card","d":"Animated Promo Card\nA visually engaging card that applies a 3D tilt effect on hover. It's designed to showcase promotional content with a background image, title, subtitle, and a c","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ravikatiyar162/promo-card/default/preview.1758606930486.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__rain-and-lightening-hero-section","t":"Rain and lightening hero section","d":"Dramatic hero section with bold centered headline and subtle subtext over a dark, animated rain and lightening background, creating an immersive stormy atmosphere.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","u":13,"pl":"https://cdn.21st.dev/ravikatiyar162/rain-and-lightening-hero-section/default/preview.1754996446227.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__range-slider","t":"Range slider","d":"Range Slider\nA responsive and accessible price range slider with a histogram visualization. It allows users to select a numeric range with interactive handles and provides clear vi","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ravikatiyar162","st":"indexed","u":66,"pl":"https://cdn.21st.dev/ravikatiyar162/range-slider/default/preview.1758009032159.png","pc":"ravikatiyar162","tg":["data-visualization","slider"]},{"id":"21st:ravikatiyar162__recipe-card","t":"Recipe card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/recipe-card/default/preview.1759494175779.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__recipe-card-1","t":"Recipe card 1","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/recipe-card-1/default/preview.1759652820968.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__recipe-card-2","t":"Recipe card 2","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/recipe-card-2/default/preview.1760614324940.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__redeem","t":"Redeem","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/redeem/default/preview.1758206243230.png","pc":"ravikatiyar162","tg":["modal"]},{"id":"21st:ravikatiyar162__registration-stepper","t":"Registration stepper","d":"Registration Stepper\nA responsive and animated stepper component designed to guide users through a multi-step process. It visualizes the current, completed, and pending steps using","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","u":97,"pl":"https://cdn.21st.dev/ravikatiyar162/registration-stepper/default/preview.1760427047033.png","pc":"ravikatiyar162","tg":["accordion","steps"]},{"id":"21st:ravikatiyar162__resource-grid","t":"Resource grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/resource-grid/default/preview.1759451798280.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__reward-card","t":"Reward card","d":"Gift unlock screen with themed card, confetti background, and central gift icon. Includes bold greeting, short wish, and a green “Spotify Premium 1 Year” easy to ues, slider button","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":26,"pl":"https://cdn.21st.dev/ravikatiyar162/reward-card/default/preview.1755158136318.png","pc":"ravikatiyar162","tg":["slider"]},{"id":"21st:ravikatiyar162__reward-partners-section","t":"Reward partners section","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/reward-partners-section/default/preview.1759492453244.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__ride-booking-form","t":"Ride booking form","d":"Ride Booking Form\nThis component provides a complete UI for scheduling a ride, including location inputs, date/time selectors, and a call-to-action button. It's designed to be easi","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ravikatiyar162","st":"indexed","u":73,"pl":"https://cdn.21st.dev/ravikatiyar162/ride-booking-form/default/preview.1759560475477.png","pc":"ravikatiyar162","tg":["date-picker","form"]},{"id":"21st:ravikatiyar162__ride-options-grid","t":"Ride options grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/ride-options-grid/default/preview.1759646192506.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__ripple-pulse-loader","t":"Ripple pulse loader","d":"A minimalistic ripple-based loader with concentric circles expanding outward in a smooth pulse effect. The dark, layered gradients create depth while maintaining a sleek, modern ae","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","u":69,"pl":"https://cdn.21st.dev/ravikatiyar162/ripple-pulse-loader/default/preview.1755241658679.png","pc":"ravikatiyar162","tg":["spinner"]},{"id":"21st:ravikatiyar162__rotary-radio-switch","t":"Rotary radio switch","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/rotary-radio-switch/default/preview.1755244920596.png","pc":"ravikatiyar162","tg":["radio-group"]},{"id":"21st:ravikatiyar162__rotating-nav-bar","t":"Rotating nav bar","d":"I created this rotating nav bar with smooth hover animations to add an eye-catching, interactive touch that instantly elevates your website’s visual appeal.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/rotating-nav-bar/default/preview.1753105027522.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__score-card","t":"Score card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/score-card/default/preview.1759777384413.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__search-navigation-bar","t":"Search navigation bar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/search-navigation-bar/default/preview.1760770014492.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__service-card","t":"Service card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/service-card/default/preview.1759084567372.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__service-grid","t":"Service grid","d":"ServiceGrid\nA responsive grid component designed to showcase a list of services or features. Each item in the grid consists of an image and a title. The component features a stagge","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ravikatiyar162/service-grid/default/preview.1758849231647.png","pc":"ravikatiyar162","tg":["features"]},{"id":"21st:ravikatiyar162__service-suggestion-grid","t":"Service suggestion grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/service-suggestion-grid/default/preview.1759564082838.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__services","t":"Services","d":"I crafted this services section to clearly showcase what the business offers, making it easy for visitors to understand our value at a glance.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ravikatiyar162","st":"indexed","u":73,"pl":"https://cdn.21st.dev/ravikatiyar162/services/default/preview.1753035767112.png","pc":"ravikatiyar162","tg":["features","grid"]},{"id":"21st:ravikatiyar162__services-card","t":"Services card","d":"Services Card – Showcase offerings. Modern UI component to present branding, development, or SEO services with clear visuals and descriptions. Ideal for portfolios and business web","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":139,"pl":"https://cdn.21st.dev/ravikatiyar162/services-card/default/preview.1758279268638.png","pc":"ravikatiyar162","tg":["card","carousel","features"]},{"id":"21st:ravikatiyar162__share-card","t":"Share card","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/share-card/default/preview.1759048848739.png","pc":"ravikatiyar162","tg":["team"]},{"id":"21st:ravikatiyar162__shared-files","t":"Shared files","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/shared-files/default/preview.1757853422150.png","pc":"ravikatiyar162","tg":["list"]},{"id":"21st:ravikatiyar162__sign-in","t":"Sign in","d":"Eye catching login experience. Adds motion and shine to your Sign-In UI, drawing user attention instantly. Perfect for modern apps and websites aiming for a lively first impression","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ravikatiyar162","st":"rated","u":115,"pl":"https://cdn.21st.dev/ravikatiyar162/sign-in/default/preview.1753208750005.png","pc":"ravikatiyar162","tg":["sign-in"],"sc":18},{"id":"21st:ravikatiyar162__sign-in-1","t":"Sign in 1","d":"Hero section with social login prompt. Welcomes returning users and offers multiple sign-in options. Ideal for modern apps aiming for seamless authentication with Google, Email, or","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ravikatiyar162","st":"indexed","u":132,"pl":"https://cdn.21st.dev/ravikatiyar162/sign-in-1/default/preview.1753863699748.png","pc":"ravikatiyar162","tg":["sign-in"]},{"id":"21st:ravikatiyar162__sky-toggle","t":"Sky toggle","d":"Playful toggle switch with a bright yellow sun over blue skies and fluffy clouds. Ideal for weather apps or light/dark mode themes.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ravikatiyar162","st":"indexed","u":322,"pl":"https://cdn.21st.dev/ravikatiyar162/sky-toggle/default/preview.1755161021632.png","pc":"ravikatiyar162","tg":["toggle"]},{"id":"21st:ravikatiyar162__sleep-tracker-card","t":"Sleep tracker card","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/sleep-tracker-card/default/preview.1759196043705.png","pc":"ravikatiyar162","tg":["data-visualization"],"sc":18},{"id":"21st:ravikatiyar162__social-media","t":"Social media","d":"Interactive social media icon row with a smooth hover effect that highlights the active icon, changes its background color, and reveals a matching label below. Ideal for minimalist","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ravikatiyar162","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ravikatiyar162/social-media/default/preview.1755276537281.png","pc":"ravikatiyar162","tg":["link","tooltip"]},{"id":"21st:ravikatiyar162__solar-pulse-loader","t":"Solar pulse loader","d":"Sleek circular loader with a radiant yellow-orange glow, creating a smooth pulsing effect. Perfect for modern apps seeking a bold, high-contrast loading indicator.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/solar-pulse-loader/default/preview.1755160031870.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__sparks-carousel","t":"Sparks carousel","d":"Sparks Carousel\nA responsive carousel component designed to display a collection of curated cards. It features smooth scrolling animations powered by Framer Motion and is fully the","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ravikatiyar162","st":"indexed","u":44,"pl":"https://cdn.21st.dev/ravikatiyar162/sparks-carousel/default/preview.1759422208260.png","pc":"ravikatiyar162","tg":["carousel"]},{"id":"21st:ravikatiyar162__star-wars-toggle-switch","t":"Star wars toggle switch","d":"BB-8 Themed Star Wars Toggle Switch\nPlayful Star Wars-inspired toggle switch featuring BB-8 rolling across a scenic desert with twin suns. Smooth sliding animation mimics BB-8's mo","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ravikatiyar162","st":"indexed","u":70,"pl":"https://cdn.21st.dev/ravikatiyar162/star-wars-toggle-switch/default/preview.1755270437022.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__starship-card-component","t":"Starship card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/starship-card-component/default/preview.1759381157349.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__state","t":"State","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/state/default/preview.1759645275758.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__statistics-graph","t":"Statistics graph","d":"A statistical graph is a visual representation of data, making it easier to understand trends and relationships.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/statistics-graph/default/preview.1753004837727.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__stats-card","t":"Stats card","d":"Freelancer Stats Card\nA comprehensive card component for displaying key statistics, rankings, and availability. It features a clean layout, theme-adaptive styling, and a subtle ani","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":64,"pl":"https://cdn.21st.dev/ravikatiyar162/stats-card/default/preview.1758440507102.png","pc":"ravikatiyar162","tg":["card","dashboard","profile"]},{"id":"21st:ravikatiyar162__stats-card-1","t":"Stats card 1","d":"Stats Card\nThis component is designed to display a single, key statistic. It includes a title, a primary value, an icon, and a percentage change indicator that is color-coded for p","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/stats-card-1/default/preview.1759173339031.png","pc":"ravikatiyar162","tg":["card","dashboard"]},{"id":"21st:ravikatiyar162__stats-card-2","t":"Stats card 2","d":"Crypto Stats Card\nThis component provides a comprehensive overview of the crypto market, including market cap, dominance distribution, and individual coin prices, all within a sing","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ravikatiyar162","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ravikatiyar162/stats-card-2/default/preview.1759417952973.png","pc":"ravikatiyar162","tg":["data-visualization","dashboard","progress"]},{"id":"21st:ravikatiyar162__stats-card-3","t":"Stats card 3","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/stats-card-3/default/preview.1759470838901.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__stats-widget","t":"Stats widget","d":"The UI has a card-style widget showing a financial amount, percentage change, and an arrow. An animated line graph indicates the trend, turning green for positive and orange for ne","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/stats-widget/default/preview.1752921238670.png","pc":"ravikatiyar162","tg":["card"]},{"id":"21st:ravikatiyar162__status-screen","t":"Status screen","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/status-screen/default/preview.1760871457090.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__stock-card","t":"Stock card","d":"Stock Card\nThis component, StockCard, displays stock information with a smooth hover animation. It's designed to be highly reusable, accepting props for the logo, ticker, name, pri","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"rated","u":29,"pl":"https://cdn.21st.dev/ravikatiyar162/stock-card/default/preview.1758763332654.png","pc":"ravikatiyar162","sc":18},{"id":"21st:ravikatiyar162__stock-category-list","t":"Stock category list","d":"StockCategoryList\nA responsive and accessible accordion component to display categorized lists of items. Each category features a title and an icon, and clicking it reveals a detai","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/stock-category-list/default/preview.1758763066535.png","pc":"ravikatiyar162","tg":["accordion"]},{"id":"21st:ravikatiyar162__subscription-screen","t":"Subscription screen","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/subscription-screen/default/preview.1759282704509.png","pc":"ravikatiyar162","tg":["features","pricing-section","radio-group"]},{"id":"21st:ravikatiyar162__support","t":"Support","k":"component","s":"21st","c":"other","g":"other","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/support/default/preview.1759490303452.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__sustainability-section","t":"Sustainability section","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/sustainability-section/default/preview.1759496328722.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__swap-card","t":"Swap card","d":"swap-card\nThis file contains the reusable SwapCard component. It uses framer-motion for the layout animations, lucide-react for icons, and is styled with shadcn/ui principles.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ravikatiyar162","st":"indexed","u":37,"pl":"https://cdn.21st.dev/ravikatiyar162/swap-card/default/preview.1758303223628.png","pc":"ravikatiyar162","tg":["tabs"]},{"id":"21st:ravikatiyar162__switch","t":"Switch","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/switch/default/preview.1756628236165.png","pc":"ravikatiyar162","tg":["toggle"]},{"id":"21st:ravikatiyar162__task-list","t":"Task list","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/task-list/default/preview.1758995103826.png","pc":"ravikatiyar162","tg":["table"],"sc":17},{"id":"21st:ravikatiyar162__team-section","t":"Team section","d":"Animated Team Section\nThis component displays a title, a description, and a list of team members in a visually appealing animated arc layout. It's designed to be highly reusable th","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":38,"pl":"https://cdn.21st.dev/ravikatiyar162/team-section/default/preview.1758018648506.png","pc":"ravikatiyar162","tg":["team"]},{"id":"21st:ravikatiyar162__team-section-1","t":"Team section 1","d":"TeamSection\nA responsive team showcase section with member profiles, designations, social media links, and an animated hover effect for individual member cards.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":90,"pl":"https://cdn.21st.dev/ravikatiyar162/team-section-1/default/preview.1760255875887.png","pc":"ravikatiyar162","tg":["avatar","link","profile","team"]},{"id":"21st:ravikatiyar162__team-section-2","t":"Team section 2","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/team-section-2/default/preview.1760271587811.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__team-showcase","t":"Team showcase","d":"Team Showcase\nA responsive and animated component to showcase team members or featured profiles in a visually engaging, overlapping card layout. It features staggered entrance anim","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ravikatiyar162","st":"indexed","u":41,"pl":"https://cdn.21st.dev/ravikatiyar162/team-showcase/default/preview.1760254552979.png","pc":"ravikatiyar162","tg":["cta","profile","team"]},{"id":"21st:ravikatiyar162__testimonial","t":"Testimonial","d":"An animated testimonials slider, pairing a person's image on the left with their quote, name, and title on the right. Users can navigate through entries with arrow controls, and th","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","u":122,"pl":"https://cdn.21st.dev/ravikatiyar162/testimonial/default/preview.1752920350656.png","pc":"ravikatiyar162","tg":["carousel","testimonials"]},{"id":"21st:ravikatiyar162__testimonial-1","t":"Testimonial 1","d":"I designed this animated testimonials slider with a clean image-quote layout, smooth transitions, and a auto next testimonial feature that adapts to light and dark modes.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/testimonial-1/default/preview.1753098368437.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__testimonial-2","t":"Testimonial 2","d":"Animated Testimonial Grid\nThis component displays a visually engaging testimonial section with a dynamic, floating grid of images in the background. It is designed to be highly reu","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","u":69,"pl":"https://cdn.21st.dev/ravikatiyar162/testimonial-2/default/preview.1758958865476.png","pc":"ravikatiyar162","tg":["testimonials"]},{"id":"21st:ravikatiyar162__testimonial-card","t":"Testimonial card","d":"Testimonial Card Section – Social proof showcase. Displays client reviews, star ratings, and impact stats in a clean grid layout with strong visual hierarchy. Perfect for building ","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":73,"pl":"https://cdn.21st.dev/ravikatiyar162/testimonial-card/default/preview.1753513923404.png","pc":"ravikatiyar162","tg":["avatar","stat","testimonials"]},{"id":"21st:ravikatiyar162__testimonial-card-1","t":"Testimonial card 1","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/testimonial-card-1/default/preview.1758979887328.png","pc":"ravikatiyar162","tg":["carousel","features","testimonials"]},{"id":"21st:ravikatiyar162__testimonial-card-2","t":"Testimonial card 2","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/testimonial-card-2/default/preview.1760259050764.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__testimonials","t":"Testimonials","d":"Testimonials Section\nA responsive and animated component to showcase customer testimonials in a clean, grid-based layout.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ravikatiyar162","st":"indexed","u":132,"pl":"https://cdn.21st.dev/ravikatiyar162/testimonials/default/preview.1760425136264.png","pc":"ravikatiyar162","tg":["grid","testimonials"]},{"id":"21st:ravikatiyar162__text-arc-effect","t":"Text arc effect","d":"Text curving tool for creative typography. Bends text along circular or custom arc paths. Ideal for creating logos, badges, or decorative text elements with some customizable anima","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ravikatiyar162","st":"indexed","u":49,"pl":"https://cdn.21st.dev/ravikatiyar162/text-arc-effect/default/preview.1753150478449.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__text-rotator","t":"Text rotator","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/text-rotator/default/preview.1760760196519.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__ticket-confirmation-card","t":"Ticket confirmation card","d":"Ticket Confirmation Card\nDigital receipt-style confirmation with success status, ticket ID, payment details, and barcode. Designed for event booking, travel tickets, or payment con","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":111,"pl":"https://cdn.21st.dev/ravikatiyar162/ticket-confirmation-card/default/preview.1756477522559.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__timesheet-confirmation","t":"Timesheet confirmation","d":"This file contains the reusable Timesheet Confirmation component. It's designed to be highly customizable through props, uses shadcn/ui theme variables for styling, and includes an","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"rated","pl":"https://cdn.21st.dev/ravikatiyar162/timesheet-confirmation/default/preview.1760110732984.png","pc":"ravikatiyar162","tg":["dashboard","modal","table"],"sc":23},{"id":"21st:ravikatiyar162__toggle-switch","t":"Toggle switch","d":"Toggle Switch\nSleek, animated switch for toggling preferences or modes. Smooth transitions make it ideal for dark/light mode, settings, or feature activation.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ravikatiyar162","st":"indexed","u":40,"pl":"https://cdn.21st.dev/ravikatiyar162/toggle-switch/default/preview.1756920269852.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__tracker-card","t":"Tracker card","d":"Package Tracker Card\nThis component provides a visually appealing card to display package tracking information. It's designed to be highly reusable, accepting props for status, pac","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ravikatiyar162/tracker-card/default/preview.1758452619431.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__trail-card","t":"Trail card","d":"Trail Card\nA visually polished card component to display trail or location information, featuring a prominent image, key stats, and an interactive call-to-action. It includes a sub","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","u":121,"pl":"https://cdn.21st.dev/ravikatiyar162/trail-card/default/preview.1758825195589.png","pc":"ravikatiyar162","tg":["stat"]},{"id":"21st:ravikatiyar162__trend-card","t":"Trend card","d":"Interactive Trend Card\nA visually polished card component for displaying time-series data with an interactive bar chart. It's built to be responsive and theme-adaptive, using shadc","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","u":25,"pl":"https://cdn.21st.dev/ravikatiyar162/trend-card/default/preview.1758293774742.png","pc":"ravikatiyar162","tg":["dashboard"]},{"id":"21st:ravikatiyar162__truck-loader","t":"Truck loader","d":"Minimal flat-style loader truck illustration with a red cabin, grey cargo box, and street lamp. Clean vector design on a white background for modern web or UI use.","k":"component","s":"21st","c":"status/loader","g":"status","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/truck-loader/default/preview.1755179250898.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__user-profile-dropdown","t":"User profile dropdown","d":"UserProfileDropdown Component\nThis component displays a user's avatar and details, along with a dropdown menu containing customizable actions.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ravikatiyar162","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ravikatiyar162/user-profile-dropdown/default/preview.1758910187086.png","pc":"ravikatiyar162","tg":["dropdown","menu","profile"]},{"id":"21st:ravikatiyar162__video-generator-card","t":"Video generator card","d":"This file contains the reusable VideoGeneratorCard component. It's built with shadcn/ui primitives and is fully typed with TypeScript. Props like storyboardImages, initialPrompt, o","k":"component","s":"21st","c":"media/player","g":"media","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/video-generator-card/default/preview.1760169524290.png","pc":"ravikatiyar162","tg":["ai-chat","video"]},{"id":"21st:ravikatiyar162__video-hero-section","t":"Video hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/video-hero-section/default/preview.1759649312262.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__video-in-text-effect","t":"Video in text effect","d":"This is a “video masking in text” technique where a video is clipped within the shape of the text. The background remains plain (typically white or black), while the text displays ","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/video-in-text-effect/default/preview.1754565601156.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__video-thumbnail-player","t":"Video thumbnail player","d":"Clean and immersive. Full-width thumbnail with centered play button and bottom-left overlay text. Communicates professionalism and storytelling. Perfect for product intros, company","k":"component","s":"21st","c":"media/player","g":"media","a":"ravikatiyar162","st":"indexed","u":194,"pl":"https://cdn.21st.dev/ravikatiyar162/video-thumbnail-player/default/preview.1753605545535.png","pc":"ravikatiyar162","tg":["video"]},{"id":"21st:ravikatiyar162__weather-card","t":"Weather card","d":"A modern, gradient-based weather information card displaying the current temperature, high/low forecast, location, and weather condition icon. The design features bold typography, ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/weather-card/default/preview.1755182128213.png","pc":"ravikatiyar162"},{"id":"21st:ravikatiyar162__welcome","t":"Welcome","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/welcome/default/preview.1759302907317.png","pc":"ravikatiyar162","tg":["onboarding","video"]},{"id":"21st:ravikatiyar162__welcome-modal","t":"Welcome modal","d":"Welcome modal for new and existing users. Highlights expanded access to premium templates and $299 value lifetime license. Includes clear CTAs like \"View templates\" and \"Get login ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ravikatiyar162","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ravikatiyar162/welcome-modal/default/preview.1754223888024.png","pc":"ravikatiyar162","tg":["announcement","checkbox","modal","onboarding"]},{"id":"21st:ravikatiyar162__workflow-builder-card","t":"Workflow builder card","d":"Workflow Builder Card\nA responsive and theme-adaptive card component designed to showcase AI workflows. It features a subtle hover animation that elegantly reveals additional detai","k":"component","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar162","st":"indexed","u":85,"pl":"https://cdn.21st.dev/ravikatiyar162/workflow-builder-card/default/preview.1760509934630.png","pc":"ravikatiyar162","tg":["card"]},{"id":"21st:ravikatiyar162__workout-card","t":"Workout card","d":"Workout Card\nDescription: A container component to display a \"Workout of the Day\" session, complete with a title, duration, and an animated list of exercises.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"ravikatiyar162","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ravikatiyar162/workout-card/default/preview.1758957879413.png","pc":"ravikatiyar162","tg":["list"]},{"id":"21st:ravikatiyar162__workout-summary-card","t":"Workout summary card","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ravikatiyar162","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/workout-summary-card/default/preview.1759043779580.png","pc":"ravikatiyar162","tg":["stat"]},{"id":"21st:ravikatiyar__folder","t":"Folder","d":"An interactive folder animation that responds to hover, making file browsing visually engaging. Perfect for dashboards, file managers, and modern UI systems.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ravikatiyar","st":"indexed","pl":"https://cdn.21st.dev/ravikatiyar162/folder/default/preview.1755846786428.png","pc":"ravikatiyar"},{"id":"21st:ravirshah0612__how-it-works-card","t":"How it works card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ravirshah0612","st":"indexed","pl":"https://cdn.21st.dev/ravirshah0612/how-it-works-card/default/preview.1769379581331.png","pc":"ravirshah0612"},{"id":"21st:rayimanoj8__whatsapp-sidebar","t":"Whatsapp sidebar","d":"this is a replica of whatsapp desktops's sidebar","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"rayimanoj8","st":"indexed","u":103,"pl":"https://cdn.21st.dev/user_2tGqCCR3512kD1my3QHlP4CK6Lk/whatsapp-sidebar/default/preview.1740496437563.png","pc":"rayimanoj8","tg":["sidebar"]},{"id":"21st:rbzdev__dialog-modal-drawer","t":"Dialog modal drawer","d":"Dialog Modal with Cool animation, can be used as Modal, Dialog or Drawer, support Variants","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"rbzdev","st":"indexed","pl":"https://cdn.21st.dev/rbzdev/dialog-modal-drawer/default/preview.1773409071362.png","pc":"rbzdev"},{"id":"21st:rcrebo__grey-outline-hover-btn","t":"Grey outline hover btn","d":"Hover over button to show right arrow","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"rcrebo","st":"indexed","pl":"https://cdn.21st.dev/rcrebo/grey-outline-hover-btn/default/preview.1765317664951.png","pc":"rcrebo"},{"id":"21st:reach2saksham__aossie-logo","t":"Aossie logo","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reach2saksham","st":"indexed","pl":"https://cdn.21st.dev/reach2saksham/aossie-logo/default/preview.1785190845957-250cafd4-39eb-4a07-b5dc-67e99a58c99e.webp","pc":"reach2saksham"},{"id":"21st:reachwelch__just-playing","t":"Just playing","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#231A10, #A47148, #E3B587, #F9F1E7). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reachwelch","st":"indexed","pl":"https://cdn.21st.dev/reachwelch/just-playing/default/preview.1784267204345-d90c70e7-1b2d-4acf-b5ef-165f3f389de3.webp","pc":"reachwelch"},{"id":"21st:reaviz__area-chart","t":"Area chart","d":"Here is Area chart small sized component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/area-chart/default/preview.1748010413029.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__area-chart-1","t":"Area chart 1","d":"here is area chart small","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","u":25,"pl":"https://cdn.21st.dev/larsen66/area-chart-1/default/preview.1748116161748.png","pc":"reaviz","tg":["card","data-visualization","dashboard"]},{"id":"21st:reaviz__area-chart-2","t":"Area chart 2","d":"Here is area chart multiple series medium size","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"reaviz","st":"indexed","u":30,"pl":"https://cdn.21st.dev/larsen66/area-chart-2/default/preview.1748117547145.png","pc":"reaviz","tg":["dashboard"]},{"id":"21st:reaviz__area-chart-xs","t":"Area chart xs","d":"here is Area Chart Xsmall component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/area-chart-xs/default/preview.1748004195601.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__areachart-multiseries","t":"Areachart multiseries","d":"Here is areachart component of multiseries charts","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/user_reaviz/areachart-multiseries/default/preview.1748456694232.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__bar-chart-medium","t":"Bar chart medium","d":"here is bar chart component medium size","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/bar-chart-medium/default/preview.1748118969164.png","pc":"reaviz","tg":["card","data-visualization","dashboard"]},{"id":"21st:reaviz__funnel-chart","t":"Funnel chart","d":"Here is funnel chart small","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/funnel-chart/default/preview.1748120159093.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__funnel-chart-big","t":"Funnel chart big","d":"Here is funnel chart big sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/funnel-chart-big/default/preview.1748120478045.png","pc":"reaviz","tg":["card","data-visualization","dashboard"]},{"id":"21st:reaviz__funnel-chart-medium","t":"Funnel chart medium","d":"Here is Funnel Chart medium sized","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/funnel-chart-medium/default/preview.1748120281258.png","pc":"reaviz","tg":["data-visualization","stat"]},{"id":"21st:reaviz__heat-map","t":"Heat map","d":"Here is Heat Map small component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/heat-map/default/preview.1748121157746.png","pc":"reaviz","tg":["data-visualization","grid"]},{"id":"21st:reaviz__heat-map-middle","t":"Heat map middle","d":"Here is heat map middle sized","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"reaviz","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/heat-map-middle/default/preview.1748121411741.png","pc":"reaviz","tg":["card","data-visualization","dashboard","stat"]},{"id":"21st:reaviz__heat-map-xl","t":"Heat map xl","d":"Here is heat map xl sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heat-map-xl/default/preview.1748121478472.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__hexagon-map","t":"Hexagon map","d":"Hexagon map large sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hexagon-map/default/preview.1748122146071.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__horizontal-bar-medium","t":"Horizontal bar medium","d":"Here is horizontal bar chart medium size","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/horizontal-bar-medium/default/preview.1748119138146.png","pc":"reaviz","tg":["card","data-visualization"]},{"id":"21st:reaviz__incident-bar-chart","t":"Incident bar chart","d":"here is incident bar chart middle size","k":"layout","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-bar-chart/default/preview.1748015223901.png","pc":"reaviz","tg":["dashboard"]},{"id":"21st:reaviz__incident-chart","t":"Incident chart","d":"here is incident component example","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-chart/default/preview.1748118600454.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__incident-report","t":"Incident report","d":"Incident report bar","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-report/default/preview.1748014615942.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__incident-report-1","t":"Incident report 1","d":"Incidenet Report ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-report-1/default/preview.1748018232627.png","pc":"reaviz","tg":["card","data-visualization","dashboard"]},{"id":"21st:reaviz__incident-report-large","t":"Incident report large","d":"Here is incident report large component","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-report-large/default/preview.1748010101807.png","pc":"reaviz","tg":["dashboard"]},{"id":"21st:reaviz__incident-report-middle","t":"Incident report middle","d":"Here is a incident Report middle ","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/incident-report-middle/default/preview.1748009733728.png","pc":"reaviz","tg":["dashboard"]},{"id":"21st:reaviz__interpolation-chart","t":"Interpolation chart","d":"Here is Interpolation Chart small","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interpolation-chart/default/preview.1748120820099.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__interpolation-chart-1","t":"Interpolation chart 1","d":"Here is Interpolatioon Chart medium","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/interpolation-chart-1/default/preview.1748121085682.png","pc":"reaviz","tg":["dashboard"]},{"id":"21st:reaviz__interpolation-chart-middle","t":"Interpolation chart middle","d":"Here is Interpolation Chart BIG sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/user_reaviz/interpolation-chart-middle/default/preview.1748458632195.png","pc":"reaviz","tg":["card","data-visualization","dashboard"]},{"id":"21st:reaviz__layered-chart-medium","t":"Layered chart medium","d":"Here is Layered Chart medium sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/layered-chart-medium/default/preview.1748120691059.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__layered-chart-xl","t":"Layered chart xl","d":"Here is Layered Chart XL sized","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/layered-chart-xl/default/preview.1748120737691.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__layered-funnel-chart","t":"Layered funnel chart","d":"Here is Layered Funnel Chart small","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/layered-funnel-chart/default/preview.1748120518404.png","pc":"reaviz","tg":["data-visualization","dashboard"]},{"id":"21st:reaviz__multi-series-bar","t":"Multi series bar","d":"Here is multi series bar chart small size","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/multi-series-bar/default/preview.1748119304323.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__multi-series-bar-1","t":"Multi series bar 1","d":"Here is multi series bar chart medium size","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/multi-series-bar-1/default/preview.1748119391017.png","pc":"reaviz","tg":["data-visualization","stat"]},{"id":"21st:reaviz__stacked-bar","t":"Stacked bar","d":"here is stacked bar small component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","u":5,"pl":"https://cdn.21st.dev/larsen66/stacked-bar/default/preview.1748119575901.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__stacked-bar-medium","t":"Stacked bar medium","d":"Here is stacked bar medium sice","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"rated","u":5,"pl":"https://cdn.21st.dev/larsen66/stacked-bar-medium/default/preview.1748119704163.png","pc":"reaviz","sc":19},{"id":"21st:reaviz__stacked-bar-xl","t":"Stacked bar xl","d":"Here is stacked bar xl sized component","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/stacked-bar-xl/default/preview.1748119771533.png","pc":"reaviz","tg":["dashboard","stat"]},{"id":"21st:reaviz__stacked-chart","t":"Stacked chart","d":"here is stacked chart component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/stacked-chart/default/preview.1748116752884.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:reaviz__stacked-diverging-bar","t":"Stacked diverging bar","d":"here is Stacked diggering bar chart medium","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"reaviz","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/stacked-diverging-bar/default/preview.1748120013809.png","pc":"reaviz","tg":["data-visualization","stat"]},{"id":"21st:reaviz__stacked-normalized-incident-chart","t":"Stacked normalized incident chart","d":"stacked normalized incident chart  component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"reaviz","st":"indexed","pl":"https://cdn.21st.dev/larsen66/stacked-normalized-incident-chart/default/preview.1748117812962.png","pc":"reaviz","tg":["data-visualization"]},{"id":"21st:redpangilinan__credenza","t":"Credenza","d":"Ready-made responsive modal component for shadcn/ui.\n\nDialog for desktop and Drawer for mobile","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"redpangilinan","st":"indexed","u":52,"pl":"https://cdn.21st.dev/user_redpangilinan/credenza.png","pc":"redpangilinan","tg":["modal"]},{"id":"21st:reihanabta335__spider-man-bnd","t":"Spider man bnd","d":"Animated (flicker) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reihanabta335","st":"indexed","pl":"https://cdn.21st.dev/reihanabta335/spider-man-bnd/default/preview.1786362612444-15db73b3-3b90-4861-a1a6-e8d49396a4b2.webp","pc":"reihanabta335"},{"id":"21st:rekanesiads__carosel","t":"Carosel","d":"Carosel Carosel","k":"component","s":"21st","c":"other","g":"other","a":"rekanesiads","st":"indexed","pl":"https://cdn.21st.dev/rekanesiads/carosel/default/preview.1749112298679.png","pc":"rekanesiads"},{"id":"21st:remcostoeten__cube-loader","t":"Cube loader","d":"An aesthetic cube loader that’s suitable for a loading.tsx. Performant, fully customizable with plenty of props, and accessible.","k":"component","s":"21st","c":"status/loader","g":"status","a":"remcostoeten","st":"indexed","pl":"https://cdn.21st.dev/remcostoeten/cube-loader/default/preview.1759964828043.png","pc":"remcostoeten"},{"id":"21st:remcostoeten__heartbeat-loader","t":"Heartbeat loader","d":"A feature rich loader component. Various props such as full page which is handy for a loading.tsx, easing, color, size. Accessible and performant.","k":"component","s":"21st","c":"status/loader","g":"status","a":"remcostoeten","st":"indexed","pl":"https://cdn.21st.dev/remcostoeten/heartbeat-loader/default/preview.1760203914525.png","pc":"remcostoeten"},{"id":"21st:remcostoeten__interactive-empty-state","t":"Interactive empty state","d":"Beautiful and modular empty state components based of  https://21st.dev/serafimcloud/empty-state/default","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"remcostoeten","st":"indexed","u":207,"pl":"https://cdn.21st.dev/remcostoeten/interactive-empty-state/default/preview.1785208904939-62c68052-ce16-464e-8241-07d97d46b516.png","pc":"remcostoeten"},{"id":"21st:reshaped__perlin-noise","t":"Perlin noise","d":"Classic animated 3D Perlin noise with exposed controls for octaves, persistence, lacunarity and more.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/reshaped/perlin-noise/default/preview.1785454892908-c5281bc9-092a-45d5-b918-2107ec185639.png","pc":"reshaped"},{"id":"21st:reshaped__reshaped-alert","t":"Reshaped alert","d":"Prominent message related to the entire page or a specific area. Renders a title, an optional icon and a children slot; supports an actions slot, four status colors (critical, warn","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"reshaped","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reshaped-alert/default/preview.1783343041487.png","pc":"reshaped","tg":["alert","link","notification"]},{"id":"21st:reshaped__reshaped-autocomplete","t":"Reshaped autocomplete","d":"Renders a TextField and a list of suggested values using Autocomplete.Item compound components. The list is shown when the user focuses the field and hidden once they select a valu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-autocomplete/default/preview.1783346257644.png","pc":"reshaped","tg":["dropdown","list"]},{"id":"21st:reshaped__reshaped-avatar","t":"Reshaped avatar","d":"Displays a masked image when src is passed, with initials or icon fallbacks when the image is not available. Supports color tokens with a faded variant, any numeric size with autom","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-avatar/default/preview.1783346696619.png","pc":"reshaped","tg":["avatar","profile"]},{"id":"21st:reshaped__reshaped-badge","t":"Reshaped badge","d":"Renders its children as text content for communicating an object's status. Comes in multiple colors with faded and outline variants, three sizes, a rounded notification-bubble mode","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"reshaped","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reshaped-badge/default/preview.1783348874786.png","pc":"reshaped","tg":["badge","input","notification"]},{"id":"21st:reshaped__reshaped-breadcrumbs","t":"Reshaped breadcrumbs","d":"Renders Breadcrumbs.Item elements separated by chevron icons; an item without onClick or href becomes the active current page. Supports primary color, per-item icons and disabled s","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reshaped","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reshaped-breadcrumbs/default/preview.1783349391231.png","pc":"reshaped"},{"id":"21st:reshaped__reshaped-button","t":"Reshaped button","d":"Renders its children as button content and works with both href and onClick. Supports solid, outline, ghost and faded variants, neutral/primary/critical/positive colors, four sizes","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-button/default/preview.1783349865105.png","pc":"reshaped","tg":["button","spinner"]},{"id":"21st:reshaped__reshaped-calendar","t":"Reshaped calendar","d":"Functional without any properties by default, rendering the current month with single date selection and a month-selection view. Supports controlled and uncontrolled values, range ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-calendar/default/preview.1783366044738.png","pc":"reshaped","tg":["calendar","date-picker"]},{"id":"21st:reshaped__reshaped-card","t":"Reshaped card","d":"An empty container with basic styling applied, perfect for composing components. Works as an actionable element with href or onClick, supports a selected state for group selection,","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"reshaped","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/reshaped-card/default/preview.1783351654698.png","pc":"reshaped","tg":["checkbox"]},{"id":"21st:reshaped__reshaped-carousel","t":"Reshaped carousel","d":"Displays its children as scrollable carousel items with a configurable number of visible items. Supports gap control aligned with your product grid, full-width bleed, onScroll/onCh","k":"component","s":"21st","c":"media/carousel","g":"media","a":"reshaped","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/reshaped-carousel/default/preview.1783352019908.png","pc":"reshaped","tg":["carousel","slider"]},{"id":"21st:reshaped__reshaped-checkbox","t":"Reshaped checkbox","d":"Works like a native checkbox with value and name passed to the form on submission. Comes in three sizes, supports error, disabled and indeterminate states, controlled and uncontrol","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-checkbox/default/preview.1783352523111.png","pc":"reshaped","tg":["checkbox"]},{"id":"21st:reshaped__reshaped-context-menu","t":"Reshaped context menu","d":"Root wrapper whose children receive a right-click handler to open an overlaying menu. Exposes compound components for menu items, item sections and nested sub-menus with automatic ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-context-menu/default/preview.1783352862330.png","pc":"reshaped","tg":["menu"]},{"id":"21st:reshaped__reshaped-divider","t":"Reshaped divider","d":"Separates content horizontally or vertically with the vertical flag. Integrates with the View utility's divided property, supports a neutral color to match form field borders, text","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-divider/default/preview.1783428921249.png","pc":"reshaped","tg":["border","list","tabs"]},{"id":"21st:reshaped__reshaped-dropdown-menu","t":"Reshaped dropdown menu","d":"Compound components for any menu composition: a Trigger that passes required attributes to your component, an overlaying Content with menu items based on MenuItem, item Sections, a","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-dropdown-menu/default/preview.1783429245829.png","pc":"reshaped","tg":["dropdown","menu","popover"]},{"id":"21st:reshaped__reshaped-file-upload","t":"Reshaped file upload","d":"Renders an area for uploading files with a native HTML file input, handling click and drag events with an onChange handler for the uploaded file data. Supports a separate Trigger e","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-file-upload/default/preview.1783429597917.png","pc":"reshaped","tg":["upload-download"]},{"id":"21st:reshaped__reshaped-link","t":"Reshaped link","d":"Navigation link for use within text that respects line breaks and text flow. Works with both href and onClick (rendering an anchor or button tag), offers underline and plain varian","k":"component","s":"21st","c":"actions/link","g":"actions","a":"reshaped","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/reshaped-link/default/preview.1783429952872.png","pc":"reshaped","tg":["link","navigation-menu"]},{"id":"21st:reshaped__reshaped-loader","t":"Reshaped loader","d":"Spinner used as part of other components to enable a loading state or as a standalone element. Comes in small, medium and large sizes with responsive syntax support, primary color ","k":"component","s":"21st","c":"status/loader","g":"status","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-loader/default/preview.1783430253065.png","pc":"reshaped","tg":["spinner"]},{"id":"21st:reshaped__reshaped-menu-item","t":"Reshaped menu item","d":"Building block for menus and navigation that renders its main area from children and works with both href and onClick. Supports critical and neutral colors, selected and disabled s","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-menu-item/default/preview.1783431172571.png","pc":"reshaped","tg":["list","menu","navigation-menu","sidebar"]},{"id":"21st:reshaped__reshaped-modal","t":"Reshaped modal","d":"Controlled overlay dialog with an active flag and onClose handler that locks page scroll while open. Supports center, bottom, start, end and full-screen positions with matching sli","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-modal/default/preview.1783438468596.png","pc":"reshaped","tg":["modal"]},{"id":"21st:reshaped__reshaped-number-field","t":"Reshaped number field","d":"Numeric input with increase/decrease controls and keyboard arrow support, based on TextField so it inherits its variants and sizes. Works in controlled and uncontrolled modes, supp","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-number-field/default/preview.1783431936465.png","pc":"reshaped","tg":["input"]},{"id":"21st:reshaped__reshaped-pagination","t":"Reshaped pagination","d":"Renders the full range of pages from the total count, automatically truncating the display around the currently selected page. Requires aria-labels for the previous/next controls, ","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-pagination/default/preview.1783433226799.png","pc":"reshaped","tg":["navigation-menu","pagination"]},{"id":"21st:reshaped__reshaped-pin-field","t":"Reshaped pin field","d":"One-time-code input rendering separate character cells backed by a single native input with caret syncing. Supports controlled and uncontrolled values, configurable length, numeric","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-pin-field/default/preview.1783434048832.png","pc":"reshaped"},{"id":"21st:reshaped__reshaped-popover","t":"Reshaped popover","d":"Overlay attached to any interactive trigger element via passed attributes, opening on click or hover. Automatically repositions within the viewport with controllable fallback posit","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-popover/default/preview.1783440144139.png","pc":"reshaped","tg":["popover","tooltip"]},{"id":"21st:reshaped__reshaped-progress-bar","t":"Reshaped progress bar","d":"Progress bar controlled by a value within a 0-100 range by default, with custom min/max boundaries. Comes in medium and small sizes, primary/critical/warning/positive colors plus a","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-progress-bar/default/preview.1783440560086.png","pc":"reshaped","tg":["progress"]},{"id":"21st:reshaped__reshaped-progress-indicator","t":"Reshaped progress indicator","d":"Dot-based step indicator that takes a total amount of steps and the current activeIndex as a controlled component. Pairs with Carousel and Pagination for syncing scroll or navigati","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-progress-indicator/default/preview.1783440823858.png","pc":"reshaped","tg":["carousel","steps"]},{"id":"21st:reshaped__reshaped-radio","t":"Reshaped radio","d":"Works like a native radio button with value passed to the form on submission, in controlled or uncontrolled mode. Comes in three sizes, supports error and disabled states, and a Ra","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-radio/default/preview.1783441236441.png","pc":"reshaped","tg":["radio-group"]},{"id":"21st:reshaped__reshaped-select","t":"Reshaped select","d":"Form select rendering Select.Option components over a native select element, in controlled or uncontrolled mode. Supports a start content slot, consistent field icons, four sizes a","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"reshaped","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/reshaped-select/default/preview.1783441696937.png","pc":"reshaped","tg":["dropdown","select"]},{"id":"21st:reshaped__reshaped-slider","t":"Reshaped slider","d":"Form slider with onChange and onChangeCommit handlers, a default 0-100 range customizable with min/max and step snapping. Supports controlled and uncontrolled modes, a two-thumb ra","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"reshaped","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reshaped-slider/default/preview.1783519940989.png","pc":"reshaped","tg":["slider"]},{"id":"21st:reshaped__reshaped-switch","t":"Reshaped switch","d":"Toggle form field that takes a name and an optional children label, with an onChange handler. Supports a reversed label position, three sizes, controlled and uncontrolled modes via","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-switch/default/preview.1783520818311.png","pc":"reshaped","tg":["form","toggle"]},{"id":"21st:reshaped__reshaped-table","t":"Reshaped table","d":"Collection of compound components (Table.Row, Table.Cell, Table.Heading, Table.Head, Table.Body) for building tables from simple cells to headed layouts. Supports outer and column ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-table/default/preview.1783521745438.png","pc":"reshaped","tg":["border","checkbox","table"]},{"id":"21st:reshaped__reshaped-tabs","t":"Reshaped tabs","d":"Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or c","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"reshaped","st":"indexed","u":5,"pl":"https://cdn.21st.dev/larsen66/reshaped-tabs/default/preview.1783522769856.png","pc":"reshaped","tg":["list","tabs"]},{"id":"21st:reshaped__reshaped-text-area","t":"Reshaped text area","d":"Multiline text input taking a name and optional onChange, in controlled or uncontrolled mode. Comes in three sizes aligned with other inputs, faded and headless variants, error and","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-text-area/default/preview.1783527783090.png","pc":"reshaped","tg":["textarea"]},{"id":"21st:reshaped__reshaped-text-field","t":"Reshaped text field","d":"Single-line text input taking a name and optional onChange, in controlled or uncontrolled mode. Supports prefix/suffix affixes, start/end slots for badges and inline actions, multi","k":"component","s":"21st","c":"media/icon","g":"media","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-text-field/default/preview.1783529284589.png","pc":"reshaped","tg":["icon"]},{"id":"21st:reshaped__reshaped-toast","t":"Reshaped toast","d":"Notification system driven by the useToast hook (show/hide) and ToastProvider for scoped render regions. Toasts support an icon, title, text and 1-2 actions, five colors (inverted ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-toast/default/preview.1783530330503.png","pc":"reshaped","tg":["alert","hook","notification","toast"]},{"id":"21st:reshaped__reshaped-toggle-button","t":"Reshaped toggle button","d":"Button that maintains a pressed/selected state, built on top of Button and defaulting to the outline variant. Inherits Button props (color, size, icons), supports a distinct select","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-toggle-button/default/preview.1783530674253.png","pc":"reshaped","tg":["button"]},{"id":"21st:reshaped__reshaped-toggle-button-group","t":"Reshaped toggle button group","d":"Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and unco","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-toggle-button-group/default/preview.1783531004078.png","pc":"reshaped","tg":["toggle"]},{"id":"21st:reshaped__reshaped-tooltip","t":"Reshaped tooltip","d":"Tooltip attached to any interactive element by passing its attributes to the trigger. Shows on hover with automatic viewport-aware repositioning, supports a configurable position, ","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"reshaped","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reshaped-tooltip/default/preview.1783531298924.png","pc":"reshaped","tg":["tooltip"]},{"id":"21st:reuelaraujo7__blerry-app","t":"Blerry app","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#DD561D, #5800E6). Features: soft blur finish, film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reuelaraujo7","st":"indexed","pl":"https://cdn.21st.dev/reuelaraujo7/blerry-app/default/preview.1786472746129-057472cb-a95e-4dee-b2a4-2aa78efc415a.webp","pc":"reuelaraujo7"},{"id":"21st:reuelaraujo7__menu","t":"Menu","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#F8B500, #EF7D01, #C8592B, #824880). Features: film grain. A drop-in","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"reuelaraujo7","st":"indexed","pl":"https://cdn.21st.dev/reuelaraujo7/menu/default/preview.1786470946388-969fbdd4-51ac-4087-b864-23b7faf8bf59.webp","pc":"reuelaraujo7"},{"id":"21st:reuelaraujo7__pedidosmenu-com","t":"Pedidosmenu com","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#DD561D, #5800E6). Features: soft blur finish, film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reuelaraujo7","st":"indexed","pl":"https://cdn.21st.dev/reuelaraujo7/pedidosmenu-com/default/preview.1786470955789-5961be38-13ad-47f2-bd5c-20c90b4206ab.webp","pc":"reuelaraujo7"},{"id":"21st:reuno-ui__ai-input","t":"Ai input","d":"Here is Ai Input component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/ai-input/default/preview.1750555405871.png","pc":"reuno-ui","tg":["textarea"]},{"id":"21st:reuno-ui__animated-number","t":"Animated number","d":"Here is Animated Number component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-number/default/preview.1757657074835.png","pc":"reuno-ui","tg":["number"]},{"id":"21st:reuno-ui__apple-play-button","t":"Apple play button","d":"Here is Apple play button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/apple-play-button/default/preview.1757680501214.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__background-paper-shaders","t":"Background paper shaders","d":"Background Paper Shade with grey shaders","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reuno-ui","st":"indexed","u":1939,"pl":"https://cdn.21st.dev/reuno-ui/background-paper-shaders/default/preview.1785304097969-b0bbd7f1-b225-43bc-ba0c-57fdc6ab3b6e.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__background-plus","t":"Background plus","d":"bg background ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"reuno-ui","st":"indexed","u":105,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/background-plus/default/preview.1755158194788.png","pc":"reuno-ui","tg":["grid"]},{"id":"21st:reuno-ui__bg-gredient","t":"Bg gredient","d":"BG GREDIENT  FOR HEROS OR COMPONENTS ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reuno-ui","st":"indexed","u":100,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/bg-gredient/default/preview.1751115590945.png","pc":"reuno-ui","tg":["background","hero"]},{"id":"21st:reuno-ui__blue-meshy-background","t":"Blue meshy background","d":"bg for components meshy blue gredient with darker effect ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"reuno-ui","st":"indexed","u":48,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/blue-meshy-background/default/preview.1755121827319.png","pc":"reuno-ui","tg":["background","cta"]},{"id":"21st:reuno-ui__card-carousel","t":"Card carousel","d":"Here is Card Carousel component","k":"component","s":"21st","c":"media/carousel","g":"media","a":"reuno-ui","st":"indexed","u":185,"pl":"https://cdn.21st.dev/larsen66/card-carousel/default/preview.1750556453169.png","pc":"reuno-ui","tg":["carousel"]},{"id":"21st:reuno-ui__count-down-numbers","t":"Count down numbers","d":"Here is CountDown Numbers component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"reuno-ui","st":"indexed","u":26,"pl":"https://cdn.21st.dev/larsen66/count-down-numbers/default/preview.1753313477287.png","pc":"reuno-ui","tg":["number"]},{"id":"21st:reuno-ui__countdown-number","t":"Countdown number","d":"Here is Countdown Number component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/countdown-number/default/preview.1753313286817.png","pc":"reuno-ui","tg":["badge","number"]},{"id":"21st:reuno-ui__crypto-dashboard","t":"Crypto dashboard","d":"Crypto dashboard with real time price update using a coincecko api with time and new card design ","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"reuno-ui","st":"indexed","u":35,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/crypto-dashboard/default/preview.1755261944926.png","pc":"reuno-ui","tg":["data-visualization","dashboard"]},{"id":"21st:reuno-ui__css-link","t":"Css link","d":"Here is Css Link","k":"component","s":"21st","c":"actions/link","g":"actions","a":"reuno-ui","st":"indexed","u":43,"pl":"https://cdn.21st.dev/larsen66/css-link/default/preview.1757680882722.png","pc":"reuno-ui","tg":["link"]},{"id":"21st:reuno-ui__expanded-tabs","t":"Expanded tabs","d":"Here is Expanded Tabs component ","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"reuno-ui","st":"rated","pl":"https://cdn.21st.dev/larsen66/expanded-tabs/default/preview.1750555669249.png","pc":"reuno-ui","tg":["tabs"],"sc":21},{"id":"21st:reuno-ui__hero","t":"Hero","d":"sleek Hero section with background paper shaders ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"reuno-ui","st":"indexed","u":726,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/hero/default/preview.1774361928502.png","pc":"reuno-ui","tg":["cta","hero"]},{"id":"21st:reuno-ui__hero-section","t":"Hero section","d":"Hero component with sleek animation ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"reuno-ui","st":"indexed","u":303,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/hero-section/default/preview.1752650669301.png","pc":"reuno-ui","tg":["hero"]},{"id":"21st:reuno-ui__joblisting-component","t":"Joblisting component","d":"sleek animation job lisiting model type component ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/joblisting-component/default/preview.1755519611654.png","pc":"reuno-ui","tg":["list"]},{"id":"21st:reuno-ui__loop-animation-hook","t":"Loop animation hook","d":"Here is Loop animation hook","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/loop-animation-hook/default/preview.1757693432244.png","pc":"reuno-ui","tg":["hook"]},{"id":"21st:reuno-ui__mouse-follow-animations","t":"Mouse follow animations","d":"Here is mouse follow animations","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"reuno-ui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/mouse-follow-animations/default/preview.1757684922574.png","pc":"reuno-ui","tg":["cursor"]},{"id":"21st:reuno-ui__music-toggle-btn","t":"Music toggle btn","d":"Here is Music Toggle btn","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/music-toggle-btn/default/preview.1757681464201.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__pagination","t":"Pagination","d":"Here is Pagination component\n","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"reuno-ui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/pagination/default/preview.1757778432008.png","pc":"reuno-ui","tg":["navigation-menu","pagination"]},{"id":"21st:reuno-ui__pearl-button","t":"Pearl button","d":"Pearl button with hover effect ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/pearl-button/default/preview.1755813542736.png","pc":"reuno-ui","tg":["button"]},{"id":"21st:reuno-ui__popover-form","t":"Popover form","d":"Here is Popover Form component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/popover-form/default/preview.1750556701960.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__progressive-blur","t":"Progressive blur","d":"Here is Progressive Blur","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"reuno-ui","st":"indexed","u":96,"pl":"https://cdn.21st.dev/larsen66/progressive-blur/default/preview.1757693080767.png","pc":"reuno-ui","tg":["scroll-area"]},{"id":"21st:reuno-ui__shader-svg","t":"Shader svg","d":"Shader svg example on snapchat logo","k":"component","s":"21st","c":"motion/background","g":"motion","a":"reuno-ui","st":"indexed","u":55,"pl":"https://cdn.21st.dev/muhammadnadeemmn9485134/shader-svg/default/preview.1756045117930.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__share-button","t":"Share button","d":"Here is Share Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/share-button/default/preview.1750557033504.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__shuffle-number","t":"Shuffle number","d":"Here is Shuffle Number  component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shuffle-number/default/preview.1753313044954.png","pc":"reuno-ui","tg":["number","stat"]},{"id":"21st:reuno-ui__slide-button","t":"Slide button","d":"Here is Slide Button component","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"reuno-ui","st":"indexed","u":164,"pl":"https://cdn.21st.dev/larsen66/slide-button/default/preview.1750556888612.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__special-card","t":"Special card","d":"Here is Special Card component","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/special-card/default/preview.1750555959582.png","pc":"reuno-ui","tg":["features","gallery"]},{"id":"21st:reuno-ui__stacked-dialog","t":"Stacked dialog","d":"Here is Stacked Dialog component","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"reuno-ui","st":"rated","u":45,"pl":"https://cdn.21st.dev/larsen66/stacked-dialog/default/preview.1750556415134.png","pc":"reuno-ui","tg":["modal","steps"],"sc":20},{"id":"21st:reuno-ui__svg-clip-path-mask","t":"Svg clip path mask","d":"Hereis SVG Clip Path Mask","k":"component","s":"21st","c":"other","g":"other","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/svg-clip-path-mask/default/preview.1757694715280.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__svg-follow-scroll","t":"Svg follow scroll","d":"Here is svg follow scroll","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"reuno-ui","st":"indexed","u":174,"pl":"https://cdn.21st.dev/larsen66/svg-follow-scroll/default/preview.1757692770066.png","pc":"reuno-ui","tg":["scroll-area"]},{"id":"21st:reuno-ui__tabs-2","t":"Tabs 2","d":"Here is Tabs component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tabs-2/default/preview.1757778051068.png","pc":"reuno-ui","tg":["radio-group","tabs"]},{"id":"21st:reuno-ui__text-roll-navigation","t":"Text roll navigation","d":"Here is Text roll navigation","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"reuno-ui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/larsen66/text-roll-navigation/default/preview.1757682938711.png","pc":"reuno-ui","tg":["list","navigation-menu"]},{"id":"21st:reuno-ui__text-scroll-animation","t":"Text scroll animation","d":"Here is text scroll animation","k":"component","s":"21st","c":"status/loader","g":"status","a":"reuno-ui","st":"indexed","u":106,"pl":"https://cdn.21st.dev/larsen66/text-scroll-animation/default/preview.1757690897848.png","pc":"reuno-ui"},{"id":"21st:reuno-ui__theme-toggle-buttons","t":"Theme toggle buttons","d":"Here is Theme toggle buttons","k":"component","s":"21st","c":"actions/button","g":"actions","a":"reuno-ui","st":"indexed","pl":"https://cdn.21st.dev/reuno-ui/theme-toggle-buttons/default/preview.1785470134267-a1c8c0a9-937c-471a-b17e-9566bcf98a57.png","pc":"reuno-ui"},{"id":"21st:rf-rifat__features","t":"Features","d":"A Features section with animated card section","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"rf-rifat","st":"indexed","pl":"https://cdn.21st.dev/rf-rifat/features/default/preview.1751888088636.png","pc":"rf-rifat"},{"id":"21st:rf-rifat__hero-section","t":"Hero section","d":"This hero section has modern and engaging with smooth, sophisticated animations","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"rf-rifat","st":"indexed","pl":"https://cdn.21st.dev/rf-rifat/hero-section/default/preview.1751886613514.png","pc":"rf-rifat"},{"id":"21st:rf-rifat__use-cases-section","t":"Use cases section","d":"A modern, animated AI Use Case Explorer section built with React, Framer Motion, and Lucide Icons. Dynamic tab-based navigation with animated cards for use cases (e.g., Healthcare,","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"rf-rifat","st":"indexed","pl":"https://cdn.21st.dev/rf-rifat/use-cases-section/default/preview.1751889102678.png","pc":"rf-rifat"},{"id":"21st:ricaelmenezes3__portfolio","t":"Portfolio","d":"Animated WebGL shader background in the Smoke style, generated by the 21st.dev Shader Builder. 4-color palette (#03120E, #0E7C5A, #7CE577, #F4FFC7). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ricaelmenezes3","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ricaelmenezes3/portfolio/default/preview.1784402187758-329cd6e6-f09a-4e77-89c3-95db9acc86e3.webp","pc":"ricaelmenezes3"},{"id":"21st:ridemountainpig__flightcn-flight-airport","t":"Flightcn flight airport","d":"Renders a single airport marker with optional labels, custom marker UI, and click callbacks.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ridemountainpig","st":"indexed","u":16,"pl":"https://cdn.21st.dev/reapollo/flightcn-flight-airport/default/preview.1780350519948.png","pc":"ridemountainpig","tg":["map"]},{"id":"21st:ridemountainpig__flightcn-flight-multi-route","t":"Flightcn flight multi route","d":"Renders connecting multi-leg routes from ordered waypoints, ideal for itinerary visualization.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ridemountainpig","st":"indexed","pl":"https://cdn.21st.dev/ridemountainpig/flightcn-flight-multi-route/default/preview.1785534736757-94f6cceb-2ee2-437a-9d44-6a576f40cbda.png","pc":"ridemountainpig"},{"id":"21st:ridemountainpig__flightcn-flight-routes","t":"Flightcn flight routes","d":"Renders multiple routes in batch with shared defaults and per-route overrides.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ridemountainpig","st":"indexed","pl":"https://cdn.21st.dev/ridemountainpig/flightcn-flight-routes/default/preview.1785533864121-b2f9077c-7aeb-40af-a9e5-f2646a526bb7.png","pc":"ridemountainpig"},{"id":"21st:ridemountainpig__flightcn-satellite-orbit","t":"Flightcn satellite orbit","d":"Renders a globe-based orbital path with an elevated satellite marker, ground track, and optional animated motion for space or telecom visualizations.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"ridemountainpig","st":"indexed","pl":"https://cdn.21st.dev/ridemountainpig/flightcn-satellite-orbit/default/preview.1785544423051-f5c29038-0807-433b-8812-ff437e078590.png","pc":"ridemountainpig"},{"id":"21st:ringlabs__animated-check-box","t":"Animated check box","d":"Animated CheckBox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ringlabs","st":"indexed","u":52,"pl":"https://cdn.21st.dev/ringlabs/animated-check-box/default/preview.1747471846216.png","pc":"ringlabs","tg":["checkbox"]},{"id":"21st:ringlabs__glowing-button","t":"Glowing button","d":"Glowing Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ringlabs","st":"indexed","pl":"https://cdn.21st.dev/user_2wSSd03cGcvnllzmXFkxJJb8FTN/glowing-button/glow-button/preview.png","pc":"ringlabs"},{"id":"21st:ringlabs__interactive-animated-arrow-icon","t":"Interactive animated arrow icon","d":"Interactive Animated Arrow Icon\n","k":"component","s":"21st","c":"media/icon","g":"media","a":"ringlabs","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ringlabs/interactive-animated-arrow-icon/default/preview.1747573931984.png","pc":"ringlabs"},{"id":"21st:ringlabs__pastel-hero-header","t":"Pastel hero header","d":"Pastel Hero Header","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ringlabs","st":"indexed","pl":"https://cdn.21st.dev/ringlabs/pastel-hero-header/default/preview.1747662952895.png","pc":"ringlabs"},{"id":"21st:ringozzt__qq-buttons","t":"Qq buttons","d":"a button for qq","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ringozzt","st":"indexed","pl":"https://cdn.21st.dev/ringozzt/qq-buttons/default/preview.1754550308788.png","pc":"ringozzt"},{"id":"21st:rizwanasghar1997__navbar","t":"Navbar","d":"A modern style animated navbar with full fledge mega menu and a flare moving on border of the navbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"rizwanasghar1997","st":"indexed","pl":"https://cdn.21st.dev/rizwanasghar1997/navbar/default/preview.1786096625476-5e9b5f60-ec84-4cdf-9b54-701697097bd7.png","pc":"rizwanasghar1997"},{"id":"21st:rlzee__pricing","t":"Pricing","d":"A stylish and modern user section designed to compare two subscription plans for an email management service. Ideal for a SaaS pricing page, it features:\n\n-A responsive design in d","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"rlzee","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_2xC9dg7Ft8vciGp8PLVswJWVPhx/pricing/default/preview.1750814683163.png","pc":"rlzee","tg":["comparison","pricing-section"]},{"id":"21st:rmahammad__border-beam-panel","t":"Border beam panel","d":"A card with a light beam that travels its border — conic-gradient trace, configurable speed, colour and dwell.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/border-beam-panel/default/preview.1785414406380-d11b8b7a-6b82-457d-8656-bb826aba98ec.png","pc":"rmahammad","tg":["border"]},{"id":"21st:rmahammad__compare-reveal","t":"Compare reveal","d":"A before/after comparison slider with a draggable handle, keyboard control and an intro sweep — double-click to snap back to centre.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/compare-reveal/default/preview.1785417554651-02135953-1542-4731-8fd6-5ac08711e089.png","pc":"rmahammad","tg":["comparison","image","slider"]},{"id":"21st:rmahammad__copperplate-hatch","t":"Copperplate hatch","d":"Crosshatched ink strokes that accumulate tone around the pointer and thin to blank paper behind your headline — engraving, not gradients. Fixed plate palette by design, so it reads","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/copperplate-hatch/default/preview.1785417568298-3bb377fc-634d-4f71-a860-51ecc07cdb93.png","pc":"rmahammad"},{"id":"21st:rmahammad__decrypt-text","t":"Decrypt text","d":"Text that resolves out of scrambled glyphs, character by character, with jitter and a terminal variant — SSR-readable and reduced-motion safe.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/decrypt-text/default/preview.1785414411502-dad57a5e-0afb-4191-a4b2-5ef8c7b81e62.png","pc":"rmahammad","tg":["text"]},{"id":"21st:rmahammad__glass-refraction-panel","t":"Glass refraction panel","d":"A physically-inspired glass panel: edge refraction, chromatic dispersion and a moving specular highlight that tracks the pointer.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/glass-refraction-panel/default/preview.1785414408704-9605d19e-42dc-43e4-aefe-f0908d814917.png","pc":"rmahammad"},{"id":"21st:rmahammad__gooey-actions","t":"Gooey actions","d":"A floating action button whose children separate out of the trigger like liquid metal, using an SVG goo filter.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/gooey-actions/default/preview.1785414558836-07d6617f-2a35-4ce6-8866-85baa111ad7c.png","pc":"rmahammad"},{"id":"21st:rmahammad__holo-card","t":"Holo card","d":"A holographic trading-card surface: pointer-driven 3D tilt with a spring, a rainbow foil sheet whose hue travels with the light, and a contact shadow that leans with the card.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/holo-card/default/preview.1785414327475-1741b7f0-58c9-46c2-b1d6-e3f1c6da3002.png","pc":"rmahammad"},{"id":"21st:rmahammad__lens-card","t":"Lens card","d":"A magnifying lens that follows the cursor across a live surface, with chromatic fringing and grid bend at the rim — then drifts on its own when you leave.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rmahammad","st":"indexed","u":6,"pl":"https://cdn.21st.dev/rmahammad/lens-card/default/preview.1785417554634-6420ea02-d2dc-4d4e-bd1a-9f77580ad3f4.png","pc":"rmahammad","tg":["cursor"]},{"id":"21st:rmahammad__luminous-topography","t":"Luminous topography","d":"An animated contour-map background — drifting topographic lines that brighten around the cursor. Canvas-free, pauses when offscreen.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"rmahammad","st":"indexed","u":8,"pl":"https://cdn.21st.dev/rmahammad/luminous-topography/default/preview.1785414427410-6a3af5f4-ba4c-419a-bdee-dfb6e7d462b9.png","pc":"rmahammad","tg":["background","hero"]},{"id":"21st:rmahammad__magnetic-dock","t":"Magnetic dock","d":"A macOS-style dock where icons swell and neighbours yield to the cursor on a real magnetic falloff — keyboard navigable, with tooltips and an idle wave.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/magnetic-dock/default/preview.1785417551686-d52c1b03-630d-4d8a-acd1-5960de159634.png","pc":"rmahammad","tg":["dock","menu","navigation-menu"]},{"id":"21st:rmahammad__prompt-composer","t":"Prompt composer","d":"A production-grade prompt input: typed variable chips, attachment queue with upload states, template menu, model picker and a live token budget that warns before you overflow.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"rmahammad","st":"rated","pl":"https://cdn.21st.dev/rmahammad/prompt-composer/default/preview.1785417710535-e4907bd7-986b-41de-a638-8263bca6ee39.png","pc":"rmahammad","tg":["ai-chat","input","textarea"],"sc":23},{"id":"21st:rmahammad__riso-registration","t":"Riso registration","d":"Two halftone ink plates drifting in and out of alignment on independent cycles — risograph misregistration as an animated background, with a safe area that stays crisp. Fixed ink p","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/riso-registration/default/preview.1785417554687-0548529e-31f6-4c9c-864e-d7ab4839887d.png","pc":"rmahammad"},{"id":"21st:rmahammad__torch-reveal","t":"Torch reveal","d":"A cursor-tracked torch that wipes a hidden layer into view through a soft mask — hover to light up the surface underneath.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"rmahammad","st":"indexed","pl":"https://cdn.21st.dev/rmahammad/torch-reveal/default/preview.1785414408758-67862246-5719-469e-bb93-f626b461e53e.png","pc":"rmahammad","tg":["cursor"]},{"id":"21st:rogermenezes2021__myphoto","t":"Myphoto","d":"Animated (flicker) ASCII art in the Hex Dump style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, card","k":"component","s":"21st","c":"media/gallery","g":"media","a":"rogermenezes2021","st":"indexed","pl":"https://cdn.21st.dev/rogermenezes2021/myphoto/default/preview.1785225018865-e4b82a5c-7d3c-4d47-aeda-3b1fd49106c4.webp","pc":"rogermenezes2021"},{"id":"21st:rorogogogo__agent-wave-loader","t":"Agent wave loader","d":"A loading indicator for AI agent work — a signal arcs across Claude Code, Codex, Gemini, DeepSeek and Kimi marks, lifting each as it passes. Respects prefers-reduced-motion.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"rorogogogo","st":"rated","pl":"https://cdn.21st.dev/xwang.robert/agent-wave-loader/default/preview.1786189877272-695850ea-9f6b-431b-96f5-11f8a5de31a8.png","pc":"rorogogogo","tg":["ai-chat"],"sc":19},{"id":"21st:rrodriguezrr007__liminal-vincent-marcum","t":"Liminal vincent marcum","d":"Animated (flicker) ASCII art in the Mixed style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"rrodriguezrr007","st":"indexed","pl":"https://cdn.21st.dev/rrodriguezrr007/liminal-vincent-marcum/default/preview.1785288043644-f84fdbed-e284-4c0a-937c-ffaf1ee828bf.webp","pc":"rrodriguezrr007"},{"id":"21st:rudrodip__async-select","t":"Async select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"rudrodip","st":"indexed","pl":"https://cdn.21st.dev/user_rudrodip/async-select.png","pc":"rudrodip","tg":["search","select"]},{"id":"21st:ruhith369__aiwallet-card","t":"Aiwallet card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruhith369","st":"rated","pl":"https://cdn.21st.dev/ruhith369/aiwallet-card/default/preview.1761988944977.png","pc":"ruhith369","sc":20},{"id":"21st:ruhith369__animated-box-loader","t":"Animated box loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/animated-box-loader/default/preview.1760458226140.png","pc":"ruhith369"},{"id":"21st:ruhith369__bar-loader","t":"Bar loader","d":"The BarLoader is a sleek, animated loading component for React applications, designed to provide a visually engaging feedback during data fetching or processing. It features multip","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruhith369/bar-loader/default/preview.1760455577705.png","pc":"ruhith369","tg":["spinner"]},{"id":"21st:ruhith369__bento-testimonials","t":"Bento testimonials","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/bento-testimonials/default/preview.1761991436013.png","pc":"ruhith369"},{"id":"21st:ruhith369__block-loader","t":"Block loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/block-loader/default/preview.1785370231108-457ae71c-3562-43c8-9964-00445dd3d1b7.png","pc":"ruhith369"},{"id":"21st:ruhith369__bouncing-circles-loader","t":"Bouncing circles loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/bouncing-circles-loader/default/preview.1760460476081.png","pc":"ruhith369"},{"id":"21st:ruhith369__code-profile-card","t":"Code profile card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/code-profile-card/default/preview.1761978079485.png","pc":"ruhith369"},{"id":"21st:ruhith369__dev-terminal-profile","t":"Dev terminal profile","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/dev-terminal-profile/default/preview.1761979080776.png","pc":"ruhith369"},{"id":"21st:ruhith369__freelancer-profile-card","t":"Freelancer profile card","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/freelancer-profile-card/default/preview.1760030520079.png","pc":"ruhith369"},{"id":"21st:ruhith369__glitch-text-loader","t":"Glitch text loader","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/glitch-text-loader/default/preview.1760457746414.png","pc":"ruhith369"},{"id":"21st:ruhith369__glow-button","t":"Glow button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/glow-button/default/preview.1760405458832.png","pc":"ruhith369"},{"id":"21st:ruhith369__health-stat-card","t":"Health stat card","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/health-stat-card/default/preview.1760028136817.png","pc":"ruhith369","tg":["avatar","dropdown","team"]},{"id":"21st:ruhith369__loader","t":"Loader","d":"This loader component is a gooey dots animation built with React, TypeScript, Tailwind CSS, and a small amount of custom CSS keyframes. It consists of three colorful circular dots ","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ruhith369","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ruhith369/loader/default/preview.1759089991110.png","pc":"ruhith369"},{"id":"21st:ruhith369__loader-grid","t":"Loader grid","d":"The LoaderGrid component is a lightweight, colorful loading animation built with React, TypeScript, and Tailwind CSS. It uses two absolutely positioned elements that animate their ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ruhith369","st":"indexed","u":27,"pl":"https://cdn.21st.dev/ruhith369/loader-grid/default/preview.1759287764646.png","pc":"ruhith369"},{"id":"21st:ruhith369__loader-progressive-bar","t":"Loader progressive bar","d":"This LoaderProgressiveBar component is a visually appealing radar-style loading animation built using React and styled with Tailwind CSS. It creates a circular radar effect with co","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ruhith369","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ruhith369/loader-progressive-bar/default/preview.1759289341888.png","pc":"ruhith369","tg":["progress"]},{"id":"21st:ruhith369__loading-bottle","t":"Loading bottle","d":"The LoadingBottle component is a creative SVG-based loading animation that visually represents the outline of a bottle being “drawn” over time. It uses an SVG <path> element combin","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ruhith369/loading-bottle/default/preview.1759289923411.png","pc":"ruhith369","tg":["spinner"]},{"id":"21st:ruhith369__loading-lines","t":"Loading lines","d":"The LoadingLines component is a vibrant, text-based loading animation that displays the word “Generating” with each letter glowing in sequence to create a smooth wave effect. Built","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","u":76,"pl":"https://cdn.21st.dev/ruhith369/loading-lines/default/preview.1759288965806.png","pc":"ruhith369","tg":["spinner"]},{"id":"21st:ruhith369__loading-radar","t":"Loading radar","d":"The LoadingRadar component is a sleek radar-style loading animation built with React, TypeScript, and Tailwind CSS. It creates a circular scanner effect that continuously rotates, ","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","u":28,"pl":"https://cdn.21st.dev/ruhith369/loading-radar/default/preview.1759287448167.png","pc":"ruhith369"},{"id":"21st:ruhith369__nexus-orb-lucide","t":"Nexus orb lucide","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/nexus-orb-lucide/default/preview.1761981028882.png","pc":"ruhith369"},{"id":"21st:ruhith369__policy-pass-card","t":"Policy pass card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/policy-pass-card/default/preview.1760029651933.png","pc":"ruhith369"},{"id":"21st:ruhith369__pulse-divider","t":"Pulse divider","k":"component","s":"21st","c":"status/status-dot","g":"status","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/pulse-divider/default/preview.1761986255042.png","pc":"ruhith369"},{"id":"21st:ruhith369__shadcn-swiper","t":"Shadcn swiper","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/shadcn-swiper/default/preview.1761985826288.png","pc":"ruhith369"},{"id":"21st:ruhith369__triangle-loader","t":"Triangle loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/triangle-loader/default/preview.1760459110245.png","pc":"ruhith369"},{"id":"21st:ruhith369__two-step-verification","t":"Two step verification","k":"component","s":"21st","c":"other","g":"other","a":"ruhith369","st":"indexed","pl":"https://cdn.21st.dev/ruhith369/two-step-verification/default/preview.1761988132370.png","pc":"ruhith369"},{"id":"21st:ruixen.ui__about-page","t":"About page","d":"This AboutPage component is a fully responsive, visually engaging section designed to highlight a company’s ecosystem, achievements, and core offerings. The top hero section featur","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","u":73,"pl":"https://cdn.21st.dev/ruixen.ui/about-page/default/preview.1759946302802.png","pc":"ruixen.ui","tg":["features"]},{"id":"21st:ruixen.ui__accordian","t":"Accordian","d":"The RUIXEN UI Accordion is a fully accessible, lightweight, and responsive component designed to deliver structured content like FAQs or feature explanations in a clean, elegant la","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"ruixen.ui","st":"indexed","u":81,"pl":"https://cdn.21st.dev/ruixen.ui/accordian/default/preview.1749226200341.png","pc":"ruixen.ui","tg":["accordion","faq"]},{"id":"21st:ruixen.ui__account-menu","t":"Account menu","d":"The AccountMenu component is a modern, user-friendly dropdown menu designed for managing user account actions and preferences in a web application. It provides a clean interface wi","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ruixen.ui","st":"indexed","u":26,"pl":"https://cdn.21st.dev/ruixen.ui/account-menu/default/preview.1760579773385.png","pc":"ruixen.ui","tg":["radio-group"]},{"id":"21st:ruixen.ui__action-hub-input","t":"Action hub input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/action-hub-input/default/preview.1757065602751.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__action-toolbar","t":"Action toolbar","d":"The ActionToolbar component is a modern, interactive toolbar built to combine functionality and design elegance. Inspired by the shared-border button style, it presents a unified, ","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ruixen.ui","st":"indexed","u":18,"pl":"https://cdn.21st.dev/ruixen.ui/action-toolbar/default/preview.1760578020869.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__add-task-sheet","t":"Add task sheet","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/add-task-sheet/default/preview.1760589128839.png","pc":"ruixen.ui","sc":22},{"id":"21st:ruixen.ui__advanced-context-menu","t":"Advanced context menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/advanced-context-menu/default/preview.1756145083087.png","pc":"ruixen.ui","sc":20},{"id":"21st:ruixen.ui__advanced-image-uploader","t":"Advanced image uploader","d":"ChatGPT said:\n\nThis Advanced Image Upload & Crop component is a highly interactive and user-friendly tool built entirely with Shadcn UI components. It allows users to upload multip","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ruixen.ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/ruixen.ui/advanced-image-uploader/default/preview.1757762276819.png","pc":"ruixen.ui","tg":["image","modal","upload-download"]},{"id":"21st:ruixen.ui__ai-chat-input","t":"Ai chat input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ai-chat-input/default/preview.1757992112477.png","pc":"ruixen.ui","tg":["input","popover"]},{"id":"21st:ruixen.ui__aichat-component","t":"Aichat component","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/aichat-component/default/preview.1757871068715.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__alert-badge","t":"Alert badge","d":"The AlertBadge component is a modern, interactive notification badge designed for developers and dashboards. Unlike traditional toasts, it displays a live counter with alert messag","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ruixen.ui/alert-badge/default/preview.1757067361464.png","pc":"ruixen.ui","tg":["alert","badge","notification"]},{"id":"21st:ruixen.ui__animated-feature-spotlight3d","t":"Animated feature spotlight3d","d":"The AnimatedFeatureSpotlight3D component is a visually dynamic, Framer Motion–powered spotlight section designed to highlight key features or products—like a gift showcase—with smo","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/animated-feature-spotlight3d/default/preview.1759988456238.png","pc":"ruixen.ui","tg":["cta"]},{"id":"21st:ruixen.ui__animated-git-hub-button","t":"Animated git hub button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/animated-git-hub-button/default/preview.1753153492339.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__animated-highlight-text","t":"Animated highlight text","d":"inline highlights whose SVG icons draw themselves in on hover, with a pointer cursor and an image tooltip per word.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/animated-highlight-text/default/preview.1783079160449.png","pc":"ruixen.ui","tg":["link","tooltip"]},{"id":"21st:ruixen.ui__animated-link","t":"Animated link","d":"React animated link: Hover reveals an underline that wipes in from the left, the right, or grows from the center, while a diagonal arrow lifts into view.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"ruixen.ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ruixen.ui/animated-link/default/preview.1782197477919.png","pc":"ruixen.ui","tg":["link"]},{"id":"21st:ruixen.ui__animated-number-flip","t":"Animated number flip","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/animated-number-flip/default/preview.1758431723845.png","pc":"ruixen.ui","tg":["number"]},{"id":"21st:ruixen.ui__app-menu-bar","t":"App menu bar","d":"The AppMenuBar component is a versatile, fully-featured navigation menu designed for modern web applications. It combines a clean, horizontal menubar layout with intuitive nested m","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ruixen.ui","st":"indexed","u":18,"pl":"https://cdn.21st.dev/ruixen.ui/app-menu-bar/default/preview.1760588177198.png","pc":"ruixen.ui","tg":["dashboard"]},{"id":"21st:ruixen.ui__arc-preloader-hero","t":"Arc preloader hero","d":"A cycle of short declarative beats- Quiet, Sharp, Calm, Crafted - fades through a calm white surface, then a curved black curtain rises from below to reveal the landing. The bounda","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":5,"pl":"https://cdn.21st.dev/ruixen.ui/arc-preloader-hero/default/preview.1781853955195.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__arc-reveal-hero","t":"Arc reveal hero","d":"A cycle of short declarative beats: Quiet, Sharp, Calm, Crafted- fades through a calm white surface, then a curved black curtain rises from below to reveal the landing. The boundar","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/arc-reveal-hero/default/preview.1779866736521.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__audio-book-player","t":"Audio book player","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/audio-book-player/default/preview.1758699867233.png","pc":"ruixen.ui","tg":["slider"]},{"id":"21st:ruixen.ui__audio-timeline-with-chapters","t":"Audio timeline with chapters","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/audio-timeline-with-chapters/default/preview.1758703589868.png","pc":"ruixen.ui","tg":["chip","progress","timeline"]},{"id":"21st:ruixen.ui__aura-vision-hero-gradient","t":"Aura vision hero gradient","d":"AuraVision by Ruixen is a unique AI-powered component that lets users upload their photos and instantly discover the emotional and energetic impression they project. Merging deep l","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/aura-vision-hero-gradient/default/preview.1753119632845.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__aurora-flow","t":"Aurora flow","d":"The AuroraFlow component is a custom React background effect built using WebGL with OGL. It renders a smooth, animated aurora-like gradient that constantly shifts and flows, creati","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ruixen.ui/aurora-flow/default/preview.1758046624744.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__aurora-hero","t":"Aurora hero","d":"This component serves as a visually engaging hero section featuring a smooth and vibrant gradient background. It is designed to capture users’ attention immediately upon landing on","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/aurora-hero/default/preview.1753093923239.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__aurora-waves","t":"Aurora waves","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/aurora-waves/default/preview.1758048172723.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__auth-dialog","t":"Auth dialog","d":"This component is a combined Sign Up and Login modal built with ShadCN UI and React. It allows users to toggle between signing up and logging in without opening separate dialogs, p","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":34,"pl":"https://cdn.21st.dev/ruixen.ui/auth-dialog/default/preview.1755716755877.png","pc":"ruixen.ui","tg":["modal","sign-up"]},{"id":"21st:ruixen.ui__auth-showcase","t":"Auth showcase","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/auth-showcase/default/preview.1759770277077.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__auth-tabs-card","t":"Auth tabs card","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/auth-tabs-card/default/preview.1758659170234.png","pc":"ruixen.ui","tg":["form","sign-in","sign-up","tabs"]},{"id":"21st:ruixen.ui__avatar-notifications","t":"Avatar notifications","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/avatar-notifications/default/preview.1757268643996.png","pc":"ruixen.ui","tg":["notification","popover"]},{"id":"21st:ruixen.ui__avatar-smart-group","t":"Avatar smart group","d":"The Avatar Smart Group component is a versatile and reusable UI element designed to elegantly display a group of user profile images with interactive tooltips. It supports two layo","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"ruixen.ui","st":"indexed","u":30,"pl":"https://cdn.21st.dev/ruixen.ui/avatar-smart-group/default/preview.1760544505620.png","pc":"ruixen.ui","tg":["avatar","team","tooltip"]},{"id":"21st:ruixen.ui__badge-button-combo","t":"Badge button combo","d":"The Badge + Button Combo is a shadcn/ui component that combines a standard button with a floating badge to display status or counts, such as “New,” “Beta,” or numeric notifications","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ruixen.ui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/ruixen.ui/badge-button-combo/default/preview.1758561177969.png","pc":"ruixen.ui","tg":["badge","notification"]},{"id":"21st:ruixen.ui__badge-tabs","t":"Badge tabs","d":"The Badge Tabs component is a dynamic, interactive tab system that displays badges alongside each tab label, making it ideal for real-time dashboards, notifications, or admin panel","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ruixen.ui/badge-tabs/default/preview.1758466150268.png","pc":"ruixen.ui","tg":["dashboard","notification","tabs"]},{"id":"21st:ruixen.ui__behavioral-history-select","t":"Behavioral history select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/behavioral-history-select/default/preview.1758910283981.png","pc":"ruixen.ui","tg":["select"]},{"id":"21st:ruixen.ui__bottom-drawers","t":"Bottom drawers","d":"This component is a set of bottom-sliding drawers, each triggered by a separate button and containing different content such as a newsletter signup, feedback form, or contact form.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ruixen.ui/bottom-drawers/default/preview.1756143367948.png","pc":"ruixen.ui","tg":["form"]},{"id":"21st:ruixen.ui__browser-card","t":"Browser card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/browser-card/default/preview.1762964607593.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__calendar-lume","t":"Calendar lume","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/calendar-lume/default/preview.1758969585790.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__calendar-planner","t":"Calendar planner","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/calendar-planner/default/preview.1758925612962.png","pc":"ruixen.ui","tg":["calendar","date-picker"],"sc":21},{"id":"21st:ruixen.ui__calendar-scheduler","t":"Calendar scheduler","d":"The CalendarScheduler component is a streamlined scheduling interface that combines a calendar view with a scrollable list of interactive time slots in a single, card-based layout.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":78,"pl":"https://cdn.21st.dev/ruixen.ui/calendar-scheduler/default/preview.1758973993751.png","pc":"ruixen.ui","tg":["card","calendar","date-picker"]},{"id":"21st:ruixen.ui__calendar-twin","t":"Calendar twin","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/calendar-twin/default/preview.1758924784625.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__calendar-with-presets","t":"Calendar with presets","d":"This improved BetterCalendar component is a polished and modern variant of the default React DayPicker, styled strictly with shadcn/ui design principles. Instead of using harsh str","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":40,"pl":"https://cdn.21st.dev/ruixen.ui/calendar-with-presets/default/preview.1758958090329.png","pc":"ruixen.ui","tg":["calendar","date-picker","dashboard"]},{"id":"21st:ruixen.ui__capsule-tabs","t":"Capsule tabs","d":"This Scrollable Capsule Tabs component is designed to handle a large number of tabs elegantly. It displays a limited number of tabs at a time (visibleCount) and allows users to nav","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":5,"pl":"https://cdn.21st.dev/ruixen.ui/capsule-tabs/default/preview.1758464195216.png","pc":"ruixen.ui","tg":["navigation-menu","pagination","tabs"]},{"id":"21st:ruixen.ui__card-stack","t":"Card stack","d":"An interactive 3D card stack carousel with fan-out animation, drag gestures, and auto-advance support.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":382,"pl":"https://cdn.21st.dev/ruixen.ui/card-stack/default/preview.1767763046562.png","pc":"ruixen.ui","tg":["carousel","image"]},{"id":"21st:ruixen.ui__carousel3dselect","t":"Carousel3dselect","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/carousel3dselect/default/preview.1758911435787.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__case-studies","t":"Case studies","d":"This component is a pricing plan selector built with React and ShadCN UI. It displays three subscription options—Free, Pro, and Enterprise—each inside a styled card. The plans incl","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ruixen.ui","st":"indexed","u":153,"pl":"https://cdn.21st.dev/ruixen.ui/case-studies/default/preview.1755359638626.png","pc":"ruixen.ui","tg":["card","testimonials"]},{"id":"21st:ruixen.ui__centered-feedback-drawer","t":"Centered feedback drawer","d":"This component is a content-rich drawer that opens from the side, designed to keep the focus on the main content by centering it inside the drawer rather than stretching across the","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/centered-feedback-drawer/default/preview.1756142859672.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__chapter-scrubber","t":"Chapter scrubber","d":"A vertical rail of uniform ticks that magnify toward the cursor like a dock. The lines nearest the pointer rise on a spring-driven wave and a preview card describes the crest chapt","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/chapter-scrubber/default/preview.1784122138999.png","pc":"ruixen.ui","tg":["table","timeline"]},{"id":"21st:ruixen.ui__checklist-button","t":"Checklist button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/checklist-button/default/preview.1758648263376.png","pc":"ruixen.ui","sc":20},{"id":"21st:ruixen.ui__checkout-form","t":"Checkout form","d":"This CheckoutForm component is a modern, responsive checkout interface built with shadcn UI, Tailwind CSS, and Lucide icons. It presents a clean, card-based layout that guides user","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":51,"pl":"https://cdn.21st.dev/ruixen.ui/checkout-form/default/preview.1757275090196.png","pc":"ruixen.ui","tg":["form"]},{"id":"21st:ruixen.ui__chrono-select","t":"Chrono select","d":"The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSel","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ruixen.ui/chrono-select/default/preview.1758924114445.png","pc":"ruixen.ui","tg":["calendar","date-picker","form","popover"]},{"id":"21st:ruixen.ui__circular-radial-select","t":"Circular radial select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/circular-radial-select/default/preview.1758910880093.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__clean-tag-input","t":"Clean tag input","d":"This is a sleek, black-and-white tag input component where users can add multiple tags by typing and pressing Enter. Each tag is displayed as a rounded pill with subtle borders, an","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":30,"pl":"https://cdn.21st.dev/ruixen.ui/clean-tag-input/default/preview.1755967899933.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__cloud-watch-form","t":"Cloud watch form","d":"This Interactive Cartoon Form component is a playful, engaging form built with Next.js, TypeScript, and Shadcn UI. It features a cartoon face whose eyes follow the user’s cursor, c","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ruixen.ui/cloud-watch-form/default/preview.1760080688855.png","pc":"ruixen.ui","tg":["cursor","sign-up"]},{"id":"21st:ruixen.ui__color-emotion-select","t":"Color emotion select","d":"The Color-Emotion Semantic Select is a reusable UI component built with shadcn UI’s Select primitives that lets you visually map options to meaningful colors and emotions. Instead ","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ruixen.ui/color-emotion-select/default/preview.1758907534685.png","pc":"ruixen.ui","tg":["select"]},{"id":"21st:ruixen.ui__column-collaboration-table","t":"Column collaboration table","d":"This is a Column Collaboration Table built entirely with Shadcn UI components. It allows users to add and view comments directly on each column header, making it ideal for collabor","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":18,"pl":"https://cdn.21st.dev/ruixen.ui/column-collaboration-table/default/preview.1757840602905.png","pc":"ruixen.ui","tg":["popover","table"]},{"id":"21st:ruixen.ui__combined-featured-section","t":"Combined featured section","d":"The combined section component serves as a spotlight area to showcase the core strengths or highlights of our platform. It brings together key offerings","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ruixen.ui","st":"indexed","u":162,"pl":"https://cdn.21st.dev/ruixen.ui/combined-featured-section/default/preview.1754378338788.png","pc":"ruixen.ui","tg":["dashboard","features","map","notification"]},{"id":"21st:ruixen.ui__command-deck","t":"Command deck","k":"component","s":"21st","c":"navigation/command-palette","g":"navigation","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/command-deck/default/preview.1758917434598.png","pc":"ruixen.ui","sc":23},{"id":"21st:ruixen.ui__comparison-table","t":"Comparison table","d":"This component is a row comparison table with dynamic selection controls, designed using Shadcn UI. Each row in the table has a \"Compare\" button that toggles to \"Remove\" once selec","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"ruixen.ui","st":"indexed","u":53,"pl":"https://cdn.21st.dev/ruixen.ui/comparison-table/default/preview.1757836218819.png","pc":"ruixen.ui","tg":["comparison"]},{"id":"21st:ruixen.ui__confetti-button","t":"Confetti button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/confetti-button/default/preview.1758650413010.png","pc":"ruixen.ui","tg":["button"],"sc":21},{"id":"21st:ruixen.ui__confirmation-button","t":"Confirmation button","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/confirmation-button/default/preview.1758558526709.png","pc":"ruixen.ui","sc":16},{"id":"21st:ruixen.ui__constellation-dock","t":"Constellation dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/constellation-dock/default/preview.1758380572731.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__container-text-scroll","t":"Container text scroll","d":"The ContainerTextScroll component is a dynamic React/Next.js UI element designed to create visually engaging scroll-based animations for text content. It leverages framer-motion to","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ruixen.ui/container-text-scroll/default/preview.1760178308971.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__contributors-overview-table","t":"Contributors overview table","d":"The ContributorsOverviewTable component presents a clean, structured, and interactive summary of contributors within a team or project. Designed for clarity and ease of use, this t","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":48,"pl":"https://cdn.21st.dev/ruixen.ui/contributors-overview-table/default/preview.1749430453222.png","pc":"ruixen.ui","tg":["badge","dashboard","table","team"]},{"id":"21st:ruixen.ui__correct-number-input","t":"Correct number input","d":"This is a sleek, minimal number input with custom chevron buttons and a floating label. It hides the browser’s default arrows, keeps the label clean, and ensures 0 doesn’t overlap,","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/correct-number-input/default/preview.1755965925490.png","pc":"ruixen.ui","tg":["form","input"]},{"id":"21st:ruixen.ui__countdown-button","t":"Countdown button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/countdown-button/default/preview.1758566211533.png","pc":"ruixen.ui","sc":16},{"id":"21st:ruixen.ui__coverflow-carousel","t":"Coverflow carousel","d":"A rack of square covers with the perspective reversed. The centre card sits square to the viewer while the ones beside it swing their outer edges forward, so the rack opens toward ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/ruixen.ui/coverflow-carousel/default/preview.1785769945835-40fdf02e-f950-484c-aa20-a6b0993a08a7.png","pc":"ruixen.ui","tg":["card","carousel","slider"]},{"id":"21st:ruixen.ui__creat-account-form","t":"Creat account form","d":"This form component is designed as a clean and modern account creation interface that balances simplicity with professionalism. The use of a card layout with a subtle gradient back","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":60,"pl":"https://cdn.21st.dev/ruixen.ui/creat-account-form/default/preview.1757274294191.png","pc":"ruixen.ui","tg":["card","form","icon","sign-up"]},{"id":"21st:ruixen.ui__creative-card","t":"Creative card","d":"This is a modern, responsive chat card component built with React and Tailwind CSS, fully compatible with both light and dark modes. It features a textarea for user input, dynamic ","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/creative-card/default/preview.1755627632162.png","pc":"ruixen.ui","tg":["input","textarea"]},{"id":"21st:ruixen.ui__credit-card-dialog","t":"Credit card dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/credit-card-dialog/default/preview.1759040617714.png","pc":"ruixen.ui","tg":["modal"]},{"id":"21st:ruixen.ui__credit-card-hero","t":"Credit card hero","d":"The CreditCardHero component is a premium advertising-style showcase designed for modern fintech or banking landing pages. At its core, it combines clean, centered marketing conten","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":27,"pl":"https://cdn.21st.dev/ruixen.ui/credit-card-hero/default/preview.1759045447240.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__custom-alert","t":"Custom alert","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/custom-alert/default/preview.1757270530254.png","pc":"ruixen.ui","tg":["alert"]},{"id":"21st:ruixen.ui__daily-timeline-scheduler","t":"Daily timeline scheduler","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/daily-timeline-scheduler/default/preview.1757758441803.png","pc":"ruixen.ui","tg":["date-picker","popover","timeline"],"sc":25},{"id":"21st:ruixen.ui__daily-tracker-dialog","t":"Daily tracker dialog","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/daily-tracker-dialog/default/preview.1755717810882.png","pc":"ruixen.ui","tg":["checkbox","modal","progress"],"sc":21},{"id":"21st:ruixen.ui__date-time-input","t":"Date time input","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/date-time-input/default/preview.1758972761480.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__date-time-picker","t":"Date time picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/date-time-picker/default/preview.1757753624868.png","pc":"ruixen.ui","tg":["date-picker","dropdown"]},{"id":"21st:ruixen.ui__dock","t":"Dock","d":"This Dock component is a modern, glassmorphic navigation bar inspired by the elegance of macOS but with a unique twist. Instead of sitting flat, the dock is displayed with a slight","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":218,"pl":"https://cdn.21st.dev/ruixen.ui/dock/default/preview.1758168876108.png","pc":"ruixen.ui","tg":["dock","tooltip"]},{"id":"21st:ruixen.ui__dock-morph","t":"Dock morph","d":"This DockMorph component is a modern, customizable navigation bar inspired by macOS but redesigned with a futuristic, morphic-glass aesthetic. It stays fixed to the screen — at the","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":79,"pl":"https://cdn.21st.dev/ruixen.ui/dock-morph/default/preview.1758251287542.png","pc":"ruixen.ui","tg":["dock","tooltip"]},{"id":"21st:ruixen.ui__docks","t":"Docks","d":"This minimal and responsive theme toggle component lets users effortlessly switch between Light and Dark modes while offering quick access to settings. Designed with accessibility ","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":70,"pl":"https://cdn.21st.dev/ruixen.ui/docks/default/preview.1749226756628.png","pc":"ruixen.ui","tg":["dock"]},{"id":"21st:ruixen.ui__doctor-live-chat-card","t":"Doctor live chat card","d":"A modern, responsive UI component to showcase a doctor’s profile for live consultation. It highlights real-time availability, rating, specialty, and enables patients to instantly j","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ruixen.ui","st":"rated","u":10,"pl":"https://cdn.21st.dev/ruixen.ui/doctor-live-chat-card/default/preview.1749321461910.png","pc":"ruixen.ui","tg":["profile"],"sc":17},{"id":"21st:ruixen.ui__drag-and-drop-tabs","t":"Drag and drop tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/drag-and-drop-tabs/default/preview.1758472478572.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__drawer-inner-content","t":"Drawer inner content","d":"This component demonstrates a reusable drawer system that can slide in from any direction — top, right, bottom, or left. Instead of duplicating content for each drawer, a shared Dr","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ruixen.ui/drawer-inner-content/default/preview.1756142077433.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__drilldown-menu","t":"Drilldown menu","d":"A list that drills into itself. The row you click stays put, fades to a grey breadcrumb with a return arrow, and its children arrive one indent deeper — no sliding panels.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ruixen.ui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/ruixen.ui/drilldown-menu/default/preview.1785251713900-27409e75-33a6-49d6-afb4-f944f0f2d99f.png","pc":"ruixen.ui","tg":["dropdown","menu"]},{"id":"21st:ruixen.ui__dropdown-multi-calendar","t":"Dropdown multi calendar","d":"The DropdownMultiCalendar is a powerful and user-friendly date selection component that enhances the traditional multi-date calendar with intuitive navigation controls. Built entir","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/dropdown-multi-calendar/default/preview.1758990466880.png","pc":"ruixen.ui","tg":["badge","card","calendar","date-picker"]},{"id":"21st:ruixen.ui__dropdown-range-date-picker","t":"Dropdown range date picker","d":"The DropdownRangeDatePicker is a popover-based date range selection component that combines intuitive navigation with a compact input interface. Built with shadcn/ui and react-day-","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ruixen.ui","st":"indexed","u":64,"pl":"https://cdn.21st.dev/ruixen.ui/dropdown-range-date-picker/default/preview.1758992494209.png","pc":"ruixen.ui","tg":["calendar","date-picker","dropdown","popover"]},{"id":"21st:ruixen.ui__dual-tone-rain-background","t":"Dual tone rain background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/dual-tone-rain-background/default/preview.1758190518089.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__dynamic-select","t":"Dynamic select","d":"This component provides a role-aware, dependent dropdown system where the second dropdown adapts automatically based on the first selection and the user’s role. It’s clean, reusabl","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/dynamic-select/default/preview.1758897583784.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__dynamic-status-button","t":"Dynamic status button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/dynamic-status-button/default/preview.1758651690136.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__elite-plan-card","t":"Elite plan card","d":"The ElitePlanCard is a sleek and interactive UI component designed to showcase premium offerings, subscription tiers, or featured products in a visually compelling way. It combines","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","u":74,"pl":"https://cdn.21st.dev/ruixen.ui/elite-plan-card/default/preview.1759076199761.png","pc":"ruixen.ui","tg":["pricing-section"]},{"id":"21st:ruixen.ui__emoji-radio-group","t":"Emoji radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/emoji-radio-group/default/preview.1758994206276.png","pc":"ruixen.ui","tg":["radio-group"]},{"id":"21st:ruixen.ui__event-aquarium-calendar","t":"Event aquarium calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/event-aquarium-calendar/default/preview.1758812934902.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__event-calendar","t":"Event calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/event-calendar/default/preview.1758738981144.png","pc":"ruixen.ui","tg":["calendar"]},{"id":"21st:ruixen.ui__event-constellation-calendar","t":"Event constellation calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/event-constellation-calendar/default/preview.1758799830906.png","pc":"ruixen.ui","tg":["calendar","popover"]},{"id":"21st:ruixen.ui__event-path-calendar","t":"Event path calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/event-path-calendar/default/preview.1758806641535.png","pc":"ruixen.ui","tg":["calendar"]},{"id":"21st:ruixen.ui__event-scheduler","t":"Event scheduler","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/event-scheduler/default/preview.1757754963391.png","pc":"ruixen.ui","tg":["calendar","date-picker","popover"]},{"id":"21st:ruixen.ui__expandable-content-button","t":"Expandable content button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/expandable-content-button/default/preview.1758560791994.png","pc":"ruixen.ui","sc":16},{"id":"21st:ruixen.ui__fade-slide-tabs","t":"Fade slide tabs","d":"The Fade + Slide Tabs component elevates traditional tab navigation by animating the tab content with smooth fade and slide effects. When switching tabs, the previous content gentl","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":35,"pl":"https://cdn.21st.dev/ruixen.ui/fade-slide-tabs/default/preview.1758453405926.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__falling-symbols-background","t":"Falling symbols background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/falling-symbols-background/default/preview.1758083065585.png","pc":"ruixen.ui","tg":["background"]},{"id":"21st:ruixen.ui__faqchat-accordion","t":"Faqchat accordion","d":"A FAQ styled as a chat conversation, questions appear as sent message bubbles, answers reply with typing dots that morph into response bubbles.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/faqchat-accordion/default/preview.1771483122048.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__faqsection","t":"Faqsection","d":"The FAQSection component is a fully responsive and configurable FAQ layout built with Shadcn UI and Tailwind CSS. It features a clean two-column grid with collapsible accordions, a","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"ruixen.ui","st":"indexed","u":87,"pl":"https://cdn.21st.dev/ruixen.ui/faqsection/default/preview.1760638768341.png","pc":"ruixen.ui","tg":["accordion","faq"]},{"id":"21st:ruixen.ui__feature-accordion-section","t":"Feature accordion section","d":"This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, image","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","u":36,"pl":"https://cdn.21st.dev/ruixen.ui/feature-accordion-section/default/preview.1755338980061.png","pc":"ruixen.ui","tg":["accordion","features","list"]},{"id":"21st:ruixen.ui__feature-highlight-pro-card","t":"Feature highlight pro card","d":"The Floating FeatureHighlightCard is a modern, animated UI component crafted with Framer Motion, TypeScript, and Tailwind CSS to deliver an engaging visual experience. Its standout","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/feature-highlight-pro-card/default/preview.1759989408722.png","pc":"ruixen.ui","tg":["features"]},{"id":"21st:ruixen.ui__feature-section","t":"Feature section","d":"Here are three lines you can use for this Featured Section:\n\nA clean two-column layout highlighting features with icons and descriptions on the left, and a smooth scrollable option","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","u":175,"pl":"https://cdn.21st.dev/ruixen.ui/feature-section/default/preview.1774363333820.png","pc":"ruixen.ui","tg":["features","scroll-area"]},{"id":"21st:ruixen.ui__feature-section-1","t":"Feature section 1","d":"21st.dev empowers developers with modern tools and scalable infrastructure to build, ship, and grow faster. Our platform combines open-source innovation with enterprise reliability","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ruixen.ui","st":"indexed","u":35,"pl":"https://cdn.21st.dev/ruixen.ui/feature-section-1/default/preview.1755360768740.png","pc":"ruixen.ui","tg":["footer","link"]},{"id":"21st:ruixen.ui__feature-showcase","t":"Feature showcase","d":"The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left p","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","u":223,"pl":"https://cdn.21st.dev/ruixen.ui/feature-showcase/default/preview.1761152138732.png","pc":"ruixen.ui","tg":["accordion","cta","features","tabs"]},{"id":"21st:ruixen.ui__featured-crm-demo-section","t":"Featured crm demo section","d":"This component displays a CRM preview card that can switch between a thumbnail image and an autoplaying video.\nIt uses a play button overlay that appears on hover to start the vide","k":"component","s":"21st","c":"media/player","g":"media","a":"ruixen.ui","st":"rated","u":74,"pl":"https://cdn.21st.dev/ruixen.ui/featured-crm-demo-section/default/preview.1755023065868.png","pc":"ruixen.ui","tg":["dashboard","video"],"sc":17},{"id":"21st:ruixen.ui__featured-section-stats","t":"Featured section stats","d":"This component showcases a modern CRM/dashboard statistics section with a clean, responsive layout.\nIt highlights key business metrics alongside a smooth blue-gradient area chart f","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ruixen.ui","st":"indexed","u":112,"pl":"https://cdn.21st.dev/ruixen.ui/featured-section-stats/default/preview.1754766964769.png","pc":"ruixen.ui","tg":["dashboard","features","stat"]},{"id":"21st:ruixen.ui__features-detail","t":"Features detail","d":"This FeaturesDetail component showcases product features through an animated, auto-sliding dashboard carousel with smooth GSAP transitions.\nIt combines scroll-triggered effects and","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","u":123,"pl":"https://cdn.21st.dev/ruixen.ui/features-detail/default/preview.1754834170022.png","pc":"ruixen.ui","tg":["carousel","dashboard","features","scroll-area"]},{"id":"21st:ruixen.ui__file-tree","t":"File tree","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/file-tree/default/preview.1757432506721.png","pc":"ruixen.ui","tg":["file-tree"]},{"id":"21st:ruixen.ui__file-tree-1","t":"File tree 1","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/file-tree-1/default/preview.1757435026316.png","pc":"ruixen.ui","tg":["file-tree"]},{"id":"21st:ruixen.ui__file-upload","t":"File upload","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/file-upload/default/preview.1755958894925.png","pc":"ruixen.ui","tg":["search","select","table","upload-download"]},{"id":"21st:ruixen.ui__fixed-header-footer-table","t":"Fixed header footer table","d":"This Fixed Header and Footer Table component is a highly practical and user-friendly UI element built with Shadcn UI. It ensures that the table header remains fixed at the top and ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ruixen.ui","st":"indexed","u":47,"pl":"https://cdn.21st.dev/ruixen.ui/fixed-header-footer-table/default/preview.1757821020511.png","pc":"ruixen.ui","tg":["scroll-area"]},{"id":"21st:ruixen.ui__flash-sale-banner","t":"Flash sale banner","d":"This component is a clean, responsive flash sale banner with a live countdown timer, headline, description, and call-to-action button. It shows remaining days, hours, minutes, and ","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/flash-sale-banner/default/preview.1755969031983.png","pc":"ruixen.ui","tg":["cta"]},{"id":"21st:ruixen.ui__flexi-filter-table","t":"Flexi filter table","d":"This Super Mega Filter component is designed to provide a clean yet powerful way to filter large sets of data. Built with shadcn UI, it combines dropdowns, checkboxes, and keyword ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":78,"pl":"https://cdn.21st.dev/ruixen.ui/flexi-filter-table/default/preview.1757834897063.png","pc":"ruixen.ui","tg":["checkbox","date-picker","search","table"]},{"id":"21st:ruixen.ui__flip-card","t":"Flip card","d":"The Flip Card: Info + Login component is a versatile and interactive card that combines branding, guidance, and authentication in a single UI element. The front side can display a ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/ruixen.ui/flip-card/default/preview.1758687507412.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__flip-clock","t":"Flip clock","k":"component","s":"21st","c":"media/icon","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/flip-clock/default/preview.1755900940333.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__floating-icons-loader","t":"Floating icons loader","d":"The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this c","k":"component","s":"21st","c":"media/icon","g":"media","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/floating-icons-loader/default/preview.1785370086615-e9f785fb-e8cc-4afc-8317-e76994e5a951.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__floating-input","t":"Floating input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/floating-input/default/preview.1757011777436.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__floating-nav","t":"Floating nav","d":"This is a responsive floating bottom navigation bar built with React and Framer Motion. It displays multiple menu items with icons and labels, adapting to screen size by showing ic","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ruixen.ui","st":"indexed","u":68,"pl":"https://cdn.21st.dev/ruixen.ui/floating-nav/default/preview.1755842178208.png","pc":"ruixen.ui","tg":["navigation-menu"]},{"id":"21st:ruixen.ui__fluid-blob-select","t":"Fluid blob select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/fluid-blob-select/default/preview.1758911700515.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__flux-orb","t":"Flux orb","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/flux-orb/default/preview.1762969510152.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__footer-1","t":"Footer 1","d":"The Footer component is a fully configurable, responsive, and theme-aware UI element built with Next.js and Shadcn-style design. It supports dynamic navigation columns, customizabl","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ruixen.ui","st":"indexed","u":37,"pl":"https://cdn.21st.dev/ruixen.ui/footer-1/default/preview.1760592478840.png","pc":"ruixen.ui","tg":["footer"]},{"id":"21st:ruixen.ui__futuristic-nav","t":"Futuristic nav","d":"This is a futuristic floating navigation bar designed for modern web and mobile interfaces. It features a glassmorphism pill-shaped container, with a glowing gradient indicator beh","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","u":130,"pl":"https://cdn.21st.dev/ruixen.ui/futuristic-nav/default/preview.1755844532675.png","pc":"ruixen.ui","tg":["tooltip"]},{"id":"21st:ruixen.ui__gallery-hover-carousel","t":"Gallery hover carousel","d":"This component is a dynamic, interactive gallery built with Shadcn UI and Tailwind CSS. Each card initially displays a full-background image, which smoothly shrinks to the top half","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":212,"pl":"https://cdn.21st.dev/ruixen.ui/gallery-hover-carousel/default/preview.1755353467967.png","pc":"ruixen.ui","tg":["carousel","features","gallery"]},{"id":"21st:ruixen.ui__gamified-login-card","t":"Gamified login card","d":"The Gamified Login Card is a playful and interactive login component designed to boost user engagement while maintaining a clean, modern look. Built strictly with shadcn UI compone","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ruixen.ui/gamified-login-card/default/preview.1758658592368.png","pc":"ruixen.ui","tg":["sign-in"]},{"id":"21st:ruixen.ui__globe","t":"Globe","d":"This is a self-contained React component that displays a rotating globe with twinkling stars using Tailwind CSS. It features smooth animations for both the globe and stars, a glowi","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/globe/default/preview.1755628836402.png","pc":"ruixen.ui","tg":["globe"]},{"id":"21st:ruixen.ui__globe-feature-section","t":"Globe feature section","d":"The Featured_05 component is a modern hero section designed to spotlight Ruixen UI’s core value proposition. On the left, it presents a bold heading and supporting text that commun","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"ruixen.ui","st":"indexed","u":382,"pl":"https://cdn.21st.dev/ruixen.ui/globe-feature-section/default/preview.1754419159277.png","pc":"ruixen.ui","tg":["cta","features","globe"]},{"id":"21st:ruixen.ui__glow-tree","t":"Glow tree","d":"The Glow Tree component is a visually engaging and interactive file explorer built with Shadcn UI styling utilities and lucide-react icons. It displays hierarchical data, such as f","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ruixen.ui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ruixen.ui/glow-tree/default/preview.1757436683099.png","pc":"ruixen.ui","tg":["file-tree"]},{"id":"21st:ruixen.ui__gooey-dock","t":"Gooey dock","d":"This Dock component is a modern, interactive navigation bar inspired by the macOS-style dock, built with React, Framer Motion, and shadcn/ui. It displays a row of circular icon but","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ruixen.ui/gooey-dock/default/preview.1758352605417.png","pc":"ruixen.ui","tg":["dock","tooltip"]},{"id":"21st:ruixen.ui__gooey-pagination","t":"Gooey pagination","d":"This Liquid Gooey Smart Pagination component elevates traditional pagination into an interactive, visually engaging experience. Each page is represented by a dot, with the active d","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/gooey-pagination/default/preview.1758433361654.png","pc":"ruixen.ui","tg":["pagination"]},{"id":"21st:ruixen.ui__google2fadialog","t":"Google2fadialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/google2fadialog/default/preview.1760719458400.png","pc":"ruixen.ui","sc":20},{"id":"21st:ruixen.ui__gradient-bold-card","t":"Gradient bold card","d":"this component is animated with modern glass effect and moving glowing border.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":36,"pl":"https://cdn.21st.dev/ruixen.ui/gradient-bold-card/default/preview.1755624994936.png","pc":"ruixen.ui","tg":["card","border"]},{"id":"21st:ruixen.ui__gradient-chat-input","t":"Gradient chat input","d":"React AI chat input — a minimal message field that streams animated chat bubbles and reveals a blurred spectrum glow once a conversation starts.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ruixen.ui","st":"rated","u":9,"pl":"https://cdn.21st.dev/ruixen.ui/gradient-chat-input/default/preview.1782977566123.png","pc":"ruixen.ui","tg":["input"],"sc":24},{"id":"21st:ruixen.ui__gradient-pricing-section","t":"Gradient pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/gradient-pricing-section/default/preview.1754811286702.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__gradient-reveal-text","t":"Gradient reveal text","d":"GradientRevealText is an interactive and visually appealing text component designed for modern web interfaces. It allows text to be highlighted with a smooth gradient reveal in mul","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ruixen.ui/gradient-reveal-text/default/preview.1758919920747.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__health-stat-card","t":"Health stat card","d":"The HealthStatCard component is a modern, reusable, and fully customizable Shadcn UI–based card designed for displaying health and performance metrics in an engaging, data-driven w","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/health-stat-card/default/preview.1760023289997.png","pc":"ruixen.ui","tg":["dashboard","tooltip"]},{"id":"21st:ruixen.ui__heatmap-calendar","t":"Heatmap calendar","d":"The Heatmap Calendar component is a visually intuitive way to track daily activity using Shadcn UI components. Each day of the current month is displayed as a block whose color int","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ruixen.ui","st":"rated","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/heatmap-calendar/default/preview.1758739515404.png","pc":"ruixen.ui","tg":["popover"],"sc":20},{"id":"21st:ruixen.ui__hero","t":"Hero","d":"This Hero component is a visually engaging introduction section designed for an animal-themed website. It features a soft, curved light-green gradient background that gently fades ","k":"component","s":"21st","c":"media/player","g":"media","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/hero/default/preview.1755899731753.png","pc":"ruixen.ui","tg":["video"]},{"id":"21st:ruixen.ui__hero-page","t":"Hero page","d":"This component is a modern hero section designed to immediately capture attention and showcase dynamic visual content. The heading combines text and an animated image card to creat","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/hero-page/default/preview.1758874356322.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__hero-preview-walls","t":"Hero preview walls","d":"This component is a responsive Hero Section with an animated Card Stack overlay, designed to showcase key features or testimonials in a dynamic and visually engaging way. Built wit","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/hero-preview-walls/default/preview.1786147544374.webp","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__hero-section-glass-web","t":"Hero section glass web","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/hero-section-glass-web/default/preview.1761148970214.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__hero-section-with-gradient","t":"Hero section with gradient","d":"This component is a visually elegant and content-focused hero section designed for the Ruixen brand, featuring a soft pastel gradient background that transitions from white to peac","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":87,"pl":"https://cdn.21st.dev/ruixen.ui/hero-section-with-gradient/default/preview.1753117321340.png","pc":"ruixen.ui","tg":["dashboard","cta","hero"]},{"id":"21st:ruixen.ui__hero-section06","t":"Hero section06","d":"This HeroSection_06 component is a highly interactive and visually dynamic landing section built with Next.js, Tailwind CSS, and custom animations. It combines eye-catching element","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":40,"pl":"https://cdn.21st.dev/ruixen.ui/hero-section06/default/preview.1753806836869.png","pc":"ruixen.ui","tg":["ai-chat","badge","cta","hero"]},{"id":"21st:ruixen.ui__home-section","t":"Home section","d":"This HomeSection component is a responsive, GSAP-animated carousel section that showcases a series of cards with smooth scaling and directional transitions.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/home-section/default/preview.1754635773267.png","pc":"ruixen.ui","tg":["carousel"]},{"id":"21st:ruixen.ui__hover-gradient-nav-bar","t":"Hover gradient nav bar","d":"ChatGPT said:\n\nThis MenuBar component is a modern, animated bottom navigation bar built with React, Tailwind CSS, Framer Motion, and Lucide icons. It stays fixed at the bottom of t","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":98,"pl":"https://cdn.21st.dev/ruixen.ui/hover-gradient-nav-bar/default/preview.1755833753607.png","pc":"ruixen.ui","tg":["dock","menu"]},{"id":"21st:ruixen.ui__hover-play-card","t":"Hover play card","d":"This HoverPlay Video Card component is a clean and interactive media element built with Shadcn UI. It enhances the video viewing experience by blending hover and click interactions","k":"component","s":"21st","c":"media/player","g":"media","a":"ruixen.ui","st":"indexed","u":74,"pl":"https://cdn.21st.dev/ruixen.ui/hover-play-card/default/preview.1757867496156.png","pc":"ruixen.ui","tg":["video"]},{"id":"21st:ruixen.ui__hover-preview-button","t":"Hover preview button","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/hover-preview-button/default/preview.1758651245603.png","pc":"ruixen.ui","tg":["card","link","tooltip"],"sc":15},{"id":"21st:ruixen.ui__hybrid-tabs","t":"Hybrid tabs","d":"The Icon + Label Hybrid Tabs component combines compactness with clarity by showing only icons for inactive tabs and expanding the active tab to reveal both the icon and its label.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/ruixen.ui/hybrid-tabs/default/preview.1758452912190.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__icon-grid-button","t":"Icon grid button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/icon-grid-button/default/preview.1758563354602.png","pc":"ruixen.ui","tg":["button","dropdown","grid"],"sc":17},{"id":"21st:ruixen.ui__icon-label-subtext-button","t":"Icon label subtext button","d":"The IconLabelSubtextButton is a custom shadcn/ui-based React component designed for actions that need extra context beyond a single label. Unlike a standard button, it combines an ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ruixen.ui/icon-label-subtext-button/default/preview.1758554993292.png","pc":"ruixen.ui","tg":["badge","button","spinner","tooltip"]},{"id":"21st:ruixen.ui__icon-pagination","t":"Icon pagination","d":"This Icon-Based Contextual Pagination component transforms traditional pagination into an interactive, visually intuitive experience. Instead of showing just numbers, each page is ","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/icon-pagination/default/preview.1758446482275.png","pc":"ruixen.ui","tg":["pagination","tooltip"]},{"id":"21st:ruixen.ui__identity-verification-dialog","t":"Identity verification dialog","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/identity-verification-dialog/default/preview.1759041374424.png","pc":"ruixen.ui","tg":["modal"],"sc":23},{"id":"21st:ruixen.ui__image-card-fan","t":"Image card fan","d":"A fanned hand of large image cards. Click one and it lifts out of the hand while its title and description settle in on either side: one card out at a time.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/image-card-fan/default/preview.1785158571173-61c02b67-1a63-4629-92ca-12c52e0bb309.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__image-cropper","t":"Image cropper","d":"This Image Cropper component is a highly interactive and user-friendly tool built entirely with shadcn UI and React. It allows users to upload any image and crop it with precision ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ruixen.ui","st":"indexed","u":70,"pl":"https://cdn.21st.dev/ruixen.ui/image-cropper/default/preview.1757761300922.png","pc":"ruixen.ui","tg":["image","select","slider","upload-download"]},{"id":"21st:ruixen.ui__image-stream-hero","t":"Image stream hero","d":"Two rails of images ride out of the vanishing point at the centre and sweep to both edges, growing and turning as they approach. Perspective does the sweep and the growth at once, ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/image-stream-hero/default/preview.1786457825693-aec7ef9e-26de-4f80-96a2-74ee9afaa09a.png","pc":"ruixen.ui","tg":["carousel","hero","image"]},{"id":"21st:ruixen.ui__inbox-calendar","t":"Inbox calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/inbox-calendar/default/preview.1758803129460.png","pc":"ruixen.ui","tg":["card","calendar","date-picker","list"]},{"id":"21st:ruixen.ui__info-cards-table","t":"Info cards table","d":"This component is a clean, responsive card layout designed to showcase different sections in a structured way. Each card is styled with subtle borders (border border-gray-200 dark:","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ruixen.ui/info-cards-table/default/preview.1755707387921.png","pc":"ruixen.ui","tg":["comparison","grid","table"]},{"id":"21st:ruixen.ui__inline-analytics-table","t":"Inline analytics table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/inline-analytics-table/default/preview.1757839975232.png","pc":"ruixen.ui","tg":["data-visualization","dashboard","table"]},{"id":"21st:ruixen.ui__inline-copy-input","t":"Inline copy input","d":"This is a modern, pill-shaped copy-to-clipboard input with an inline button. It provides instant visual feedback by changing the background when copied, and is fully minimal and bl","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/inline-copy-input/default/preview.1755966955158.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__input-with-select","t":"Input with select","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/input-with-select/default/preview.1756917192391.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__integration-hero","t":"Integration hero","d":"The IntegrationHero component is a visually engaging section designed to showcase integrations with popular tools. It features two horizontal rows of app icons that continuously sc","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"ruixen.ui","st":"indexed","u":232,"pl":"https://cdn.21st.dev/ruixen.ui/integration-hero/default/preview.1755435122823.png","pc":"ruixen.ui","tg":["cta","marquee"]},{"id":"21st:ruixen.ui__integrations-section","t":"Integrations section","d":"This component is a hero section for RUIXEN UI that introduces the product with a clear heading, supporting text, and call-to-action buttons.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ruixen.ui","st":"indexed","u":143,"pl":"https://cdn.21st.dev/ruixen.ui/integrations-section/default/preview.1774362714667.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__interactive-button","t":"Interactive button","d":"A modern interactive button that dynamically changes its background color when hovered over, focused, or clicked. This enhances user experience by providing immediate visual feedba","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ruixen.ui/interactive-button/default/preview.1749230119272.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__interactive-image-gallery","t":"Interactive image gallery","d":"The InteractiveImageGallery component is a dynamic, visually engaging layout designed to display images and accompanying text cards in a randomized, floating arrangement. Each time","k":"component","s":"21st","c":"media/gallery","g":"media","a":"ruixen.ui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ruixen.ui/interactive-image-gallery/default/preview.1760797359909.png","pc":"ruixen.ui","tg":["gallery"]},{"id":"21st:ruixen.ui__iris-lens-card","t":"Iris lens card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/iris-lens-card/default/preview.1763055307245.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__job-card","t":"Job card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/job-card/default/preview.1757382121379.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__job-slider","t":"Job slider","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/job-slider/default/preview.1759939067812.png","pc":"ruixen.ui","tg":["ai-chat","carousel"]},{"id":"21st:ruixen.ui__launch-roadmap","t":"Launch roadmap","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/launch-roadmap/default/preview.1760784668552.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__live-preview-style-select","t":"Live preview style select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/live-preview-style-select/default/preview.1758909455534.png","pc":"ruixen.ui","tg":["dropdown","select"]},{"id":"21st:ruixen.ui__load-ripple","t":"Load ripple","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/load-ripple/default/preview.1759081053814.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__loader","t":"Loader","d":"This React component renders a compact and stylish animated loader using Tailwind CSS and inline keyframes. The loader starts as a square that smoothly transforms","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/loader/default/preview.1753162548119.png","pc":"ruixen.ui","tg":["spinner"]},{"id":"21st:ruixen.ui__loading-circle","t":"Loading circle","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/loading-circle/default/preview.1759080509818.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__login-card","t":"Login card","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/login-card/default/preview.1758657184799.png","pc":"ruixen.ui","tg":["form","sign-in"]},{"id":"21st:ruixen.ui__mac-laptop-screen","t":"Mac laptop screen","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/mac-laptop-screen/default/preview.1758473873535.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__magic-tree","t":"Magic tree","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/magic-tree/default/preview.1757436146957.png","pc":"ruixen.ui","tg":["file-tree"]},{"id":"21st:ruixen.ui__magnetic-dock","t":"Magnetic dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/magnetic-dock/default/preview.1758379943577.png","pc":"ruixen.ui","tg":["dock"]},{"id":"21st:ruixen.ui__magnetic-tabs","t":"Magnetic tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/magnetic-tabs/default/preview.1758455958520.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__mail-checker-input","t":"Mail checker input","d":"This component is a modern email input field that dynamically shows a profile avatar (via Gravatar) as the user types their email. If no valid email is entered, it displays a place","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/mail-checker-input/default/preview.1755965704723.png","pc":"ruixen.ui","tg":["avatar","form","input"]},{"id":"21st:ruixen.ui__mesh-wave-hero","t":"Mesh wave hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/mesh-wave-hero/default/preview.1758048742629.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__minimal-payment-modal","t":"Minimal payment modal","d":"This component is a minimal and responsive payment modal that allows users to select a subscription plan and enter their card details to complete the payment. The selected plan dyn","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/minimal-payment-modal/default/preview.1755716674029.png","pc":"ruixen.ui","tg":["modal"]},{"id":"21st:ruixen.ui__minimisable-table","t":"Minimisable table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/minimisable-table/default/preview.1757839056939.png","pc":"ruixen.ui","tg":["dashboard","table"]},{"id":"21st:ruixen.ui__modern-android","t":"Modern android","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/modern-android/default/preview.1758477609319.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__modern-card-input","t":"Modern card input","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/modern-card-input/default/preview.1757013663130.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__modern-payment-form","t":"Modern payment form","d":"This modern Payment Modal UI component presents a sleek and user-friendly design for selecting payment options. With clear buttons for different payment methods like PayPal, users ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":73,"pl":"https://cdn.21st.dev/ruixen.ui/modern-payment-form/default/preview.1753152426285.png","pc":"ruixen.ui","tg":["card","form","input"]},{"id":"21st:ruixen.ui__monthly-heatmap-calendar","t":"Monthly heatmap calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/monthly-heatmap-calendar/default/preview.1757759493231.png","pc":"ruixen.ui","tg":["calendar","popover"]},{"id":"21st:ruixen.ui__morphing-page-dots","t":"Morphing page dots","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/morphing-page-dots/default/preview.1758430976811.png","pc":"ruixen.ui","tg":["navigation-menu","pagination"]},{"id":"21st:ruixen.ui__mouse-spark","t":"Mouse spark","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/mouse-spark/default/preview.1760121030352.png","pc":"ruixen.ui","tg":["cursor"]},{"id":"21st:ruixen.ui__multi-dimensional-select","t":"Multi dimensional select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/multi-dimensional-select/default/preview.1758898924842.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__multi-media-testimonial","t":"Multi media testimonial","d":"The TestimonialCard component is a responsive, theme-adaptive UI element built with shadcn/ui that elegantly displays client testimonials. It supports text, images, and videos with","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ruixen.ui","st":"indexed","u":44,"pl":"https://cdn.21st.dev/ruixen.ui/multi-media-testimonial/default/preview.1762672030904.png","pc":"ruixen.ui","tg":["testimonials","video"]},{"id":"21st:ruixen.ui__multi-month-calendar","t":"Multi month calendar","d":"This Multi-Month Calendar component is a fully responsive, theme-aware date picker built on top of React DayPicker and styled with shadcn/ui. It supports both single-date selection","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":39,"pl":"https://cdn.21st.dev/ruixen.ui/multi-month-calendar/default/preview.1758954438006.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__multi-orbit-semi-circle","t":"Multi orbit semi circle","d":"This component renders three concentric semi-circle orbits populated with app icons that display tooltips on hover.\nIt includes a large blurred radial gradient in the background, f","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","u":94,"pl":"https://cdn.21st.dev/ruixen.ui/multi-orbit-semi-circle/default/preview.1755063927613.png","pc":"ruixen.ui","tg":["tooltip"]},{"id":"21st:ruixen.ui__multi-select-calendar-card","t":"Multi select calendar card","d":"The MultiSelectCalendarCard is a modern, interactive date selection component that extends the functionality of a traditional calendar by supporting multiple date selections with a","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ruixen.ui/multi-select-calendar-card/default/preview.1758988559179.png","pc":"ruixen.ui","tg":["calendar","chip","date-picker","select"]},{"id":"21st:ruixen.ui__multi-state-morph-button","t":"Multi state morph button","d":"The Multi-State Morphing Button is a highly interactive and practical component built with shadcn UI. Unlike a standard submit button, it provides clear visual feedback for multipl","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ruixen.ui/multi-state-morph-button/default/preview.1758652410923.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__multi-step-button","t":"Multi step button","d":"The Multi-Step Button is a shadcn/ui component that guides users through a sequence of actions by updating its label at each step. It’s perfect for multi-stage processes such as fo","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ruixen.ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ruixen.ui/multi-step-button/default/preview.1758562352047.png","pc":"ruixen.ui","tg":["steps"]},{"id":"21st:ruixen.ui__multi-step-login","t":"Multi step login","d":"The Multi-Step Login component is a clean, user-friendly authentication flow built entirely with shadcn UI. By splitting login into three distinct steps—email entry, password or OT","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/multi-step-login/default/preview.1758654232299.png","pc":"ruixen.ui","tg":["form","steps"]},{"id":"21st:ruixen.ui__music-equalizer-upload","t":"Music equalizer upload","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/music-equalizer-upload/default/preview.1758737306224.png","pc":"ruixen.ui","tg":["progress","upload-download"]},{"id":"21st:ruixen.ui__navbar","t":"Navbar","d":"This MinimalChatBox component is a lightweight, interactive chat interface built with React, Framer Motion, and Tailwind. It provides a clean toggleable chat box that smoothly anim","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":208,"pl":"https://cdn.21st.dev/ruixen.ui/navbar/default/preview.1755950226643.png","pc":"ruixen.ui","tg":["dropdown","navigation-menu","search","sign-in"]},{"id":"21st:ruixen.ui__neo-glitch","t":"Neo glitch","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/neo-glitch/default/preview.1758919386345.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__neo-qrbutton-2","t":"Neo qrbutton 2","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/neo-qrbutton-2/default/preview.1749228809205.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__nested-dashboard-menu","t":"Nested dashboard menu","d":"This component is a nested menubar designed for complex dashboards, where each top-level menu (like Dashboard, Projects, Team, Tasks, Reports, Settings) can have submenus for addit","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"ruixen.ui","st":"indexed","u":19,"pl":"https://cdn.21st.dev/ruixen.ui/nested-dashboard-menu/default/preview.1756144290964.png","pc":"ruixen.ui","tg":["dashboard","dropdown","menu","navigation-menu"]},{"id":"21st:ruixen.ui__nested-tabs","t":"Nested tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/nested-tabs/default/preview.1758470511206.png","pc":"ruixen.ui","tg":["dashboard","navigation-menu","tabs"]},{"id":"21st:ruixen.ui__newsletter","t":"Newsletter","d":"This NewsletterCard component is a reusable UI block built with Shadcn UI and Tailwind CSS that allows users to subscribe to a newsletter. It features a responsive card layout with","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ruixen.ui/newsletter/default/preview.1757347881402.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__newsletter-form","t":"Newsletter form","d":"This component is a modern newsletter subscription form built with ShadCN UI and Tailwind CSS, designed for both light and dark themes. It uses a Card layout to encapsulate the for","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/newsletter-form/default/preview.1757274675845.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__notification-button","t":"Notification button","d":"The Notification Button is a shadcn/ui-based component designed to display real-time alerts or counts for messages, tasks, or cart items. It combines a button with an icon (default","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/notification-button/default/preview.1758559993958.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__notification-inbox-popover","t":"Notification inbox popover","d":"This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using ta","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","u":154,"pl":"https://cdn.21st.dev/ruixen.ui/notification-inbox-popover/default/preview.1758997194974.png","pc":"ruixen.ui","tg":["dashboard","notification","popover","tabs"]},{"id":"21st:ruixen.ui__notifications","t":"Notifications","d":"The Notifications component is a reusable, interactive UI element built using ShadCN UI, TypeScript, and Tailwind CSS, designed to display real-time notifications in a web applicat","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/notifications/default/preview.1757080766972.png","pc":"ruixen.ui","tg":["badge","dropdown","list","notification"]},{"id":"21st:ruixen.ui__notifications-1","t":"Notifications 1","d":"This Notifications component is a reusable UI element built with shadcn/ui and TypeScript (TSX) that displays a bell icon with a notification count badge. When the user clicks the ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","u":32,"pl":"https://cdn.21st.dev/ruixen.ui/notifications-1/default/preview.1757212838433.png","pc":"ruixen.ui","tg":["badge","list","notification","popover"]},{"id":"21st:ruixen.ui__notifications-alt","t":"Notifications alt","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/notifications-alt/default/preview.1757213701982.png","pc":"ruixen.ui","tg":["notification","popover","tooltip"]},{"id":"21st:ruixen.ui__notifications-carousel","t":"Notifications carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/notifications-carousel/default/preview.1757249323157.png","pc":"ruixen.ui","tg":["carousel","notification","popover"]},{"id":"21st:ruixen.ui__notifications-filter","t":"Notifications filter","d":"This Notifications with Category Filter component provides a clean and efficient way for users to organize and browse through their alerts. Instead of showing all notifications in ","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"rated","u":58,"pl":"https://cdn.21st.dev/ruixen.ui/notifications-filter/default/preview.1757256850520.png","pc":"ruixen.ui","tg":["list","notification"],"sc":18},{"id":"21st:ruixen.ui__notifications-toggle","t":"Notifications toggle","d":"This Lucide-based Notifications component is a clean, professional solution for handling user alerts with both dark and light theme support. It offers two distinct views inside a p","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","u":33,"pl":"https://cdn.21st.dev/ruixen.ui/notifications-toggle/default/preview.1757250222011.png","pc":"ruixen.ui","tg":["carousel","notification","popover"]},{"id":"21st:ruixen.ui__notifications-with-actions","t":"Notifications with actions","d":"This Notifications with Actions component, a standard notification popover by adding interactive controls for each notification. A GripVertical icon on the right allows users to re","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"ruixen.ui","st":"indexed","u":24,"pl":"https://cdn.21st.dev/ruixen.ui/notifications-with-actions/default/preview.1757214873492.png","pc":"ruixen.ui","tg":["list","notification","popover"]},{"id":"21st:ruixen.ui__nova-qrbutton","t":"Nova qrbutton","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/nova-qrbutton/default/preview.1749228409359.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__order-tracking-parallax-card","t":"Order tracking parallax card","d":"The OrderTrackingParallaxCard is a highly interactive, content-rich UI component designed to make order tracking both informative and visually engaging. Built with Framer Motion, i","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ruixen.ui/order-tracking-parallax-card/default/preview.1759046675320.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__origami-fold-out-calendar","t":"Origami fold out calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/origami-fold-out-calendar/default/preview.1758818929724.png","pc":"ruixen.ui","tg":["accordion","calendar","date-picker"]},{"id":"21st:ruixen.ui__otpdialog","t":"Otpdialog","d":"This component is an OTP (One-Time Password) verification dialog designed for secure and user-friendly authentication. It allows users to enter a 4-digit OTP sent to their email or","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"indexed","u":56,"pl":"https://cdn.21st.dev/ruixen.ui/otpdialog/default/preview.1755747874222.png","pc":"ruixen.ui","tg":["modal"]},{"id":"21st:ruixen.ui__otpinput","t":"Otpinput","d":"This component is a modern, highly interactive OTP input designed for a smooth and intuitive user experience. Each slot automatically focuses as the user types, and supports backsp","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/otpinput/default/preview.1757013042089.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__package-installer-tabs","t":"Package installer tabs","d":"The PackageInstallerTabs component is a modern, Shadcn UI–based code snippet viewer designed for quick package installation commands. It provides users with tabbed navigation for p","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ruixen.ui/package-installer-tabs/default/preview.1758921258731.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__particle-field","t":"Particle field","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/particle-field/default/preview.1758141279282.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__particle-flow-calendar","t":"Particle flow calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/particle-flow-calendar/default/preview.1758811352062.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__password-field","t":"Password field","d":"This PasswordField component is a next-level, reusable password input built for modern applications. Unlike a basic show/hide field, it combines several useful features into one cl","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ruixen.ui/password-field/default/preview.1757063755626.png","pc":"ruixen.ui","tg":["form"]},{"id":"21st:ruixen.ui__pill-calendar","t":"Pill calendar","d":"The CalendarCard component is a shadcn-styled calendar variant that provides a clean, modern way to pick single dates or ranges. Unlike the standard flat grid design, this componen","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":26,"pl":"https://cdn.21st.dev/ruixen.ui/pill-calendar/default/preview.1758923532909.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__pill-morph-tabs","t":"Pill morph tabs","d":"The Pill Morphing Tabs component is a modern take on tab navigation, styled as smooth rounded pills that provide a sleek and minimal interface. When switching between tabs, the act","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":57,"pl":"https://cdn.21st.dev/ruixen.ui/pill-morph-tabs/default/preview.1758452335441.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__playlist-carousel","t":"Playlist carousel","d":"The Playlist Carousel is a sleek, horizontally scrollable component designed for audio applications. Each card displays the track’s image, title, and duration, while integrating tw","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/ruixen.ui/playlist-carousel/default/preview.1758701017193.png","pc":"ruixen.ui","tg":["carousel","progress"]},{"id":"21st:ruixen.ui__podcast-card-player","t":"Podcast card player","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/podcast-card-player/default/preview.1758696318435.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__polygon-flux","t":"Polygon flux","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/polygon-flux/default/preview.1758049857944.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__precision-card","t":"Precision card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/precision-card/default/preview.1760947427729.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__predictive-select","t":"Predictive select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/predictive-select/default/preview.1758898385882.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__preview-switch-hero","t":"Preview switch hero","d":"A split hero with an icon-rail that switches the product preview, a lead-capture column (badge, ratings, email form, CTAs, avatars), and a full-width logo strip. Responsive and the","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ruixen.ui/preview-switch-hero/default/preview.1780070410938.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__pricing-landing-hero","t":"Pricing landing hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/pricing-landing-hero/default/preview.1779084047824.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__pricing-module","t":"Pricing module","d":"The PricingModule component is a fully configurable, responsive pricing section built with shadcn/ui, Lucide icons, and Tailwind CSS. It allows users to easily toggle between month","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","u":138,"pl":"https://cdn.21st.dev/ruixen.ui/pricing-module/default/preview.1760809383261.png","pc":"ruixen.ui","tg":["pricing-section","table","toggle"]},{"id":"21st:ruixen.ui__pricing-section-1","t":"Pricing section 1","d":"$34","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/pricing-section-1/default/preview.1760721348311.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__pricing-section-2","t":"Pricing section 2","d":"$34","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/pricing-section-2/default/preview.1760799177696.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__pricing-section-3","t":"Pricing section 3","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/pricing-section-3/default/preview.1760965416074.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__pricnig-cards03","t":"Pricnig cards03","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/pricnig-cards03/default/preview.1752779252906.png","pc":"ruixen.ui","tg":["pricing-section"]},{"id":"21st:ruixen.ui__priority-pyramid-calendar","t":"Priority pyramid calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/priority-pyramid-calendar/default/preview.1758804313043.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__prism-flux","t":"Prism flux","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/prism-flux/default/preview.1758048423981.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__privacy-policy-modal","t":"Privacy policy modal","d":"This component is a Privacy Policy modal built using ShadCN UI and React. It displays a scrollable privacy policy that users must read before accepting. The content is dynamically ","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/privacy-policy-modal/default/preview.1755716832458.png","pc":"ruixen.ui","tg":["modal","scroll-area"]},{"id":"21st:ruixen.ui__product-bounce-card","t":"Product bounce card","d":"The ProductBounceCard is a sleek, animated display card designed to showcase products with a lively and modern 3D bounce effect. Using Framer Motion, it smoothly animates the produ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ruixen.ui/product-bounce-card/default/preview.1759088570850.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__product-design-page","t":"Product design page","d":"$34","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/product-design-page/default/preview.1760788679907.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__product-image-card","t":"Product image card","d":"The ProductImageCard component is a modern, interactive product viewer built entirely with shadcn/ui components. It presents a clean, mobile-inspired layout featuring a main produc","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":30,"pl":"https://cdn.21st.dev/ruixen.ui/product-image-card/default/preview.1761156478545.png","pc":"ruixen.ui","tg":["carousel","gallery"]},{"id":"21st:ruixen.ui__product-table","t":"Product table","d":"Animated Product Table is a highly interactive, feature-rich table built with React, TanStack Table, and Framer Motion. It supports global search, pagination, and column toggling, ","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/ruixen.ui/product-table/default/preview.1758914848185.png","pc":"ruixen.ui","tg":["pagination","search","table"]},{"id":"21st:ruixen.ui__progress-button","t":"Progress button","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/progress-button/default/preview.1758555306091.png","pc":"ruixen.ui","tg":["upload-download"]},{"id":"21st:ruixen.ui__progressive-flux-loader","t":"Progressive flux loader","d":"A glowing flux progress bar with phase labels that fly in letter by letter.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ruixen.ui","st":"indexed","u":39,"pl":"https://cdn.21st.dev/ruixen.ui/progressive-flux-loader/default/preview.1781592888741.png","pc":"ruixen.ui","tg":["progress","spinner","text","upload-download"]},{"id":"21st:ruixen.ui__progressive-step-tabs","t":"Progressive step tabs","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/progressive-step-tabs/default/preview.1758461595475.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__project-progress-card","t":"Project progress card","d":"The ProjectProgressCard is a visually engaging dashboard component built entirely with Shadcn UI and Framer Motion. It provides a clear overview of a project’s status, showing key ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ruixen.ui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ruixen.ui/project-progress-card/default/preview.1760098910792.png","pc":"ruixen.ui","tg":["progress","timeline"]},{"id":"21st:ruixen.ui__project-pulse-tracker","t":"Project pulse tracker","d":"A clean and responsive project card that displays key project milestones alongside team member details. It uses a two-column layout with a timeline on the left and a list of contri","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"rated","u":17,"pl":"https://cdn.21st.dev/ruixen.ui/project-pulse-tracker/default/preview.1749314571162.png","pc":"ruixen.ui","tg":["team","timeline"],"sc":14},{"id":"21st:ruixen.ui__radial-week-view","t":"Radial week view","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/radial-week-view/default/preview.1758741203369.png","pc":"ruixen.ui","tg":["calendar","popover"]},{"id":"21st:ruixen.ui__rain-background","t":"Rain background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/rain-background/default/preview.1758190086530.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__rating-scale-group","t":"Rating scale group","d":"This Rating Scale Group component presents a clean, survey-style alternative to traditional star ratings. Instead of icons, it uses a row of numbered boxes (1–10) that users can cl","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ruixen.ui","st":"indexed","u":29,"pl":"https://cdn.21st.dev/ruixen.ui/rating-scale-group/default/preview.1758995090475.png","pc":"ruixen.ui","tg":["radio-group"]},{"id":"21st:ruixen.ui__receding-text-plane","t":"Receding text plane","d":"A slab of copy raked away from the viewer on a short lens. Near lines swell past the frame edges, far lines fold toward a horizon that was never drawn — no scroll, no animation, on","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ruixen.ui/receding-text-plane/default/preview.1785332734105-d626fa00-4184-4585-9b3a-64b3809b51ca.png","pc":"ruixen.ui","tg":["text"]},{"id":"21st:ruixen.ui__release-time-line","t":"Release time line","d":"This TimeLine_01 React component renders a vertically scrolling release notes timeline where only the card closest to the viewport center expands to show full details.\nIt supports ","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"indexed","u":205,"pl":"https://cdn.21st.dev/ruixen.ui/release-time-line/default/preview.1755269528074.png","pc":"ruixen.ui","tg":["image","timeline"]},{"id":"21st:ruixen.ui__reorderable-table","t":"Reorderable table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/reorderable-table/default/preview.1757837687129.png","pc":"ruixen.ui","tg":["search","table"]},{"id":"21st:ruixen.ui__review-filter-bars","t":"Review filter bars","d":"This Review Filter Bars component offers a clear and interactive way to filter reviews by rating. Instead of simple text or star lists, each option is displayed as a horizontal bar","k":"component","s":"21st","c":"inputs/rating","g":"inputs","a":"ruixen.ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ruixen.ui/review-filter-bars/default/preview.1758995495392.png","pc":"ruixen.ui","tg":["radio-group","progress"]},{"id":"21st:ruixen.ui__ripple-circles","t":"Ripple circles","d":"The RippleCircles component delivers a smooth and modern ripple-style loading animation using five concentric circles that expand and fade in a staggered sequence. Each circle feat","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruixen.ui","st":"indexed","u":14,"pl":"https://cdn.21st.dev/ruixen.ui/ripple-circles/default/preview.1759081401840.png","pc":"ruixen.ui","tg":["spinner"]},{"id":"21st:ruixen.ui__ripple-distortion","t":"Ripple distortion","d":"The RippleDistortion component is an interactive WebGL-powered React component built with Three.js and custom shaders. It takes an image as input and applies a dynamic ripple-like ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/ripple-distortion/default/preview.1785440536759-b94c9b47-0485-44e8-977d-29e3b0afb4d2.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__rising-glow","t":"Rising glow","d":"This component, RisingGlow, is a visually engaging UI element designed to create a dynamic ambient effect beneath a heading or text. It generates a series of glowing particles that","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":13,"pl":"https://cdn.21st.dev/ruixen.ui/rising-glow/default/preview.1785360133648-b3c0dddd-a5f8-4010-b9e5-79958373a807.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__roadmap","t":"Roadmap","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/roadmap/default/preview.1762881764341.png","pc":"ruixen.ui","sc":23},{"id":"21st:ruixen.ui__rotating-gradient-right","t":"Rotating gradient right","d":"This component creates a smooth, continuously rotating conic gradient glow behind any content.\nThe gradient’s vibrant colors transition seamlessly as it spins, producing a dynamic ","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"ruixen.ui","st":"indexed","u":94,"pl":"https://cdn.21st.dev/ruixen.ui/rotating-gradient-right/default/preview.1755280099426.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-accordian01","t":"Ruixen accordian01","d":"This accordion component features a clean and professional design that avoids traditional rotating chevrons. Instead, it uses subtle yet engaging visual cues to indicate the expand","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"ruixen.ui","st":"indexed","u":82,"pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/ruixen-accordian01/default/preview.1750813328122.png","pc":"ruixen.ui","tg":["accordion","faq"]},{"id":"21st:ruixen.ui__ruixen-ai-input","t":"Ruixen ai input","d":"This input component is a modern, user-friendly text entry interface designed for chat, assistant, or AI-driven applications. It features a sleek, rounded text area that automatica","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-ai-input/default/preview.1749996377327.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-ai-input03","t":"Ruixen ai input03","d":"This input component is a modern, user-friendly text entry interface designed for chat, assistant, or AI-driven applications. It features a sleek, rounded text area that automatica","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-ai-input03/default/preview.1749997327395.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-ai-input03-1","t":"Ruixen ai input03 1","d":"This input component is a modern, user-friendly text entry interface designed for chat, assistant, or AI-driven applications. It features a sleek, rounded text area that automatica","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-ai-input03-1/default/preview.1749997979950.png","pc":"ruixen.ui","sc":17},{"id":"21st:ruixen.ui__ruixen-ai-input06","t":"Ruixen ai input06","d":" AI input component offers a modern, clean interface with a floating action button and animated thinking indicator. It features an auto-resizing textarea, subtle status feedback, a","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-ai-input06/default/preview.1749998690173.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-alert","t":"Ruixen alert","d":"This alert component delivers a clean and modern notification message with a smooth entrance animation that slides in subtly from below. It features a left-accented green border to","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-alert/default/preview.1749999516803.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-alert02","t":"Ruixen alert02","d":"A premium invite notification component featuring expressive avatar presentation, modern motion, and refined user actions — crafted to fit right into any professional dashboard or ","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-alert02/default/preview.1750000134095.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-alert03","t":"Ruixen alert03","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-alert03/default/preview.1750050366295.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-alert04","t":"Ruixen alert04","d":"This Alert is a stylish, animated alert card with a success message, celebration icon, and a floating label—designed using a blue gradient theme with motion effects and a glassmorp","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-alert04/default/preview.1750050878651.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-alert05","t":"Ruixen alert05","d":"RuixenAlert05 is a sleek horizontal alert bar showing a successful payment message with an icon and redirect link, styled for both light and dark modes.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-alert05/default/preview.1750051251437.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-bento-cards","t":"Ruixen bento cards","d":"\n\nRuixen UI is built to make your job easier. These bento cards highlight what really matters when you're building modern UIs: beautiful components, smart layouts, performance, and","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":274,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-bento-cards/default/preview.1752806986187.png","pc":"ruixen.ui","tg":["card","features","grid"]},{"id":"21st:ruixen.ui__ruixen-btn01","t":"Ruixen btn01","d":"An animated button with ripple effect on click, gentle icon rotation, and hover scale for interactive feedback.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn01/default/preview.1750051936975.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn02","t":"Ruixen btn02","d":"A glowing pill-shaped button with subtle scaling and a looping arrow animation, perfect for modern call-to-action prompts.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn02/default/preview.1750052336099.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn04","t":"Ruixen btn04","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn04/default/preview.1750052733538.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn04-1","t":"Ruixen btn04 1","d":"A draggable “Slide to Delete” button with visual confirmation — safer and more intentional for destructive actions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn04-1/default/preview.1750053811698.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn05","t":"Ruixen btn05","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn05/default/preview.1750054163484.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn07","t":"Ruixen btn07","d":"A modern, round-edged download button with real-time status indicator — featuring animated loader, success/failure icon, and temporary feedback timeout.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn07/default/preview.1750054424861.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn07-1","t":"Ruixen btn07 1","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn07-1/default/preview.1750089976036.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-btn08","t":"Ruixen btn08","d":"This is a circular radial share button that reveals multiple social media icons (like Twitter, LinkedIn, Mail, etc.) around it when hovered or clicked. Each icon smoothly expands o","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-btn08/default/preview.1750055409214.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-card-01","t":"Ruixen card 01","d":"The RUIXEN UI Feature Card is a compact yet elegant component designed to showcase products, blog posts, or UI elements with visual clarity. It features a responsive image with a s","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-card-01/default/preview.1749311825175.png","pc":"ruixen.ui","tg":["features"]},{"id":"21st:ruixen.ui__ruixen-card02","t":"Ruixen card02","d":"This section contains a set of responsive action buttons — Portfolio, Connect, and Share — allowing users to view the developer’s work, connect for opportunities, or share the prof","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"ruixen.ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/ruixen-card02/default/preview.1750811122643.png","pc":"ruixen.ui","tg":["profile"]},{"id":"21st:ruixen.ui__ruixen-carousel-wave","t":"Ruixen carousel wave","d":"This component is a sleek, GSAP-powered horizontal carousel that showcases Ruixen-style UI cards with a wave-like animation. It highlights one card at the center by dipping it slig","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-carousel-wave/default/preview.1752642390409.png","pc":"ruixen.ui","tg":["carousel"]},{"id":"21st:ruixen.ui__ruixen-contributors-table","t":"Ruixen contributors table","d":"a comprehensive overview of RUIXEN’s open-source projects, teams, and contributors. Designed for maintainers and team leads, it offers dynamic column selection, real-time filtering","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":253,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-contributors-table/default/preview.1749402460750.png","pc":"ruixen.ui","tg":["table","team"]},{"id":"21st:ruixen.ui__ruixen-fancy-accordion","t":"Ruixen fancy accordion","d":"The RuixenFancyAccordion component is a reusable and responsive FAQ section designed using Shadcn UI's Accordion primitives and styled with Tailwind CSS. It dynamically renders a l","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-fancy-accordion/default/preview.1749964207700.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-feature-section","t":"Ruixen feature section","d":"The Integrations component showcases key tools and platforms that seamlessly connect with our system to enhance productivity, collaboration, and performance. Each integration is re","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-feature-section/default/preview.1754418932043.png","pc":"ruixen.ui","tg":["features","testimonials"]},{"id":"21st:ruixen.ui__ruixen-featured-image-section","t":"Ruixen featured image section","d":"This feature section highlights Ruixen’s core strengths with an interactive tab layout. Each tab showcases a unique capability—like a user-friendly dashboard, smart keyword generat","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"ruixen.ui","st":"indexed","u":84,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-featured-image-section/default/preview.1753812707306.png","pc":"ruixen.ui","tg":["features","sidebar","tabs"]},{"id":"21st:ruixen.ui__ruixen-footer03","t":"Ruixen footer03","d":"This pricing component showcases three tailored plans from the Ruixen UI library, designed for different user needs—from freelancers to growing teams. Each plan highlights key AI-d","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ruixen.ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-footer03/default/preview.1753808661545.png","pc":"ruixen.ui","tg":["footer"]},{"id":"21st:ruixen.ui__ruixen-gradient-footer","t":"Ruixen gradient footer","d":"A footer that shows its content first, then stretches a tall, blurred rainbow up from the floor as you scroll to the bottom of the page. Gradient inspired by Dia Browser — one inli","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"ruixen.ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-gradient-footer/default/preview.1784727001585-aa4b8c38-0fd9-4389-811c-d9c48df71bdd.png","pc":"ruixen.ui","tg":["footer"]},{"id":"21st:ruixen.ui__ruixen-hero-section-02","t":"Ruixen hero section 02","d":"This hero section is a visually striking, interactive introduction component designed to showcase a ruixen UI. It features a dynamic background with soft gradients, animated floati","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-hero-section-02/default/preview.1749816236182.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-input01","t":"Ruixen input01","d":"This is a modern, accessible floating label input component with smooth transitions, clear success/error states, and a built-in clear button. It adapts to both light and dark theme","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-input01/default/preview.1750092884778.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-input02","t":"Ruixen input02","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-input02/default/preview.1752117931041.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-menu-options","t":"Ruixen menu options","d":"This RuixenMenuOptions component is a visually rich and user-friendly dropdown menu built using the ShadCN UI library and Lucide icons. It offers grouped actions like quick edits (","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ruixen.ui","st":"indexed","u":50,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-menu-options/default/preview.1753438385987.png","pc":"ruixen.ui","tg":["dropdown","menu"]},{"id":"21st:ruixen.ui__ruixen-mono-chat","t":"Ruixen mono chat","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-mono-chat/default/preview.1749317992238.png","pc":"ruixen.ui","tg":["sidebar"]},{"id":"21st:ruixen.ui__ruixen-moon-chat","t":"Ruixen moon chat","d":"$35","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-moon-chat/default/preview.1758869778030.png","pc":"ruixen.ui","tg":["input","textarea"]},{"id":"21st:ruixen.ui__ruixen-popover-02","t":"Ruixen popover 02","d":"This custom ShadCN popover displays notifications in a scrollable layout with clear visual boundaries and dark/light mode compatibility. Each notification supports a title, message","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ruixen.ui","st":"rated","u":28,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-popover-02/default/preview.1753441149021.png","pc":"ruixen.ui","tg":["notification","popover"],"sc":18},{"id":"21st:ruixen.ui__ruixen-pricing-04","t":"Ruixen pricing 04","d":"This pricing component presents three tailored plans—Starter, Developer, and Enterprise—each designed to suit different project scales and team needs. It highlights key features li","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","u":92,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-pricing-04/default/preview.1753807888175.png","pc":"ruixen.ui","tg":["pricing-section"]},{"id":"21st:ruixen.ui__ruixen-pricing05","t":"Ruixen pricing05","d":"This feature section highlights Ruixen UI's powerful tools for content optimization and SEO growth. With a user-friendly dashboard, one-click automation, and a smart keyword genera","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ruixen.ui","st":"indexed","u":59,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-pricing05/default/preview.1753813993657.png","pc":"ruixen.ui","tg":["badge","pricing-section","table"]},{"id":"21st:ruixen.ui__ruixen-product-table","t":"Ruixen product table","d":"The component visually represents a team-building interface, where users can add or remove members (up to a max of 4) using + and - buttons. Each team member is displayed as a uniq","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-product-table/default/preview.1750297750817.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-product-table-1","t":"Ruixen product table 1","d":"The component visually represents a team-building interface, where users can add or remove members (up to a max of 4) using + and - buttons. Each team member is displayed as a uniq","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-product-table-1/default/preview.1755710880806.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-prompt-box","t":"Ruixen prompt box","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-prompt-box/default/preview.1758916898131.png","pc":"ruixen.ui","tg":["ai-chat","textarea"]},{"id":"21st:ruixen.ui__ruixen-query-box","t":"Ruixen query box","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-query-box/default/preview.1758916155251.png","pc":"ruixen.ui","tg":["textarea","upload-download"]},{"id":"21st:ruixen.ui__ruixen-stats","t":"Ruixen stats","d":"A bold, asymmetric analytics section where a hero CountUp figure overlays a live area chart, instantly drawing focus.\nFloating side stats and a clean CTA create a premium, dashboar","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ruixen.ui","st":"indexed","u":78,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-stats/default/preview.1754768145037.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-table-04","t":"Ruixen table 04","d":"This component showcases a clean and modern UI section that highlights client logos with subtle animated diagonal stripes in the background. It uses a responsive two-column grid la","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-table-04/default/preview.1753411764299.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__ruixen-table-basic","t":"Ruixen table basic","d":"This component displays a dynamic, responsive data table showcasing user information in a clean and organized format. Each row represents a distinct user profile containing key det","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/ruixen-table-basic/default/preview.1753258300575.png","pc":"ruixen.ui","tg":["checkbox","profile","select","table"]},{"id":"21st:ruixen.ui__ruixen-upload-input","t":"Ruixen upload input","d":"This component is a modern and elegant file upload card built with React and Tailwind CSS. It allows users to drag and drop or click to select an image file. Upon selection, it sho","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ruixen.ui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/ruixen.ui/ruixen-upload-input/default/preview.1752117433721.png","pc":"ruixen.ui","tg":["image","upload-download"]},{"id":"21st:ruixen.ui__safari-01","t":"Safari 01","d":"The Safari_01 component is a sleek, macOS-style browser window mockup designed to showcase images or content within a realistic browser frame. At the top, it features the familiar ","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ruixen.ui","st":"indexed","u":69,"pl":"https://cdn.21st.dev/ruixen.ui/safari-01/default/preview.1752808577603.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__sales-ai-hero","t":"Sales ai hero","d":"An oversized centered hero with a floating announcement pill, paired square + landscape media tiles, and a divider-flanked trusted-by logo strip.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/sales-ai-hero/default/preview.1779808275227.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__scheduler","t":"Scheduler","d":"This Scheduler component is a modern and interactive date and time picker built entirely with shadcn/ui. It provides a clean interface where users can schedule events by selecting ","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/scheduler/default/preview.1757757635933.png","pc":"ruixen.ui","tg":["calendar","date-picker","popover"]},{"id":"21st:ruixen.ui__scroll-burn-text","t":"Scroll burn text","d":"A manifesto that comes at the reader and burns off. Each block grows toward the lens, splits into red and cyan at the edges and is eaten away glyph by glyph from the middle out, un","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/scroll-burn-text/default/preview.1786025033750-fcb3b48c-6069-429c-a297-62cc24ebad04.png","pc":"ruixen.ui","tg":["text"]},{"id":"21st:ruixen.ui__scroll-faqaccordion","t":"Scroll faqaccordion","d":"ScrollFAQAccordion is a modern, scroll-driven FAQ accordion built with React, Radix UI, Framer Motion, and GSAP. Unlike traditional accordions, it automatically opens each FAQ item","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","u":65,"pl":"https://cdn.21st.dev/ruixen.ui/scroll-faqaccordion/default/preview.1758914265681.png","pc":"ruixen.ui","tg":["accordion","faq","scroll-area"]},{"id":"21st:ruixen.ui__scroll-image-tunnel","t":"Scroll image tunnel","d":"A pinned photo stage where each scroll-linked image grows from a small point in the center, developing from an oversaturated, high-contrast state into the true image as it settles.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ruixen.ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/ruixen.ui/scroll-image-tunnel/default/preview.1783435196315.png","pc":"ruixen.ui","tg":["gallery","scroll-area"]},{"id":"21st:ruixen.ui__scroll-over-hero","t":"Scroll over hero","d":"A hero with a pinned, centered title that a product panel rises up and overlaps as the page scrolls. Theme-aware, with a reduced-motion stacked fallback.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/scroll-over-hero/default/preview.1779954041929.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__scroll-pagination","t":"Scroll pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/scroll-pagination/default/preview.1758446855943.png","pc":"ruixen.ui","tg":["pagination","tooltip"]},{"id":"21st:ruixen.ui__scroll-portrait-wall","t":"Scroll portrait wall","d":"A scroll-driven portrait wall with a sticky mix-blend-exclusion title. GSAP ScrollTrigger scrubs each portrait from scale 0 to 1 and back as its row crosses the viewport.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ruixen.ui","st":"indexed","u":20,"pl":"https://cdn.21st.dev/ruixen.ui/scroll-portrait-wall/default/preview.1780139893702.png","pc":"ruixen.ui","tg":["gallery","scroll-area","team"]},{"id":"21st:ruixen.ui__scroll-text-rise","t":"Scroll text rise","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/scroll-text-rise/default/preview.1775799202240.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__scroll-tilted-grid","t":"Scroll tilted grid","d":"An editorial two-column image grid where tiles rise from below tilted forward, snap into focus mid-viewport, then tilt back as they exit, driven by scroll progress via Framer Motio","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ruixen.ui","st":"indexed","u":25,"pl":"https://cdn.21st.dev/ruixen.ui/scroll-tilted-grid/default/preview.1777663686473.png","pc":"ruixen.ui","tg":["gallery","scroll-area"]},{"id":"21st:ruixen.ui__search-with-category","t":"Search with category","d":"This component is a search bar with a category filter, built entirely using shadcn/ui components. It combines a dropdown select for choosing a category (like Products, Blogs, Users","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/search-with-category/default/preview.1756181628617.png","pc":"ruixen.ui","tg":["dropdown","input","search","select"]},{"id":"21st:ruixen.ui__segmented-button-group","t":"Segmented button group","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/segmented-button-group/default/preview.1758650973682.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__sentiment-radio-group","t":"Sentiment radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/sentiment-radio-group/default/preview.1758994507385.png","pc":"ruixen.ui","tg":["radio-group"]},{"id":"21st:ruixen.ui__service-changelog","t":"Service changelog","d":"A scroll-spy services section. A sticky tab strip at the top tracks the active entry while the reader scrolls through long-form panels with deliverables, optional preview media, an","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/ruixen.ui/service-changelog/default/preview.1782458947184.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__service-ledger","t":"Service ledger","d":"A scroll-spy services section. A sticky tab strip at the top tracks the active entry while the reader scrolls through long-form panels with deliverables, optional preview videos, a","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/service-ledger/default/preview.1779949996024.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__shirt-parallax-card","t":"Shirt parallax card","d":"The ShirtParallaxCard is a sleek, interactive product advertising component designed for modern e-commerce or fashion websites. It features a clean content area with the product’s ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":27,"pl":"https://cdn.21st.dev/ruixen.ui/shirt-parallax-card/default/preview.1759048604540.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__showcase-feature","t":"Showcase feature","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/showcase-feature/default/preview.1775851736706.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__side-panel-multi-calendar","t":"Side panel multi calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/side-panel-multi-calendar/default/preview.1758989665636.png","pc":"ruixen.ui","tg":["calendar","date-picker"]},{"id":"21st:ruixen.ui__sidebar-showcase","t":"Sidebar showcase","d":"This custom sidebar component is a fully responsive, interactive navigation panel built using ShadCN UI, Framer Motion, and React. It features a team switcher at the top, allowing ","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"ruixen.ui","st":"indexed","u":84,"pl":"https://cdn.21st.dev/ruixen.ui/sidebar-showcase/default/preview.1759034753110.png","pc":"ruixen.ui","tg":["dropdown","navigation-menu","profile","sidebar"]},{"id":"21st:ruixen.ui__sign-in-card","t":"Sign in card","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/sign-in-card/default/preview.1757348725444.png","pc":"ruixen.ui","tg":["sign-in"]},{"id":"21st:ruixen.ui__sign-in-form","t":"Sign in form","d":"This Sign-In Form component is a sleek and minimal authentication interface built with ShadCN UI and Lucide icons, designed to fit seamlessly into both light and dark themes. It co","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":102,"pl":"https://cdn.21st.dev/ruixen.ui/sign-in-form/default/preview.1757273241613.png","pc":"ruixen.ui","tg":["form","sign-in"]},{"id":"21st:ruixen.ui__sketchpad-dropzone","t":"Sketchpad dropzone","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/sketchpad-dropzone/default/preview.1758735063570.png","pc":"ruixen.ui","tg":["upload-download"]},{"id":"21st:ruixen.ui__sliding-pagination","t":"Sliding pagination","d":"This Sliding Pagination component provides a modern, interactive way to navigate through large sets of pages. Instead of instantly switching between page numbers, it features a smo","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ruixen.ui/sliding-pagination/default/preview.1758381352192.png","pc":"ruixen.ui","tg":["pagination"]},{"id":"21st:ruixen.ui__sliding-tabs","t":"Sliding tabs","d":"The Sliding Glow Tabs component is a modern reimagining of the classic tab navigation pattern. Instead of a static underline, it features a glowing gradient bar that smoothly slide","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/ruixen.ui/sliding-tabs/default/preview.1758451730800.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:ruixen.ui__smart-assist-input","t":"Smart assist input","d":"The SmartAssistInput is a next-generation, reusable input field designed to go far beyond a plain text box. It not only lets users type, but also actively assists them by rememberi","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/smart-assist-input/default/preview.1757064616684.png","pc":"ruixen.ui","tg":["dropdown","input"]},{"id":"21st:ruixen.ui__smart-breadcrumb","t":"Smart breadcrumb","d":"The SmartBreadcrumb component is a modern, fully configurable breadcrumb navigation solution for React projects. It supports dynamic routes, optional icons using Lucide React, elli","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"ruixen.ui","st":"indexed","u":13,"pl":"https://cdn.21st.dev/ruixen.ui/smart-breadcrumb/default/preview.1760545346534.png","pc":"ruixen.ui","tg":["navigation-menu"]},{"id":"21st:ruixen.ui__smart-paste-input","t":"Smart paste input","d":"A chat composer that catches long pastes and files them away as an attachment card instead of flooding the input. Click the card to open a full editor — live character count, edit ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/smart-paste-input/default/preview.1784121560632.png","pc":"ruixen.ui","tg":["input","textarea"]},{"id":"21st:ruixen.ui__smart-tv","t":"Smart tv","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/smart-tv/default/preview.1758478933618.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__smart-watch","t":"Smart watch","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/smart-watch/default/preview.1758476271722.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__social-auth-card","t":"Social auth card","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/social-auth-card/default/preview.1758653701660.png","pc":"ruixen.ui","tg":["sign-in"]},{"id":"21st:ruixen.ui__social-post-card","t":"Social post card","d":"SocialPostCard is a sleek, modern, and fully responsive social media post component designed to showcase user posts with author details, content, and an optional link preview. It f","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"ruixen.ui","st":"indexed","u":39,"pl":"https://cdn.21st.dev/ruixen.ui/social-post-card/default/preview.1749322222269.png","pc":"ruixen.ui","tg":["link"]},{"id":"21st:ruixen.ui__social-preview-dock","t":"Social preview dock","d":"A row of social links sharing one preview card. One panel owns the card surface and resizes itself between profiles while the contents cross-fade inside, so moving between icons re","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/social-preview-dock/default/preview.1785424627910-5629ba70-fe66-4fe8-84a0-3db45dd8a245.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__solar-loader","t":"Solar loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/solar-loader/default/preview.1760455111744.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__spark-button","t":"Spark button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/spark-button/default/preview.1749228021846.png","pc":"ruixen.ui","tg":["button","cta"]},{"id":"21st:ruixen.ui__split-action-button","t":"Split action button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/split-action-button/default/preview.1758556476300.png","pc":"ruixen.ui","tg":["button","dropdown"]},{"id":"21st:ruixen.ui__spotlight-background","t":"Spotlight background","d":"This component creates a smooth circular spotlight effect that dynamically follows the user’s cursor. Unlike scattered or fuzzy glow effects, this version uses a clean radial gradi","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":18,"pl":"https://cdn.21st.dev/ruixen.ui/spotlight-background/default/preview.1758084376926.png","pc":"ruixen.ui","tg":["background","cursor"]},{"id":"21st:ruixen.ui__stack-feature-section","t":"Stack feature section","d":"This component is a React + Tailwind CSS hero section with a heading, subtext, and call-to-action buttons on the left, plus an animated multi-orbit icon display on the right.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","u":353,"pl":"https://cdn.21st.dev/ruixen.ui/stack-feature-section/default/preview.1774360146871.png","pc":"ruixen.ui","tg":["cta","hero"]},{"id":"21st:ruixen.ui__stack-pagination","t":"Stack pagination","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/stack-pagination/default/preview.1758432573279.png","pc":"ruixen.ui","tg":["pagination"]},{"id":"21st:ruixen.ui__stacked-bar-calendar","t":"Stacked bar calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/stacked-bar-calendar/default/preview.1758740435928.png","pc":"ruixen.ui","tg":["calendar","select"]},{"id":"21st:ruixen.ui__stacked-cards-upload","t":"Stacked cards upload","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/stacked-cards-upload/default/preview.1758729180222.png","pc":"ruixen.ui","tg":["progress","upload-download"]},{"id":"21st:ruixen.ui__status-button","t":"Status button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/status-button/default/preview.1758648664129.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__step-card","t":"Step card","d":"The Professional Step Card is a clean, enterprise-ready multi-step form component built strictly with shadcn UI components. It guides users through sequential steps—like Email → Pa","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ruixen.ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ruixen.ui/step-card/default/preview.1758659651989.png","pc":"ruixen.ui","tg":["steps"]},{"id":"21st:ruixen.ui__studio-hero","t":"Studio hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/studio-hero/default/preview.1761154066635.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__success-login-card","t":"Success login card","d":"The Card with Micro-Animations on Success is a polished and configurable login card built with shadcn UI components, designed to provide users with instant, professional feedback. ","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ruixen.ui","st":"indexed","u":64,"pl":"https://cdn.21st.dev/ruixen.ui/success-login-card/default/preview.1758686308913.png","pc":"ruixen.ui","tg":["sign-up"]},{"id":"21st:ruixen.ui__swipe-to-confirm-button","t":"Swipe to confirm button","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/swipe-to-confirm-button/default/preview.1758649512730.png","pc":"ruixen.ui","tg":["progress"],"sc":15},{"id":"21st:ruixen.ui__table-dialog","t":"Table dialog","d":"This component is a feature-rich, interactive data table built entirely with Shadcn UI components. It includes a fixed header and footer, allowing the table body to scroll independ","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"ruixen.ui","st":"indexed","u":23,"pl":"https://cdn.21st.dev/ruixen.ui/table-dialog/default/preview.1757830976988.png","pc":"ruixen.ui","tg":["checkbox","modal"]},{"id":"21st:ruixen.ui__table-edit","t":"Table edit","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/table-edit/default/preview.1757830049288.png","pc":"ruixen.ui","tg":["checkbox","table"]},{"id":"21st:ruixen.ui__table-with-dialog","t":"Table with dialog","d":"This Advanced User Management Table component is a feature-rich and modern UI built entirely with Shadcn UI. It combines a fixed header for clarity, interactive row selection using","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","u":34,"pl":"https://cdn.21st.dev/ruixen.ui/table-with-dialog/default/preview.1757822299308.png","pc":"ruixen.ui","tg":["badge","checkbox","modal","table"]},{"id":"21st:ruixen.ui__tablet-screen","t":"Tablet screen","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/tablet-screen/default/preview.1758479873105.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__tag-cloud-select","t":"Tag cloud select","d":"The Searchable Tag Cloud Select is a modern, interactive component designed for apps that need both data-rich visualization and intuitive multi-select functionality. Built entirely","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"ruixen.ui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/ruixen.ui/tag-cloud-select/default/preview.1758908135431.png","pc":"ruixen.ui","tg":["chip","search"]},{"id":"21st:ruixen.ui__task-orbit-calendar","t":"Task orbit calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/task-orbit-calendar/default/preview.1758742103723.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__team-access-card","t":"Team access card","d":"The TeamAccessCard component is a sleek, interactive, and fully customizable team management interface built using Shadcn UI and Framer Motion. It allows users to view, invite, edi","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/team-access-card/default/preview.1760026920179.png","pc":"ruixen.ui","tg":["team"]},{"id":"21st:ruixen.ui__terminal-screen","t":"Terminal screen","k":"component","s":"21st","c":"other","g":"other","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/terminal-screen/default/preview.1758476783212.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__testimonial-accordion","t":"Testimonial accordion","d":"$34","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/testimonial-accordion/default/preview.1760787562246.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__text-reveal-faqs","t":"Text reveal faqs","d":"The FAQs component is designed to provide clear and organized answers to common questions about Ruixen UI. It features a bold heading, a brief introductory text, and a link to the ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/text-reveal-faqs/default/preview.1755436084000.png","pc":"ruixen.ui","tg":["accordion","faq","text"]},{"id":"21st:ruixen.ui__three-dwall-calendar","t":"Three dwall calendar","d":"The 3D Wall Calendar component transforms a traditional month view into an immersive, interactive 3D wall of days. Each day is represented as a panel, arranged in a grid-like wall,","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","u":53,"pl":"https://cdn.21st.dev/ruixen.ui/three-dwall-calendar/default/preview.1758743766694.png","pc":"ruixen.ui","tg":["calendar","form"]},{"id":"21st:ruixen.ui__tilted-dock","t":"Tilted dock","d":"This 3D Tilted Dock with Depth Layers is a futuristic UI component that makes a simple dock feel alive and immersive. The dock sits on a slightly tilted glass-like stage, creating ","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","u":49,"pl":"https://cdn.21st.dev/ruixen.ui/tilted-dock/default/preview.1758251893925.png","pc":"ruixen.ui","tg":["dock"]},{"id":"21st:ruixen.ui__time-picker","t":"Time picker","d":"This is a sleek, minimal black-and-white time picker with a floating label and clock icon. It features separate dropdowns for hours and minutes with step-5 intervals, providing fas","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ruixen.ui","st":"indexed","u":16,"pl":"https://cdn.21st.dev/ruixen.ui/time-picker/default/preview.1755966501247.png","pc":"ruixen.ui","tg":["dropdown","form"]},{"id":"21st:ruixen.ui__time-with-icon","t":"Time with icon","d":"This component is a dynamic time input designed for modern, intuitive forms. It features a left-aligned icon that visually represents the time of day: a sun for daytime hours, a mo","k":"component","s":"21st","c":"media/icon","g":"media","a":"ruixen.ui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ruixen.ui/time-with-icon/default/preview.1757012458864.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__timeline-02","t":"Timeline 02","d":"This component is a vertical timeline that highlights the key milestones in Ruixen’s journey.\nIt uses cards with clean typography to present dates, titles, and descriptions in a st","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"indexed","u":31,"pl":"https://cdn.21st.dev/ruixen.ui/timeline-02/default/preview.1755319968753.png","pc":"ruixen.ui","tg":["timeline"]},{"id":"21st:ruixen.ui__timeline-select","t":"Timeline select","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/timeline-select/default/preview.1758900242866.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__timeline-upload","t":"Timeline upload","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/timeline-upload/default/preview.1758728296870.png","pc":"ruixen.ui","tg":["progress","timeline","upload-download"]},{"id":"21st:ruixen.ui__toolbar-dock","t":"Toolbar dock","d":"React menu component- a Vercel-style floating icon dock with a single tooltip rail that slides and clip-path reveals each label above the hovered button.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/toolbar-dock/default/preview.1780403013263.png","pc":"ruixen.ui","tg":["dock","tooltip"]},{"id":"21st:ruixen.ui__tooltip-button","t":"Tooltip button","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/tooltip-button/default/preview.1758561791345.png","pc":"ruixen.ui","tg":["tooltip"]},{"id":"21st:ruixen.ui__tour-popover","t":"Tour popover","d":"This Tour Popover component delivers a professional, guided onboarding flow using shadcn/ui’s Popover, Button, Progress, and Separator components. Each step is presented inside a c","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ruixen.ui","st":"indexed","u":15,"pl":"https://cdn.21st.dev/ruixen.ui/tour-popover/default/preview.1758996484192.png","pc":"ruixen.ui","tg":["onboarding","popover","progress","steps"]},{"id":"21st:ruixen.ui__tourcard","t":"Tourcard","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/tourcard/default/preview.1753439951340.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__tree-node-tooltip","t":"Tree node tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/tree-node-tooltip/default/preview.1757726448009.png","pc":"ruixen.ui","tg":["file-tree","tooltip"]},{"id":"21st:ruixen.ui__universal-date-picker","t":"Universal date picker","d":"The UniversalDatePicker is a powerful and flexible date selection component designed to cover a wide range of use cases in a single, unified interface. It combines the simplicity o","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"ruixen.ui","st":"indexed","u":21,"pl":"https://cdn.21st.dev/ruixen.ui/universal-date-picker/default/preview.1758959564165.png","pc":"ruixen.ui","tg":["date-picker"]},{"id":"21st:ruixen.ui__url-input","t":"Url input","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/url-input/default/preview.1757010833801.png","pc":"ruixen.ui","tg":["globe"]},{"id":"21st:ruixen.ui__user-context-menu","t":"User context menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/user-context-menu/default/preview.1760578820229.png","pc":"ruixen.ui","tg":["menu","profile"],"sc":16},{"id":"21st:ruixen.ui__video-player-pro","t":"Video player pro","k":"component","s":"21st","c":"media/player","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/video-player-pro/default/preview.1757850879861.png","pc":"ruixen.ui","tg":["video"]},{"id":"21st:ruixen.ui__visual-grid-select","t":"Visual grid select","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/visual-grid-select/default/preview.1758901121402.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__visualizer-button","t":"Visualizer button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ruixen.ui","st":"rated","pl":"https://cdn.21st.dev/ruixen.ui/visualizer-button/default/preview.1758700165853.png","pc":"ruixen.ui","tg":["button"],"sc":15},{"id":"21st:ruixen.ui__voice-message-bubble","t":"Voice message bubble","d":"The Voice Message Bubble component is a sleek, chat-style audio player designed for messaging apps. It features a compact bubble layout with a play/pause button using lucide-react ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ruixen.ui","st":"indexed","u":36,"pl":"https://cdn.21st.dev/ruixen.ui/voice-message-bubble/default/preview.1758700533572.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__wave-background","t":"Wave background","d":"The WaveBackground component is a dynamic WebGL-powered background built using the OGL library. It generates smooth, flowing wave patterns that are ideal for enhancing Hero section","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ruixen.ui","st":"indexed","u":42,"pl":"https://cdn.21st.dev/ruixen.ui/wave-background/default/preview.1758047493621.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__waveform-player","t":"Waveform player","k":"component","s":"21st","c":"media/player","g":"media","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/waveform-player/default/preview.1758695004442.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__wheel-of-time-calendar","t":"Wheel of time calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/wheel-of-time-calendar/default/preview.1758808852393.png","pc":"ruixen.ui","tg":["calendar","date-picker","popover"]},{"id":"21st:ruixen.ui__wheel-pagination","t":"Wheel pagination","d":"This Wheel Pagination component provides a modern, interactive way to navigate through multiple pages. Unlike traditional numeric pagination, it shows a range of page numbers at on","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"ruixen.ui","st":"indexed","u":45,"pl":"https://cdn.21st.dev/ruixen.ui/wheel-pagination/default/preview.1758447586545.png","pc":"ruixen.ui","tg":["pagination"]},{"id":"21st:ruixen.ui__worm-loader","t":"Worm loader","d":"The WormLoader is a vibrant and playful loading animation that uses colorful, gradient-filled worm-like paths gliding smoothly along a curved SVG track. Its dynamic dual-worm motio","k":"component","s":"21st","c":"status/loader","g":"status","a":"ruixen.ui","st":"indexed","u":28,"pl":"https://cdn.21st.dev/ruixen.ui/worm-loader/default/preview.1759087667899.png","pc":"ruixen.ui"},{"id":"21st:ruixen.ui__zoom-depth-tabs","t":"Zoom depth tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/ruixen.ui/zoom-depth-tabs/default/preview.1758469560869.png","pc":"ruixen.ui","tg":["tabs"]},{"id":"21st:rushalb__nav-bar","t":"Nav bar","d":"Modern MObile Nav Bar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"rushalb","st":"indexed","pl":"https://cdn.21st.dev/rushalb/nav-bar/default/preview.1775791246932.png","pc":"rushalb"},{"id":"21st:rxxndy__3d-shader-card","t":"3d shader card","d":"React Three Fiber component with custom GLSL shaders, fresnel rim glow, animated noise iridescence, and smooth bobbing motion.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rxxndy","st":"indexed","pl":"https://cdn.21st.dev/rxxndy/3d-shader-card/default/preview.1768242967355.png","pc":"rxxndy"},{"id":"21st:rxxndy__jelly-button","t":"Jelly button","d":"This is an animated jelly button that squishes and pops out on click, click and hold, or drag. Originally created by https://x.com/cerpow and adapted for clickability as a UI compo","k":"component","s":"21st","c":"actions/button","g":"actions","a":"rxxndy","st":"indexed","pl":"https://cdn.21st.dev/rxxndy/jelly-button/default/preview.1767662275225.png","pc":"rxxndy"},{"id":"21st:rxxndy__neumorphic-button","t":"Neumorphic button","d":"Animated Neumorphic Button with real physical button audio and haptics","k":"component","s":"21st","c":"actions/button","g":"actions","a":"rxxndy","st":"indexed","pl":"https://cdn.21st.dev/rxxndy/neumorphic-button/default/preview.1767721663799.png","pc":"rxxndy"},{"id":"21st:rxxndy__twitter-testimonial-cards","t":"Twitter testimonial cards","d":"These cards were imported from a very popular 21st cards component and adapted for twitter, improved hover state so user can see entire card, improved on mobile, and made theme awa","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"rxxndy","st":"indexed","u":121,"pl":"https://cdn.21st.dev/rxxndy/twitter-testimonial-cards/default/preview.1767662910314.png","pc":"rxxndy","tg":["carousel","testimonials"]},{"id":"21st:ryanflash66__glass-nav","t":"Glass nav","d":"Floating glass-pill navbar that compacts on scroll to just the active tab, with a sliding hover pill, click-to-peek, mobile drawer, and light/dark tones.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"ryanflash66","st":"rated","pl":"https://cdn.21st.dev/ryanflash66/glass-nav/default/preview.1787073003622-1993f08c-1592-47da-b5c2-e729c134c36a.png","pc":"ryanflash66","sc":17},{"id":"21st:rylenlobo__infinite-drag-scroll","t":"Infinite drag scroll","d":"This component is a vertically scrollable and infinitely draggable image gallery built for a seamless and interactive browsing experience. Users can scroll through content using th","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"rylenlobo","st":"indexed","u":131,"pl":"https://cdn.21st.dev/rylenlobo/infinite-drag-scroll/default/preview.1748511550773.png","pc":"rylenlobo","tg":["gallery","scroll-area"]},{"id":"21st:rynkovski__3d-card-1","t":"3d card 1","d":"Here is 3D Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rynkovski","st":"indexed","pl":"https://cdn.21st.dev/larsen66/3d-card-1/default/preview.1750554261740.png","pc":"rynkovski"},{"id":"21st:rynkovski__alert-dialog-icon","t":"Alert dialog icon","d":"Here is Alert Dialog Icon component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"rynkovski","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/alert-dialog-icon/default/preview.1750554425266.png","pc":"rynkovski","tg":["alert","modal"]},{"id":"21st:rynkovski__credit-card","t":"Credit card","d":"An animated credit card component with reveal/hide functionality and smooth transitions.\n\nFeatures\n- Animated card reveal\n- Toggle visibility of sensitive information\n- Smooth spri","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"rynkovski","st":"indexed","u":41,"pl":"https://cdn.21st.dev/user_extendui/credit-card.png","pc":"rynkovski","tg":["card"]},{"id":"21st:rynkovski__error-alert-dialog","t":"Error alert dialog","d":"Here is Error Alert Dialog component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"rynkovski","st":"indexed","pl":"https://cdn.21st.dev/larsen66/error-alert-dialog/default/preview.1750554517848.png","pc":"rynkovski","tg":["alert","modal"]},{"id":"21st:rynkovski__notification-alert-dialog","t":"Notification alert dialog","d":"Here is Notification Alert Dialog component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"rynkovski","st":"rated","u":42,"pl":"https://cdn.21st.dev/larsen66/notification-alert-dialog/default/preview.1750554611355.png","pc":"rynkovski","tg":["alert","avatar","notification","modal"],"sc":16},{"id":"21st:rynkovski__select","t":"Select","d":"A dropdown select component built on top of Radix UI Select primitive. Supports multiple variants, icons, and custom styling.\n\nFeatures\n- Multiple variants (default, filled, flushe","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"rynkovski","st":"indexed","u":29,"pl":"https://cdn.21st.dev/user_extendui/select.png","pc":"rynkovski","tg":["profile","select"]},{"id":"21st:sahibibadov__ripple-button","t":"Ripple button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sahibibadov","st":"indexed","pl":"https://cdn.21st.dev/user_2raN8ECeMUNn12SlnYw1FeyAdrT/ripple-button.png","pc":"sahibibadov"},{"id":"21st:saiconfirst2__saicon-bento-grid","t":"Saicon bento grid","d":"Dark tech-noir bento grid layout for AI/SaaS landing pages. Supports variable column spans (4/5/7/12), glassmorphism cards with neon accent glow, icon slots, big-stat callouts, tag","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"saiconfirst2","st":"indexed","pl":"https://21st.dev/@saiconfirst2/components/saicon-bento-grid","pc":"saiconfirst2"},{"id":"21st:sakibx2821__electric-card","t":"Electric card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sakibx2821","st":"indexed","pl":"https://cdn.21st.dev/sakibx2821/electric-card/default/preview.1761045117440.png","pc":"sakibx2821"},{"id":"21st:sam-c137__scroll-to-top-button","t":"Scroll to top button","d":"Scroll to top button useful for landing pages, automatically hides itself when not scrolled","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sam-c137","st":"indexed","pl":"https://cdn.21st.dev/sam-c137/scroll-to-top-button/default/preview.1772628077358.png","pc":"sam-c137"},{"id":"21st:sam344334__hero","t":"Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sam344334","st":"indexed","u":66,"pl":"https://cdn.21st.dev/sam344334/hero/default/preview.1773995251378.png","pc":"sam344334","tg":["features","grid","hero","profile"]},{"id":"21st:sambape__moon","t":"Moon","k":"component","s":"21st","c":"other","g":"other","a":"sambape","st":"indexed","pl":"https://cdn.21st.dev/user_2swjWanL4k8q1kTKVWNkPV3MAFh/moon/default/preview.png","pc":"sambape"},{"id":"21st:samitkapoor__apple-spotlight","t":"Apple spotlight","d":"A beautiful search component inspired by macOS Spotlight.","k":"component","s":"21st","c":"navigation/command-palette","g":"navigation","a":"samitkapoor","st":"indexed","pl":"https://cdn.21st.dev/samitkapoor/apple-spotlight/default/preview.1763464623165.png","pc":"samitkapoor","tg":["input","search"]},{"id":"21st:samitkapoor__circle-menu","t":"Circle menu","d":"A circular navigation menu that expands items in a circle around a central button with smooth animations and hover effects.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"samitkapoor","st":"indexed","u":63,"pl":"https://cdn.21st.dev/samitkapoor/circle-menu/default/preview.1763715980145.png","pc":"samitkapoor","tg":["menu","navigation-menu"]},{"id":"21st:samsiavoshian2009__backed-by-yc","t":"Backed by yc","d":"A sleek glassmorphism “Backed by YC” pill with a subtle moving glow that follows the cursor—ready to drop straight into landing pages","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"samsiavoshian2009","st":"indexed","u":31,"pl":"https://cdn.21st.dev/samsiavoshian2009/backed-by-yc/default/preview.1758333157833.png","pc":"samsiavoshian2009","tg":["cursor"]},{"id":"21st:samsiavoshian2009__code-block","t":"Code block","d":"Modern code editor component with frosted glass effects, smooth animations, and dual-tab interface. Features theme support and syntax highlighting.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"samsiavoshian2009","st":"indexed","pl":"https://cdn.21st.dev/samsiavoshian2009/code-block/default/preview.1757451537704.png","pc":"samsiavoshian2009"},{"id":"21st:samsiavoshian2009__feedback-prompt","t":"Feedback prompt","d":"A polished feedback UI component that asks “Was this page helpful?” with Yes/No buttons, subtle animations, and a thank‑you message after selection. Fully responsive, supports ligh","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"samsiavoshian2009","st":"indexed","u":7,"pl":"https://cdn.21st.dev/samsiavoshian2009/feedback-prompt/default/preview.1785187693383-cef71ea5-48a6-42a5-8d7c-ea88148fa491.png","pc":"samsiavoshian2009"},{"id":"21st:samsiavoshian2009__globe","t":"Globe","d":"Modern animated globe component with flowing orbital trails and adaptive theme support.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"samsiavoshian2009","st":"indexed","u":40,"pl":"https://cdn.21st.dev/samsiavoshian2009/globe/default/preview.1757479246975.png","pc":"samsiavoshian2009","tg":["globe"]},{"id":"21st:samsiavoshian2009__horizon-glow-gradient","t":"Horizon glow gradient","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#FFFFFF, #78B8F9, #5667FF, #4D2FF9). Features: film grain. A drop-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"samsiavoshian2009","st":"indexed","pl":"https://cdn.21st.dev/samsiavoshian2009/horizon-glow-gradient/default/preview.1786145136780-2712a503-e11d-4747-95ed-30f4a1920028.webp","pc":"samsiavoshian2009"},{"id":"21st:samsiavoshian2009__language-selector-dropdown","t":"Language selector dropdown","d":"A polished language switcher dropdown with flags and labels, supporting multiple languages","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"samsiavoshian2009","st":"indexed","u":120,"pl":"https://cdn.21st.dev/samsiavoshian2009/language-selector-dropdown/default/preview.1757804006655.png","pc":"samsiavoshian2009","tg":["dropdown","select"]},{"id":"21st:samsiavoshian2009__stack-flow-integrator","t":"Stack flow integrator","d":"Glassmorphic, diamond-layout tech-stack showcase with subtle hover motion—drop-in, dual-mode, zero config.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"samsiavoshian2009","st":"indexed","u":20,"pl":"https://cdn.21st.dev/samsiavoshian2009/stack-flow-integrator/default/preview.1757463576522.png","pc":"samsiavoshian2009","tg":["features"]},{"id":"21st:samskanse09__1st-shader","t":"1st shader","d":"Animated WebGL shader background in the Halftone style. Generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"samskanse09","st":"indexed","pl":"https://cdn.21st.dev/samskanse09/1st-shader/default/preview.1784990737383-b8b79c27-2c61-4481-af47-2d4f3107a78b.png","pc":"samskanse09"},{"id":"21st:samson.mshelia__s1-asci-art","t":"S1 asci art","d":"Animated (flicker) ASCII art in the Cross style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"samson.mshelia","st":"indexed","pl":"https://cdn.21st.dev/samson.mshelia/s1-asci-art/default/preview.1785853239881-43c17ee7-162d-4e3b-a7b2-01d828858812.webp","pc":"samson.mshelia"},{"id":"21st:satoriui__dotted-modern","t":"Dotted modern","d":"Hero section with a dotted radial-grid background, animated open-source badge, gradient headline and call-to-action buttons.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"satoriui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/satoriui/dotted-modern/default/preview.1783582078090.png","pc":"satoriui"},{"id":"21st:satoriui__flip-clock","t":"Flip clock","d":"A flip clock UI that displays real-time or a countdown to a target date with smooth 3D flip digit animations, size and color variants.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"satoriui","st":"indexed","pl":"https://cdn.21st.dev/satoriui/flip-clock/default/preview.1784281853737-c261a357-0403-47b9-8ada-cb419ccbdcae.png","pc":"satoriui"},{"id":"21st:satoriui__kinetic-grid","t":"Kinetic grid","d":"An interactive full-screen canvas background of a warping dot grid that bends toward the cursor and ripples outward on click.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"satoriui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/satoriui/kinetic-grid/default/preview.1784426517436-a056f7d3-6f63-4113-94de-5d32c4b5e001.png","pc":"satoriui","tg":["background","grid","hero"]},{"id":"21st:satoriui__slide-up-reveal","t":"Slide up reveal","d":"Animated text component that reveals content by sliding it up, with configurable word, character, or line splitting and stagger.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"satoriui","st":"indexed","pl":"https://cdn.21st.dev/satoriui/slide-up-reveal/default/preview.1783714265701.png","pc":"satoriui","tg":["text"]},{"id":"21st:satoriui__typewriter-loop","t":"Typewriter loop","d":"A looping typewriter headline that cycles through words with animated gradient text, colored backgrounds, and a blinking cursor.","k":"component","s":"21st","c":"status/loader","g":"status","a":"satoriui","st":"indexed","pl":"https://cdn.21st.dev/satoriui/typewriter-loop/default/preview.1783719608025.png","pc":"satoriui"},{"id":"21st:satyam-mishra-dev__circular-text","t":"Circular text","d":"This component is a moving text in circular style","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"satyam-mishra-dev","st":"indexed","pl":"https://cdn.21st.dev/satyam-mishra-dev/circular-text/default/preview.1770718048011.png","pc":"satyam-mishra-dev"},{"id":"21st:satyam-mishra-dev__liquid-swipe","t":"Liquid swipe","d":"Cool liquid unlock button ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"satyam-mishra-dev","st":"indexed","pl":"https://cdn.21st.dev/satyam-mishra-dev/liquid-swipe/default/preview.1770962090863.png","pc":"satyam-mishra-dev"},{"id":"21st:satyam-mishra-dev__motion-menu","t":"Motion menu","d":"MotionMenu is an interactive navigation component that uses smooth animations and directional hover effects to create a dynamic, engaging menu experience.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"satyam-mishra-dev","st":"indexed","pl":"https://cdn.21st.dev/satyam-mishra-dev/motion-menu/default/preview.1775479390140.png","pc":"satyam-mishra-dev"},{"id":"21st:saurabh-2607__accordion","t":"Accordion","d":"An interactive Accordion component with smooth expand/collapse animations.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/accordion/default/preview.1786534460779-97484f3b-0c8c-48ef-8b8b-87f79b96e241.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__aceternity-button","t":"Aceternity button","d":"A soft, convex tactile button component featuring inner shadows, active scaling states, and smooth gradients for premium feedback.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/aceternity-button/default/preview.1786535072048-cb3318a7-a448-47e3-94c5-c73068e64d71.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__animated-link","t":"Animated link","d":"An interactive link component supporting 13 premium hover variants including custom clipping masks, SVG sine waves, and text marquee animations.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/animated-link/default/preview.1786534747814-ffa4abc7-ccf3-4080-bb39-6103ab4bcaf0.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__button","t":"Button","d":"A versatile button component supporting multiple variants, sizes, icons, and a loading state.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/button/default/preview.1786534534306-3ce6109c-1b22-4f74-b647-3b4c8856b287.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-aceternity-button","t":"Great ui aceternity button","d":"A soft, convex tactile button component featuring inner shadows, active scaling states, and smooth gradients for premium feedback.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-aceternity-button/default/preview.1785392089184-052077a7-8e78-4a30-95d6-199d4cd6e9f2.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-animated-link","t":"Great ui animated link","d":"An interactive link component supporting 13 premium hover variants including custom clipping masks, SVG sine waves, and text marquee animations.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"saurabh-2607","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/great-ui-animated-link/default/preview.1785396357786-f08fbfd6-df4f-4644-93dd-e53436a4a613.png","pc":"saurabh-2607","tg":["link","navigation-menu"]},{"id":"21st:saurabh-2607__great-ui-animated-select","t":"Great ui animated select","d":"A premium interactive dropdown component with dynamic spring-based menu expanding animations and sequenced staggering list items.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-animated-select/default/preview.1785396394150-7200d2d5-432b-4369-9d8b-d70328212441.png","pc":"saurabh-2607","tg":["dropdown","select"]},{"id":"21st:saurabh-2607__great-ui-ascii-image","t":"Great ui ascii image","d":"A real-time hardware-accelerated WebGL shader component that proceduralizes any image into customizable density-based ASCII art with masking overlays.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"saurabh-2607","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/great-ui-ascii-image/default/preview.1785392176713-24c1f7a4-9911-45ef-a87e-47038e9363fb.png","pc":"saurabh-2607","tg":["image"]},{"id":"21st:saurabh-2607__great-ui-avatar-stack","t":"Great ui avatar stack","d":"A dynamic stack of overlapping user avatars featuring custom tooltip display variants that track hover directions or coordinates with spring dynamics.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-avatar-stack/default/preview.1785392932125-8d83d256-46c6-4877-9826-6c9359317949.png","pc":"saurabh-2607","tg":["tooltip"]},{"id":"21st:saurabh-2607__great-ui-button","t":"Great ui button","d":"A versatile button component supporting multiple variants, sizes, icons, and a loading state.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-button/default/preview.1785389790885-a9dff532-c6c4-4ea4-9d4e-211164e877ff.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-cyber-glitch-shader","t":"Great ui cyber glitch shader","d":"A fullscreen WebGL page transition that applies an RGB-split chromatic aberration glitch effect across the viewport during route changes.","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"saurabh-2607","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/great-ui-cyber-glitch-shader/default/preview.1785395911491-ccf87293-b3c2-40c0-958c-660ac6cfb4bd.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-deployment-checklist","t":"Great ui deployment checklist","d":"An interactive CI/CD pipeline protocol checklist depicting git clone, install, build, and deploy stages with custom animated status icons.","k":"component","s":"21st","c":"media/icon","g":"media","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-deployment-checklist/default/preview.1785392975153-21e65dd7-594e-4db5-94d0-00bcd1484fb2.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-diagonal-marquee-carousel","t":"Great ui diagonal marquee carousel","d":"A premium diagonally slanted, infinitely scrolling marquee showing cards or landscapes with offset speeds, alternating directions, and soft gradients.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"saurabh-2607","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/great-ui-diagonal-marquee-carousel/default/preview.1785392953253-191810cf-6637-4a1c-9c74-87269fde2d7f.png","pc":"saurabh-2607","tg":["carousel","marquee"]},{"id":"21st:saurabh-2607__great-ui-image-hover-reveal","t":"Great ui image hover reveal","d":"A dual-image avatar surface implementing directional hover reveals and cursor coordinate tracking spring slices.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-image-hover-reveal/default/preview.1785392909121-51692c3a-215f-4b30-8f63-4ae3c4a97aad.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-liquid-dissolve-shader","t":"Great ui liquid dissolve shader","d":"A fullscreen WebGL page transition that melts the viewport away using organic fractal noise dissolve during route changes.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-liquid-dissolve-shader/default/preview.1785395977988-c6c22904-0964-477d-8dd9-7e0a18ef439c.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-liquid-ripple-shader","t":"Great ui liquid ripple shader","d":"A fullscreen WebGL page transition that animates a fluid concentric ripple wave expanding from the center of the viewport during route changes.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-liquid-ripple-shader/default/preview.1785395877503-8aeba892-e7ae-43ed-83fb-95cf82dd58cd.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-macbook-mockup","t":"Great ui macbook mockup","d":"A realistic 3D Macbook Pro device frame mockup with aluminum casing, keyboard base, and dual-pane WhatsApp Web chat UI.","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"saurabh-2607","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/great-ui-macbook-mockup/default/preview.1785392133061-0e06a9be-e5bf-4a65-aaca-086891af8373.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-minimal-buttons","t":"Great ui minimal buttons","d":"A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-minimal-buttons/default/preview.1785390526307-fe0cfbf6-f742-4da1-b31c-197f64bdfd27.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-minimal-buttons-larsen66","t":"Great ui minimal buttons larsen66","d":"A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-minimal-buttons/default/preview.1785391190028-9e0e391a-1235-49ee-96d3-fb7b771f142b.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-mobile-mockup","t":"Great ui mobile mockup","d":"An interactive mobile device frame mockup with a realistic smartphone chassis, status bar, and WhatsApp mobile chat UI.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-mobile-mockup/default/preview.1785392111155-c06edeec-81ae-46a0-9016-ba9c06abb16a.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-revision-timeline","t":"Great ui revision timeline","d":"A premium interactive document revision history log timeline featuring Gaussian-weighted dial scale indicators, spring-based sliding position centering, and parsed markdown log lis","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"saurabh-2607","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/great-ui-revision-timeline/default/preview.1785395842067-ba1f27cf-e128-4548-993a-768709af923d.png","pc":"saurabh-2607","tg":["timeline"]},{"id":"21st:saurabh-2607__great-ui-terminal-loader","t":"Great ui terminal loader","d":"A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.","k":"component","s":"21st","c":"status/loader","g":"status","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-terminal-loader/default/preview.1785392995100-0c5479e9-be6d-43f6-9c84-7765432dc24d.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-vinyl-album-card","t":"Great ui vinyl album card","d":"An interactive music album card with a spinning vinyl record that emerges from the cover sleeve upon hover.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-vinyl-album-card/default/preview.1785392155054-d3a8c929-a22d-495e-96d0-f901f3ca75c6.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__great-ui-vortex-spiral-shader","t":"Great ui vortex spiral shader","d":"A fullscreen WebGL page transition that spins a rotating swirl vortex wipe across the viewport during route changes.","k":"component","s":"21st","c":"status/loader","g":"status","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/larsen66/great-ui-vortex-spiral-shader/default/preview.1785395944186-c3ab0124-a67b-4206-9918-6b68b55642bd.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__minimal-buttons","t":"Minimal buttons","d":"A tactile, retro-modern button component featuring beveled top-border highlights, inner gradients, and inset shadow detailing.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/minimal-buttons/default/preview.1786534976605-3f0b2c46-bfcd-4a35-8a23-b0c7825c0c11.png","pc":"saurabh-2607"},{"id":"21st:saurabh-2607__terminal-loader","t":"Terminal loader","d":"A retro, terminal-inspired monospace loading indicator that animates character blocks and trailing density particles in real-time.","k":"component","s":"21st","c":"status/loader","g":"status","a":"saurabh-2607","st":"indexed","pl":"https://cdn.21st.dev/saurabh-2607/terminal-loader/default/preview.1786534829143-c841765a-66a3-4c45-9938-840c2a20fb12.png","pc":"saurabh-2607"},{"id":"21st:saurabh10102__be-ui-404-not-found","t":"Be ui 404 not found","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-404-not-found/default/preview.1782487811497.png","pc":"saurabh10102","tg":["empty-state"]},{"id":"21st:saurabh10102__be-ui-action-swap","t":"Be ui action swap","k":"component","s":"21st","c":"other","g":"other","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-action-swap/default/preview.1782311612620.png","pc":"saurabh10102"},{"id":"21st:saurabh10102__be-ui-animated-badge","t":"Be ui animated badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"saurabh10102","st":"rated","u":2,"pl":"https://cdn.21st.dev/larsen66/be-ui-animated-badge/default/preview.1782310441222.png","pc":"saurabh10102","tg":["badge","spinner"],"sc":22},{"id":"21st:saurabh10102__be-ui-bouncy-accordion","t":"Be ui bouncy accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-bouncy-accordion/default/preview.1782316083609.png","pc":"saurabh10102","tg":["accordion","icon","list"]},{"id":"21st:saurabh10102__be-ui-button","t":"Be ui button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-button/default/preview.1782386568751.png","pc":"saurabh10102","tg":["button"]},{"id":"21st:saurabh10102__be-ui-command-palette","t":"Be ui command palette","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"saurabh10102","st":"rated","pl":"https://cdn.21st.dev/larsen66/be-ui-command-palette/default/preview.1782489250585.png","pc":"saurabh10102","tg":["search"],"sc":22},{"id":"21st:saurabh10102__be-ui-create-menu","t":"Be ui create menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-create-menu/default/preview.1782487254402.png","pc":"saurabh10102","tg":["menu"]},{"id":"21st:saurabh10102__be-ui-drawer","t":"Be ui drawer","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-drawer/default/preview.1782325086339.png","pc":"saurabh10102","tg":["modal"]},{"id":"21st:saurabh10102__be-ui-dynamic-island","t":"Be ui dynamic island","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-dynamic-island/default/preview.1782488922489.png","pc":"saurabh10102","tg":["notification"]},{"id":"21st:saurabh10102__be-ui-expanable-action-bar","t":"Be ui expanable action bar","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"saurabh10102","st":"rated","pl":"https://cdn.21st.dev/larsen66/be-ui-expanable-action-bar/default/preview.1782388276316.png","pc":"saurabh10102","tg":["badge","dock","menu"],"sc":24},{"id":"21st:saurabh10102__be-ui-expandable-tabs","t":"Be ui expandable tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-expandable-tabs/default/preview.1782390392203.png","pc":"saurabh10102","tg":["dock","navigation-menu","tabs"]},{"id":"21st:saurabh10102__be-ui-file-upload","t":"Be ui file upload","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"saurabh10102","st":"rated","pl":"https://cdn.21st.dev/larsen66/be-ui-file-upload/default/preview.1782392967903.png","pc":"saurabh10102","tg":["progress","upload-download"],"sc":24},{"id":"21st:saurabh10102__be-ui-marquee","t":"Be ui marquee","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-marquee/default/preview.1782387001993.png","pc":"saurabh10102","tg":["marquee","scroll-area"]},{"id":"21st:saurabh10102__be-ui-morphing-modal","t":"Be ui morphing modal","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-morphing-modal/default/preview.1782304683540.png","pc":"saurabh10102","tg":["modal"]},{"id":"21st:saurabh10102__be-ui-multi-chain-swap","t":"Be ui multi chain swap","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-multi-chain-swap/default/preview.1782488379673.png","pc":"saurabh10102","tg":["dropdown"]},{"id":"21st:saurabh10102__be-ui-number-animation","t":"Be ui number animation","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-number-animation/default/preview.1782305987436.png","pc":"saurabh10102","tg":["number","stat"]},{"id":"21st:saurabh10102__be-ui-otp-input","t":"Be ui otp input","d":"This is OTP Input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-otp-input/default/preview.1782397481606.png","pc":"saurabh10102"},{"id":"21st:saurabh10102__be-ui-prediction-market","t":"Be ui prediction market","k":"component","s":"21st","c":"other","g":"other","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-prediction-market/default/preview.1782396827088.png","pc":"saurabh10102"},{"id":"21st:saurabh10102__be-ui-range-slider","t":"Be ui range slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-range-slider/default/preview.1782327040624.png","pc":"saurabh10102","tg":["slider"]},{"id":"21st:saurabh10102__be-ui-swipeable-list","t":"Be ui swipeable list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"saurabh10102","st":"rated","u":10,"pl":"https://cdn.21st.dev/larsen66/be-ui-swipeable-list/default/preview.1782391961161.png","pc":"saurabh10102","tg":["list"],"sc":18},{"id":"21st:saurabh10102__be-ui-text-animation","t":"Be ui text animation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-text-animation/default/preview.1782305407228.png","pc":"saurabh10102"},{"id":"21st:saurabh10102__be-ui-theme-toggle","t":"Be ui theme toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-theme-toggle/default/preview.1782313016934.png","pc":"saurabh10102","tg":["toggle"]},{"id":"21st:saurabh10102__be-ui-tilt-card","t":"Be ui tilt card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/be-ui-tilt-card/default/preview.1782386219096.png","pc":"saurabh10102","tg":["card"]},{"id":"21st:saurabh10102__beui-bottom-sheet","t":"Beui bottom sheet","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-bottom-sheet/default/preview.1782299659191.png","pc":"saurabh10102","tg":["list"]},{"id":"21st:saurabh10102__beui-checkbox","t":"Beui checkbox","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-checkbox/default/preview.1782227927012.png","pc":"saurabh10102","tg":["checkbox"]},{"id":"21st:saurabh10102__beui-dock","t":"Beui dock","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-dock/default/preview.1782301447228.png","pc":"saurabh10102","tg":["list"]},{"id":"21st:saurabh10102__beui-radio-group","t":"Beui radio group","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-radio-group/default/preview.1782228400581.png","pc":"saurabh10102","tg":["pricing-section","radio-group"]},{"id":"21st:saurabh10102__beui-switch","t":"Beui switch","d":"This is Switch component.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-switch/default/preview.1782312069174.png","pc":"saurabh10102","tg":["toggle"]},{"id":"21st:saurabh10102__beui-tabs","t":"Beui tabs","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-tabs/default/preview.1782227132657.png","pc":"saurabh10102","tg":["tabs"]},{"id":"21st:saurabh10102__beui-tooltip","t":"Beui tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/beui-tooltip/default/preview.1782303986093.png","pc":"saurabh10102","tg":["tooltip"]},{"id":"21st:saurabh10102__dock","t":"Dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dock/default/preview.1782303132629.png","pc":"saurabh10102","tg":["dock","navigation-menu"]},{"id":"21st:saurabh10102__loader","t":"Loader","d":"Animated loading indicator with seventeen variants including spinner, dots, bars, dot-matrix, morph, comet, metaballs, newton, helix, percent and terminal-style ascii spinners, sca","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/saurabh10102/loader/default/preview.1784690972437-9f278e21-7f13-4c43-8f26-f1fc6a01c318.png","pc":"saurabh10102","tg":["progress","spinner"]},{"id":"21st:saurabh10102__overflow-actions","t":"Overflow actions","d":"Connected pill rail for primary actions that springs open to reveal extra controls. Built with Motion layout animations, controllable expanded state, and hover-capable detection fo","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"saurabh10102","st":"indexed","pl":"https://21st.dev/@saurabh10102/components/overflow-actions","pc":"saurabh10102"},{"id":"21st:saurabh10102__scroll-animation","t":"Scroll animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"saurabh10102","st":"indexed","pl":"https://cdn.21st.dev/larsen66/scroll-animation/default/preview.1782322923211.png","pc":"saurabh10102","tg":["scroll-area"]},{"id":"21st:savasaachimarketingagency__reveal","t":"Reveal","d":"Scroll-triggered reveal wrapper - IntersectionObserver fade/slide entrance with stagger delays, a pop variant, and prefers-reduced-motion support","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"savasaachimarketingagency","st":"indexed","pl":"https://cdn.21st.dev/savasaachimarketingagency/reveal/default/preview.1785193260525-a0f7ea9f-3d93-4ea4-a85b-1671843840ed.png","pc":"savasaachimarketingagency"},{"id":"21st:savnitya__bull","t":"Bull","d":"Animated (flicker) ASCII art in the Matrix style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"savnitya","st":"indexed","pl":"https://cdn.21st.dev/savnitya/bull/default/preview.1785482421806-609f3184-95ea-416a-ae12-9be9ad8a20e0.webp","pc":"savnitya"},{"id":"21st:scoobynko__snake-loader","t":"Snake loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"scoobynko","st":"indexed","pl":"https://cdn.21st.dev/scoobynko/snake-loader/default/preview.1781790809200.png","pc":"scoobynko"},{"id":"21st:scriptvg__button","t":"Button","d":"A simple button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"scriptvg","st":"indexed","pl":"https://cdn.21st.dev/scriptvg/button/default/preview.1786139734805-2e3c0414-d353-497b-a371-5cdbac1d7306.png","pc":"scriptvg"},{"id":"21st:scrollxui__particles","t":"Particles","d":"A 3D interactive particle field rendered with three.js that reacts to mouse movement and supports customizable color, count, and size.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"scrollxui","st":"indexed","pl":"https://cdn.21st.dev/scrollxui/particles/default/preview.1785315466109-4ae51e61-4a3f-413d-8bbf-8655c23c9ad5.png","pc":"scrollxui"},{"id":"21st:sean0205__3d-testimonails","t":"3d testimonails","d":"A marquee component continuously scrolls text, images, or videos in an infinite loop, with customizable speed, direction, and responsive design for engaging displays.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"sean0205","st":"indexed","u":528,"pl":"https://cdn.21st.dev/sean0205/3d-testimonails/default/preview.1751128591723.png","pc":"sean0205","tg":["marquee","scroll-area","testimonials"]},{"id":"21st:sean0205__accordion","t":"Accordion","d":"Accordion component based on Radix UI.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"sean0205","st":"indexed","u":62,"pl":"https://cdn.21st.dev/sean0205/accordion/default/preview.1748022485133.png","pc":"sean0205","tg":["accordion","faq"]},{"id":"21st:sean0205__accordion-1","t":"Accordion 1","d":"A collapsible panel that can be expanded or collapsed.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"sean0205","st":"indexed","u":26,"pl":"https://cdn.21st.dev/sean0205/accordion-1/default/preview.1751396903318.png","pc":"sean0205","tg":["accordion","faq","list"]},{"id":"21st:sean0205__alert","t":"Alert","d":"Displays a callout for user attention, such as a success message, warning, or error.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"sean0205","st":"indexed","u":78,"pl":"https://cdn.21st.dev/sean0205/alert/default/preview.1748399906867.png","pc":"sean0205","tg":["alert"]},{"id":"21st:sean0205__alert-1","t":"Alert 1","d":"Displays a callout for user attention, such as a success message, warning, or error.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"sean0205","st":"indexed","u":231,"pl":"https://cdn.21st.dev/sean0205/alert-1/default/preview.1751434599072.png","pc":"sean0205","tg":["alert","icon","notification"]},{"id":"21st:sean0205__alert-dialog","t":"Alert dialog","d":"A modal dialog that interrupts the user with important content and expects a response.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/alert-dialog/default/preview.1751440099093.png","pc":"sean0205"},{"id":"21st:sean0205__area-charts-1","t":"Area charts 1","d":" Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and a","k":"layout","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/area-charts-1/default/preview.1753376923606.png","pc":"sean0205","tg":["dashboard"]},{"id":"21st:sean0205__area-charts-2","t":"Area charts 2","d":"Area charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/area-charts-2/default/preview.1753866563555.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__avatar","t":"Avatar","d":"An image element with a fallback for representing the user.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"sean0205","st":"indexed","u":872,"pl":"https://cdn.21st.dev/sean0205/avatar/default/preview.1751453758312.png","pc":"sean0205","tg":["avatar","icon","image","profile"]},{"id":"21st:sean0205__badge-2","t":"Badge 2","d":"A Badge is a small, visually distinct element used to display contextual metadata, such as status, category, or notifications, enhancing the clarity and organization of your design","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"sean0205","st":"indexed","u":1133,"pl":"https://cdn.21st.dev/sean0205/badge-1/default/preview.1751391624600.png","pc":"sean0205","tg":["badge","icon","notification","number"]},{"id":"21st:sean0205__badge-variants","t":"Badge variants","d":"Badge color and appearance  variants","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"sean0205","st":"indexed","u":45,"pl":"https://cdn.21st.dev/sean0205/badge-variants/default/preview.1748697033017.png","pc":"sean0205","tg":["badge","chip"]},{"id":"21st:sean0205__base-accordion","t":"Base accordion","d":"A set of collapsible panels with headings, built with Base UI components.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"sean0205","st":"indexed","u":22,"pl":"https://cdn.21st.dev/sean0205/base-accordion/default/preview.1758780821537.png","pc":"sean0205","tg":["accordion","faq"]},{"id":"21st:sean0205__base-avatar-1","t":"Base avatar 1","d":"An easily stylable avatar component built with Base UI components.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"sean0205","st":"indexed","u":19,"pl":"https://cdn.21st.dev/sean0205/base-avatar/default/preview.1759745762730.png","pc":"sean0205","tg":["badge","avatar","profile","team"]},{"id":"21st:sean0205__base-badge","t":"Base badge","d":"A customizable badge component built with Base UI and useRender hook for composition.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"sean0205","st":"indexed","u":44,"pl":"https://cdn.21st.dev/sean0205/base-badge/default/preview.1758873435453.png","pc":"sean0205","tg":["badge","chip","icon","link"]},{"id":"21st:sean0205__base-button","t":"Base button","d":"Renders a clickable button or an element styled as a button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sean0205","st":"indexed","u":59,"pl":"https://cdn.21st.dev/sean0205/base-button/default/preview.1758790671324.png","pc":"sean0205","tg":["button","icon","link","spinner"]},{"id":"21st:sean0205__base-input","t":"Base input","d":"Displays a form input field, input groups, number input spinners, etc.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","u":17,"pl":"https://cdn.21st.dev/sean0205/base-input/default/preview.1758883778654.png","pc":"sean0205","tg":["input","upload-download"]},{"id":"21st:sean0205__base-menu","t":"Base menu","d":"A list of actions in a dropdown, enhanced with keyboard navigation. Built on top of Base UI Menu component with shadcn styling.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","u":38,"pl":"https://cdn.21st.dev/sean0205/base-menu/default/preview.1759131606388.png","pc":"sean0205","tg":["checkbox","menu","radio-group"]},{"id":"21st:sean0205__base-popover","t":"Base popover","d":"A floating panel that appears on demand. Built on top of Base UI Popover component with shadcn styling.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/base-popover/default/preview.1759732961650.png","pc":"sean0205","tg":["popover","tooltip"]},{"id":"21st:sean0205__beam-grid-hero","t":"Beam grid hero","d":"A responsive grid background with animated moving beams.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/beam-grid-hero/default/preview.1751008609310.png","pc":"sean0205"},{"id":"21st:sean0205__breadcramb","t":"Breadcramb","d":"\nDisplays a hierarchy of links to the current page or resource in an application.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sean0205","st":"indexed","u":41,"pl":"https://cdn.21st.dev/sean0205/breadcramb/default/preview.1751443356891.png","pc":"sean0205","tg":["icon","link","navigation-menu"]},{"id":"21st:sean0205__breadcrumb","t":"Breadcrumb","d":"Displays a hierarchy of links to the current page or resource in an application.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/breadcrumb/default/preview.1752418355132.png","pc":"sean0205"},{"id":"21st:sean0205__button","t":"Button","d":"Advanced button component with extended options and variants.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"sean0205","st":"indexed","u":96,"pl":"https://cdn.21st.dev/sean0205/button/default/preview.1747736911530.png","pc":"sean0205","tg":["notification"]},{"id":"21st:sean0205__button-1","t":"Button 1","d":"Renders a clickable button or an element styled as a button with advance options","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sean0205","st":"indexed","u":1344,"pl":"https://cdn.21st.dev/sean0205/button-1/default/preview.1751360999319.png","pc":"sean0205","tg":["button","icon","link"]},{"id":"21st:sean0205__calendar","t":"Calendar","d":"A date field component that allows users to enter and edit dates.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/calendar/default/preview.1751450937844.png","pc":"sean0205"},{"id":"21st:sean0205__calendar-1","t":"Calendar 1","d":"A date field component that allows users to enter and edit dates.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/calendar-1/default/preview.1753166298206.png","pc":"sean0205"},{"id":"21st:sean0205__card","t":"Card","d":"Containers for displaying content and actions about a single subject.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/card/default/preview.1752552298420.png","pc":"sean0205","tg":["avatar","card","list","profile"]},{"id":"21st:sean0205__carousel","t":"Carousel","d":"A carousel with motion and swipe built using Embla.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"sean0205","st":"indexed","u":34,"pl":"https://cdn.21st.dev/sean0205/carousel/default/preview.1761028508506.png","pc":"sean0205","tg":["carousel"]},{"id":"21st:sean0205__chart","t":"Chart","d":"A chart component for displaying data visualizations built using Recharts.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/chart/default/preview.1753376258679.png","pc":"sean0205","tg":["data-visualization"]},{"id":"21st:sean0205__checkbox","t":"Checkbox","d":"A control that allows the user to toggle between checked and not checked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/user_2wpPk1CyWKAxM46S7k5UoCQhmqF/checkbox/default/preview.1748457148462.png","pc":"sean0205","tg":["checkbox"]},{"id":"21st:sean0205__checkbox-1","t":"Checkbox 1","d":"A control that allows the user to toggle between checked and not checked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/checkbox-1/default/preview.1753879881661.png","pc":"sean0205","tg":["checkbox"]},{"id":"21st:sean0205__code","t":"Code","d":"A component used to display inline code, with ability to copy the content by a button.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/code/default/preview.1753101686253.png","pc":"sean0205"},{"id":"21st:sean0205__collapsible","t":"Collapsible","d":"An interactive component that expands/collapses a panel.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/collapsible/default/preview.1751454916633.png","pc":"sean0205","tg":["link"]},{"id":"21st:sean0205__command","t":"Command","d":"Fast, composable, unstyled command menu for React.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/command/default/preview.1761027402425.png","pc":"sean0205","tg":["list","menu","modal","search"]},{"id":"21st:sean0205__context-menu","t":"Context menu","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/context-menu/default/preview.1753111624264.png","pc":"sean0205","tg":["checkbox","menu","radio-group"]},{"id":"21st:sean0205__context-menu-1","t":"Context menu 1","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/context-menu-1/default/preview.1757353910314.png","pc":"sean0205","tg":["checkbox","menu","radio-group"]},{"id":"21st:sean0205__data-grid-table","t":"Data grid table","d":"Here is Data Grid Table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"sean0205","st":"indexed","u":128,"pl":"https://cdn.21st.dev/larsen66/data-grid-table/default/preview.1753987126875.png","pc":"sean0205","tg":["checkbox","dashboard","pagination","profile"]},{"id":"21st:sean0205__dialog","t":"Dialog","d":"A modal dialog that interrupts the user with important content and expects a response.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sean0205","st":"indexed","u":29,"pl":"https://cdn.21st.dev/sean0205/dialog/default/preview.1760802452677.png","pc":"sean0205","tg":["faq","modal","scroll-area","textarea"]},{"id":"21st:sean0205__drawer","t":"Drawer","d":"A drawer component for React.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/drawer/default/preview.1753112127723.png","pc":"sean0205"},{"id":"21st:sean0205__dropdown-menu","t":"Dropdown menu","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","u":203,"pl":"https://cdn.21st.dev/sean0205/dropdown-menu/default/preview.1752865023411.png","pc":"sean0205","tg":["checkbox","dropdown","menu","notification"]},{"id":"21st:sean0205__file-upload","t":"File upload","d":"A file upload component for React.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"sean0205","st":"indexed","u":74,"pl":"https://cdn.21st.dev/sean0205/file-upload/default/preview.1753469683048.png","pc":"sean0205","tg":["image","table","upload-download"]},{"id":"21st:sean0205__form","t":"Form","d":"Building forms with React Hook Form and Zod schema validation.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","u":28,"pl":"https://cdn.21st.dev/sean0205/form/default/preview.1760593952200.png","pc":"sean0205"},{"id":"21st:sean0205__hover-card","t":"Hover card","d":"For sighted users to preview content available behind a link.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/hover-card/default/preview.1753163353827.png","pc":"sean0205"},{"id":"21st:sean0205__hover-card-1","t":"Hover card 1","d":"For sighted users to preview content available behind a link.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/hover-card-1/default/preview.1757495121314.png","pc":"sean0205","tg":["profile"]},{"id":"21st:sean0205__input","t":"Input","d":"Displays a form input field, input groups, number input spinners, date input, date time input, time inputs, etc.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","u":53,"pl":"https://cdn.21st.dev/sean0205/input/default/preview.1751535692156.png","pc":"sean0205","tg":["form","input","upload-download"]},{"id":"21st:sean0205__kanban","t":"Kanban","d":"A drag-and-drop kanban component designed for seamless item organization across customizable columns.","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/kanban/default/preview.1753099436891.png","pc":"sean0205"},{"id":"21st:sean0205__kbd-1","t":"Kbd 1","d":"Displays keyboard input or shortcut keys with customizable styles and sizes.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/kbd/default/preview.1751536489465.png","pc":"sean0205","tg":["icon"]},{"id":"21st:sean0205__label","t":"Label","d":"Provides a text label for form elements to improve clarity and accessibility.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/label/default/preview.1753165714562.png","pc":"sean0205"},{"id":"21st:sean0205__line-charts-1","t":"Line charts 1","d":" Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and a","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","u":100,"pl":"https://cdn.21st.dev/sean0205/line-charts-1/default/preview.1753790538463.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__line-charts-2","t":"Line charts 2","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/line-charts-2/default/preview.1753789538642.png","pc":"sean0205"},{"id":"21st:sean0205__line-charts-4","t":"Line charts 4","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","u":27,"pl":"https://cdn.21st.dev/sean0205/line-charts-4/default/preview.1753858314135.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__line-charts-5","t":"Line charts 5","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/line-charts-5/default/preview.1753859211493.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__line-charts-6","t":"Line charts 6","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/line-charts-6/default/preview.1753860147185.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__line-charts-8","t":"Line charts 8","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/line-charts-8/default/preview.1753861821561.png","pc":"sean0205","tg":["dashboard"]},{"id":"21st:sean0205__line-charts-9","t":"Line charts 9","d":"Line charts designed to present key metrics and insights. Each chart features unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and an","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"sean0205","st":"indexed","u":117,"pl":"https://cdn.21st.dev/sean0205/line-charts-9/default/preview.1753865024108.png","pc":"sean0205","tg":["data-visualization","dashboard"]},{"id":"21st:sean0205__menubar","t":"Menubar","d":"A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/menubar/default/preview.1757493302978.png","pc":"sean0205","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:sean0205__mono-alerts","t":"Mono alerts","d":"Displays a callout for user attention, such as a success message, warning, or error.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"sean0205","st":"indexed","u":23,"pl":"https://cdn.21st.dev/sean0205/mono-alerts/default/preview.1751129447765.png","pc":"sean0205","tg":["alert","icon","notification"]},{"id":"21st:sean0205__navigation-menu","t":"Navigation menu","d":"A collection of links for navigating websites.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","u":78,"pl":"https://cdn.21st.dev/sean0205/navigation-menu/default/preview.1757353474730.png","pc":"sean0205","tg":["dropdown","menu","link","navigation-menu"]},{"id":"21st:sean0205__navigation-menu-1","t":"Navigation menu 1","d":"A navigation menu component with keyboard navigation and accessibility features.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","u":53,"pl":"https://cdn.21st.dev/sean0205/navigation-menu-1/default/preview.1759732285928.png","pc":"sean0205","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:sean0205__outline-accordion","t":"Outline accordion","d":"A collapsible panel that can be expanded or collapsed.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"sean0205","st":"indexed","u":26,"pl":"https://cdn.21st.dev/sean0205/outline-accordion/default/preview.1751352313745.png","pc":"sean0205","tg":["accordion","faq"]},{"id":"21st:sean0205__pagination","t":"Pagination","d":"A responsive pagination component for navigating through multiple pages of content.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"sean0205","st":"indexed","u":46,"pl":"https://cdn.21st.dev/sean0205/pagination/default/preview.1751537476937.png","pc":"sean0205","tg":["navigation-menu","pagination"]},{"id":"21st:sean0205__popover","t":"Popover","d":"Displays rich and interactive content in a portal, triggered by a button or other interactive element.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"sean0205","st":"indexed","u":20,"pl":"https://cdn.21st.dev/sean0205/popover/default/preview.1752732977543.png","pc":"sean0205","tg":["popover"]},{"id":"21st:sean0205__progress","t":"Progress","d":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/user_2wpPk1CyWKAxM46S7k5UoCQhmqF/progress/default/preview.1751354170088.png","pc":"sean0205","tg":["card","progress","spinner","upload-download"]},{"id":"21st:sean0205__progress-1","t":"Progress 1","d":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/progress-1/default/preview.1753169245364.png","pc":"sean0205","tg":["progress","upload-download"]},{"id":"21st:sean0205__rating","t":"Rating","d":"A customizable star rating component that supports read-only display and interactive input modes.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","u":55,"pl":"https://cdn.21st.dev/sean0205/rating/default/preview.1757402950989.png","pc":"sean0205","tg":["form","icon","input"]},{"id":"21st:sean0205__resizable","t":"Resizable","d":"Accessible resizable panel groups and layouts with keyboard support.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/resizable/default/preview.1752866156847.png","pc":"sean0205","tg":["border","sidebar"]},{"id":"21st:sean0205__resizable-1","t":"Resizable 1","d":"Accessible resizable panel groups and layouts with keyboard support.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/resizable-1/default/preview.1757354605913.png","pc":"sean0205","tg":["sidebar"]},{"id":"21st:sean0205__reui-aspect-ratio","t":"Reui aspect ratio","d":"Responsive media containers in eight ReUI aspect ratios for widescreen, standard, square, ultrawide, portrait, photography, social media, and monitor layouts.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/reui-aspect-ratio/default/preview.1785303506830-b2c0aebe-0aef-4f01-8aa9-16ea47a378d1.png","pc":"sean0205","tg":["image"]},{"id":"21st:sean0205__reui-autocomplete","t":"Reui autocomplete","d":"An accessible autocomplete input from ReUI with filtering, labels, clear and trigger controls, grouped people, asynchronous search results, and compact sizing.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-autocomplete/default/preview.1785311597811-489707a3-e6e5-4647-baf7-17a0629784d4.png","pc":"sean0205","tg":["search"]},{"id":"21st:sean0205__reui-combobox","t":"Reui combobox","d":"ReUI Combobox with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-combobox/default/preview.1785328892137-ae6f9869-5ea6-4ae3-8a41-b3c5ca2ab1c4.png","pc":"sean0205"},{"id":"21st:sean0205__reui-date-selector","t":"Reui date selector","d":"ReUI Date Selector with the first 4 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-date-selector/default/preview.1785328208947-04a8c59e-0811-4c42-926e-d7f37994826e.png","pc":"sean0205"},{"id":"21st:sean0205__reui-empty","t":"Reui empty","d":"ReUI Empty with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-empty/default/preview.1785328219922-717c7ed6-d1a8-4173-ac6f-af33bbaeee76.png","pc":"sean0205"},{"id":"21st:sean0205__reui-event-calendar","t":"Reui event calendar","d":"ReUI Event Calendar with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-event-calendar/default/preview.1785328225614-cc5abe97-83f9-4132-a6df-9d115670b068.png","pc":"sean0205","tg":["calendar"]},{"id":"21st:sean0205__reui-field","t":"Reui field","d":"ReUI Field with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-field/default/preview.1785326281313-71e27ff8-3d77-4d8c-a094-e267335c03fe.png","pc":"sean0205"},{"id":"21st:sean0205__reui-frame","t":"Reui frame","d":"ReUI Frame with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"other","g":"other","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-frame/default/preview.1785389325669-89ddf7d8-6000-4b6f-a094-cb4e146fef07.png","pc":"sean0205"},{"id":"21st:sean0205__reui-gantt","t":"Reui gantt","d":"ReUI Gantt with the first 5 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-gantt/default/preview.1785328640124-bea70f4f-a407-4c39-881b-83f74271a8ba.png","pc":"sean0205"},{"id":"21st:sean0205__reui-icon-stack","t":"Reui icon stack","d":"ReUI Icon Stack with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sean0205","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reui-icon-stack/default/preview.1785328701082-65ca8a3e-a9fb-4e44-89a4-442d9112eca3.png","pc":"sean0205"},{"id":"21st:sean0205__reui-icon-tile","t":"Reui icon tile","d":"ReUI Icon Tile with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-icon-tile/default/preview.1785328783365-5db79ed7-5281-4f84-a6ae-634efec6508b.png","pc":"sean0205"},{"id":"21st:sean0205__reui-input-group","t":"Reui input group","d":"ReUI Input Group with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-input-group/default/preview.1785341219442-18b5c90a-7759-413d-9503-93b6237d698c.png","pc":"sean0205"},{"id":"21st:sean0205__reui-input-otp","t":"Reui input otp","d":"ReUI Input OTP with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-input-otp/default/preview.1785341210607-669c022b-7c99-4790-8a52-5528b2de3401.png","pc":"sean0205","tg":["input"]},{"id":"21st:sean0205__reui-item","t":"Reui item","d":"ReUI Item with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"sean0205","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/reui-item/default/preview.1785341229928-062132cb-12dc-4578-8bd1-b61e79af5de7.png","pc":"sean0205"},{"id":"21st:sean0205__reui-native-select","t":"Reui native select","d":"ReUI Native Select with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-native-select/default/preview.1785341212863-f9dc1b64-6392-411e-820c-5874cd26f650.png","pc":"sean0205"},{"id":"21st:sean0205__reui-number-field","t":"Reui number field","d":"ReUI Number Field with the first 6 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-number-field/default/preview.1785341210989-f67cd52e-5bb7-479b-9d0e-4ab3eaf5ff4f.png","pc":"sean0205"},{"id":"21st:sean0205__reui-radio-group","t":"Reui radio group","d":"ReUI Radio Group with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-radio-group/default/preview.1785419114024-225b3195-a346-42db-ac5e-48742cc784e3.png","pc":"sean0205","tg":["radio-group"]},{"id":"21st:sean0205__reui-scrollspy","t":"Reui scrollspy","d":"ReUI Scrollspy with the first 2 official ReUI examples, preserved from the MIT-licensed source registry.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-scrollspy/default/preview.1785348454728-85f10233-3e13-4e8c-99a4-09f279b397bd.png","pc":"sean0205"},{"id":"21st:sean0205__reui-spinner","t":"Reui spinner","d":"ReUI Spinner with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"status/loader","g":"status","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/larsen66/reui-spinner/default/preview.1785395690480-9a95a7d7-5a10-471b-af54-b1bd763a4c83.png","pc":"sean0205","tg":["spinner"]},{"id":"21st:sean0205__reui-switch","t":"Reui switch","d":"ReUI Switch with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"sean0205","st":"indexed","u":2,"pl":"https://cdn.21st.dev/larsen66/reui-switch/default/preview.1785420408690-22dcd362-2410-484e-ab68-b86714c7d2cc.png","pc":"sean0205"},{"id":"21st:sean0205__scroll-area","t":"Scroll area","d":"Augments native scroll functionality for custom, cross-browser styling.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"sean0205","st":"indexed","u":56,"pl":"https://cdn.21st.dev/sean0205/scroll-area/default/preview.1752746277921.png","pc":"sean0205","tg":["scroll-area","team"]},{"id":"21st:sean0205__select","t":"Select","d":"Displays a list of options for the user to pick from—triggered by a button.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"sean0205","st":"indexed","u":90,"pl":"https://cdn.21st.dev/sean0205/select/default/preview.1752036231001.png","pc":"sean0205","tg":["dropdown","form","icon","input"]},{"id":"21st:sean0205__separator","t":"Separator","d":"Visually or semantically separates content into groups.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"sean0205","st":"indexed","u":13,"pl":"https://cdn.21st.dev/sean0205/separator/default/preview.1752648732672.png","pc":"sean0205","tg":["link"]},{"id":"21st:sean0205__sheet","t":"Sheet","d":"Extends the Dialog component to display content that complements the main content of the screen.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sean0205","st":"rated","pl":"https://cdn.21st.dev/sean0205/sheet/default/preview.1753878030706.png","pc":"sean0205","tg":["faq","modal","scroll-area","textarea"],"sc":16},{"id":"21st:sean0205__skeleton","t":"Skeleton","d":"Used to show a placeholder while content is loading.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"sean0205","st":"indexed","u":11,"pl":"https://cdn.21st.dev/sean0205/skeleton/default/preview.1752037415883.png","pc":"sean0205","tg":["avatar","spinner"]},{"id":"21st:sean0205__slider","t":"Slider","d":"An input where the user selects a value from within a given range.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"sean0205","st":"indexed","u":17,"pl":"https://cdn.21st.dev/sean0205/slider/default/preview.1752038222927.png","pc":"sean0205","tg":["input","slider","tooltip"]},{"id":"21st:sean0205__sonner","t":"Sonner","d":"An opinionated toast component for React.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"sean0205","st":"indexed","u":108,"pl":"https://cdn.21st.dev/sean0205/sonner/default/preview.1752689348770.png","pc":"sean0205","tg":["alert","notification","toast"]},{"id":"21st:sean0205__sortable","t":"Sortable","d":"A drag-and-drop sortable component designed for seamless item organization across customizable columns.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"sean0205","st":"indexed","u":58,"pl":"https://cdn.21st.dev/sean0205/sortable/default/preview.1757489871341.png","pc":"sean0205","tg":["grid","list"]},{"id":"21st:sean0205__statistics-card-1","t":"Statistics card 1","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","u":105,"pl":"https://cdn.21st.dev/sean0205/statistics-card-1/default/preview.1753165340688.png","pc":"sean0205","tg":["badge","card","dashboard","stat"]},{"id":"21st:sean0205__statistics-card-10","t":"Statistics card 10","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","u":63,"pl":"https://cdn.21st.dev/sean0205/statistics-card-10/default/preview.1753168295511.png","pc":"sean0205"},{"id":"21st:sean0205__statistics-card-12","t":"Statistics card 12","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"sean0205","st":"indexed","u":17,"pl":"https://cdn.21st.dev/sean0205/statistics-card-12/default/preview.1753374103818.png","pc":"sean0205","tg":["dashboard"]},{"id":"21st:sean0205__statistics-card-13","t":"Statistics card 13","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","u":60,"pl":"https://cdn.21st.dev/sean0205/statistics-card-13/default/preview.1753110282553.png","pc":"sean0205","tg":["card","dashboard","progress"]},{"id":"21st:sean0205__statistics-card-14","t":"Statistics card 14","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/statistics-card-14/default/preview.1753168209758.png","pc":"sean0205"},{"id":"21st:sean0205__statistics-card-2","t":"Statistics card 2","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sean0205","st":"indexed","u":50,"pl":"https://cdn.21st.dev/sean0205/statistics-card-2/default/preview.1753104706690.png","pc":"sean0205","tg":["badge","card","dashboard","dropdown"]},{"id":"21st:sean0205__statistics-card-7","t":"Statistics card 7","d":"Statistics Card is designed to present key metrics and insights featuring unique layouts, data visualizations, and styling options. Perfect for dashboards, admin panels, and analyt","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"sean0205","st":"indexed","u":81,"pl":"https://cdn.21st.dev/sean0205/statistics-card-7/default/preview.1753372970551.png","pc":"sean0205","tg":["badge","card","dashboard"]},{"id":"21st:sean0205__stepper","t":"Stepper","d":"A step-by-step process for users to navigate through a series of steps.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"sean0205","st":"indexed","u":477,"pl":"https://cdn.21st.dev/sean0205/stepper/default/preview.1751698456461.png","pc":"sean0205","tg":["progress","spinner","table","steps"]},{"id":"21st:sean0205__svg-text","t":"Svg text","d":"Display text with animated SVG backgrounds. Perfect for creating dynamic text effects with custom SVG graphics and animations.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"sean0205","st":"indexed","u":13,"pl":"https://cdn.21st.dev/sean0205/svg-text/default/preview.1750861587864.png","pc":"sean0205","tg":["text"]},{"id":"21st:sean0205__table","t":"Table","d":"A responsive table component with support for headers, footers, and custom styling.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"sean0205","st":"indexed","u":52,"pl":"https://cdn.21st.dev/sean0205/table/default/preview.1752042210618.png","pc":"sean0205","tg":["profile","table"]},{"id":"21st:sean0205__tabs","t":"Tabs","d":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"sean0205","st":"indexed","u":308,"pl":"https://cdn.21st.dev/sean0205/tabs/default/preview.1752045530193.png","pc":"sean0205","tg":["badge","icon","notification","navigation-menu"]},{"id":"21st:sean0205__textarea","t":"Textarea","d":"A multi-line text input field with support for custom styling and states.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/textarea/default/preview.1752050116367.png","pc":"sean0205","tg":["input","textarea"]},{"id":"21st:sean0205__toggle-1","t":"Toggle 1","d":"A two-state button that can be either on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"sean0205","st":"indexed","u":32,"pl":"https://cdn.21st.dev/sean0205/toggle/default/preview.1752751331914.png","pc":"sean0205","tg":["toggle"]},{"id":"21st:sean0205__toggle-group","t":"Toggle group","d":"https://reui.io/docs/toggle-group","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/sean0205/toggle-group/default/preview.1753081659370.png","pc":"sean0205"},{"id":"21st:sean0205__toggle-group-1","t":"Toggle group 1","d":"A set of two-state buttons that can be toggled on or off..","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"sean0205","st":"indexed","u":37,"pl":"https://cdn.21st.dev/sean0205/toggle-group-1/default/preview.1753845776069.png","pc":"sean0205","tg":["toggle"]},{"id":"21st:sean0205__tooltip","t":"Tooltip","d":"Displays brief, contextual information when hovering over or focusing on an element, improving clarity without cluttering the interface.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"sean0205","st":"indexed","u":81,"pl":"https://cdn.21st.dev/sean0205/tooltip/default/preview.1752082296386.png","pc":"sean0205","tg":["tooltip"]},{"id":"21st:sean0205__tree","t":"Tree","d":"A customizable tree component for React.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"sean0205","st":"rated","pl":"https://cdn.21st.dev/sean0205/tree/default/preview.1752753496333.png","pc":"sean0205","tg":["file-tree","list"],"sc":17},{"id":"21st:sehajbindra__features","t":"Features","d":"A dynamic, scrollable feature showcase with auto-progress animation,\n * built using React, Framer Motion, and Tailwind CSS.\n * Highlights multiple features with icon support, image","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sehajbindra","st":"indexed","u":248,"pl":"https://cdn.21st.dev/sehajbindra/features/default/preview.1785938486857.png","pc":"sehajbindra","tg":["features"]},{"id":"21st:selfmadesystem__wave","t":"Wave","d":"A wave","k":"component","s":"21st","c":"other","g":"other","a":"selfmadesystem","st":"indexed","pl":"https://cdn.21st.dev/user_2rxce5m0vbSDawgT1lb3pRy2X7C/wave/wave/preview.png","pc":"selfmadesystem"},{"id":"21st:senommu__ai-model-select","t":"Ai model select","d":"Cursor-style AI model picker with Effort, Context, Fast and Thinking controls plus a hover Edit flyout.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/senommu/ai-model-select/default/preview.1785634513838-49f5408d-af23-49c0-948f-44bef4b301fe.webp","pc":"senommu","tg":["ai-chat","select"]},{"id":"21st:senommu__ai-prompt-input","t":"Ai prompt input","d":"Premium AI prompt composer with rotating placeholders, floating toolbar, and Cursor-style model selector.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/senommu/ai-prompt-input/default/preview.1785639871090-395d2732-391c-4d72-ae59-bd1fdcdc1931.webp","pc":"senommu","tg":["ai-chat"]},{"id":"21st:senommu__button","t":"Button","d":"Button - Homlu UI","k":"component","s":"21st","c":"actions/button","g":"actions","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/homlu/button/default/preview.1784125726934.png","pc":"senommu","tg":["button"]},{"id":"21st:senommu__git-hub-sky","t":"Git hub sky","d":"Interactive night-sky glass card — one real star hides among hundreds of twinkles. Discover it to reveal a refined star-on-GitHub CTA with cursor parallax, bloom, and a cinematic s","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/senommu/git-hub-sky/default/preview.1785312664752-1c43a5f1-a110-4a44-a339-0874c7117dc1.png","pc":"senommu","tg":["cta"]},{"id":"21st:senommu__input","t":"Input","d":"Input | Homlu UI","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/homlu/input/default/preview.1784132721335.png","pc":"senommu","tg":["input"]},{"id":"21st:senommu__letter-morph","t":"Letter morph","d":"Letter Morph Motoko UI","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/senommu/letter-morph/default/preview.1785311947371-a8e1107e-0819-4d85-8954-3682127b61ce.png","pc":"senommu"},{"id":"21st:senommu__line-shader-homlu-ui","t":"Line shader homlu ui","d":"Animated WebGL shader background in the Aurora style, generated by the 21st.dev Shader Builder. 4-color palette (#0A0A12, #5B2A86, #D64FA8, #FFC2E2). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/homlu/line-shader-homlu-ui/default/preview.1784205972564-e9c8db3d-9bd1-4dc9-9e6f-46c3b0fb6e40.webp","pc":"senommu"},{"id":"21st:senommu__terminal-pikachu","t":"Terminal pikachu","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a glitch, terminal look. A drop-in, zero-dependency ","k":"component","s":"21st","c":"media/player","g":"media","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/homlu/terminal-pikachu/default/preview.1784206270382-3ce20923-36f5-444f-ba1f-15df84bc4987.webp","pc":"senommu","tg":["video"]},{"id":"21st:senommu__waves-shaders-homlu-ui","t":"Waves shaders homlu ui","d":"Animated WebGL shader background in the Waves style, generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). Features: film grain. A drop-in","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/homlu/waves-shaders-homlu-ui/default/preview.1784198770036-296f4b27-ad66-4a44-a318-a720415dc4e3.webp","pc":"senommu"},{"id":"21st:sensewood8__ai-code-hero-section","t":"Ai code hero section","d":"A stunning dark-themed hero section featuring animated beam effects, glassmorphic UI elements, and an interactive code input area. Perfect for AI-powered developer tools, SaaS land","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sensewood8","st":"indexed","pl":"https://cdn.21st.dev/sensewood8/ai-code-hero-section/default/preview.1768642028631.png","pc":"sensewood8"},{"id":"21st:sensewood8__claude-style-chat-input","t":"Claude style chat input","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"sensewood8","st":"indexed","pl":"https://cdn.21st.dev/sensewood8/claude-style-chat-input/default/preview.1766469408921.png","pc":"sensewood8","tg":["chip","input","upload-download"]},{"id":"21st:sensewood8__energy-beam","t":"Energy beam","d":"Dynamic energy beam effect using Unicorn Studio's WebGL engine. Perfect for futuristic backgrounds and immersive UI experiences with pulsing, flowing energy animations.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sensewood8","st":"indexed","u":108,"pl":"https://cdn.21st.dev/sensewood8/energy-beam/default/preview.1768806701222.png","pc":"sensewood8"},{"id":"21st:sensewood8__feature-grid-cta","t":"Feature grid cta","d":"Modern feature grid with a stunning CTA card featuring background imagery, glassmorphism effects, phone mockup preview, and trusted-by company logos. Perfect for SaaS landing pages","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sensewood8","st":"indexed","pl":"https://cdn.21st.dev/sensewood8/feature-grid-cta/default/preview.1768807414917.png","pc":"sensewood8"},{"id":"21st:sensewood8__responsive-hero-banner","t":"Responsive hero banner","d":"A stunning full-screen hero section featuring a cinematic background image, glassmorphic navigation bar with backdrop blur, animated badge, elegant serif typography, dual call-to-a","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sensewood8","st":"indexed","u":348,"pl":"https://cdn.21st.dev/sensewood8/responsive-hero-banner/default/preview.1768644363827.png","pc":"sensewood8","tg":["badge","cta","hero"]},{"id":"21st:sensewood8__volumetric-light-halo","t":"Volumetric light halo","d":"Stunning volumetric light halo effect with dual-layer WebGL animation over a vibrant gradient background. Perfect for immersive hero sections and futuristic UI experiences.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sensewood8","st":"indexed","pl":"https://cdn.21st.dev/sensewood8/volumetric-light-halo/default/preview.1768807092091.png","pc":"sensewood8"},{"id":"21st:senthilindiagit__productrangecard","t":"Productrangecard","d":"Light product/category card that lifts on hover while two preview image tiles fan out from behind it (expertise-style reveal). Drop in real photos via previews[].imageSrc or use CS","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"senthilindiagit","st":"indexed","pl":"https://21st.dev/@senthilindiagit/components/productrangecard","pc":"senthilindiagit"},{"id":"21st:serafimcloud__absinthe","t":"Absinthe","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a glitch, neon look. A drop-in, zero-dependency ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/absinthe/default/preview.1783763325899.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__abstract-plasma","t":"Abstract plasma","d":"Animated WebGL shader background in the Plasma style, generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). A drop-in, zero-dependency Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/abstract-plasma/default/preview.1783763777262.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__abstract-ripple","t":"Abstract ripple","d":"Animated WebGL shader background in the Rings style, generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/abstract-ripple/default/preview.1783764026699.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__agent-chat","t":"Agent chat","d":"Drop-in chat shell composing a scrollable message list with an input composer at the bottom. Supports user/assistant text bubbles, error states, attachment chips, and a centered em","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"serafimcloud","st":"indexed","u":47,"pl":"https://21st.dev/@serafimcloud/components/agent-chat","pc":"serafimcloud","tg":["ai-chat","empty-state"]},{"id":"21st:serafimcloud__alert","t":"Alert","d":"Alert in shadcn/ui format","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"serafimcloud","st":"indexed","u":397,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/alert/default/preview.png","pc":"serafimcloud","tg":["alert","notification"]},{"id":"21st:serafimcloud__alert-badge","t":"Alert badge","d":"Alert Badge inspired by Tremor","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"serafimcloud","st":"indexed","u":28,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/alert-badge/default/preview.png","pc":"serafimcloud","tg":["alert","badge","icon","link"]},{"id":"21st:serafimcloud__amber-dusk","t":"Amber dusk","d":"Animated (shimmer) ASCII art in the Diamond style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, film look. A drop-in, zero-dependency R","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/amber-dusk/default/preview.1783763417466.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__amber-dusk-2","t":"Amber dusk 2","d":"Animated (shimmer) ASCII art in the Diamond style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, film look. A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/amber-dusk/default/preview.1783763461401.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__amethyst-bloom","t":"Amethyst bloom","d":"Animated WebGL shader background in the Metaballs style, generated by the 21st.dev Shader Builder. 4-color palette (#10002B, #5A189A, #9D4EDD, #E0AAFF). A drop-in, zero-dependency ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/amethyst-bloom/default/preview.1783763451800.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__amethyst-wash","t":"Amethyst wash","d":"Animated WebGL shader background in the Waves style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). Features: high intensity. A dro","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/amethyst-wash/default/preview.1783757901683.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__amount-slider","t":"Amount slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/amount-slider/default/preview.1784932261374-3cc9d4d2-72a4-43ae-a14b-5275b31d26f4.png","pc":"serafimcloud","tg":["pricing-section","slider"]},{"id":"21st:serafimcloud__animated-blur-number","t":"Animated blur number","d":"An animated number that transitions digit-by-digit with an iOS-style spring, blurring only the digits that change. A drop-in for counters, stats, prices and live metrics.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_danverr/animated-blur-number/default/preview.1780483105301.png","pc":"serafimcloud","tg":["number","stat"]},{"id":"21st:serafimcloud__animated-menu","t":"Animated menu","d":"A React component featuring an animated menu with Rive icons, inspired by @guerriero_se's UI experiment.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"serafimcloud","st":"indexed","u":47,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/animated-menu.png","pc":"serafimcloud","tg":["menu"]},{"id":"21st:serafimcloud__animated-mosaic-portrait","t":"Animated mosaic portrait","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, colorful, mosaic look. A drop-in, zero-depe","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/animated-mosaic-portrait/default/preview.1783765367594.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__attachment-button","t":"Attachment button","d":"Round attachment trigger button — plus or paperclip preset, or any custom icon. Self-contained port from 21st.dev Agent Elements.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"serafimcloud","st":"indexed","u":4,"pl":"https://21st.dev/@serafimcloud/components/attachment-button","pc":"serafimcloud","tg":["upload-download"]},{"id":"21st:serafimcloud__badge-delta","t":"Badge delta","d":"Badge component in shadcn/ui format inspired by Tremor","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","u":131,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/badge-delta/default/preview.png","pc":"serafimcloud","tg":["badge","card","icon"]},{"id":"21st:serafimcloud__balloons","t":"Balloons","d":"shadcn/ui-like implementation of balloons.js","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/balloons/default/preview.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__balloons--text","t":"Text","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/balloons/text/preview.png?v=1","pc":"serafimcloud"},{"id":"21st:serafimcloud__banner","t":"Banner","d":"Banner alert inspired by shadcn/ui format","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"serafimcloud","st":"indexed","u":271,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/banner/default/preview.png","pc":"serafimcloud","tg":["alert"]},{"id":"21st:serafimcloud__bash-tool","t":"Bash tool","k":"component","s":"21st","c":"other","g":"other","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/bash-tool","pc":"serafimcloud"},{"id":"21st:serafimcloud__blue-light-swirl","t":"Blue light swirl","d":"Animated WebGL shader background in the Warp stripes style, generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). Features: high intensity","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/blue-light-swirl/default/preview.1783763886700.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__brick-wall","t":"Brick wall","d":"Animated (pulse) ASCII art in the Bricks style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic, pixel look. A drop-in, zero-dependency React","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/brick-wall/default/preview.1783763679523.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__brick-wall-2","t":"Brick wall 2","d":"Animated (pulse) ASCII art in the Bricks style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic, pixel look. A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/brick-wall/default/preview.1783763707873.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__bright-lagoon","t":"Bright lagoon","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#A8F0C8, #34B2D7, #345CB5, #121519). Features: soft blur finish. A dr","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/bright-lagoon/default/preview.1783766649636.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__button-retro","t":"Button retro","d":"Here is Button Retro component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-retro/default/preview.1760290102489.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__code-rain","t":"Code rain","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a glitch, neon, terminal look. A drop-in, zero-d","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/code-rain/default/preview.1783761651266.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__color-carousel","t":"Color carousel","d":"Pure CSS gradient background in the Orbit Sweep style, made with the 21st.dev Gradient Builder. 5-color palette (#FF5F6D, #FFC371, #6DD5FA, #B06AB3, #FF5F6D). Features: soft blur f","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/color-carousel/default/preview.1783767188375.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__command-menu","t":"Command menu","d":"A pill that grows into a command panel on hover, tap or Cmd+K: a highlight that slides between items and even diagonally into the theme row, a rotating status line, arrow/j-k navig","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/command-menu/default/preview.1785366369294-e505ca5f-efaa-4304-94fd-7a57a0e3795b.png","pc":"serafimcloud","tg":["menu"]},{"id":"21st:serafimcloud__contact-cards","t":"Contact cards","d":"The whole contact row of a personal site: a copy-email button that copies in place, a GitHub icon whose card carries a year of contributions, and any other links you add. Cards cro","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"serafimcloud","st":"indexed","u":2,"pl":"https://cdn.21st.dev/serafimcloud/contact-cards/default/preview.1785365676902-5c75a9f3-1eb3-44f3-9961-beb1557f7371.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__coral-gloom","t":"Coral gloom","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#123A6B, #E4676B, #F4B3C2, #FBF3E7). Features: soft blur finish, f","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/coral-gloom/default/preview.1783767490182.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__cotton-bubblegum-lilac","t":"Cotton bubblegum lilac","d":"Pure CSS gradient background in the Repeat Bands style, made with the 21st.dev Gradient Builder. 4-color palette (#FCE4EC, #F7B7D2, #BFD8F2, #E3D5F5). Features: soft blur finish. A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/cotton-bubblegum-lilac/default/preview.1783766152565.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__crimson-veil","t":"Crimson veil","d":"Animated WebGL shader background in the Aurora style, generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). A drop-in, zero-dependency Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/crimson-veil/default/preview.1783759620830.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__dead-channel","t":"Dead channel","d":"Animated (flicker) ASCII art in the Voxel style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a crt, glitch look. A drop-in, zero-dependency React ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/dead-channel/default/preview.1783763754095.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__dead-channel-2","t":"Dead channel 2","d":"Animated (flicker) ASCII art in the Voxel style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a crt, glitch look. A drop-in, zero-dependency React ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/dead-channel/default/preview.1783763754579.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__deep-horizon","t":"Deep horizon","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#08243B, #12507A, #2E8FA6, #7DD0C0). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/deep-horizon/default/preview.1783765230145.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__deep-sea","t":"Deep sea","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#000428, #004E92). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/deep-sea/default/preview.1783765547715.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__desert-horizon","t":"Desert horizon","d":"Pure CSS gradient background in the Layered Tide style, made with the 21st.dev Gradient Builder. 4-color palette (#FFF1CF, #F6C177, #D08B5B, #7A4B3A). Features: soft blur finish. A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/desert-horizon/default/preview.1783766389455.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__dotted-dialog","t":"Dotted dialog","d":"A customized dialog component based on shadcn/ui Dialog with a dotted background pattern inspired by Motion.dev website.\n\nFeatures:\n\t•\tDotted background pattern with blur effect\n\t•","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"serafimcloud","st":"indexed","u":159,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/dotted-dialog.png","pc":"serafimcloud","tg":["modal"]},{"id":"21st:serafimcloud__dotted-veil","t":"Dotted veil","d":"Animated WebGL shader background in the Halftone style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/dotted-veil/default/preview.1783764082002.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__dreamy-pastel-wash","t":"Dreamy pastel wash","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#DCEBF7, #B9D4EC, #F3D9E4, #F7EFE3). Features: soft blur finish, fil","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/dreamy-pastel-wash/default/preview.1783766016601.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__edit-tool","t":"Edit tool","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/edit-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__electric-aura","t":"Electric aura","d":"Animated WebGL shader background in the Orb style, generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). A drop-in, zero-dependency React ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/electric-aura/default/preview.1783761411929.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__electric-bloom","t":"Electric bloom","d":"Animated WebGL shader background in the Orb style, generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). Features: high intensity. A drop-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/electric-bloom/default/preview.1783761356677.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__electric-gaze","t":"Electric gaze","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, glitch, pixel look. A drop-in, zero-depe","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/electric-gaze/default/preview.1783765904635.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__ember","t":"Ember","d":"Animated (pulse) ASCII art in the Dots style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, film look. A drop-in, zero-dependency React ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ember/default/preview.1783763461491.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__ember-bloom","t":"Ember bloom","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#FFE9A8, #F58B3C, #B02E4A, #25101E). Features: soft blur finish. A dr","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/ember-bloom/default/preview.1783766604475.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__ember-drift","t":"Ember drift","d":"Animated WebGL shader background in the Rings style, generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). Features: high intensity. A dro","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ember-drift/default/preview.1783763972972.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__ember-footer-cta","t":"Ember footer cta","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"serafimcloud","st":"indexed","u":4,"pl":"https://cdn.21st.dev/serafimcloud/ember-footer-cta/default/preview.1785362639009-4c64c2cc-0571-473d-815f-e6549456b4a2.png","pc":"serafimcloud","tg":["cta","footer"]},{"id":"21st:serafimcloud__empty-state","t":"Empty state","d":"Empty state card with shadcn/ui buttons.\n\nInspired by @AndyRyanWeir","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"serafimcloud","st":"indexed","u":768,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/empty-state.png","pc":"serafimcloud","tg":["empty-state"]},{"id":"21st:serafimcloud__error-message","t":"Error message","d":"Compact red-tinted error card with optional title and message body. Self-contained port from 21st.dev Agent Elements.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"serafimcloud","st":"indexed","u":4,"pl":"https://21st.dev/@serafimcloud/components/error-message","pc":"serafimcloud","tg":["ai-chat","alert"]},{"id":"21st:serafimcloud__ethereal-whispers","t":"Ethereal whispers","d":"Animated WebGL shader background in the Smoke style, generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). Features: high intensity. A dro","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/ethereal-whispers/default/preview.1783756110250.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__fey-button","t":"Fey button","d":"Fey.com trial button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","u":110,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/fey-button/default/preview.1737986965259.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__file-attachment","t":"File attachment","d":"File/image chip for AI chat input. Renders file icons by extension, image thumbnails, image-only mode, and a hover-revealed remove button. Self-contained port from 21st.dev Agent E","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","u":4,"pl":"https://21st.dev/@serafimcloud/components/file-attachment","pc":"serafimcloud","tg":["chip"]},{"id":"21st:serafimcloud__filter-badge","t":"Filter badge","d":"Filter Badge inspired by Tremor","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","u":95,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/filter-badge/default/preview.png","pc":"serafimcloud","tg":["badge"]},{"id":"21st:serafimcloud__filter-bar","t":"Filter bar","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/filter-bar","pc":"serafimcloud"},{"id":"21st:serafimcloud__first-light","t":"First light","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, film look. A drop-in, zero-dependency Re","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/first-light/default/preview.1783762965708.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__flicker-burst","t":"Flicker burst","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, glitch, monochrome look. A drop-in, ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/flicker-burst/default/preview.1783765654076.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__flicker-cityscape","t":"Flicker cityscape","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, glitch, neon look. A drop-in, zero-d","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/flicker-cityscape/default/preview.1783765859622.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__flicker-tower","t":"Flicker tower","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, minimal, monochrome look. A drop-in,","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/flicker-tower/default/preview.1783765002836.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__flip-button","t":"Flip button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/flip-button.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__floating-action-button","t":"Floating action button","d":"Apple-Inspired Floating Action Buttons. \n\nInspired by @KumailNanji and @ln-dev7","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","u":97,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/floating-action-button.png","pc":"serafimcloud","tg":["button","link"]},{"id":"21st:serafimcloud__floral-veil","t":"Floral veil","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#EAF4FC, #B28FCE, #A8C5E6, #F4B3C2). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/floral-veil/default/preview.1783764696677.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__forest-meadow","t":"Forest meadow","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#134E5E, #71B280). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/forest-meadow/default/preview.1783765592411.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__forest-meadow-2","t":"Forest meadow 2","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#134E5E, #71B280). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/forest-meadow/default/preview.1783765626052.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__front-page","t":"Front page","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a halftone, monochrome look. A drop-in, zero-dep","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/front-page/default/preview.1783763272064.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__generic-tool","t":"Generic tool","d":"Render a simple tool row for custom tools. Provide title/subtitle and toggle the shimmer with isPending. Optional left icon. Self-contained port from 21st.dev Agent Elements.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","u":10,"pl":"https://21st.dev/@serafimcloud/components/generic-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__ghostly-embrace","t":"Ghostly embrace","d":"Animated WebGL shader background in the Metaballs style, generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). Features: high intensity. A","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ghostly-embrace/default/preview.1783763506946.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__golden-halo","t":"Golden halo","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 3-color palette (#7A4B3A, #F8B500, #FBE6B8). Features: soft blur finish, film grain","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/golden-halo/default/preview.1783767765795.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__golden-radiance-shimmer","t":"Golden radiance shimmer","d":"Animated (shimmer) ASCII art in the Diamond style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, colorful, retro look. A drop-in, zero-d","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/golden-radiance-shimmer/default/preview.1783765814578.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__gradient-button","t":"Gradient button","d":"A beautiful button component with animated gradient background and border effects, inspired by Aaron Iker's implementation of James design concept.\n\nFeatures\n- Smooth gradient anim","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"serafimcloud","st":"indexed","u":1892,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/gradient-button.png","pc":"serafimcloud","tg":["border"]},{"id":"21st:serafimcloud__halftone-vibe","t":"Halftone vibe","d":"Animated WebGL shader background in the Halftone style, generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). Features: high intensity. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/halftone-vibe/default/preview.1783764930570.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__halftone-vibe-2","t":"Halftone vibe 2","d":"Animated WebGL shader background in the Halftone style, generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). Features: high intensity. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/halftone-vibe/default/preview.1783764973091.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__help-popper","t":"Help popper","d":"Sidebar help button with a promo card that glides into it when hidden: the button then wears a blue dot and bounces, and its menu keeps the docked card plus what's new.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/help-popper/default/preview.1784961559622-3eb76873-0a67-4369-9835-873c574fb3e6.png","pc":"serafimcloud","tg":["popover","sidebar"]},{"id":"21st:serafimcloud__herbarium","t":"Herbarium","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a film, halftone look. A drop-in, zero-dependency Rea","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/herbarium/default/preview.1783763505905.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__herbarium-2","t":"Herbarium 2","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a film, halftone look. A drop-in, zero-dependency Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/herbarium/default/preview.1783763506723.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__hero","t":"Hero","d":"Hero inspired by Nua - https://v0.dev/chat/nua-vBWQ6sXmEIT","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/hero/default/preview.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__hero-with-mockup","t":"Hero with mockup","d":"A modern, animated hero section with mockup display and gradient effects inspired by Launch UI. It features a large headline, description, dual CTAs, and a floating mockup image.\n\n","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"serafimcloud","st":"indexed","u":856,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/hero-with-mockup.png","pc":"serafimcloud","tg":["dashboard"]},{"id":"21st:serafimcloud__hotkey","t":"Hotkey","d":"Display a keyboard shortcut hint compatible with shadcn/ui components such as Input and Tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/hotkey.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__hover-button","t":"Hover button","d":"Button Hover Animation inspired by twitter.com/aaroniker_me","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/hover-button.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__hover-effect","t":"Hover effect","d":"Hover over the cards and the effect slides to the currently hovered card.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"serafimcloud","st":"indexed","u":226,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/hover-effect.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__ink-garden","t":"Ink garden","d":"Animated (pulse) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a minimal, monochrome look. A drop-in, zero-dependency","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ink-garden/default/preview.1783762718846.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__input-bar","t":"Input bar","d":"Chat composer with auto-resizing textarea, attachment chips for staged images/files, send/stop button, and slot-based left/right toolbar actions for mode pickers, model selectors, ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"serafimcloud","st":"indexed","u":14,"pl":"https://21st.dev/@serafimcloud/components/input-bar","pc":"serafimcloud","tg":["ai-chat","chip","input","textarea"]},{"id":"21st:serafimcloud__iris-bloom","t":"Iris bloom","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#4C6CB3, #B28FCE, #F4B3C2). Features: soft blur finish, film grain. ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/iris-bloom/default/preview.1783765642550.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__iris-bloom-2","t":"Iris bloom 2","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 3-color palette (#4C6CB3, #B28FCE, #F4B3C2). Features: soft blur finish, film grain. ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/iris-bloom/default/preview.1783765671695.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__iris-petal","t":"Iris petal","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#1B1035, #4A3A8C, #B58AC9, #F5D6E6). Features: soft blur finish, fil","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/iris-petal/default/preview.1783765898576.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__jade-orb","t":"Jade orb","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 3-color palette (#2F5D46, #7FBF9A, #EEF6E3). Features: soft blur finish, film grain","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/jade-orb/default/preview.1783767536169.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__jade-sky","t":"Jade sky","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#EEF6E3, #B7D98E, #7FBF9A, #CFE9F0). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/jade-sky/default/preview.1783764963797.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__lapis-peach-swirl","t":"Lapis peach swirl","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#EAF4FC, #1E50A2, #F09199, #895B8A). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/lapis-peach-swirl/default/preview.1783763858443.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__listbox","t":"Listbox","d":"Listbox with react-aria","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/listbox/default/preview.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__marine-foam","t":"Marine foam","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#0F5C63, #3F9EA8, #A9E2D9, #EAF7F2). Features: soft blur finish, fil","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/marine-foam/default/preview.1783765853436.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__marine-horizon","t":"Marine horizon","d":"Pure CSS gradient background in the Orbit Sweep style, made with the 21st.dev Gradient Builder. 4-color palette (#EBF6F7, #A2D7DD, #00A3AF, #274A78). A drop-in, zero-dependency Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/marine-horizon/default/preview.1783767138241.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__markdown","t":"Markdown","k":"component","s":"21st","c":"actions/link","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/markdown","pc":"serafimcloud","tg":["list","link","table"]},{"id":"21st:serafimcloud__marquee","t":"Marquee","d":"Inspired by https://x.com/dollargill","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"serafimcloud","st":"indexed","u":164,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/marquee/default/preview.png","pc":"serafimcloud","tg":["marquee"]},{"id":"21st:serafimcloud__mcp-tool","t":"Mcp tool","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/mcp-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__mirrorball","t":"Mirrorball","d":"Animated (pulse) ASCII art in the Disco style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, colorful look. A drop-in, zero-dependency R","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/mirrorball/default/preview.1783763798701.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__mirrorball-2","t":"Mirrorball 2","d":"Animated (pulse) ASCII art in the Disco style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, colorful look. A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/mirrorball/default/preview.1783763799429.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__mode-selector","t":"Mode selector","d":"Standalone mode selector pill button with built-in popover. Bring your own icons or omit them; renders a non-interactive label when given a single mode. Self-contained port from 21","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"serafimcloud","st":"indexed","u":4,"pl":"https://21st.dev/@serafimcloud/components/mode-selector","pc":"serafimcloud","tg":["ai-chat","popover"]},{"id":"21st:serafimcloud__model-picker","t":"Model picker","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/model-picker","pc":"serafimcloud","tg":["ai-chat","popover"]},{"id":"21st:serafimcloud__molten-cells","t":"Molten cells","d":"Animated WebGL shader background in the Caustics style, generated by the 21st.dev Shader Builder. 4-color palette (#140A00, #FF6D00, #FFC300, #FFF1B8). Features: high intensity. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/molten-cells/default/preview.1783761465539.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__molten-pillars","t":"Molten pillars","d":"Animated WebGL shader background in the Aurora style, generated by the 21st.dev Shader Builder. 4-color palette (#140A00, #FF6D00, #FFC300, #FFF1B8). Features: high intensity. A dr","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/molten-pillars/default/preview.1783759675110.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__mosaic","t":"Mosaic","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a minimal, mosaic look. A drop-in, zero-dependency Reac","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/mosaic/default/preview.1783763222297.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__neon-mirage","t":"Neon mirage","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, neon, retro look. A drop-in, zero-dependenc","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/neon-mirage/default/preview.1783761738883.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__ocean-rings","t":"Ocean rings","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 4-color palette (#EBF6F7, #A2D7DD, #00A3AF, #274A78). Features: soft blur finish. A d","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ocean-rings/default/preview.1783766939590.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__ocean-sky","t":"Ocean sky","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#2E3192, #1BFFFF). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ocean-sky/default/preview.1783765274847.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__ocean-swirl","t":"Ocean swirl","d":"Animated WebGL shader background in the Flow field style, generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/ocean-swirl/default/preview.1783757843303.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__oceanic-currents","t":"Oceanic currents","d":"Animated WebGL shader background in the Smoke style, generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/oceanic-currents/default/preview.1783756055200.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__oceanic-currents-2","t":"Oceanic currents 2","d":"Animated WebGL shader background in the Flow field style, generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/oceanic-currents/default/preview.1783757787337.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__oceanic-depths","t":"Oceanic depths","d":"Animated WebGL shader background in the Waves style, generated by the 21st.dev Shader Builder. 4-color palette (#031C26, #1B6CA8, #5AD2F4, #EAF9FF). A drop-in, zero-dependency Reac","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/oceanic-depths/default/preview.1783759567575.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__oceanic-depths-2","t":"Oceanic depths 2","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#0B3B57, #1E88A8, #6FD3C9, #DFF6F2). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/oceanic-depths/default/preview.1783764008972.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__oceanic-glow","t":"Oceanic glow","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 4-color palette (#A8F0C8, #34B2D7, #345CB5, #121519). Features: soft blur finish. A d","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/oceanic-glow/default/preview.1783766844998.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__oceanic-shimmer","t":"Oceanic shimmer","d":"Pure CSS gradient background in the Layered Tide style, made with the 21st.dev Gradient Builder. 4-color palette (#EAF7FB, #7FC6E6, #2E7CC0, #123A6B). Features: film grain. A drop-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/oceanic-shimmer/default/preview.1783766344706.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__orchid-petal-sky","t":"Orchid petal sky","d":"Pure CSS gradient background in the Layered Tide style, made with the 21st.dev Gradient Builder. 4-color palette (#0E1030, #3C2A73, #B15FA8, #F2C0D8). Features: soft blur finish, f","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/orchid-petal-sky/default/preview.1783766434255.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__parallel-waves","t":"Parallel waves","d":"Animated WebGL shader background in the Warp stripes style, generated by the 21st.dev Shader Builder. 4-color palette (#001219, #005F73, #94D2BD, #E9D8A6). A drop-in, zero-dependen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/parallel-waves/default/preview.1783763831595.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__phosphor","t":"Phosphor","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a crt, retro, terminal look. A drop-in, zero-dep","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/phosphor/default/preview.1783763010460.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__pixel-canvas","t":"Pixel canvas","d":"Pixel Canvas","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/pixel-canvas/default/preview.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__pixel-fire-button","t":"Pixel fire button","d":"A CTA button that fills with molten pixel fire: a doom-fire simulation on a 3px canvas floods the face from the bottom, the flames bend toward your cursor on hover, and a press sen","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/pixel-fire-button/default/preview.1785362562575-902b2da8-a69b-403c-8050-71b173567359.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__plan-tool","t":"Plan tool","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/plan-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__plum-peach-butter","t":"Plum peach butter","d":"Pure CSS gradient background in the Silk Blend style, made with the 21st.dev Gradient Builder. 4-color palette (#3A2C6E, #C4749B, #F6B98A, #FBE6B8). Features: soft blur finish, fil","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/plum-peach-butter/default/preview.1783765948037.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__plum-sand-apricot","t":"Plum sand apricot","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#FFE7C7, #F6A96B, #E4676B, #7A3B6B). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/plum-sand-apricot/default/preview.1783764918119.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__pulsing-grid","t":"Pulsing grid","d":"Animated (pulse) ASCII art in the Bricks style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, monochrome, pixel look. A drop-in, zero-de","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/pulsing-grid/default/preview.1783764336553.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__question-tool","t":"Question tool","d":"Clarifying-question form for agents. Single / multi / text answer kinds with optional custom input. Self-contained port from 21st.dev Agent Elements.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"serafimcloud","st":"indexed","u":31,"pl":"https://cdn.21st.dev/21st.dev/question-tool/default/preview.1777645586738.png","pc":"serafimcloud","tg":["ai-chat","radio-group","steps","textarea"]},{"id":"21st:serafimcloud__redshift","t":"Redshift","d":"Animated (pulse) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a pixel, retro look. A drop-in, zero-dependency React ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/redshift/default/preview.1783762674682.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__retro-button","t":"Retro button","d":"Retro 3D buttons by https://x.com/njesenberger","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/retro-button.png","pc":"serafimcloud","tg":["button"]},{"id":"21st:serafimcloud__reverie","t":"Reverie","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, minimal look. A drop-in, zero-depend","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/reverie/default/preview.1783763635528.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__reverie-2","t":"Reverie 2","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, minimal look. A drop-in, zero-depend","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/reverie/default/preview.1783763661771.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__ripple-button","t":"Ripple button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/ripple-button.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__rosewood-blush","t":"Rosewood blush","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#FFF1E6, #FFC9A9, #F98F7B, #B65C7E). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/rosewood-blush/default/preview.1783764607548.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__schematic","t":"Schematic","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a minimal, terminal look. A drop-in, zero-depend","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/schematic/default/preview.1783762919775.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__scroll-loop-inception","t":"Scroll loop inception","d":"A scroll section where the page falls into itself: your landing renders inside its own browser window, and scrolling dives through level after level on an exponential zoom path tha","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"serafimcloud","st":"indexed","u":2,"pl":"https://cdn.21st.dev/serafimcloud/scroll-loop-inception/default/preview.1785363162902-0e53d3be-f9fc-46e6-9327-f8918727b735.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__search-tool","t":"Search tool","d":"Render grouped search results as a collapsible tool card. State-driven (searching shimmer / done static). Provide a query and an optional results array. Self-contained port from 21","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"serafimcloud","st":"indexed","u":10,"pl":"https://21st.dev/@serafimcloud/components/search-tool","pc":"serafimcloud","tg":["ai-chat","search"]},{"id":"21st:serafimcloud__send-button","t":"Send button","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/send-button","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__shadow-blending","t":"Shadow blending","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/shadow-blending/default/preview.1783763273893.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__shadowplay","t":"Shadowplay","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a film, minimal, monochrome look. A drop-in, zer","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/shadowplay/default/preview.1783761695887.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__sign-in","t":"Sign in","d":"Sign in flow with shadcn/ui components","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"serafimcloud","st":"rated","u":129,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/sign-in.png","pc":"serafimcloud","tg":["sign-in"],"sc":17},{"id":"21st:serafimcloud__sign-up","t":"Sign up","d":"Sign-up flow with shadcn/ui components","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"serafimcloud","st":"rated","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/sign-up.png","pc":"serafimcloud","sc":17},{"id":"21st:serafimcloud__skywash","t":"Skywash","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, retro look. A drop-in, zero-dependency Re","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/skywash/default/preview.1783762625350.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__social-links","t":"Social links","d":"Link with image appearing on hover. \n\nInspired by @alexanderolssen and @ln_dev7","k":"component","s":"21st","c":"actions/link","g":"actions","a":"serafimcloud","st":"indexed","u":183,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/social-links.png","pc":"serafimcloud","tg":["link"]},{"id":"21st:serafimcloud__soft-pastel-blend","t":"Soft pastel blend","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#FBE9F0, #CDE7F0, #E6D6F5, #D6F0E4). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/soft-pastel-blend/default/preview.1783763964191.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__spinner","t":"Spinner","k":"component","s":"21st","c":"status/loader","g":"status","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/spinner.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__spiral-loader","t":"Spiral loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/spiral-loader","pc":"serafimcloud","tg":["spinner"]},{"id":"21st:serafimcloud__splite","t":"Splite","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/splite.png","pc":"serafimcloud","tg":["hero"]},{"id":"21st:serafimcloud__sprite","t":"Sprite","d":"Animated (pulse) ASCII art in the Pixel Art style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, pixel look. A drop-in, zero-dependency ","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sprite/default/preview.1783763279414.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__sprite-2","t":"Sprite 2","d":"Animated (pulse) ASCII art in the Pixel Art style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, pixel look. A drop-in, zero-dependency ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sprite/default/preview.1783763317479.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__status-badge","t":"Status badge","d":"Status Badge inspired by Tremor","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","u":146,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/status-badge/default/preview.png","pc":"serafimcloud","tg":["badge","icon"]},{"id":"21st:serafimcloud__steel-cone","t":"Steel cone","d":"Pure CSS gradient background in the Orbit Sweep style, made with the 21st.dev Gradient Builder. 5-color palette (#E9EEF5, #8FA3C0, #3B4A66, #8FA3C0, #E9EEF5). Features: soft blur f","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/steel-cone/default/preview.1783767233056.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__subagent-tool","t":"Subagent tool","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/subagent-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__suggestions","t":"Suggestions","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/suggestions","pc":"serafimcloud","tg":["ai-chat","chip"]},{"id":"21st:serafimcloud__sunset","t":"Sunset","d":"Animated (pulse) ASCII art in the Dots style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a neon, retro look. A drop-in, zero-dependency React com","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sunset/default/preview.1783764041910.png","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__sunset-bloom","t":"Sunset bloom","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#2B0A3D, #C1275C, #F8873B, #FDE68A). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sunset-bloom/default/preview.1783764058816.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__sunset-blush","t":"Sunset blush","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#FBEFF2, #F3C0C7, #E7D2F0, #F6D9A8). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sunset-blush/default/preview.1783765008445.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__sunset-orb","t":"Sunset orb","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 3-color palette (#B7282E, #EB6101, #FFF1CF). Features: soft blur finish, film grain","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/sunset-orb/default/preview.1783767444877.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__switch","t":"Switch","d":"Compact Base UI switch with a sliding gradient track and spring-eased thumb, for toggling a single setting on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/switch/default/preview.1784917186806-60782e7b-e607-4037-9887-b3eb7a545ef7.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__tag-selector","t":"Tag selector","d":"A versatile component for selecting and creating multiple tags with search functionality and keyboard navigation support.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"serafimcloud","st":"indexed","u":148,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/tag-selector.png","pc":"serafimcloud","tg":["chip","search"]},{"id":"21st:serafimcloud__telegram-profile-header","t":"Telegram profile header","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/telegram-profile-header.png","pc":"serafimcloud","tg":["profile"]},{"id":"21st:serafimcloud__testimonial-card","t":"Testimonial card","d":"A versatile card component for displaying user testimonials with avatars and social links inspired by Launch UI. It supports both linked and non-linked variants, custom styling, an","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"serafimcloud","st":"indexed","u":897,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/testimonial-card.png","pc":"serafimcloud","tg":["testimonials"]},{"id":"21st:serafimcloud__testimonials-with-marquee","t":"Testimonials with marquee","d":"A dynamic testimonials section with infinite scroll animation featuring a headline, description, and auto-scrolling testimonial cards that pause on hover, inspired by Launch UI.\n\nF","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"serafimcloud","st":"indexed","u":2676,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/testimonials-with-marquee.png","pc":"serafimcloud","tg":["marquee","scroll-area","testimonials"]},{"id":"21st:serafimcloud__text-shimmer","t":"Text shimmer","d":"Shimmering status text for streaming agents. Tune duration, spread, and delay; renders any element via the as prop. From 21st.dev Agent Elements.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"serafimcloud","st":"indexed","u":10,"pl":"https://21st.dev/@serafimcloud/components/text-shimmer","pc":"serafimcloud","tg":["text"]},{"id":"21st:serafimcloud__thinking-tool","t":"Thinking tool","d":"Render assistant reasoning in a collapsible row. State-driven (thinking shimmer / thought static). Self-contained port from 21st.dev Agent Elements with React-only collapsible (no ","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","u":16,"pl":"https://21st.dev/@serafimcloud/components/thinking-tool","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__to-do-item","t":"To do item","d":"A reusable animated todo list item component with swipe actions and strike-through animation. Inspired by the original non-reusable implementation by @alirdev and @sekachov design.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"serafimcloud","st":"indexed","u":42,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/to-do-item.png","pc":"serafimcloud","tg":["checkbox","list"]},{"id":"21st:serafimcloud__todo-tool","t":"Todo tool","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/todo-tool","pc":"serafimcloud","tg":["ai-chat","list"]},{"id":"21st:serafimcloud__tool-group","t":"Tool group","d":"Collapsible header summarizing nested tool calls (files / searches / commands). State-driven (completed / pending streaming / interrupted) with shimmer label and elapsed time. Self","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/21st.dev/tool-group/default/preview.1777646295812.png","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__tooltip-icon-button","t":"Tooltip icon button","d":"A versatile button component with integrated tooltip functionality, perfect for providing contextual information on hover. Built with shadcn/ui and Radix UI primitives.\n\nFeatures:\n","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"serafimcloud","st":"indexed","u":36,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/tooltip-icon-button.png","pc":"serafimcloud","tg":["tooltip"]},{"id":"21st:serafimcloud__ultramarine","t":"Ultramarine","d":"Animated (wave) ASCII art in the Cross style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, crt look. A drop-in, zero-dependency React c","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ultramarine/default/preview.1783763590653.jpg","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__ultramarine-2","t":"Ultramarine 2","d":"Animated (wave) ASCII art in the Cross style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a colorful, crt look. A drop-in, zero-dependency React c","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/ultramarine/default/preview.1783763612769.jpg","pc":"serafimcloud"},{"id":"21st:serafimcloud__use-click-outside","t":"Use click outside","d":"A hook that handles clicks outside of a specified element","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/use-click-outside.png","pc":"serafimcloud","tg":["hook","modal"]},{"id":"21st:serafimcloud__use-debounce","t":"Use debounce","d":" A hook that returns a debounced version of the provided value. The debounced value will only update after the specified delay has passed without any new changes to the original va","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/use-debounce.png","pc":"serafimcloud","tg":["hook","search"]},{"id":"21st:serafimcloud__use-media-query","t":"Use media query","d":"useMediaQuery hook","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/use-media-query/default/preview.png","pc":"serafimcloud","tg":["alert","badge","hook"]},{"id":"21st:serafimcloud__useonclickoutside","t":"Useonclickoutside","d":"Hook useOnClickOutside","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/useonclickoutside.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__user-message","t":"User message","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/@serafimcloud/components/user-message","pc":"serafimcloud","tg":["ai-chat"]},{"id":"21st:serafimcloud__vapor-halftone-portrait","t":"Vapor halftone portrait","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, halftone, pixel look. A drop-in, zero-de","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/vapor-halftone-portrait/default/preview.1783764293246.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__verdant-swirl","t":"Verdant swirl","d":"Animated WebGL shader background in the Silk style, generated by the 21st.dev Shader Builder. 4-color palette (#03120E, #0E7C5A, #7CE577, #F4FFC7). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/verdant-swirl/default/preview.1783755081250.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__vermilion-rings","t":"Vermilion rings","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 2-color palette (#EB6101, #FFF1CF). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/vermilion-rings/default/preview.1783766894298.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__vibrant-pulse-glow","t":"Vibrant pulse glow","d":"Animated (pulse) ASCII art in the Bricks style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, neon, pixel look. A drop-in, zero-dependen","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","u":4,"pl":"https://cdn.21st.dev/serafimcloud/vibrant-pulse-glow/default/preview.1783765765366.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__vibrant-stream","t":"Vibrant stream","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/vibrant-stream/default/preview.1783763219329.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__vignette-bloom","t":"Vignette bloom","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a animated, colorful, film look. A drop-in, zero-depend","k":"component","s":"21st","c":"media/player","g":"media","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/vignette-bloom/default/preview.1783765949055.webp","pc":"serafimcloud","tg":["video"]},{"id":"21st:serafimcloud__violet-nocturne","t":"Violet nocturne","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#0E1030, #3C2A73, #7B4BA8, #D98FC0). Features: soft blur finish. A ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":4,"pl":"https://cdn.21st.dev/serafimcloud/violet-nocturne/default/preview.1783764652444.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__violet-orbit","t":"Violet orbit","d":"Pure CSS gradient background in the Horizon Glow style, made with the 21st.dev Gradient Builder. 3-color palette (#2B0A3D, #7B4BA8, #E6D6F5). Features: soft blur finish, film grain","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/violet-orbit/default/preview.1783767719402.webp","pc":"serafimcloud","tg":["background"]},{"id":"21st:serafimcloud__violet-plasma","t":"Violet plasma","d":"Animated WebGL shader background in the Caustics style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/violet-plasma/default/preview.1783763164946.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__violet-radiance","t":"Violet radiance","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 3-color palette (#F7F3FF, #9BB8F0, #5E5CC0). Features: soft blur finish. A drop-in, z","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/violet-radiance/default/preview.1783763813095.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__violet-radiance-ii","t":"Violet radiance ii","d":"Pure CSS gradient background in the Echo Rings style, made with the 21st.dev Gradient Builder. 3-color palette (#F7F3FF, #9BB8F0, #5E5CC0). Features: soft blur finish. A drop-in, z","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/violet-radiance-ii/default/preview.1783763768666.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__violet-starlight","t":"Violet starlight","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#F7F3FF, #9BB8F0, #5E5CC0, #1B1740). Features: soft blur finish. A dr","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/violet-starlight/default/preview.1783766559467.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__violet-swirl","t":"Violet swirl","d":"Animated WebGL shader background in the Silk style, generated by the 21st.dev Shader Builder. 4-color palette (#02010A, #04052E, #3D2C8D, #916BBF). A drop-in, zero-dependency React","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/localhost_serafim/violet-swirl/default/preview.1783756000850.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__warmth-ripple","t":"Warmth ripple","d":"Animated WebGL shader background in the Plasma style, generated by the 21st.dev Shader Builder. 4-color palette (#160B0B, #C2402A, #F49D37, #FFE8C2). A drop-in, zero-dependency Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/warmth-ripple/default/preview.1783763559949.webp","pc":"serafimcloud"},{"id":"21st:serafimcloud__watermelon-marigold","t":"Watermelon marigold","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#FF5F6D, #FFC371). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"serafimcloud","st":"indexed","u":6,"pl":"https://cdn.21st.dev/serafimcloud/watermelon-marigold/default/preview.1783765319518.webp","pc":"serafimcloud","tg":["background","hero"]},{"id":"21st:serafimcloud__wave-bars","t":"Wave bars","d":"An equaliser-style row of bars riding a travelling wave, animated entirely in CSS. Bar count, width, spacing, radius, height, colour and speed are all live knobs.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/wave-bars/default/preview.1785197210915-fb03cda9-0010-46df-bd7e-861e9dffb569.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__wave-separator","t":"Wave separator","d":"A zig-zag divider drawn by masking a solid color with a repeating inline SVG, so it inherits currentColor in light and dark mode and costs no image request. Inspired by Colin Liena","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/serafimcloud/wave-separator/default/preview.1785365373146-6a6bcccc-75de-4523-9025-2f0576a96d49.png","pc":"serafimcloud"},{"id":"21st:serafimcloud__wood-cursor","t":"Wood cursor","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"serafimcloud","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/wood-cursor.png","pc":"serafimcloud"},{"id":"21st:serjobasDEV__typeshi","t":"Typeshi","d":"typeshiiiasdasdasdnnn","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"serjobasDEV","st":"indexed","pl":"https://cdn.21st.dev/serjobasDEV/typeshi/default/preview.1758030895456.png","pc":"serjobasDEV"},{"id":"21st:serjobas__bloim-animation-background","t":"Bloim animation background","d":"Bloom animation background for hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"serjobas","st":"indexed","u":16,"pl":"https://cdn.21st.dev/serjobas/bloim-animation-background/default/preview.1755627744933.png","pc":"serjobas","tg":["hero"]},{"id":"21st:sh20raj__duolingonavbar","t":"Duolingonavbar","d":"A minimal, clean Duolingo-style navbar component with navigation menu, user stats (streak, gems, hearts), profile button, and mobile responsiveness.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"sh20raj","st":"indexed","pl":"https://21st.dev/@sh20raj/components/duolingonavbar","pc":"sh20raj"},{"id":"21st:sh20raj__lingo-hero","t":"Lingo hero","d":"A premium Duolingo-inspired hero section with gamification, social proof, achievement cards, and high-converting CTAs for modern education and SaaS products.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/sh20raj/lingo-hero/default/preview.1781707318532.png","pc":"sh20raj"},{"id":"21st:sh20raj__navbar","t":"Navbar","d":"Beautiful Navbar","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/sh20raj/navbar/default/preview.1750511438713.png","pc":"sh20raj"},{"id":"21st:shadcn__accordion","t":"Accordion","d":"A vertically stacked set of interactive headings that each reveal a section of content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcn","st":"indexed","u":3030,"pl":"https://cdn.21st.dev/user_shadcn/accordion.png","pc":"shadcn","tg":["accordion","faq"]},{"id":"21st:shadcn__alert","t":"Alert","d":"Displays a callout for user attention.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shadcn","st":"indexed","u":116,"pl":"https://cdn.21st.dev/user_shadcn/alert.png","pc":"shadcn","tg":["alert","notification"]},{"id":"21st:shadcn__alert-dialog","t":"Alert dialog","d":"A modal dialog that interrupts the user with important content and expects a response.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shadcn","st":"indexed","u":212,"pl":"https://cdn.21st.dev/user_shadcn/alert-dialog.png","pc":"shadcn","tg":["alert","modal"]},{"id":"21st:shadcn__aspect-ratio","t":"Aspect ratio","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/aspect-ratio.png","pc":"shadcn"},{"id":"21st:shadcn__avatar","t":"Avatar","d":"An image element with a fallback for representing the user.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shadcn","st":"indexed","u":4557,"pl":"https://cdn.21st.dev/user_shadcn/avatar.png","pc":"shadcn","tg":["avatar","image","profile"]},{"id":"21st:shadcn__breadcrumb","t":"Breadcrumb","d":"Displays the path to the current resource using a hierarchy of links.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcn","st":"indexed","u":49,"pl":"https://cdn.21st.dev/user_shadcn/breadcrumb.png","pc":"shadcn","tg":["dropdown","link","navigation-menu"]},{"id":"21st:shadcn__button","t":"Button","d":"Displays a button or a component that looks like a button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcn","st":"indexed","u":44726,"pl":"https://cdn.21st.dev/user_shadcn/button.png","pc":"shadcn","tg":["button"]},{"id":"21st:shadcn__button-group","t":"Button group","d":"Here is Button Group component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-group/default/preview.1760007612702.png","pc":"shadcn","tg":["button","pagination"]},{"id":"21st:shadcn__calendar","t":"Calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/calendar.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-date-and-time-picker","t":"Calendar date and time picker","d":"here is calendar by shadcn with date and time picker","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shadcn","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/calendar-date-and-time-picker/default/preview.1749974196925.png","pc":"shadcn","tg":["date-picker","popover"]},{"id":"21st:shadcn__calendar-date-and-time-range","t":"Calendar date and time range","d":"Here is Shadcn Calendar component with Date and Time range picker","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-date-and-time-range/default/preview.1749974382117.png","pc":"shadcn","tg":["calendar","date-picker","popover"]},{"id":"21st:shadcn__calendar-date-picker","t":"Calendar date picker","d":"Here is shadcn calendar with date picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"shadcn","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/calendar-date-picker/default/preview.1749973425034.png","pc":"shadcn","tg":["date-picker","popover"]},{"id":"21st:shadcn__calendar-date-time-range","t":"Calendar date time range","d":"Here is Shadcn Calendar component with Date and Time range picker","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-date-time-range/default/preview.1749974585515.png","pc":"shadcn","tg":["date-picker","popover"]},{"id":"21st:shadcn__calendar-day-picker","t":"Calendar day picker","d":"Here is shadcn calendar component with day picker","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/calendar-day-picker/default/preview.1749973704816.png","pc":"shadcn","tg":["calendar","date-picker","popover"]},{"id":"21st:shadcn__calendar-input","t":"Calendar input","d":"Here is calendar input with date picker","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/calendar-input/default/preview.1749975109836.png","pc":"shadcn","tg":["calendar","date-picker","popover"]},{"id":"21st:shadcn__calendar-language-date-picker","t":"Calendar language date picker","d":"Here is Shadcn Calendar with date picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-language-date-picker/default/preview.1749975935787.png","pc":"shadcn","tg":["date-picker","popover"]},{"id":"21st:shadcn__calendar-picker-in-a-drawer","t":"Calendar picker in a drawer","d":"Here is Shadcn Calendar picker in a drawer","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":19,"pl":"https://cdn.21st.dev/larsen66/calendar-picker-in-a-drawer/default/preview.1749977487954.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-variable-size","t":"Calendar variable size","d":"here is shadcn calendar with variable size","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/calendar-variable-size/default/preview.1749906034454.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-booked-days","t":"Calendar with booked days","d":"Here is calendar component with booked days","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-booked-days/default/preview.1749434391925.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-day-button","t":"Calendar with day button","d":"Here is shadcn calendar component with today button","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-day-button/default/preview.1749971391805.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-disabled-days","t":"Calendar with disabled days","d":"Here is modern shadcn calendar with disabled days","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-disabled-days/default/preview.1749428163831.png","pc":"shadcn","tg":["calendar"]},{"id":"21st:shadcn__calendar-with-disabled-weekends","t":"Calendar with disabled weekends","d":"Here is shadcn modern calendar with disabled weekend","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-disabled-weekends/default/preview.1749428353510.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-event-slots","t":"Calendar with event slots","d":"Here is Shadcn calendar component with event slots","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"rated","pl":"https://cdn.21st.dev/larsen66/calendar-with-event-slots/default/preview.1749976260067.png","pc":"shadcn","tg":["calendar","date-picker"],"sc":21},{"id":"21st:shadcn__calendar-with-little-date","t":"Calendar with little date","d":"Here is Shadcn Calendar component with little-day","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-little-date/default/preview.1749976135496.png","pc":"shadcn","tg":["popover"]},{"id":"21st:shadcn__calendar-with-localisation","t":"Calendar with localisation","d":"here is calendar component by Shadcn with language changing functionality","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-localisation/default/preview.1749972605587.png","pc":"shadcn","tg":["calendar","date-picker","select"]},{"id":"21st:shadcn__calendar-with-month-and-year-dropdown","t":"Calendar with month and year dropdown","d":"Here is shadcn calendar with month and year ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-month-and-year-dropdown/default/preview.1749903880072.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-presets","t":"Calendar with presets","d":"Here is shadcn calendar component with pressets days","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-presets/default/preview.1749906173959.png","pc":"shadcn","tg":["card","calendar","button","date-picker"]},{"id":"21st:shadcn__calendar-with-range-selection","t":"Calendar with range selection","d":"Here is Range selection shadcn calendar with minimum and maximum days","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-range-selection/default/preview.1749428032650.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-start-end-month","t":"Calendar with start end month","d":"Here is shadcn component with start and end month","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-start-end-month/default/preview.1749428485828.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-time-picker-inline","t":"Calendar with time picker inline","d":"Here is shadcn calendar time picker component","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/calendar-with-time-picker-inline/default/preview.1749904853866.png","pc":"shadcn"},{"id":"21st:shadcn__calendar-with-time-piker","t":"Calendar with time piker","d":"Here is calendar by shadcn with time piker ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/calendar-with-time-piker/default/preview.1749904539679.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-time-pressets","t":"Calendar with time pressets","d":"Here is shadcn calendar component with time pressets","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-time-pressets/default/preview.1749906280309.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__calendar-with-week-numbers","t":"Calendar with week numbers","d":"Here is shadcn calendar with week numbers","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/calendar-with-week-numbers/default/preview.1749434544082.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__card","t":"Card","d":"Displays a card with header, content, and footer.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shadcn","st":"indexed","u":13968,"pl":"https://cdn.21st.dev/user_shadcn/card.png","pc":"shadcn","tg":["card","select"]},{"id":"21st:shadcn__carousel","t":"Carousel","d":"A carousel with motion and swipe built using Embla.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"shadcn","st":"indexed","u":1919,"pl":"https://cdn.21st.dev/user_shadcn/carousel.png","pc":"shadcn","tg":["carousel"]},{"id":"21st:shadcn__chart","t":"Chart","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/chart.png","pc":"shadcn","tg":["data-visualization","dashboard","tooltip"]},{"id":"21st:shadcn__chart-filter","t":"Chart filter","d":"Here is Shadcn chart filter component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"shadcn","st":"indexed","u":28,"pl":"https://cdn.21st.dev/larsen66/chart-filter/default/preview.1749974748457.png","pc":"shadcn"},{"id":"21st:shadcn__checkbox","t":"Checkbox","d":"A control that allows the user to toggle between checked and not checked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/checkbox.png","pc":"shadcn","tg":["checkbox"]},{"id":"21st:shadcn__collapsible","t":"Collapsible","d":"An interactive component which expands/collapses a panel.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcn","st":"indexed","u":294,"pl":"https://cdn.21st.dev/user_shadcn/collapsible.png","pc":"shadcn"},{"id":"21st:shadcn__command","t":"Command","d":"Fast, composable, unstyled command menu for React.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/command.png","pc":"shadcn","tg":["menu","search"]},{"id":"21st:shadcn__context-menu","t":"Context menu","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcn","st":"indexed","u":87,"pl":"https://cdn.21st.dev/user_shadcn/context-menu.png","pc":"shadcn","tg":["checkbox","menu","radio-group"]},{"id":"21st:shadcn__data-table","t":"Data table","d":"Powerful table and datagrids built using TanStack Table.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/data-table.png","pc":"shadcn","tg":["checkbox","pagination","table"]},{"id":"21st:shadcn__date-picker","t":"Date picker","d":"A date picker component with range and presets.","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"shadcn","st":"indexed","u":243,"pl":"https://cdn.21st.dev/user_shadcn/date-picker.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__dialog","t":"Dialog","d":"A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"shadcn","st":"indexed","u":2209,"pl":"https://cdn.21st.dev/user_shadcn/dialog.png","pc":"shadcn","tg":["modal","scroll-area"]},{"id":"21st:shadcn__drawer","t":"Drawer","d":"A drawer component for React.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcn","st":"indexed","u":168,"pl":"https://cdn.21st.dev/user_shadcn/drawer.png","pc":"shadcn"},{"id":"21st:shadcn__dropdown-menu","t":"Dropdown menu","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcn","st":"indexed","u":2275,"pl":"https://cdn.21st.dev/user_shadcn/dropdown-menu.png","pc":"shadcn","tg":["dropdown","menu"]},{"id":"21st:shadcn__dual-calendar","t":"Dual calendar","d":"Here is Dual Calendar by Shadcn","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dual-calendar/default/preview.1749426691302.png","pc":"shadcn","tg":["calendar"]},{"id":"21st:shadcn__empty","t":"Empty","d":"Here is Empty components","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcn","st":"indexed","u":256,"pl":"https://cdn.21st.dev/larsen66/empty/default/preview.1760028926875.png","pc":"shadcn","tg":["avatar","card","empty-state","icon"]},{"id":"21st:shadcn__field-1","t":"Field 1","d":"Here is Field component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcn","st":"indexed","u":73,"pl":"https://cdn.21st.dev/larsen66/field-1/default/preview.1760071813040.png","pc":"shadcn","tg":["checkbox","radio-group","select","slider"]},{"id":"21st:shadcn__form","t":"Form","d":"Building forms with React Hook Form and Zod.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"indexed","u":245,"pl":"https://cdn.21st.dev/user_shadcn/form.png","pc":"shadcn","tg":["calendar","date-picker","form"]},{"id":"21st:shadcn__hover-card","t":"Hover card","d":"For sighted users to preview content available behind a link.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"shadcn","st":"indexed","u":154,"pl":"https://cdn.21st.dev/user_shadcn/hover-card.png","pc":"shadcn","tg":["profile"]},{"id":"21st:shadcn__icons","t":"Icons","d":"shadcn/ui icons","k":"component","s":"21st","c":"media/icon","g":"media","a":"shadcn","st":"indexed","u":608,"pl":"https://cdn.21st.dev/user_shadcn/icons.png","pc":"shadcn","tg":["grid","icon"]},{"id":"21st:shadcn__input","t":"Input","d":"Displays a form input field or a component that looks like an input field.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"indexed","u":9912,"pl":"https://cdn.21st.dev/user_shadcn/input.png","pc":"shadcn","tg":["form","input"]},{"id":"21st:shadcn__input-group","t":"Input group","d":"Here is Input Group component ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"indexed","u":93,"pl":"https://cdn.21st.dev/larsen66/input-group/default/preview.1760074177742.png","pc":"shadcn","tg":["form","icon","input","search"]},{"id":"21st:shadcn__input-otp","t":"Input otp","d":"Accessible one-time password component with copy paste functionality.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/input-otp.png","pc":"shadcn"},{"id":"21st:shadcn__item","t":"Item","d":"Here is Item component","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shadcn","st":"indexed","u":55,"pl":"https://cdn.21st.dev/larsen66/item/default/preview.1760074948134.png","pc":"shadcn","tg":["alert","avatar","card","dropdown"]},{"id":"21st:shadcn__kbd","t":"Kbd","d":"Here is Kbd  component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/kbd/default/preview.1760078868967.png","pc":"shadcn","tg":["search","tooltip"]},{"id":"21st:shadcn__label","t":"Label","d":"Renders an accessible label associated with controls.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/label.png","pc":"shadcn","tg":["checkbox","form"]},{"id":"21st:shadcn__menubar","t":"Menubar","d":"A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcn","st":"indexed","u":176,"pl":"https://cdn.21st.dev/user_shadcn/menubar.png","pc":"shadcn","tg":["menu"]},{"id":"21st:shadcn__message","t":"Message","d":"Layout wrapper that arranges a single conversation message with avatar, alignment, header, and footer for chat and AI messaging interfaces.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/educlopez/message/default/preview.1783678491449.png","pc":"shadcn","tg":["avatar"]},{"id":"21st:shadcn__multiple-months-calendar","t":"Multiple months calendar","d":"Here is shadcn multiple months calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/multiple-months-calendar/default/preview.1749427672760.png","pc":"shadcn","tg":["calendar"]},{"id":"21st:shadcn__multiple-months-range","t":"Multiple months range","d":"Here is shadcn multiple months with range selection","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/multiple-months-range/default/preview.1749427817075.png","pc":"shadcn","tg":["calendar"]},{"id":"21st:shadcn__navigation-menu","t":"Navigation menu","d":"A collection of links for navigating websites.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcn","st":"indexed","u":2543,"pl":"https://cdn.21st.dev/user_shadcn/navigation-menu.png","pc":"shadcn","tg":["menu","link","navigation-menu"]},{"id":"21st:shadcn__pagination","t":"Pagination","d":"Pagination with page navigation, next and previous links.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"shadcn","st":"indexed","u":262,"pl":"https://cdn.21st.dev/user_shadcn/pagination.png","pc":"shadcn","tg":["link","pagination"]},{"id":"21st:shadcn__popover","t":"Popover","d":"Displays rich content in a portal, triggered by a button.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shadcn","st":"indexed","u":1549,"pl":"https://cdn.21st.dev/user_shadcn/popover.png","pc":"shadcn","tg":["form","input","popover"]},{"id":"21st:shadcn__progress","t":"Progress","d":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/progress.png","pc":"shadcn","tg":["progress"]},{"id":"21st:shadcn__radio-group","t":"Radio group","d":"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/radio-group.png","pc":"shadcn","tg":["radio-group"]},{"id":"21st:shadcn__range-selection-calendar","t":"Range selection calendar","d":"Here is shadcn range selection calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","u":55,"pl":"https://cdn.21st.dev/larsen66/range-selection-calendar/default/preview.1749427723153.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__range-selection-calendar-with-min","t":"Range selection calendar with min","d":"Here is range selection calendar with minimum days ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/larsen66/range-selection-calendar-with-min/default/preview.1749427888324.png","pc":"shadcn","tg":["calendar","date-picker"]},{"id":"21st:shadcn__scroll-area","t":"Scroll area","d":"Augments native scroll functionality for custom, cross-browser styling.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"shadcn","st":"indexed","u":1329,"pl":"https://cdn.21st.dev/user_shadcn/scroll-area.png","pc":"shadcn","tg":["scroll-area"]},{"id":"21st:shadcn__select","t":"Select","d":"Displays a list of options for the user to pick from—triggered by a button.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"shadcn","st":"indexed","u":1340,"pl":"https://cdn.21st.dev/user_shadcn/select.png","pc":"shadcn","tg":["dropdown","form","select"]},{"id":"21st:shadcn__separator","t":"Separator","d":"Visually or semantically separates content.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcn","st":"indexed","u":3919,"pl":"https://cdn.21st.dev/user_shadcn/separator.png","pc":"shadcn"},{"id":"21st:shadcn__sheet","t":"Sheet","d":"Extends the Dialog component to display content that complements the main content of the screen.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/sheet.png","pc":"shadcn"},{"id":"21st:shadcn__sidebar","t":"Sidebar","d":"Sidebar","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"shadcn","st":"indexed","u":1009,"pl":"https://cdn.21st.dev/user_shadcn/sidebar/default/preview.png","pc":"shadcn","tg":["dashboard","icon","menu","navigation-menu"]},{"id":"21st:shadcn__skeleton","t":"Skeleton","d":"Use to show a placeholder while content is loading.","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcn","st":"indexed","u":1021,"pl":"https://cdn.21st.dev/user_shadcn/skeleton.png","pc":"shadcn","tg":["spinner"]},{"id":"21st:shadcn__slider","t":"Slider","d":"An input where the user selects a value from within a given range.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"shadcn","st":"indexed","u":375,"pl":"https://cdn.21st.dev/user_shadcn/slider.png","pc":"shadcn","tg":["slider"]},{"id":"21st:shadcn__sonner","t":"Sonner","d":"An opinionated toast component for React.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"shadcn","st":"indexed","u":369,"pl":"https://cdn.21st.dev/user_shadcn/sonner.png","pc":"shadcn","tg":["alert","button","menu","notification"]},{"id":"21st:shadcn__spinner","t":"Spinner","d":"Here is Spinner component","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcn","st":"indexed","u":66,"pl":"https://cdn.21st.dev/larsen66/spinner/default/preview.1760079695249.png","pc":"shadcn","tg":["empty-state","progress","spinner","textarea"]},{"id":"21st:shadcn__switch","t":"Switch","d":"A control that allows the user to toggle between checked and not checked.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/switch.png","pc":"shadcn","tg":["toggle"]},{"id":"21st:shadcn__table","t":"Table","d":"A responsive table component.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/table.png","pc":"shadcn","tg":["table"]},{"id":"21st:shadcn__tabs","t":"Tabs","d":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"shadcn","st":"indexed","u":1244,"pl":"https://cdn.21st.dev/user_shadcn/tabs.png","pc":"shadcn","tg":["tabs"]},{"id":"21st:shadcn__textarea","t":"Textarea","d":"Displays a form textarea or a component that looks like a textarea.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/textarea.png","pc":"shadcn","tg":["textarea"]},{"id":"21st:shadcn__toggle","t":"Toggle","d":"A two-state button that can be either on or off.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcn","st":"indexed","u":757,"pl":"https://cdn.21st.dev/user_shadcn/toggle.png","pc":"shadcn","tg":["toggle"]},{"id":"21st:shadcn__toggle-group","t":"Toggle group","d":"A set of two-state buttons that can be toggled on or off.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"shadcn","st":"indexed","pl":"https://cdn.21st.dev/user_shadcn/toggle-group.png","pc":"shadcn"},{"id":"21st:shadcn__tooltip","t":"Tooltip","d":"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcn","st":"indexed","u":2169,"pl":"https://cdn.21st.dev/user_shadcn/tooltip.png","pc":"shadcn","tg":["tooltip"]},{"id":"21st:shadcn__use-mobile","t":"Use mobile","d":"use-mobile hook","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"shadcn","st":"indexed","u":902,"pl":"https://cdn.21st.dev/user_shadcn/use-mobile/default/preview.png","pc":"shadcn","tg":["hook"]},{"id":"21st:shadcnblockscom__about-3","t":"About 3","d":"An About Us Landing page with breakout images, logos and stats about your company and team.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"shadcnblockscom","st":"indexed","u":280,"pl":"https://cdn.21st.dev/shadcnblockscom/about-3/default/preview.1747627511565.png","pc":"shadcnblockscom","tg":["gallery","team"]},{"id":"21st:shadcnblockscom__accordion-feature-section","t":"Accordion feature section","d":"A versatile block with an Accordion that can switch between multiple features. Each feature has a heading, text and an image.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcnblockscom","st":"indexed","u":418,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/accordion-feature-section/default/preview.png","pc":"shadcnblockscom","tg":["accordion","features","image"]},{"id":"21st:shadcnblockscom__banner","t":"Banner","d":"Classic announcement banner that runs across the top of page.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/banner/default/preview.1751700170275.png","pc":"shadcnblockscom"},{"id":"21st:shadcnblockscom__banner2","t":"Banner2","d":"Fullwidth banner with icon, announcement text and button.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/banner2/default/preview.1751700394684.png","pc":"shadcnblockscom"},{"id":"21st:shadcnblockscom__blog7","t":"Blog7","d":"Classic 3 card blog post layout, great for blog sections, featured blog posts and related blog posts. Uses shadcn/ui Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shadcnblockscom","st":"indexed","u":337,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/blog7/default/preview.png","pc":"shadcnblockscom","tg":["card","features","grid"]},{"id":"21st:shadcnblockscom__blog8","t":"Blog8","d":"Blog posts in row layout with large images on right.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shadcnblockscom","st":"indexed","u":154,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/blog8/default/preview.png","pc":"shadcnblockscom","tg":["card","image"]},{"id":"21st:shadcnblockscom__careers-4","t":"Careers 4","d":"Basic careers section with jobs grouped by role with location label and link","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnblockscom","st":"indexed","u":13,"pl":"https://cdn.21st.dev/shadcnblockscom/careers-4/default/preview.1747617722497.png","pc":"shadcnblockscom","tg":["list"]},{"id":"21st:shadcnblockscom__casestudy-5","t":"Casestudy 5","d":"A bento grid of cards with a feature card and smaller cards below. Minimal design and dotted backgrounds.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnblockscom","st":"indexed","u":156,"pl":"https://cdn.21st.dev/shadcnblockscom/casestudy-5/default/preview.1747625385751.png","pc":"shadcnblockscom","tg":["features","grid"]},{"id":"21st:shadcnblockscom__changelog-1","t":"Changelog 1","d":"Modern Changelog view with versions, dates, description images. An array of changelog entries with stick scroll effect.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/shadcnblockscom/changelog-1/default/preview.1747629463975.png","pc":"shadcnblockscom","tg":["badge","list","timeline"]},{"id":"21st:shadcnblockscom__cta-4","t":"Cta 4","d":"Call to action section with heading, description and button on left. Feature bullet list on right.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnblockscom","st":"indexed","u":270,"pl":"https://cdn.21st.dev/shadcnblockscom/cta-4/default/preview.1747631648438.png","pc":"shadcnblockscom","tg":["cta"]},{"id":"21st:shadcnblockscom__faq-5","t":"Faq 5","d":"Center aligned FAQ with numbers and expanded text.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"shadcnblockscom","st":"indexed","u":196,"pl":"https://cdn.21st.dev/shadcnblockscom/faq-5/default/preview.1747635561275.png","pc":"shadcnblockscom","tg":["badge","faq","list"]},{"id":"21st:shadcnblockscom__faq3","t":"Faq3","d":"A center align FAQ section with frequently asked questions that toggle open using the accordion component","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"shadcnblockscom","st":"indexed","u":258,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/faq3/default/preview.1751701763431.png","pc":"shadcnblockscom","tg":["accordion","faq"]},{"id":"21st:shadcnblockscom__feature-1","t":"Feature 1","d":"Basic Feature block with heading, description and buttons on left and image on right.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnblockscom","st":"indexed","u":212,"pl":"https://cdn.21st.dev/shadcnblockscom/feature-1/default/preview.1747703307305.png","pc":"shadcnblockscom","tg":["features","image"]},{"id":"21st:shadcnblockscom__feature-2","t":"Feature 2","d":"Basic feature section with heading, description and buttons. Image on left","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnblockscom","st":"indexed","u":76,"pl":"https://cdn.21st.dev/shadcnblockscom/feature-2/default/preview.1747703559811.png","pc":"shadcnblockscom","tg":["features","hero","image"]},{"id":"21st:shadcnblockscom__feature-72","t":"Feature 72","d":"A grid of feature cards","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shadcnblockscom","st":"indexed","u":82,"pl":"https://cdn.21st.dev/shadcnblockscom/feature-72/default/preview.1747699948941.png","pc":"shadcnblockscom","tg":["card","features","grid"]},{"id":"21st:shadcnblockscom__feature-73","t":"Feature 73","d":"Feature cards in grid layout with Featured card at the top.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnblockscom","st":"indexed","u":42,"pl":"https://cdn.21st.dev/shadcnblockscom/feature-73/default/preview.1747700873848.png","pc":"shadcnblockscom","tg":["features"]},{"id":"21st:shadcnblockscom__footer-7","t":"Footer 7","d":"A modern footer with menu links, logo, social, copyright and legal","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shadcnblockscom","st":"indexed","u":724,"pl":"https://cdn.21st.dev/shadcnblockscom/footer-7/default/preview.1747730843256.png","pc":"shadcnblockscom","tg":["footer","link"]},{"id":"21st:shadcnblockscom__gallery4","t":"Gallery4","d":"A carousel gallery of full height image cards with case study text on top. ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"shadcnblockscom","st":"indexed","u":1815,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/gallery4/default/preview.png","pc":"shadcnblockscom","tg":["carousel","gallery","image","pagination"]},{"id":"21st:shadcnblockscom__gallery6","t":"Gallery6","d":"A full-width, off-screen gallery with the carousel component.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"shadcnblockscom","st":"indexed","u":441,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/gallery6/default/preview.1774362907442.png","pc":"shadcnblockscom","tg":["carousel","gallery"]},{"id":"21st:shadcnblockscom__hero-195-1","t":"Hero 195 1","d":"A modern hero section with tabs, animated border and crisp fading background lines framing the hero images.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"shadcnblockscom","st":"indexed","u":993,"pl":"https://cdn.21st.dev/shadcnblockscom/hero-195/default/preview.1747616025475.png","pc":"shadcnblockscom","tg":["dashboard","cta","tabs"]},{"id":"21st:shadcnblockscom__list-2","t":"List 2","d":"A general list component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnblockscom","st":"rated","u":66,"pl":"https://cdn.21st.dev/shadcnblockscom/list-2/default/preview.1747809112291.png","pc":"shadcnblockscom","tg":["list"],"sc":18},{"id":"21st:shadcnblockscom__login-1","t":"Login 1","d":"Login form with email and Google login buttons","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shadcnblockscom","st":"indexed","u":263,"pl":"https://cdn.21st.dev/shadcnblockscom/login-1/default/preview.1747811869643.png","pc":"shadcnblockscom","tg":["form","sign-up"]},{"id":"21st:shadcnblockscom__logos3","t":"Logos3","d":"Client logos scrolling automatically with a Carousel with masked edges","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"shadcnblockscom","st":"indexed","u":1253,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/logos3/default/preview.png","pc":"shadcnblockscom","tg":["carousel","clients","marquee"]},{"id":"21st:shadcnblockscom__modern-hero","t":"Modern hero","d":"Modern Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shadcnblockscom","st":"indexed","u":317,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/modern-hero/default/preview.1738574142272.png","pc":"shadcnblockscom","tg":["cta","hero"]},{"id":"21st:shadcnblockscom__navbar-5","t":"Navbar 5","d":"Shadcn Navbar with 2 column dropdown menus and mobile menu that slides in from the top with dropdowns","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnblockscom","st":"indexed","u":301,"pl":"https://cdn.21st.dev/shadcnblockscom/navbar-5/default/preview.1747815725934.png","pc":"shadcnblockscom","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:shadcnblockscom__pricing-6","t":"Pricing 6","d":"Standard single pricing card","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/shadcnblockscom/pricing-6/default/preview.1747798351382.png","pc":"shadcnblockscom","tg":["pricing-section"]},{"id":"21st:shadcnblockscom__pricing2","t":"Pricing2","d":"Pricing block with 2 cards and a switch for monthly/annual billing","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnblockscom","st":"indexed","u":192,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/pricing2/default/preview.png","pc":"shadcnblockscom","tg":["pricing-section","table","toggle"]},{"id":"21st:shadcnblockscom__shadcnblocks-com-cta10","t":"Shadcnblocks com cta10","d":"A classic call to action block with 2 buttons - left aligned","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnblockscom","st":"indexed","u":34,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-cta10/default/preview.1737979671643.png","pc":"shadcnblockscom"},{"id":"21st:shadcnblockscom__shadcnblocks-com-cta11","t":"Shadcnblocks com cta11","d":"Classic cta block with 2 buttons, center aligned","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnblockscom","st":"indexed","u":88,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-cta11/default/preview.1737979797193.png","pc":"shadcnblockscom","tg":["cta"]},{"id":"21st:shadcnblockscom__shadcnblocks-com-feature108","t":"Shadcnblocks com feature108","d":"A versatile section with 3 features inside a tabs component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"shadcnblockscom","st":"indexed","u":1027,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-feature108/default/preview.1737979331417.png","pc":"shadcnblockscom","tg":["features","tabs"]},{"id":"21st:shadcnblockscom__shadcnblocks-com-footer2","t":"Shadcnblocks com footer2","d":"A footer with a logo, tagline and multiple menus","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shadcnblockscom","st":"indexed","u":303,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-footer2/default/preview.1737979441155.png","pc":"shadcnblockscom","tg":["footer"]},{"id":"21st:shadcnblockscom__shadcnblocks-com-hero115","t":"Shadcnblocks com hero115","d":"A hero section with a radial circle background pattern","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shadcnblockscom","st":"indexed","u":101,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-hero115/default/preview.png","pc":"shadcnblockscom"},{"id":"21st:shadcnblockscom__shadcnblocks-com-hero45","t":"Shadcnblocks com hero45","d":"A hero section with 3 features underneath","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnblockscom","st":"indexed","u":136,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-hero45/default/preview.1737979876570.png","pc":"shadcnblockscom","tg":["features"]},{"id":"21st:shadcnblockscom__shadcnblocks-com-navbar1","t":"Shadcnblocks com navbar1","d":"A classic shadcn style navbar with dropdowns and mobile slide in menu.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnblockscom","st":"indexed","u":1974,"pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblocks-com-navbar1/default/preview.1737979231173.png","pc":"shadcnblockscom","tg":["menu"]},{"id":"21st:shadcnblockscom__signup-1","t":"Signup 1","d":"Signup page with email and Google auth buttons","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shadcnblockscom","st":"indexed","u":172,"pl":"https://cdn.21st.dev/shadcnblockscom/signup-1/default/preview.1747813152257.png","pc":"shadcnblockscom","tg":["form","input","sign-up"]},{"id":"21st:shadcncraft__tagline","t":"Tagline","d":"A small tagline or eyebrow label with badge, outline, ghost, and pill variants for marketing sections.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"shadcncraft","st":"indexed","u":9,"pl":"https://cdn.21st.dev/shadcncraft/tagline/default/preview.1783714244883.png","pc":"shadcncraft","tg":["badge"]},{"id":"21st:shadcnspace__accordion-multi-level","t":"Accordion multi level","d":"Here is accordion multi-level component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcnspace","st":"indexed","u":35,"pl":"https://cdn.21st.dev/larsen66/accordion-multi-level/default/preview.1772724010499.png","pc":"shadcnspace","tg":["accordion","list"]},{"id":"21st:shadcnspace__accordion-space","t":"Accordion space","d":"Here is Accordion component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/lyanchouss/accordion-space/default/preview.1772631277914.png","pc":"shadcnspace","tg":["accordion","list"]},{"id":"21st:shadcnspace__animated-list","t":"Animated list","d":"Here is animated list component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnspace","st":"indexed","u":27,"pl":"https://cdn.21st.dev/larsen66/animated-list/default/preview.1772797921840.png","pc":"shadcnspace","tg":["list","notification"]},{"id":"21st:shadcnspace__animated-text-01","t":"Animated text 01","d":"An animated text with a shimmering light sweep effect that continuously moves across the letters.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/animated-text-01/default/preview.1784397702009-924c45fe-b457-4ccf-b74d-f8d024039adc.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__animated-text-02","t":"Animated text 02","d":"A text element with a smoothly animated color gradient that continuously shifts between two hues.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/animated-text-02/default/preview.1784753852666-d24b20a4-d1aa-4b70-90a7-23730ea81010.png","pc":"shadcnspace","tg":["text"]},{"id":"21st:shadcnspace__animated-text-04","t":"Animated text 04","d":"An animated text component that vertically rolls through a sequence of status messages with smooth transitions.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shadcnspace","st":"indexed","u":6,"pl":"https://cdn.21st.dev/shadcnspace/animated-text-04/default/preview.1784478712370-f38692e6-c402-41a4-a8d8-6e40974b17eb.png","pc":"shadcnspace","tg":["text"]},{"id":"21st:shadcnspace__animated-tooltip","t":"Animated tooltip","d":"Here is animated tooltip component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/animated-tooltip/default/preview.1772709544969.png","pc":"shadcnspace","tg":["team","tooltip"]},{"id":"21st:shadcnspace__apple-dock","t":"Apple dock","d":"Here is apple dock component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/apple-dock/default/preview.1772800397596.png","pc":"shadcnspace","tg":["dock"]},{"id":"21st:shadcnspace__auto-growing-textarea","t":"Auto growing textarea","d":"Here is auto growing textarea component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/auto-growing-textarea/default/preview.1772711337821.png","pc":"shadcnspace","tg":["form","input","textarea"]},{"id":"21st:shadcnspace__avatar-badge","t":"Avatar badge","d":"Here is avatar badge component.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"shadcnspace","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/avatar-badge/default/preview.1773068104573.png","pc":"shadcnspace","tg":["badge","avatar"]},{"id":"21st:shadcnspace__avatar-border","t":"Avatar border","d":"Here is avatar border component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/avatar-border/default/preview.1773068709168.png","pc":"shadcnspace","tg":["badge","avatar","border","profile"]},{"id":"21st:shadcnspace__avatar-one","t":"Avatar one","d":"Here is avatar component.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/avatar-one/default/preview.1773067254355.png","pc":"shadcnspace","tg":["avatar","profile"]},{"id":"21st:shadcnspace__basic","t":"Basic","d":"Here is basic spinning text component","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/basic/default/preview.1772718378885.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__breadcrumb-01","t":"Breadcrumb 01","d":"A compact breadcrumb navigation with a rounded pill container, a home icon, and chevron separators for showing the current page path.","k":"component","s":"21st","c":"media/icon","g":"media","a":"shadcnspace","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnspace/breadcrumb-01/default/preview.1784392202187-5090169a-f4ac-491a-b977-9dc3c0530056.png","pc":"shadcnspace","tg":["icon","navigation-menu"]},{"id":"21st:shadcnspace__button-save","t":"Button save","d":"Here is button save component.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-save/default/preview.1773081261504.png","pc":"shadcnspace","tg":["button"]},{"id":"21st:shadcnspace__button-witn-icon","t":"Button witn icon","d":"Here is button with icon","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcnspace","st":"indexed","u":174,"pl":"https://cdn.21st.dev/larsen66/button-witn-icon/default/preview.1773070936480.png","pc":"shadcnspace","tg":["button","icon"]},{"id":"21st:shadcnspace__carousel-07","t":"Carousel 07","d":"An interactive draggable carousel that fans out cards with rotation, overlap, and depth scaling for showcasing images or destinations.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"shadcnspace","st":"indexed","u":14,"pl":"https://cdn.21st.dev/shadcnspace/carousel-07/default/preview.1784795885529-ef799f4e-a0c5-4169-948e-980637846a73.png","pc":"shadcnspace","tg":["carousel","gallery","slider"]},{"id":"21st:shadcnspace__contemt-tooltip","t":"Contemt tooltip","d":"Here is content tooltip component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/contemt-tooltip/default/preview.1772653694817.png","pc":"shadcnspace","tg":["tooltip"]},{"id":"21st:shadcnspace__custom-colors","t":"Custom colors","d":"Here is custom colors component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcnspace","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/custom-colors/default/preview.1772718048708.png","pc":"shadcnspace","tg":["form","toggle"]},{"id":"21st:shadcnspace__default","t":"Default","d":"Here is according default component","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/default/default/preview.1772723626374.png","pc":"shadcnspace","tg":["accordion"]},{"id":"21st:shadcnspace__download-01","t":"Download 01","d":"A responsive download section with cards for every platform — iOS, Android, web, desktop, and browser extensions — so users can quickly grab the right app.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/download-01/default/preview.1784459369976-065fddad-a983-4a58-abe9-4c9131b28a78.png","pc":"shadcnspace","tg":["features"]},{"id":"21st:shadcnspace__error-tooltip","t":"Error tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/error-tooltip/default/preview.1772647669362.png","pc":"shadcnspace","tg":["tooltip"]},{"id":"21st:shadcnspace__fallback-avatar-one","t":"Fallback avatar one","d":"Here is fallback avatar component.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/fallback-avatar-one/default/preview.1773070977965.png","pc":"shadcnspace","tg":["avatar","profile"]},{"id":"21st:shadcnspace__feature-01","t":"Feature 01","d":"A feature section pairing a highlighted customer testimonial with a grid of benefit cards to showcase social proof and key product advantages on SaaS or product pages.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/feature-01/default/preview.1784817182362-deacfd7c-9b73-4269-b67c-fba3f8d22500.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__feedback-textarea","t":"Feedback textarea","d":"Here is feedback textarea component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/feedback-textarea/default/preview.1772710052310.png","pc":"shadcnspace","tg":["textarea"]},{"id":"21st:shadcnspace__figma-file-button","t":"Figma file button","d":"Here is Figma file button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/figma-file-button/default/preview.1773078067204.png","pc":"shadcnspace","tg":["button"]},{"id":"21st:shadcnspace__footer-01","t":"Footer 01","d":"A clean multi-column footer section with brand summary, sitemap links, legal pages, contact details, and social icons for agency and business websites.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shadcnspace","st":"indexed","u":10,"pl":"https://cdn.21st.dev/shadcnspace/footer-01/default/preview.1784818505149-ed0e668f-bd79-4049-afa0-9f56f7faeba1.png","pc":"shadcnspace","tg":["footer","link","navigation-menu"]},{"id":"21st:shadcnspace__footer-02","t":"Footer 02","d":"A dark-themed website footer with newsletter email signup, a strong contact call-to-action, navigation links, and a copyright notice.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/footer-02/default/preview.1784817129749-5e7d1f30-5e38-4e39-abe5-477372660855.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__heartbeat-effect-button","t":"Heartbeat effect button","d":"Here is button with heartbeat effect component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/heartbeat-effect-button/default/preview.1773075908918.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__hover-blog-card","t":"Hover blog card","d":"Here is hover blog component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/hover-blog-card/default/preview.1772709004072.png","pc":"shadcnspace","tg":["tooltip"]},{"id":"21st:shadcnspace__marquee-01","t":"Marquee 01","d":"A scrolling testimonials marquee with two rows of review cards moving in opposite directions and edge fade gradients.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"shadcnspace","st":"indexed","u":10,"pl":"https://cdn.21st.dev/shadcnspace/marquee-01/default/preview.1784150693674.png","pc":"shadcnspace","tg":["marquee","testimonials"]},{"id":"21st:shadcnspace__number-ticker-01","t":"Number ticker 01","d":"An animated count-up number that smoothly tickers from a start value to an end value, with optional prefix, suffix and decimal formatting.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/number-ticker-01/default/preview.1784793659157-90145455-10a7-48b5-8d15-cd7d5bccf1bc.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__number-ticker-02","t":"Number ticker 02","d":"An animated currency counter that smoothly rolls between values for displaying prices, balances, or real-time financial figures.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnspace","st":"indexed","u":3,"pl":"https://cdn.21st.dev/shadcnspace/number-ticker-02/default/preview.1784794408484-f4da32ff-d54a-47ea-aa22-733d21a90050.png","pc":"shadcnspace","tg":["pricing-section"]},{"id":"21st:shadcnspace__number-ticker-04","t":"Number ticker 04","d":"An animated percentage counter that shifts color and swaps direction icons to signal positive or negative growth trends, ideal for KPIs, stock changes, and quarterly metrics.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/number-ticker-04/default/preview.1784832147107-b3b0d6c2-224e-4fed-b07a-d565ad6e3a5c.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__number-ticker-05","t":"Number ticker 05","d":"An animated statistics counter that displays large numbers clearly with a live \"active\" pulse indicator, ideal for user counts, page views, or total downloads.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"shadcnspace","st":"indexed","u":15,"pl":"https://cdn.21st.dev/shadcnspace/number-ticker-05/default/preview.1784794990098-b4f1e487-235c-4cb0-85a2-71b9e3b35eaa.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__orbiting-circles-02","t":"Orbiting circles 02","d":"Full-display orbiting rings of integration icons circling a center particle globe rendered on canvas.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/orbiting-circles-02/default/preview.1783572470221.png","pc":"shadcnspace","tg":["globe"]},{"id":"21st:shadcnspace__outline-with-icon","t":"Outline with icon","d":" Here is outline with icon component.","k":"component","s":"21st","c":"media/icon","g":"media","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/outline-with-icon/default/preview.1773094037643.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__pricing-01","t":"Pricing 01","d":"A two-tier pricing section with feature comparison, highlighted plan cards, and animated call-to-action buttons for SaaS and startup landing pages.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/pricing-01/default/preview.1784817164368-abfbbd53-953e-47b3-b717-fa87db04417c.png","pc":"shadcnspace","tg":["pricing-section","table"]},{"id":"21st:shadcnspace__progress-02","t":"Progress 02","d":"An onboarding progress tracker with a step counter, percentage completion bar, and back/next navigation buttons.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcnspace","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnspace/progress-02/default/preview.1783694619073.png","pc":"shadcnspace","tg":["onboarding","progress","steps"]},{"id":"21st:shadcnspace__progress-03","t":"Progress 03","d":"A compact skills overview card with color-coded, animated progress bars and an entrance fill effect.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/progress-03/default/preview.1784436996863-3a5608b4-bb20-41a5-99a1-198c4d94975e.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__radio-group-animated","t":"Radio group animated","d":"Here is radio group animated component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-animated/default/preview.1772720592984.png","pc":"shadcnspace","tg":["radio-group"]},{"id":"21st:shadcnspace__radio-group-card-vertical-demo","t":"Radio group card vertical demo","d":" Here is radio group card vertical demo component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-card-vertical-demo/default/preview.1772722029788.png","pc":"shadcnspace","tg":["radio-group"]},{"id":"21st:shadcnspace__radio-group-colors-demo","t":"Radio group colors demo","d":"Here is radio croup colors component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcnspace","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/radio-group-colors-demo/default/preview.1772721331010.png","pc":"shadcnspace","tg":["form","radio-group"]},{"id":"21st:shadcnspace__radio-group-dashed-demo","t":"Radio group dashed demo","d":"Here is radio group dashed ccomponent","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-dashed-demo/default/preview.1772722261252.png","pc":"shadcnspace","tg":["radio-group"]},{"id":"21st:shadcnspace__radio-group-list","t":"Radio group list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-list/default/preview.1772722542760.png","pc":"shadcnspace","tg":["list","pricing-section","radio-group"]},{"id":"21st:shadcnspace__radio-group-with-plan-cards","t":"Radio group with plan cards","d":"Here is  radio group with plan cards component","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radio-group-with-plan-cards/default/preview.1772721652949.png","pc":"shadcnspace","tg":["pricing-section","radio-group"]},{"id":"21st:shadcnspace__required-textarea","t":"Required textarea","d":"Here is required textarea component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/required-textarea/default/preview.1772710782447.png","pc":"shadcnspace","tg":["textarea"]},{"id":"21st:shadcnspace__rounded-tooltip","t":"Rounded tooltip","d":"Here is a  rounded tooltip component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/rounded-tooltip/default/preview.1772651823654.png","pc":"shadcnspace","tg":["tooltip"]},{"id":"21st:shadcnspace__scroll-area-01","t":"Scroll area 01","d":"A scrollable file explorer list with type icons, size badges, sticky column headers, and a custom scroll area.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/scroll-area-01/default/preview.1784413866728-a6036ce0-e280-4ca4-a28c-d9ae3c83540c.png","pc":"shadcnspace","tg":["file-tree","scroll-area"]},{"id":"21st:shadcnspace__scroll-area-03","t":"Scroll area 03","d":"A vertically scrollable image gallery with soft fade-mask edges, built on shadcn ScrollArea to showcase a portfolio of images in a compact column.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/scroll-area-03/default/preview.1784719317590-80d79e60-7650-42e7-8a7f-d8a4e70b574c.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__services-02","t":"Services 02","d":"An interactive services section with a hoverable list that swaps a visual preview and reveals the active service's description, ideal for agency and portfolio pages.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/services-02/default/preview.1784685495861-4d3c3d29-3b34-4d25-9436-584ebc9ab952.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__shadcn-accordion","t":"Shadcn accordion","d":"Accordions are one of those components you don’t think much about until your page gets too long. When used well, they make content easier to scan, reduce visual noise, and help use","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shadcnspace","st":"indexed","u":29,"pl":"https://cdn.21st.dev/shadcnspace/shadcn-accordion/default/preview.1772202660921.png","pc":"shadcnspace","tg":["accordion","list"]},{"id":"21st:shadcnspace__shine-border","t":"Shine border","d":"Here is shine border component","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"shadcnspace","st":"indexed","u":84,"pl":"https://cdn.21st.dev/larsen66/shine-border/default/preview.1772718920491.png","pc":"shadcnspace","tg":["border","pricing-section"]},{"id":"21st:shadcnspace__shine-border-02","t":"Shine border 02","d":"An animated card wrapped in a laser-scanner shine border with a vertical gradient sweep, styled as an identity-verification security card.","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"shadcnspace","st":"indexed","u":12,"pl":"https://cdn.21st.dev/shadcnspace/shine-border-02/default/preview.1784482557563-8dd834f4-99ed-4bac-bbc7-8598e90950a5.png","pc":"shadcnspace","tg":["profile"]},{"id":"21st:shadcnspace__shine-border-04","t":"Shine border 04","d":"An animated conic-gradient shine border wrapping a business stats dashboard card with live metrics and a call-to-action button.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/shine-border-04/default/preview.1784402601573-8aa63fe9-dcfb-4aa8-9e0e-f6e1410f65a1.png","pc":"shadcnspace","tg":["border","stat"]},{"id":"21st:shadcnspace__shine-hover","t":"Shine hover","d":"Here is shine hover botton","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shadcnspace","st":"indexed","u":30,"pl":"https://cdn.21st.dev/larsen66/shine-hover/default/preview.1773072742427.png","pc":"shadcnspace","tg":["button"]},{"id":"21st:shadcnspace__skeleton-03","t":"Skeleton 03","d":"An animated list loading skeleton with a title bar, icon-and-text rows, and badge placeholders that stagger a fade-up when scrolled into view.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/skeleton-03/default/preview.1784786101930-e0befd59-2ee3-426c-aeed-0344cef2ae41.png","pc":"shadcnspace","tg":["list","spinner"]},{"id":"21st:shadcnspace__social-icon","t":"Social icon","d":"Here is social icon button","k":"component","s":"21st","c":"actions/link","g":"actions","a":"shadcnspace","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/social-icon/default/preview.1773079192877.png","pc":"shadcnspace","tg":["link"]},{"id":"21st:shadcnspace__sonner-05","t":"Sonner 05","d":"A custom Sonner toast notification that displays repository sync status with branch info and action buttons.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"shadcnspace","st":"rated","pl":"https://cdn.21st.dev/shadcnspace/sonner-05/default/preview.1783695087058.png","pc":"shadcnspace","tg":["notification","toast"],"sc":24},{"id":"21st:shadcnspace__spinner-07","t":"Spinner 07","d":"An animated loading spinner with a pulsing central core and an orbiting satellite dot circling a faint ring.","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/spinner-07/default/preview.1784785430677-6077cc2c-d805-414f-9760-0c91d2fa1c4a.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__spinner-08","t":"Spinner 08","d":"A clock-style loading spinner with a rotating ring and a marker arm that completes a full rotation.","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/spinner-08/default/preview.1784784304925-59b95b32-9af7-43de-ab15-49b1fc125fe2.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__spinner-09","t":"Spinner 09","d":"A loading spinner with concentric expanding circular waves that create a ripple effect.","k":"component","s":"21st","c":"status/loader","g":"status","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/spinner-09/default/preview.1784784974455-55d40e52-66bf-4352-8983-6a49f6c59ceb.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__spinning-text-02","t":"Spinning text 02","d":"Circular text that rotates around a centered icon and speeds up on hover, useful for badges, seals, and hero accents.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/spinning-text-02/default/preview.1784772486481-79d3a158-0012-473a-abe6-594a458b64a6.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__statistics-01","t":"Statistics 01","d":"A compact statistics section with KPI cards showing earnings, expenses, weekly sales, and orders for admin dashboards.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/statistics-01/default/preview.1784685547678-8fef0468-560d-4adb-b85c-ae6833ee135d.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__statistics-02","t":"Statistics 02","d":"A horizontal KPI bar showing orders, sales, profit, and expenses with weekly change badges for at-a-glance dashboard monitoring.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/statistics-02/default/preview.1784685474715-04fe71bf-935d-417f-9950-9e7193108afe.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__testimonial-01","t":"Testimonial 01","d":"A bento-grid testimonial section combining customer quotes, imagery, and a performance stat to showcase social proof and build trust on marketing or agency websites.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/shadcnspace/testimonial-01/default/preview.1784817145625-78e24c19-35c8-44f9-aa6a-b21a6b21bf4a.png","pc":"shadcnspace"},{"id":"21st:shadcnspace__textarea-with-button","t":"Textarea with button","d":"Here is textarea with button component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/textarea-with-button/default/preview.1772711125378.png","pc":"shadcnspace","tg":["textarea"]},{"id":"21st:shadcnspace__textarea-with-characters-left","t":"Textarea with characters left","d":"Here is textarea with characters left component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/textarea-with-characters-left/default/preview.1772711593047.png","pc":"shadcnspace","tg":["textarea"]},{"id":"21st:shadcnspace__textarea-with-floating-label","t":"Textarea with floating label","d":"Here is textarea with floating label component","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/textarea-with-floating-label/default/preview.1772711842153.png","pc":"shadcnspace","tg":["textarea"]},{"id":"21st:shadcnspace__textarea-with-icon","t":"Textarea with icon","d":"Here is textarea with icon component","k":"component","s":"21st","c":"media/icon","g":"media","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/textarea-with-icon/default/preview.1772710498004.png","pc":"shadcnspace","tg":["icon","textarea"]},{"id":"21st:shadcnspace__toggle-theme","t":"Toggle theme","d":"Here is toogle theme component.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/toggle-theme/default/preview.1772714875655.png","pc":"shadcnspace","tg":["icon","toggle"]},{"id":"21st:shadcnspace__tooltip-position","t":"Tooltip position","d":"Here is tooltip position component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tooltip-position/default/preview.1772650656197.png","pc":"shadcnspace","tg":["tooltip"]},{"id":"21st:shadcnspace__with-description","t":"With description","d":"Here is description component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/with-description/default/preview.1772717137458.png","pc":"shadcnspace","tg":["toggle"]},{"id":"21st:shadcnspace__with-icon","t":"With icon","d":"Here is notifications component","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shadcnspace","st":"indexed","pl":"https://cdn.21st.dev/larsen66/with-icon/default/preview.1772714642036.png","pc":"shadcnspace","tg":["notification","toggle"]},{"id":"21st:shadcnspace__with-label","t":"With label","d":"Here is label component","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"shadcnspace","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/with-label/default/preview.1772717438204.png","pc":"shadcnspace"},{"id":"21st:shadcnstore__cta-section-2","t":"Cta section 2","d":"A centered call-to-action section with a heading, email subscribe input, and a stack of member avatars with social proof.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnstore","st":"indexed","u":28,"pl":"https://cdn.21st.dev/shadcnstore/cta-section-2/default/preview.1783728537320.png","pc":"shadcnstore","tg":["cta"]},{"id":"21st:shadcnstore__cta-section-3","t":"Cta section 3","d":"A call-to-action marketing section with a headline, badge, action buttons, and resource cards for documentation and video tutorials.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnstore","st":"indexed","u":50,"pl":"https://cdn.21st.dev/shadcnstore/cta-section-3/default/preview.1783728595090.png","pc":"shadcnstore","tg":["cta"]},{"id":"21st:shadcnstore__error-page-1","t":"Error page 1","d":"A responsive 404 error page with an illustration, heading, and call-to-action buttons.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnstore","st":"indexed","pl":"https://cdn.21st.dev/shadcnstore/error-page-1/default/preview.1783730097837.png","pc":"shadcnstore","tg":["empty-state"]},{"id":"21st:shadcnstore__error-page-2","t":"Error page 2","d":"A responsive full-screen 404 error page with a split layout, logo, message, back-home button, and side image.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnstore","st":"indexed","u":8,"pl":"https://cdn.21st.dev/shadcnstore/error-page-2/default/preview.1783730695954.png","pc":"shadcnstore","tg":["empty-state"]},{"id":"21st:shadcnstore__feature-1","t":"Feature 1","d":"A responsive feature section with a badge heading, a four-column grid of icon cards, and a call-to-action button for marketing and product pages.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnstore","st":"indexed","pl":"https://cdn.21st.dev/shadcnstore/feature-1/default/preview.1785099953861-0c006d62-4c8b-482b-9820-a9c00da26f97.png","pc":"shadcnstore"},{"id":"21st:shadcnstore__feature-2","t":"Feature 2","d":"A two-column feature section with a headline, icon-based benefit list, and an accompanying image, ideal for marketing landing pages.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnstore","st":"indexed","pl":"https://cdn.21st.dev/shadcnstore/feature-2/default/preview.1785099268978-8cbd6401-935b-46a7-8c07-382935a55aa3.png","pc":"shadcnstore"},{"id":"21st:shadcnstore__login-page-1","t":"Login page 1","d":"A responsive centered login page card with email and password fields, remember-me, forgot password, and social sign-in buttons.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shadcnstore","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnstore/login-page-1/default/preview.1784362050056-c400adaf-13da-4761-b8ac-1519a869869a.png","pc":"shadcnstore","tg":["checkbox","sign-in"]},{"id":"21st:shadcnstore__pricing-section-1","t":"Pricing section 1","d":"A responsive three-tier pricing section with feature lists, a highlighted popular plan, and call-to-action buttons.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnstore","st":"indexed","u":28,"pl":"https://cdn.21st.dev/shadcnstore/pricing-section-1/default/preview.1784356771757-64366fdc-6655-4c48-9e96-7848b43dbcd4.png","pc":"shadcnstore","tg":["cta","pricing-section","table"]},{"id":"21st:shadcnui-blocks__breadcrumb-10","t":"Breadcrumb 10","d":"A breadcrumb navigation whose current page is highlighted as a rounded badge, using chevron separators between links.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"shadcnui-blocks","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnui-blocks/breadcrumb-10/default/preview.1784661066302-5871bb0b-a165-481e-a76d-7491d080120a.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__breadcrumb-11","t":"Breadcrumb 11","d":"A breadcrumb navigation where each item is rendered as a rounded badge pill with chevron separators.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/breadcrumb-11/default/preview.1784710145779-9bc16e4b-10dc-40b3-813e-ef1600c3a8ef.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__breadcrumb-13","t":"Breadcrumb 13","d":"A breadcrumb navigation trail with one segment rendered as a dropdown menu of related links.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/breadcrumb-13/default/preview.1784826555386-e30f3d6a-d36b-44ae-8510-7f22e3bf0e8f.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__breadcrumb-15","t":"Breadcrumb 15","d":"A breadcrumb navigation that displays a horizontal sequence of icon steps connected by short lines to show progress through a multi-stage flow.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcnui-blocks","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnui-blocks/breadcrumb-15/default/preview.1784768751269-7018b15a-3e2e-482b-ac04-37a274bc1ea0.png","pc":"shadcnui-blocks","tg":["navigation-menu","progress"]},{"id":"21st:shadcnui-blocks__cta-04","t":"Cta 04","d":"A centered call-to-action section with a headline, supporting text, a primary button, and a side illustration on a subtly patterned card.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/cta-04/default/preview.1784790875968-adf8113b-a894-4772-b190-44f83a6e355f.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__empty-state-01","t":"Empty state 01","d":"An empty state placeholder inside a card that prompts users to create or import their first item with icon, title, description, and action buttons.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/empty-state-01/default/preview.1783730693747.png","pc":"shadcnui-blocks","tg":["empty-state"]},{"id":"21st:shadcnui-blocks__empty-state-02","t":"Empty state 02","d":"An empty state placed inside a data table that prompts users to create or import their first invoice.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/empty-state-02/default/preview.1783730813924.png","pc":"shadcnui-blocks","tg":["empty-state"]},{"id":"21st:shadcnui-blocks__empty-state-03","t":"Empty state 03","d":"An empty state block with tabs for invoices, payments, and subscriptions, each showing an icon, message, and call-to-action buttons.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/empty-state-03/default/preview.1784385403227-81b64fd3-5e58-48eb-b0d4-491072759804.png","pc":"shadcnui-blocks","tg":["empty-state","tabs"]},{"id":"21st:shadcnui-blocks__empty-state-04","t":"Empty state 04","d":"An empty state block showing a vertically scrolling marquee of skeleton rows with a title, description, and create/import action buttons for when no data exists yet.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnui-blocks","st":"indexed","u":92,"pl":"https://cdn.21st.dev/shadcnui-blocks/empty-state-04/default/preview.1783732164200.png","pc":"shadcnui-blocks","tg":["empty-state","marquee"]},{"id":"21st:shadcnui-blocks__features-03","t":"Features 03","d":"A responsive features section with two capability cards, icon-led bullet points, call-to-action buttons, and media placeholders.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/features-03/default/preview.1785101827231-e4404ea8-6c5d-47c0-b9f0-881fee246082.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__features-11","t":"Features 11","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/features-11/default/preview.1785101862057-582c2cc4-5b0a-4887-9d76-63d6088f7241.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__integrations-02","t":"Integrations 02","d":"An integrations panel listing third-party tools and services, each with a favicon and a Connect button or Connected status badge.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shadcnui-blocks","st":"indexed","u":10,"pl":"https://cdn.21st.dev/shadcnui-blocks/integrations-02/default/preview.1785100926227-9c3f0724-92ea-4d0e-a8ff-02944e76a378.png","pc":"shadcnui-blocks","tg":["list"]},{"id":"21st:shadcnui-blocks__logo-cloud-09","t":"Logo cloud 09","d":"A responsive grid of grayscale company logos to showcase the brands and teams that trust your product.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"shadcnui-blocks","st":"indexed","u":6,"pl":"https://cdn.21st.dev/shadcnui-blocks/logo-cloud-09/default/preview.1784769653105-53df3849-b80a-4260-b9e3-3d0cdc664997.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__logo-cloud-10","t":"Logo cloud 10","d":"A logo cloud section that displays company logos in a bordered responsive grid with dashed corner accents to show social proof.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"shadcnui-blocks","st":"indexed","u":3,"pl":"https://cdn.21st.dev/shadcnui-blocks/logo-cloud-10/default/preview.1784771274215-d3e5b1bc-d737-4f36-9007-adaf5d9b058a.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__logo-cloud-14","t":"Logo cloud 14","d":"A logo cloud section pairing a featured \"trusted by\" card with a call-to-action button and a responsive grid of company logos.","k":"component","s":"21st","c":"media/icon","g":"media","a":"shadcnui-blocks","st":"indexed","u":10,"pl":"https://cdn.21st.dev/shadcnui-blocks/logo-cloud-14/default/preview.1784770734183-3517f941-49a6-4890-bfad-a8e241bd710c.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__logo-cloud-15","t":"Logo cloud 15","d":"An animated logo cloud that scrolls brand logos in a marquee inside a bordered card with a glowing border beam and a light-sweep heading.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"shadcnui-blocks","st":"indexed","u":8,"pl":"https://cdn.21st.dev/shadcnui-blocks/logo-cloud-15/default/preview.1784771071872-5c1b0731-a748-4f06-b462-fd50657f883e.png","pc":"shadcnui-blocks","tg":["border","marquee"]},{"id":"21st:shadcnui-blocks__navigation-menu-01","t":"Navigation menu 01","d":"A horizontal navigation menu with a simple list of links for site-level navigation.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/navigation-menu-01/default/preview.1784447638517-5b2ffa45-11b9-4f0f-9e8f-0ecf0878e2a5.png","pc":"shadcnui-blocks","tg":["menu","navigation-menu"]},{"id":"21st:shadcnui-blocks__navigation-menu-02","t":"Navigation menu 02","d":"A horizontal navigation menu with an icon next to each link label.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/navigation-menu-02/default/preview.1784409179095-7cf47d55-f236-401c-bb65-b8371d17d708.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__navigation-menu-04","t":"Navigation menu 04","d":"A horizontal navigation menu with icon links where the current page is highlighted as the active item.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/navigation-menu-04/default/preview.1784413872685-c73d620a-adbf-4ba1-9947-f91eb7630352.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__navigation-menu-05","t":"Navigation menu 05","d":"A horizontal navigation menu with icons where the active and hovered items are highlighted by an animated underline.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/navigation-menu-05/default/preview.1784468754723-cc2c299b-742f-4ad4-b723-2c7b90c3a6da.png","pc":"shadcnui-blocks","tg":["navigation-menu"]},{"id":"21st:shadcnui-blocks__navigation-menu-06","t":"Navigation menu 06","d":"A feature-rich navigation menu with multi-column dropdown panels, icons, and descriptions for building site headers.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shadcnui-blocks","st":"indexed","u":6,"pl":"https://cdn.21st.dev/shadcnui-blocks/navigation-menu-06/default/preview.1784402589357-df36d659-aff3-4089-a586-8cf8af372849.png","pc":"shadcnui-blocks","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:shadcnui-blocks__not-found-02","t":"Not found 02","d":"A full-page 404 not found section with an oversized \"404\", a heading, a list of suggested links, and go-home/contact action buttons.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shadcnui-blocks","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnui-blocks/not-found-02/default/preview.1784817081685-721120f0-d5d8-4066-94f8-b19396db274c.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__not-found-04","t":"Not found 04","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/not-found-04/default/preview.1785099212513-81d53280-7ef3-4a57-a6d6-11dc0b7538ae.png","pc":"shadcnui-blocks","tg":["empty-state","search"]},{"id":"21st:shadcnui-blocks__not-found-06","t":"Not found 06","d":"A 404 not found page with a centered message and a grid of popular page cards linking to key sections.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shadcnui-blocks","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnui-blocks/not-found-06/default/preview.1784798983313-c40017e3-55ef-4094-a3ef-f523fc6366c3.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__pricing-04","t":"Pricing 04","d":"A three-tier pricing section with a monthly/yearly billing toggle, animated prices, a highlighted popular plan, and feature lists with helper tooltips.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/pricing-04/default/preview.1785102608840-2ea55f9c-d6d7-4b0b-aa67-f6970019d856.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__pricing-08","t":"Pricing 08","d":"A three-tier pricing section with plan cards, feature lists, and a highlighted recommended plan.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/pricing-08/default/preview.1785101279705-cb06fb33-064a-4544-8323-2befb9bb36fc.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__progress-10","t":"Progress 10","d":"A circular (radial) progress indicator rendered with SVG that supports custom ring colors, sizes, stroke widths, and a centered percentage label.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcnui-blocks","st":"indexed","u":6,"pl":"https://cdn.21st.dev/shadcnui-blocks/progress-10/default/preview.1785101261615-8cc65a05-ca1a-4285-9118-cd5d5eb006a7.png","pc":"shadcnui-blocks","tg":["progress"]},{"id":"21st:shadcnui-blocks__progress-12","t":"Progress 12","d":"A circular SVG progress indicator that lets you set independent stroke widths for the track and progress arc, plus an optional centered percentage label.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shadcnui-blocks","st":"indexed","pl":"https://cdn.21st.dev/shadcnui-blocks/progress-12/default/preview.1785099227565-d7d37c51-d59b-4753-acaf-57936e9b8f66.png","pc":"shadcnui-blocks"},{"id":"21st:shadcnui-blocks__testimonials-13","t":"Testimonials 13","d":"A testimonials section that scrolls customer quote cards with avatars and company logos in an auto-playing marquee that pauses on hover.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"shadcnui-blocks","st":"indexed","u":4,"pl":"https://cdn.21st.dev/shadcnui-blocks/testimonials-13/default/preview.1785100980327-6405d80e-774a-4f3f-a11b-537c49c0878b.png","pc":"shadcnui-blocks","tg":["carousel","marquee","testimonials"]},{"id":"21st:shahrukhaqiq2__aidashboard","t":"Aidashboard","d":"Futuristic VR headset dashboard with inward curved tabs, SVG spotlight lines, and glowing annotations","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"shahrukhaqiq2","st":"indexed","pl":"https://21st.dev/@shahrukhaqiq2/components/aidashboard","pc":"shahrukhaqiq2"},{"id":"21st:shailendrakumar19999__404-page-not-found","t":"404 page not found","d":"this is for page not found","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/404-page-not-found/default/preview.1750671976361.png","pc":"shailendrakumar19999","tg":["empty-state"]},{"id":"21st:shailendrakumar19999__accordion","t":"Accordion","d":"This is Basic Accordion","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/accordion/default/preview.1784923762544-fcdd8ef0-e194-4e72-9ce1-42f3b8a43258.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__animated-3d-card","t":"Animated 3d card","d":"This is animated 3D card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shailendrakumar19999","st":"indexed","u":49,"pl":"https://cdn.21st.dev/shailendrakumar19999/animated-3d-card/default/preview.1750666507147.png","pc":"shailendrakumar19999","tg":["card","grid"]},{"id":"21st:shailendrakumar19999__animated-button","t":"Animated button","d":"This is a fascinating animated button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shailendrakumar19999","st":"indexed","u":50,"pl":"https://cdn.21st.dev/shailendrakumar19999/animated-button/default/preview.1750661119660.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__animated-car","t":"Animated car","d":"This is animated car moving on road","k":"component","s":"21st","c":"other","g":"other","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/animated-car/default/preview.1755417155529.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__animated-shape","t":"Animated shape","d":"This is animated shape","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shailendrakumar19999","st":"indexed","u":8,"pl":"https://cdn.21st.dev/shailendrakumar19999/animated-shape/default/preview.1755943078348.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__autosize-textarea","t":"Autosize textarea","d":"This is auto size textarea","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/autosize-textarea/default/preview.1760589738939.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__banner","t":"Banner","d":"This is banner","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/banner/default/preview.1760585008570.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__button","t":"Button","d":"This is animated live button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/button/default/preview.1755418833798.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__calling-card","t":"Calling card","d":"This is calling card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/calling-card/default/preview.1755429150534.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__contact-form","t":"Contact form","d":"This is contact form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/contact-form/default/preview.1755252047617.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__cosmic-plasma-web","t":"Cosmic plasma web","d":"A mesmerizing WebGL shader component that creates an animated cosmic plasma web with interconnected energy nodes, flowing particles, and organic movement. Built with OGL and React,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/cosmic-plasma-web/default/preview.1785307057016-8b22da10-98f9-4451-b199-7a1aabe51aef.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__cta","t":"Cta","d":"This is CTA","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/cta/default/preview.1755413176687.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__curve-text-loop","t":"Curve text loop","d":"This is curve text loop","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/curve-text-loop/default/preview.1759464510265.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__dashboard-stats","t":"Dashboard stats","d":"This is dashboard stats","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/dashboard-stats/default/preview.1762163983178.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__date-picker","t":"Date picker","d":"This is date picker","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/date-picker/default/preview.1756565113287.png","pc":"shailendrakumar19999","tg":["calendar","date-picker","dropdown","form"]},{"id":"21st:shailendrakumar19999__faq","t":"Faq","d":"This is modern FAQ ","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/faq/default/preview.1755253666545.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__firework","t":"Firework","d":"This is firework","k":"component","s":"21st","c":"other","g":"other","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/firework/default/preview.1756192022314.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__fixed-bottom-navigation","t":"Fixed bottom navigation","d":"This is fixed bottom navigation","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/fixed-bottom-navigation/default/preview.1757572889652.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__flip-card","t":"Flip card","d":"this is flip card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/flip-card/default/preview.1751014476094.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__form","t":"Form","d":"This is bio form","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/form/default/preview.1760590207556.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__hero","t":"Hero","d":"This is animated hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/hero/default/preview.1755422292296.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__hero-1","t":"Hero 1","d":"This is hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/hero-1/default/preview.1759050922693.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__hero-section","t":"Hero section","d":"This is hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/hero-section/default/preview.1759050157329.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__hexagon-background","t":"Hexagon background","d":"This is hexagon background animation","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/hexagon-background/default/preview.1756193774059.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__kanban","t":"Kanban","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/kanban/default/preview.1751006189028.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__landing","t":"Landing","d":"This is landing page.","k":"component","s":"21st","c":"marketing","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/landing/default/preview.1755249136118.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__landing-page","t":"Landing page","d":"this is landing page","k":"component","s":"21st","c":"marketing","g":"marketing","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/landing-page/default/preview.1752921175162.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__loding","t":"Loding","d":"This is loading","k":"component","s":"21st","c":"status/loader","g":"status","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/loding/default/preview.1755419823731.png","pc":"shailendrakumar19999","tg":["spinner"]},{"id":"21st:shailendrakumar19999__map","t":"Map","d":"Connect with teams and clients worldwide. Our platform enables seamless collaboration across continents, bringing the world to your workspace.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"shailendrakumar19999","st":"indexed","u":488,"pl":"https://cdn.21st.dev/shailendrakumar19999/map/default/preview.1755768664809.png","pc":"shailendrakumar19999","tg":["map"]},{"id":"21st:shailendrakumar19999__menu","t":"Menu","d":"This is Basic menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/menu/default/preview.1756482479688.png","pc":"shailendrakumar19999","tg":["dropdown","list","menu"]},{"id":"21st:shailendrakumar19999__newsletter-signup","t":"Newsletter signup","d":"This is news letter signup","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shailendrakumar19999","st":"indexed","u":5,"pl":"https://cdn.21st.dev/shailendrakumar19999/newsletter-signup/default/preview.1755360845165.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__sign-in","t":"Sign in","d":"this is sign","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shailendrakumar19999","st":"rated","pl":"https://cdn.21st.dev/shailendrakumar19999/sign-in/default/preview.1756198333662.png","pc":"shailendrakumar19999","sc":20},{"id":"21st:shailendrakumar19999__social-card","t":"Social card","d":"this is social card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shailendrakumar19999","st":"indexed","u":105,"pl":"https://cdn.21st.dev/shailendrakumar19999/social-card/default/preview.1751008656492.png","pc":"shailendrakumar19999","tg":["carousel","link"]},{"id":"21st:shailendrakumar19999__stack-cards","t":"Stack cards","d":"This is stack cards","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/stack-cards/default/preview.1757055933119.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__switch","t":"Switch","d":"this is switch","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shailendrakumar19999","st":"indexed","u":50,"pl":"https://cdn.21st.dev/shailendrakumar19999/switch/default/preview.1751011142219.png","pc":"shailendrakumar19999","tg":["toggle"]},{"id":"21st:shailendrakumar19999__table","t":"Table","d":"This is table with filder and sorting","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/table/default/preview.1757577713020.png","pc":"shailendrakumar19999","tg":["checkbox","pagination","table"]},{"id":"21st:shailendrakumar19999__timeline","t":"Timeline","d":"this is timeline order  of delivery","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/timeline/default/preview.1762163154508.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__tooltip","t":"Tooltip","d":"this is social tooltip","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/tooltip/default/preview.1751010426813.png","pc":"shailendrakumar19999"},{"id":"21st:shailendrakumar19999__transfer-items","t":"Transfer items","d":"This is Transfer Items Example","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"shailendrakumar19999","st":"rated","pl":"https://cdn.21st.dev/shailendrakumar19999/transfer-items/default/preview.1757054812184.png","pc":"shailendrakumar19999","sc":19},{"id":"21st:shailendrakumar19999__tree-folder-structure","t":"Tree folder structure","d":"This is tree folder structure","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/tree-folder-structure/default/preview.1756484398384.png","pc":"shailendrakumar19999","tg":["file-tree"]},{"id":"21st:shailendrakumar19999__user-profile","t":"User profile","d":"this is user profile","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"shailendrakumar19999","st":"indexed","pl":"https://cdn.21st.dev/shailendrakumar19999/user-profile/default/preview.1756982612209.png","pc":"shailendrakumar19999"},{"id":"21st:shalomeir__test-for-number","t":"Test for number","d":"hello 21st","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"shalomeir","st":"indexed","pl":"https://cdn.21st.dev/shalomeir/test-for-number/default/preview.1749456267463.png","pc":"shalomeir"},{"id":"21st:shehzammian919__a-retro-futuristic-maintenance-console","t":"A retro futuristic maintenance console","k":"component","s":"21st","c":"other","g":"other","a":"shehzammian919","st":"indexed","pl":"https://cdn.21st.dev/shehzammian919/a-retro-futuristic-maintenance-console/default/preview.1761306289114.png","pc":"shehzammian919"},{"id":"21st:shehzammian919__quantum-pulse-loade","t":"Quantum pulse loade","d":"A sleek and modern loading indicator featuring a smooth, pulsating gradient bar that conveys a sense of sophisticated progress and anticipation. Ideal for premium applications and ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shehzammian919","st":"indexed","pl":"https://cdn.21st.dev/shehzammian919/quantum-pulse-loade/default/preview.1758805937505.png","pc":"shehzammian919"},{"id":"21st:shehzammian919__scheduled-maintenance-card","t":"Scheduled maintenance card","d":"A modern and responsive Scheduled Maintenance Card that displays real-time maintenance progress, status, and expected completion time. Includes animated text, progress bar, and use","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"shehzammian919","st":"indexed","pl":"https://cdn.21st.dev/shehzammian919/scheduled-maintenance-card/default/preview.1761567737449.png","pc":"shehzammian919"},{"id":"21st:shengzhisang__button","t":"Button","d":"$35","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shengzhisang","st":"indexed","pl":"https://cdn.21st.dev/shengzhisang/button/default/preview.1750393726930.png","pc":"shengzhisang"},{"id":"21st:shivendra9795kumar__bioluminescent-login","t":"Bioluminescent login","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/bioluminescent-login/default/preview.1771444427932.png","pc":"shivendra9795kumar"},{"id":"21st:shivendra9795kumar__cinematic-image-showcase","t":"Cinematic image showcase","d":"A high-end, immersive hero component featuring a 3D parallax image card, refractive glass overlays, and dynamic typography. Designed for photography portfolios or studio landing pa","k":"component","s":"21st","c":"media/gallery","g":"media","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/cinematic-image-showcase/default/preview.1770929138570.png","pc":"shivendra9795kumar"},{"id":"21st:shivendra9795kumar__footer","t":"Footer","d":"Built as a single TSX demo with no external CSS, this footer uses backdrop blur, subtle parallax motion, and GPU-friendly transforms to create a molten glass effect. Mouse-driven d","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/footer/default/preview.1770238786937.png","pc":"shivendra9795kumar"},{"id":"21st:shivendra9795kumar__halide-topo-hero","t":"Halide topo hero","d":"A monochrome 3D hero component with topographical parallax layers and film grain effects.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"shivendra9795kumar","st":"indexed","u":175,"pl":"https://cdn.21st.dev/shivendra9795kumar/halide-topo-hero/default/preview.1770239804676.png","pc":"shivendra9795kumar"},{"id":"21st:shivendra9795kumar__neural-access-login","t":"Neural access login","d":"A futuristic cyberpunk authentication interface featuring smooth animations, minimal monochrome styling, and immersive sci-fi aesthetics.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/neural-access-login/default/preview.1782659931069.png","pc":"shivendra9795kumar","tg":["form","sign-in"]},{"id":"21st:shivendra9795kumar__oxide-loom-interface","t":"Oxide loom interface","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/oxide-loom-interface/default/preview.1771445260175.png","pc":"shivendra9795kumar"},{"id":"21st:shivendra9795kumar__thermal-roasting-landing-page","t":"Thermal roasting landing page","d":"A dark-themed, interactive landing page component. It features dynamic parallax mouse tracking, custom CSS geometry animations, a machined grid background, and a fully responsive l","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"shivendra9795kumar","st":"indexed","pl":"https://cdn.21st.dev/shivendra9795kumar/thermal-roasting-landing-page/default/preview.1771625938925.png","pc":"shivendra9795kumar"},{"id":"21st:shoota__header-navigation","t":"Header navigation","d":"A blog header bar with a title and an optional inline navigation menu that highlights the current page.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"shoota","st":"indexed","pl":"https://cdn.21st.dev/shoota/header-navigation/default/preview.1784829963113-efae6206-963e-4ff4-9775-9cd5efd78b1b.png","pc":"shoota"},{"id":"21st:shoota__picture","t":"Picture","d":"A figure primitive that frames an image with a grayscale-to-color hover reveal and an overlaid caption, for blog and editorial reading layouts.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"shoota","st":"indexed","pl":"https://cdn.21st.dev/shoota/picture/default/preview.1784745268046-8e8c87b6-f672-413a-93f1-caac1a14c4c4.png","pc":"shoota","tg":["image"]},{"id":"21st:shrekonelovee__dfe","t":"Dfe","d":"Animated (ripple) ASCII art in the Contour style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"shrekonelovee","st":"indexed","pl":"https://cdn.21st.dev/shrekonelovee/dfe/default/preview.1785786631500-58d26742-b538-4774-9b28-e1655b349090.webp","pc":"shrekonelovee"},{"id":"21st:shuding__cobe-globe","t":"Cobe globe","d":"A lightweight 5KB WebGL globe with markers, arcs, and CSS Anchor Positioning labels. Drag to rotate, with momentum physics.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe/default/preview.1774285308186.png","pc":"shuding","tg":["globe","map"]},{"id":"21st:shuding__cobe-globe-analytics","t":"Cobe globe analytics","d":"A WebGL globe with real-time visitor analytics badges. Numbers update live with trend arrows showing growth.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","u":27,"pl":"https://cdn.21st.dev/reapollo/cobe-globe-analytics/default/preview.1774286131682.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-bars","t":"Cobe globe bars","d":"A WebGL globe with progress bar cards anchored to city markers showing completion percentages.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","u":14,"pl":"https://cdn.21st.dev/reapollo/cobe-globe-bars/default/preview.1774286108409.png","pc":"shuding","tg":["data-visualization","globe","progress"]},{"id":"21st:shuding__cobe-globe-cdn","t":"Cobe globe cdn","d":"A Vercel-style WebGL globe with spinning 3D pyramid markers at edge regions and live traffic stats on arcs.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-cdn/default/preview.1774286201227.png","pc":"shuding","tg":["data-visualization","globe","stat"]},{"id":"21st:shuding__cobe-globe-flights","t":"Cobe globe flights","d":"A WebGL globe with flight route arcs and airplane emoji markers positioned along the arc paths.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-flights/default/preview.1774286079282.png","pc":"shuding","tg":["globe","map"]},{"id":"21st:shuding__cobe-globe-interactive","t":"Cobe globe interactive","d":"A WebGL globe with clickable markers that expand to show user counts. Click markers to toggle detail panels.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-interactive/default/preview.1774286702970.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-labels","t":"Cobe globe labels","d":"A WebGL globe with colorful rotated text labels anchored to locations. Each label has a candy-like glossy style.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-labels/default/preview.1774286176978.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-live","t":"Cobe globe live","d":"A WebGL globe with live streaming badges showing real-time viewer counts at each marker location.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","u":36,"pl":"https://cdn.21st.dev/reapollo/cobe-globe-live/default/preview.1774286620062.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-polaroids","t":"Cobe globe polaroids","d":"A WebGL globe with polaroid-style photo cards anchored to city markers. Photos rotate slightly for a scrapbook feel.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","u":38,"pl":"https://cdn.21st.dev/reapollo/cobe-globe-polaroids/default/preview.1774286225080.png","pc":"shuding","tg":["gallery","globe"]},{"id":"21st:shuding__cobe-globe-pulse","t":"Cobe globe pulse","d":"A dark-themed WebGL globe with animated pulsing rings at marker locations. Concentric rings expand and fade out.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-pulse/default/preview.1774286663059.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-satellites","t":"Cobe globe satellites","d":"A WebGL globe with satellite emoji markers orbiting at elevated positions above the surface.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-satellites/default/preview.1774286055449.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-stickers","t":"Cobe globe stickers","d":"A WebGL globe with emoji stickers anchored to city markers. Stickers float and rotate as the globe spins.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-stickers/default/preview.1774285950651.png","pc":"shuding","tg":["globe"]},{"id":"21st:shuding__cobe-globe-weather","t":"Cobe globe weather","d":"A WebGL globe with floating weather emoji markers across the world. Emojis gently bob up and down.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"shuding","st":"indexed","pl":"https://cdn.21st.dev/reapollo/cobe-globe-weather/default/preview.1774286031501.png","pc":"shuding","tg":["globe"]},{"id":"21st:shugar__avatar","t":"Avatar","d":"Avatars represent a user or a team. Stacked avatars represent a group of people","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shugar","st":"indexed","u":42,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/avatar/default/preview.png","pc":"shugar","tg":["avatar","icon","profile","team"]},{"id":"21st:shugar__avatar-1","t":"Avatar 1","d":"Avatars represent a user or a team. Stacked avatars represent a group of people","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"shugar","st":"indexed","u":22,"pl":"https://cdn.21st.dev/shugar/avatar-1/default/preview.1751970722799.png","pc":"shugar","tg":["badge","avatar","icon","profile"]},{"id":"21st:shugar__award-badge","t":"Award badge","d":"Product Hunt Badge\n\nInspired by https://gethorse.com/","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"shugar","st":"rated","u":308,"pl":"https://cdn.21st.dev/user_shugar/award-badge/default/preview.png","pc":"shugar","tg":["badge"],"sc":14},{"id":"21st:shugar__book","t":"Book","d":"A responsive book component.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shugar","st":"indexed","u":136,"pl":"https://cdn.21st.dev/shugar/book/default/preview.1751642846695.png","pc":"shugar"},{"id":"21st:shugar__button","t":"Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_shugar/button/default/preview.png","pc":"shugar","tg":["button"]},{"id":"21st:shugar__button-1","t":"Button 1","d":"Trigger an action or event, such as submitting a form or displaying a dialog.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"shugar","st":"indexed","u":379,"pl":"https://cdn.21st.dev/shugar/button-1/default/preview.1751968744644.png","pc":"shugar","tg":["upload-download"]},{"id":"21st:shugar__button-link","t":"Button link","d":"Use ButtonLink for links with the same props as Button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/button-link/default/preview.1751970096649.png","pc":"shugar"},{"id":"21st:shugar__calendar","t":"Calendar","d":"Displays a calendar from which users can select a date or range of dates.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shugar","st":"rated","pl":"https://cdn.21st.dev/shugar/calendar/default/preview.1752572276311.png","pc":"shugar","tg":["calendar","date-picker","dropdown"],"sc":21},{"id":"21st:shugar__checkbox","t":"Checkbox","d":"A control that toggles between two options, checked or unchecked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/checkbox/default/preview.1741970965715.png","pc":"shugar","tg":["checkbox"]},{"id":"21st:shugar__checkbox-1","t":"Checkbox 1","d":"A control that toggles between two options, checked or unchecked.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/checkbox-1/default/preview.1751439290034.png","pc":"shugar"},{"id":"21st:shugar__choicebox-1","t":"Choicebox 1","d":"A larger form of Radio or Checkbox, where the user has a larger tap target and more details.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shugar","st":"indexed","u":126,"pl":"https://cdn.21st.dev/shugar/choicebox-1/default/preview.1752223613861.png","pc":"shugar","tg":["checkbox","pricing-section","radio-group","select"]},{"id":"21st:shugar__code-block","t":"Code block","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/danverr/code-block/default/preview.1747776325224.png","pc":"shugar"},{"id":"21st:shugar__code-block-1","t":"Code block 1","d":"Code Block component used across Vercel and Next.js.","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/code-block-1/default/preview.1751972048639.png","pc":"shugar"},{"id":"21st:shugar__collapse","t":"Collapse","d":"A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"shugar","st":"indexed","u":17,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/collapse/default/preview.png","pc":"shugar","tg":["accordion","faq"]},{"id":"21st:shugar__collapse-1","t":"Collapse 1","d":"A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/collapse-1/default/preview.1751641915762.png","pc":"shugar"},{"id":"21st:shugar__combobox","t":"Combobox","d":"Filters large lists to selectable options based on the matching query.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","u":55,"pl":"https://cdn.21st.dev/shugar/combobox/default/preview.1752568679204.png","pc":"shugar","tg":["empty-state","list","search","select"]},{"id":"21st:shugar__command-menu","t":"Command menu","d":"Launch a set of actions as a full-screen overlay.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"shugar","st":"rated","u":33,"pl":"https://cdn.21st.dev/shugar/command-menu/default/preview.1752154497273.png","pc":"shugar","tg":["search"],"sc":18},{"id":"21st:shugar__comp111","t":"Comp111","d":"comp1comp1comp1comp1","k":"component","s":"21st","c":"other","g":"other","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/comp111/default/preview.1747858950376.png","pc":"shugar"},{"id":"21st:shugar__context-card","t":"Context card","d":"Tooltip","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shugar","st":"indexed","u":44,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/context-card/default/preview.png","pc":"shugar","tg":["popover","tooltip"]},{"id":"21st:shugar__context-card-1","t":"Context card 1","d":"Tooltip.  ","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shugar","st":"indexed","u":23,"pl":"https://cdn.21st.dev/shugar/context-card-1/default/preview.1751439681484.png","pc":"shugar","tg":["popover","tooltip"]},{"id":"21st:shugar__context-menu","t":"Context menu","d":"Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/context-menu/default/preview.1752225155869.png","pc":"shugar"},{"id":"21st:shugar__description","t":"Description","d":"Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/description/default/preview.png","pc":"shugar","tg":["tooltip"]},{"id":"21st:shugar__description-1","t":"Description 1","d":"Displays a brief heading and subheading to communicate any additional information or context a user needs to continue.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/description-1/default/preview.1751892475386.png","pc":"shugar"},{"id":"21st:shugar__dont-approve-plzzzz","t":"Dont approve plzzzz","d":"dont approve plzzzzdont approve plzzzzdont approve plzzzz","k":"component","s":"21st","c":"other","g":"other","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/dont-approve-plzzzz/default/preview.1747921808390.png","pc":"shugar"},{"id":"21st:shugar__drawer","t":"Drawer","d":"Display content in a separate view from the existing context.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"shugar","st":"indexed","u":52,"pl":"https://cdn.21st.dev/shugar/drawer/default/preview.1751387529749.png","pc":"shugar","tg":["modal"]},{"id":"21st:shugar__empty-state","t":"Empty state","d":"Fill spaces when no content has been added yet, or is temporarily empty due to the nature of the feature and should be designed to prevent confusion.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/empty-state/default/preview.1751641038127.png","pc":"shugar"},{"id":"21st:shugar__error","t":"Error","d":"Good error design is clear, useful, and friendly. Designing concise and accurate error messages unblocks users and builds trust by meeting people where they are.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/error/default/preview.1750079177459.png","pc":"shugar","tg":["alert","link"]},{"id":"21st:shugar__feedback","t":"Feedback","d":"Gather text feedback with an associated emotion.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/feedback/default/preview.1752233278910.png","pc":"shugar","tg":["textarea"]},{"id":"21st:shugar__gauge-1","t":"Gauge 1","d":"A circular visual for conveying a percentage.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"shugar","st":"indexed","u":28,"pl":"https://cdn.21st.dev/shugar/gauge-1/default/preview.1751634980606.png","pc":"shugar","tg":["data-visualization","progress","spinner"]},{"id":"21st:shugar__grid","t":"Grid","d":"Display elements in a grid layout.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/grid/default/preview.1751972796498.png","pc":"shugar"},{"id":"21st:shugar__input","t":"Input","d":"Retrieve text input from a user.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/input/default/preview.1752232795226.png","pc":"shugar","tg":["icon","input"]},{"id":"21st:shugar__keyboard-input","t":"Keyboard input","d":"Display keyboard input that triggers an action.","k":"component","s":"21st","c":"media/icon","g":"media","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/keyboard-input/default/preview.1751388322006.png","pc":"shugar","tg":["icon"]},{"id":"21st:shugar__material","t":"Material","d":"Various surfaces with shadows.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","u":9,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/material/default/preview.png","pc":"shugar"},{"id":"21st:shugar__material-1","t":"Material 1","d":"Various surfaces with shadows.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","u":211,"pl":"https://cdn.21st.dev/shugar/material-1/default/preview.1751376488640.png","pc":"shugar"},{"id":"21st:shugar__menu","t":"Menu","d":"Dropdown menu opened via button. Supports typeahead and keyboard navigation.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/menu/default/preview.1752053346280.png","pc":"shugar"},{"id":"21st:shugar__modal","t":"Modal","d":"Display popup content that requires attention or provides additional information.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"shugar","st":"indexed","u":88,"pl":"https://cdn.21st.dev/shugar/modal/default/preview.1752056473033.png","pc":"shugar","tg":["modal"]},{"id":"21st:shugar__note","t":"Note","d":"Display text that requires attention or provides additional information.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shugar","st":"indexed","u":43,"pl":"https://cdn.21st.dev/shugar/note/default/preview.1752227531327.png","pc":"shugar","tg":["alert","icon","menu","link"]},{"id":"21st:shugar__note--cyan","t":"Cyan","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/note/cyan/preview.1752227531327.png","pc":"shugar"},{"id":"21st:shugar__pagination","t":"Pagination","d":"Navigate to the previous or next page.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/pagination/default/preview.png","pc":"shugar","tg":["pagination"]},{"id":"21st:shugar__pagination-1","t":"Pagination 1","d":"Navigate to the previous or next page.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/pagination-1/default/preview.1751389255618.png","pc":"shugar"},{"id":"21st:shugar__progress","t":"Progress","d":"Display progress relative to a limit or related to a task.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/progress/default/preview.1751618999928.png","pc":"shugar","tg":["progress"]},{"id":"21st:shugar__project-banner","t":"Project banner","d":"Used for temporary, project-wide notifications that require resolution","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/project-banner/default/preview.1752064016688.png","pc":"shugar","tg":["alert","cta","notification","tooltip"]},{"id":"21st:shugar__radio","t":"Radio","d":"Provides single user input from a selection of options.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/radio/default/preview.1751592727483.png","pc":"shugar","tg":["form","input","radio-group"]},{"id":"21st:shugar__relative-time-card","t":"Relative time card","d":"Popover to show a given date in local time","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/danverr/relative-time-card/default/preview.1747771908727.png","pc":"shugar","tg":["date-picker","popover","tooltip"]},{"id":"21st:shugar__relative-time-card-1","t":"Relative time card 1","d":"Popover to show a given date in local time.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/relative-time-card-1/default/preview.1751589557373.png","pc":"shugar","tg":["date-picker","popover","tooltip"]},{"id":"21st:shugar__relative-time-card-old","t":"Relative time card old","d":"Popover to show a given date in local time.","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/relative-time-card/default/preview.png","pc":"shugar","tg":["date-picker","popover"]},{"id":"21st:shugar__scroller","t":"Scroller","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/danverr/scroller/default/preview.1747776604121.png","pc":"shugar"},{"id":"21st:shugar__scroller-1","t":"Scroller 1","d":"Display an overflowing list of items.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"shugar","st":"indexed","u":33,"pl":"https://cdn.21st.dev/shugar/scroller-1/default/preview.1752153815553.png","pc":"shugar","tg":["carousel","scroll-area"]},{"id":"21st:shugar__scroller-old","t":"Scroller old","d":"Display an overflowing list of items.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"shugar","st":"indexed","u":11,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/scroller/default/preview.1742567325705.png","pc":"shugar"},{"id":"21st:shugar__select","t":"Select","d":"Display a dropdown list of items.\n\nA recreation of Vercel's Geist design system.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"shugar","st":"indexed","u":17,"pl":"https://cdn.21st.dev/user_shugar/select/default/preview.png","pc":"shugar","tg":["select"]},{"id":"21st:shugar__select-1","t":"Select 1","d":"Display a dropdown list of items.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"shugar","st":"indexed","u":111,"pl":"https://cdn.21st.dev/shugar/select-1/default/preview.1751589081998.png","pc":"shugar","tg":["dropdown","select"]},{"id":"21st:shugar__show-more","t":"Show more","d":"Styling component to show expanded or collapsed content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/show-more/default/preview.png","pc":"shugar"},{"id":"21st:shugar__show-more-1","t":"Show more 1","d":"Styling component to show expanded or collapsed content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/show-more-1/default/preview.1751389567859.png","pc":"shugar"},{"id":"21st:shugar__skeleton","t":"Skeleton","d":"Display a skeleton whilst another component is loading.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","u":76,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/skeleton/default/preview.png","pc":"shugar"},{"id":"21st:shugar__skeleton-1","t":"Skeleton 1","d":"Display a skeleton whilst another component is loading.","k":"component","s":"21st","c":"status/loader","g":"status","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/skeleton-1/default/preview.1751475673413.png","pc":"shugar"},{"id":"21st:shugar__slider-1","t":"Slider 1","d":"Input to select a value from a given range.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/slider-1/default/preview.1750911183295.png","pc":"shugar","tg":["slider"]},{"id":"21st:shugar__snippet","t":"Snippet","d":"Display a snippet of copyable code for the command line.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/snippet/default/preview.1742567545872.png","pc":"shugar"},{"id":"21st:shugar__snippet-1","t":"Snippet 1","d":"Display a snippet of copyable code for the command line.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/snippet-1/default/preview.1752151862320.png","pc":"shugar"},{"id":"21st:shugar__spinner","t":"Spinner","k":"component","s":"21st","c":"status/loader","g":"status","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_shugar/spinner/default/preview.png","pc":"shugar","tg":["spinner"]},{"id":"21st:shugar__spinner-1","t":"Spinner 1","d":"Indicate an action running in the background. Unlike the loading dots, this should generally be used to indicate loading feedback in response to a user action, like for buttons, pa","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"shugar","st":"indexed","u":367,"pl":"https://cdn.21st.dev/shugar/spinner-1/default/preview.1751967070690.png","pc":"shugar"},{"id":"21st:shugar__split-button","t":"Split button","d":"A button that offers a primary interaction coupled with a dropdown menu offering additional actions.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shugar","st":"indexed","u":30,"pl":"https://cdn.21st.dev/shugar/split-button/default/preview.1752149088917.png","pc":"shugar","tg":["button","dropdown","menu"]},{"id":"21st:shugar__stack","t":"Stack","d":"Display elements vertically or horizontally on the page.","k":"component","s":"21st","c":"media/card-stack","g":"media","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/stack/default/preview.1751390093601.png","pc":"shugar"},{"id":"21st:shugar__status-dot","t":"Status dot","d":"Display an indicator of deployment status.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"shugar","st":"indexed","u":18,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/status-dot/default/preview.png","pc":"shugar","tg":["badge"]},{"id":"21st:shugar__status-dot-1","t":"Status dot 1","d":"Display an indicator of deployment status.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/status-dot-1/default/preview.1751390350022.png","pc":"shugar"},{"id":"21st:shugar__switch","t":"Switch","d":"Choose between a set of options.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shugar","st":"indexed","u":158,"pl":"https://cdn.21st.dev/shugar/switch/default/preview.1752057511502.png","pc":"shugar","tg":["toggle","tooltip"]},{"id":"21st:shugar__table","t":"Table","d":"A semantic HTML table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/table/default/preview.1742567654697.png","pc":"shugar","tg":["table"]},{"id":"21st:shugar__table-1","t":"Table 1","d":"A semantic HTML table component","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/table-1/default/preview.1752156600112.png","pc":"shugar"},{"id":"21st:shugar__tabs","t":"Tabs","d":"Display tab content.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"shugar","st":"indexed","u":31,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/tabs/default/preview.png","pc":"shugar","tg":["navigation-menu","tabs","tooltip"]},{"id":"21st:shugar__tabs-1","t":"Tabs 1","d":"Display tab content.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"shugar","st":"indexed","u":34,"pl":"https://cdn.21st.dev/shugar/tabs-1/default/preview.1752063369532.png","pc":"shugar","tg":["tabs","tooltip"]},{"id":"21st:shugar__text-1","t":"Text 1","d":"Display text using well-defined typographic styles.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/text-1/default/preview.1751451567646.png","pc":"shugar"},{"id":"21st:shugar__textarea","t":"Textarea","d":"Retrieve multi-line user input.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/textarea/default/preview.1751441799389.png","pc":"shugar","tg":["form","input","textarea"]},{"id":"21st:shugar__theme-switcher","t":"Theme switcher","d":"Component that allows users to switch between light and dark themes.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"shugar","st":"indexed","u":72,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/theme-switcher/default/preview.png","pc":"shugar","tg":["button","toggle"]},{"id":"21st:shugar__theme-switcher-1","t":"Theme switcher 1","d":"Component that allows users to switch between light and dark themes.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shugar","st":"indexed","u":49,"pl":"https://cdn.21st.dev/shugar/theme-switcher-1/default/preview.1751391112880.png","pc":"shugar","tg":["toggle"]},{"id":"21st:shugar__toast","t":"Toast","d":"A succinct message that is displayed temporarily.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"shugar","st":"indexed","u":184,"pl":"https://cdn.21st.dev/shugar/toast/default/preview.1752230648566.png","pc":"shugar","tg":["alert","link","notification","toast"]},{"id":"21st:shugar__toggle","t":"Toggle","d":"Displays a boolean value.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"shugar","st":"indexed","u":44,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/toggle/default/preview.png","pc":"shugar","tg":["toggle"]},{"id":"21st:shugar__tooltip","t":"Tooltip","d":"A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shugar","st":"indexed","u":47,"pl":"https://cdn.21st.dev/user_2uAqrF8oLIpxBVD9ZqYRYLfhKZ1/tooltip/default/preview.png","pc":"shugar","tg":["popover","tooltip"]},{"id":"21st:shugar__tooltip-1","t":"Tooltip 1","d":"A set of headings, vertically stacked, that each reveal an related section of content. Commonly referred to as an accordion.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/tooltip-1/default/preview.1751892199167.png","pc":"shugar"},{"id":"21st:shugar__use-breakpoints","t":"Use breakpoints","d":"A React hook that provides responsive breakpoints","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/use-breakpoints/default/preview.1751372604943.png","pc":"shugar"},{"id":"21st:shugar__use-click-outside","t":"Use click outside","d":"React hook to handle click outside of component","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/use-click-outside/default/preview.1751374366067.png","pc":"shugar"},{"id":"21st:shugar__use-responsive","t":"Use responsive","d":"A React hook that provides responsive styles","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"shugar","st":"indexed","pl":"https://cdn.21st.dev/shugar/use-responsive/default/preview.1751370625362.png","pc":"shugar","tg":["hook"]},{"id":"21st:shun0tter__calendar","t":"Calendar","d":"An alternative to the Calendar on shadcn. Features animations when switching months. Displays multiple months side by side. Includes a date click event.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"shun0tter","st":"indexed","pl":"https://cdn.21st.dev/shun0tter/calendar/default/preview.1776403224946.png","pc":"shun0tter"},{"id":"21st:silqnetai__workflow","t":"Workflow","d":"Make moving copy and paste workflow with white background","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"silqnetai","st":"indexed","pl":"https://cdn.21st.dev/silqnetai/workflow/default/preview.1749370632206.png","pc":"silqnetai"},{"id":"21st:silvestrefrigeriopro__hero","t":"Hero","d":"Animated WebGL shader background in the Plasma style. Generated by the 21st.dev Shader Builder. 4-color palette (#101010, #F5F5F5, #B0B0B0, #3A3A3A). Features: film grain. A drop-i","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"silvestrefrigeriopro","st":"indexed","pl":"https://cdn.21st.dev/silvestrefrigeriopro/hero/default/preview.1786223749167-b6456a93-f164-4e20-9494-f8914a4dcc18.webp","pc":"silvestrefrigeriopro"},{"id":"21st:singla2125ji__interactive-ai-model-comparison-dashboard","t":"Interactive ai model comparison dashboard","d":"A sophisticated, interactive dashboard for comparing AI models:","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"singla2125ji","st":"indexed","pl":"https://cdn.21st.dev/user_2wtWsNLYNk3cyVjeLe1BsenAkfv/interactive-ai-model-comparison-dashboard/interactive-ai-model-comparison-dashboard/preview.png","pc":"singla2125ji"},{"id":"21st:sirwhod__icon-picker-3","t":"Icon picker 3","d":"A Component responsible for making all lucide react icons available for selection and returning the icon name.\n","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"sirwhod","st":"indexed","u":61,"pl":"https://cdn.21st.dev/sirwhod/icon-picker-3/default/preview.1747856712722.png","pc":"sirwhod","tg":["popover","search"]},{"id":"21st:skaehdwn1014__mesh-drift-shader","t":"Mesh drift shader","d":"Animated WebGL shader background in the Mesh drift style. Generated by the 21st.dev Shader Builder. 4-color palette (#000000, #1F51FF, #00E5FF, #EAFDFF). A drop-in, zero-dependency","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"skaehdwn1014","st":"indexed","pl":"https://cdn.21st.dev/skaehdwn1014/mesh-drift-shader/default/preview.1787033763401-9eb92a17-6240-4858-b196-86e25f82c8a2.webp","pc":"skaehdwn1014"},{"id":"21st:skyleen77__animated-tabs","t":"Animated tabs","d":"Here is animated tabs modern ui component","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"skyleen77","st":"indexed","u":44,"pl":"https://cdn.21st.dev/larsen66/animated-tabs/default/preview.1750171116391.png","pc":"skyleen77","tg":["tabs"]},{"id":"21st:skyleen77__avatar-group","t":"Avatar group","d":"Here is Avatar Group component","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"skyleen77","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/avatar-group/default/preview.1756725646656.png","pc":"skyleen77","tg":["avatar","team","tooltip"]},{"id":"21st:skyleen77__components-backgrounds-bubble","t":"Components backgrounds bubble","d":"An interactive animated background of smoothly morphing gradient bubbles that react to the cursor, for playful hero and section backdrops.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"skyleen77","st":"indexed","u":4,"pl":"https://cdn.21st.dev/skyleen77/components-backgrounds-bubble/default/preview.1784721757057-90c78fd9-82c8-4ca1-8495-1245d75966b6.png","pc":"skyleen77","tg":["background"]},{"id":"21st:skyleen77__components-community-notification-list","t":"Components community notification list","d":"An animated notification list where stacked cards fan out and expand on hover, revealing each notification's details.","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/components-community-notification-list/default/preview.1785178552930-96e463ff-ac92-4e4f-b923-e40a2eaf5fcc.png","pc":"skyleen77","tg":["card","list","notification"]},{"id":"21st:skyleen77__cursor","t":"Cursor","d":"Here is advanced cursor component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/larsen66/cursor/default/preview.1750168468229.png","pc":"skyleen77","tg":["cursor","tooltip"]},{"id":"21st:skyleen77__icons-clock-5","t":"Icons clock 5","d":"An animated clock icon with rotating hands that plays on hover, view, or tap.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-clock-5/default/preview.1783583640269.png","pc":"skyleen77"},{"id":"21st:skyleen77__icons-log-out","t":"Icons log out","d":"Animated log out icon that slides its arrow on hover, tap, or view for auth and sign-out actions.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-log-out/default/preview.1783583306072.png","pc":"skyleen77","tg":["icon"]},{"id":"21st:skyleen77__icons-maximize","t":"Icons maximize","d":"Animated maximize (fullscreen/expand) icon that expands its four corners on hover, view, or tap.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-maximize/default/preview.1783583556401.png","pc":"skyleen77"},{"id":"21st:skyleen77__icons-menu","t":"Icons menu","d":"Animated hamburger menu icon that morphs its three lines into a close (X) shape on interaction.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-menu/default/preview.1783583721933.png","pc":"skyleen77","tg":["menu"]},{"id":"21st:skyleen77__icons-message-circle-code","t":"Icons message circle code","d":"Animated message circle code icon with a hover-triggered wiggle and shifting code brackets, for chat, comments, and code review UI.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-message-circle-code/default/preview.1783583582455.png","pc":"skyleen77"},{"id":"21st:skyleen77__icons-message-circle-heart","t":"Icons message circle heart","d":"Animated message circle heart icon that wiggles and pulses its heart on hover or view, for chat, feedback and like interactions.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-message-circle-heart/default/preview.1783583782071.png","pc":"skyleen77","tg":["icon"]},{"id":"21st:skyleen77__icons-message-circle-off","t":"Icons message circle off","d":"An animated message circle off icon that shakes and draws its slash on hover, for muted or disabled chat states.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-message-circle-off/default/preview.1783583697012.png","pc":"skyleen77","tg":["icon"]},{"id":"21st:skyleen77__icons-message-square-dashed","t":"Icons message square dashed","d":"Animated dashed-outline message square icon that plays a wobble or draw animation on hover or view.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/icons-message-square-dashed/default/preview.1783584080068.png","pc":"skyleen77","tg":["icon"]},{"id":"21st:skyleen77__message-circle-more","t":"Message circle more","d":"Animated message circle icon with dots that ripple, pulse, or jump on hover, view, or tap for chat and conversation UIs.","k":"component","s":"21st","c":"media/icon","g":"media","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/message-circle-more/default/preview.1783583466774.png","pc":"skyleen77"},{"id":"21st:skyleen77__pin-list","t":"Pin list","d":"Here is animated Pin List component","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"skyleen77","st":"rated","u":36,"pl":"https://cdn.21st.dev/larsen66/pin-list/default/preview.1750170355352.png","pc":"skyleen77","tg":["list"],"sc":21},{"id":"21st:skyleen77__primitives-animate-code-block","t":"Primitives animate code block","d":"An animated code block that types out syntax-highlighted source character by character as it comes into view.","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/skyleen77/primitives-animate-code-block/default/preview.1783588130394.png","pc":"skyleen77"},{"id":"21st:skyleen77__radix-accordion","t":"Radix accordion","d":"A vertically stacked set of interactive headings that each reveal an associated section of content.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"skyleen77","st":"indexed","u":54,"pl":"https://cdn.21st.dev/user_2vJfh2NfFGAPdS5oQXlSpccjJvB/radix-accordion/default/preview.png","pc":"skyleen77","tg":["accordion","faq"]},{"id":"21st:skyleen77__radix-dropdown-menu","t":"Radix dropdown menu","d":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"skyleen77","st":"indexed","u":79,"pl":"https://cdn.21st.dev/user_2vJfh2NfFGAPdS5oQXlSpccjJvB/radix-dropdown-menu/default/preview.png","pc":"skyleen77"},{"id":"21st:skyleen77__scroll-progress","t":"Scroll progress","d":"Here is animated scrolling progress bar","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"skyleen77","st":"indexed","u":21,"pl":"https://cdn.21st.dev/larsen66/scroll-progress/default/preview.1750170248248.png","pc":"skyleen77","tg":["border","progress","scroll-area"]},{"id":"21st:skyleen77__spring-element","t":"Spring element","d":"Here is animated Spring Element","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/larsen66/spring-element/default/preview.1750170539093.png","pc":"skyleen77","tg":["avatar"]},{"id":"21st:skyleen77__stars-scrolling-wheel","t":"Stars scrolling wheel","d":"Here is Stars Scrolling Wheel component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"skyleen77","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/stars-scrolling-wheel/default/preview.1750170841618.png","pc":"skyleen77","tg":["number"]},{"id":"21st:skyleen77__tooltip-1","t":"Tooltip 1","d":"Here is Tooltip component","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"skyleen77","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tooltip-1/default/preview.1756725461121.png","pc":"skyleen77","tg":["tooltip"]},{"id":"21st:slaviknocolaid__animated-features-cards","t":"Animated features cards","d":"Animated Features Cards with hover effect ","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"slaviknocolaid","st":"indexed","pl":"https://cdn.21st.dev/slaviknocolaid/animated-features-cards/default/preview.1761024449639.png","pc":"slaviknocolaid"},{"id":"21st:slaviknocolaid__changelog-timeline","t":"Changelog timeline","d":"Changelog Timeline component, with shader animation and sticky scrolling ","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"slaviknocolaid","st":"indexed","pl":"https://cdn.21st.dev/slaviknocolaid/changelog-timeline/default/preview.1761022619922.png","pc":"slaviknocolaid"},{"id":"21st:slaviknocolaid__interactive-changelog-with-dialog","t":"Interactive changelog with dialog","d":"Interactive Changelog With Dialog","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"slaviknocolaid","st":"indexed","pl":"https://cdn.21st.dev/slaviknocolaid/interactive-changelog-with-dialog/default/preview.1761023765889.png","pc":"slaviknocolaid","tg":["modal","timeline"]},{"id":"21st:slide-cn__gradient-radial","t":"Gradient radial","d":"A full-bleed radial gradient background that emanates from the center using theme palette tokens, ideal as a slide or hero backdrop.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"slide-cn","st":"indexed","pl":"https://cdn.21st.dev/slide-cn/gradient-radial/default/preview.1784824094636-f96fa84a-5fcc-481f-aa33-3b770a3dceca.png","pc":"slide-cn"},{"id":"21st:slide-cn__slide-image","t":"Slide image","d":"A compound image component with aspect-ratio control and an optional caption for adding media to presentation slides.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"slide-cn","st":"indexed","pl":"https://cdn.21st.dev/slide-cn/slide-image/default/preview.1784362069098-29520ed6-b4fa-4e5c-aef6-b27acab303c9.png","pc":"slide-cn","tg":["image"]},{"id":"21st:slide-cn__title-slide","t":"Title slide","d":"A centered slide layout with heading, subheading, and meta text for building presentation title screens.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"slide-cn","st":"indexed","u":2,"pl":"https://cdn.21st.dev/slide-cn/title-slide/default/preview.1784661049027-5ef2f28e-6a40-4a31-a34b-3d0ff0ad34fe.png","pc":"slide-cn"},{"id":"21st:smammar100__anti-metal-button","t":"Anti metal button","d":"A sleek, dark-themed CTA button featuring a cascading dot-wave animation and a colorful accent slab that smoothly expands on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"smammar100","st":"indexed","pl":"https://cdn.21st.dev/smammar100/anti-metal-button/default/preview.1779857028697.png","pc":"smammar100","tg":["button","cta"]},{"id":"21st:smammar100__music-player-widget","t":"Music player widget","d":"A sleek modern music player with an audio-reactive dot-grid visualizer, spinning disc, smooth cover/track crossfades, and a Web Audio API beat-sync oscillator. Zero external animat","k":"component","s":"21st","c":"media/player","g":"media","a":"smammar100","st":"indexed","pl":"https://cdn.21st.dev/smammar100/music-player-widget/default/preview.1779025299241.png","pc":"smammar100"},{"id":"21st:smammar100__perspective-highlight","t":"Perspective highlight","d":"A 3D card that tilts toward your cursor. As it rotates, highlighted text rises forward, creating a layered depth effect. Includes three color variants for highlights, full dark mod","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"smammar100","st":"indexed","u":10,"pl":"https://cdn.21st.dev/smammar100/perspective-highlight/default/preview.1779692133680.png","pc":"smammar100"},{"id":"21st:smammar100__pixel-logo-grid","t":"Pixel logo grid","d":"A \"trusted by\" showcase with character. 14 brand logos arranged in a 5-column grid with a centered headline. Each card runs a canvas-driven pixel shimmer in the brand's actual sign","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"smammar100","st":"indexed","u":20,"pl":"https://cdn.21st.dev/smammar100/pixel-logo-grid/default/preview.1779388114946.png","pc":"smammar100","tg":["grid"]},{"id":"21st:smammar100__scroll-reel-testimonials","t":"Scroll reel testimonials","d":"Testimonial carousel with a counter-rotating portrait reel and per-character rising text, the middle column scrolls one way while the outer columns slide the opposite direction.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"smammar100","st":"indexed","u":75,"pl":"https://cdn.21st.dev/smammar100/scroll-reel-testimonials/default/preview.1780849871560.png","pc":"smammar100","tg":["carousel","testimonials","text"]},{"id":"21st:smammar100__vercel-avatars","t":"Vercel avatars","d":"Generative halftone-pattern avatars for team and user lists. Click any avatar to download as SVG, or grab the full set in one tap. 12 color presets, full light and dark mode suppor","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"smammar100","st":"indexed","pl":"https://cdn.21st.dev/smammar100/vercel-avatars/default/preview.1779182361221.png","pc":"smammar100"},{"id":"21st:solaceui__auth-section-1","t":"Auth section 1","d":"A full-screen sign-up authentication section with social login buttons, an animated grain-gradient side panel, and a create-account form.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"solaceui","st":"indexed","u":4,"pl":"https://cdn.21st.dev/solaceui/auth-section-1/default/preview.1784268798672-6f7dc41b-3438-455b-bdfe-d474f2f71bb6.png","pc":"solaceui","tg":["form","sign-up"]},{"id":"21st:solaceui__auth-section-2","t":"Auth section 2","d":"A split-screen sign-up page with an animated AI-image showcase panel and a social + email registration form.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"solaceui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/solaceui/auth-section-2/default/preview.1784269288317-b0804dab-c36c-4464-8f78-1be65644d249.png","pc":"solaceui","tg":["ai-chat","gallery","sign-up"]},{"id":"21st:solaceui__auth-section-3","t":"Auth section 3","d":"A two-column sign-up authentication section with social login buttons, an editable form, consent checkboxes, and an animated testimonial with a dashboard mockup on a fluted-glass s","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"solaceui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/solaceui/auth-section-3/default/preview.1784269463132-be9980c4-e5b6-47f4-bcc8-cd5a34528dfc.png","pc":"solaceui","tg":["checkbox","dashboard","sign-up","testimonials"]},{"id":"21st:solaceui__chat-messages-2","t":"Chat messages 2","d":"Animated iMessage-style chat conversation that reveals messages one by one inside an iPhone device frame.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"solaceui","st":"indexed","pl":"https://cdn.21st.dev/solaceui/chat-messages-2/default/preview.1784311119964-3271ac91-ea1b-4e2f-a4f9-427e3508c00c.png","pc":"solaceui"},{"id":"21st:solaceui__footer-section-1","t":"Footer section 1","d":"A centered site footer with animated navigation links, a logo, and a row of social media icons.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"solaceui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/solaceui/footer-section-1/default/preview.1784473890213-494cccc9-2249-4956-be02-29517faa8ece.png","pc":"solaceui","tg":["footer","link","navigation-menu"]},{"id":"21st:solaceui__footer-section-3","t":"Footer section 3","d":"Animated footer section with a noise-textured headline banner, newsletter signup, social icons, and navigation link columns.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"solaceui","st":"indexed","u":5,"pl":"https://cdn.21st.dev/solaceui/footer-section-3/default/preview.1786699456470-637658da-3001-4af5-8b9e-7c1e55168b6b.png","pc":"solaceui","tg":["footer"]},{"id":"21st:solaceui__footer-section-4","t":"Footer section 4","d":"A responsive footer section with a branded blue card, animated social icons, multi-column navigation links, and a newsletter email signup.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"solaceui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/solaceui/footer-section-4/default/preview.1783728660801.png","pc":"solaceui","tg":["footer","link"]},{"id":"21st:solaceui__footer-section-5","t":"Footer section 5","d":"A marketing website footer with an oversized outlined brand wordmark and a blue fluted-glass shader panel containing the logo, tagline, social icons, and grouped navigation link co","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"solaceui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/solaceui/footer-section-5/default/preview.1783728731935.png","pc":"solaceui","tg":["footer","link","navigation-menu"]},{"id":"21st:solaceui__navbar-section-2","t":"Navbar section 2","d":"A dark navigation bar with an animated expanding mega-menu dropdown and a light hero section, inspired by the xAI marketing layout.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"solaceui","st":"indexed","u":19,"pl":"https://cdn.21st.dev/solaceui/navbar-section-2/default/preview.1783575304015.png","pc":"solaceui","tg":["ai-chat","cta","menu"]},{"id":"21st:solaceui__phone-mockups-1","t":"Phone mockups 1","d":"An auto-rotating iPhone mockup carousel that showcases app screenshots inside a realistic phone frame with previous, next and pause controls.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"solaceui","st":"indexed","u":74,"pl":"https://cdn.21st.dev/solaceui/phone-mockups-1/default/preview.1784362075658-c03c5c99-8dec-49d7-889f-89acd3cfa2a0.png","pc":"solaceui","tg":["carousel"]},{"id":"21st:solaceui__testimonial-section-1","t":"Testimonial section 1","d":"A responsive bento-grid testimonial section with animated quote cards showing customer names, roles, and avatars.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"solaceui","st":"indexed","u":9,"pl":"https://cdn.21st.dev/solaceui/testimonial-section-1/default/preview.1784198091939-f7d52d01-b9fd-4e88-a77c-fc6e927166c6.png","pc":"solaceui","tg":["grid","testimonials"]},{"id":"21st:solaceui__testimonial-section-2","t":"Testimonial section 2","d":"An animated testimonial section with scrolling marquee rows of customer capsules that open a full quote in a modal on click.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"solaceui","st":"indexed","u":2,"pl":"https://cdn.21st.dev/solaceui/testimonial-section-2/default/preview.1784198738187-bdcfd248-efd1-42fa-8465-07c1888590d0.png","pc":"solaceui","tg":["avatar","marquee","modal","testimonials"]},{"id":"21st:solaceui__testimonial-section-3","t":"Testimonial section 3","d":"A three-card testimonial carousel section with a highlighted center quote, keyboard navigation, and previous/next controls.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"solaceui","st":"indexed","u":7,"pl":"https://cdn.21st.dev/solaceui/testimonial-section-3/default/preview.1784378903746-56495e32-fb58-4be0-b465-97afd8f16bff.png","pc":"solaceui","tg":["carousel","testimonials"]},{"id":"21st:solaceui__testimonial-section-4","t":"Testimonial section 4","d":"A three-card testimonial carousel with a highlighted center quote card, customer photos, company logos, and keyboard-arrow navigation.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"solaceui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/solaceui/testimonial-section-4/default/preview.1784378916628-d42090ed-7109-49ab-951d-2fefd8f6b0e0.png","pc":"solaceui","tg":["carousel","testimonials"]},{"id":"21st:solez-ai__aura-farming-credits","t":"Aura farming credits","k":"component","s":"21st","c":"other","g":"other","a":"solez-ai","st":"indexed","pl":"https://cdn.21st.dev/solez-ai/aura-farming-credits/default/preview.1774434876025.png","pc":"solez-ai"},{"id":"21st:somraj2026lodhi__yy","t":"Yy","d":"hyhyhhyhyhyyh","k":"component","s":"21st","c":"other","g":"other","a":"somraj2026lodhi","st":"indexed","pl":"https://cdn.21st.dev/somraj2026lodhi/yy/default/preview.1774206305873.png","pc":"somraj2026lodhi"},{"id":"21st:sona-ui__stagger-text","t":"Stagger text","d":"Text that reveals a staggered vertical roll animation on hover, one character at a time.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"sona-ui","st":"indexed","u":6,"pl":"https://cdn.21st.dev/sona-ui/stagger-text/default/preview.1783715259867.png","pc":"sona-ui"},{"id":"21st:soralabs__custom-cursor","t":"Custom cursor","d":"A smooth custom cursor that follows the pointer with spring physics and morphs into a larger ring when hovering interactive targets.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"soralabs","st":"indexed","pl":"https://cdn.21st.dev/soralabs/custom-cursor/default/preview.1783579468658.png","pc":"soralabs","tg":["cursor"]},{"id":"21st:soralabs__dia-text-reveal","t":"Dia text reveal","d":"Animated text that reveals with a gradient sweep and chromatic wash, with optional multi-phrase cycling, powered by Motion.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"soralabs","st":"indexed","pl":"https://cdn.21st.dev/soralabs/dia-text-reveal/default/preview.1784385409115-4a4e16d7-579c-430e-9ad9-422a607516bf.png","pc":"soralabs","tg":["text"]},{"id":"21st:soralabs__dock-nav","t":"Dock nav","d":"An Apple-style dock navigation bar with animated expanding icons and labels that appear on hover.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"soralabs","st":"indexed","pl":"https://cdn.21st.dev/soralabs/dock-nav/default/preview.1783710489291.png","pc":"soralabs","tg":["dock"]},{"id":"21st:soralabs__pixelated-image-reveal","t":"Pixelated image reveal","d":"An image card that reveals a second image through a randomized pixel grid on hover, powered by Motion.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"soralabs","st":"indexed","u":6,"pl":"https://cdn.21st.dev/soralabs/pixelated-image-reveal/default/preview.1784355329741-793f4938-e5e3-4bb1-af61-cb46fe1a5cfb.png","pc":"soralabs","tg":["image"]},{"id":"21st:soralabs__section-cta","t":"Section cta","d":"A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips that animate on hover and focus.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"soralabs","st":"indexed","u":8,"pl":"https://cdn.21st.dev/soralabs/section-cta/default/preview.1783727794368.png","pc":"soralabs","tg":["chip","cta"]},{"id":"21st:soralabs__text-reveal-block","t":"Text reveal block","d":"A line-by-line text reveal that wipes each line with a colored block using GSAP SplitText and ScrollTrigger.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"soralabs","st":"indexed","u":6,"pl":"https://cdn.21st.dev/soralabs/text-reveal-block/default/preview.1784396368518-2a9161af-0c6c-4eda-b8e4-07347fbc9077.png","pc":"soralabs","tg":["scroll-area","text"]},{"id":"21st:soralabs__text-reveal-mask","t":"Text reveal mask","d":"A scroll-triggered text reveal that masks and slides words up line-by-line, word-by-word, or character-by-character, with support for inline emphasis.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"soralabs","st":"indexed","u":19,"pl":"https://cdn.21st.dev/soralabs/text-reveal-mask/default/preview.1784814967766-34cf5d99-f92d-4124-83ca-f6fbcbea4ea6.png","pc":"soralabs"},{"id":"21st:soralabs__text-roll","t":"Text roll","d":"A per-character vertical text roll animation for animating label swaps and micro-interactions between two short strings.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"soralabs","st":"indexed","pl":"https://cdn.21st.dev/soralabs/text-roll/default/preview.1785376036580-a8910812-25a3-4b6a-aacb-83ab0577d2e0.png","pc":"soralabs"},{"id":"21st:soralabs__text-underline","t":"Text underline","d":"An animated inline link with a CSS-only underline that slides through on hover.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"soralabs","st":"indexed","u":6,"pl":"https://cdn.21st.dev/soralabs/text-underline/default/preview.1784680026542-a3828d27-5386-4c7e-b1e9-cee205c18f5d.png","pc":"soralabs","tg":["link"]},{"id":"21st:sorianosantiagosam__silk-shader","t":"Silk shader","d":"Static WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). Features: cursor-reactive (repel).","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sorianosantiagosam","st":"indexed","pl":"https://cdn.21st.dev/sorianosantiagosam/silk-shader/default/preview.1786477522431-9beef5ef-70f3-4811-9d96-c2cb91c9e8ef.webp","pc":"sorianosantiagosam"},{"id":"21st:sorianosantiagosam__silk-shader-maro","t":"Silk shader maro","d":"Static WebGL shader background in the Silk style. Generated by the 21st.dev Shader Builder. 4-color palette (#1A1423, #B75D69, #EACDC2, #FFF5EB). Features: cursor-reactive (repel).","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sorianosantiagosam","st":"indexed","pl":"https://cdn.21st.dev/sorianosantiagosam/silk-shader-maro/default/preview.1786477541848-6480ce8c-4839-4b0e-87c4-71869e294c40.webp","pc":"sorianosantiagosam"},{"id":"21st:spaceboydavey__scroll-navigation-menu","t":"Scroll navigation menu","d":"Scroll to see the navbar transform into a floating hamburger menu","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"spaceboydavey","st":"indexed","u":56,"pl":"https://cdn.21st.dev/spaceboydavey/scroll-navigation-menu/default/preview.1785439165867-e38d4ede-d073-438c-a964-7848b5dde4fe.png","pc":"spaceboydavey"},{"id":"21st:spaceboydavey__scroll-navigation-menu-1","t":"Scroll navigation menu 1","d":"Watch the navigation transform as you scroll down the page","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"spaceboydavey","st":"indexed","pl":"https://cdn.21st.dev/spaceboydavey/scroll-navigation-menu-1/default/preview.1752094718013.png","pc":"spaceboydavey"},{"id":"21st:spoonyvu__glow-menu","t":"Glow menu","d":"Glow menu component","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"spoonyvu","st":"indexed","pl":"https://cdn.21st.dev/user_spoonyvu/glow-menu/default/preview.png","pc":"spoonyvu","tg":["icon","menu"]},{"id":"21st:spydiecy__ai-swarm-visualization","t":"Ai swarm visualization","d":"An interactive particle system that visualizes AI behavior with three distinct simulation modes: neural network connections, swarm intelligence, and data clustering. Features adjus","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/ai-swarm-visualization/default/preview.1785450072542-d168db31-1f41-4182-a9f0-625c7fbb65f4.png","pc":"spydiecy"},{"id":"21st:spydiecy__animated-scroll-indicator","t":"Animated scroll indicator","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/animated-scroll-indicator/default/preview.1747479038234.png","pc":"spydiecy"},{"id":"21st:spydiecy__course-progress-tracking-cards","t":"Course progress tracking cards","d":"A sleek, dark-themed project management dashboard featuring color-coded cards with progress tracking, team member display, and deadline countdown timers. Perfect for task managemen","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/course-progress-tracking-cards/default/preview.1747476037166.png","pc":"spydiecy"},{"id":"21st:spydiecy__crypto-dashboard-pro","t":"Crypto dashboard pro","d":"A sleek, real-time cryptocurrency dashboard with interactive price charts, asset tracking, and market news. Features dynamic price updates, portfolio overview, and detailed asset i","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/user_2x7qNq1R4V3iv559IOTNyUIojOy/crypto-dashboard-pro/crypto-dashboard-pro/preview.png","pc":"spydiecy"},{"id":"21st:spydiecy__cyberpunk-neon-folder","t":"Cyberpunk neon folder","d":"An interactive 3D folder component with cyberpunk aesthetics, glowing neon colors, and animated paper sheets. Features perspective transformations, shadow effects, and dynamic hove","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/cyberpunk-neon-folder/default/preview.1747480428360.png","pc":"spydiecy","tg":["grid"]},{"id":"21st:spydiecy__pixel-animation-cards","t":"Pixel animation cards","d":"Interactive cards with stunning pixel animations that react to hover and focus states. Each card features customizable pixel density, colors, and animation speed. Perfect for navig","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/pixel-animation-cards/default/preview.1747477707853.png","pc":"spydiecy"},{"id":"21st:spydiecy__pulse-button","t":"Pulse button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/user_2x7qNq1R4V3iv559IOTNyUIojOy/pulse-button/pulse-button/preview.png","pc":"spydiecy"},{"id":"21st:spydiecy__shiny-cta-button","t":"Shiny cta button","d":"A mesmerizing CSS-animated button with shimmering borders, dot patterns, and hover effects. Perfect for high-emphasis call-to-action elements like subscription offers, premium feat","k":"component","s":"21st","c":"actions/button","g":"actions","a":"spydiecy","st":"indexed","pl":"https://cdn.21st.dev/spydiecy/shiny-cta-button/default/preview.1747477063576.png","pc":"spydiecy"},{"id":"21st:spydiecy__stacked-activity-cards","t":"Stacked activity cards","d":"An animated UI component showing stacked activity cards that expand and collapse with a smooth animation. Features elegant scaling and positioning transitions when toggled, with ea","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"spydiecy","st":"indexed","u":43,"pl":"https://cdn.21st.dev/spydiecy/stacked-activity-cards/default/preview.1747480814123.png","pc":"spydiecy","tg":["date-picker"]},{"id":"21st:srisomanaath__buety-button","t":"Buety button","d":"add diffffffff","k":"component","s":"21st","c":"actions/button","g":"actions","a":"srisomanaath","st":"indexed","pl":"https://cdn.21st.dev/srisomanaath/buety-button/default/preview.1748684611263.png","pc":"srisomanaath"},{"id":"21st:sshahaider__app-store-button","t":"App store button","d":"The App Store Button follows Apple’s familiar download style, featuring a clean Apple logo, compact typography, and balanced layout. It’s ideal for product sites, landing pages, or","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sshahaider","st":"indexed","u":173,"pl":"https://cdn.21st.dev/sshahaider/app-store-button/default/preview.1759058753773.png","pc":"sshahaider","tg":["button"]},{"id":"21st:sshahaider__auth-divider","t":"Auth divider","d":"A horizontal divider with centered label text, typically used to separate social login buttons from an email form on authentication screens.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"sshahaider","st":"indexed","u":10,"pl":"https://cdn.21st.dev/sshahaider/auth-divider/default/preview.1784390665011-0213a1a0-2262-4bb2-8f9a-a748694d7223.png","pc":"sshahaider","tg":["sign-in"]},{"id":"21st:sshahaider__auth-modal","t":"Auth modal","d":"A modern authentication modal with Google and email login options.\nClean UI, smooth animations, and ready to plug into your Next.js app.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"sshahaider","st":"rated","u":58,"pl":"https://cdn.21st.dev/sshahaider/auth-modal/default/preview.1756123101951.png","pc":"sshahaider","tg":["modal","sign-in"],"sc":18},{"id":"21st:sshahaider__auth-page","t":"Auth page","d":"A modern split-screen authentication page with social login, email sign-in, and a floating animated background.\nBuilt for clarity, responsiveness, and a polished user experience ou","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"sshahaider","st":"rated","u":649,"pl":"https://cdn.21st.dev/sshahaider/auth-page/default/preview.1757158074332.png","pc":"sshahaider","tg":["form","sign-in"],"sc":18},{"id":"21st:sshahaider__avatar-uploader","t":"Avatar uploader","d":"An interactive avatar uploader with image cropping and preview that supports custom aspect ratios, size limits, and file validation. Perfect for profile pictures, user onboarding f","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"sshahaider","st":"indexed","u":138,"pl":"https://cdn.21st.dev/sshahaider/avatar-uploader/default/preview.1757506731682.png","pc":"sshahaider","tg":["image","modal","upload-download"]},{"id":"21st:sshahaider__background-patterns","t":"Background patterns","d":"A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any sect","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/background-patterns/default/preview.1747301659014.png","pc":"sshahaider"},{"id":"21st:sshahaider__banner","t":"Banner","d":"he Banner component is a flexible notification element for showing messages, alerts, or announcements. It supports multiple variants (success, warning, info, premium, etc.), differ","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"sshahaider","st":"indexed","u":175,"pl":"https://cdn.21st.dev/sshahaider/banner/default/preview.1755973959132.png","pc":"sshahaider","tg":["announcement","icon","notification"]},{"id":"21st:sshahaider__bento-pricing","t":"Bento pricing","d":"A clean and responsive pricing table with a bento-style layout, feature checklists, and call-to-action buttons. Ideal for SaaS apps, startups, and subscription websites, it makes p","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":218,"pl":"https://cdn.21st.dev/sshahaider/bento-pricing/default/preview.1759400605097.png","pc":"sshahaider","tg":["cta","grid","pricing-section","table"]},{"id":"21st:sshahaider__bg-pattern","t":"Bg pattern","d":"A versatile background pattern component for React, it supports six visual styles and eight customizable mask effects. You can easily add subtle texture or visual flair to any sect","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sshahaider","st":"indexed","u":1203,"pl":"https://cdn.21st.dev/sshahaider/bg-pattern/default/preview.1747466400576.png","pc":"sshahaider"},{"id":"21st:sshahaider__blog-section","t":"Blog section","d":"A modern blog grid with lazy-loaded images, smooth hover effects, and clean typography.\nShowcases articles with author, date, and read-time in a polished card layout.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"sshahaider","st":"indexed","u":111,"pl":"https://cdn.21st.dev/sshahaider/blog-section/default/preview.1757314480730.png","pc":"sshahaider","tg":["grid","image"]},{"id":"21st:sshahaider__circular-progress","t":"Circular progress","d":"This CircularProgress component shows a smooth, animated ring to display progress in a clean, modern style. You can choose between a full circle or a gaped version, customize color","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/circular-progress/default/preview.1753215256735.png","pc":"sshahaider"},{"id":"21st:sshahaider__comments","t":"Comments","d":"A fully functional comment system component with support for replies, user avatars, and animated UI using framer-motion. It includes individual cards for comments and replies, show","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"sshahaider","st":"rated","u":22,"pl":"https://cdn.21st.dev/sshahaider/comments/default/preview.1753198919594.png","pc":"sshahaider","sc":18},{"id":"21st:sshahaider__contact-card","t":"Contact card","d":"A modern contact card with a clean layout, combining details, icons, and a form section.\nPerfect for displaying your contact info alongside an inquiry form in one stylish block.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sshahaider","st":"indexed","u":558,"pl":"https://cdn.21st.dev/sshahaider/contact-card/default/preview.1755584847121.png","pc":"sshahaider","tg":["card","form","icon","textarea"]},{"id":"21st:sshahaider__contact-page","t":"Contact page","d":"A professional contact page with email, phone, office details, and social media links, featuring copy-to-clipboard actions and a modern UI layout. Ideal for business websites, SaaS","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sshahaider","st":"indexed","u":195,"pl":"https://cdn.21st.dev/sshahaider/contact-page/default/preview.1757519188483.png","pc":"sshahaider","tg":["grid","form","link"]},{"id":"21st:sshahaider__copy-button","t":"Copy button","d":"a Copy Button re useable Component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/copy-button/default/preview.1752832845812.png","pc":"sshahaider"},{"id":"21st:sshahaider__create-workspace-modal","t":"Create workspace modal","d":"A clean and intuitive workspace creation modal with input fields, slug preview, and action button. Ideal for SaaS apps, team collaboration tools, and project management dashboards.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":29,"pl":"https://cdn.21st.dev/sshahaider/create-workspace-modal/default/preview.1757436584043.png","pc":"sshahaider","tg":["modal"]},{"id":"21st:sshahaider__cta-1","t":"Cta 1","d":"Centered call-to-action bar with bold heading and dual action buttons.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/cta-1/default/preview.1760953627169.png","pc":"sshahaider"},{"id":"21st:sshahaider__cta-2","t":"Cta 2","d":"Minimal call-to-action section with headline, short description, and dual buttons for sales contact and getting started.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/cta-2/default/preview.1760954840847.png","pc":"sshahaider"},{"id":"21st:sshahaider__cta-3","t":"Cta 3","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","u":308,"pl":"https://cdn.21st.dev/sshahaider/cta-3/default/preview.1760955512955.png","pc":"sshahaider","tg":["button","cta"]},{"id":"21st:sshahaider__cta-4","t":"Cta 4","d":"Modern call-to-action card with rounded edges, subtle shadow, and dual buttons for contacting sales or getting started.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/cta-4/default/preview.1760956107580.png","pc":"sshahaider"},{"id":"21st:sshahaider__cta-5","t":"Cta 5","d":"Newsletter subscription section with email input, submit button, and expert avatars for added trust and engagement.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/cta-5/default/preview.1760956819257.png","pc":"sshahaider"},{"id":"21st:sshahaider__dashboard","t":"Dashboard","d":"here is Dashboard components","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dashboard/default/preview.1779987538674.png","pc":"sshahaider"},{"id":"21st:sshahaider__decor-icon","t":"Decor icon","d":"A small decorative plus-shaped icon that positions itself at the corners of a bordered container.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/decor-icon/default/preview.1784758274384-728b4ae1-4f9f-41d4-a486-7230cb705c58.png","pc":"sshahaider"},{"id":"21st:sshahaider__dialog","t":"Dialog","d":"a beautifully structured Dialog component built using Radix UI primitives with custom styling and slots for full flexibility. It offers smooth animations, a blurred backdrop, respo","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","u":451,"pl":"https://cdn.21st.dev/sshahaider/dialog/default/preview.1753272898333.png","pc":"sshahaider","tg":["faq","list","modal","scroll-area"]},{"id":"21st:sshahaider__discord-icon","t":"Discord icon","d":"A Discord logo SVG icon component that inherits the current text color for easy theming and sizing.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/discord-icon/default/preview.1784706145467-ad8d18a5-1dfb-4617-b221-55e42275d00b.png","pc":"sshahaider"},{"id":"21st:sshahaider__dotted-surface","t":"Dotted surface","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/dotted-surface/default/preview.1785469416363-efa502af-ddbb-41c0-8aaa-2b472de5a664.png","pc":"sshahaider"},{"id":"21st:sshahaider__drawer","t":"Drawer","d":"A flexible and beautifully styled Drawer component built using Vaul (Radix-based) primitives. It supports all drawer directions (top, bottom, left, right) with smooth animations, b","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":416,"pl":"https://cdn.21st.dev/sshahaider/drawer/default/preview.1753379971063.png","pc":"sshahaider","tg":["modal"]},{"id":"21st:sshahaider__efferd-dashboard-2","t":"Efferd dashboard 2","d":"Dense KPI dashboard grid with revenue charts, channel sales, invoices, billing health, and activity feed.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"sshahaider","st":"indexed","u":118,"pl":"https://cdn.21st.dev/reapollo/efferd-dashboard-2/default/preview.1780351476557.png","pc":"sshahaider","tg":["dashboard","sidebar","table"]},{"id":"21st:sshahaider__facebook-icon","t":"Facebook icon","d":"A single-path Facebook logo SVG icon that inherits color via currentColor and accepts all SVG props.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/facebook-icon/default/preview.1784706132289-4fbfcd5b-5fc6-4b9a-ace5-830e177c46db.png","pc":"sshahaider"},{"id":"21st:sshahaider__falling-pattern","t":"Falling pattern","d":"A mesmerizing falling-particles background with customizable colors, blur, and density—perfect for subtle motion effects.\nBuilt with Framer Motion for buttery-smooth infinite anima","k":"component","s":"21st","c":"other","g":"other","a":"sshahaider","st":"indexed","u":822,"pl":"https://cdn.21st.dev/sshahaider/falling-pattern/default/preview.1755170299566.png","pc":"sshahaider"},{"id":"21st:sshahaider__faq-5","t":"Faq 5","d":"Responsive FAQ section with filters, search, and accordions for quick answers.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/faq-5/default/preview.1760598542457.png","pc":"sshahaider"},{"id":"21st:sshahaider__faqs-1","t":"Faqs 1","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","u":267,"pl":"https://cdn.21st.dev/sshahaider/faqs-1/default/preview.1760596768197.png","pc":"sshahaider","tg":["accordion","faq"]},{"id":"21st:sshahaider__faqs-2","t":"Faqs 2","d":"Split-screen FAQ layout with bordered sections, interactive accordion, and a clean call-to-action footer.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/faqs-2/default/preview.1760596988077.png","pc":"sshahaider"},{"id":"21st:sshahaider__faqs-3","t":"Faqs 3","d":"Two-column FAQ section featuring bordered layout, vertical guide line, and elegant accordion interactions.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/faqs-3/default/preview.1760597388627.png","pc":"sshahaider"},{"id":"21st:sshahaider__faqs-4","t":"Faqs 4","d":"Multi-category FAQ section with sidebar filters, adaptive accordion layout, and elegant interactive transitions.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/faqs-4/default/preview.1760597871875.png","pc":"sshahaider"},{"id":"21st:sshahaider__features-1","t":"Features 1","d":"Linear feature grid with icons and descriptions, separated by vertical lines.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/features-1/default/preview.1774872019419.png","pc":"sshahaider"},{"id":"21st:sshahaider__features-3","t":"Features 3","d":"A responsive feature section with a four-column grid separated by full-width dividers, each cell showing an icon, title, and short description.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/features-3/default/preview.1784694398495-676c063f-fe94-46b9-98c6-013e9a7f27a4.png","pc":"sshahaider"},{"id":"21st:sshahaider__features-4","t":"Features 4","d":"A responsive feature section with cards that have extended crosshair borders, corner plus decorators, and icon, title and description for each feature.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/features-4/default/preview.1784698173189-8f5688c6-5e15-444f-a07e-c092e37d7060.png","pc":"sshahaider"},{"id":"21st:sshahaider__figma-icon","t":"Figma icon","d":"A Figma brand logo rendered as an inline SVG icon component that accepts all standard SVG props.","k":"component","s":"21st","c":"media/icon","g":"media","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/figma-icon/default/preview.1784706101054-d0b420bc-10f5-466c-82b4-6cbb4ba4301d.png","pc":"sshahaider"},{"id":"21st:sshahaider__floating-header","t":"Floating header","d":"a sleek, sticky navigation bar that stays visible while you scroll, ensuring quick access to essential links. With a rounded glass-like design, mobile-friendly drawer menu, and smo","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":812,"pl":"https://cdn.21st.dev/sshahaider/floating-header/default/preview.1758868802711.png","pc":"sshahaider"},{"id":"21st:sshahaider__footer","t":"Footer","d":"A clean and structured footer with social links, quick navigation groups, and legal info.\nDesigned with responsive grids and subtle styling to keep everything clear and accessible.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":57,"pl":"https://cdn.21st.dev/sshahaider/footer/default/preview.1755970127438.png","pc":"sshahaider","tg":["footer","link"]},{"id":"21st:sshahaider__footer-2","t":"Footer 2","d":"a modern website footer featuring multi-column navigation, social media icons, and App Store & Google Play buttons. Perfect for SaaS, eCommerce, or blogs, it adds credibility, easy","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":135,"pl":"https://cdn.21st.dev/sshahaider/footer-2/default/preview.1759066996075.png","pc":"sshahaider","tg":["footer","link","navigation-menu"]},{"id":"21st:sshahaider__footer-section","t":"Footer section","d":"An animated footer section for saas website","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":1254,"pl":"https://cdn.21st.dev/sshahaider/footer-section/default/preview.1747156786487.png","pc":"sshahaider","tg":["footer","link"]},{"id":"21st:sshahaider__footer-section-1","t":"Footer section 1","d":"An animated footer section for saas website","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/footer-section/default/preview.1747147323171.png","pc":"sshahaider"},{"id":"21st:sshahaider__form-1","t":"Form 1","d":"Elegant workspace creation form with labeled inputs, grouped fields, and a clean card layout for onboarding users smoothly.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/form-1/default/preview.1761934205037.png","pc":"sshahaider"},{"id":"21st:sshahaider__form-2","t":"Form 2","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sshahaider","st":"rated","pl":"https://cdn.21st.dev/sshahaider/form-2/default/preview.1761934673046.png","pc":"sshahaider","sc":17},{"id":"21st:sshahaider__form-3","t":"Form 3","d":"Comprehensive account settings form with structured fields for name, email, password, and phone number, featuring icons, grouped inputs, and save actions.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/form-3/default/preview.1761935130618.png","pc":"sshahaider"},{"id":"21st:sshahaider__google-icon","t":"Google icon","k":"component","s":"21st","c":"media/icon","g":"media","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/google-icon/default/preview.1784706059960-6354349f-cbfc-479b-abef-025a1cf2c8f9.png","pc":"sshahaider"},{"id":"21st:sshahaider__gradient-background","t":"Gradient background","d":"A smooth, looping gradient background powered by Framer Motion, with optional overlay and center-aligned content.\nPerfect for creating vibrant hero sections, landing pages, or full","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sshahaider","st":"indexed","u":278,"pl":"https://cdn.21st.dev/sshahaider/gradient-background/default/preview.1755094951715.png","pc":"sshahaider","tg":["background"]},{"id":"21st:sshahaider__gradient-balls","t":"Gradient balls","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/gradient-balls/default/preview.1755200206291.png","pc":"sshahaider"},{"id":"21st:sshahaider__gradient-dots","t":"Gradient dots","d":"A lively field of tiny, colorful dots that shimmer, shift, and cycle through the rainbow.\nPowered by Framer Motion for smooth endless animation and customizable spacing, size, and ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"sshahaider","st":"indexed","u":646,"pl":"https://cdn.21st.dev/sshahaider/gradient-dots/default/preview.1755279879732.png","pc":"sshahaider","tg":["background"]},{"id":"21st:sshahaider__grid-card","t":"Grid card","d":"A stylish React + Tailwind CSS Grid Card component featuring animated background patterns and gradient effects. Ideal for dashboards, feature cards, pricing sections, and modern UI","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sshahaider","st":"indexed","u":317,"pl":"https://cdn.21st.dev/sshahaider/grid-card/default/preview.1758377223967.png","pc":"sshahaider","tg":["features"]},{"id":"21st:sshahaider__grid-feature-cards","t":"Grid feature cards","d":"Minimal Features Section using Grid Feature Cards","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"sshahaider","st":"indexed","u":795,"pl":"https://cdn.21st.dev/sshahaider/grid-feature-cards/default/preview.1747156095291.png","pc":"sshahaider","tg":["features","grid","icon"]},{"id":"21st:sshahaider__header-1","t":"Header 1","d":"Responsive sticky header with scroll blur effect, animated mobile menu, and adaptive navigation links.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":598,"pl":"https://cdn.21st.dev/sshahaider/header-1/default/preview.1760511002070.png","pc":"sshahaider"},{"id":"21st:sshahaider__header-2","t":"Header 2","d":"Elegant responsive header with scroll-based styling, mobile drawer menu, and smooth transitions.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"sshahaider","st":"indexed","u":1441,"pl":"https://cdn.21st.dev/sshahaider/header-2/default/preview.1760511466900.png","pc":"sshahaider","tg":["navigation-menu"]},{"id":"21st:sshahaider__header-3","t":"Header 3","d":"Feature-rich responsive header with scroll blur, animated mobile drawer, and nested navigation menus.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sshahaider","st":"indexed","u":963,"pl":"https://cdn.21st.dev/sshahaider/header-3/default/preview.1760506591716.png","pc":"sshahaider","tg":["menu","navigation-menu"]},{"id":"21st:sshahaider__header-with-scroll-effect","t":"Header with scroll effect","d":"The Header component is a responsive navigation bar with sticky scroll effects, a mobile-friendly menu, and clear call-to-action buttons. Perfect for modern websites and SaaS apps ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/header-with-scroll-effect/default/preview.1758799467985.png","pc":"sshahaider"},{"id":"21st:sshahaider__header-with-search","t":"Header with search","d":"This Modern Header with Search & Mobile Menu combines a sleek navigation bar, powerful search modal, and responsive drawer menu. Perfect for SaaS, blogs, and dashboards, it boosts ","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"sshahaider","st":"indexed","u":191,"pl":"https://cdn.21st.dev/sshahaider/header-with-search/default/preview.1758859218030.png","pc":"sshahaider","tg":["search"]},{"id":"21st:sshahaider__hero-1","t":"Hero 1","d":"Centered hero with radial gradient background and announcement badge","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"sshahaider","st":"indexed","u":436,"pl":"https://cdn.21st.dev/sshahaider/hero-1/default/preview.1770851081525.png","pc":"sshahaider","tg":["announcement","cta","marquee"]},{"id":"21st:sshahaider__hero-3","t":"Hero 3","d":"Left-aligned hero with dashboard screenshot preview","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"sshahaider","st":"indexed","u":105,"pl":"https://cdn.21st.dev/sshahaider/hero-3/default/preview.1774009232270.png","pc":"sshahaider","tg":["announcement","dashboard","cta"]},{"id":"21st:sshahaider__illuminated-hero","t":"Illuminated hero","d":"A striking hero section with glowing animated text that instantly grabs attention.\nPerfect for bold headlines, product launches, or landing pages with dramatic flair.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sshahaider","st":"indexed","u":146,"pl":"https://cdn.21st.dev/sshahaider/illuminated-hero/default/preview.1757235260969.png","pc":"sshahaider"},{"id":"21st:sshahaider__image-gallery","t":"Image gallery","d":"A responsive image gallery with lazy loading and smooth in-view fade-in effects.\nAutomatically handles portrait/landscape ratios and fallback placeholders.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"sshahaider","st":"indexed","u":285,"pl":"https://cdn.21st.dev/user_2tWTE0rCrloVAVylFPYfp10xU92/image-gallery/default/preview.1786144277728.webp","pc":"sshahaider","tg":["gallery"]},{"id":"21st:sshahaider__integrations-4-2","t":"Integrations 4 2","d":"A split section with a heading and a masked grid of scattered rounded cards displaying integration logos.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sshahaider","st":"indexed","u":6,"pl":"https://cdn.21st.dev/sshahaider/integrations-4/default/preview.1783660747009.png","pc":"sshahaider","tg":["features","grid"]},{"id":"21st:sshahaider__integrations-5","t":"Integrations 5","d":"A horizontal row of overlapping circular integration logos with edge fade masks, a heading, and a call-to-action button.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"sshahaider","st":"indexed","u":4,"pl":"https://cdn.21st.dev/sshahaider/integrations-5/default/preview.1784397689277-6e1b7bd9-0758-4f6d-83d4-26930fc34b9c.png","pc":"sshahaider"},{"id":"21st:sshahaider__invite-member-modal","t":"Invite member modal","d":"This provides a clean and user-friendly modal for inviting team members via email, with role selection options for Owner or Member. Ideal for SaaS platforms and business apps manag","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":37,"pl":"https://cdn.21st.dev/sshahaider/invite-member-modal/default/preview.1758730749346.png","pc":"sshahaider","tg":["modal","radio-group","team"]},{"id":"21st:sshahaider__lazy-image","t":"Lazy image","d":"A lightweight lazy-loading image with a skeleton shimmer and smooth fade-in.\nSupports placeholders, in-view loading, and responsive aspect ratios out of the box.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"sshahaider","st":"indexed","u":427,"pl":"https://cdn.21st.dev/sshahaider/lazy-image/default/preview.1757258727373.png","pc":"sshahaider"},{"id":"21st:sshahaider__logo-cloud","t":"Logo cloud","d":"Simple logo grid displaying brand icons in a clean, bordered layout with light and dark mode support.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/logo-cloud/default/preview.1761041111833.png","pc":"sshahaider"},{"id":"21st:sshahaider__logo-cloud-2","t":"Logo cloud 2","d":"Stylish logo grid featuring top tech brands with decorative plus icons and dynamic borders for a modern visual layout.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"sshahaider","st":"indexed","u":409,"pl":"https://cdn.21st.dev/sshahaider/logo-cloud-2/default/preview.1761136047930.png","pc":"sshahaider","tg":["border","clients","grid"]},{"id":"21st:sshahaider__logo-cloud-3","t":"Logo cloud 3","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"sshahaider","st":"indexed","u":933,"pl":"https://cdn.21st.dev/sshahaider/logo-cloud-3/default/preview.1761239948685.png","pc":"sshahaider","tg":["marquee"]},{"id":"21st:sshahaider__logo-cloud-4","t":"Logo cloud 4","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"sshahaider","st":"indexed","u":350,"pl":"https://cdn.21st.dev/sshahaider/logo-cloud-4/default/preview.1761239584496.png","pc":"sshahaider","tg":["marquee"]},{"id":"21st:sshahaider__logo-cloud-5","t":"Logo cloud 5","d":"A responsive brand logo grid for showing partner, customer, or technology logos as social proof.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"sshahaider","st":"indexed","u":10,"pl":"https://cdn.21st.dev/educlopez/logo-cloud/default/preview.1783578048509.png","pc":"sshahaider","tg":["clients","grid"]},{"id":"21st:sshahaider__menu-toggle","t":"Menu toggle","d":"a sleek animated toggle button (like a hamburger menu) built with SVG. It smoothly transitions between open and closed states with a fun rotation and line morph effect—perfect for ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sshahaider","st":"indexed","u":185,"pl":"https://cdn.21st.dev/sshahaider/menu-toggle/default/preview.1753056644074.png","pc":"sshahaider","tg":["menu"]},{"id":"21st:sshahaider__menu-toggle-icon","t":"Menu toggle icon","d":"Animated menu toggle icon morphing smoothly between hamburger and close states.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sshahaider","st":"indexed","u":1371,"pl":"https://cdn.21st.dev/sshahaider/menu-toggle-icon/default/preview.1760163620073.png","pc":"sshahaider"},{"id":"21st:sshahaider__minimal-auth-page","t":"Minimal auth page","d":"A sleek authentication page with social login buttons, background effects, and responsive design. Perfect for login screens, signup flows, and onboarding experiences.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"sshahaider","st":"indexed","u":153,"pl":"https://cdn.21st.dev/sshahaider/minimal-auth-page/default/preview.1757606966860.png","pc":"sshahaider","tg":["sign-in"]},{"id":"21st:sshahaider__minimal-footer","t":"Minimal footer","d":"A clean and responsive footer with company links, resources, and social media icons. Ideal for SaaS, startups, blogs, and business websites looking for a modern UI touch.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":439,"pl":"https://cdn.21st.dev/sshahaider/minimal-footer/default/preview.1757669089361.png","pc":"sshahaider","tg":["footer","link"]},{"id":"21st:sshahaider__modal","t":"Modal","d":"This smart Modal component auto-switches between a Dialog and Drawer based on screen size using context. It gives you a seamless, unified API for building mobile-friendly popups, s","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":420,"pl":"https://cdn.21st.dev/sshahaider/modal/default/preview.1753401307326.png","pc":"sshahaider","tg":["modal"]},{"id":"21st:sshahaider__navigation-menu","t":"Navigation menu","d":"Upgrade your project with a sleek React + Tailwind CSS Navigation Menu featuring a modern desktop mega menu and a smooth mobile drawer. Perfect for SaaS dashboards, landing pages, ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"sshahaider","st":"indexed","u":723,"pl":"https://cdn.21st.dev/user_2tWTE0rCrloVAVylFPYfp10xU92/navigation-menu/default/preview.1758732635932.png","pc":"sshahaider","tg":["dropdown","grid","menu","navigation-menu"]},{"id":"21st:sshahaider__not-found-2","t":"Not found 2","d":"Minimalist 404 page featuring large masked typography and clear navigation actions.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"sshahaider","st":"indexed","u":123,"pl":"https://cdn.21st.dev/sshahaider/not-found-2/default/preview.1770406102409.png","pc":"sshahaider","tg":["button","empty-state"]},{"id":"21st:sshahaider__not-found-page-1","t":"Not found page 1","d":"Minimal 404 error page with bold typography, subtle borders, and clear navigation actions.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"sshahaider","st":"indexed","u":212,"pl":"https://cdn.21st.dev/sshahaider/not-found-page-1/default/preview.1760383368876.png","pc":"sshahaider","tg":["empty-state"]},{"id":"21st:sshahaider__pattern-text","t":"Pattern text","d":"A bold patterned text component with an animated shadow effect for standout headings.\nPerfect for hero sections, titles, or anywhere you want striking typography.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"sshahaider","st":"indexed","u":69,"pl":"https://cdn.21st.dev/sshahaider/pattern-text/default/preview.1757173737415.png","pc":"sshahaider","tg":["text"]},{"id":"21st:sshahaider__pixel-transition","t":"Pixel transition","k":"component","s":"21st","c":"other","g":"other","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/pixel-transition/default/preview.1756061161830.png","pc":"sshahaider"},{"id":"21st:sshahaider__play-store-button","t":"Play store button","d":"A sleek, customizable CTA (Call to Action) that mimics the official Google Play style. With a built-in Google Play icon, bold typography, it’s perfect for apps, SaaS platforms, or ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sshahaider","st":"indexed","u":145,"pl":"https://cdn.21st.dev/sshahaider/play-store-button/default/preview.1759058258140.png","pc":"sshahaider","tg":["button","cta"]},{"id":"21st:sshahaider__popover","t":"Popover","d":"A beautifully wrapped Radix Popover with custom slots, animations, and sections like header, body, and footer — all styled for seamless integration.\nEasily build interactive popups","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"sshahaider","st":"rated","u":157,"pl":"https://cdn.21st.dev/sshahaider/popover/default/preview.1753470878115.png","pc":"sshahaider","tg":["dropdown","menu","popover","profile"],"sc":18},{"id":"21st:sshahaider__pricing","t":"Pricing","d":"a dynamic, responsive pricing table with animated monthly/yearly toggle, tooltips for feature descriptions, and an optional highlight effect for popular plans. Each card displays p","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":431,"pl":"https://cdn.21st.dev/sshahaider/pricing/default/preview.1753313447140.png","pc":"sshahaider","tg":["cta","pricing-section","table","tooltip"]},{"id":"21st:sshahaider__pricing-1","t":"Pricing 1","d":"Side-by-side monthly and yearly pricing cards with strikethrough prices and discount badges.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":8,"pl":"https://cdn.21st.dev/sshahaider/pricing-1/default/preview.1784380445046-bc43c1df-d1a1-4993-9582-f33659cdec7f.png","pc":"sshahaider","tg":["badge","cta","pricing-section"]},{"id":"21st:sshahaider__pricing-4","t":"Pricing 4","d":"Interactive three-tier pricing section with a monthly/yearly toggle, animated price numbers, and a highlighted popular plan.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":20,"pl":"https://cdn.21st.dev/sshahaider/pricing-4/default/preview.1784465874657-7071887f-e23f-4562-97ca-2fcbe68d0f09.png","pc":"sshahaider","tg":["pricing-section","table","toggle"]},{"id":"21st:sshahaider__pricing-card","t":"Pricing card","d":"A sleek, component-based Card system with glass effects, pricing layouts, and flexible sections like header, body, and list items.\nPerfect for modern SaaS pricing tables, feature l","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sshahaider","st":"indexed","u":298,"pl":"https://cdn.21st.dev/sshahaider/pricing-card/default/preview.1754744357834.png","pc":"sshahaider","tg":["badge","card","list","pricing-section"]},{"id":"21st:sshahaider__pricing-table","t":"Pricing table","d":"A sleek, component-based Card system with glass effects, pricing layouts, and flexible sections like header, body, and list items.\nPerfect for modern SaaS pricing tables, feature l","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":121,"pl":"https://cdn.21st.dev/sshahaider/pricing-table/default/preview.1754892368774.png","pc":"sshahaider","tg":["comparison","pricing-section","table"]},{"id":"21st:sshahaider__pricing-with-chart","t":"Pricing with chart","d":"a modern pricing section with free and pro plans, featuring feature lists, call-to-action buttons, and an interactive chart for plan popularity trends. Perfect for SaaS websites, s","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":93,"pl":"https://cdn.21st.dev/sshahaider/pricing-with-chart/default/preview.1758729397050.png","pc":"sshahaider","tg":["cta","features","pricing-section","table"]},{"id":"21st:sshahaider__search-modal","t":"Search modal","d":"A powerful command palette with keyboard shortcuts, categorized results, and live search filtering. Perfect for SaaS apps, dashboards, and productivity tools to deliver a fast, int","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":180,"pl":"https://cdn.21st.dev/sshahaider/search-modal/default/preview.1758821839137.png","pc":"sshahaider","tg":["list","modal","search"]},{"id":"21st:sshahaider__sheet","t":"Sheet","d":"A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and re","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"sshahaider","st":"indexed","u":824,"pl":"https://cdn.21st.dev/sshahaider/sheet/default/preview.1758374902550.png","pc":"sshahaider","tg":["modal"]},{"id":"21st:sshahaider__shining-skeleton","t":"Shining skeleton","k":"component","s":"21st","c":"status/skeleton","g":"status","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/shining-skeleton/default/preview.1757338863533.png","pc":"sshahaider"},{"id":"21st:sshahaider__simple-header","t":"Simple header","d":"A modern React header with sticky positioning, backdrop blur effects, and seamless mobile-to-desktop navigation experience.\nFeatures collapsible hamburger menu for mobile devices a","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"sshahaider","st":"indexed","u":422,"pl":"https://cdn.21st.dev/sshahaider/simple-header/default/preview.1758710631255.png","pc":"sshahaider"},{"id":"21st:sshahaider__single-pricing-card-1","t":"Single pricing card 1","d":"A modern, responsive single-plan pricing section built for SaaS apps. Easy to customize and integrate into any project.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"sshahaider","st":"indexed","u":322,"pl":"https://cdn.21st.dev/sshahaider/single-pricing-card/default/preview.1747467081300.png","pc":"sshahaider","tg":["grid","pricing-section"]},{"id":"21st:sshahaider__smart-popover","t":"Smart popover","d":"This SmartPopover gives you a mobile-first popover/drawer combo that auto-adapts based on screen size. It wraps Radix Popover and Vaul Drawer with a shared context, so you write it","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"sshahaider","st":"rated","u":41,"pl":"https://cdn.21st.dev/sshahaider/smart-popover/default/preview.1753442006344.png","pc":"sshahaider","tg":["popover","profile"],"sc":22},{"id":"21st:sshahaider__sonner","t":"Sonner","d":"a colorfull Sonner","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/sonner/default/preview.1753005569884.png","pc":"sshahaider"},{"id":"21st:sshahaider__spinner","t":"Spinner","d":"A lightweight, customizable React spinner component with dynamic sizing and smooth staggered animation for modern UIs","k":"component","s":"21st","c":"status/loader","g":"status","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/spinner/default/preview.1753058452121.png","pc":"sshahaider"},{"id":"21st:sshahaider__spinner-1","t":"Spinner 1","d":"A lightweight, customizable React spinner component with dynamic sizing and smooth staggered animation for modern UIs","k":"component","s":"21st","c":"status/loader","g":"status","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/spinner-1/default/preview.1756105536505.png","pc":"sshahaider","tg":["spinner"]},{"id":"21st:sshahaider__sticky-footer","t":"Sticky footer","d":"A modern, animated sticky footer with multi-column navigation, social media icons, Perfect for SaaS, fintech, startups, and business websites to enhance branding and user engagemen","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"sshahaider","st":"indexed","u":229,"pl":"https://cdn.21st.dev/sshahaider/sticky-footer/default/preview.1757614559110.png","pc":"sshahaider","tg":["footer","link","navigation-menu"]},{"id":"21st:sshahaider__testimonials-1","t":"Testimonials 1","d":"A centered testimonial section with a company logo, quote, author name, role, and avatar.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":10,"pl":"https://cdn.21st.dev/sshahaider/testimonials-1/default/preview.1784442503842-5c6a6088-796e-42f5-95a0-c739d687a5ea.png","pc":"sshahaider","tg":["avatar","testimonials"]},{"id":"21st:sshahaider__testimonials-2","t":"Testimonials 2","d":"Minimalist testimonial block with a quote, author info, and decorative cross-hair mask lines framing the avatar.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":12,"pl":"https://cdn.21st.dev/sshahaider/testimonials-2/default/preview.1783657279634.png","pc":"sshahaider","tg":["avatar","testimonials"]},{"id":"21st:sshahaider__testimonials-3","t":"Testimonials 3","d":"Staggered grid of testimonial cards with quote icons, avatars, and decorative corner marks.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":10,"pl":"https://cdn.21st.dev/sshahaider/testimonials-3/default/preview.1784476053578-bb174cad-7c4c-4721-ab03-f7b499d2e598.png","pc":"sshahaider","tg":["avatar","grid","testimonials"]},{"id":"21st:sshahaider__testimonials-6","t":"Testimonials 6","d":"Testimonials section with three columns of quote cards that scroll infinitely in a vertical marquee, slowing on hover.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":10,"pl":"https://cdn.21st.dev/sshahaider/testimonials-6/default/preview.1785101770232-d52e4cab-807e-4878-9852-44062e0d870e.png","pc":"sshahaider","tg":["carousel","marquee","testimonials"]},{"id":"21st:sshahaider__testimonials-columns-1","t":"Testimonials columns 1","d":"an animated testimonials section where the testimonials are shown in columns","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":3605,"pl":"https://cdn.21st.dev/user_2tWTE0rCrloVAVylFPYfp10xU92/testimonials-columns-1/default/preview.1746775320320.png","pc":"sshahaider","tg":["marquee","testimonials"]},{"id":"21st:sshahaider__testimonials-section","t":"Testimonials section","d":"A modern testimonial grid with animations, customer photos, and quotes — perfect for SaaS, startups, and business websites to showcase client success stories and build trust.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"sshahaider","st":"indexed","u":133,"pl":"https://cdn.21st.dev/sshahaider/testimonials-section/default/preview.1757677151700.png","pc":"sshahaider","tg":["avatar","grid","testimonials"]},{"id":"21st:sshahaider__text-disperse","t":"Text disperse","d":"A playful hover effect that scatters each letter in unique directions with smooth motion.\nGreat for adding personality and interactivity to headings or standout text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"sshahaider","st":"indexed","u":51,"pl":"https://cdn.21st.dev/sshahaider/text-disperse/default/preview.1756056619707.png","pc":"sshahaider"},{"id":"21st:sshahaider__toggle-theme","t":"Toggle theme","d":"Animated Theme Switcher Component - Offer users seamless, visually engaging control over light, dark, and system themes.\n\nBuilt with next-themes and framer-motion, this component e","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"sshahaider","st":"indexed","u":278,"pl":"https://cdn.21st.dev/sshahaider/toggle-theme/default/preview.1758720684339.png","pc":"sshahaider","tg":["toggle"]},{"id":"21st:sshahaider__use-scroll","t":"Use scroll","d":"A simple React hook that returns true when the page is scrolled past a specified pixel threshold.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/use-scroll/default/preview.1760178818704.png","pc":"sshahaider"},{"id":"21st:sshahaider__wave-path","t":"Wave path","k":"component","s":"21st","c":"other","g":"other","a":"sshahaider","st":"indexed","pl":"https://cdn.21st.dev/sshahaider/wave-path/default/preview.1756105008574.png","pc":"sshahaider"},{"id":"21st:sshahaider__workspaces","t":"Workspaces","d":"a flexible, context-based solution to manage and display multiple workspaces in your app. It uses Radix Popover, supports avatars, search, and customizable rendering—perfect for Sa","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"sshahaider","st":"indexed","u":248,"pl":"https://cdn.21st.dev/sshahaider/workspaces/default/preview.1753391499748.png","pc":"sshahaider","tg":["popover","search","team"]},{"id":"21st:sshahaider__zoom-parallax","t":"Zoom parallax","d":"A smooth scroll effect where images zoom in at different speeds for a cinematic feel.\nPerfect for hero sections or storytelling layouts that need extra visual depth.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"sshahaider","st":"indexed","u":1236,"pl":"https://cdn.21st.dev/sshahaider/zoom-parallax/default/preview.1756035247466.png","pc":"sshahaider","tg":["gallery"]},{"id":"21st:ssicevs__alert-stack","t":"Alert stack","d":"Collapsed notification deck that fans open on hover — each dismiss re-settles the pile, and a quiet restore control appears once every alert is cleared. Light and dark via theme to","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/alert-stack/default/preview.1785376198259-6ba69e0b-8631-4251-bdcb-08679abfdb76.png","pc":"ssicevs","tg":["alert","notification"],"sc":23},{"id":"21st:ssicevs__amount","t":"Amount","d":"Money-formatting suite: Fiat, Crypto and Percent amount components that agree on symbol placement, precision, K/M/B/T abbreviation and sign coloring. Tabular numerals, light and da","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/amount/default/preview.1785446097239-12eb379e-378d-4b79-8670-c766b122ae52.png","pc":"ssicevs"},{"id":"21st:ssicevs__analyst-radar","t":"Analyst radar","d":"Multivariate factor radar with two series overlaid — the company against its sector — across up to eight axes indexed 0-100. Hover a spoke and the header reads both values at once;","k":"component","s":"21st","c":"other","g":"other","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/analyst-radar/default/preview.1785453614578-428cfb51-479a-4d3f-8715-f916d51c3267.png","pc":"ssicevs"},{"id":"21st:ssicevs__candle-chart","t":"Candle chart","d":"Trading terminal price panel: OHLC candles with a volume strip, a crosshair that reads the exact bar into the header, and a gliding-thumb timeframe switch. Light and dark via shadc","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/candle-chart/default/preview.1786799129057-2dfd925e-ac6c-4736-96ea-91d0cd5b0f86.png","pc":"ssicevs","sc":21},{"id":"21st:ssicevs__crypto-fiat","t":"Crypto fiat","d":"Dual-denomination amount field: type in dollars or units, and the toggle flips which one you are editing while the counter-value rides underneath. The headline steps down through f","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/crypto-fiat/default/preview.1785453803533-6afbe43c-1ff5-4115-b5b5-1656078a14dc.png","pc":"ssicevs"},{"id":"21st:ssicevs__macos-dock","t":"Macos dock","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/macos-dock/default/preview.1785457445258-01c6a310-5f80-4a0b-a9c6-da8ffc53accd.png","pc":"ssicevs"},{"id":"21st:ssicevs__market-snapshot","t":"Market snapshot","d":"Stock snapshot card: animated price line with pointer scrubbing, a 1D-to-All period switch, and the hovered price reading into the header with its delta. Light and dark via theme t","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/market-snapshot/default/preview.1785373224226-c52e6327-4799-426e-b730-8137b02560b0.png","pc":"ssicevs","sc":22},{"id":"21st:ssicevs__market-watchlist","t":"Market watchlist","d":"Sortable market watchlist: per-row sparkline trend, sort by symbol or change with direction toggle, and row selection marked by an accent rail. Light and dark via theme tokens.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/market-watchlist/default/preview.1785373558052-497985ac-b94a-4f8f-875a-e1ebd87e8236.png","pc":"ssicevs","tg":["table"],"sc":21},{"id":"21st:ssicevs__news-card","t":"News card","d":"Auto-cycling market news card: timestamp, bold headline, source, and dot pagination. Dot clicks jump and reset the clock; auto-cycle pauses for reduced-motion users. Light and dark","k":"component","s":"21st","c":"media/carousel","g":"media","a":"ssicevs","st":"indexed","u":2,"pl":"https://cdn.21st.dev/ssicevs/news-card/default/preview.1785373099020-3b138892-2365-4ef6-a0ac-084d5587d995.png","pc":"ssicevs","tg":["carousel"]},{"id":"21st:ssicevs__price-target-fan","t":"Price target fan","d":"Analyst price target chart: history walks to now, then three dashed projections fan out to High, Mean and Low targets. Scrub the history or hover a target and a KPI-style card read","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/price-target-fan/default/preview.1785373490302-4d6cd27e-e758-4fa7-9b35-10d9f3ac62a3.png","pc":"ssicevs","sc":22},{"id":"21st:ssicevs__range-navigator","t":"Range navigator","d":"Focus + context price history: a detail chart sits over a compressed mini-map of the whole series. Drag the brush window to pan, pull an edge to zoom, and hover the plot for a dash","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/range-navigator/default/preview.1785623851724-a51364bc-b446-4382-8a41-aed3ee69e152.png","pc":"ssicevs","sc":22},{"id":"21st:ssicevs__returns-calendar","t":"Returns calendar","d":"Monthly returns heat grid: years by months, diverging green/red cells scaled by magnitude, plus a compounded year-total column. Hovering a cell reads the month and its return into ","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/returns-calendar/default/preview.1785458954492-d50f46f9-2962-46df-99f8-80618403ec7b.png","pc":"ssicevs","tg":["calendar"],"sc":19},{"id":"21st:ssicevs__rocks","t":"Rocks","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/rocks/default/preview.1786540850992-86bbb673-4ea8-4fa6-b302-b8955d5de903.webp","pc":"ssicevs"},{"id":"21st:ssicevs__sectors-donut","t":"Sectors donut","d":"Allocation donut ring with a centered symbol and legend cross-highlight — hovering a legend row or arc dims the rest so one weight reads at a time. Light and dark via shadcn theme ","k":"component","s":"21st","c":"other","g":"other","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/sectors-donut/default/preview.1785373035102-15addf45-7790-499e-a6bd-645034707807.png","pc":"ssicevs"},{"id":"21st:ssicevs__segmented-control","t":"Segmented control","k":"component","s":"21st","c":"actions/segmented-control","g":"actions","a":"ssicevs","st":"indexed","pl":"https://cdn.21st.dev/ssicevs/segmented-control/default/preview.1785458358404-174b5a87-0605-40d0-a1ba-a84db63b6500.png","pc":"ssicevs"},{"id":"21st:ssicevs__sma-chart","t":"Sma chart","d":"Moving-average chart: one price line with 60- and 200-period SMA overlays, right-edge price ticks, and a summary row underneath with a signed change chip. Light and dark via theme ","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"ssicevs","st":"rated","pl":"https://cdn.21st.dev/ssicevs/sma-chart/default/preview.1785373427807-809b724f-2d1e-4119-af2c-48f7b9e2d2b5.png","pc":"ssicevs","sc":19},{"id":"21st:ssshooter__mind-elixir-react","t":"Mind elixir react","d":"A react mind map component","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ssshooter","st":"rated","pl":"https://cdn.21st.dev/ssshooter/mind-elixir-react/default/preview.1753342436899.png","pc":"ssshooter","sc":18},{"id":"21st:ssshooter__mind-map","t":"Mind map","d":"Beautiful mind map components based on Mind Elixir. One command to install, zero config to start. Styled with Tailwind, works seamlessly with shadcn/ui.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"ssshooter","st":"indexed","pl":"https://cdn.21st.dev/ssshooter/mind-map/default/preview.1769588157076.png","pc":"ssshooter"},{"id":"21st:stackingsu__cards-shader-effect","t":"Cards shader effect","d":"Interactive 3D credit card with animated WebGL shader faces that tilts with the cursor, flips on hover, and swaps its gradient design on click.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"stackingsu","st":"indexed","pl":"https://cdn.21st.dev/stackingsu/cards-shader-effect/default/preview.1784404033176-f29ab519-35cf-4647-a89e-19f77dcc468d.png","pc":"stackingsu"},{"id":"21st:stackingsu__family-signin-drawer","t":"Family signin drawer","d":"A bottom sign-in drawer with animated email and passkey tabs and a spring-height transition to a passkey authentication step.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"stackingsu","st":"indexed","u":4,"pl":"https://cdn.21st.dev/stackingsu/family-signin-drawer/default/preview.1784271640743-c92a3ced-bf62-4788-997b-a263dbb666a8.png","pc":"stackingsu","tg":["sign-in","tabs"]},{"id":"21st:stackingsu__text-shimmer-animation-on-hover","t":"Text shimmer animation on hover","d":"An animated text effect that sweeps a multi-color gradient shimmer across the characters for emphasis or highlights.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"stackingsu","st":"indexed","pl":"https://cdn.21st.dev/stackingsu/text-shimmer-animation-on-hover/default/preview.1783715704217.png","pc":"stackingsu","tg":["pricing-section"]},{"id":"21st:stniii317__test","t":"Test","d":"testtesttest","k":"component","s":"21st","c":"other","g":"other","a":"stniii317","st":"indexed","pl":"https://cdn.21st.dev/stniii317/test/default/preview.1761199659673.png","pc":"stniii317"},{"id":"21st:strlrd-29__use-boolean","t":"Use boolean","d":"Manage a boolean state with the useBoolean hook, providing methods to set it to true, false, or toggle between them.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-boolean.png","pc":"strlrd-29"},{"id":"21st:strlrd-29__use-copy-to-clipboard","t":"Use copy to clipboard","d":"Copy text to the clipboard easily with useCopyToClipboard, while keeping track of the most recently copied value.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-copy-to-clipboard.png","pc":"strlrd-29","tg":["hook","toast"]},{"id":"21st:strlrd-29__use-counter","t":"Use counter","d":"Manage a numeric state with useCounter, offering functions to increment, decrement, reset, and set a custom value.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-counter.png","pc":"strlrd-29"},{"id":"21st:strlrd-29__use-debounce-callback","t":"Use debounce callback","d":"Delay function execution with useDebounceCallback, providing options for canceling, flushing, and checking if a call is pending.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-debounce-callback.png","pc":"strlrd-29","tg":["hook","slider"]},{"id":"21st:strlrd-29__use-interval","t":"Use interval","d":"Execute a callback function at specified intervals with useInterval, supporting dynamic delays and cleanup on unmount.","k":"component","s":"21st","c":"other","g":"other","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-interval.png","pc":"strlrd-29"},{"id":"21st:strlrd-29__use-isomorphic-layout-effect","t":"Use isomorphic layout effect","d":"Custom hook that uses either useLayoutEffect or useEffect based on the environment (client-side or server-side).","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-isomorphic-layout-effect.png","pc":"strlrd-29"},{"id":"21st:strlrd-29__use-timeout","t":"Use timeout","d":"Run a callback function after a specified delay with useTimeout, supporting dynamic updates and cleanup on unmount.","k":"component","s":"21st","c":"inputs/time-picker","g":"inputs","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-timeout.png","pc":"strlrd-29"},{"id":"21st:strlrd-29__use-toggle","t":"Use toggle","d":"Easily manage a boolean state with useToggle.","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-toggle.png","pc":"strlrd-29","tg":["hook"]},{"id":"21st:strlrd-29__use-unmount","t":"Use unmount","d":"Run a function when a component unmounts, ensuring cleanups or final actions are handled effectively.","k":"component","s":"21st","c":"other","g":"other","a":"strlrd-29","st":"indexed","pl":"https://cdn.21st.dev/user_strlrd-29/use-unmount.png","pc":"strlrd-29"},{"id":"21st:stvenchg__animated-vercel-like-button","t":"Animated vercel like button","d":"A clean, Vercel-inspired button component that shows an animated spinner when loading. Includes smooth state transitions and icon support.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"stvenchg","st":"indexed","pl":"https://cdn.21st.dev/stvenchg/animated-vercel-like-button/default/preview.1756687264048.png","pc":"stvenchg"},{"id":"21st:stvenchg__unsaved-changes","t":"Unsaved changes","d":"A floating action bar component that notifies users of unsaved changes and provides save/reset actions.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"stvenchg","st":"rated","u":28,"pl":"https://cdn.21st.dev/stvenchg/unsaved-changes/default/preview.1764954980887.png","pc":"stvenchg","tg":["alert","notification"],"sc":23},{"id":"21st:su2491251__input-field","t":"Input field","d":"smooth input ","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"su2491251","st":"indexed","pl":"https://cdn.21st.dev/su2491251/input-field/default/preview.1782564496753.png","pc":"su2491251"},{"id":"21st:subhadeeproy3902__cta-1","t":"Cta 1","d":"CTA sections are designed to encourage users to take action, whether it's signing up for a newsletter, downloading a resource, or making a purchase. They help drive conversions and","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"subhadeeproy3902","st":"indexed","pl":"https://cdn.21st.dev/subhadeeproy3902/cta-1/default/preview.1748293187401.png","pc":"subhadeeproy3902"},{"id":"21st:sumedhalakmal95__hero","t":"Hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sumedhalakmal95","st":"indexed","pl":"https://cdn.21st.dev/sumedhalakmal95/hero/default/preview.1782229546794.png","pc":"sumedhalakmal95"},{"id":"21st:sumonadotwork__blog-cards","t":"Blog cards","d":"Minimal, text-focused preview of a journal or blog entry.\nIt typically includes a title, publication date, and short description, styled with subtle hover animations and a dashed s","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"sumonadotwork","st":"indexed","u":51,"pl":"https://cdn.21st.dev/sumonadotwork/blog-cards/default/preview.1761244301550.png","pc":"sumonadotwork"},{"id":"21st:sumonadotwork__focus-hover-button","t":"Focus hover button","d":"inspired from https://www.weareinertia.com/","k":"component","s":"21st","c":"actions/button","g":"actions","a":"sumonadotwork","st":"indexed","pl":"https://cdn.21st.dev/sumonadotwork/focus-hover-button/default/preview.1751682932216.png","pc":"sumonadotwork"},{"id":"21st:sumonadotwork__parallax-scroll-feature-section","t":"Parallax scroll feature section","d":"PARALLAX SCROLL FEATURE SECTION using framer motion","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"sumonadotwork","st":"indexed","u":116,"pl":"https://cdn.21st.dev/sumonadotwork/parallax-scroll-feature-section/default/preview.1751685953251.png","pc":"sumonadotwork","tg":["features","image"]},{"id":"21st:sumtaimo__test","t":"Test","d":"Im just learning","k":"component","s":"21st","c":"other","g":"other","a":"sumtaimo","st":"indexed","pl":"https://cdn.21st.dev/sumtaimo/test/default/preview.1776070012626.png","pc":"sumtaimo"},{"id":"21st:sunrlsefl__wedding-dj","t":"Wedding dj","d":"Hero for wedding/dj business","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"sunrlsefl","st":"indexed","pl":"https://cdn.21st.dev/sunrlsefl/wedding-dj/default/preview.1767974035988.png","pc":"sunrlsefl"},{"id":"21st:suraj-xd__claude-style-ai-input","t":"Claude style ai input","d":"Claude style dynamic chat input that adapts its preview based on content type - showing code snippets for programming files, content previews for documents, and traditional preview","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"suraj-xd","st":"rated","pl":"https://cdn.21st.dev/suraj-xd/claude-style-ai-input/default/preview.1748942175971.png","pc":"suraj-xd","tg":["ai-chat","input","upload-download"],"sc":19},{"id":"21st:suraj-xd__google-drive-uploader-toast","t":"Google drive uploader toast","d":"Displays a minimalistic toast in the corner of the UI that shows real-time upload progress for multiple files. Features include file type detection, expandable/collapsible list, pr","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"suraj-xd","st":"rated","u":27,"pl":"https://cdn.21st.dev/suraj-xd/google-drive-uploader-toast/default/preview.1748798259397.png","pc":"suraj-xd","tg":["progress","toast","upload-download"],"sc":20},{"id":"21st:suraj-xd__grok-agent-thinking-indicator","t":"Grok agent thinking indicator","d":"Animated pixel orb badges for AI agent status. Includes single-agent and multi-agent variants with four built-in palettes, theme-aware shell, and canvas-based animation. Inspired b","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"suraj-xd","st":"rated","pl":"https://cdn.21st.dev/suraj-xd/grok-agent-thinking-indicator/default/preview.1777278018684.png","pc":"suraj-xd","sc":21},{"id":"21st:suraj-xd__liquid-glass","t":"Liquid glass","d":"A liquid glass effect with a dynamic background feat. MacOS Dock Icons.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"suraj-xd","st":"indexed","u":1030,"pl":"https://cdn.21st.dev/suraj-xd/liquid-glass/default/preview.1750159373393.png","pc":"suraj-xd","tg":["background","dock"]},{"id":"21st:suraj-xd__liquid-glass-recorder","t":"Liquid glass recorder","d":"Modern liquid glass ui inspired Recorder UI","k":"component","s":"21st","c":"motion/background","g":"motion","a":"suraj-xd","st":"rated","pl":"https://cdn.21st.dev/suraj-xd/liquid-glass-recorder/default/preview.1754308309835.png","pc":"suraj-xd","sc":22},{"id":"21st:suraj-xd__quick-tooltip-actions","t":"Quick tooltip actions","d":"Quick tooltip actions for the user. Hover on the user icon to see the tooltip.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"suraj-xd","st":"indexed","u":64,"pl":"https://cdn.21st.dev/suraj-xd/quick-tooltip-actions/default/preview.1748972490038.png","pc":"suraj-xd","tg":["tooltip"]},{"id":"21st:suraj-xd__slide-to-unlock","t":"Slide to unlock","k":"component","s":"21st","c":"other","g":"other","a":"suraj-xd","st":"indexed","pl":"https://cdn.21st.dev/suraj-xd/slide-to-unlock/default/preview.1760685225903.png","pc":"suraj-xd"},{"id":"21st:sydney2singapore__rotating-prompts","t":"Rotating prompts","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"sydney2singapore","st":"indexed","pl":"https://cdn.21st.dev/sydney2singapore/rotating-prompts/default/preview.1751637881331.png","pc":"sydney2singapore"},{"id":"21st:tahermaxse__animated-footer","t":"Animated footer","d":"A sleek, animated footer component inspired by Cluely.com. It replicates the smooth interactions and modern layout of the original design perfect for landing pages, portfolios, or ","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"tahermaxse","st":"indexed","u":227,"pl":"https://cdn.21st.dev/tahermaxse/animated-footer/default/preview.1749099295224.png","pc":"tahermaxse","tg":["footer"]},{"id":"21st:tahermaxse__scroll-legend","t":"Scroll legend","d":"A sleek, interactive scroll legend component inspired by the elegant UI of Raycast. Built with accessibility and performance in mind, this component enhances user experience by pro","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"tahermaxse","st":"indexed","u":9,"pl":"https://cdn.21st.dev/tahermaxse/scroll-legend/default/preview.1751026311250.png","pc":"tahermaxse","tg":["sidebar"]},{"id":"21st:tailwind-admin__dot-loader-motion","t":"Dot loader motion","d":"A row of three dots that bounce in sequence to indicate a loading state, animated with Motion.","k":"component","s":"21st","c":"status/loader","g":"status","a":"tailwind-admin","st":"indexed","pl":"https://cdn.21st.dev/tailwind-admin/dot-loader-motion/default/preview.1784365031980-d81930f0-2d05-47a8-9ce0-e410c2e1a6dd.png","pc":"tailwind-admin","tg":["spinner"]},{"id":"21st:takshprajapati__whatsappbutton","t":"Whatsappbutton","d":"Floating action button that opens a WhatsApp chat with a pre-filled message. Perfect for booking inquiries and customer support.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"takshprajapati","st":"indexed","pl":"https://21st.dev/@takshprajapati/components/whatsappbutton","pc":"takshprajapati"},{"id":"21st:talen-520__sine-wave-dots","t":"Sine wave dots","d":"Sine Wave Dots animation","k":"component","s":"21st","c":"motion/background","g":"motion","a":"talen-520","st":"indexed","pl":"https://cdn.21st.dev/talen-520/sine-wave-dots/default/preview.1785303104034-92a1e990-dc9e-4e0c-b8a4-16e50971fbc3.png","pc":"talen-520"},{"id":"21st:tamir_51854824__testimonials-conversation","t":"Testimonials conversation","d":"This component features a fluid, auto-playing slider (powered by Framer Motion) that showcases customer success stories through a clean, modern aesthetic.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"tamir_51854824","st":"indexed","pl":"https://cdn.21st.dev/tamir_51854824/testimonials-conversation/default/preview.1766612792656.png","pc":"tamir_51854824"},{"id":"21st:tanu360__cta-button","t":"Cta button","d":"CTA button inspired from shiny button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"tanu360","st":"indexed","pl":"https://cdn.21st.dev/tanu360/cta-button/default/preview.1770691698062.png","pc":"tanu360"},{"id":"21st:tanusahu9894__minimal","t":"Minimal","d":"Animated (pulse) ASCII art in the Hex Dump style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"tanusahu9894","st":"indexed","pl":"https://cdn.21st.dev/tanusahu9894/minimal/default/preview.1784299877112-db2cf451-94f5-41c8-afe2-1498701ca86c.webp","pc":"tanusahu9894","tg":["video"]},{"id":"21st:tanusahu9894__minimal-2","t":"Minimal 2","d":"Animated (shimmer) ASCII art in the Hex Dump style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ","k":"component","s":"21st","c":"media/player","g":"media","a":"tanusahu9894","st":"indexed","u":6,"pl":"https://cdn.21st.dev/tanusahu9894/minimal/default/preview.1784301678590-6bf719d8-7a22-48ae-9fe9-449d9cd2f5af.webp","pc":"tanusahu9894","tg":["video"]},{"id":"21st:taute.skritulskas__lovable-studio-copy","t":"Lovable studio copy","d":"A TSX-based copy of Lovable Studio. Front-end only; not fully functional.","k":"component","s":"21st","c":"actions/copy-button","g":"actions","a":"taute.skritulskas","st":"indexed","pl":"https://cdn.21st.dev/taute.skritulskas/lovable-studio-copy/default/preview.1773166599060.png","pc":"taute.skritulskas"},{"id":"21st:tempforall9__liquid-mosaic","t":"Liquid mosaic","d":"Animated (flicker) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic look. A drop-in, zero-dependency React comp","k":"component","s":"21st","c":"media/player","g":"media","a":"tempforall9","st":"indexed","pl":"https://cdn.21st.dev/tempforall9/liquid-mosaic/default/preview.1784359270240-f0c2c5f3-a35e-4a95-ab84-0d321a152de6.webp","pc":"tempforall9","tg":["video"]},{"id":"21st:tempforall9__thread-light","t":"Thread light","d":"Animated (shimmer) ASCII art in the Hatching style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic, pixel look. A drop-in, zero-dependency R","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tempforall9","st":"indexed","pl":"https://cdn.21st.dev/tempforall9/thread-light/default/preview.1784362870142-533e9539-be6d-4046-a94b-a1a0a346352e.webp","pc":"tempforall9"},{"id":"21st:tempforall9__thread-paint","t":"Thread paint","d":"Animated (shimmer) ASCII art in the Hatching style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a retro look. A drop-in, zero-dependency React com","k":"component","s":"21st","c":"media/player","g":"media","a":"tempforall9","st":"indexed","u":6,"pl":"https://cdn.21st.dev/tempforall9/thread-paint/default/preview.1784361070761-c02e8402-cee6-4238-ae87-f12e218ae346.webp","pc":"tempforall9","tg":["video"]},{"id":"21st:temuulen21mvp__bennet","t":"Bennet","d":"Animated (ripple) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"temuulen21mvp","st":"indexed","pl":"https://cdn.21st.dev/temuulen21mvp/bennet/default/preview.1785599430144-cd0f37fb-e94f-4122-812c-c54aa1bc1c93.webp","pc":"temuulen21mvp"},{"id":"21st:temuulen21mvp__kobe","t":"Kobe","d":"Animated (shimmer) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"temuulen21mvp","st":"indexed","pl":"https://cdn.21st.dev/temuulen21mvp/kobe/default/preview.1785597630737-e36f933d-c8d9-4336-ab88-66a740373534.webp","pc":"temuulen21mvp"},{"id":"21st:temuulen21mvp__kobe-are-you-ready-to-build-yourself","t":"Kobe are you ready to build yourself","d":"Animated (wave) ASCII art in the Hatching style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"temuulen21mvp","st":"indexed","pl":"https://cdn.21st.dev/temuulen21mvp/kobe-are-you-ready-to-build-yourself/default/preview.1785597639703-4e4ad883-c5c6-4454-82d0-f24341738cef.webp","pc":"temuulen21mvp"},{"id":"21st:temuulen21mvp__stairs-to-yourself","t":"Stairs to yourself","d":"Animated (wave) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"temuulen21mvp","st":"indexed","pl":"https://cdn.21st.dev/temuulen21mvp/stairs-to-yourself/default/preview.1785597648746-458e3798-a82b-4845-8cd4-931da33ef119.webp","pc":"temuulen21mvp"},{"id":"21st:th__cercl-oo","t":"Cercl oo","d":"test de landing SAAS","k":"component","s":"21st","c":"other","g":"other","a":"th","st":"indexed","pl":"https://cdn.21st.dev/th/cercl-oo/default/preview.1759056074188.png","pc":"th"},{"id":"21st:thanhnamgl1609__button","t":"Button","d":"Test Button ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"thanhnamgl1609","st":"indexed","pl":"https://cdn.21st.dev/thanhnamgl1609/button/default/preview.1748591686333.png","pc":"thanhnamgl1609"},{"id":"21st:thefathdev__win-98-button","t":"Win 98 button","d":"A nostalgic button from Windows 98 era","k":"component","s":"21st","c":"actions/button","g":"actions","a":"thefathdev","st":"indexed","pl":"https://cdn.21st.dev/user_2reOkP96pVFTfgN1p9oqOsG1bDo/win-98-button/default/preview.1737995082428.png","pc":"thefathdev"},{"id":"21st:thegridcn__beam-marker","t":"Beam marker","d":"A vertical light-beam marker with a bracketed label, optional sublabel and coordinates for annotating maps, diagrams or dashboards.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/beam-marker/default/preview.1784827569572-59b17581-e812-4fc8-bc73-96467db03163.png","pc":"thegridcn"},{"id":"21st:thegridcn__breadcrumb-nav","t":"Breadcrumb nav","d":"A compact breadcrumb navigation trail with chevron, slash, or dot separators and an active-page indicator.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/breadcrumb-nav/default/preview.1784457860537-bb29360a-3928-417c-874f-5e9d0f0f7215.png","pc":"thegridcn"},{"id":"21st:thegridcn__circuit-background","t":"Circuit background","d":"An animated SVG circuit-board pattern background wrapper that renders decorative flowing lines and nodes behind its content.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"thegridcn","st":"indexed","u":9,"pl":"https://cdn.21st.dev/thegridcn/circuit-background/default/preview.1783582049633.png","pc":"thegridcn","tg":["grid"]},{"id":"21st:thegridcn__crt-effect","t":"Crt effect","d":"A wrapper that overlays retro CRT monitor scanlines, vignette, flicker, and an animated scan-sweep line onto any content.","k":"component","s":"21st","c":"other","g":"other","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/crt-effect/default/preview.1784707438026-7921df52-6440-4fd5-96c3-2fa4ddfbd841.png","pc":"thegridcn"},{"id":"21st:thegridcn__cta-banner","t":"Cta banner","d":"A Tron-styled call-to-action banner with animated glow, scanline overlay, corner decorations, and primary/secondary action buttons.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"thegridcn","st":"indexed","u":28,"pl":"https://cdn.21st.dev/thegridcn/cta-banner/default/preview.1783727660701.png","pc":"thegridcn","tg":["cta"]},{"id":"21st:thegridcn__data-stream","t":"Data stream","d":"An animated terminal-style log feed that reveals timestamped entries one by one with type-colored status dots for streaming data or activity monitors.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/data-stream/default/preview.1783581577520.png","pc":"thegridcn"},{"id":"21st:thegridcn__energy-meter","t":"Energy meter","d":"A segmented energy/power level meter with animated staggered fill, an animated percentage counter, and color-coded critical/warning states in a Tron-style HUD panel.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/energy-meter/default/preview.1786711736436-093807e9-01e0-404c-b2b6-04566833709b.png","pc":"thegridcn"},{"id":"21st:thegridcn__grid-floor","t":"Grid floor","d":"An animated perspective grid floor background with a depth gradient overlay, ideal for Tron-inspired hero sections and landing pages.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/grid-floor/default/preview.1784826538699-13de809a-4b65-409c-9704-cbbcff9ba9b8.png","pc":"thegridcn"},{"id":"21st:thegridcn__grid-scan-overlay","t":"Grid scan overlay","d":"An animated grid and scan-line overlay that layers a subtle tron-style moving scanline and grid pattern over any container background.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/grid-scan-overlay/default/preview.1784826508760-e4869d68-fd59-495c-bb91-09dd2795be6b.png","pc":"thegridcn"},{"id":"21st:thegridcn__progress-ring","t":"Progress ring","d":"A circular progress indicator with an animated arc, rotating tick marks, a glowing pulse, and a counting percentage value, with size and status color variants.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/progress-ring/default/preview.1784738944543-0ca0b8fe-2e5b-4de6-b733-b6ecffa8aea6.png","pc":"thegridcn"},{"id":"21st:thegridcn__testimonial-card","t":"Testimonial card","d":"A sci-fi Tron-styled testimonial card with a quote, author, avatar or initials, star rating, scanline overlay and corner brackets.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"thegridcn","st":"indexed","u":4,"pl":"https://cdn.21st.dev/thegridcn/testimonial-card/default/preview.1784378934477-6e822926-07cc-419b-99f0-9ab575764f31.png","pc":"thegridcn","tg":["testimonials"]},{"id":"21st:thegridcn__uplink-header","t":"Uplink header","d":"A compact monospaced header bar that shows left- and right-aligned tech-style status labels with selectable accent color variants.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/uplink-header/default/preview.1784829934033-9b7676d3-bbb8-48d9-b2e4-b3440a368f8d.png","pc":"thegridcn"},{"id":"21st:thegridcn__video-player","t":"Video player","d":"A retro sci-fi HUD-style video player frame with bracket corners, scanline overlay, transport controls, and an elapsed-time readout.","k":"component","s":"21st","c":"media/player","g":"media","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/video-player/default/preview.1783720055206.png","pc":"thegridcn","tg":["video"]},{"id":"21st:thegridcn__waveform","t":"Waveform","d":"An animated audio waveform visualizer with pulsing bars, glow, scanline overlay and corner brackets for playback and live-signal displays.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"thegridcn","st":"indexed","pl":"https://cdn.21st.dev/thegridcn/waveform/default/preview.1783581670675.png","pc":"thegridcn"},{"id":"21st:themostevildwarf__grain-gradient","t":"Grain gradient","d":"Animated WebGL shader background in the Grain Gradient style. Truchet variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"themostevildwarf","st":"indexed","pl":"https://cdn.21st.dev/themostevildwarf/grain-gradient/default/preview.1785773724034-fce40498-7571-40fc-a658-c7c8ef029909.webp","pc":"themostevildwarf"},{"id":"21st:theorcdev__8bit-accordion","t":"8bit accordion","d":"Pixel-art accordion from 8bitcn.com — expandable panels with retro chunky dashed borders. Native primitive rewrite, no Radix.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-accordion/default/preview.1779979261677.png","pc":"theorcdev","tg":["accordion"]},{"id":"21st:theorcdev__8bit-advanced1","t":"8bit advanced1","d":"Fake terminal demo shell that renders a sequence of command, output, and comment lines with a blinking cursor, in the 8-bit retro style.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-advanced1/default/preview.1780150587657.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-advanced2","t":"8bit advanced2","d":"KPI metrics dashboard with stat cards and 8-bit progress bars, in the retro pixel style.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"theorcdev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/8bit-advanced2/default/preview.1780153251447.png","pc":"theorcdev","tg":["dashboard","progress","stat"]},{"id":"21st:theorcdev__8bit-advanced3","t":"8bit advanced3","d":"Newsletter signup card with an email input and subscribe CTA, built in the retro 8-bit pixel style.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"theorcdev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/8bit-advanced3/default/preview.1780150432074.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-alert","t":"8bit alert","d":"Pixel-art alert from 8bitcn.com — wraps shadcn/ui Alert with hard-edge pixel borders and retro typography.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-alert/default/preview.1779963931227.png","pc":"theorcdev","tg":["alert"]},{"id":"21st:theorcdev__8bit-alert-dialog","t":"8bit alert dialog","d":"Pixel-art confirmation alert dialog from 8bitcn.com — retro pixel border on modal. Wraps Radix AlertDialog (inlined via esbuild).","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/8bit-alert-dialog/default/preview.1779996579590.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-audio-settings","t":"8bit audio settings","d":"An 8-bit styled audio settings panel with master volume and SFX sliders plus mute and vibration toggle switches. Source-verbatim from the 8bitcn audio-settings block.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-audio-settings/default/preview.1780525326033.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-avatar","t":"8bit avatar","d":"Pixel-art avatar from 8bitcn.com — chunky pixel frame around image with retro variant. Replaces Radix Avatar with native primitives.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"theorcdev","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/8bit-avatar/default/preview.1779969912832.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-badge","t":"8bit badge","d":"Pixel-art badge from 8bitcn.com — wraps shadcn/ui Badge with a retro variant (Press Start 2P font, hard-edge pixel borders). Drop-in API-compatible replacement.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"theorcdev","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/8bit-badge/default/preview.1779962143897.png","pc":"theorcdev","tg":["badge"]},{"id":"21st:theorcdev__8bit-breadcrumb","t":"8bit breadcrumb","d":"Pixel-art breadcrumb navigation from 8bitcn.com — Press Start 2P font with chunky chevron separators between path segments.","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-breadcrumb/default/preview.1779976500655.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-button","t":"8bit button","d":"Pixel-art button from 8bitcn.com — wraps shadcn/ui Button with a retro variant (Press Start 2P font, hard-edge pixel borders). Drop-in API-compatible replacement.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-button/default/preview.1779965979739.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-calendar","t":"8bit calendar","d":"An 8-bit styled calendar component with pixel-art chevron navigation, month/year header, and selectable date cells. Native rewrite of the 8bitcn calendar component.","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-calendar/default/preview.1780525524003.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-card","t":"8bit card","d":"An 8-bit styled card component with pixel-border decoration, supporting header, title, description, content, footer, and action slots. Source-verbatim from the 8bitcn card primitiv","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-card/default/preview.1780525731082.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-carousel","t":"8bit carousel","d":"An 8-bit styled carousel built on Embla. Pixel-bordered slides with retro prev/next buttons featuring blocky pixel arrows, full keyboard and swipe support.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"theorcdev","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/8bit-carousel/default/preview.1780350202026.png","pc":"theorcdev","tg":["carousel"]},{"id":"21st:theorcdev__8bit-chapter-intro","t":"8bit chapter intro","d":"An 8-bit chapter introduction screen built on the retro card primitive. Renders a pixelated background image with cinematic letterbox bars, a darken overlay, and a bold title plus ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-chapter-intro/default/preview.1780523973735.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-chart-area-step","t":"8bit chart area step","d":"A retro 8-bit step area chart block with hoverable data points and pixel styling.","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"theorcdev","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/8bit-chart-area-step/default/preview.1780006130225.png","pc":"theorcdev","tg":["data-visualization","tooltip"]},{"id":"21st:theorcdev__8bit-checkbox","t":"8bit checkbox","d":"Pixel-art checkbox from 8bitcn.com — chunky pixel border with retro check glyph. Wraps shadcn/ui Checkbox.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-checkbox/default/preview.1779973882166.png","pc":"theorcdev","tg":["checkbox"]},{"id":"21st:theorcdev__8bit-collapsible","t":"8bit collapsible","d":"Pixel-art collapsible panel from 8bitcn.com — toggle to reveal/hide content with retro styling.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-collapsible/default/preview.1779979255808.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-command","t":"8bit command","d":"Pixel-art command palette from 8bitcn.com — retro pixel border on input + results panel. Wraps cmdk Command (inlined via esbuild).","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-command/default/preview.1780152899791.png","pc":"theorcdev","tg":["search"]},{"id":"21st:theorcdev__8bit-context-menu","t":"8bit context menu","d":"Pixel-art right-click context menu from 8bitcn.com — retro pixel border. Wraps Radix ContextMenu (inlined via esbuild).","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/8bit-context-menu/default/preview.1779996743466.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-cta1","t":"8bit cta1","d":"An 8-bit styled CTA comparison block: a retro card with a three-column us-vs-them feature table, built on the 8bit card primitive with the Press Start 2P pixel font.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"theorcdev","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/8bit-cta1/default/preview.1780283999649.png","pc":"theorcdev","tg":["comparison","cta","table"]},{"id":"21st:theorcdev__8bit-cta2","t":"8bit cta2","d":"Persona cards with CTAs for different audiences. Retro 8-bit style use case section with pixel-perfect card layout.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-cta2/default/preview.1780524725929.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-dialog","t":"8bit dialog","d":"Pixel-art dialog from 8bitcn.com — retro pixel border on modal panel. Wraps Radix Dialog (inlined via esbuild).","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/8bit-dialog/default/preview.1779996839756.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-dialogue","t":"8bit dialogue","d":"An 8-bit RPG-style dialogue box pairing a pixel-framed avatar with a retro alert speech bubble, supporting left-aligned player and right-aligned NPC layouts via the player prop.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-dialogue/default/preview.1780525863080.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-difficulty-select","t":"8bit difficulty select","d":"An 8-bit styled game difficulty selection screen built on the retro card and button primitives. Renders a titled card (Select Difficulty) with EASY / NORMAL / HARD pixel-font butto","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-difficulty-select/default/preview.1780284659015.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-drawer","t":"8bit drawer","d":"Pixel-art drawer from 8bitcn.com — retro pixel border on bottom-sheet panel. Wraps Vaul Drawer (inlined via esbuild).","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-drawer/default/preview.1780152823538.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-dropdown-menu","t":"8bit dropdown menu","d":"Pixel-art dropdown menu from 8bitcn.com — retro pixel border with menu items. Wraps Radix DropdownMenu (inlined via esbuild).","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/8bit-dropdown-menu/default/preview.1779996686336.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-duel-block","t":"8bit duel block","d":"An interactive 8-bit arena duel between two fighters with retro HP health bars, turn-based hit mechanics, randomized damage and battle messages, a winner state with rematch, all wr","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-duel-block/default/preview.1780525077714.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-empty","t":"8bit empty","d":"An 8-bit styled empty state built from composable retro primitives — header, media, title, description, and content slots. Use it as a placeholder when a list, table, or view has n","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-empty/default/preview.1780279103776.png","pc":"theorcdev","tg":["empty-state"]},{"id":"21st:theorcdev__8bit-enemy-health-display","t":"8bit enemy health display","d":"An 8-bit styled enemy health display built on the retro health-bar primitive. Shows enemy name, level, and a health bar with a percentage overlay, driven by current/max health valu","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-enemy-health-display/default/preview.1780279045096.png","pc":"theorcdev","tg":["progress"]},{"id":"21st:theorcdev__8bit-faq1","t":"8bit faq1","d":"An 8-bit styled FAQ section built on the retro accordion primitive. A centered title and description above a single-collapsible accordion of question/answer pairs, all in the pixel","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-faq1/default/preview.1780350903797.png","pc":"theorcdev","tg":["accordion","faq"]},{"id":"21st:theorcdev__8bit-faq2","t":"8bit faq2","d":"An 8-bit styled FAQ block: a responsive two-column grid of retro card tiles, each pairing a question with a short answer. Built on the 8bit card primitive with the Press Start 2P p","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-faq2/default/preview.1780283011610.png","pc":"theorcdev","tg":["faq"]},{"id":"21st:theorcdev__8bit-faq3","t":"8bit faq3","d":"An 8-bit styled searchable help center. A retro pixel search input filters question/answer pairs live, grouped by category into collapsible retro accordions, with an empty state wh","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"theorcdev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/8bit-faq3/default/preview.1780351164743.png","pc":"theorcdev","tg":["accordion","empty-state","faq","search"]},{"id":"21st:theorcdev__8bit-feature1","t":"8bit feature1","d":"An 8-bit styled feature grid section. A centered title and description above a responsive grid of retro cards, each with a pixel icon, title, description, and an optional corner ba","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-feature1/default/preview.1780524805252.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-feature2","t":"8bit feature2","d":"An 8-bit styled feature list section. A centered title and description above numbered steps, each with a pixel-bordered number badge, title, optional highlight badge, and descripti","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-feature2/default/preview.1780524886216.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-feature3","t":"8bit feature3","d":"A swipeable feature carousel block with 8-bit pixel-bordered cards, optional badges, and retro pixel navigation arrows. Built on the Embla carousel, 8bit card, badge, and button pr","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-feature3/default/preview.1780524968501.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-footer1","t":"8bit footer1","d":"A retro 8-bit page footer with brand column, link columns, a GET STARTED button, and a copyright bar. Source-verbatim from the 8bitcn footer1 block.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-footer1/default/preview.1780525116306.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-friend-list","t":"8bit friend list","d":"An 8-bit styled friend list block. Shows a scrollable roster of players with retro avatars, online/offline/in-game status indicators, and current activity, built on the retro card ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-friend-list/default/preview.1780525866625.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-cta1","t":"8bit game cta1","d":"An 8-bit styled call-to-action block framing problem vs solution as a boss fight, with two retro cards (the problem and the power-up) and a closing CTA button. Source-verbatim from","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-cta1/default/preview.1780524065819.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-faq1","t":"8bit game faq1","d":"An 8-bit styled FAQ block that frames each question as a checkpoint with cleared, active, and locked states. Built on the retro accordion and badge primitives with pixel borders an","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"theorcdev","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/8bit-game-faq1/default/preview.1780525367614.png","pc":"theorcdev","tg":["accordion","faq"]},{"id":"21st:theorcdev__8bit-game-features1","t":"8bit game features1","d":"An 8-bit styled feature grid presented as a skill tree, with retro cards showing each skill's title, level badge (or LOCKED), description, and a level-progress bar. Source-verbatim","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-features1/default/preview.1780525333343.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-hero1","t":"8bit game hero1","d":"An 8-bit styled hero section block with a subtitle badge, retro headline, dual CTA buttons, and an XP/health progress bar underneath. Source-verbatim from the 8bitcn game-hero1 blo","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-hero1/default/preview.1780523890741.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-hero2","t":"8bit game hero2","d":"An 8-bit styled hero section block with a level badge, retro headline, an XP progress bar, a row of level-milestone badges, and dual CTA buttons. Source-verbatim from the 8bitcn ga","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-hero2/default/preview.1780524646015.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-over","t":"8bit game over","d":"An 8-bit styled game over screen block built on the retro card and button primitives. Shows a 'Game Over / Continue?' panel with pixel-art Retry and Exit buttons and an optional sk","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-over/default/preview.1780284023576.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-progress","t":"8bit game progress","d":"An 8-bit styled game progress card composing retro health, mana, and experience bars. Displays a player's level stats at a glance with pixel-art styling and labeled progress values","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-progress/default/preview.1780284631221.png","pc":"theorcdev","tg":["card","progress"]},{"id":"21st:theorcdev__8bit-game-roadmap1","t":"8bit game roadmap1","d":"An 8-bit roadmap styled as a quest log with a dashed timeline rail and completed, active, and locked quest states. Each quest is a retro card with a status badge. Built on the 8bit","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-roadmap1/default/preview.1780523875740.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-game-team1","t":"8bit game team1","d":"An 8-bit styled party grid block. Displays a team of player profile cards with retro avatars, level badges, and health, mana, and experience bars, built on the retro card, avatar, ","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-game-team1/default/preview.1780525528121.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-health-bar","t":"8bit health bar","d":"An 8-bit styled health bar built on the retro progress primitive. Shows a smooth red fill (default) or pixelated squares (retro variant), driven by a 0-100 value.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-health-bar/default/preview.1780279092981.png","pc":"theorcdev","tg":["progress"]},{"id":"21st:theorcdev__8bit-hero1","t":"8bit hero1","d":"A centered retro hero section with headline, badges, and CTA buttons. Pixel-perfect 8-bit style landing page hero.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-hero1/default/preview.1780524400380.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-hero2","t":"8bit hero2","d":"A split-layout retro hero with text on the left and a visual slot on the right. Pixel-perfect 8-bit style landing page.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-hero2/default/preview.1780524480723.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-hero3","t":"8bit hero3","d":"A game-style title screen hero with stat cards and blinking PRESS START text. Pixel-perfect 8-bit retro landing page.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-hero3/default/preview.1780524561616.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-hover-card","t":"8bit hover card","d":"An 8-bit styled hover card component with pixel-border overlay. Renders a retro popover panel on hover using CSS group-hover, no Radix dependency.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-hover-card/default/preview.1780526150737.png","pc":"theorcdev","tg":["card","popover"]},{"id":"21st:theorcdev__8bit-input","t":"8bit input","d":"Pixel-art input from 8bitcn.com — wraps shadcn/ui Input with hard-edge pixel borders and Press Start 2P retro variant.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-input/default/preview.1779966061515.png","pc":"theorcdev","tg":["input"]},{"id":"21st:theorcdev__8bit-input-otp","t":"8bit input otp","d":"Pixel-art one-time-password input from 8bitcn.com — chunky pixel borders on each slot with focus caret.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-input-otp/default/preview.1779976415420.png","pc":"theorcdev","tg":["input"]},{"id":"21st:theorcdev__8bit-item","t":"8bit item","d":"An 8-bit styled item row for lists and inventories. Composes ItemGroup, Item, ItemContent, ItemTitle, ItemDescription, ItemActions and a pixelated ItemSeparator, with default, outl","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"theorcdev","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/8bit-item/default/preview.1780525249347.png","pc":"theorcdev","tg":["list"]},{"id":"21st:theorcdev__8bit-kbd","t":"8bit kbd","d":"Pixel-art keyboard key indicator from 8bitcn.com — for shortcut hints and command palettes. Retro Press Start 2P glyph styling.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-kbd/default/preview.1779970073050.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-label","t":"8bit label","d":"Pixel-art label from 8bitcn.com — wraps shadcn/ui Label with Press Start 2P retro variant for form fields.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"theorcdev","st":"indexed","u":3,"pl":"https://cdn.21st.dev/larsen66/8bit-label/default/preview.1779963856414.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-leaderboard","t":"8bit leaderboard","d":"An 8-bit styled leaderboard block. Ranks players with retro avatars, scores, and rank badges, highlighting the current player, built on the retro card, badge, avatar, and separator","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-leaderboard/default/preview.1780525952285.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-loading-screen","t":"8bit loading screen","d":"An 8-bit styled loading screen block with an animated retro progress bar, rotating gameplay tips, and a pulsing pixel-font title. Supports auto-progress, custom tips, percentage to","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/8bit-loading-screen/default/preview.1780283477355.png","pc":"theorcdev","tg":["progress","spinner"]},{"id":"21st:theorcdev__8bit-login-form","t":"8bit login form","d":"Login form card with email and password fields, plus Google sign-in, built in the retro 8-bit pixel style.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"theorcdev","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/8bit-login-form/default/preview.1780004856981.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-login-form-2","t":"8bit login form 2","d":"An 8-bit retro login form with Apple and Google social login buttons, email and password fields, and a pixel-styled card.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"theorcdev","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/8bit-login-form-2/default/preview.1780153330122.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-login-form-with-image","t":"8bit login form with image","d":"An 8-bit styled login form with a side image panel. Features pixel-border inputs, retro button, card layout, and social login buttons, all in the Press Start 2P retro theme.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-login-form-with-image/default/preview.1780525890777.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-main-menu","t":"8bit main menu","d":"An 8-bit styled game main menu block built on the retro card and button primitives. Renders a titled menu card (Main Menu / Retro 8-bit Quest) with a vertical stack of pixel-font a","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-main-menu/default/preview.1780284111023.png","pc":"theorcdev","tg":["menu"]},{"id":"21st:theorcdev__8bit-mana-bar","t":"8bit mana bar","d":"An 8-bit styled mana bar built on the retro progress primitive. Shows a smooth blue fill (default) or pixelated squares (retro variant), driven by a 0-100 value.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-mana-bar/default/preview.1780277752147.png","pc":"theorcdev","tg":["progress"]},{"id":"21st:theorcdev__8bit-menubar","t":"8bit menubar","d":"Pixel-art horizontal menubar from 8bitcn.com — retro pixel border on top-level items and submenus. Wraps Radix Menubar (inlined via esbuild).","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-menubar/default/preview.1779998669685.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-navigation-menu","t":"8bit navigation menu","d":"An 8-bit styled navigation menu with pixel-border dropdown panels. Pure React state-based implementation with no Radix dependency — trigger, content, list, item, link, indicator an","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-navigation-menu/default/preview.1780569399895.png","pc":"theorcdev","tg":["navigation-menu"]},{"id":"21st:theorcdev__8bit-not-found1","t":"8bit not found1","d":"A retro 8-bit 404 not-found page with a large pixel headline, decorative pixel-art character, and a retro CTA button linking back home. Built on the 8bit button primitive.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-not-found1/default/preview.1780518137501.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-not-found2","t":"8bit not found2","d":"A retro 8-bit 404 not-found page featuring a pixel dwarf character, a bold pixel headline, and a retro CTA button to retreat home. Built on the 8bit button primitive.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-not-found2/default/preview.1780525618888.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-not-found3","t":"8bit not found3","d":"A cursed retro 8-bit 404 not-found page with a pixel undead character, a status badge, a pixel headline, and dual retro CTA buttons. Built on the 8bit badge and button primitives.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-not-found3/default/preview.1780525698743.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-pagination","t":"8bit pagination","d":"Pixel-art pagination control from 8bitcn.com — pixel-corner border on active page, retro chevron prev/next.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"theorcdev","st":"indexed","u":6,"pl":"https://cdn.21st.dev/larsen66/8bit-pagination/default/preview.1779976587099.png","pc":"theorcdev","tg":["pagination"]},{"id":"21st:theorcdev__8bit-pause-menu","t":"8bit pause menu","d":"An 8-bit styled in-game pause menu overlay built on the retro card and button primitives. Shows a 'Paused' panel with pixel-art Resume, Restart and Quit actions.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-pause-menu/default/preview.1780284646527.png","pc":"theorcdev","tg":["modal"]},{"id":"21st:theorcdev__8bit-popover","t":"8bit popover","d":"Pixel-art popover from 8bitcn.com — retro pixel border on floating panel. Wraps Radix Popover (inlined via esbuild).","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/danverr_fce71477/8bit-popover/default/preview.1779996628874.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-portal-transition","t":"8bit portal transition","d":"An interactive retro 8-bit fast-travel CTA. Click the pixel portal to trigger a traveling state that pulses the artwork, swaps the badge and button labels, and disables the primary","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-portal-transition/default/preview.1780525164983.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-pricing1","t":"8bit pricing1","d":"Classic side-by-side 8-bit pricing tier cards with feature lists, a highlighted popular tier, and retro pixel CTAs. Built on the 8bitcn card, badge, button, and separator primitive","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-pricing1/default/preview.1780525456927.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-pricing2","t":"8bit pricing2","d":"8-bit pricing cards with a monthly/yearly toggle that swaps prices, a best-value badge, and retro pixel CTAs. Built on the 8bitcn card, badge, button, and separator primitives.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-pricing2/default/preview.1780525537664.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-progress","t":"8bit progress","d":"Pixel-art progress bar from 8bitcn.com — chunky pixel fill, self-contained (no shadcn primitive dependency).","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-progress/default/preview.1779966241776.png","pc":"theorcdev","tg":["progress"]},{"id":"21st:theorcdev__8bit-quest-log","t":"8bit quest log","d":"An 8-bit styled quest log panel with accordion items, status badges (active/completed/failed/pending), and a scrollable list. Source-verbatim from the 8bitcn quest-log block.","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-quest-log/default/preview.1780524554160.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-radio-group","t":"8bit radio group","d":"Pixel-art radio group from 8bitcn.com — chunky pixel frame around each option, retro selected glyph. Native primitive rewrite, no Radix.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-radio-group/default/preview.1779976708894.png","pc":"theorcdev","tg":["radio-group"]},{"id":"21st:theorcdev__8bit-resizable","t":"8bit resizable","d":"An 8-bit styled resizable panel group with retro pixel borders and a draggable handle, built on react-resizable-panels. Supports horizontal and vertical layouts with optional grip ","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-resizable/default/preview.1780280730195.png","pc":"theorcdev","tg":["border"]},{"id":"21st:theorcdev__8bit-save-slots","t":"8bit save slots","d":"An 8-bit save/load game interface that lists save files with floppy-disk previews, timestamps, saved badges, and empty-slot placeholders. Built on the 8bitcn card, badge, button, a","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-save-slots/default/preview.1780523894542.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-scroll-area","t":"8bit scroll area","d":"Pixel-art scroll area from 8bitcn.com — overflow container with retro chunky scrollbar styling.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-scroll-area/default/preview.1779979258209.png","pc":"theorcdev","tg":["scroll-area"]},{"id":"21st:theorcdev__8bit-select","t":"8bit select","d":"Pixel-art select dropdown from 8bitcn — retro pixel border on the trigger and the floating panel, with Press Start 2P typography. Wraps Radix Select for full keyboard and accessibi","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"theorcdev","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/8bit-select/default/preview.1780149324409.png","pc":"theorcdev","tg":["select"]},{"id":"21st:theorcdev__8bit-separator","t":"8bit separator","d":"Pixel-art separator from 8bitcn.com — dashed pixel rule with horizontal and vertical orientations. Self-contained, no radix.","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"theorcdev","st":"indexed","u":5,"pl":"https://cdn.21st.dev/larsen66/8bit-separator/default/preview.1779969999702.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-skeleton","t":"8bit skeleton","d":"Pixel-art skeleton placeholder from 8bitcn.com — wraps shadcn/ui Skeleton with chunky pixel blocks for loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-skeleton/default/preview.1779966163911.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-slider","t":"8bit slider","d":"Pixel-art slider from 8bitcn.com — chunky track and thumb with retro 8-bit styling. Wraps Radix Slider primitive.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-slider/default/preview.1779974055739.png","pc":"theorcdev","tg":["slider"]},{"id":"21st:theorcdev__8bit-social-proof1","t":"8bit social proof1","d":"An 8-bit styled social proof stats bar block showing headline metrics separated by retro dashed dividers, with an optional logo cloud below. Renders big pixel-font numbers with lab","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-social-proof1/default/preview.1780525610513.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-social-proof2","t":"8bit social proof2","d":"An 8-bit styled testimonials block with two columns of retro pixel-font cards, each holding a quote, an author name, and a role badge. Renders a responsive grid of testimonial card","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-social-proof2/default/preview.1780525694207.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-social-proof3","t":"8bit social proof3","d":"An 8-bit styled social proof block. A looping carousel of customer review cards with pixel star ratings, quote, name, role, and an optional badge. Built on a retro embla carousel w","k":"component","s":"21st","c":"media/carousel","g":"media","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-social-proof3/default/preview.1780525778400.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-spinner","t":"8bit spinner","d":"Pixel-art loading spinner from 8bitcn.com — classic rotating SVG or diamond pixel-flash variant. Zero dependencies.","k":"component","s":"21st","c":"status/loader","g":"status","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-spinner/default/preview.1779970158842.png","pc":"theorcdev","tg":["spinner"]},{"id":"21st:theorcdev__8bit-switch","t":"8bit switch","d":"Pixel-art toggle switch from 8bitcn.com — hard-edge pixel border with on/off thumb states. Wraps Radix Switch primitive.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-switch/default/preview.1779973793451.png","pc":"theorcdev","tg":["toggle"]},{"id":"21st:theorcdev__8bit-table","t":"8bit table","d":"Pixel-art table from 8bitcn.com — bordered cells with retro 8-bit styling. Zero external deps.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-table/default/preview.1779988756041.png","pc":"theorcdev","tg":["table"]},{"id":"21st:theorcdev__8bit-tabs","t":"8bit tabs","d":"Pixel-art tabs from 8bitcn.com — retro pixel borders on triggers and content panels. Wraps shadcn/ui Tabs.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-tabs/default/preview.1779974141558.png","pc":"theorcdev","tg":["tabs"]},{"id":"21st:theorcdev__8bit-team1","t":"8bit team1","d":"An 8-bit styled team grid block. Responsive card grid of team members with pixel avatars, name, role, and an optional corner badge. Built from retro avatar, badge, and card primiti","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"theorcdev","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/8bit-team1/default/preview.1780525360281.png","pc":"theorcdev","tg":["team"]},{"id":"21st:theorcdev__8bit-team2","t":"8bit team2","d":"An 8-bit styled changelog block. Vertical list of release entries with date, title, description, an optional version badge, and pixel separators between entries. Built from retro b","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"theorcdev","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/8bit-team2/default/preview.1780351195255.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-team3","t":"8bit team3","d":"An 8-bit styled case studies block. Three-column grid of customer stories, each with a title, description, KPI badges, and a call-to-action button. Built from retro badge, button, ","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-team3/default/preview.1780525444348.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-textarea","t":"8bit textarea","d":"Pixel-art textarea from 8bitcn.com — wraps shadcn/ui Textarea with hard-edge pixel borders and Press Start 2P retro font.","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-textarea/default/preview.1779969787146.png","pc":"theorcdev","tg":["textarea"]},{"id":"21st:theorcdev__8bit-timeline1","t":"8bit timeline1","d":"A vertical 8-bit timeline with connecting dashed line, numbered step icons, optional badges, and retro typography. Source-verbatim from the 8bitcn timeline1 block.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-timeline1/default/preview.1780524749239.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-timeline2","t":"8bit timeline2","d":"An 8-bit styled horizontal timeline block with numbered checkpoints on a dashed track. Renders steps horizontally on desktop and stacks vertically on mobile, with a retro pixel-fon","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"theorcdev","st":"indexed","u":7,"pl":"https://cdn.21st.dev/larsen66/8bit-timeline2/default/preview.1780282992414.png","pc":"theorcdev","tg":["steps","timeline"]},{"id":"21st:theorcdev__8bit-timeline3","t":"8bit timeline3","d":"An 8-bit zigzag roadmap timeline with alternating left/right cards on desktop and a simple vertical layout on mobile. Source-verbatim from the 8bitcn timeline3 block.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-timeline3/default/preview.1780524937319.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-toast","t":"8bit toast","d":"Pixel-art toast notification from 8bitcn.com — wraps Sonner with retro pixel borders (Sonner inlined via esbuild).","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-toast/default/preview.1779989889455.png","pc":"theorcdev","tg":["toast"]},{"id":"21st:theorcdev__8bit-toggle","t":"8bit toggle","d":"Pixel-art toggle button from 8bitcn.com — pressed state with retro pixel border. Wraps shadcn/ui Toggle.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-toggle/default/preview.1779973972164.png","pc":"theorcdev","tg":["toggle"]},{"id":"21st:theorcdev__8bit-toggle-group","t":"8bit toggle group","d":"Pixel-art toggle group from 8bitcn.com — single or multiple selection with retro pixel borders on each item.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-toggle-group/default/preview.1779976327982.png","pc":"theorcdev","tg":["toggle"]},{"id":"21st:theorcdev__8bit-tooltip","t":"8bit tooltip","d":"Pixel-art tooltip from 8bitcn.com — retro pixel-border bubble appearing on hover with Press Start 2P font.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-tooltip/default/preview.1779979678561.png","pc":"theorcdev","tg":["tooltip"]},{"id":"21st:theorcdev__8bit-victory-screen","t":"8bit victory screen","d":"An 8-bit victory results screen built on the retro card, alert, and item primitives. Shows a VICTORY banner, stat panels (exp/gold), an items-obtained list with rarity colors and i","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"theorcdev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/8bit-victory-screen/default/preview.1780525776943.png","pc":"theorcdev"},{"id":"21st:theorcdev__8bit-xp-bar","t":"8bit xp bar","d":"Pixel-art XP / experience bar from 8bitcn.com — chunky pixel borders, retro fill. Wraps Radix Progress; default and retro variants; flashing 'LEVEL UP!' animation at 100%.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theorcdev","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/8bit-xp-bar/default/preview.1779996077095.png","pc":"theorcdev","tg":["progress"]},{"id":"21st:theritikk__luma-spin","t":"Luma spin","d":"Luma Spin is a loader component","k":"component","s":"21st","c":"status/loader","g":"status","a":"theritikk","st":"indexed","pl":"https://cdn.21st.dev/theritikk/luma-spin/default/preview.1751889664207.png","pc":"theritikk","tg":["spinner"]},{"id":"21st:theshanelevine__approval-card","t":"Approval card","d":"A human-in-the-loop approval card where an AI agent asks one multiple-choice question at a time, with radio/checkbox options, a custom answer field, a dot pager, and a confirmation","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/approval-card/default/preview.1785483085506-b838cdcf-642f-4a86-a19f-d813a89a2bc2.png","pc":"theshanelevine","tg":["ai-chat"]},{"id":"21st:theshanelevine__chat","t":"Chat","d":"Tabbed AI chat panel with animated reasoning replies and a message composer for agent interfaces.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/chat/default/preview.1785484847734-f168553a-13cb-4a59-978c-c9a170358307.png","pc":"theshanelevine","tg":["ai-chat"]},{"id":"21st:theshanelevine__code-block","t":"Code block","d":"A code block that streams agent-written code line by line with syntax token colors, a filename header, and a live copy-to-clipboard button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/code-block/default/preview.1785485820796-1f638759-f9e4-40e4-aa63-003e102dd86f.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__context-cards","t":"Context cards","d":"A stack of retrieved knowledge chunk cards that animate in, each showing a title, character count, snippet, and a source file chip.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/context-cards/default/preview.1785484829530-a2956c13-fe0c-47d2-a60c-7d7ab31ba333.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__diff-table","t":"Diff table","d":"An animated data table that plays an AI-proposed edit sweeping through tabular rows — removed rows tint red and strike through while a newly added row slides in green, resting on t","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/diff-table/default/preview.1785484878538-50879f45-473a-45c2-8051-35e566edf060.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__filter-table","t":"Filter table","d":"A task table with status filter chips that reorganize live data — clicking All, To do, In Progress, or Completed smoothly expands and collapses the matching rows.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/filter-table/default/preview.1785484924778-f1a9a690-fe62-4ef0-babf-562c9e5bf485.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__loading-state","t":"Loading state","d":"A compact pixel-grid loader with an animated wavefront, a shimmering status label, and a live elapsed timer for long-running or agent tasks.","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"theshanelevine","st":"rated","pl":"https://cdn.21st.dev/theshanelevine/loading-state/default/preview.1785483020200-203a6459-173d-4672-81f4-047dfd5094ba.png","pc":"theshanelevine","tg":["progress"],"sc":22},{"id":"21st:theshanelevine__recommendation-card","t":"Recommendation card","d":"An AI agent suggestion card with a confidence meter, an expandable drawer of alternative options, and an accept action.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/recommendation-card/default/preview.1785484863300-95c25233-0dca-4c65-96ea-9896540a9b9c.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__records-table","t":"Records table","d":"A compact CRM-style data table with colored tag chips, a sticky first column, row selection, sortable columns, connection-strength indicators, and a calculations footer.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/records-table/default/preview.1785484893602-40bfd5fe-85b8-4b60-85c6-75668202bb9c.png","pc":"theshanelevine","tg":["grid","table"]},{"id":"21st:theshanelevine__search","t":"Search","d":"A command-style search field with live filtering, a clear button, and a no-results empty state.","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/search/default/preview.1785484941787-543b9f80-8b77-4b7b-835f-7e9cf401ee7b.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__sidebar-nav","t":"Sidebar nav","d":"A workspace sidebar navigation with a workspace switcher, quick search field, accent action button, and grouped nav items with an animated hover/active highlight and badges.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/sidebar-nav/default/preview.1785484909164-67954fa4-f387-4652-8d40-ff45a3368c9f.png","pc":"theshanelevine"},{"id":"21st:theshanelevine__streaming-text","t":"Streaming text","d":"Streamed AI answer that reveals word by word with inline source citations, expandable sources, action buttons, and follow-up prompts.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"theshanelevine","st":"indexed","pl":"https://cdn.21st.dev/theshanelevine/streaming-text/default/preview.1785483052316-efbe4f6a-7ce7-43d2-be9b-032d08a251de.png","pc":"theshanelevine","tg":["ai-chat"]},{"id":"21st:theshanelevine__thinking","t":"Thinking","d":"An expandable AI agent thinking trace that streams steps, reasoning, web-search results, or tool calls with a shimmering label and collapsible timeline.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theshanelevine","st":"rated","pl":"https://cdn.21st.dev/theshanelevine/thinking/default/preview.1785483036059-110d5d18-9bdb-4129-b5e6-663d0b5a32de.png","pc":"theshanelevine","tg":["ai-chat"],"sc":21},{"id":"21st:thetemplatebusiness__hello-world-button","t":"Hello world button","d":"a hello world button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"thetemplatebusiness","st":"indexed","pl":"https://cdn.21st.dev/thetemplatebusiness/hello-world-button/default/preview.1753736773681.png","pc":"thetemplatebusiness"},{"id":"21st:theurabello27__mrx-brain-2","t":"Mrx brain 2","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards,","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"theurabello27","st":"indexed","pl":"https://cdn.21st.dev/theurabello27/mrx-brain-2/default/preview.1785466246201-e1d1c2f4-4acb-4f62-a62a-d5f5361e9817.webp","pc":"theurabello27"},{"id":"21st:theutkarshmail__3-dots-loader","t":"3 dots loader","d":" sleek, minimal loader animation where three separate balls move independently at first, then merge into one and spin together — symbolizing alignment, synergy, or a process coming","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/3-dots-loader/default/preview.1755117050055.png","pc":"theutkarshmail","tg":["spinner"]},{"id":"21st:theutkarshmail__3d-button","t":"3d button","d":"A 3D button with animated text is a visually dynamic UI element designed to mimic real-world depth and provide interactive feedback through both its structure and the movement of i","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"theutkarshmail","st":"indexed","u":167,"pl":"https://cdn.21st.dev/theutkarshmail/3d-button/default/preview.1755031043065.png","pc":"theutkarshmail","tg":["cta"]},{"id":"21st:theutkarshmail__3d-effect-loader","t":"3d effect loader","d":"this is a loader with special 3d animation ","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","u":23,"pl":"https://cdn.21st.dev/theutkarshmail/3d-effect-loader/default/preview.1755111973713.png","pc":"theutkarshmail","tg":["spinner"]},{"id":"21st:theutkarshmail__ai-button","t":"Ai button","d":"this is button with 3d glow effect  with combination of dark and purpe themes","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/ai-button/default/preview.1755112366094.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__ai-loader","t":"Ai loader","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/ai-loader/default/preview.1755115601492.png","pc":"theutkarshmail","tg":["ai-chat","spinner"]},{"id":"21st:theutkarshmail__bluetooth-key","t":"Bluetooth key","d":"a keyboard key for bluetooth toggle","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/bluetooth-key/default/preview.1755518361050.png","pc":"theutkarshmail","tg":["toggle"]},{"id":"21st:theutkarshmail__capsule-loader","t":"Capsule loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/capsule-loader/default/preview.1755118876040.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__chatgpt-tile","t":"Chatgpt tile","d":"a chatgpt tile with 3d hover effect and animated icon","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/chatgpt-tile/default/preview.1755205024618.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__claude-button","t":"Claude button","d":"This is a rectangular badge-style logo with a beige background, a black border, and a drop shadow effect in orange. On the left, it has a starburst icon followed by the text Claude","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/claude-button/default/preview.1755205528252.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__comment-reply","t":"Comment reply","d":"this is a comment reply component designed for modern and minimilist social apps","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/comment-reply/default/preview.1755113437793.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__coupon-checkout","t":"Coupon checkout","d":"this a checkout summary component with a promo code","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/coupon-checkout/default/preview.1755113908364.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__cycle-loader","t":"Cycle loader","d":"A seamless, hypnotic animation where motion flows in a perfect circular loop, designed to symbolize continuity, harmony, and quiet power — like the inner workings of a well-oiled e","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/cycle-loader/default/preview.1755117888424.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__de-bugger","t":"De bugger","d":"a simple component which allows you to shoot bugs which fly acroos just like the dino game when there is no network","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/de-bugger/default/preview.1755517647540.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__delete-bin","t":"Delete bin","d":"a delete bin button which on hover shows a opened bin ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/delete-bin/default/preview.1755206792703.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__google-assistant-colorfull-loader","t":"Google assistant colorfull loader","d":"A playful, dynamic loader made up of four colorful dots that animate in a smooth, expressive sequence. This loader reflects Google Assistant's personality — helpful, responsive, an","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/google-assistant-colorfull-loader/default/preview.1755118453588.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__google-assistant-loader","t":"Google assistant loader","d":"A playful, dynamic loader made up of four dots that animate in a smooth, expressive sequence. This loader reflects Google Assistant's personality — helpful, responsive, and friendl","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/google-assistant-loader/default/preview.1755118212916.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__hamster-loader","t":"Hamster loader","d":"A fun and engaging loader animation where a tiny hamster runs endlessly inside a spinning wheel, symbolizing active background work or loading progress.","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/hamster-loader/default/preview.1755116715834.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__heartbeat-loader","t":"Heartbeat loader","d":"A visually dynamic loader that mimics a heartbeat rhythm, paired with an ECG (electrocardiogram) line animation to symbolize vitality, life, or live data activity.","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/heartbeat-loader/default/preview.1755117356739.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__honeycomb-loader","t":"Honeycomb loader","d":"this is a honeycomb loaders and ","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/honeycomb-loader/default/preview.1755115239639.png","pc":"theutkarshmail","tg":["spinner"]},{"id":"21st:theutkarshmail__hove-button","t":"Hove button","d":"A button labeled Hover that, when hovered, reveals the text Click and bends toward the side where the cursor touches.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/hove-button/default/preview.1755203459828.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__illustration-cards","t":"Illustration cards","d":"group of four cards that reveal their content on hover one at a time","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/illustration-cards/default/preview.1755212949062.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__jetpack-loader","t":"Jetpack loader","d":"why waitfor loading when you can take a jetpack and reach to the data yourself !!","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/jetpack-loader/default/preview.1755116241467.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__lever-switch","t":"Lever switch","d":"this a animated lever switch can be toggled on and off just like a lever or gear of a machine","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"theutkarshmail","st":"indexed","u":128,"pl":"https://cdn.21st.dev/theutkarshmail/lever-switch/default/preview.1755112741352.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__linked-in-follow-me","t":"Linked in follow me","d":"a follow me button which on hover tell user about a linkedin profile ","k":"component","s":"21st","c":"actions/link","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/linked-in-follow-me/default/preview.1755202662546.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__magnet-button","t":"Magnet button","d":"This is a dark rounded button with glowing edges that, when clicked, triggers an animation resembling a moving polar magnetic field radiating outward.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/magnet-button/default/preview.1755203812393.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__mail-box","t":"Mail box","d":"the mail box opens on click","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/mail-box/default/preview.1755206526495.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__map","t":"Map","d":"this isa map which shows the cities on hover","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/map/default/preview.1755539756791.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__mario-game","t":"Mario game","d":"This design shows a Mario-style interaction. When the user long presses the question block at the top, Mario jumps upward, and a coin pops out of the block, mimicking the classic S","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/mario-game/default/preview.1755206171819.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__multi-choice","t":"Multi choice","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/multi-choice/default/preview.1755205856531.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__next-button","t":"Next button","d":"this is a next button with a glow and arrow animation","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/next-button/default/preview.1755112991579.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__nuke-button","t":"Nuke button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/nuke-button/default/preview.1755207465043.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__pacman-loader","t":"Pacman loader","d":"this is a pacman loader for pacman fans and ui enthusiasts!","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/pacman-loader/default/preview.1755115949729.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__panda-loader","t":"Panda loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/panda-loader/default/preview.1755029619355.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__pattern-loader","t":"Pattern loader","d":"here is a pattern loader which changes pattern and enhaces ex ","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/pattern-loader/default/preview.1755117638747.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__ramen-boy","t":"Ramen boy","k":"component","s":"21st","c":"other","g":"other","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/ramen-boy/default/preview.1755119310768.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__rising-ball","t":"Rising ball","d":"A single ball moves toward a staircase-like structure. It pauses briefly, then begins climbing — bouncing up one step at a time. Each bounce is rhythmic and smooth, creating a loop","k":"component","s":"21st","c":"status/loader","g":"status","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/rising-ball/default/preview.1755111645595.png","pc":"theutkarshmail","tg":["spinner"]},{"id":"21st:theutkarshmail__slide-glow-button","t":"Slide glow button","d":"a animation which reveals glow text \"Himawari\" on hover ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","u":11,"pl":"https://cdn.21st.dev/theutkarshmail/slide-glow-button/default/preview.1755202399040.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__vs-code-button","t":"Vs code button","d":"a vs code icon button which inverts color on hover","k":"component","s":"21st","c":"actions/button","g":"actions","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/vs-code-button/default/preview.1755204510587.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__xbox-animation","t":"Xbox animation","d":"hover animation of xbox icon on a xbox card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/xbox-animation/default/preview.1755213562448.png","pc":"theutkarshmail"},{"id":"21st:theutkarshmail__youtube-reveal","t":"Youtube reveal","d":"a youtube button which reveals mini profile on hover. It looks like a modern social media hover card that combines both branding (YouTube logo) and channel info in a smooth reveal.","k":"component","s":"21st","c":"media/player","g":"media","a":"theutkarshmail","st":"indexed","pl":"https://cdn.21st.dev/theutkarshmail/youtube-reveal/default/preview.1755208000475.png","pc":"theutkarshmail"},{"id":"21st:thiago.mello__orange-gamification","t":"Orange gamification","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#E14923, #FF9A52, #FF9100, #E14923). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"thiago.mello","st":"indexed","pl":"https://cdn.21st.dev/thiago.mello/orange-gamification/default/preview.1785945329803-abe5a739-7fb9-4309-afa8-0a6b587ffd00.webp","pc":"thiago.mello"},{"id":"21st:thousandoaksco__pinlist","t":"Pinlist","d":"A pinned items list with toggle-to-pin behavior; pinned items sort to top.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"thousandoaksco","st":"indexed","pl":"https://21st.dev/@thousandoaksco/components/pinlist","pc":"thousandoaksco"},{"id":"21st:thyagoresende__test","t":"Test","d":"Animated (flicker) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"thyagoresende","st":"indexed","pl":"https://cdn.21st.dev/thyagoresende/test/default/preview.1786139423018-424f7ef2-9e33-4e6e-af18-144c33fd0310.webp","pc":"thyagoresende"},{"id":"21st:thyagoresende__test2","t":"Test2","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"thyagoresende","st":"indexed","pl":"https://cdn.21st.dev/thyagoresende/test2/default/preview.1786139432055-65146cc0-acb7-43f2-9c00-eddd904cafcf.webp","pc":"thyagoresende"},{"id":"21st:tiemefgroup__neuro-noise-shader","t":"Neuro noise shader","d":"Animated WebGL shader background in the Neuro Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"tiemefgroup","st":"indexed","pl":"https://cdn.21st.dev/tiemefgroup/neuro-noise-shader/default/preview.1786626922948-a4fcf22f-ebb3-47e4-a27c-271becae24b1.webp","pc":"tiemefgroup"},{"id":"21st:tigerabrodi__input-with-feedback","t":"Input with feedback","d":"My InputWithFeedback component. I use it for a lot of forms.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"tigerabrodi","st":"indexed","pl":"https://cdn.21st.dev/user_tigerabrodi/input-with-feedback/default/preview.png","pc":"tigerabrodi","tg":["input"]},{"id":"21st:tigerabrodi__smart-textbox","t":"Smart textbox","d":"Rich text input with @mentions and AI autocomplete. Inline tag chips, ghost text suggestions. Keyboard-first, fully customizable.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"tigerabrodi","st":"indexed","pl":"https://cdn.21st.dev/larsen66/smart-textbox/default/preview.1773142411166.png","pc":"tigerabrodi","tg":["ai-chat","chip","textarea"]},{"id":"21st:tigermudassirpm__app","t":"App","d":"A cinematic, scroll-driven 3D debit card exploding and merging experience.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"tigermudassirpm","st":"indexed","pl":"https://cdn.21st.dev/tigermudassirpm/app/default/preview.1786095698571-70c3ff8c-9858-4651-8fce-99cb4876dd49.png","pc":"tigermudassirpm"},{"id":"21st:timoapfelsaft__rge2","t":"Rge2","k":"component","s":"21st","c":"other","g":"other","a":"timoapfelsaft","st":"indexed","pl":"https://cdn.21st.dev/timoapfelsaft/rge2/default/preview.1785504021814-bfc48b66-8686-46bc-81ba-d5ec362dfede.webp","pc":"timoapfelsaft"},{"id":"21st:tkachukkateryna14__digit-stream","t":"Digit stream","d":"A generative digit stream: hundreds of numbers flow along a winding snake path on black as you scroll, then dim and scatter when you stop — easing back onto the path when you scrol","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"tkachukkateryna14","st":"indexed","pl":"https://cdn.21st.dev/tkachukkateryna14/digit-stream/default/preview.1785841626551-7a737211-30a8-4d6c-86f9-2f8032bac4e5.png","pc":"tkachukkateryna14","tg":["background","scroll-area"]},{"id":"21st:tkachukkateryna14__lamp","t":"Lamp","d":"Ambient lamp glow with a bright edge line for hero sections.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tkachukkateryna14","st":"indexed","pl":"https://cdn.21st.dev/tkachukkateryna14/lamp/default/preview.1786970703776-a677b68d-3c26-46d7-bf50-90b7d7e96709.png","pc":"tkachukkateryna14"},{"id":"21st:tkachukkateryna14__mixtape-hero","t":"Mixtape hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tkachukkateryna14","st":"indexed","pl":"https://cdn.21st.dev/tkachukkateryna14/mixtape-hero/default/preview.1785872476731-3e2f23cc-c640-4ec0-84d6-b5ebffa9deb6.webp","pc":"tkachukkateryna14"},{"id":"21st:tkachukkateryna14__scatter-clock","t":"Scatter clock","d":"A clock counts up to a set time, then shatters into a rain of small falling digits as you scroll — the sage backdrop darkens to black and the digits turn silver, gathering back int","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"tkachukkateryna14","st":"indexed","pl":"https://cdn.21st.dev/tkachukkateryna14/scatter-clock/default/preview.1785942217550-0c4cecb9-bdf2-4b84-8a7f-de6e8e5e9b91.png","pc":"tkachukkateryna14"},{"id":"21st:tkachukkateryna14__soft-focus-clock","t":"Soft focus clock","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"tkachukkateryna14","st":"indexed","pl":"https://cdn.21st.dev/tkachukkateryna14/soft-focus-clock/default/preview.1785839929655-3a75feaf-de52-4250-bb77-6b0d74151a1d.png","pc":"tkachukkateryna14"},{"id":"21st:tom_ui__animated-checkbox","t":"Animated checkbox","d":"Animated checkbox with spring transitions and strike-through text effect.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"tom_ui","st":"indexed","u":17,"pl":"https://cdn.21st.dev/larsen66/animated-checkbox/default/preview.1773095672398.png","pc":"tom_ui","tg":["checkbox"]},{"id":"21st:tom_ui__animated-gradient","t":"Animated gradient","d":"Animated gradient background with presets and customizable swirl effects using WebGL.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"tom_ui","st":"indexed","u":57,"pl":"https://cdn.21st.dev/larsen66/animated-gradient/default/preview.1773077145252.png","pc":"tom_ui","tg":["background"]},{"id":"21st:tom_ui__bars-spinner","t":"Bars spinner","d":"A loading spinner with rotating bars animation.","k":"component","s":"21st","c":"status/loader","g":"status","a":"tom_ui","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/bars-spinner/default/preview.1773077357524.png","pc":"tom_ui"},{"id":"21st:tom_ui__blur-reveal","t":"Blur reveal","d":"Animated text component that reveals characters one by one with a blur-to-focus effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","u":8,"pl":"https://cdn.21st.dev/tom_ui/blur-reveal/default/preview.1784456059490-99fc2545-8f4b-4d51-b8e1-52ace13f6423.png","pc":"tom_ui","tg":["text"]},{"id":"21st:tom_ui__color-selector","t":"Color selector","d":"Interactive color picker component.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"tom_ui","st":"indexed","u":34,"pl":"https://cdn.21st.dev/larsen66/color-selector/default/preview.1773094901253.png","pc":"tom_ui"},{"id":"21st:tom_ui__copy-button","t":"Copy button","d":"A copy-to-clipboard button with blur transition effect.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"tom_ui","st":"indexed","u":32,"pl":"https://cdn.21st.dev/larsen66/copy-button/default/preview.1773078316663.png","pc":"tom_ui"},{"id":"21st:tom_ui__exploding-input","t":"Exploding input","d":"Input component that spawns particle effects when typing.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/exploding-input/default/preview.1785371340976-fed1bbf8-6786-451e-ad5c-1cfc0e7ae9db.png","pc":"tom_ui"},{"id":"21st:tom_ui__fallback-avatar","t":"Fallback avatar","d":"A unique gradient avatar generated from a name string.","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/fallback-avatar/default/preview.1776944584920.png","pc":"tom_ui","tg":["avatar","profile","team"]},{"id":"21st:tom_ui__flow-button","t":"Flow button","d":"A button with animated flowing dashed border on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"tom_ui","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/flow-button/default/preview.1773090683139.png","pc":"tom_ui"},{"id":"21st:tom_ui__gradient-wave-text","t":"Gradient wave text","d":"Apple-style animated gradient text with wave effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/gradient-wave-text/default/preview.1773080108142.png","pc":"tom_ui"},{"id":"21st:tom_ui__highlighted-text","t":"Highlighted text","d":"Text with sliding background highlight animation using mix-blend-mode.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/highlighted-text/default/preview.1773097239628.png","pc":"tom_ui"},{"id":"21st:tom_ui__kbd","t":"Kbd","d":"Display keyboard shortcuts with proper key symbols.","k":"component","s":"21st","c":"other","g":"other","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/kbd/default/preview.1776940959950.png","pc":"tom_ui"},{"id":"21st:tom_ui__label-input","t":"Label input","d":"Input field with floating label and password visibility toggle.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/label-input/default/preview.1773097339249.png","pc":"tom_ui"},{"id":"21st:tom_ui__marquee","t":"Marquee","d":"Infinite scrolling marquee component with customizable speed and direction.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"tom_ui","st":"indexed","u":92,"pl":"https://cdn.21st.dev/larsen66/marquee/default/preview.1773099410751.png","pc":"tom_ui","tg":["marquee","scroll-area"]},{"id":"21st:tom_ui__perspective-book","t":"Perspective book","d":"Here is Perspective Book component","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/perspective-book/default/preview.1773072971564.png","pc":"tom_ui"},{"id":"21st:tom_ui__pop-button","t":"Pop button","d":"A playful 3D-style button with push-down animation effect.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"tom_ui","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/pop-button/default/preview.1773097572670.png","pc":"tom_ui"},{"id":"21st:tom_ui__qr-code","t":"Qr code","d":"QR code generator with rounded finder patterns and dot-style data modules.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/qr-code/default/preview.1776946505536.png","pc":"tom_ui","tg":["grid"]},{"id":"21st:tom_ui__randomized-text","t":"Randomized text","d":"Animated text that reveals its words or characters with a randomized fade-in effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/randomized-text/default/preview.1784823998961-7368e6e5-2695-42bf-9966-78c0cc0d5ad8.png","pc":"tom_ui"},{"id":"21st:tom_ui__rich-button","t":"Rich button","d":"A button component with rich styling and color variants.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"tom_ui","st":"indexed","u":14,"pl":"https://cdn.21st.dev/larsen66/rich-button/default/preview.1773097670545.png","pc":"tom_ui"},{"id":"21st:tom_ui__shimmer-text","t":"Shimmer text","d":"Text with animated shimmer highlight effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","u":141,"pl":"https://cdn.21st.dev/larsen66/shimmer-text/default/preview.1773097724121.png","pc":"tom_ui"},{"id":"21st:tom_ui__slide-up-text","t":"Slide up text","d":"Text animation that reveals content by sliding words, characters, or lines up from the bottom with a staggered effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/slide-up-text/default/preview.1784658473642-57c9d23a-232a-4a1e-85f3-6c34523d2d75.png","pc":"tom_ui","tg":["text"]},{"id":"21st:tom_ui__special-text","t":"Special text","d":"Animated text with scramble effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","u":110,"pl":"https://cdn.21st.dev/larsen66/special-text/default/preview.1773097910792.png","pc":"tom_ui","tg":["text"]},{"id":"21st:tom_ui__spinner","t":"Spinner","d":"A loading spinner component with customizable size and color.","k":"component","s":"21st","c":"status/loader","g":"status","a":"tom_ui","st":"indexed","u":40,"pl":"https://cdn.21st.dev/larsen66/spinner/default/preview.1773097961305.png","pc":"tom_ui","tg":["spinner"]},{"id":"21st:tom_ui__text-marquee","t":"Text marquee","d":"Animated text marquee component with vertical scrolling.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"tom_ui","st":"indexed","u":68,"pl":"https://cdn.21st.dev/larsen66/text-marquee/default/preview.1773101075873.png","pc":"tom_ui","tg":["marquee","scroll-area"]},{"id":"21st:tom_ui__tilt-card","t":"Tilt card","d":"Interactive 3D tilt card with perspective hover effect and spotlight.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"tom_ui","st":"indexed","u":13,"pl":"https://cdn.21st.dev/tom_ui/tilt-card/default/preview.1776945185175.png","pc":"tom_ui","tg":["card"]},{"id":"21st:tom_ui__tweet","t":"Tweet","d":"Embed Twitter/X posts with custom styling.","k":"component","s":"21st","c":"other","g":"other","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/tweet/default/preview.1773101178531.png","pc":"tom_ui"},{"id":"21st:tom_ui__words-stagger","t":"Words stagger","d":"Word-by-word text reveal animation that staggers each word in with blur, upward transform, and opacity for an elegant entrance effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"tom_ui","st":"indexed","pl":"https://cdn.21st.dev/tom_ui/words-stagger/default/preview.1784824014129-300d52b5-6ab4-483e-a562-8929c722e604.png","pc":"tom_ui"},{"id":"21st:tommyjepsen__animated-hero","t":"Animated hero","d":"Animated hero with text and two shadcn/ui buttons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tommyjepsen","st":"indexed","u":3972,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/animated-hero.png","pc":"tommyjepsen","tg":["cta","hero"]},{"id":"21st:tommyjepsen__blog-section","t":"Blog section","d":"Blog Section with 4 cards","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"tommyjepsen","st":"indexed","u":83,"pl":"https://cdn.21st.dev/user_tommyjepsen/blog-section.png","pc":"tommyjepsen","tg":["grid"]},{"id":"21st:tommyjepsen__blog-section-with-rich-preview","t":"Blog section with rich preview","d":"Blog Section with Rich Preview","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"tommyjepsen","st":"indexed","u":100,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/blog-section-with-rich-preview.png","pc":"tommyjepsen","tg":["avatar","grid"]},{"id":"21st:tommyjepsen__call-to-action","t":"Call to action","d":"Call to action block for landing page","k":"component","s":"21st","c":"actions/button","g":"actions","a":"tommyjepsen","st":"indexed","u":476,"pl":"https://cdn.21st.dev/user_tommyjepsen/call-to-action.png","pc":"tommyjepsen","tg":["badge","button","cta"]},{"id":"21st:tommyjepsen__cases-with-infinite-scroll","t":"Cases with infinite scroll","d":"Cases with a carousel of images, suitable for clients, partners, or integration.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"tommyjepsen","st":"indexed","u":420,"pl":"https://cdn.21st.dev/user_tommyjepsen/cases-with-infinite-scroll.png","pc":"tommyjepsen","tg":["carousel","clients","marquee","scroll-area"]},{"id":"21st:tommyjepsen__faq-section","t":"Faq section","d":"FAQ Section","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"tommyjepsen","st":"indexed","u":254,"pl":"https://cdn.21st.dev/user_tommyjepsen/faq-section.png","pc":"tommyjepsen","tg":["accordion","faq"]},{"id":"21st:tommyjepsen__feature","t":"Feature","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"tommyjepsen","st":"indexed","pl":"https://cdn.21st.dev/user_tommyjepsen/feature.png","pc":"tommyjepsen","tg":["badge","features"]},{"id":"21st:tommyjepsen__feature-section-with-bento-grid","t":"Feature section with bento grid","d":"Feature Section with Bento Grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"tommyjepsen","st":"indexed","u":528,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/feature-section-with-bento-grid.png","pc":"tommyjepsen","tg":["card","features","grid","icon"]},{"id":"21st:tommyjepsen__feature-section-with-grid","t":"Feature section with grid","d":"Feature Section with Grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"tommyjepsen","st":"indexed","u":332,"pl":"https://cdn.21st.dev/user_tommyjepsen/feature-section-with-grid.png","pc":"tommyjepsen","tg":["features","grid"]},{"id":"21st:tommyjepsen__feature-with-advantages","t":"Feature with advantages","d":"Feature section with list of advantages","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"tommyjepsen","st":"indexed","pl":"https://cdn.21st.dev/user_tommyjepsen/feature-with-advantages.png","pc":"tommyjepsen","tg":["badge","features"]},{"id":"21st:tommyjepsen__feature-with-image","t":"Feature with image","d":"Feature block with image and text","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tommyjepsen","st":"indexed","u":192,"pl":"https://cdn.21st.dev/user_tommyjepsen/feature-with-image.png","pc":"tommyjepsen","tg":["badge","features","image"]},{"id":"21st:tommyjepsen__feature-with-image-carousel","t":"Feature with image carousel","d":"Feature block with Image Carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"tommyjepsen","st":"indexed","u":265,"pl":"https://cdn.21st.dev/user_tommyjepsen/feature-with-image-carousel.png","pc":"tommyjepsen","tg":["carousel","features","gallery"]},{"id":"21st:tommyjepsen__feature-with-image-comparison","t":"Feature with image comparison","d":"Feature block with Image Comparison","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tommyjepsen","st":"indexed","u":536,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/feature-with-image-comparison.png","pc":"tommyjepsen","tg":["features","image","slider"]},{"id":"21st:tommyjepsen__header","t":"Header","d":"Header with shadcn navigation menu and buttons","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"tommyjepsen","st":"indexed","u":1255,"pl":"https://cdn.21st.dev/user_tommyjepsen/header.png","pc":"tommyjepsen","tg":["dropdown","navigation-menu"]},{"id":"21st:tommyjepsen__hero-with-group-of-images-text-and-two-buttons","t":"Hero with group of images text and two buttons","d":"Hero with group of images, text and two shadcn/ui buttons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tommyjepsen","st":"indexed","u":472,"pl":"https://cdn.21st.dev/user_tommyjepsen/hero-with-group-of-images-text-and-two-buttons.png","pc":"tommyjepsen","tg":["badge","cta","hero"]},{"id":"21st:tommyjepsen__hero-with-image-text-and-two-buttons","t":"Hero with image text and two buttons","d":"Hero with image, text and two shadcn/ui buttons","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tommyjepsen","st":"indexed","u":414,"pl":"https://cdn.21st.dev/user_tommyjepsen/hero-with-image-text-and-two-buttons.png","pc":"tommyjepsen","tg":["badge","cta","hero","image"]},{"id":"21st:tommyjepsen__hero-with-text-and-two-button","t":"Hero with text and two button","d":"Hero section with text and two button","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tommyjepsen","st":"indexed","u":269,"pl":"https://cdn.21st.dev/user_tommyjepsen/hero-with-text-and-two-button.png","pc":"tommyjepsen","tg":["cta","hero"]},{"id":"21st:tommyjepsen__pricing-cards","t":"Pricing cards","d":"Pricing Cards","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"tommyjepsen","st":"indexed","u":428,"pl":"https://cdn.21st.dev/user_tommyjepsen/pricing-cards.png","pc":"tommyjepsen","tg":["pricing-section","table"]},{"id":"21st:tommyjepsen__pricing-section-with-comparison","t":"Pricing section with comparison","d":"Pricing Section with Comparison","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"tommyjepsen","st":"indexed","u":412,"pl":"https://cdn.21st.dev/user_tommyjepsen/pricing-section-with-comparison.png","pc":"tommyjepsen","tg":["comparison","pricing-section","table"]},{"id":"21st:tommyjepsen__stats-section","t":"Stats section","d":"Stats Section","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"tommyjepsen","st":"indexed","pl":"https://cdn.21st.dev/user_tommyjepsen/stats-section.png","pc":"tommyjepsen"},{"id":"21st:tommyjepsen__stats-section-with-text","t":"Stats section with text","d":"Statistics Section with Text","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"tommyjepsen","st":"indexed","u":99,"pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/stats-section-with-text.png","pc":"tommyjepsen","tg":["badge","card","features","grid"]},{"id":"21st:tommyjepsen__testimonials","t":"Testimonials","d":"Testimonials with a carousel of reviews","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"tommyjepsen","st":"indexed","u":371,"pl":"https://cdn.21st.dev/user_tommyjepsen/testimonials.png","pc":"tommyjepsen","tg":["carousel","testimonials"]},{"id":"21st:tonyzebastian__comet-hero","t":"Comet hero","d":"An animated SVG component recreating the swirling line animation from the Perplexity Comet download page. Features four 3D-rotated circles with gradient strokes (teal, orange, rose","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"tonyzebastian","st":"indexed","u":17,"pl":"https://cdn.21st.dev/tonyzebastian/comet-hero/default/preview.1759509986723.png","pc":"tonyzebastian"},{"id":"21st:tonyzebastian__image-loading","t":"Image loading","d":"A customizable image loader component that displays an animated grid overlay while the image loads. The grid cells blink initially, then fill with colors sampled from the image, ex","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tonyzebastian","st":"indexed","u":96,"pl":"https://cdn.21st.dev/tonyzebastian/image-loading/default/preview.1760982300022.png","pc":"tonyzebastian","tg":["image","spinner"]},{"id":"21st:tonyzebastian__image-sphere","t":"Image sphere","d":"A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tonyzebastian","st":"indexed","u":190,"pl":"https://cdn.21st.dev/tonyzebastian/image-sphere/default/preview.1758824150622.png","pc":"tonyzebastian","tg":["gallery"]},{"id":"21st:tonyzebastian__image-spotlight","t":"Image spotlight","d":"A React TypeScript component that creates an engaging spotlight effect on images.. The image appears blurred by default, but reveals sharp details in a circular area that follows t","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tonyzebastian","st":"indexed","u":22,"pl":"https://cdn.21st.dev/tonyzebastian/image-spotlight/default/preview.1758781908783.png","pc":"tonyzebastian","tg":["cursor","gallery","image"]},{"id":"21st:tonyzebastian__image-stack","t":"Image stack","d":"An interactive image stack component that displays images in a fanned-out card layout with smooth drag-to-cycle functionality. Built with React, Motion, and Next.js Image optimizat","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tonyzebastian","st":"indexed","u":22,"pl":"https://cdn.21st.dev/tonyzebastian/image-stack/default/preview.1758733431541.png","pc":"tonyzebastian","tg":["gallery","image"]},{"id":"21st:tonyzebastian__image-tiles","t":"Image tiles","d":"A playful image layout that tiles three photos in a staggered row and animates them on hover, perfect for showcasing your personality or a quick visual story.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"tonyzebastian","st":"indexed","u":130,"pl":"https://cdn.21st.dev/tonyzebastian/image-tiles/default/preview.1758643296110.png","pc":"tonyzebastian","tg":["gallery","image"]},{"id":"21st:tonyzebastian__img-sphere","t":"Img sphere","d":"A React TypeScript component that displays images arranged in a 3D sphere layout. Images are distributed using Fibonacci sphere distribution for optimal coverage. Supports drag-to-","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"tonyzebastian","st":"indexed","u":460,"pl":"https://cdn.21st.dev/tonyzebastian/img-sphere/default/preview.1762353416349.png","pc":"tonyzebastian","tg":["gallery","modal"]},{"id":"21st:tool-ui__citation","t":"Citation","d":"Displays a source reference card with title, domain, favicon, author, and text snippet for citing external sources, with default, inline, and stacked list variants.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"tool-ui","st":"indexed","pl":"https://cdn.21st.dev/tool-ui/citation/default/preview.1783718754552.png","pc":"tool-ui"},{"id":"21st:tool-ui__message-draft","t":"Message draft","d":"A review card that shows a drafted email or Slack message with Send/Cancel actions and an undo grace period before it sends.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"tool-ui","st":"indexed","pl":"https://cdn.21st.dev/tool-ui/message-draft/default/preview.1784287161835-91082535-1cba-4005-9b64-e957e449824a.png","pc":"tool-ui","tg":["ai-chat"]},{"id":"21st:tool-ui__progress-tracker","t":"Progress tracker","d":"A multi-step progress tracker that shows real-time status (pending, in-progress, completed, failed) for each step of an operation, with an elapsed-time badge and a receipt summary ","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"tool-ui","st":"indexed","pl":"https://cdn.21st.dev/tool-ui/progress-tracker/default/preview.1784369377164-aeedae09-6244-4af6-b5c7-3469a3281ef1.png","pc":"tool-ui"},{"id":"21st:tr.aitbaha__barcodescaninput","t":"Barcodescaninput","d":"Auto-focusing barcode input for hardware scanners (keyboard-wedge): captures the scanned code on Enter and fires onScan, refocusing for rapid back-to-back scans. Works for manual e","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"tr.aitbaha","st":"indexed","pl":"https://21st.dev/@tr.aitbaha/components/barcodescaninput","pc":"tr.aitbaha"},{"id":"21st:trantionisme__table","t":"Table","d":"customized table","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"trantionisme","st":"indexed","pl":"https://cdn.21st.dev/trantionisme/table/default/preview.1754203820188.png","pc":"trantionisme"},{"id":"21st:tricra18__study-chart","t":"Study chart","d":"A nice circle chart for study or success lookup","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"tricra18","st":"indexed","pl":"https://cdn.21st.dev/tricra18/study-chart/default/preview.1762429807904.png","pc":"tricra18"},{"id":"21st:tristanobernardelli__smoke-ring-solar-shader","t":"Smoke ring solar shader","d":"Animated WebGL shader background in the Smoke Ring style. Solar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#10","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"tristanobernardelli","st":"indexed","pl":"https://cdn.21st.dev/tristanobernardelli/smoke-ring-solar-shader/default/preview.1785696325291-6438a6fa-97ea-4d29-a814-af85d74c1c85.webp","pc":"tristanobernardelli"},{"id":"21st:trophyso__achievement-badge","t":"Achievement badge","d":"This is achievement badge","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"trophyso","st":"rated","u":6,"pl":"https://cdn.21st.dev/larsen66/achievement-badge/default/preview.1779967238976.png","pc":"trophyso","tg":["progress"],"sc":23},{"id":"21st:trophyso__achievement-badge--badgesizes","t":"Badgesizes","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/achievement-badge/badgesizes/preview.1779967238976.png","pc":"trophyso"},{"id":"21st:trophyso__achievement-badge--clickable-achievement","t":"Clickable achievement","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/achievement-badge/clickable-achievement/preview.1779967238976.png","pc":"trophyso"},{"id":"21st:trophyso__achievement-badge--rarity","t":"Rarity","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/achievement-badge/rarity/preview.1779967238976.png","pc":"trophyso"},{"id":"21st:trophyso__achievement-badge--series-progress","t":"Series progress","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/achievement-badge/series-progress/preview.1779967238976.png","pc":"trophyso"},{"id":"21st:trophyso__achievement-card","t":"Achievement card","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/achievement-card/default/preview.1779970734613.png","pc":"trophyso","tg":["badge","card","list","progress"]},{"id":"21st:trophyso__achievement-grid","t":"Achievement grid","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/achievement-grid/default/preview.1779973004318.png","pc":"trophyso","tg":["badge","grid"],"sc":20},{"id":"21st:trophyso__achievement-list","t":"Achievement list","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/achievement-list/default/preview.1779974055123.png","pc":"trophyso","tg":["badge","list","progress"],"sc":23},{"id":"21st:trophyso__achievement-unlocked","t":"Achievement unlocked","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/achievement-unlocked/default/preview.1779975012777.png","pc":"trophyso","tg":["notification","toast"],"sc":23},{"id":"21st:trophyso__leaderboard-card","t":"Leaderboard card","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","u":22,"pl":"https://cdn.21st.dev/larsen66/leaderboard-card/default/preview.1779976435096.png","pc":"trophyso","tg":["avatar","card","pagination","table"]},{"id":"21st:trophyso__leaderboard-podium","t":"Leaderboard podium","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/leaderboard-podium/default/preview.1779977401977.png","pc":"trophyso","tg":["badge","avatar"]},{"id":"21st:trophyso__leaderboard-rankings","t":"Leaderboard rankings","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/leaderboard-rankings/default/preview.1779978256047.png","pc":"trophyso","tg":["avatar","list"]},{"id":"21st:trophyso__points-awards","t":"Points awards","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"trophyso","st":"rated","u":3,"pl":"https://cdn.21st.dev/larsen66/points-awards/default/preview.1779985996522.png","pc":"trophyso","tg":["list","stat"],"sc":23},{"id":"21st:trophyso__points-badge","t":"Points badge","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"trophyso","st":"rated","u":3,"pl":"https://cdn.21st.dev/larsen66/points-badge/default/preview.1779986391503.png","pc":"trophyso","tg":["badge","icon","number"],"sc":20},{"id":"21st:trophyso__points-boost","t":"Points boost","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/points-boost/default/preview.1779987351160.png","pc":"trophyso","tg":["badge","card","cta"],"sc":23},{"id":"21st:trophyso__points-chart","t":"Points chart","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","pl":"https://cdn.21st.dev/larsen66/points-chart/default/preview.1779987933400.png","pc":"trophyso","tg":["data-visualization"]},{"id":"21st:trophyso__points-levels-list","t":"Points levels list","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/points-levels-list/default/preview.1779988801192.png","pc":"trophyso","tg":["list"],"sc":23},{"id":"21st:trophyso__points-levels-timeline","t":"Points levels timeline","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"trophyso","st":"rated","u":5,"pl":"https://cdn.21st.dev/larsen66/points-levels-timeline/default/preview.1779989725311.png","pc":"trophyso","tg":["progress","timeline"],"sc":19},{"id":"21st:trophyso__streak-badge","t":"Streak badge","k":"component","s":"21st","c":"data-display/gamification","g":"data-display","a":"trophyso","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/streak-badge/default/preview.1779990287189.png","pc":"trophyso","tg":["badge","stat"]},{"id":"21st:trophyso__streak-calendar","t":"Streak calendar","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/streak-calendar/default/preview.1779991512290.png","pc":"trophyso","tg":["calendar"],"sc":19},{"id":"21st:trophyso__streak-card","t":"Streak card","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"trophyso","st":"rated","pl":"https://cdn.21st.dev/larsen66/streak-card/default/preview.1779993502084.png","pc":"trophyso","tg":["card","progress","stat"],"sc":23},{"id":"21st:tungdang9888__aircraft-cabin","t":"Aircraft cabin","d":"Animated (flicker) ASCII art in the Matrix style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a retro look. A drop-in, zero-dependency React compo","k":"component","s":"21st","c":"media/player","g":"media","a":"tungdang9888","st":"indexed","pl":"https://cdn.21st.dev/tungdang9888/aircraft-cabin/default/preview.1784024477264.webp","pc":"tungdang9888","tg":["video"]},{"id":"21st:tungdang9888__neon-mosaic","t":"Neon mosaic","d":"Animated (flicker) ASCII art in the Matrix style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"component","s":"21st","c":"media/player","g":"media","a":"tungdang9888","st":"indexed","pl":"https://cdn.21st.dev/tungdang9888/neon-mosaic/default/preview.1784024520790.webp","pc":"tungdang9888","tg":["video"]},{"id":"21st:udinhakim98__g4l1l30-os-command-center","t":"G4l1l30 os command center","d":"Private AI Agent Command Center dashboard for mission control, agent orchestration, vault brain status, money validation, capture routing, and internal generation docks.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"udinhakim98","st":"indexed","pl":"https://21st.dev/@udinhakim98/components/g4l1l30-os-command-center","pc":"udinhakim98"},{"id":"21st:udinhakim98__viralcraft-command-center","t":"Viralcraft command center","d":"Framer Motion command center for the Obsidian-backed VIRALCRAFT founder dashboard.","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"udinhakim98","st":"indexed","pl":"https://21st.dev/@udinhakim98/components/viralcraft-command-center","pc":"udinhakim98"},{"id":"21st:ugahpraiseaudu__pricingtier","t":"Pricingtier","d":"Linear/Vercel-style pricing tier card with real hierarchy: the popular tier lifts on desktop, picks up a gold border + Most Popular badge, and is the only one with a filled CTA — o","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"ugahpraiseaudu","st":"indexed","pl":"https://21st.dev/@ugahpraiseaudu/components/pricingtier","pc":"ugahpraiseaudu"},{"id":"21st:ugahpraiseaudu__statcard","t":"Statcard","d":"Flat Linear-style stat card with optional Lucide icon and a 5-color accent palette (navy/gold/emerald/red/muted). Framed or inline modes. Use for dashboard summary strips and KPI t","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ugahpraiseaudu","st":"indexed","pl":"https://21st.dev/@ugahpraiseaudu/components/statcard","pc":"ugahpraiseaudu"},{"id":"21st:ugahpraiseaudu__statusbadge","t":"Statusbadge","d":"Order/process status pill with soft tint + matching ring + readable foreground. Renders snake_case statuses with spaces. Use for order tables and detail headers — flat, no gradient","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"ugahpraiseaudu","st":"indexed","pl":"https://21st.dev/@ugahpraiseaudu/components/statusbadge","pc":"ugahpraiseaudu"},{"id":"21st:uiable__empty-background","t":"Empty background","d":"An empty state placeholder with a muted background surface, icon, title, description and refresh action for pages or panels with no content.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"uiable","st":"indexed","u":98,"pl":"https://cdn.21st.dev/uiable/empty-background/default/preview.1784710202666-b46a9c58-534c-43ed-9eb4-cffefa81c320.png","pc":"uiable","tg":["empty-state","icon","notification"]},{"id":"21st:uiable__uiable-breadcrumb-icon","t":"Uiable breadcrumb icon","d":"A breadcrumb navigation trail that uses an icon for the home link instead of a text label.","k":"component","s":"21st","c":"media/icon","g":"media","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-breadcrumb-icon/default/preview.1784426504737-31e09d14-4190-49de-840b-9eca7da7c487.png","pc":"uiable"},{"id":"21st:uiable__uiable-breadcrumb-link","t":"Uiable breadcrumb link","d":"A breadcrumb navigation trail whose items render as Next.js links, with a chevron separator and a current-page label.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-breadcrumb-link/default/preview.1783581526798.png","pc":"uiable"},{"id":"21st:uiable__uiable-breadcrumb-page-header","t":"Uiable breadcrumb page header","d":"A page header block that pairs a breadcrumb trail with the current page title in a rounded, shadowed card.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-breadcrumb-page-header/default/preview.1784488136357-79f84713-7e59-4fda-a9c2-4fc54a905293.png","pc":"uiable"},{"id":"21st:uiable__uiable-sidebar-1","t":"Uiable sidebar 1","d":"A searchable component navigation sidebar with grouped, scrollable sections and item counts.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"uiable","st":"indexed","u":9,"pl":"https://cdn.21st.dev/uiable/uiable-sidebar-1/default/preview.1783730726986.png","pc":"uiable","tg":["scroll-area","search","sidebar"]},{"id":"21st:uiable__uiable-skeleton-card","t":"Uiable skeleton card","d":"A loading placeholder card with skeleton lines and a media block for content that is still fetching.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uiable","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uiable/uiable-skeleton-card/default/preview.1784366526448-a3013232-a3af-40e1-b1ab-5664553b5584.png","pc":"uiable"},{"id":"21st:uiable__uiable-skeleton-table","t":"Uiable skeleton table","d":"A loading placeholder skeleton that mimics a data table with rows and columns while content is fetching.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-skeleton-table/default/preview.1784354259065-5798f470-ee88-481f-8998-feabb920f8e7.png","pc":"uiable","tg":["spinner","table"]},{"id":"21st:uiable__uiable-skeleton-text","t":"Uiable skeleton text","d":"A text placeholder skeleton with stacked lines to show a loading state for paragraphs of content.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uiable","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uiable/uiable-skeleton-text/default/preview.1784365025858-aeadd710-049b-462e-ab5e-4f893ac37ede.png","pc":"uiable","tg":["spinner","text"]},{"id":"21st:uiable__uiable-sonner-position","t":"Uiable sonner position","d":"A set of buttons that trigger sonner toast notifications in each of the six screen positions.","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-sonner-position/default/preview.1786705786074-3a207a10-b24e-4e5f-b2d8-002a767b294d.png","pc":"uiable","tg":["notification","toast"]},{"id":"21st:uiable__uiable-spinner-border-danger","t":"Uiable spinner border danger","d":"A circular border loading spinner in a destructive/danger color for indicating in-progress states.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-spinner-border-danger/default/preview.1784367969294-6ad56fac-c6df-4c9e-b924-e2abf56a6d7d.png","pc":"uiable"},{"id":"21st:uiable__uiable-spinner-border-success","t":"Uiable spinner border success","d":"An animated circular border spinner in a green success color to indicate loading states.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-spinner-border-success/default/preview.1784666455108-34a81dde-6dff-4717-b9bb-0646e1a45bd0.png","pc":"uiable"},{"id":"21st:uiable__uiable-spinner-border-warning","t":"Uiable spinner border warning","d":"A circular loading spinner with a yellow warning-colored border that rotates to indicate a pending state.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-spinner-border-warning/default/preview.1784369334177-8e26fc7f-df31-4c5d-9f2a-0e888284aa6b.png","pc":"uiable"},{"id":"21st:uiable__uiable-spinner-button","t":"Uiable spinner button","d":"A button in loading state with an animated circular spinner, for indicating progress during form submission or async actions.","k":"component","s":"21st","c":"status/loader","g":"status","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-spinner-button/default/preview.1784762340588-20f81c51-1445-43e2-a83b-0066c5f5e96b.png","pc":"uiable"},{"id":"21st:uiable__uiable-spinner-growing-info","t":"Uiable spinner growing info","k":"component","s":"21st","c":"status/loader","g":"status","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-spinner-growing-info/default/preview.1784666441611-f6389446-c4d0-4080-807e-42463134a9d1.png","pc":"uiable"},{"id":"21st:uiable__uiable-typography-blockquote","t":"Uiable typography blockquote","d":"A styled blockquote for quotations with a left border and italic text, following typography conventions.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-typography-blockquote/default/preview.1784412069657-5c38f636-32c2-4631-8ee9-605c7ac81293.png","pc":"uiable","tg":["border"]},{"id":"21st:uiable__uiable-typography-inline-code","t":"Uiable typography inline code","d":"Inline code snippet styled with a monospace font and muted background for use within body text.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-typography-inline-code/default/preview.1784390670606-9f40349c-cac0-4088-a3ab-15f9349cad11.png","pc":"uiable"},{"id":"21st:uiable__uiable-typography-p","t":"Uiable typography p","d":"A styled paragraph text element with balanced line height for readable body copy.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uiable","st":"indexed","pl":"https://cdn.21st.dev/uiable/uiable-typography-p/default/preview.1783719740641.png","pc":"uiable","tg":["text"]},{"id":"21st:uiable__uiable-typography-small","t":"Uiable typography small","d":"A small typography element for rendering muted helper text, form field labels, and fine print.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uiable","st":"indexed","u":4,"pl":"https://cdn.21st.dev/uiable/uiable-typography-small/default/preview.1784426543866-49de70a4-dd4f-4bb9-a265-425e001a92fd.png","pc":"uiable"},{"id":"21st:uicapsule__ascii-renderer","t":"Ascii renderer","d":"A 3D scene rendered as live ASCII art using Three.js, with an animated rotating torus knot and orbit controls.","k":"component","s":"21st","c":"other","g":"other","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/ascii-renderer/default/preview.1783578375977.png","pc":"uicapsule"},{"id":"21st:uicapsule__background-pixel-stars","t":"Background pixel stars","d":"An animated fullscreen canvas background of twinkling retro pixel stars with periodic pixelated shooting stars.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uicapsule","st":"indexed","u":5,"pl":"https://cdn.21st.dev/uicapsule/background-pixel-stars/default/preview.1783581843955.png","pc":"uicapsule","tg":["background"]},{"id":"21st:uicapsule__background-shapes","t":"Background shapes","d":"An SVG background that fills a mirrored grid with randomly changing geometric cells (lines, circles, squares) for an animated decorative backdrop.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/background-shapes/default/preview.1783581604750.png","pc":"uicapsule","tg":["grid"]},{"id":"21st:uicapsule__geometric-orb","t":"Geometric orb","d":"An animated 3D wireframe sphere with flowing latitude lines and depth-based opacity, built on React Three Fiber.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/geometric-orb/default/preview.1783583123646.png","pc":"uicapsule"},{"id":"21st:uicapsule__gradient-orb","t":"Gradient orb","d":"An animated glowing gradient orb rendered on the GPU with a WebGL shader, featuring noise-based color mixing, hue rotation, and a breathing pulse.","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/gradient-orb/default/preview.1783580138147.png","pc":"uicapsule"},{"id":"21st:uicapsule__infinite-grid","t":"Infinite grid","d":"A draggable, infinitely-scrolling grid canvas that renders custom items in an expanding spiral with momentum-based panning and inertia.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/infinite-grid/default/preview.1783580559316.png","pc":"uicapsule"},{"id":"21st:uicapsule__spinner-pixel-grid","t":"Spinner pixel grid","d":"An animated pixel-grid loading spinner with 20+ motion variants, square or circle dots, optional neon glow and rainbow hue cycling.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/spinner-pixel-grid/default/preview.1785455495641-b55f0c5e-bdb7-42ea-a173-8dca2065d33d.png","pc":"uicapsule"},{"id":"21st:uicapsule__voice-dictator","t":"Voice dictator","d":"An animated voice dictation interface with a WebGL dithered waveform orb that pulses while a live transcript streams in.","k":"component","s":"21st","c":"ai-agent","g":"ai-agent","a":"uicapsule","st":"indexed","pl":"https://cdn.21st.dev/uicapsule/voice-dictator/default/preview.1784285260309-39d9898d-ffaa-45b0-8ba3-caba15a2fb91.png","pc":"uicapsule"},{"id":"21st:uilayout.contact__about-section","t":"About section","d":"Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts","k":"component","s":"21st","c":"actions/link","g":"actions","a":"uilayout.contact","st":"indexed","u":353,"pl":"https://cdn.21st.dev/uilayout.contact/about-section/default/preview.1756307545057.png","pc":"uilayout.contact","tg":["cta","link"]},{"id":"21st:uilayout.contact__about-section-1","t":"About section 1","d":"Professional about section components featuring company stories, team showcases, mission statements, and brand narratives with elegant animations and responsive layouts","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"uilayout.contact","st":"indexed","u":73,"pl":"https://cdn.21st.dev/uilayout.contact/about-section-1/default/preview.1756308458044.png","pc":"uilayout.contact","tg":["team"]},{"id":"21st:uilayout.contact__about-whyus","t":"About whyus","d":"An about / why-us marketing section with feature highlights, a five-star testimonial, and statistic cards.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/about-whyus/default/preview.1784695576466-12f76122-59bb-46f5-99ae-0f1a6e1ff240.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__advanced-stats","t":"Advanced stats","d":"Analytics dashboard stats section with an animated area chart, KPI cards, and scroll-triggered timeline reveals.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"uilayout.contact","st":"indexed","u":21,"pl":"https://cdn.21st.dev/uilayout.contact/advanced-stats/default/preview.1783677974362.png","pc":"uilayout.contact","tg":["card","dashboard","progress","stat"]},{"id":"21st:uilayout.contact__arrow-cursor","t":"Arrow cursor","d":"Here is arrow cursor demo component","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/arrow-cursor/default/preview.1750164028038.png","pc":"uilayout.contact","tg":["cursor"]},{"id":"21st:uilayout.contact__autoscroll-slider","t":"Autoscroll slider","d":"An infinite auto-scrolling carousel that continuously loops through slides using Embla and pauses on hover.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/autoscroll-slider/default/preview.1784438380016-27d07aeb-3e75-4c11-9df3-218e6a681af1.png","pc":"uilayout.contact","tg":["carousel","scroll-area"]},{"id":"21st:uilayout.contact__button-1","t":"Button 1","d":"Here is modern liquid animated button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","u":169,"pl":"https://cdn.21st.dev/larsen66/button-1/default/preview.1749987380457.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__button-2","t":"Button 2","d":" Here is hover shiny button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/button-2/default/preview.1750156144427.png","pc":"uilayout.contact","tg":["button"]},{"id":"21st:uilayout.contact__button-3","t":"Button 3","d":"Here is hover animated button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/button-3/default/preview.1750156265824.png","pc":"uilayout.contact","tg":["button"]},{"id":"21st:uilayout.contact__button-4","t":"Button 4","d":"Here is animated button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-4/default/preview.1750156338712.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__button-5","t":"Button 5","d":"Here is animated hover button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","u":29,"pl":"https://cdn.21st.dev/larsen66/button-5/default/preview.1750156534439.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__button-6","t":"Button 6","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-6/default/preview.1750156603520.png","pc":"uilayout.contact","tg":["button"]},{"id":"21st:uilayout.contact__button-7","t":"Button 7","d":"Here is animated interactive button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-7/default/preview.1750163567933.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__button-magnetic","t":"Button magnetic","d":"Here is hover magnetic button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/button-magnetic/default/preview.1750163905254.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__buyme-acoffee","t":"Buyme acoffee","d":"An animated \"Buy Me a Coffee\" sponsorship card with a playful hover reveal, ideal for creators collecting support and donations.","k":"component","s":"21st","c":"other","g":"other","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/buyme-acoffee/default/preview.1783574740422.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__card-hover","t":"Card hover","d":"Here is modern animated hover card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card-hover/default/preview.1749991448104.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__card-hover-2","t":"Card hover 2","d":"Here is hover card component","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/card-hover-2/default/preview.1749992924518.png","pc":"uilayout.contact","tg":["profile"]},{"id":"21st:uilayout.contact__chat-form-dropzone","t":"Chat form dropzone","d":"A chat message input with an attached image dropzone that previews selected files as thumbnails inline.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"uilayout.contact","st":"indexed","u":3,"pl":"https://cdn.21st.dev/uilayout.contact/chat-form-dropzone/default/preview.1784477519811-99818b6b-593f-4e1d-b48a-9748e064f9b5.png","pc":"uilayout.contact","tg":["input","upload-download"]},{"id":"21st:uilayout.contact__clip-path-image","t":"Clip path image","d":"An image component with a custom clip-path, creating unique shapes and dynamic visual effects","k":"component","s":"21st","c":"media/player","g":"media","a":"uilayout.contact","st":"indexed","u":36,"pl":"https://cdn.21st.dev/larsen66/clip-path-image/default/preview.1749989658398.png","pc":"uilayout.contact","tg":["gallery","video"]},{"id":"21st:uilayout.contact__clipped-image","t":"Clipped image","d":"Here is component of clipped image components","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/clipped-image/default/preview.1749990072842.png","pc":"uilayout.contact","tg":["gallery"]},{"id":"21st:uilayout.contact__clipped-shape-image","t":"Clipped shape image","d":"An image component with a custom clip-path, creating unique shapes and dynamic visual effects","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/clipped-shape-image/default/preview.1749989889394.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__corporate-clippath","t":"Corporate clippath","d":"An image gallery that masks photos into corporate notched card shapes using SVG clipPath with a hover zoom effect.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uilayout.contact/corporate-clippath/default/preview.1783661804267.png","pc":"uilayout.contact","tg":["gallery"]},{"id":"21st:uilayout.contact__css-image-stacking","t":"Css image stacking","d":"A scroll-driven stacking cards effect where images pile up using CSS sticky positioning and smooth scrolling.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uilayout.contact/css-image-stacking/default/preview.1784465856579-8fcc2000-654f-4949-b8fd-05261ba51f88.png","pc":"uilayout.contact","tg":["gallery","image","scroll-area"]},{"id":"21st:uilayout.contact__cursor-follower","t":"Cursor follower","d":"Here is smooth follower cursor componentt","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","u":66,"pl":"https://cdn.21st.dev/larsen66/cursor-follower/default/preview.1750163551411.png","pc":"uilayout.contact","tg":["cursor"]},{"id":"21st:uilayout.contact__cursor-gradient","t":"Cursor gradient","d":"Here is gradient cursor effect","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/cursor-gradient/default/preview.1750164535566.png","pc":"uilayout.contact","tg":["cursor"]},{"id":"21st:uilayout.contact__customer-experience","t":"Customer experience","d":"An interactive experience section that reveals a floating preview image following the cursor as you hover over each list row.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uilayout.contact/customer-experience/default/preview.1784694452129-54d156ff-3613-46a0-8fe3-62774acc1ded.png","pc":"uilayout.contact","tg":["cursor","gallery","image"]},{"id":"21st:uilayout.contact__delicate-ascii-dots","t":"Delicate ascii dots","d":"Here is Delicate Ascii Dots component","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/delicate-ascii-dots/default/preview.1785303456143-eda3dac1-ff5d-4879-93c7-390034389e98.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__dot-particles","t":"Dot particles","d":"Here is Dot Particles component","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"uilayout.contact","st":"indexed","u":10,"pl":"https://cdn.21st.dev/larsen66/dot-particles/default/preview.1753375659820.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__dots-pattern","t":"Dots pattern","d":"Here is Dots Pattern component","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/dots-pattern/default/preview.1753374910252.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__feature-bento","t":"Feature bento","d":"A responsive bento-grid feature section with a hero card, stat tiles, and CTA blocks for product landing pages.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"uilayout.contact","st":"indexed","u":18,"pl":"https://cdn.21st.dev/uilayout.contact/feature-bento/default/preview.1784694435858-5e238130-2702-4426-9674-d4030b041661.png","pc":"uilayout.contact","tg":["cta","features","grid","stat"]},{"id":"21st:uilayout.contact__feature-hero","t":"Feature hero","d":"A centered hero section with heading, subtext, and a grid of icon-based feature cards highlighting product capabilities.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","u":4,"pl":"https://cdn.21st.dev/uilayout.contact/feature-hero/default/preview.1783645224682.png","pc":"uilayout.contact","tg":["ai-chat","features"]},{"id":"21st:uilayout.contact__feature-highlights","t":"Feature highlights","d":"A responsive three-column feature section highlighting product benefits with icons, titles, descriptions and a learn-more link.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/feature-highlights/default/preview.1784695642411-b5cbbd84-9e8e-4fdb-94d3-f5a0c7024693.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__feature-nature","t":"Feature nature","d":"A nature-themed feature section with a heading, intro text and a four-column grid of highlight cards, one of which is emphasized with a dark accent state.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/feature-nature/default/preview.1784694419061-8f00dc4e-5b76-4fb5-ba23-dcc548b8312f.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__feature-velocity","t":"Feature velocity","d":"Bold marketing feature section with an uppercase headline and hover-glow gradient cards that highlight product capabilities.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uilayout.contact/feature-velocity/default/preview.1784478693446-5981649a-0652-4cda-b35a-e0b65992f699.png","pc":"uilayout.contact","tg":["features"]},{"id":"21st:uilayout.contact__flowing-ribbons-effect","t":"Flowing ribbons effect","d":"Here is Flowing Ribbons Effect component","k":"component","s":"21st","c":"other","g":"other","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/flowing-ribbons-effect/default/preview.1753375943960.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__footer-bento","t":"Footer bento","d":"A bento-grid footer section with a call-to-action card, social links, newsletter signup, location, and legal links.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/footer-bento/default/preview.1784446502019-f982c202-b1f1-4764-be0f-309e16a2fe42.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__footer-bold","t":"Footer bold","d":"A large, typographic footer section with a contact call-to-action, location and social links, and an oversized brand wordmark.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/footer-bold/default/preview.1784432018163-9fd5e512-c8ef-4e3d-bd38-0cec39de5803.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__footer-detailed","t":"Footer detailed","d":"A large multi-column site footer with grouped navigation links, a brand block, legal links, and an inline newsletter email subscribe form.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/footer-detailed/default/preview.1784715683923-d08752fb-10e6-466b-90ed-4fc1c236a702.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__footer-privilege","t":"Footer privilege","d":"An editorial-style dark/light footer section with oversized display headings, a brand logo lockup, a contact call-to-action, and a copyright bar.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/footer-privilege/default/preview.1784420612970-ecc657a2-fdb2-4943-ad5d-b8f43d8ca3c2.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__footer-simple","t":"Footer simple","d":"A minimal responsive website footer with a brand wordmark, tagline, and grouped social and legal link columns with a copyright bar.","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/footer-simple/default/preview.1784419045701-21e09cfd-561a-4073-b1fa-a93356bda26d.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__framer-autoplay-carousel","t":"Framer autoplay carousel","d":"Autoplay carousel component powered by Framer Motion, featuring smooth animations and seamless transitions for an engaging slide experience. Perfect for creating dynamic image gall","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-autoplay-carousel/default/preview.1762533781378.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__framer-carousel","t":"Framer carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","u":157,"pl":"https://cdn.21st.dev/uilayout.contact/framer-carousel/default/preview.1762531071134.png","pc":"uilayout.contact","tg":["carousel","gallery","pagination"]},{"id":"21st:uilayout.contact__framer-draggable-carousel","t":"Framer draggable carousel","d":"A draggable carousel component powered by Framer Motion, featuring smooth animations and seamless transitions for an engaging slide experience. Perfect for creating dynamic image g","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-draggable-carousel/default/preview.1762532345713.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__framer-moveable-thumbnails","t":"Framer moveable thumbnails","d":"A draggable image carousel with an animated filmstrip of thumbnails where the active thumbnail expands to a wide aspect ratio.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-moveable-thumbnails/default/preview.1783680036722.png","pc":"uilayout.contact","tg":["carousel","gallery"]},{"id":"21st:uilayout.contact__framer-multi-carousel","t":"Framer multi carousel","d":"Framer Multi  Carousel component powered by Framer Motion, featuring smooth animations and seamless transitions for an engaging slide experience. Perfect for creating dynamic image","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-multi-carousel/default/preview.1762535499497.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__framer-normal-carousel","t":"Framer normal carousel","d":"An image carousel with spring-animated sliding, prev/next arrows, and a progress dot indicator built with Motion.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-normal-carousel/default/preview.1783679964264.png","pc":"uilayout.contact","tg":["carousel","gallery","slider"]},{"id":"21st:uilayout.contact__framer-thumbnail-carousel","t":"Framer thumbnail carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","u":32,"pl":"https://cdn.21st.dev/uilayout.contact/framer-thumbnail-carousel/default/preview.1761158817666.png","pc":"uilayout.contact","tg":["carousel","gallery","slider"]},{"id":"21st:uilayout.contact__framer-thumnbails","t":"Framer thumnbails","d":"A draggable image carousel with an animated thumbnail strip that expands the active thumbnail and auto-scrolls it into view.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/framer-thumnbails/default/preview.1783679915744.png","pc":"uilayout.contact","tg":["carousel","gallery"]},{"id":"21st:uilayout.contact__growth-plans","t":"Growth plans","d":"A three-tier SaaS pricing section with a monthly/yearly billing toggle and animated prices.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/growth-plans/default/preview.1784693416850-f4504338-0199-4332-be39-6e14d73ea490.png","pc":"uilayout.contact","tg":["pricing-section","table"]},{"id":"21st:uilayout.contact__hero-ai-value-proposition","t":"Hero ai value proposition","d":"A hero section that presents an AI product's value proposition with an animated headline, CTA, social proof avatars, and a dashboard mockup preview.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"uilayout.contact","st":"indexed","u":12,"pl":"https://cdn.21st.dev/uilayout.contact/hero-ai-value-proposition/default/preview.1783675630275.png","pc":"uilayout.contact","tg":["ai-chat"]},{"id":"21st:uilayout.contact__hero-financial","t":"Hero financial","d":"An animated financial SaaS hero section with a sticky nav, headline, CTA buttons, and a dashboard mockup that reveals on scroll.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uilayout.contact","st":"indexed","u":26,"pl":"https://cdn.21st.dev/uilayout.contact/hero-financial/default/preview.1783676977797.png","pc":"uilayout.contact","tg":["cta","hero"]},{"id":"21st:uilayout.contact__hero-scroll-animation","t":"Hero scroll animation","d":"Here is scroll animation in hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uilayout.contact","st":"indexed","u":207,"pl":"https://cdn.21st.dev/larsen66/hero-scroll-animation/default/preview.1749995627059.png","pc":"uilayout.contact","tg":["hero","scroll-area"]},{"id":"21st:uilayout.contact__hero-section","t":"Hero section","d":"Animated Blocks Hero","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","u":55,"pl":"https://cdn.21st.dev/uilayout.contact/hero-section/default/preview.1756285033845.png","pc":"uilayout.contact","tg":["features"]},{"id":"21st:uilayout.contact__horizontal-scroll","t":"Horizontal scroll","d":"A full-page scroll-driven section that translates a row of image panels horizontally as the user scrolls vertically.","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/horizontal-scroll/default/preview.1783575340322.png","pc":"uilayout.contact","tg":["comparison","image","scroll-area"]},{"id":"21st:uilayout.contact__image-mask","t":"Image mask","d":"Here is image mask component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":48,"pl":"https://cdn.21st.dev/larsen66/image-mask/default/preview.1749990277040.png","pc":"uilayout.contact","tg":["gallery","image"]},{"id":"21st:uilayout.contact__image-masking","t":"Image masking","d":"Here is image masking component ","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/image-masking/default/preview.1749990327253.png","pc":"uilayout.contact","tg":["gallery","image"]},{"id":"21st:uilayout.contact__image-masking-1","t":"Image masking 1","d":"Here is image masking componen","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/image-masking-1/default/preview.1749990425783.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__image-mousetrail-without-component","t":"Image mousetrail without component","d":"An interactive hero section that reveals a trail of images following the cursor as the mouse moves across the container.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayouts/image-mousetrail-without-component/default/preview.1783581492094.png","pc":"uilayout.contact","tg":["cursor","gallery"]},{"id":"21st:uilayout.contact__image-reveal","t":"Image reveal","d":"Here is image reveal component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":44,"pl":"https://cdn.21st.dev/larsen66/image-reveal/default/preview.1749993983553.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__imgpreview-dropzone","t":"Imgpreview dropzone","d":"A drag-and-drop file uploader that shows thumbnail previews of selected images with per-file remove controls.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/imgpreview-dropzone/default/preview.1784390692917-4ae54344-b41e-474e-a7f5-3c8a1fe4bad7.png","pc":"uilayout.contact","tg":["image","input","upload-download"]},{"id":"21st:uilayout.contact__impact-experience","t":"Impact experience","d":"A bold resume-style experience section listing companies, roles, and details with hover-reveal background imagery.","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"uilayout.contact","st":"indexed","u":2,"pl":"https://cdn.21st.dev/uilayout.contact/impact-experience/default/preview.1783645318431.png","pc":"uilayout.contact","tg":["timeline"]},{"id":"21st:uilayout.contact__infinity-brand","t":"Infinity brand","d":"Here is smooth component of inifiity brands","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"uilayout.contact","st":"indexed","u":12,"pl":"https://cdn.21st.dev/larsen66/infinity-brand/default/preview.1750164556628.png","pc":"uilayout.contact","tg":["marquee","scroll-area"]},{"id":"21st:uilayout.contact__linear-card","t":"Linear card","d":"Here is linear card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uilayout.contact","st":"indexed","u":31,"pl":"https://cdn.21st.dev/larsen66/linear-card/default/preview.1749994904078.png","pc":"uilayout.contact","tg":["card","gallery","image"]},{"id":"21st:uilayout.contact__liquid-glass-icons","t":"Liquid glass icons","d":"Liquid glass components inspired by apple and figma","k":"component","s":"21st","c":"media/icon","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/liquid-glass-icons/default/preview.1753516108180.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__liquid-weather-glass","t":"Liquid weather glass","d":"Liquid glass components inspired by apple and figma","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","u":152,"pl":"https://cdn.21st.dev/uilayout.contact/liquid-weather-glass/default/preview.1753517473442.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__mesh-gradient-background2","t":"Mesh gradient background2","d":"An animated full-screen mesh gradient background rendered with React Three Fiber shaders, using layered Perlin noise, turbulence, and postprocessing grain for a soft moving blob ef","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/mesh-gradient-background2/default/preview.1783572419723.png","pc":"uilayout.contact","tg":["background"]},{"id":"21st:uilayout.contact__mesh-gradient-background3","t":"Mesh gradient background3","d":"An animated full-screen mesh gradient background rendered with a Three.js Perlin-noise displaced blob and a configurable accent color.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/mesh-gradient-background3/default/preview.1783574253216.png","pc":"uilayout.contact","tg":["background"]},{"id":"21st:uilayout.contact__motion-drawer","t":"Motion drawer","d":"A motion drawer component for React with smooth Framer Motion animations. Functions as a collapsible navigation drawer on mobile and a persistent sidebar on desktop","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/motion-drawer/default/preview.1762536514709.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__motion-number","t":"Motion number","d":"Here is modern number motion component","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/motion-number/default/preview.1749987136926.png","pc":"uilayout.contact","tg":["number"]},{"id":"21st:uilayout.contact__motion-number-upvotes","t":"Motion number upvotes","d":"An animated upvote and downvote counter with smoothly transitioning numbers and color feedback on the active vote.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/motion-number-upvotes/default/preview.1784423727970-ee0af1b5-db16-4a5e-9e5d-98dab02d02a6.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__multi-accordion","t":"Multi accordion","d":"A flexible accordion component that allows multiple sections to stay open at the same time. Unlike a traditional accordion, where opening one section automatically closes the other","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"uilayout.contact","st":"indexed","u":18,"pl":"https://cdn.21st.dev/uilayout.contact/multi-accordion/default/preview.1756306752599.png","pc":"uilayout.contact","tg":["accordion","faq"]},{"id":"21st:uilayout.contact__multi-selector","t":"Multi selector","d":"Here is advanced multi selector component ","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"uilayout.contact","st":"rated","pl":"https://cdn.21st.dev/larsen66/multi-selector/default/preview.1749989233119.png","pc":"uilayout.contact","sc":23},{"id":"21st:uilayout.contact__number-flow-trading","t":"Number flow trading","d":"Animated trading price display that smoothly transitions the currency value and percentage change with a colored up/down indicator.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/number-flow-trading/default/preview.1784459397879-ce140e88-2b40-49ae-a356-613a3cfa813e.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__password-input","t":"Password input","d":"Here is simple minimalistic password input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/password-input/default/preview.1749987583971.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__password-input-1","t":"Password input 1","d":"Here is modern Password Input","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/password-input-1/default/preview.1749987683265.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__password-input-2","t":"Password input 2","d":"Here is advanced password inputt","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uilayout.contact","st":"indexed","u":54,"pl":"https://cdn.21st.dev/larsen66/password-input-2/default/preview.1749987752258.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__phone-input","t":"Phone input","d":"Here is advanced phone input component","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/phone-input/default/preview.1749988675072.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__portfolio-experience","t":"Portfolio experience","d":"A portfolio work-experience section that lists roles with company, timeline, position, location, tech stack, impact metrics, and detailed contributions.","k":"component","s":"21st","c":"data-viz/map","g":"data-viz","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/portfolio-experience/default/preview.1784821846102-e43e19bc-c797-41c1-88dc-15c402d8e804.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__pricing","t":"Pricing","d":"Professional pricing components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","u":275,"pl":"https://cdn.21st.dev/uilayout.contact/pricing/default/preview.1756283336120.png","pc":"uilayout.contact","tg":["comparison","pricing-section","table"]},{"id":"21st:uilayout.contact__pricing-overview","t":"Pricing overview","d":"A responsive pricing section with a monthly/yearly billing toggle, animated price counters, feature-listed plan cards, and a highlighted partnership plan.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/pricing-overview/default/preview.1784693400049-edf5449a-986d-48c0-bd4c-66355228d4cc.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__pricing-section","t":"Pricing section","d":"Professional pricing table components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purcha","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","u":279,"pl":"https://cdn.21st.dev/uilayout.contact/pricing-section/default/preview.1756271793787.png","pc":"uilayout.contact","tg":["comparison","pricing-section","table"]},{"id":"21st:uilayout.contact__pricing-section-1","t":"Pricing section 1","d":"Professional pricing section components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purc","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","u":91,"pl":"https://cdn.21st.dev/uilayout.contact/pricing-section-1/default/preview.1756275293665.png","pc":"uilayout.contact","tg":["pricing-section"]},{"id":"21st:uilayout.contact__pricing-section-3","t":"Pricing section 3","d":"Professional pricing components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","u":137,"pl":"https://cdn.21st.dev/uilayout.contact/pricing-section-3/default/preview.1756278842022.png","pc":"uilayout.contact","tg":["comparison","pricing-section","table"]},{"id":"21st:uilayout.contact__pricing-section-4","t":"Pricing section 4","d":"Professional pricing components featuring subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/pricing-section-4/default/preview.1756283776749.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__product-packs","t":"Product packs","d":"A two-tier pricing section comparing a free demo pack and a paid full pack, with feature rows and scroll-triggered blur-in animations.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uilayout.contact","st":"indexed","u":10,"pl":"https://cdn.21st.dev/uilayout.contact/product-packs/default/preview.1784753714160-cf9e4118-1f08-4df0-9907-21f9aee488a5.png","pc":"uilayout.contact","tg":["pricing-section","scroll-area","table"]},{"id":"21st:uilayout.contact__progressive-carousel","t":"Progressive carousel","k":"component","s":"21st","c":"media/carousel","g":"media","a":"uilayout.contact","st":"indexed","u":171,"pl":"https://cdn.21st.dev/uilayout.contact/progressive-carousel/default/preview.1756288335736.png","pc":"uilayout.contact","tg":["carousel","gallery","slider","tabs"]},{"id":"21st:uilayout.contact__r3f-blob","t":"R3f blob","d":"Here is R3F Blob","k":"component","s":"21st","c":"other","g":"other","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/r3f-blob/default/preview.1753194979487.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__scroll-animation","t":"Scroll animation","d":" Here is text scroll animation","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"uilayout.contact","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/scroll-animation/default/preview.1750118212763.png","pc":"uilayout.contact","tg":["scroll-area"]},{"id":"21st:uilayout.contact__scroll-card","t":"Scroll card","d":"Here is scrolling stacking card","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uilayout.contact","st":"indexed","u":95,"pl":"https://cdn.21st.dev/larsen66/scroll-card/default/preview.1749995222285.png","pc":"uilayout.contact","tg":["features","scroll-area"]},{"id":"21st:uilayout.contact__scroll-text-marquee","t":"Scroll text marquee","d":"A scroll-controlled text marquee whose speed and direction respond dynamically to scroll velocity for an interactive animated headline effect.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/scroll-text-marquee/default/preview.1784385426715-09a65e32-177f-4819-9726-11485eed1f96.png","pc":"uilayout.contact","tg":["marquee"]},{"id":"21st:uilayout.contact__shimmer-loader","t":"Shimmer loader","d":"An animated text shimmer loader that cycles through labels and icons with a moving highlight, percentage progress, and an optional token counter for loading states.","k":"component","s":"21st","c":"status/loader","g":"status","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/shimmer-loader/default/preview.1784696828656-fdfd88fc-c54c-42b3-9855-79daf5771428.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__sidebar-liquid-glass","t":"Sidebar liquid glass","d":"Liquid glass components inspired by apple and figma","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/sidebar-liquid-glass/default/preview.1753512145243.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__sliding-ease","t":"Sliding ease","d":"Here is Sliding Ease component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/sliding-ease/default/preview.1753375052654.png","pc":"uilayout.contact","tg":["background"]},{"id":"21st:uilayout.contact__smooth-scroll","t":"Smooth scroll","d":"Here is Smooth Scroll card","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"uilayout.contact","st":"indexed","u":113,"pl":"https://cdn.21st.dev/larsen66/smooth-scroll/default/preview.1749995378617.png","pc":"uilayout.contact","tg":["grid","scroll-area"]},{"id":"21st:uilayout.contact__smooth-wavy-canvas","t":"Smooth wavy canvas","d":"Here is Smooth Wavy Canvas component","k":"component","s":"21st","c":"other","g":"other","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/smooth-wavy-canvas/default/preview.1753375792948.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__splashwater-videomasking","t":"Splashwater videomasking","d":"A video element clipped with an SVG mask so footage plays inside a splash-water shape, for creative hero and showcase sections.","k":"component","s":"21st","c":"media/player","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/splashwater-videomasking/default/preview.1784716894317-23a62066-3847-4436-8b94-c03e893c4605.png","pc":"uilayout.contact"},{"id":"21st:uilayout.contact__spotlight-cursor","t":"Spotlight cursor","d":"Here is spotlight cursor effect","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uilayout.contact","st":"indexed","u":48,"pl":"https://cdn.21st.dev/larsen66/spotlight-cursor/default/preview.1750164753472.png","pc":"uilayout.contact","tg":["cursor"]},{"id":"21st:uilayout.contact__stacking-card","t":"Stacking card","d":"Here is scroll stacking card","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","u":358,"pl":"https://cdn.21st.dev/larsen66/stacking-card/default/preview.1749995037798.png","pc":"uilayout.contact","tg":["gallery"]},{"id":"21st:uilayout.contact__stats-bold","t":"Stats bold","d":"A bold statistics section highlighting a headline metric with a supporting image and a row of key figures.","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"uilayout.contact","st":"indexed","u":2,"pl":"https://cdn.21st.dev/uilayout.contact/stats-bold/default/preview.1784420582612-62029dd9-6f32-4290-b757-ef0820cf8bff.png","pc":"uilayout.contact","tg":["card","stat"]},{"id":"21st:uilayout.contact__sticky-scroll","t":"Sticky scroll","d":"Here is Sticky Scroll component","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"uilayout.contact","st":"indexed","u":263,"pl":"https://cdn.21st.dev/larsen66/sticky-scroll/default/preview.1749995500796.png","pc":"uilayout.contact","tg":["scroll-area"]},{"id":"21st:uilayout.contact__swapy-draggable-card","t":"Swapy draggable card","d":"A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"uilayout.contact","st":"indexed","u":45,"pl":"https://cdn.21st.dev/uilayout.contact/swapy-draggable-card/default/preview.1753765500979.png","pc":"uilayout.contact","tg":["dashboard","grid"]},{"id":"21st:uilayout.contact__tags-input-2","t":"Tags input 2","d":"An input field for adding, editing, and removing multiple tags using Enter or comma keys.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/tags-input/default/preview.1783570360957.png","pc":"uilayout.contact","tg":["chip","input"]},{"id":"21st:uilayout.contact__testimonial","t":"Testimonial","d":"Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase cus","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"uilayout.contact","st":"indexed","u":289,"pl":"https://cdn.21st.dev/uilayout.contact/testimonial/default/preview.1756286266412.png","pc":"uilayout.contact","tg":["card","grid","testimonials"]},{"id":"21st:uilayout.contact__testimonial-1","t":"Testimonial 1","d":"Professional testimonial components featuring customer reviews, client feedback, social proof displays, and trust-building layouts designed to showcase credibility and increase cus","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"uilayout.contact","st":"indexed","u":43,"pl":"https://cdn.21st.dev/uilayout.contact/testimonial-1/default/preview.1756305160380.png","pc":"uilayout.contact","tg":["clients","testimonials"]},{"id":"21st:uilayout.contact__testimonial-basic","t":"Testimonial basic","d":"An editorial testimonials section with video thumbnails, author avatars, quotes, and star ratings arranged in alternating rows.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"uilayout.contact","st":"indexed","u":2,"pl":"https://cdn.21st.dev/uilayout.contact/testimonial-basic/default/preview.1784409206157-71e28755-7fc1-4fec-94ef-1d1a947e285d.png","pc":"uilayout.contact","tg":["testimonials","video"]},{"id":"21st:uilayout.contact__text-marque","t":"Text marque","d":"Here is text marquee component","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"uilayout.contact","st":"indexed","u":170,"pl":"https://cdn.21st.dev/larsen66/text-marque/default/preview.1749993416008.png","pc":"uilayout.contact","tg":["marquee"]},{"id":"21st:uilayout.contact__thumbnail-slider","t":"Thumbnail slider","d":"An image carousel with a strip of clickable thumbnails below the main slide for quick navigation, built on Embla.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"uilayout.contact","st":"indexed","u":6,"pl":"https://cdn.21st.dev/uilayout.contact/thumbnail-slider/default/preview.1783680095683.png","pc":"uilayout.contact","tg":["carousel","gallery","slider"]},{"id":"21st:uilayout.contact__tree-code-viewer","t":"Tree code viewer","d":"Interactive file-tree viewer with an expandable folder tree and a synced, syntax-highlighted multi-file code panel for docs and code examples.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/tree-code-viewer/default/preview.1784423747891-13925285-d7cb-4d85-9407-8dc212f1278d.png","pc":"uilayout.contact","tg":["file-tree"]},{"id":"21st:uilayout.contact__vertical-bars","t":"Vertical bars","d":"Here is Vertical Bars component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/larsen66/vertical-bars/default/preview.1753374606891.png","pc":"uilayout.contact","tg":["background"]},{"id":"21st:uilayout.contact__vertical-thumbnail-autostart-slider","t":"Vertical thumbnail autostart slider","d":"An auto-playing vertical image carousel with a synced thumbnail navigation strip on the side.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/vertical-thumbnail-autostart-slider/default/preview.1783680249766.png","pc":"uilayout.contact","tg":["carousel","gallery","slider"]},{"id":"21st:uilayout.contact__vertical-thumbnail-slider","t":"Vertical thumbnail slider","d":"An image carousel with a vertical thumbnail rail alongside the main slide for quick navigation between photos.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/vertical-thumbnail-slider/default/preview.1784752995580-10a4a71b-8df7-4269-82bb-b4cb94769f11.png","pc":"uilayout.contact","tg":["carousel","gallery","slider"]},{"id":"21st:uilayout.contact__watersplash-imagemasking","t":"Watersplash imagemasking","d":"An image reveal effect that clips a photo into an organic water-splash shape using a CSS mask image.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uilayout.contact","st":"indexed","pl":"https://cdn.21st.dev/uilayout.contact/watersplash-imagemasking/default/preview.1784690953569-cf6a5b4c-82ae-448c-b924-83405558ae7d.png","pc":"uilayout.contact"},{"id":"21st:ujwalajju003__deep-sky-canvas","t":"Deep sky canvas","d":"Fullscreen WebGL nebula shader with layered fBm clouds, sparse starfield, and smooth animated color cores","k":"component","s":"21st","c":"other","g":"other","a":"ujwalajju003","st":"indexed","pl":"https://cdn.21st.dev/ujwalajju003/deep-sky-canvas/default/preview.1760721332744.png","pc":"ujwalajju003"},{"id":"21st:ujwalajju003__ghost-in-the-machine-ui","t":"Ghost in the machine ui","k":"component","s":"21st","c":"other","g":"other","a":"ujwalajju003","st":"indexed","pl":"https://cdn.21st.dev/ujwalajju003/ghost-in-the-machine-ui/default/preview.1761019525406.png","pc":"ujwalajju003"},{"id":"21st:ujwalajju003__kaleidoscopic-orb-mesh","t":"Kaleidoscopic orb mesh","d":"A full-screen WebGL shader that layers rotating, tiled glow orbs with a smooth procedural color palette to create a hypnotic, kaleidoscopic background animation.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ujwalajju003","st":"indexed","pl":"https://cdn.21st.dev/ujwalajju003/kaleidoscopic-orb-mesh/default/preview.1760677685852.png","pc":"ujwalajju003"},{"id":"21st:ujwalajju003__kaleidoscopic-orb-mesh-1","t":"Kaleidoscopic orb mesh 1","d":"A full-screen WebGL fragment shader that composes rotating, soft-glowing procedural orbs and blends them with smooth, oscillating color palettes to produce a hypnotic kaleidoscopic","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"ujwalajju003","st":"indexed","pl":"https://cdn.21st.dev/ujwalajju003/kaleidoscopic-orb-mesh-1/default/preview.1760680810870.png","pc":"ujwalajju003"},{"id":"21st:uniquesonu__about-us-section","t":"About us section","d":"$3e","k":"component","s":"21st","c":"layout/page-shell","g":"layout","a":"uniquesonu","st":"indexed","u":417,"pl":"https://cdn.21st.dev/uniquesonu/about-us-section/default/preview.1749711450555.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__advanced-data-table","t":"Advanced data table","d":"$3a","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/advanced-data-table/default/preview.1758567388803.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__advanced-file-upload","t":"Advanced file upload","d":"$3d","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/advanced-file-upload/default/preview.1758792395809.png","pc":"uniquesonu","tg":["upload-download"],"sc":20},{"id":"21st:uniquesonu__advanced-file-upload-component","t":"Advanced file upload component","d":"$3e","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/advanced-file-upload-component/default/preview.1758546808596.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__advanced-search","t":"Advanced search","d":"Advanced search ","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/advanced-search/default/preview.1759396126603.png","pc":"uniquesonu","sc":23},{"id":"21st:uniquesonu__ai-input","t":"Ai input","d":"$3c","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/ai-input/default/preview.1753293432930.png","pc":"uniquesonu","sc":21},{"id":"21st:uniquesonu__amazing-button-component","t":"Amazing button component","d":"Amazing Button Component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/amazing-button-component/default/preview.1753000848721.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__analog-clock-component","t":"Analog clock component","d":"This React component renders an analog clock with moving hands, hour markers, minute markers, and a digital time display.  It uses the useState hook to track the current time and u","k":"lib","s":"21st","c":"lib/hook","g":"lib","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/analog-clock-component/default/preview.1755955622929.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-chip-tab-component","t":"Animated chip tab component","d":"$3b","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-chip-tab-component/default/preview.1757063850361.png","pc":"uniquesonu","tg":["chip","navigation-menu","tabs"]},{"id":"21st:uniquesonu__animated-circle-text-effect","t":"Animated circle text effect","d":"$3c","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-circle-text-effect/default/preview.1756983481086.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-dark-mode-toggle","t":"Animated dark mode toggle","d":"$3c","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-dark-mode-toggle/default/preview.1756982811045.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-fuzzy-overlay-effect","t":"Animated fuzzy overlay effect","d":"$3b","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-fuzzy-overlay-effect/default/preview.1757069697293.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-hero-section","t":"Animated hero section","d":"$3d","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","u":88,"pl":"https://cdn.21st.dev/uniquesonu/animated-hero-section/default/preview.1749712560536.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-hero-section-ui","t":"Animated hero section ui","d":"$3b","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","u":59,"pl":"https://cdn.21st.dev/uniquesonu/animated-hero-section-ui/default/preview.1756632827312.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-logo-rolodex","t":"Animated logo rolodex","d":"$3b","k":"component","s":"21st","c":"marketing","g":"marketing","a":"uniquesonu","st":"indexed","u":17,"pl":"https://cdn.21st.dev/uniquesonu/animated-logo-rolodex/default/preview.1757064970065.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-modal-component","t":"Animated modal component","d":"$3c","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-modal-component/default/preview.1757156428803.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-modern-hero","t":"Animated modern hero","d":"$39","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-modern-hero/default/preview.1752926799226.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-number-countdown","t":"Animated number countdown","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-number-countdown/default/preview.1753295882671.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-number-random","t":"Animated number random","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-number-random/default/preview.1753295452902.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-pointer-highlight","t":"Animated pointer highlight","d":"$39","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-pointer-highlight/default/preview.1756900512113.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-shifting-tab-component","t":"Animated shifting tab component","d":"$3d","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"uniquesonu","st":"indexed","u":33,"pl":"https://cdn.21st.dev/uniquesonu/animated-shifting-tab-component/default/preview.1757618131347.png","pc":"uniquesonu","tg":["tabs"]},{"id":"21st:uniquesonu__animated-staggered-dropdown","t":"Animated staggered dropdown","d":"$3a","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"uniquesonu","st":"indexed","u":19,"pl":"https://cdn.21st.dev/uniquesonu/animated-staggered-dropdown/default/preview.1757619824855.png","pc":"uniquesonu","tg":["dropdown","menu"]},{"id":"21st:uniquesonu__animated-svg-background","t":"Animated svg background","d":"This React component generates an animated background using multiple SVG paths with varying colors and animations.  The animation involves a dash offset effect creating the illusio","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-svg-background/default/preview.1755790980440.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__animated-text-with-staggered-effect","t":"Animated text with staggered effect","d":"This React code creates a reusable component that renders animated text with a staggered character appearance.  It uses CSS animations and keyframes to achieve a visually appealing","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-text-with-staggered-effect/default/preview.1755182065175.png","pc":"uniquesonu","tg":["text"]},{"id":"21st:uniquesonu__animated-to-do-list","t":"Animated to do list","d":"$36","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/animated-to-do-list/default/preview.1757064591890.png","pc":"uniquesonu","tg":["checkbox"],"sc":20},{"id":"21st:uniquesonu__animated-toggle-button-with-download-open-state","t":"Animated toggle button with download open state","d":"This CSS and HTML code creates a visually appealing toggle button that animates between a 'Download' and 'Open' state.  The button uses a combination of CSS transitions, animations","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/animated-toggle-button-with-download-open-state/default/preview.1755243135110.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__audit-feed","t":"Audit feed","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/audit-feed/default/preview.1759396769534.png","pc":"uniquesonu","sc":22},{"id":"21st:uniquesonu__bar-chart-card-for-dashboard","t":"Bar chart card for dashboard","d":"Bar chart card for dashboard","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/bar-chart-card-for-dashboard/default/preview.1753011949079.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__bounce-card-features","t":"Bounce card features","d":"$3b","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uniquesonu","st":"indexed","u":147,"pl":"https://cdn.21st.dev/uniquesonu/bounce-card-features/default/preview.1749763971764.png","pc":"uniquesonu","tg":["features"]},{"id":"21st:uniquesonu__button-library","t":"Button library","d":"$41","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/button-library/default/preview.1752910211594.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__button-with-gradient-overlay-and-hover-effect-1","t":"Button with gradient overlay and hover effect 1","d":"This CSS code creates a visually appealing button with a gradient background and a subtle hover effect.  It uses pseudo-elements (:before and :after) to achieve a layered look and ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/button-with-gradient-overlay-and-hover-effect-1/default/preview.1755243561747.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__button-with-hover-and-active-effects","t":"Button with hover and active effects","d":"This React component renders a button with a dotted border, white background, and black text.  On hover, it subtly translates and adds a shadow; on active click, it reverts to its ","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/button-with-hover-and-active-effects/default/preview.1755345693634.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__calender-for-event","t":"Calender for event","d":"$3c","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/calender-for-event/default/preview.1754143462983.png","pc":"uniquesonu","sc":20},{"id":"21st:uniquesonu__card-carousel","t":"Card carousel","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/card-carousel/default/preview.1753297124404.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__card-component","t":"Card component","d":"$3c","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/card-component/default/preview.1752914125593.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__category-selector","t":"Category selector","d":"$41","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/category-selector/default/preview.1753134007597.png","pc":"uniquesonu","sc":21},{"id":"21st:uniquesonu__count-down-component","t":"Count down component","d":"animated CountDown Component ","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/count-down-component/default/preview.1753703230768.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__cuisine-selector-chips","t":"Cuisine selector chips","d":"$3b","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"uniquesonu","st":"indexed","u":20,"pl":"https://cdn.21st.dev/uniquesonu/cuisine-selector-chips/default/preview.1757079580453.png","pc":"uniquesonu","tg":["chip","select"]},{"id":"21st:uniquesonu__customizable-hero-section-with-gradient-animation","t":"Customizable hero section with gradient animation","d":"This React component renders a visually appealing hero section with a cycling background gradient, grid pattern, headline, call-to-action buttons, key features, and trust indicator","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/customizable-hero-section-with-gradient-animation/default/preview.1755438687340.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__dashboard-activities","t":"Dashboard activities","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/dashboard-activities/default/preview.1759320446675.png","pc":"uniquesonu","tg":["notification"]},{"id":"21st:uniquesonu__dashboard-overview","t":"Dashboard overview","d":"Dashboard overview for the admin dashboard","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/dashboard-overview/default/preview.1759320014142.png","pc":"uniquesonu","tg":["dashboard","stat"]},{"id":"21st:uniquesonu__dashboard-with-collapsible-sidebar","t":"Dashboard with collapsible sidebar","d":"This React code implements a dashboard with a collapsible sidebar featuring various options, a dark mode toggle, and displays various statistics and recent activity.  It uses Lucid","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"uniquesonu","st":"indexed","u":629,"pl":"https://cdn.21st.dev/uniquesonu/dashboard-with-collapsible-sidebar/default/preview.1755346172257.png","pc":"uniquesonu","tg":["dashboard","sidebar","toggle"]},{"id":"21st:uniquesonu__dashed-button","t":"Dashed button","d":"Animated Dashed button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/dashed-button/default/preview.1753116235572.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__data-card-display","t":"Data card display","d":"$3b","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"rated","u":25,"pl":"https://cdn.21st.dev/uniquesonu/data-card-display/default/preview.1758809243937.png","pc":"uniquesonu","tg":["card","dashboard","grid","stat"],"sc":16},{"id":"21st:uniquesonu__data-table-filter","t":"Data table filter","d":"$3d","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"uniquesonu","st":"indexed","u":41,"pl":"https://cdn.21st.dev/uniquesonu/data-table-filter/default/preview.1758810266831.png","pc":"uniquesonu","tg":["popover"]},{"id":"21st:uniquesonu__detail-viewer","t":"Detail viewer","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/detail-viewer/default/preview.1760093410158.png","pc":"uniquesonu","sc":20},{"id":"21st:uniquesonu__draggable-modal-component","t":"Draggable modal component","d":"$3b","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/draggable-modal-component/default/preview.1757151469553.png","pc":"uniquesonu","tg":["modal"],"sc":19},{"id":"21st:uniquesonu__dynamic-pricing-component","t":"Dynamic pricing component","d":"$3c","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/dynamic-pricing-component/default/preview.1749733260049.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__dynamic-text-resizing","t":"Dynamic text resizing","d":"$3c","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/dynamic-text-resizing/default/preview.1756985429678.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__editor-component","t":"Editor component","d":"$3c","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/editor-component/default/preview.1752923864509.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__empty-state-beautiful-accessible-no-data-states","t":"Empty state beautiful accessible no data states","d":"“Stop leaving your users in the void. The EmptyState component gives you elegant, accessible, and responsive UI for no-data moments. With built-in icons, customizable CTAs, and dar","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"uniquesonu","st":"rated","u":18,"pl":"https://cdn.21st.dev/uniquesonu/empty-state-beautiful-accessible-no-data-states/default/preview.1758875891255.png","pc":"uniquesonu","tg":["dashboard","cta","empty-state","icon"],"sc":18},{"id":"21st:uniquesonu__expanded-tabs","t":"Expanded tabs","d":"$3c","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/expanded-tabs/default/preview.1753294309012.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__feature-announcements","t":"Feature announcements","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/feature-announcements/default/preview.1760092934090.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__feature-grid-enterprise-grade","t":"Feature grid enterprise grade","d":"“Stop burying your features in walls of text. The FeatureGrid gives you a beautiful, responsive, and accessible card grid to showcase your product’s superpowers. With icon + title ","k":"component","s":"21st","c":"media/icon","g":"media","a":"uniquesonu","st":"indexed","u":22,"pl":"https://cdn.21st.dev/uniquesonu/feature-grid-enterprise-grade/default/preview.1758956625475.png","pc":"uniquesonu","tg":["card","features","icon"]},{"id":"21st:uniquesonu__floating-action-button-component-with-customizable-options","t":"Floating action button component with customizable options","d":"This React component renders a customizable floating action button (FAB) with multiple options that appear when the main button is clicked.  The FAB's size, position, and options a","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/floating-action-button-component-with-customizable-options/default/preview.1755176123312.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__floating-bubbles-background","t":"Floating bubbles background","d":"$40","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","u":13,"pl":"https://cdn.21st.dev/uniquesonu/floating-bubbles-background/default/preview.1749721120669.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__futurastic-hero-section","t":"Futurastic hero section","d":"$3b","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","u":380,"pl":"https://cdn.21st.dev/uniquesonu/futurastic-hero-section/default/preview.1749762135504.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__futurastic-hero-section-1","t":"Futurastic hero section 1","d":"$3e","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/futurastic-hero-section-1/default/preview.1752954651471.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__futurastic-hero-section-2","t":"Futurastic hero section 2","d":"Futurastic hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/futurastic-hero-section-2/default/preview.1757078555929.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__futurastic-modern-hero-section","t":"Futurastic modern hero section","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/futurastic-modern-hero-section/default/preview.1752957796971.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__glass-ui","t":"Glass ui","d":"a beautiful effect with animated glass orbs moving in a rectangular path over a background image.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/glass-ui/default/preview.1754818393925.png","pc":"uniquesonu","tg":["background"]},{"id":"21st:uniquesonu__glow-menu","t":"Glow menu","d":"$3b","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"uniquesonu","st":"indexed","u":80,"pl":"https://cdn.21st.dev/uniquesonu/glow-menu/default/preview.1761931205867.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__glowing-boucing-ring","t":"Glowing boucing ring","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/glowing-boucing-ring/default/preview.1754942497988.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__glowing-button","t":"Glowing button","d":"Glowing animated Button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/glowing-button/default/preview.1753042479698.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__gpt-5","t":"Gpt 5","d":"chat gpt 5 component","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/gpt-5/default/preview.1754817993637.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__hamburger-button","t":"Hamburger button","d":"$36","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/hamburger-button/default/preview.1752900334238.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__hero-section","t":"Hero section","d":"$3c","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/hero-section/default/preview.1753134724216.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__hero-section-enterprise-ready-landing-page-hero-with-dual-ctas","t":"Hero section enterprise ready landing page hero with dual ctas","d":"“Make your product unforgettable at first glance. The HeroSection gives you a bold, responsive, and theme-aware hero block with headline, subtext, and dual CTAs. Perfect for SaaS, ","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"uniquesonu","st":"indexed","u":50,"pl":"https://cdn.21st.dev/uniquesonu/hero-section-enterprise-ready-landing-page-hero-with-dual-ctas/default/preview.1758876408462.png","pc":"uniquesonu","tg":["badge","cta","hero"]},{"id":"21st:uniquesonu__hotel-card-ui-component","t":"Hotel card ui component","d":"$34","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/hotel-card-ui-component/default/preview.1758808380622.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__hover-text-effect","t":"Hover text effect","d":"A text hover effect that animates and outlines gradient on hover.\nanimate your own way","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","u":34,"pl":"https://cdn.21st.dev/uniquesonu/hover-text-effect/default/preview.1749737438642.png","pc":"uniquesonu","tg":["text"]},{"id":"21st:uniquesonu__interactive-bar-chart-poll","t":"Interactive bar chart poll","d":"$3c","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/interactive-bar-chart-poll/default/preview.1757143652030.png","pc":"uniquesonu","sc":19},{"id":"21st:uniquesonu__interactive-command-palette","t":"Interactive command palette","d":"$3c","k":"component","s":"21st","c":"navigation/command-palette","g":"navigation","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/interactive-command-palette/default/preview.1758547192477.png","pc":"uniquesonu","sc":18},{"id":"21st:uniquesonu__interactive-pricing-component","t":"Interactive pricing component","d":"$3a","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/interactive-pricing-component/default/preview.1758803837301.png","pc":"uniquesonu","tg":["comparison","pricing-section","tabs"]},{"id":"21st:uniquesonu__liquid-glass","t":"Liquid glass","d":"$3e","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/liquid-glass/default/preview.1761931960063.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__liquid-glass-boxes","t":"Liquid glass boxes","d":"Liquid glass boxes","k":"component","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","u":4,"pl":"https://cdn.21st.dev/uniquesonu/liquid-glass-boxes/default/preview.1754941835692.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__loading-animations","t":"Loading animations","d":"This code provides five different loading animation components built with React and Framer Motion. Each component utilizes various animation properties like `scale`, `skew`, `x`, `","k":"component","s":"21st","c":"status/loader","g":"status","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/loading-animations/default/preview.1755260467786.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__loading-indicator","t":"Loading indicator","d":"This React component renders a visually appealing loading indicator using CSS animations.  It features customizable size, colors, spin and squeeze durations, and allows for styling","k":"component","s":"21st","c":"status/loader","g":"status","a":"uniquesonu","st":"indexed","u":15,"pl":"https://cdn.21st.dev/uniquesonu/loading-indicator/default/preview.1785303709476-7eebf280-b591-4baf-b037-6d3211224a8e.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__mac-os-dock","t":"Mac os dock","d":"This React component renders a customizable dock with icons that dynamically adjust their size and position based on mouse hover interactions.  It uses CSS variables and utility fu","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/mac-os-dock/default/preview.1754942029444.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__mastercard-component","t":"Mastercard component","d":"$38","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/mastercard-component/default/preview.1752934712758.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__metric-card","t":"Metric card","d":"$41","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/metric-card/default/preview.1753133062987.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__metric-card-1","t":"Metric card 1","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/metric-card-1/default/preview.1760603069633.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__moder-login-form","t":"Moder login form","d":"$3e","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/moder-login-form/default/preview.1756904683025.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-animated-hero-section","t":"Modern animated hero section","d":"$3e","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"uniquesonu","st":"indexed","u":176,"pl":"https://cdn.21st.dev/uniquesonu/modern-animated-hero-section/default/preview.1749716233660.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-animated-multi-words","t":"Modern animated multi words","d":"Modern animated multi words","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"uniquesonu","st":"indexed","u":34,"pl":"https://cdn.21st.dev/uniquesonu/modern-animated-multi-words/default/preview.1752958760146.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-background-paths","t":"Modern background paths","d":"$40","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uniquesonu","st":"indexed","u":143,"pl":"https://cdn.21st.dev/uniquesonu/modern-background-paths/default/preview.1749808726815.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-button","t":"Modern button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/modern-button/default/preview.1754132150499.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-faq-section","t":"Modern faq section","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/modern-faq-section/default/preview.1753135303594.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-hero","t":"Modern hero","d":"$3b","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uniquesonu","st":"indexed","u":183,"pl":"https://cdn.21st.dev/uniquesonu/modern-hero/default/preview.1749761339917.png","pc":"uniquesonu","tg":["gallery"]},{"id":"21st:uniquesonu__modern-hero-component","t":"Modern hero component","d":"$41","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/modern-hero-component/default/preview.1749809372930.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-hero-section","t":"Modern hero section","d":"$3b","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","u":43,"pl":"https://cdn.21st.dev/uniquesonu/modern-hero-section/default/preview.1785530021620-6aef38f7-ddae-45f9-ab41-49f822d6883f.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__modern-hero-section-1","t":"Modern hero section 1","d":"MinimalHeroSection – Interactive AI-Powered Hero Banner\nA visually rich and interactive hero section built with React and Tailwind CSS, featuring an SVG-based animated background t","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"uniquesonu","st":"indexed","u":38,"pl":"https://cdn.21st.dev/uniquesonu/modern-hero-section-1/default/preview.1754811110213.png","pc":"uniquesonu","tg":["ai-chat"]},{"id":"21st:uniquesonu__modern-pricing-section","t":"Modern pricing section","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/modern-pricing-section/default/preview.1752911866913.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__news-letter","t":"News letter","k":"component","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/news-letter/default/preview.1753135716166.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__next-gen-pagination-accessible","t":"Next gen pagination accessible","k":"component","s":"21st","c":"navigation/pagination","g":"navigation","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/next-gen-pagination-accessible/default/preview.1758874797186.png","pc":"uniquesonu","tg":["list","navigation-menu","pagination"]},{"id":"21st:uniquesonu__next-gen-security-c-ard","t":"Next gen security c ard","d":"$3a","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/next-gen-security-c-ard/default/preview.1752956708587.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__notification-system","t":"Notification system","d":"$3e","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/notification-system/default/preview.1758569768417.png","pc":"uniquesonu","sc":18},{"id":"21st:uniquesonu__otp-input-component","t":"Otp input component","d":"$3b","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/otp-input-component/default/preview.1758546212668.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__parallax-scrolling-text-effect","t":"Parallax scrolling text effect","d":"$3b","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","u":29,"pl":"https://cdn.21st.dev/uniquesonu/parallax-scrolling-text-effect/default/preview.1756984012053.png","pc":"uniquesonu","tg":["text"]},{"id":"21st:uniquesonu__pixel-art-image-component","t":"Pixel art image component","d":"$3b","k":"component","s":"21st","c":"media/gallery","g":"media","a":"uniquesonu","st":"indexed","u":15,"pl":"https://cdn.21st.dev/uniquesonu/pixel-art-image-component/default/preview.1785304593913-1f295f1d-1f03-4399-8ad1-0f023b77c42e.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__pricing-cards-component","t":"Pricing cards component","d":"$3a","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/pricing-cards-component/default/preview.1756633197469.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__pricing-section","t":"Pricing section","d":"$38","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/pricing-section/default/preview.1752913105274.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__pricing-section-neomorphism","t":"Pricing section neomorphism","d":"$39","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/pricing-section-neomorphism/default/preview.1752912166024.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__progress-bar","t":"Progress bar","d":"$3c","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/progress-bar/default/preview.1759257141821.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__quick-actions","t":"Quick actions","d":"Quick actions for the admin pannel","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/quick-actions/default/preview.1759393805527.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__radial-animated-doodle","t":"Radial animated doodle","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/radial-animated-doodle/default/preview.1785363650014-4104f7e7-0ee9-4074-823e-3228e5fd119e.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__resource-cards","t":"Resource cards","d":"Resource limit and utilization","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/resource-cards/default/preview.1759497914000.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__rotating-planes-animation","t":"Rotating planes animation","d":"This code implements a self-contained React component that renders a 3D animation of rotating planes.  It uses inline styles, CSS variables, and keyframes defined within the compon","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/rotating-planes-animation/default/preview.1755181155469.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__rotating-testimonial-slider","t":"Rotating testimonial slider","d":"$3c","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/rotating-testimonial-slider/default/preview.1757684973065.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__sale-status-admin","t":"Sale status admin","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/sale-status-admin/default/preview.1753010511710.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__shimmer-button","t":"Shimmer button","d":"This React component renders a customizable button with various visual enhancements, including a 3D effect, hover animations, and a unique shimmer effect triggered by mouse movemen","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","u":7,"pl":"https://cdn.21st.dev/uniquesonu/shimmer-button/default/preview.1754996043874.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__sidebar","t":"Sidebar","d":"Business-Ready Interface:\n\nReal-time stats cards with trend indicators\nActivity feed with categorized actions and timestamps\nQuick action buttons with color-coded categories\nCompre","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"uniquesonu","st":"indexed","u":46,"pl":"https://cdn.21st.dev/uniquesonu/sidebar/default/preview.1749655107868.png","pc":"uniquesonu","tg":["dashboard","navigation-menu","profile","sidebar"]},{"id":"21st:uniquesonu__sidebar-1","t":"Sidebar 1","d":"sidebar for the dashboard","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/sidebar-1/default/preview.1759395189987.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__skeleton","t":"Skeleton","d":"skeleton bar","k":"component","s":"21st","c":"status/skeleton","g":"status","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/skeleton/default/preview.1759258461657.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__slide-tabs","t":"Slide tabs","d":"$34","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"uniquesonu","st":"indexed","u":47,"pl":"https://cdn.21st.dev/uniquesonu/slide-tabs/default/preview.1752673473116.png","pc":"uniquesonu","tg":["tabs"]},{"id":"21st:uniquesonu__sparkles-moving-hero-section","t":"Sparkles moving hero section","d":"This React component, SparklesCore, renders customizable particle animations using the tsParticles library.  It offers various configuration options for particle size, color, speed","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/sparkles-moving-hero-section/default/preview.1755950613099.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__spinning-box","t":"Spinning box","d":"$3f","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/spinning-box/default/preview.1749726043087.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__split-button","t":"Split button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/split-button/default/preview.1759498943801.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__squishy-card-component","t":"Squishy card component","d":"$3b","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"uniquesonu","st":"indexed","u":32,"pl":"https://cdn.21st.dev/uniquesonu/squishy-card-component/default/preview.1757683913830.png","pc":"uniquesonu","tg":["pricing-section"]},{"id":"21st:uniquesonu__staggered-dropdown","t":"Staggered dropdown","d":"Staggered Dropdown: ","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/staggered-dropdown/default/preview.1766298727892.png","pc":"uniquesonu","sc":17},{"id":"21st:uniquesonu__suffle-hero","t":"Suffle hero","d":"$3b","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"uniquesonu","st":"indexed","u":26,"pl":"https://cdn.21st.dev/uniquesonu/suffle-hero/default/preview.1749762726100.png","pc":"uniquesonu","tg":["cta","gallery"]},{"id":"21st:uniquesonu__switcher","t":"Switcher","d":"Environment Switcher Demo (Dashboard Header Element)","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/switcher/default/preview.1759498568617.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__table-controls","t":"Table controls","d":"Table Controls Demo (Simulated Selection)","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/table-controls/default/preview.1759321134313.png","pc":"uniquesonu","tg":["search"]},{"id":"21st:uniquesonu__text-parallax-content-scroll","t":"Text parallax content scroll","d":"$3d","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"uniquesonu","st":"indexed","u":221,"pl":"https://cdn.21st.dev/uniquesonu/text-parallax-content-scroll/default/preview.1749763214821.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__time-range-selector","t":"Time range selector","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/time-range-selector/default/preview.1760091773099.png","pc":"uniquesonu","sc":23},{"id":"21st:uniquesonu__unique-loader-components","t":"Unique loader components","d":"This code implements five different loading animation components using React and the Framer Motion library. Each component features unique visual styles and animation patterns to p","k":"component","s":"21st","c":"status/loader","g":"status","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/unique-loader-components/default/preview.1755260265206.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__uploader","t":"Uploader","d":"Upload New Asset","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/uploader/default/preview.1760092587342.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__user-controls","t":"User controls","d":"User controls","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/user-controls/default/preview.1759400845363.png","pc":"uniquesonu","sc":22},{"id":"21st:uniquesonu__user-impersonation","t":"User impersonation","d":"User Impersonation","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/user-impersonation/default/preview.1759402420553.png","pc":"uniquesonu","sc":23},{"id":"21st:uniquesonu__user-role-permissions","t":"User role permissions","k":"component","s":"21st","c":"other","g":"other","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/user-role-permissions/default/preview.1760591155455.png","pc":"uniquesonu","sc":23},{"id":"21st:uniquesonu__user-status","t":"User status","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"uniquesonu","st":"rated","pl":"https://cdn.21st.dev/uniquesonu/user-status/default/preview.1759499345706.png","pc":"uniquesonu","sc":19},{"id":"21st:uniquesonu__water-glass-loading-animation","t":"Water glass loading animation","d":"This React component renders a visually appealing water glass loading animation.  It displays a glass filling with water, representing the loading progress, along with customizable","k":"component","s":"21st","c":"status/loader","g":"status","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/water-glass-loading-animation/default/preview.1755180485541.png","pc":"uniquesonu"},{"id":"21st:uniquesonu__weight-and-bmi-tracking-widget","t":"Weight and bmi tracking widget","d":"This React component displays a customizable weight and BMI tracking widget.  It features an animated bar graph visualizing weight or BMI data over time against a user-defined thre","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"uniquesonu","st":"indexed","pl":"https://cdn.21st.dev/uniquesonu/weight-and-bmi-tracking-widget/default/preview.1755178397192.png","pc":"uniquesonu"},{"id":"21st:univolveit__jelly-fish","t":"Jelly fish","d":"Jelly fish effect","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"univolveit","st":"indexed","u":14,"pl":"https://cdn.21st.dev/univolveit/jelly-fish/default/preview.1783326955746.png","pc":"univolveit","tg":["hero","text"]},{"id":"21st:unlumen__animate-count","t":"Animate count","d":"An animated number display that transitions between values with a blur and slide effect for counters and metrics.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/animate-count/default/preview.1784355310790-497c10c9-49e5-425b-a013-b3902cb05464.png","pc":"unlumen","tg":["number"]},{"id":"21st:unlumen__animate-digits","t":"Animate digits","d":"A number display where each digit blur-slides on change, animating only the digits that actually change — ideal for timers, counters, and live metrics.","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/animate-digits/default/preview.1784284788831-76432d1d-ea59-401e-bbe8-11849a9b44cb.png","pc":"unlumen","tg":["number"]},{"id":"21st:unlumen__animate-text-input-typing","t":"Animate text input typing","d":"An animated text input and textarea with per-character motion effects and a smooth custom cursor overlay, supporting multiple animation presets, cursor variants, and input styles.","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/animate-text-input-typing/default/preview.1784681170812-39df5545-3fe1-4a91-a2f6-ffbf39080682.png","pc":"unlumen"},{"id":"21st:unlumen__aurora-bars","t":"Aurora bars","d":"An animated bar visualizer with aurora-inspired gradient colors and organic sine-wave motion.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/aurora-bars/default/preview.1784824063637-04ea43c1-47af-4ec6-96cb-ac6036e87644.png","pc":"unlumen"},{"id":"21st:unlumen__aurora-blur","t":"Aurora blur","d":"An animated WebGL aurora borealis shader layer that drifts softly behind your content as a background.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/aurora-blur/default/preview.1785316208681-e4387d20-c15e-44bc-bbdc-2aecbadce298.png","pc":"unlumen"},{"id":"21st:unlumen__count-up","t":"Count up","d":"An animated number counter that springs to its target value when it enters the viewport, with support for decimals, thousands separators, count direction, and per-digit slide, fade","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"unlumen","st":"indexed","u":10,"pl":"https://cdn.21st.dev/unlumen/count-up/default/preview.1784354297145-e0f233b1-2265-483b-a513-9d21626a0db1.png","pc":"unlumen","tg":["number","stat"]},{"id":"21st:unlumen__cursor-image-trail","t":"Cursor image trail","d":"An interactive effect that spawns a trail of images or icons following the cursor with spring-physics fade, scale, and rotation.","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/cursor-image-trail/default/preview.1784707453117-b56de847-3bbc-43c5-af09-cf92ebfa85e9.png","pc":"unlumen","tg":["cursor"]},{"id":"21st:unlumen__glow","t":"Glow","d":"A button with an animated conic-gradient glow layer behind it, supporting rotate, pulse, breathe, color-shift, flow and static glow modes.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/glow/default/preview.1783582106897.png","pc":"unlumen"},{"id":"21st:unlumen__highlight","t":"Highlight","d":"An animated highlight component that tracks active or hovered elements with smooth spring animations, supporting parent and children modes.","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"unlumen","st":"indexed","u":145,"pl":"https://cdn.21st.dev/unlumen/highlight/default/preview.1783571206493.png","pc":"unlumen","tg":["tabs"]},{"id":"21st:unlumen__horizontal-depth-fade","t":"Horizontal depth fade","d":"A scroll-driven horizontal image strip that keeps the centered image in sharp focus while blurring, dimming and desaturating the others for a cinematic depth-of-field effect.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/horizontal-depth-fade/default/preview.1784707467770-31666188-59ec-4157-b341-51bb2daef502.png","pc":"unlumen","tg":["gallery","scroll-area"]},{"id":"21st:unlumen__motion-navigation-menu","t":"Motion navigation menu","d":"An animated navigation menu with a single morphing dropdown container, a layout-animated active pill, and direction-aware spring content transitions.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"unlumen","st":"indexed","u":18,"pl":"https://cdn.21st.dev/unlumen/motion-navigation-menu/default/preview.1784755148866-77928b7e-c32a-40b4-bffd-c7181a0fb5b5.png","pc":"unlumen","tg":["dropdown","menu","navigation-menu"]},{"id":"21st:unlumen__pixel-liquid-bg","t":"Pixel liquid bg","d":"An interactive full-screen fluid simulation background with pixelation and dithering that reacts to cursor movement.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"unlumen","st":"indexed","u":6,"pl":"https://cdn.21st.dev/unlumen/pixel-liquid-bg/default/preview.1783579767710.png","pc":"unlumen","tg":["background"]},{"id":"21st:unlumen__primitives-animate-files","t":"Primitives animate files","d":"Composable, unstyled file-tree primitives with an animated hover highlight, spring folder expand and collapse, and an animated open/close folder icon swap.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"unlumen","st":"rated","pl":"https://cdn.21st.dev/unlumen/primitives-animate-files/default/preview.1784272116860-ebc82076-aad6-468f-9837-141b58351dd5.png","pc":"unlumen","tg":["file-tree"],"sc":18},{"id":"21st:unlumen__scroll-reveal-image","t":"Scroll reveal image","d":"A scroll-driven image that expands its width, zooms out, and animates its border radius with spring physics as it enters the viewport.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/scroll-reveal-image/default/preview.1786707519211-39e02536-38df-43bb-93a2-4bf129a4cc02.png","pc":"unlumen"},{"id":"21st:unlumen__side-by-side-slide","t":"Side by side slide","d":"An image comparison slider with a spring-animated divider that follows the cursor on hover to reveal before/after images.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/side-by-side-slide/default/preview.1783574970384.png","pc":"unlumen","tg":["slider"]},{"id":"21st:unlumen__sidebar-001","t":"Sidebar 001","d":"Animated vertical sidebar navigation with a spring hover highlight, an animated active indicator bar, collapsible groups, per-item dash accents, and drag-to-resize.","k":"layout","s":"21st","c":"navigation/sidebar","g":"navigation","a":"unlumen","st":"indexed","u":8,"pl":"https://cdn.21st.dev/unlumen/sidebar-001/default/preview.1784797106739-2620364d-d932-466f-9370-ecdcf7289b63.png","pc":"unlumen","tg":["menu","navigation-menu","sidebar"]},{"id":"21st:unlumen__tag","t":"Tag","d":"Rounded outlined tag with a colored icon, six built-in pastel color variants, size options, and an animated stacked group layout.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"unlumen","st":"indexed","u":2,"pl":"https://cdn.21st.dev/unlumen/tag/default/preview.1784681544258-059faba2-ae61-4c2a-8e73-fed59e83060b.png","pc":"unlumen"},{"id":"21st:unlumen__vertical-marquee","t":"Vertical marquee","d":"Two columns of tweet cards scrolling vertically in opposite directions with a progressive fade at the top and bottom edges.","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"unlumen","st":"indexed","u":2,"pl":"https://cdn.21st.dev/unlumen/vertical-marquee/default/preview.1785537606329-89f537ee-e2b0-4c1f-bf96-85c1fa57074f.png","pc":"unlumen"},{"id":"21st:unlumen__video-ambient","t":"Video ambient","d":"A video player card that projects a blurred, color-matched ambient glow behind the video like YouTube's ambient mode.","k":"component","s":"21st","c":"media/player","g":"media","a":"unlumen","st":"indexed","pl":"https://cdn.21st.dev/unlumen/video-ambient/default/preview.1783720099015.png","pc":"unlumen","tg":["video"]},{"id":"21st:up714279__anatomy-button","t":"Anatomy button","d":"A simple blue button that reveals a detailed anatomy breakdown with labels and highlights when hovered, turning into an interactive educational graphic.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/anatomy-button/default/preview.1755198935297.png","pc":"up714279"},{"id":"21st:up714279__beach-click","t":"Beach click","d":"a button which has a beache theme with hover effect revealing the sea","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/beach-click/default/preview.1755210818771.png","pc":"up714279"},{"id":"21st:up714279__buynow-button","t":"Buynow button","d":"A “Buy Now” button that reveals a price tag tooltip above it when hovered, giving users instant pricing info.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/buynow-button/default/preview.1755200050584.png","pc":"up714279"},{"id":"21st:up714279__credits-button","t":"Credits button","d":"A purple gradient “Credits” button with a lightning icon that plays a zap-like reanimation effect when clicked for extra visual impact.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/credits-button/default/preview.1755200676165.png","pc":"up714279"},{"id":"21st:up714279__delete-button","t":"Delete button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/delete-button/default/preview.1755200313389.png","pc":"up714279"},{"id":"21st:up714279__explore-button","t":"Explore button","d":"this is a explore button which animates on hover effect","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/explore-button/default/preview.1755195712616.png","pc":"up714279"},{"id":"21st:up714279__github-button","t":"Github button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/github-button/default/preview.1755197324442.png","pc":"up714279"},{"id":"21st:up714279__gradient-buttons","t":"Gradient buttons","d":"Rounded gradient buttons with arrow icons that transform into square shapes when clicked, adding a dynamic, interactive feel.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/gradient-buttons/default/preview.1755197595257.png","pc":"up714279"},{"id":"21st:up714279__hover-blocks","t":"Hover blocks","d":"A blue “HOVER” button that, on hover, animates into a black-and-white theme while changing its text to the word “WORLD” in a dynamic transition.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/hover-blocks/default/preview.1755199673314.png","pc":"up714279"},{"id":"21st:up714279__jelly-button","t":"Jelly button","d":"$3c","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/jelly-button/default/preview.1755197842862.png","pc":"up714279"},{"id":"21st:up714279__microsoft-button","t":"Microsoft button","d":"A Microsoft-style badge button with a subtle animated shadow that creates a 3D pop-out effect, making it feel more tactile and clickable.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/microsoft-button/default/preview.1755198314676.png","pc":"up714279"},{"id":"21st:up714279__mystery-button","t":"Mystery button","d":"This is a yellow pixelated question block button. When clicked, it shoots a bullet upward.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/mystery-button/default/preview.1755201122297.png","pc":"up714279"},{"id":"21st:up714279__plant-button","t":"Plant button","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/plant-button/default/preview.1755196787257.png","pc":"up714279"},{"id":"21st:up714279__pow-button","t":"Pow button","d":"$3e","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/pow-button/default/preview.1755198519170.png","pc":"up714279"},{"id":"21st:up714279__smooth-animation-button","t":"Smooth animation button","d":"A sleek, rounded rectangular button with a neon green border and text, dark curved side accents, and a smooth color transition on hover.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/smooth-animation-button/default/preview.1755196159763.png","pc":"up714279"},{"id":"21st:up714279__welcome-sahara-button","t":"Welcome sahara button","d":"this glossy red button starts with the text WELCOME and when left-clicked, the text changes to SAHARA.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/welcome-sahara-button/default/preview.1755201717730.png","pc":"up714279"},{"id":"21st:up714279__winner-badge","t":"Winner badge","d":"A gold trophy badge that on hover reveals a mini profile card with the user’s rank, name, and score.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"up714279","st":"indexed","pl":"https://cdn.21st.dev/up714279/winner-badge/default/preview.1755210540058.png","pc":"up714279"},{"id":"21st:uplusion23__color-picker","t":"Color picker","d":"A @shadcn-ui compatible color picker using @uiw/react-color","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"uplusion23","st":"indexed","u":261,"pl":"https://cdn.21st.dev/user_2sJvZteIoXOE3zRBOXYWYrPOAgv/color-picker/default/preview.1738226144946.png","pc":"uplusion23","tg":["dropdown"]},{"id":"21st:urmauur__file-card-collections","t":"File card collections","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"urmauur","st":"indexed","u":49,"pl":"https://cdn.21st.dev/urmauur/file-card-collections/default/preview.1776005744862.png","pc":"urmauur","tg":["badge","card","icon","upload-download"]},{"id":"21st:urmauur__folder-components","t":"Folder components","d":"A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. ","k":"component","s":"21st","c":"media/icon","g":"media","a":"urmauur","st":"rated","u":11,"pl":"https://cdn.21st.dev/urmauur/folder-components/default/preview.1776437887887.png","pc":"urmauur","tg":["icon"],"sc":16},{"id":"21st:user_hardp__sparkle-card","t":"Sparkle card","d":"Here is Sparkle Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"user_hardp","st":"indexed","u":15,"pl":"https://cdn.21st.dev/larsen66/sparkle-card/default/preview.1756881531607.png","pc":"user_hardp","tg":["card"]},{"id":"21st:user_hardp__suggestive-search","t":"Suggestive search","d":"Here is Suggestive Search component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"user_hardp","st":"indexed","u":81,"pl":"https://cdn.21st.dev/larsen66/suggestive-search/default/preview.1756881852934.png","pc":"user_hardp","tg":["search"]},{"id":"21st:user_hardp__switch-button","t":"Switch button","d":"Here is Switch Button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"user_hardp","st":"indexed","u":30,"pl":"https://cdn.21st.dev/larsen66/switch-button/default/preview.1756883788767.png","pc":"user_hardp","tg":["button","icon","toggle"]},{"id":"21st:user_hardp__user-avatars","t":"User avatars","d":"Here is User Avatars","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"user_hardp","st":"indexed","u":20,"pl":"https://cdn.21st.dev/larsen66/user-avatars/default/preview.1756881761584.png","pc":"user_hardp","tg":["team"]},{"id":"21st:user_xn1cklas__news-search","t":"News search","d":"Here is News Search component","k":"component","s":"21st","c":"inputs/search","g":"inputs","a":"user_xn1cklas","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/news-search/default/preview.1757008471637.png","pc":"user_xn1cklas","tg":["list","search"]},{"id":"21st:user_xn1cklas__public-stats","t":"Public stats","d":"Here is Public Stats component","k":"component","s":"21st","c":"data-viz/chart","g":"data-viz","a":"user_xn1cklas","st":"indexed","u":23,"pl":"https://cdn.21st.dev/larsen66/public-stats/default/preview.1757007880664.png","pc":"user_xn1cklas","tg":["data-visualization"]},{"id":"21st:user_xn1cklas__qr-code-generator","t":"Qr code generator","d":"Here is QR Code Generator component","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"user_xn1cklas","st":"indexed","pl":"https://cdn.21st.dev/larsen66/qr-code-generator/default/preview.1757008959225.png","pc":"user_xn1cklas"},{"id":"21st:user_xn1cklas__weather-card","t":"Weather card","d":"Here is Weather Card component","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"user_xn1cklas","st":"indexed","u":47,"pl":"https://cdn.21st.dev/larsen66/weather-card/default/preview.1757008326833.png","pc":"user_xn1cklas","tg":["card","dashboard"]},{"id":"21st:usopp2324__sa7bi","t":"Sa7bi","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, ca","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"usopp2324","st":"indexed","pl":"https://cdn.21st.dev/usopp2324/sa7bi/default/preview.1784947824046-1ba24acd-db4e-44f9-a95a-daf1a69e90b1.webp","pc":"usopp2324"},{"id":"21st:utilcn__download-file","t":"Download file","d":"A button that downloads a file from a storage provider using a presigned download URL.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"utilcn","st":"indexed","pl":"https://cdn.21st.dev/utilcn/download-file/default/preview.1784473896058-739fefac-ed49-45c6-8f0b-61ad6af5c365.png","pc":"utilcn"},{"id":"21st:utilcn__upload-multiple-files","t":"Upload multiple files","d":"A drag-and-drop dropzone to upload multiple files to a storage provider, with per-file previews and upload progress via a presigned upload URL.","k":"component","s":"21st","c":"inputs/file-upload","g":"inputs","a":"utilcn","st":"indexed","pl":"https://cdn.21st.dev/utilcn/upload-multiple-files/default/preview.1784753900711-f1b5d0f9-51c6-4108-9cad-279e14c211a6.png","pc":"utilcn","tg":["progress","upload-download"]},{"id":"21st:utkarsh-singhal-26__orbit-chron-clock","t":"Orbit chron clock","d":"OrbitChron visualizes time through orbiting elements, where each unit of time (hours, minutes, seconds) follows its own path around a central axis. This design brings a sense of mo","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"utkarsh-singhal-26","st":"indexed","pl":"https://cdn.21st.dev/user_2rZg7JIUpaVAo8JyYudQQyLnwss/orbit-chron-clock/orbit-chron-demo/preview.png","pc":"utkarsh-singhal-26"},{"id":"21st:utxo-detective__x-logo","t":"X logo","k":"component","s":"21st","c":"marketing","g":"marketing","a":"utxo-detective","st":"indexed","pl":"https://cdn.21st.dev/user_2tj6wdW3xQrJo1KTdxybzjUd1wI/x-logo/default/preview.png","pc":"utxo-detective"},{"id":"21st:uvaishmohamedn__folder-card","t":"Folder card","d":"A folder-shaped media card. A cover sits behind a folder panel notched over it, title and subtitle in the tab, stats along the bottom. On hover the panel slides down to reveal the ","k":"component","s":"21st","c":"motion/tilt-3d","g":"motion","a":"uvaishmohamedn","st":"indexed","pl":"https://cdn.21st.dev/uvaishmohamedn/folder-card/default/preview.1788958158362-eafdc443-08a3-454c-ad09-94da128c79b7.webp","pc":"uvaishmohamedn"},{"id":"21st:uvaishmohamedn__kanban-board","t":"Kanban board","k":"component","s":"21st","c":"data-display/kanban","g":"data-display","a":"uvaishmohamedn","st":"indexed","pl":"https://cdn.21st.dev/uvaishmohamedn/kanban-board/default/preview.1789031759729-b80b4a24-f370-4c2f-8793-a6b835296345.jpg","pc":"uvaishmohamedn"},{"id":"21st:uvcanvas__xenon-component","t":"Xenon component","d":"Here is Xenon component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"uvcanvas","st":"indexed","pl":"https://cdn.21st.dev/larsen66/xenon-component/default/preview.1756837485378.png","pc":"uvcanvas","tg":["background"]},{"id":"21st:vaib215__3d-floating-phone","t":"3d floating phone","d":"Use this 3d floating phone to showcase your website or application features. Dark and light mode compatible","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/3d-floating-phone/default/preview.1753044206573.png","pc":"vaib215"},{"id":"21st:vaib215__3d-gallery-photography","t":"3d gallery photography","d":"Modern sleek 3D slideshow that showcases a photo gallery created with v0, react three fiber, webgl","k":"component","s":"21st","c":"media/gallery","g":"media","a":"vaib215","st":"indexed","u":149,"pl":"https://cdn.21st.dev/vaib215/3d-gallery-photography/default/preview.1760814200340.png","pc":"vaib215","tg":["gallery"]},{"id":"21st:vaib215__3d-orb","t":"3d orb","d":"Use this color-changing 3d orb in your site to give it a Hi-fi vibes","k":"motion","s":"21st","c":"motion/globe","g":"motion","a":"vaib215","st":"indexed","u":20,"pl":"https://cdn.21st.dev/vaib215/3d-orb/default/preview.1753136168320.png","pc":"vaib215","tg":["globe"]},{"id":"21st:vaib215__accordion-with-picture","t":"Accordion with picture","d":"Use this in your faqs","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/accordion-with-picture/default/preview.1753046230811.png","pc":"vaib215"},{"id":"21st:vaib215__adaptive-pricing-section","t":"Adaptive pricing section","d":"A theme-adaptive pricing component that maintains stunning visual appeal in both light and dark modes. Features glassmorphism cards, gradient elements, and proper contrast ratios f","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","u":29,"pl":"https://cdn.21st.dev/vaib215/adaptive-pricing-section/default/preview.1756417098525.png","pc":"vaib215","tg":["pricing-section","table"]},{"id":"21st:vaib215__animated-ascii-letter-hero","t":"Animated ascii letter hero","d":"Stunning animated ASCII art by entering your custom text and watching it come to life. Easily update the displayed text through an intuitive modal interface, and enjoy a dynamic vi","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/animated-ascii-letter-hero/default/preview.1760817408879.png","pc":"vaib215"},{"id":"21st:vaib215__animated-hero","t":"Animated hero","d":"A fullscreen hero section featuring a dynamic, theme-aware canvas background animation. Ideal for impactful landing pages and product showcases.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/animated-hero/default/preview.1755278215314.png","pc":"vaib215"},{"id":"21st:vaib215__auth-form","t":"Auth form","d":"Grid Auth Form Used While Sign in or Sign up","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"vaib215","st":"rated","u":114,"pl":"https://cdn.21st.dev/user_2rV0b4mwh6SKrMK7lUyQUkzEa92/auth-form/default/preview.1741335708712.png","pc":"vaib215","tg":["sign-in"],"sc":18},{"id":"21st:vaib215__bento-pricing-component","t":"Bento pricing component","d":"A responsive pricing section displaying multiple subscription plans in a bento-style grid layout, featuring a monthly/yearly billing toggle, highlighted \"most popular\" plan, and cu","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","u":16,"pl":"https://cdn.21st.dev/vaib215/bento-pricing-component/default/preview.1756024107978.png","pc":"vaib215","tg":["pricing-section","table","toggle"]},{"id":"21st:vaib215__bubble-text","t":"Bubble text","d":"Add some bubbliness in your text with this","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/bubble-text/default/preview.1753134466924.png","pc":"vaib215"},{"id":"21st:vaib215__cal-com-calendar-ui","t":"Cal com calendar ui","d":"The popular Calendar UI replica from cal.com","k":"component","s":"21st","c":"data-display/calendar","g":"data-display","a":"vaib215","st":"rated","pl":"https://cdn.21st.dev/vaib215/cal-com-calendar-ui/default/preview.1759690906250.png","pc":"vaib215","sc":23},{"id":"21st:vaib215__category-list","t":"Category list","d":"An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more ","k":"component","s":"21st","c":"data-display/list","g":"data-display","a":"vaib215","st":"indexed","u":170,"pl":"https://cdn.21st.dev/vaib215/category-list/default/preview.1754939785531.png","pc":"vaib215","tg":["features","list","navigation-menu"]},{"id":"21st:vaib215__color-change-card","t":"Color change card","d":"This is an animated card component that uses framer motion and has a color-changing animation on hover. Use for feature sections.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"vaib215","st":"indexed","u":86,"pl":"https://cdn.21st.dev/vaib215/color-change-card/default/preview.1754249731593.png","pc":"vaib215","tg":["features","grid","image"]},{"id":"21st:vaib215__cosmos-3d-orbit-gallery","t":"Cosmos 3d orbit gallery","d":"hero section that showcases a 3d orbit of images and particles resembling the cosmos","k":"component","s":"21st","c":"media/gallery","g":"media","a":"vaib215","st":"indexed","u":53,"pl":"https://cdn.21st.dev/vaib215/cosmos-3d-orbit-gallery/default/preview.1760815255516.png","pc":"vaib215","tg":["gallery"]},{"id":"21st:vaib215__cute-ui-buttons","t":"Cute ui buttons","d":"Add some 🥰 cuteness to your site with cute ui. You're gonna love it.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/cute-ui-buttons/default/preview.1752904065964.png","pc":"vaib215"},{"id":"21st:vaib215__dark-gradient-pricing","t":"Dark gradient pricing","d":"A pricing table component with a glass effect and animated cards, perfect for displaying tiered pricing plans and feature comparisons.\n\nFeatures\n- Responsive design with mobile-fir","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","u":454,"pl":"https://cdn.21st.dev/user_2rV0b4mwh6SKrMK7lUyQUkzEa92/dark-gradient-pricing.png","pc":"vaib215","tg":["comparison","pricing-section"]},{"id":"21st:vaib215__dynamic-frames","t":"Dynamic frames","d":"Add some dynamicity to your website with these dynamic frame layouts","k":"component","s":"21st","c":"other","g":"other","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/dynamic-frames/default/preview.1753175693082.png","pc":"vaib215"},{"id":"21st:vaib215__emoji-feedback-form","t":"Emoji feedback form","d":"The component features smooth animations, hover effects, and a polished design with gradient backgrounds. It includes a rating system with emoji reactions, an optional feedback tex","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"vaib215","st":"rated","pl":"https://cdn.21st.dev/vaib215/emoji-feedback-form/default/preview.1761993280445.png","pc":"vaib215","sc":18},{"id":"21st:vaib215__event-manager","t":"Event manager","k":"component","s":"21st","c":"inputs/date-picker","g":"inputs","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/event-manager/default/preview.1760640393494.png","pc":"vaib215","tg":["calendar"]},{"id":"21st:vaib215__expanding-cards","t":"Expanding cards","d":"An interactive, responsive card grid where one card expands on hover, focus, or click to reveal its content, while the others collapse. It is fully responsive, transitioning from a","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"vaib215","st":"indexed","u":87,"pl":"https://cdn.21st.dev/vaib215/expanding-cards/default/preview.1755290296595.png","pc":"vaib215","tg":["gallery","grid","image"]},{"id":"21st:vaib215__faq-tabs","t":"Faq tabs","d":"Replace the boring accordion with these cool animated ones.","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"vaib215","st":"indexed","u":216,"pl":"https://cdn.21st.dev/vaib215/faq-tabs/default/preview.1753044916341.png","pc":"vaib215","tg":["accordion","faq","tabs"]},{"id":"21st:vaib215__feedback-modal","t":"Feedback modal","d":"A polished feedback modal component with an enhanced UI that takes inspiration from the Mixpanel design. The component features smooth animations, a clean layout with thumbs up/dow","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/feedback-modal/default/preview.1761999166552.png","pc":"vaib215"},{"id":"21st:vaib215__flip-links","t":"Flip links","d":"Get your site some awwwards level link hover animation with pure css, no framer motion.","k":"component","s":"21st","c":"actions/link","g":"actions","a":"vaib215","st":"indexed","u":111,"pl":"https://cdn.21st.dev/vaib215/flip-links/default/preview.1749853959211.png","pc":"vaib215","tg":["link"]},{"id":"21st:vaib215__flow-hover-button","t":"Flow hover button","d":"Add some smooth sleek button hover animation to your site without any external dependencies, just pure tailwind css.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"vaib215","st":"indexed","u":94,"pl":"https://cdn.21st.dev/vaib215/flow-hover-button/default/preview.1753997090588.png","pc":"vaib215"},{"id":"21st:vaib215__hero-with-product-mockup","t":"Hero with product mockup","d":"Showcase your product in front of users and shine","k":"layout","s":"21st","c":"layout/dashboard","g":"layout","a":"vaib215","st":"indexed","u":39,"pl":"https://cdn.21st.dev/vaib215/hero-with-product-mockup/default/preview.1753822142444.png","pc":"vaib215","tg":["dashboard","cta"]},{"id":"21st:vaib215__hover-button","t":"Hover button","d":"Hover Button with some nice animation","k":"component","s":"21st","c":"actions/button","g":"actions","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/hover-button/default/preview.1752954310551.png","pc":"vaib215"},{"id":"21st:vaib215__hover-link-card","t":"Hover link card","d":"Replace all your brand cards with these amazing animated hover cards made with framer motion","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/hover-link-card/default/preview.1749854758203.png","pc":"vaib215"},{"id":"21st:vaib215__hover-testimonial-card","t":"Hover testimonial card","d":"A sophisticated testimonial card component featuring smooth hover animations, supporter avatars grid, and elegant typography. Perfect for showcasing customer feedback with visual i","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"vaib215","st":"indexed","u":27,"pl":"https://cdn.21st.dev/vaib215/hover-testimonial-card/default/preview.1756415750335.png","pc":"vaib215","tg":["testimonials"]},{"id":"21st:vaib215__link-shortner","t":"Link shortner","d":"A sleek link shortner component with transform animations","k":"component","s":"21st","c":"actions/link","g":"actions","a":"vaib215","st":"indexed","u":16,"pl":"https://cdn.21st.dev/vaib215/link-shortner/default/preview.1755889753700.png","pc":"vaib215","tg":["link"]},{"id":"21st:vaib215__liquid-glass-button","t":"Liquid glass button","d":"Experience the liquid glass in your application with this UI Component.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/liquid-glass-button/default/preview.1752909730547.png","pc":"vaib215"},{"id":"21st:vaib215__lms-course-video-player","t":"Lms course video player","d":"Get an amazing lms course video player. Integrate this in your learning website and go live instantly. Videojs powered video player included with theme aware ui,","k":"component","s":"21st","c":"media/player","g":"media","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/lms-course-video-player/default/preview.1759753711482.png","pc":"vaib215"},{"id":"21st:vaib215__logo-particles","t":"Logo particles","d":"Make your brand logo stand apart with this amazing scatter on hover particle animation.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vaib215","st":"indexed","u":32,"pl":"https://cdn.21st.dev/vaib215/logo-particles/default/preview.1753428014191.png","pc":"vaib215"},{"id":"21st:vaib215__neo-brutalism","t":"Neo brutalism","d":"Get some boldness into your site with neobrutalism","k":"component","s":"21st","c":"other","g":"other","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/neo-brutalism/default/preview.1752903585279.png","pc":"vaib215"},{"id":"21st:vaib215__particle-background-hero","t":"Particle background hero","d":"A bold, aesthetic-driven venture capital brand experience built for the modern web. This combines immersive shaders and WebGL-powered particle systems to create a financial brand p","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/particle-background-hero/default/preview.1760816774739.png","pc":"vaib215"},{"id":"21st:vaib215__pixeleted-404-not-found","t":"Pixeleted 404 not found","d":"$39","k":"component","s":"21st","c":"other","g":"other","a":"vaib215","st":"indexed","u":122,"pl":"https://cdn.21st.dev/vaib215/pixeleted-404-not-found/default/preview.1760644786287.png","pc":"vaib215"},{"id":"21st:vaib215__pricing-section","t":"Pricing section","d":"A comprehensive, responsive pricing section component that replicates modern SaaS pricing layouts. Features three-tier pricing cards with customizable badges, feature lists with ch","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/pricing-section/default/preview.1756416616111.png","pc":"vaib215"},{"id":"21st:vaib215__pricing-table","t":"Pricing table","d":"A comprehensive pricing section component featuring four customizable pricing tiers with support for monthly/annual billing toggles, credit selection dropdowns, feature lists with ","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","u":41,"pl":"https://cdn.21st.dev/vaib215/pricing-table/default/preview.1760601385946.png","pc":"vaib215","tg":["pricing-section","table"]},{"id":"21st:vaib215__pricing-trial-modal","t":"Pricing trial modal","d":"A sophisticated pricing trial modal component with a dark theme inspired by Riverside's interface. The component features a split layout with pricing plans on the left (including r","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/pricing-trial-modal/default/preview.1762058811371.png","pc":"vaib215"},{"id":"21st:vaib215__reddit-nested-thread-reply","t":"Reddit nested thread reply","d":"A responsive and theme-adaptive, Reddit-style nested comment system. It supports voting, replying, collapsing threads, and adding new comments, built with shadcn/ui components.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/reddit-nested-thread-reply/default/preview.1755468699183.png","pc":"vaib215","tg":["avatar","file-tree"]},{"id":"21st:vaib215__seo-research-landing","t":"Seo research landing","d":"Modern dark-themed SEO research tool landing page with data tables, glassmorphic Ul, and gradient accents","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/seo-research-landing/default/preview.1760562063999.png","pc":"vaib215"},{"id":"21st:vaib215__shiny-card","t":"Shiny card","d":"An amazing animated card to use in your app","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/shiny-card/default/preview.1752954756655.png","pc":"vaib215"},{"id":"21st:vaib215__shopping-cart","t":"Shopping cart","d":"A comprehensive UI component for displaying items in a shopping cart, allowing users to adjust quantities, remove items, and view a detailed cost summary.","k":"component","s":"21st","c":"other","g":"other","a":"vaib215","st":"indexed","u":50,"pl":"https://cdn.21st.dev/vaib215/shopping-cart/default/preview.1755785328626.png","pc":"vaib215"},{"id":"21st:vaib215__shuffle-grid","t":"Shuffle grid","d":"An eye-catching presentation element which you can use to showcase your clients, users, features or whatever you like.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"vaib215","st":"indexed","u":268,"pl":"https://cdn.21st.dev/vaib215/shuffle-grid/default/preview.1774359471023.png","pc":"vaib215","tg":["cta","gallery","hero"]},{"id":"21st:vaib215__smooth-scroll-parallax-effect","t":"Smooth scroll parallax effect","d":"Get a nice landing page with smooth scroll with lenis and parallax effect","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/smooth-scroll-parallax-effect/default/preview.1753045633329.png","pc":"vaib215"},{"id":"21st:vaib215__spinning-logos","t":"Spinning logos","d":"Give some movements to those boring logos of your clients or users and bring that landing page to life. No framer motion used.","k":"section","s":"21st","c":"marketing/logos","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/spinning-logos/default/preview.1748205787929.png","pc":"vaib215"},{"id":"21st:vaib215__squishy-pricing","t":"Squishy pricing","d":"No more boring pricing component, bring some \"framer\" motion to your pricing component to make it stand out.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"vaib215","st":"indexed","u":72,"pl":"https://cdn.21st.dev/vaib215/squishy-pricing/default/preview.1749448006135.png","pc":"vaib215","tg":["pricing-section"]},{"id":"21st:vaib215__stack-overflow-q-a-interface","t":"Stack overflow q a interface","k":"section","s":"21st","c":"marketing/faq","g":"marketing","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/stack-overflow-q-a-interface/default/preview.1755469909092.png","pc":"vaib215"},{"id":"21st:vaib215__stagger-testimonials","t":"Stagger testimonials","d":"Testimonial Component that stands apart from the boring boxes of quotes. Dark mode compatible, no frame motion used.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"vaib215","st":"indexed","u":867,"pl":"https://cdn.21st.dev/user_2rV0b4mwh6SKrMK7lUyQUkzEa92/stagger-testimonials/default/preview.1748453527935.png","pc":"vaib215","tg":["carousel","testimonials"]},{"id":"21st:vaib215__step-based-onboarding-flow","t":"Step based onboarding flow","d":"A multi-step user onboarding component with Zod validation, progress tracking, and a delightful completion animation. Features include field validation, error handling, confetti ce","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/step-based-onboarding-flow/default/preview.1760726940176.png","pc":"vaib215"},{"id":"21st:vaib215__todo-task-management","t":"Todo task management","d":"A very minimal, yet functional, animated todo component that will catch user's attention.","k":"component","s":"21st","c":"inputs/checkbox","g":"inputs","a":"vaib215","st":"rated","pl":"https://cdn.21st.dev/vaib215/todo-task-management/default/preview.1760728587098.png","pc":"vaib215","tg":["checkbox","list"],"sc":23},{"id":"21st:vaib215__twitter-tweet-composer","t":"Twitter tweet composer","d":"A feature-rich, animated tweet composer with character limits, thread creation, auto-resizing textareas, and modern UI interactions","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/twitter-tweet-composer/default/preview.1756059087186.png","pc":"vaib215"},{"id":"21st:vaib215__velocity-text","t":"Velocity text","d":"Bring some fluid & motion physics to your text to make it feel real. A framer motion enhanced spring animation for text on scroll.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"vaib215","st":"indexed","u":29,"pl":"https://cdn.21st.dev/vaib215/velocity-text/default/preview.1749447572541.png","pc":"vaib215"},{"id":"21st:vaib215__web-ide-online-code-editor","t":"Web ide online code editor","k":"component","s":"21st","c":"data-display/code-block","g":"data-display","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/web-ide-online-code-editor/default/preview.1760559007380.png","pc":"vaib215"},{"id":"21st:vaib215__wet-paint-button","t":"Wet paint button","d":"Add some liquid (not glass) to your ui with this amazing wet paint button.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"vaib215","st":"indexed","pl":"https://cdn.21st.dev/vaib215/wet-paint-button/default/preview.1753943861761.png","pc":"vaib215"},{"id":"21st:varunjat640__auth-eye","t":"Auth eye","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"varunjat640","st":"indexed","pl":"https://cdn.21st.dev/varunjat640/auth-eye/default/preview.1761421022544.png","pc":"varunjat640"},{"id":"21st:vercel-crawled__actions","t":"Actions","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/actions","pc":"vercel-crawled"},{"id":"21st:vercel-crawled__announcement","t":"Announcement","d":"Announcement in Sidebar","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"vercel-crawled","st":"indexed","u":54,"pl":"https://21st.dev/@vercel-crawled/components/announcement","pc":"vercel-crawled","tg":["announcement","sidebar"]},{"id":"21st:vercel-crawled__code-block","t":"Code block","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/code-block","pc":"vercel-crawled"},{"id":"21st:vercel-crawled__conversation","t":"Conversation","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/conversation","pc":"vercel-crawled","tg":["ai-chat"]},{"id":"21st:vercel-crawled__inline-citation","t":"Inline citation","k":"component","s":"21st","c":"actions/link","g":"actions","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/inline-citation","pc":"vercel-crawled","tg":["ai-chat","carousel","link"]},{"id":"21st:vercel-crawled__loader","t":"Loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/loader","pc":"vercel-crawled","tg":["spinner"]},{"id":"21st:vercel-crawled__message","t":"Message","k":"component","s":"21st","c":"data-display/avatar","g":"data-display","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/message","pc":"vercel-crawled","tg":["ai-chat","avatar"]},{"id":"21st:vercel-crawled__promt-input","t":"Promt input","k":"component","s":"21st","c":"inputs/textarea","g":"inputs","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/promt-input","pc":"vercel-crawled","tg":["textarea"]},{"id":"21st:vercel-crawled__sources","t":"Sources","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/sources","pc":"vercel-crawled","tg":["ai-chat"]},{"id":"21st:vercel-crawled__suggestion","t":"Suggestion","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/suggestion","pc":"vercel-crawled","tg":["ai-chat","chip"]},{"id":"21st:vercel-crawled__task","t":"Task","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"vercel-crawled","st":"indexed","pl":"https://21st.dev/@vercel-crawled/components/task","pc":"vercel-crawled","tg":["ai-chat"]},{"id":"21st:victorwelander__expandable-tabs","t":"Expandable tabs","d":"A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab.\n\nFeatures\n- ","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"victorwelander","st":"indexed","u":2176,"pl":"https://cdn.21st.dev/user_victorwelander/expandable-tabs.png","pc":"victorwelander","tg":["tabs"]},{"id":"21st:victorwelander__gooey-text-morphing","t":"Gooey text morphing","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"victorwelander","st":"indexed","pl":"https://cdn.21st.dev/user_victorwelander/gooey-text-morphing.png","pc":"victorwelander","tg":["text"]},{"id":"21st:victorwelander__nested-dialog","t":"Nested dialog","d":"$34","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"victorwelander","st":"rated","u":137,"pl":"https://cdn.21st.dev/user_victorwelander/nested-dialog.png","pc":"victorwelander","tg":["modal","radio-group"],"sc":20},{"id":"21st:victorwelander__upgrade-banner","t":"Upgrade banner","d":"An animated promotional banner component with floating gear icons and hover effects. Inspired by Vercel's upgrade prompts.\n\nFeatures\n- Smooth entrance animation\n- Interactive float","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"victorwelander","st":"indexed","u":210,"pl":"https://cdn.21st.dev/user_victorwelander/upgrade-banner.png","pc":"victorwelander","tg":["announcement"]},{"id":"21st:vilseekumar__caustics-shader","t":"Caustics shader","d":"Animated WebGL shader background in the Caustics style. Generated by the 21st.dev Shader Builder. 4-color palette (#001219, #005F73, #94D2BD, #E9D8A6). A drop-in, zero-dependency R","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vilseekumar","st":"indexed","pl":"https://cdn.21st.dev/vilseekumar/caustics-shader/default/preview.1785611725013-fe9651ea-f57f-4cb9-9d9b-9cbc5c459296.webp","pc":"vilseekumar"},{"id":"21st:vilseekumar__waves-shader","t":"Waves shader","d":"Animated WebGL shader background in the Waves style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#03192","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vilseekumar","st":"indexed","pl":"https://cdn.21st.dev/vilseekumar/waves-shader/default/preview.1785611744702-43cbc147-6325-4ccd-974f-77293c2e31f5.webp","pc":"vilseekumar"},{"id":"21st:vinicius.possato__agents-odyssey","t":"Agents odyssey","d":"Animated (flicker) ASCII art in the Characters style, made with the 21st ASCII editor and baked to a looping video. Styled with a terminal look. A drop-in, zero-dependency React co","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vinicius.possato","st":"indexed","pl":"https://cdn.21st.dev/vinicius.possato/agents-odyssey/default/preview.1786501250978-695bdffb-7f37-4571-8358-173e45934c04.webp","pc":"vinicius.possato"},{"id":"21st:vinny_b0b96136__arch-gallery","t":"Arch gallery","d":"Fanned photo arch with center-forward stacking; hover lifts a card and scales it up.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"vinny_b0b96136","st":"indexed","pl":"https://cdn.21st.dev/vinny_b0b96136/arch-gallery/default/preview.1786569665296-77f5e280-d113-43b5-b72f-22fda8ebcb91.png","pc":"vinny_b0b96136","tg":["gallery","image"]},{"id":"21st:viterna__2-gradient","t":"2 gradient","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#A8F0C8, #34B2D7, #345CB5, #121519). Features: vignette. A drop-in, z","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"viterna","st":"indexed","pl":"https://cdn.21st.dev/viterna/2-gradient/default/preview.1785745556297-19427e63-b705-4f08-9c79-f6e0b69ce260.png","pc":"viterna"},{"id":"21st:viterna__blue-viterna","t":"Blue viterna","d":"Pure CSS gradient background in the Core Glow style, made with the 21st.dev Gradient Builder. 4-color palette (#F7F3FF, #9BB8F0, #5E5CC0, #1B1740). Features: vignette. A drop-in, z","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"viterna","st":"indexed","pl":"https://cdn.21st.dev/viterna/blue-viterna/default/preview.1785745547396-1c172a87-e612-494a-8a56-ef38ed214221.png","pc":"viterna"},{"id":"21st:vnantes__shader-state","t":"Shader state","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#0B1026, #3D46E8, #B18CFF, #FFD6E7). A drop-in, zero-dependency","k":"component","s":"21st","c":"data-display/stat","g":"data-display","a":"vnantes","st":"indexed","pl":"https://cdn.21st.dev/vnantes/shader-state/default/preview.1784292404083-fd269f73-4b2e-4451-8a05-5e5738973889.webp","pc":"vnantes"},{"id":"21st:vodichka.vldk__dark","t":"Dark","d":"Animated WebGL shader background in the Orb style, generated by the 21st.dev Shader Builder. 4-color palette (#685012, #4F5214, #5B023F, #481717). Features: high intensity. A drop-","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"vodichka.vldk","st":"indexed","u":5,"pl":"https://cdn.21st.dev/vodichka.vldk/dark/default/preview.1783831657299.webp","pc":"vodichka.vldk"},{"id":"21st:vodichka.vldk__reptile-smoke","t":"Reptile smoke","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#0D1B0F, #3E8E41, #C7F464, #FFFDE1). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"vodichka.vldk","st":"indexed","u":7,"pl":"https://cdn.21st.dev/vodichka.vldk/reptile-smoke/default/preview.1783831602258.webp","pc":"vodichka.vldk","tg":["cursor"]},{"id":"21st:voxlet-ui__button-download","t":"Button download","d":"Here is download button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"voxlet-ui","st":"indexed","u":56,"pl":"https://cdn.21st.dev/larsen66/button-download/default/preview.1750167943742.png","pc":"voxlet-ui"},{"id":"21st:voxlet-ui__flip-coin-button","t":"Flip coin button","d":"Here is flip coin button component","k":"component","s":"21st","c":"actions/button","g":"actions","a":"voxlet-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/flip-coin-button/default/preview.1750168079194.png","pc":"voxlet-ui","tg":["button"]},{"id":"21st:voxlet-ui__magic-wand","t":"Magic wand","d":"Here is magic wand component","k":"component","s":"21st","c":"media/gallery","g":"media","a":"voxlet-ui","st":"indexed","pl":"https://cdn.21st.dev/larsen66/magic-wand/default/preview.1750167517164.png","pc":"voxlet-ui","tg":["gallery"]},{"id":"21st:voxlet-ui__space-box","t":"Space box","d":"Here is space box animated component","k":"motion","s":"21st","c":"motion/marquee","g":"motion","a":"voxlet-ui","st":"indexed","u":11,"pl":"https://cdn.21st.dev/larsen66/space-box/default/preview.1750167618510.png","pc":"voxlet-ui","tg":["marquee"]},{"id":"21st:voxlet-ui__tube-light-navbar","t":"Tube light navbar","d":"Here is tube light navbar comopnent","k":"component","s":"21st","c":"navigation/top-nav","g":"navigation","a":"voxlet-ui","st":"indexed","u":47,"pl":"https://cdn.21st.dev/larsen66/tube-light-navbar/default/preview.1750167745717.png","pc":"voxlet-ui","tg":["navigation-menu"]},{"id":"21st:w9ptt__asd","t":"Asd","d":"Pure CSS gradient background in the Axis Blend style, made with the 21st.dev Gradient Builder. 2-color palette (#000428, #004E92). Features: soft blur finish. A drop-in, zero-depen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"w9ptt","st":"indexed","pl":"https://cdn.21st.dev/w9ptt/asd/default/preview.1786557346291-c88e381e-6bb5-48dc-b5ad-0eed3b61705c.webp","pc":"w9ptt"},{"id":"21st:waleedkibhen__404-page-error","t":"404 page error","d":"A clean, production-ready 404 / Not Found page for React/Next/Vite projects. Built with Tailwind CSS and Lucide icons, it ships with a floating animated hero, buttery-smooth micro-","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"waleedkibhen","st":"indexed","pl":"https://cdn.21st.dev/waleedkibhen/404-page-error/default/preview.1758743218032.png","pc":"waleedkibhen","tg":["button","empty-state","toggle"]},{"id":"21st:waleedkibhen__electric-shader","t":"Electric shader","k":"component","s":"21st","c":"motion/background","g":"motion","a":"waleedkibhen","st":"indexed","pl":"https://cdn.21st.dev/waleedkibhen/electric-shader/default/preview.1757497300375.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__generating-loader","t":"Generating loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"waleedkibhen","st":"indexed","pl":"https://cdn.21st.dev/waleedkibhen/generating-loader/default/preview.1757269297357.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__glassmorphism-debit-credit","t":"Glassmorphism debit credit","d":"A modern credit card UI component with a glassmorphism effect, floating animated blue light orbs, and a sleek dark background. Fully responsive and built using Tailwind CSS and Rea","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"waleedkibhen","st":"indexed","pl":"https://cdn.21st.dev/waleedkibhen/glassmorphism-debit-credit/default/preview.1748947531193.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__glow-button","t":"Glow button","d":"A clean glowing button that pops off the screen. On hover, a subtle glare slides across the surface, giving it that shiny, futuristic vibe. It also reacts with a soft press animati","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"waleedkibhen","st":"indexed","u":187,"pl":"https://cdn.21st.dev/waleedkibhen/glow-button/default/preview.1755775445815.png","pc":"waleedkibhen","tg":["cta"]},{"id":"21st:waleedkibhen__gradient-bar-hero-section","t":"Gradient bar hero section","d":"$34","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"waleedkibhen","st":"indexed","u":113,"pl":"https://cdn.21st.dev/user_2wXKnbD82Toyddx7d1YSlQ8DuJ5/gradient-bar-hero-section/default/preview.1748390499759.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__gradient-bars-background","t":"Gradient bars background","d":"A stunning, fully customizable animated gradient bars background component for modern React applications. Perfect for hero sections, landing pages, and eye-catching website backgro","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"waleedkibhen","st":"indexed","u":75,"pl":"https://cdn.21st.dev/waleedkibhen/gradient-bars-background/default/preview.1785451492973-edd1a410-2b09-4fcd-a29d-ee5f00543999.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__image-auto-slider","t":"Image auto slider","d":"A smooth looping image slider that shows different nature scenes one after the other. The images gently slide from left to right in a continuous flow. Great for adding a calm and m","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"waleedkibhen","st":"indexed","u":505,"pl":"https://cdn.21st.dev/waleedkibhen/image-auto-slider/default/preview.1748609265160.png","pc":"waleedkibhen","tg":["carousel","gallery","marquee","slider"]},{"id":"21st:waleedkibhen__matrix-code-rain","t":"Matrix code rain","d":"A fully customizable Matrix code rain animation with a settings menu that lets you change the font size speed density and color of the falling code. Smooth flowing and perfect for ","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"waleedkibhen","st":"indexed","u":32,"pl":"https://cdn.21st.dev/waleedkibhen/matrix-code-rain/default/preview.1785458045364-96652c19-5955-47ff-b411-be98eddb0e2c.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__portfolio-hero","t":"Portfolio hero","d":"Animated Portfolio Hero Section - Bold Name with Profile Image Overlay\nA striking, modern portfolio hero component featuring animated blur-in text effects and a profile image overl","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"waleedkibhen","st":"indexed","u":234,"pl":"https://cdn.21st.dev/user_2wXKnbD82Toyddx7d1YSlQ8DuJ5/portfolio-hero/default/preview.1786400523912.webp","pc":"waleedkibhen","tg":["hero","profile"]},{"id":"21st:waleedkibhen__profile-card","t":"Profile card","d":"A sleek, modern profile card UI showcasing a user’s name, avatar, username, and recent activity time. Includes a call-to-action button to add the member. Designed with rounded corn","k":"component","s":"21st","c":"data-display/profile","g":"data-display","a":"waleedkibhen","st":"indexed","u":64,"pl":"https://cdn.21st.dev/waleedkibhen/profile-card/default/preview.1749188269633.png","pc":"waleedkibhen","tg":["profile"]},{"id":"21st:waleedkibhen__progressive-blur-card","t":"Progressive blur card","d":"Progressive Blur Card\nA clean and modern card component with a smooth progressive blur effect that makes images pop while keeping text perfectly readable. Great for travel apps, po","k":"component","s":"21st","c":"media/gallery","g":"media","a":"waleedkibhen","st":"indexed","u":27,"pl":"https://cdn.21st.dev/waleedkibhen/progressive-blur-card/default/preview.1756586621938.png","pc":"waleedkibhen","tg":["image"]},{"id":"21st:waleedkibhen__reading-text-reveal","t":"Reading text reveal","d":"A beautiful scroll-based text reveal component for React that progressively highlights words as you scroll. Perfect for storytelling, landing pages, and engaging narratives. Featur","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"waleedkibhen","st":"indexed","u":17,"pl":"https://cdn.21st.dev/waleedkibhen/reading-text-reveal/default/preview.1761742819399.png","pc":"waleedkibhen","tg":["scroll-area"]},{"id":"21st:waleedkibhen__retro-grid","t":"Retro grid","d":"\nA stunning animated retro grid component with customizable colors, scanlines, and neon glow effects. Perfect for synthwave, vaporwave, and cyberpunk UI designs. Features smooth 3D","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"waleedkibhen","st":"indexed","u":45,"pl":"https://cdn.21st.dev/waleedkibhen/retro-grid/default/preview.1761127939074.png","pc":"waleedkibhen","tg":["grid"]},{"id":"21st:waleedkibhen__saa-s-template","t":"Saa s template","d":"Modern Hero Section with Navigation - Dark Theme Landing Page Component\nA sleek, production-ready hero section with fixed navigation bar, perfect for SaaS landing pages and modern ","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"waleedkibhen","st":"indexed","u":353,"pl":"https://cdn.21st.dev/waleedkibhen/saa-s-template/default/preview.1760472833620.png","pc":"waleedkibhen","tg":["announcement","dashboard","hero"]},{"id":"21st:waleedkibhen__silk-background-animation","t":"Silk background animation","d":"flowing silk background animation, animated hero section, react background animation, three.js shader hero background, css background animation fallback, glsl web background, reali","k":"component","s":"21st","c":"status/loader","g":"status","a":"waleedkibhen","st":"indexed","u":213,"pl":"https://cdn.21st.dev/waleedkibhen/silk-background-animation/default/preview.1749585145102.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__spotlight-button","t":"Spotlight button","d":"A modern and minimal bottom navigation bar with smooth spotlight effects on hover. Simple icons and subtle motion give it a polished feel that's perfect for clean UI designs.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"waleedkibhen","st":"indexed","u":63,"pl":"https://cdn.21st.dev/waleedkibhen/spotlight-button/default/preview.1748618532533.png","pc":"waleedkibhen","tg":["dock"]},{"id":"21st:waleedkibhen__tech-hero","t":"Tech hero","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"waleedkibhen","st":"indexed","pl":"https://cdn.21st.dev/waleedkibhen/tech-hero/default/preview.1758476089090.png","pc":"waleedkibhen"},{"id":"21st:waleedkibhen__underline-hero-section","t":"Underline hero section","d":"This sleek hero section showcases a modern SaaS landing page that immediately captures attention. The bold headline \"A Simple Hero For Your SaaS Success\" features elegant typograph","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"waleedkibhen","st":"indexed","u":62,"pl":"https://cdn.21st.dev/waleedkibhen/underline-hero-section/default/preview.1759671673115.png","pc":"waleedkibhen","tg":["cta","hero"]},{"id":"21st:warren__blue-gold-mesh","t":"Blue gold mesh","d":"Animated WebGL shader background in the Mesh drift style, generated by the 21st.dev Shader Builder. 4-color palette (#FFBF00, #050514, #F3B007, #2600FB). Features: cursor-reactive ","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"warren","st":"indexed","u":6,"pl":"https://cdn.21st.dev/warren/blue-gold-mesh/default/preview.1784209568739-6d9593b8-928f-4f9b-b3dd-efc17b6a6262.webp","pc":"warren","tg":["cursor"]},{"id":"21st:wasifgee0012__pre-loader","t":"Pre loader","k":"component","s":"21st","c":"status/loader","g":"status","a":"wasifgee0012","st":"indexed","pl":"https://cdn.21st.dev/wasifgee0012/pre-loader/default/preview.1760615044113.png","pc":"wasifgee0012"},{"id":"21st:wasifgee0012__social-links","t":"Social links","d":"A fully responsive and theme-aware social media links component that displays a vertical sidebar on desktop and a floating expandable dock on mobile.\nEach link is styled with platf","k":"component","s":"21st","c":"actions/link","g":"actions","a":"wasifgee0012","st":"indexed","u":36,"pl":"https://cdn.21st.dev/wasifgee0012/social-links/default/preview.1760594172007.png","pc":"wasifgee0012","tg":["dock","link","sidebar"]},{"id":"21st:wastetoken47__copperpatina-tsx","t":"Copperpatina tsx","d":"Webgl Background with subtle movement","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"wastetoken47","st":"indexed","pl":"https://cdn.21st.dev/wastetoken47/copperpatina-tsx/default/preview.1767300367941.png","pc":"wastetoken47"},{"id":"21st:wastetoken47__shadergen-tsx","t":"Shadergen tsx","d":"a 3d webgl generator ","k":"component","s":"21st","c":"motion/background","g":"motion","a":"wastetoken47","st":"indexed","pl":"https://cdn.21st.dev/wastetoken47/shadergen-tsx/default/preview.1767305110985.png","pc":"wastetoken47"},{"id":"21st:wecr8cr8__dd","t":"Dd","d":"Animated (flicker) ASCII art in the Hexagons style, made with the 21st ASCII editor and baked to a looping video. Styled with a neon look. A drop-in, zero-dependency React componen","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"wecr8cr8","st":"indexed","pl":"https://cdn.21st.dev/wecr8cr8/dd/default/preview.1786449051088-91287a24-5839-4359-8d2e-0c83d32cf68e.webp","pc":"wecr8cr8"},{"id":"21st:weesl__wesley-agan","t":"Wesley agan","d":"a small tooken","k":"component","s":"21st","c":"other","g":"other","a":"weesl","st":"indexed","pl":"https://cdn.21st.dev/weesl/wesley-agan/default/preview.1748782193347.png","pc":"weesl"},{"id":"21st:weesl__wessley-agan","t":"Wessley agan","d":"this is a cursor splashy effect","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"weesl","st":"indexed","pl":"https://cdn.21st.dev/weesl/wessley-agan/default/preview.1748782568921.png","pc":"weesl"},{"id":"21st:whyte25__animated-review-card","t":"Animated review card","d":"Here is Animated Review Card components","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"whyte25","st":"indexed","u":16,"pl":"https://cdn.21st.dev/larsen66/animated-review-card/default/preview.1756781837436.png","pc":"whyte25","tg":["avatar","carousel","border","testimonials"]},{"id":"21st:whyte25__floating-elements","t":"Floating elements","d":"Here is Floating Elements component","k":"section","s":"21st","c":"marketing/footer","g":"marketing","a":"whyte25","st":"indexed","pl":"https://cdn.21st.dev/larsen66/floating-elements/default/preview.1756781292792.png","pc":"whyte25"},{"id":"21st:willianquintino__daisy-ui-badge","t":"Daisy ui badge","d":"Badges are used to inform the user of the status of specific data.","k":"component","s":"21st","c":"data-display/badge","g":"data-display","a":"willianquintino","st":"indexed","pl":"https://cdn.21st.dev/willianquintino/daisy-ui-badge/default/preview.1756156422666.png","pc":"willianquintino"},{"id":"21st:willianquintino__daisy-ui-button","t":"Daisy ui button","d":"Buttons allow the user to take actions or make choices.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"willianquintino","st":"indexed","pl":"https://cdn.21st.dev/willianquintino/daisy-ui-button/default/preview.1756127243819.png","pc":"willianquintino"},{"id":"21st:willianquintino__daisy-ui-tooltip","t":"Daisy ui tooltip","d":"Tooltip can be used to show a message when hovering over an element.","k":"component","s":"21st","c":"overlays/tooltip","g":"overlays","a":"willianquintino","st":"indexed","pl":"https://cdn.21st.dev/willianquintino/daisy-ui-tooltip/default/preview.1756493213368.png","pc":"willianquintino"},{"id":"21st:witeri3282__animated-text-hero","t":"Animated text hero","d":"A visually rich hero section with animated typing text, glowing orbs, floating particles, and subtle 3D mouse interaction. Designed for modern landing pages to create an engaging f","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"witeri3282","st":"indexed","pl":"https://cdn.21st.dev/witeri3282/animated-text-hero/default/preview.1776427269188.png","pc":"witeri3282"},{"id":"21st:witharc__logo-carousel","t":"Logo carousel","d":"An animated logo carousel that cycles brand logos in staggered slots with blur transitions, image preloading, responsive slot counts, and reduced-motion support.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"witharc","st":"indexed","u":2,"pl":"https://cdn.21st.dev/witharc/logo-carousel/default/preview.1784430890767-64ab995c-f7fe-4fd5-bff4-6a3f0eb74e65.png","pc":"witharc","tg":["carousel","marquee"]},{"id":"21st:xapski2671__fullscreen-navigation-menu","t":"Fullscreen navigation menu","d":"A fulllscreen navigation menu with cool transitions and hover effects","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"xapski2671","st":"indexed","pl":"https://cdn.21st.dev/xapski2671/fullscreen-navigation-menu/default/preview.1753254026084.png","pc":"xapski2671"},{"id":"21st:xapski2671__hero","t":"Hero","d":"Hero reveal animations","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"xapski2671","st":"indexed","pl":"https://cdn.21st.dev/xapski2671/hero/default/preview.1753960440318.png","pc":"xapski2671"},{"id":"21st:xeven777__contact-form","t":"Contact form","d":"Beautiful contact form with interactive 3D globe","k":"component","s":"21st","c":"inputs/form-field","g":"inputs","a":"xeven777","st":"indexed","pl":"https://cdn.21st.dev/user_2rwqO2lcBMtYujZnAEjto5JRqYX/contact-form/contact/preview.png","pc":"xeven777"},{"id":"21st:xingfing__bubble-website12","t":"Bubble website12","d":"bubble animation website","k":"component","s":"21st","c":"other","g":"other","a":"xingfing","st":"indexed","pl":"https://cdn.21st.dev/xingfing/bubble-website12/default/preview.1747251240723.png","pc":"xingfing"},{"id":"21st:xordev__atc-shader","t":"Atc shader","d":"Here is ATC shader component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"xordev","st":"indexed","u":52,"pl":"https://cdn.21st.dev/larsen66/atc-shader/default/preview.1756885507225.png","pc":"xordev","tg":["background"]},{"id":"21st:xordev__cathedral","t":"Cathedral","d":"Here is Cathedral shader","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/cathedral/default/preview.1756887437059.png","pc":"xordev"},{"id":"21st:xordev__fireflies-1","t":"Fireflies 1","d":"Here is Fireflies component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/fireflies-1/default/preview.1756890548809.png","pc":"xordev"},{"id":"21st:xordev__geode","t":"Geode","d":"Here is Geode component","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/geode/default/preview.1756924079214.png","pc":"xordev"},{"id":"21st:xordev__gigabit","t":"Gigabit","d":"Here is Gigabit component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/gigabit/default/preview.1756924173323.png","pc":"xordev"},{"id":"21st:xordev__hive","t":"Hive","d":"Here is Hive component","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"xordev","st":"indexed","u":13,"pl":"https://cdn.21st.dev/larsen66/hive/default/preview.1756885056425.png","pc":"xordev","tg":["background"]},{"id":"21st:xordev__lab","t":"Lab","d":"Here is Lab component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","u":9,"pl":"https://cdn.21st.dev/larsen66/lab/default/preview.1756924833230.png","pc":"xordev"},{"id":"21st:xordev__lanterns","t":"Lanterns","d":"Here is Lanterns component ","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/lanterns/default/preview.1756890047308.png","pc":"xordev"},{"id":"21st:xordev__launch","t":"Launch","d":"Here is Launch shader ","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","u":18,"pl":"https://cdn.21st.dev/larsen66/launch/default/preview.1756888002651.png","pc":"xordev"},{"id":"21st:xordev__neutrino","t":"Neutrino","d":"Here is Neutrino component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/neutrino/default/preview.1756888588247.png","pc":"xordev"},{"id":"21st:xordev__nucleus","t":"Nucleus","d":"Here is Nucleus component","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/nucleus/default/preview.1756924469079.png","pc":"xordev"},{"id":"21st:xordev__phosphor-30","t":"Phosphor 30","d":"Here is Phosphor 3 component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/phosphor-30/default/preview.1756889848989.png","pc":"xordev"},{"id":"21st:xordev__radial-shader","t":"Radial shader","d":"Here is Radial Shader component","k":"component","s":"21st","c":"data-viz/gauge","g":"data-viz","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/radial-shader/default/preview.1756888972985.png","pc":"xordev"},{"id":"21st:xordev__raidal-2","t":"Raidal 2","d":"Here is Raidal 2 shader component","k":"component","s":"21st","c":"other","g":"other","a":"xordev","st":"indexed","pl":"https://cdn.21st.dev/larsen66/raidal-2/default/preview.1756888227755.png","pc":"xordev"},{"id":"21st:xordev__starship-shader","t":"Starship shader","d":"Starship shader by Xor Dev","k":"component","s":"21st","c":"motion/background","g":"motion","a":"xordev","st":"indexed","u":18,"pl":"https://cdn.21st.dev/aghasisahakyan1/starship-shader/default/preview.1756748664223.png","pc":"xordev"},{"id":"21st:xubohuah__ai-chat","t":"Ai chat","d":"Some explorations of AI dialogue.","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/ai-chat/aichat/preview.png","pc":"xubohuah"},{"id":"21st:xubohuah__aichat","t":"Aichat","d":"Some explorations of AI dialogue.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/aichat/default/preview.1749187789226.png","pc":"xubohuah"},{"id":"21st:xubohuah__aurora-card","t":"Aurora card","d":" * A modern credit card design featuring a stunning aurora-like appearance\n * with a frosted glass effect and elegant gradient borders.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"xubohuah","st":"indexed","u":15,"pl":"https://cdn.21st.dev/xubohuah/aurora-card/default/preview.1749175897237.png","pc":"xubohuah"},{"id":"21st:xubohuah__bend-text","t":"Bend text","d":"Interactive text displacement effect using Three.js shaders. Mouse interaction creates dynamic 3D deformation with real-time shadow rendering.\n","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":45,"pl":"https://cdn.21st.dev/xubohuah/bend-text/default/preview.1753685263298.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__blur-text-animation","t":"Blur text animation","d":"Elegant blur animation that brings your words to life with cinematic transitions.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":91,"pl":"https://cdn.21st.dev/xubohuah/blur-text-animation/default/preview.1754892350339.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__bubble-sketch","t":"Bubble sketch","d":"BubbleSketch","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/bubble-sketch/bubble-sketch/preview.png","pc":"xubohuah","tg":["background"]},{"id":"21st:xubohuah__distortion-effect","t":"Distortion effect","d":"DistortionEffect - Interactive water ripple shader effect with real-time mouse tracking, featuring multi-layered wave distortions, chromatic aberration, and fluid turbulence animat","k":"component","s":"21st","c":"other","g":"other","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/distortion-effect/default/preview.1754895017922.png","pc":"xubohuah"},{"id":"21st:xubohuah__entropy","t":"Entropy","d":"Order and chaos dance —digital poetry in motion.","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"xubohuah","st":"indexed","u":498,"pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/entropy/default/preview.1745329100338.png","pc":"xubohuah"},{"id":"21st:xubohuah__flickering-grid-demo2","t":"Flickering grid demo2","d":"Inspired by magic ui","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/flickering-grid-demo2/default/preview.1748519478840.png","pc":"xubohuah","tg":["grid"]},{"id":"21st:xubohuah__flickering-grid-hero","t":"Flickering grid hero","d":"Inspired by magic ui","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"xubohuah","st":"indexed","u":286,"pl":"https://cdn.21st.dev/xubohuah/flickering-grid-hero/default/preview.1748402352650.png","pc":"xubohuah"},{"id":"21st:xubohuah__floating-expandable-card","t":"Floating expandable card","d":"FloatingExpandableCard - A hover-activated expandable floating card Smoothly expands from icon to full content on hover","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"xubohuah","st":"rated","pl":"https://cdn.21st.dev/xubohuah/floating-expandable-card/default/preview.1754802298040.png","pc":"xubohuah","sc":21},{"id":"21st:xubohuah__flow-button","t":"Flow button","d":"FlowButton","k":"component","s":"21st","c":"actions/button","g":"actions","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/flow-button/default/preview.1746631996530.png","pc":"xubohuah","tg":["button"]},{"id":"21st:xubohuah__fluid-gradient-shader","t":"Fluid gradient shader","d":"Organic fluid gradients with interactive mouse effects","k":"component","s":"21st","c":"inputs/color-picker","g":"inputs","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/fluid-gradient-shader/default/preview.1756351974850.png","pc":"xubohuah"},{"id":"21st:xubohuah__fluid-swirl-shader","t":"Fluid swirl shader","d":"Interactive fluid paint shader with swirling colors and pixel effects.","k":"component","s":"21st","c":"motion/background","g":"motion","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/fluid-swirl-shader/default/preview.1756362733065.png","pc":"xubohuah"},{"id":"21st:xubohuah__generative-geometry","t":"Generative geometry","d":"A digital recreation of classic Mondrian style, algorithmically generating balanced geometric compositions","k":"component","s":"21st","c":"other","g":"other","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/generative-geometry/default/preview.1759997115476.png","pc":"xubohuah"},{"id":"21st:xubohuah__geometric-blur-mesh","t":"Geometric blur mesh","d":"Minimalist 3D wireframe shapes with mouse-controlled blur effect","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"xubohuah","st":"indexed","u":51,"pl":"https://cdn.21st.dev/xubohuah/geometric-blur-mesh/default/preview.1754904015104.png","pc":"xubohuah"},{"id":"21st:xubohuah__ghost-404-page","t":"Ghost 404 page","d":"The source of design inspiration @Saad Shaikh","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"xubohuah","st":"indexed","u":228,"pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/ghost-404-page/ghost404/preview.png","pc":"xubohuah","tg":["empty-state"]},{"id":"21st:xubohuah__ghost-404-page-1","t":"Ghost 404 page 1","d":"The source of design inspiration @Saad Shaikh","k":"component","s":"21st","c":"data-display/empty-state","g":"data-display","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/ghost-404-page-1/ghost-404-page/preview.png","pc":"xubohuah","tg":["empty-state"]},{"id":"21st:xubohuah__glow-1","t":"Glow 1","d":"Glow","k":"component","s":"21st","c":"motion/background","g":"motion","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/glow-1/glow/preview.png","pc":"xubohuah"},{"id":"21st:xubohuah__hand-drawn","t":"Hand drawn","d":"Interactive hand-drawn underlines with multiple randomized path algorithms and dynamic animations using GSAP DrawSVG.","k":"component","s":"21st","c":"other","g":"other","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/hand-drawn/default/preview.1758784281789.png","pc":"xubohuah"},{"id":"21st:xubohuah__interactive-text","t":"Interactive text","d":"The artistic fusion of SVG and particle systems","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/interactive-text/default/preview.1756790771076.png","pc":"xubohuah"},{"id":"21st:xubohuah__layered-text","t":"Layered text","d":"Layered text with 3D perspective and smooth hover animations","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":135,"pl":"https://cdn.21st.dev/xubohuah/layered-text/default/preview.1755241496935.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__liquid-radio","t":"Liquid radio","d":"A liquid glass radio is a sleek, modern radio component with a fluid, glass-like interface.","k":"component","s":"21st","c":"inputs/radio","g":"inputs","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/liquid-radio/default/preview.1750822156438.png","pc":"xubohuah","tg":["radio-group"]},{"id":"21st:xubohuah__neon-rgbtext-effect","t":"Neon rgbtext effect","d":"A neon text effect component featuring RGB channel splitting, inspired by TikTok's signature glitch aesthetic. Unlike TikTok's dynamic, bouncing RGB separation, this implementation","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":31,"pl":"https://cdn.21st.dev/xubohuah/neon-rgbtext-effect/default/preview.1749110951348.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__newspaper-page","t":"Newspaper page","d":" A vintage newspaper-style announcement page with elegant typography, animated content, and a classic paper texture background for creating impactful full-screen presentations.","k":"section","s":"21st","c":"marketing/announcement","g":"marketing","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/newspaper-page/default/preview.1749107527976.png","pc":"xubohuah"},{"id":"21st:xubohuah__particle-text-effect","t":"Particle text effect","d":"A dynamic text animation component that renders words using interactive particles with fluid motion and color transitions, allowing particle destruction through right-click mouse i","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":753,"pl":"https://cdn.21st.dev/xubohuah/particle-text-effect/default/preview.1750754554695.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__simple-growth-tree","t":"Simple growth tree","d":"A minimalist tree, elegantly growing with each click.","k":"component","s":"21st","c":"data-display/tree","g":"data-display","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/simple-growth-tree/default/preview.1752920993094.png","pc":"xubohuah","tg":["file-tree"]},{"id":"21st:xubohuah__spiral-animation","t":"Spiral animation","d":"The inspiration comes from Bleuje","k":"component","s":"21st","c":"status/loader","g":"status","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/spiral-animation/spiral-animation/preview.png","pc":"xubohuah"},{"id":"21st:xubohuah__text-glitch-effect","t":"Text glitch effect","d":"Interactive text component with smooth physics-based animations and hover-triggered scrambling effects. Features elegant grayscale styling with cyberpunk-inspired text decoding ani","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":57,"pl":"https://cdn.21st.dev/xubohuah/text-glitch-effect/default/preview.1755245090932.png","pc":"xubohuah"},{"id":"21st:xubohuah__theme-switch-button","t":"Theme switch button","d":"The ⁠ThemeSwitchButton is an animated icon button designed to toggle the application’s theme between light and dark modes. When pressed, the icon smoothly transitions (e.g., sun to","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/theme-switch-button/default/preview.1745328866531.png","pc":"xubohuah","tg":["toggle"]},{"id":"21st:xubohuah__vaporize-animation-text","t":"Vaporize animation text","d":"Based animated canvas component that transforms text into particles with vaporizing, fading, and dynamic effects.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"xubohuah","st":"indexed","u":20,"pl":"https://cdn.21st.dev/xubohuah/vaporize-animation-text/default/preview.1749185858851.png","pc":"xubohuah","tg":["text"]},{"id":"21st:xubohuah__vector-field","t":"Vector field","d":"Vector Field Simulation","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/xubohuah/vector-field/default/preview.1756811089453.png","pc":"xubohuah","tg":["grid"]},{"id":"21st:xubohuah__vortex","t":"Vortex","k":"component","s":"21st","c":"other","g":"other","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/vortex/default/preview.1747134779590.png","pc":"xubohuah"},{"id":"21st:xubohuah__wave-background","t":"Wave background","d":"Inspired by antoine","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"xubohuah","st":"indexed","pl":"https://cdn.21st.dev/user_2vl1Dn19f2uJMuYVfUEcAh5qqyv/wave-background/default/preview.1745935040082.png","pc":"xubohuah"},{"id":"21st:y.lamfadelpro__blur-reveal-deck","t":"Blur reveal deck","d":"A beautiful and interactive card deck carousel for React and Tailwind CSS. Users can swipe or click through a stacked deck of cards where the top card smoothly falls away to reveal","k":"component","s":"21st","c":"media/carousel","g":"media","a":"y.lamfadelpro","st":"rated","u":6,"pl":"https://cdn.21st.dev/y.lamfadelpro/blur-reveal-deck/default/preview.1782023815201.png","pc":"y.lamfadelpro","tg":["carousel"],"sc":18},{"id":"21st:yadwinder__bottom-menu","t":"Bottom menu","d":"original by @raunofreiberg\nicons by @nucleoicons","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"yadwinder","st":"indexed","u":286,"pl":"https://cdn.21st.dev/user_yadwinder/bottom-menu/default/preview.png","pc":"yadwinder","tg":["menu","tooltip"]},{"id":"21st:yadwinder__ios-spinner","t":"Ios spinner","d":"iOS Spinner","k":"component","s":"21st","c":"status/loader","g":"status","a":"yadwinder","st":"indexed","pl":"https://cdn.21st.dev/user_yadwinder/ios-spinner/default/preview.1737985404648.png","pc":"yadwinder","tg":["spinner"]},{"id":"21st:yadwinder__toast-save","t":"Toast save","d":"Clerk.dev save changes toast","k":"component","s":"21st","c":"overlays/toast","g":"overlays","a":"yadwinder","st":"rated","u":120,"pl":"https://cdn.21st.dev/user_yadwinder/toast-save/default/preview.1737985346850.png","pc":"yadwinder","tg":["notification","toast"],"sc":22},{"id":"21st:yadwinder__vercel-tabs","t":"Vercel tabs","d":"Tabs in Vercel style","k":"component","s":"21st","c":"navigation/tabs","g":"navigation","a":"yadwinder","st":"indexed","pl":"https://cdn.21st.dev/user_yadwinder/vercel-tabs/default/preview.png","pc":"yadwinder","tg":["navigation-menu","tabs"]},{"id":"21st:yaoztorun__adisyon-shader","t":"Adisyon shader","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"yaoztorun","st":"indexed","u":11,"pl":"https://cdn.21st.dev/yaoztorun/adisyon-shader/default/preview.1783873002299.webp","pc":"yaoztorun","tg":["background"]},{"id":"21st:yaoztorun__istanblue","t":"Istanblue","d":"Animated WebGL shader background in the Waves style, generated by the 21st.dev Shader Builder. 5-color palette (#184557, #007FAD, #57B2CB, #EAF9FF, #007FAD). Features: cursor-react","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"yaoztorun","st":"indexed","u":5,"pl":"https://cdn.21st.dev/yaoztorun/istanblue/default/preview.1784364363840-0fd0c5b3-eddb-4f13-853a-d58b3ca763f4.webp","pc":"yaoztorun","tg":["cursor"]},{"id":"21st:yashsehgal__3d-button","t":"3d button","d":"Not all @shadcn apps need to look the same.\n\nIn @rightfitso platform, we've customised the button and card components into these playful intractable components ✨","k":"component","s":"21st","c":"actions/button","g":"actions","a":"yashsehgal","st":"indexed","u":189,"pl":"https://cdn.21st.dev/user_yashsehgal/3d-button.png","pc":"yashsehgal"},{"id":"21st:yashvw25__neon-flow","t":"Neon flow","k":"component","s":"21st","c":"other","g":"other","a":"yashvw25","st":"indexed","pl":"https://cdn.21st.dev/yashvw25/neon-flow/default/preview.1768146697312.png","pc":"yashvw25"},{"id":"21st:yassinezaanouni__columns-slide-theme-transition","t":"Columns slide theme transition","d":"Staggered columns sliding down with wave effect theme transition","k":"component","s":"21st","c":"other","g":"other","a":"yassinezaanouni","st":"indexed","pl":"https://cdn.21st.dev/yassinezaanouni/columns-slide-theme-transition/default/preview.1762204055635.png","pc":"yassinezaanouni"},{"id":"21st:yiranwangkk__summerlouver","t":"Summerlouver","d":"Animated WebGL shader background in the Paper Texture style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"yiranwangkk","st":"indexed","pl":"https://cdn.21st.dev/yiranwangkk/summerlouver/default/preview.1785901563400-3da6e4b5-167f-40ff-9c74-4fdb8fc21413.webp","pc":"yiranwangkk"},{"id":"21st:yogaprtamaa__seed","t":"Seed","d":"Animated (shimmer) ASCII art in the Dither style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a glitch look. A drop-in, zero-dependency React comp","k":"component","s":"21st","c":"media/player","g":"media","a":"yogaprtamaa","st":"indexed","pl":"https://cdn.21st.dev/yogaprtamaa/seed/default/preview.1783857097035.webp","pc":"yogaprtamaa","tg":["video"]},{"id":"21st:youcefbnm__animated-cards-stack","t":"Animated cards stack","d":"- Reveal card depending on scroll position with animations","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"youcefbnm","st":"indexed","u":316,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/animated-cards-stack/animated-cards-stack-on-scroll/preview.png","pc":"youcefbnm","tg":["carousel","testimonials"]},{"id":"21st:youcefbnm__animated-menu-with-variants","t":"Animated menu with variants","d":"- Animated Menu component with orchestrated children animation, fully customizable.","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/animated-menu-with-variants/default/preview.1762269829746.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__animated-slideshow","t":"Animated slideshow","d":"- Animated hover slider","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"youcefbnm","st":"indexed","u":363,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/animated-slideshow/animated-slideshow/preview.png","pc":"youcefbnm","tg":["slider"]},{"id":"21st:youcefbnm__animated-toggle-layout-container","t":"Animated toggle layout container","d":"- Container toggling and animating between multiple layouts, useful for your ecommerce store and large lists to enhance user experience.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/animated-toggle-layout-container/animated-toggle-layout-container/preview.png","pc":"youcefbnm","tg":["grid"]},{"id":"21st:youcefbnm__animated-video-on-scroll","t":"Animated video on scroll","d":"Animated video on scroll with also reveal text effects","k":"component","s":"21st","c":"media/player","g":"media","a":"youcefbnm","st":"indexed","u":102,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/animated-video-on-scroll/section-with-scroll-trigger-animations/preview.png","pc":"youcefbnm","tg":["cta","video"]},{"id":"21st:youcefbnm__animation-sequence","t":"Animation sequence","d":"- Sequence animation triggered on scroll shows a process steps one at a time depending on current scroll position, fully responsive and optimized for mobile.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/animation-sequence/default/preview.1764518998622.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__card-curtain-reveal","t":"Card curtain reveal","d":"Interactive card component with open curtain to see content on hover","k":"component","s":"21st","c":"data-display/accordion","g":"data-display","a":"youcefbnm","st":"indexed","u":104,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/card-curtain-reveal/card-curtain-reveal/preview.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__card-testimonial","t":"Card testimonial","d":"A testimonial card with a star rating, block quote, and author avatar with name and role.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"youcefbnm","st":"indexed","u":4,"pl":"https://cdn.21st.dev/youcefbnm/card-testimonial/default/preview.1784358340807-a93b722c-1e91-4e1b-b7a5-4c65076e1edc.png","pc":"youcefbnm","tg":["avatar","card","testimonials"]},{"id":"21st:youcefbnm__cards-stack","t":"Cards stack","d":"- Stack of cards to showcase a related set of element, like your services, your work, features, process of work, timeline, ","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"youcefbnm","st":"indexed","u":464,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/cards-stack/cards-stack/preview.png","pc":"youcefbnm","tg":["timeline"]},{"id":"21st:youcefbnm__creative-studio-section","t":"Creative studio section","d":"- Section for a creative studio with reveal animations and image player","k":"component","s":"21st","c":"media/player","g":"media","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/creative-studio-section/default/preview.1762309482373.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__cta-section-with-gallery","t":"Cta section with gallery","d":"call to action section with stagger animation and image gallery","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"youcefbnm","st":"indexed","u":170,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/cta-section-with-gallery/cta-section-with-gallery/preview.png","pc":"youcefbnm","tg":["cta","gallery"]},{"id":"21st:youcefbnm__custom-cursor","t":"Custom cursor","d":"\t•\tSmooth cursor movement using spring\n\t•\tConfigurable cursor variants \"customCursorVariants\"\n\t•\tChange cursor variant and text with \"useSetCursorVariant()\" hook\t\n\t•\tChange variant","k":"motion","s":"21st","c":"motion/cursor","g":"motion","a":"youcefbnm","st":"indexed","u":18,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/custom-cursor/default/preview.1739030415866.png","pc":"youcefbnm","tg":["cursor"]},{"id":"21st:youcefbnm__hero-animated","t":"Hero animated","d":"Flexible and customizable hero section component with gradient backgrounds and animated content.\n## Features\n\n- 🎨 Customizable gradient backgrounds\n- 📱 Responsive design\n- ✨ Smooth","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"youcefbnm","st":"indexed","u":67,"pl":"https://cdn.21st.dev/youcefbnm/hero-animated/default/preview.1785431496807-cf12907d-d599-460a-8ae0-2e1b0bb99827.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__hero-gallery-scroll-animation","t":"Hero gallery scroll animation","d":"ℹ️ Hero section with scroll trigger animation, that animate images on scroll,\n🧩 <ContainerScroll />  : React html attributes🧩 <BentoCell /> : variants: default: 5 cells | threeCell","k":"component","s":"21st","c":"media/gallery","g":"media","a":"youcefbnm","st":"indexed","u":495,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/hero-gallery-scroll-animation/default/preview.1746088112500.png","pc":"youcefbnm","tg":["gallery","scroll-area"]},{"id":"21st:youcefbnm__hero-video","t":"Hero video","d":"✔️ ContainerScroll component props: accepts react html attributes\n✔️ ContainerStagger component: staggers/delayed the animated children by default <<transition staggerChildren is s","k":"component","s":"21st","c":"media/player","g":"media","a":"youcefbnm","st":"indexed","u":108,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/hero-video/hero-animated-video/preview.png","pc":"youcefbnm","tg":["video"]},{"id":"21st:youcefbnm__image-player","t":"Image player","d":"- Image player component, flexible to use takes array of images urls and interval, also you can use any html image tag '<img />' (by default) or '<picture>' or use next 'Image' thi","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"youcefbnm","st":"indexed","u":65,"pl":"https://cdn.21st.dev/youcefbnm/image-player/default/preview.1758049209011.png","pc":"youcefbnm","tg":["gallery","slider"]},{"id":"21st:youcefbnm__parallax","t":"Parallax","d":"- parallax effect for multiple items, can be customized through 'start (start of animation)' and 'end (end of the animation)' ","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"youcefbnm","st":"indexed","u":12,"pl":"https://cdn.21st.dev/youcefbnm/parallax/default/preview.1755882594602.png","pc":"youcefbnm","tg":["gallery","scroll-area"]},{"id":"21st:youcefbnm__price","t":"Price","d":"Composable price component that formats amounts and currencies with support for sale pricing, compare-at values, savings, and ranges.","k":"section","s":"21st","c":"marketing/pricing","g":"marketing","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/price/default/preview.1784358305587-9f2c20df-5a91-4e88-a786-64add97bcb09.png","pc":"youcefbnm","tg":["badge","pricing-section"]},{"id":"21st:youcefbnm__process-timeline","t":"Process timeline","d":"process section with scroll trigger animations showing process step depending on current scroll position ","k":"component","s":"21st","c":"data-display/timeline","g":"data-display","a":"youcefbnm","st":"indexed","u":130,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/process-timeline/process-timeline-section/preview.png","pc":"youcefbnm","tg":["scroll-area","steps","timeline"]},{"id":"21st:youcefbnm__product-card","t":"Product card","d":"Component for displaying multiple product colors images, perfect for your next ecommerce project.","k":"component","s":"21st","c":"media/gallery","g":"media","a":"youcefbnm","st":"indexed","u":30,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/product-card/product-card/preview.png","pc":"youcefbnm","tg":["gallery"]},{"id":"21st:youcefbnm__product-gallery","t":"Product gallery","k":"component","s":"21st","c":"media/gallery","g":"media","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/product-gallery/product-gallery/preview.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__quantity","t":"Quantity","d":"A composable quantity stepper with animated value transitions and min/max limits for e-commerce product controls.","k":"component","s":"21st","c":"navigation/wizard-steps","g":"navigation","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/quantity/default/preview.1784662357843-4a4751a7-9445-485e-a858-c579058f2d8a.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__reveal-on-hover","t":"Reveal on hover","d":"Animated card with gesture animations, that reveal hidden content and scale main image on hover","k":"component","s":"21st","c":"media/gallery","g":"media","a":"youcefbnm","st":"indexed","u":113,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/reveal-on-hover/animated-hover-card/preview.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__scroll-autoplay","t":"Scroll autoplay","d":"A scroll-driven sequence that cross-fades between stacked items based on scroll position, like an autoplaying slideshow controlled by the user's scroll.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/scroll-autoplay/default/preview.1784354271572-227fb29e-0745-47cc-a676-5b66c4d04773.png","pc":"youcefbnm","tg":["gallery","scroll-area"]},{"id":"21st:youcefbnm__scroll-trigger-animations","t":"Scroll trigger animations","d":"- Motion (framer motion) animations triggered by scroll event.","k":"component","s":"21st","c":"media/player","g":"media","a":"youcefbnm","st":"indexed","u":35,"pl":"https://cdn.21st.dev/youcefbnm/scroll-trigger-animations/default/preview.1751383795251.png","pc":"youcefbnm","tg":["gallery","scroll-area","video"]},{"id":"21st:youcefbnm__scroll-x-carousel","t":"Scroll x carousel","d":"- Carousel transforms on x direction according to current scroll position.","k":"component","s":"21st","c":"media/carousel","g":"media","a":"youcefbnm","st":"indexed","u":142,"pl":"https://cdn.21st.dev/youcefbnm/scroll-x-carousel/default/preview.1751413860542.png","pc":"youcefbnm","tg":["carousel","gallery","scroll-area"]},{"id":"21st:youcefbnm__story","t":"Story","d":"- story similar to IG and facebook, you can also use it as a autoplay carousel","k":"component","s":"21st","c":"data-viz/progress-bar","g":"data-viz","a":"youcefbnm","st":"indexed","u":82,"pl":"https://cdn.21st.dev/youcefbnm/story/default/preview.1749513788082.png","pc":"youcefbnm","tg":["carousel","progress"]},{"id":"21st:youcefbnm__team-section","t":"Team section","d":"Team section showcasing staff members with multiple scroll animations.","k":"section","s":"21st","c":"marketing/team","g":"marketing","a":"youcefbnm","st":"indexed","u":31,"pl":"https://cdn.21st.dev/youcefbnm/team-section/default/preview.1756857172417.png","pc":"youcefbnm","tg":["profile","team"]},{"id":"21st:youcefbnm__text-scroll-read","t":"Text scroll read","d":"A scroll-driven text component that reveals words with a gradient clip mask as the user scrolls through the section.","k":"component","s":"21st","c":"layout/scroll-area","g":"layout","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/text-scroll-read/default/preview.1783716814151.png","pc":"youcefbnm","tg":["scroll-area"]},{"id":"21st:youcefbnm__text-stagger-hover","t":"Text stagger hover","d":"- Splitted text with orchestrated delay animations\n## Props\n· animation: opacity (by default) | top | bottom | left | right | z | blur\n· staggerDirection: start (by default) | midd","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"youcefbnm","st":"indexed","u":63,"pl":"https://cdn.21st.dev/user_2sdAd21yCZlZRkVtZyf4K8ogkBh/text-stagger-hover/default/preview.1750815012964.png","pc":"youcefbnm","tg":["text"]},{"id":"21st:youcefbnm__text-wavy","t":"Text wavy","d":"Animated text that loops each letter through changing size, weight and color to create an infinite wavy effect.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/text-wavy/default/preview.1783717470604.png","pc":"youcefbnm","tg":["text"]},{"id":"21st:youcefbnm__use-toggle-onscroll","t":"Use toggle onscroll","d":"React hook that tracks scroll direction and returns an isHidden flag to hide an element on scroll down and reveal it on scroll up.","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"youcefbnm","st":"indexed","pl":"https://cdn.21st.dev/youcefbnm/use-toggle-onscroll/default/preview.1784768505070-fbe7cf2e-2bc0-4337-98ef-c8a729ab8e3d.png","pc":"youcefbnm"},{"id":"21st:youcefbnm__wavy-text-block","t":"Wavy text block","d":"Wavy Block animates its children in waves pattern on scroll.","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"youcefbnm","st":"indexed","u":51,"pl":"https://cdn.21st.dev/youcefbnm/wavy-text-block/default/preview.1762272281418.png","pc":"youcefbnm","tg":["scroll-area","text"]},{"id":"21st:youngyu612__advanced-counter","t":"Advanced counter","d":"A fully production-ready animated counter component featuring localStorage persistence, accessibility, framer-motion transitions, internal reusable UI elements, and responsive desi","k":"component","s":"21st","c":"motion/number-ticker","g":"motion","a":"youngyu612","st":"indexed","pl":"https://cdn.21st.dev/youngyu612/advanced-counter/default/preview.1763513375951.png","pc":"youngyu612"},{"id":"21st:yousuyi111__hands-robots","t":"Hands robots","d":"Animated (ripple) ASCII art in the Lines style, made with the 21st ASCII editor and baked to a looping video. A drop-in, zero-dependency React component for hero sections, cards, a","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"yousuyi111","st":"indexed","pl":"https://cdn.21st.dev/yousuyi111/hands-robots/default/preview.1786040449323-4dee3bb3-41d2-4707-a1bf-c28e62ed3196.png","pc":"yousuyi111"},{"id":"21st:yp7942557__vercel-button","t":"Vercel button","d":"A sleek, pill-shaped black button with a subtle gray outline, featuring bold white text reading “Start Deploying” on the left and a white circular arrow icon on the right; the text","k":"component","s":"21st","c":"actions/button","g":"actions","a":"yp7942557","st":"indexed","pl":"https://cdn.21st.dev/yp7942557/vercel-button/default/preview.1774709506797.png","pc":"yp7942557"},{"id":"21st:yunan1911__4444","t":"4444","d":"4444dsfsdfsdf","k":"component","s":"21st","c":"other","g":"other","a":"yunan1911","st":"indexed","pl":"https://cdn.21st.dev/yunan1911/4444/default/preview.1749040750885.png","pc":"yunan1911"},{"id":"21st:yunan1911__aishop","t":"Aishop","d":"agent 原生电商","k":"component","s":"21st","c":"other","g":"other","a":"yunan1911","st":"indexed","pl":"https://cdn.21st.dev/yunan1911/aishop/default/preview.1749038669596.png","pc":"yunan1911"},{"id":"21st:yuqi.wang__yuqi","t":"Yuqi","k":"component","s":"21st","c":"other","g":"other","a":"yuqi.wang","st":"indexed","pl":"https://cdn.21st.dev/yuqi.wang/yuqi/default/preview.1750386916038.png","pc":"yuqi.wang"},{"id":"21st:yura__aurora-credit-card-bento","t":"Aurora credit card bento","d":"An interactive bento card carrying an animated credit card: colour bands, caustics and grain flow across the face, and the chip sits where ISO 7816 puts it on a real card.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"yura","st":"indexed","pl":"https://cdn.21st.dev/yura/aurora-credit-card-bento/default/preview.1786119852400-8e9c6084-0068-40cc-ae1d-89a598ec0510.webp","pc":"yura"},{"id":"21st:yura__blackhole-hero-section","t":"Blackhole hero section","d":"A black hole that bends its own light: one ray per pixel walked through curved space, so the halo over the shadow is the far side of the accretion disc, not a drawn ring.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"yura","st":"indexed","pl":"https://cdn.21st.dev/yura/blackhole-hero-section/default/preview.1785629994292-5accefa7-0f53-4c77-8bb4-5955246026e5.png","pc":"yura","tg":["background"]},{"id":"21st:yura__ghibli-robot-hero","t":"Ghibli robot hero","d":"A full-screen hero laid over a hand-painted valley: tall summer clouds, a still lake, a lone robot on the path. The sky is weighted just enough to carry white type without greying ","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"yura","st":"indexed","pl":"https://cdn.21st.dev/yura/ghibli-robot-hero/default/preview.1787056229443-13607dbc-f09e-4d75-8fdd-e6337f229836.png","pc":"yura"},{"id":"21st:yura__loader-tetris","t":"Loader tetris","d":"An animated loading indicator that plays a looping game of Tetris — blocks fall, stack and clear rows in a compact grid. Use it for long waits like builds, deploys or uploads, wher","k":"component","s":"21st","c":"status/loader","g":"status","a":"yura","st":"rated","pl":"https://cdn.21st.dev/yura/loader-tetris/default/preview.1786055709164-d5489a7f-6cf3-4ed3-9390-8a7d21bb4402.webp","pc":"yura","sc":23},{"id":"21st:yura__orbital-hero-section","t":"Orbital hero section","d":"Animated space hero background: the Sun drifts through the stars and the planets trail helical wakes behind it, drawn from real J2000 orbital elements and Kepler's laws.","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"yura","st":"indexed","u":10,"pl":"https://cdn.21st.dev/yura/orbital-hero-section/default/preview.1785615284365-6b5776b4-6f49-436c-830e-0c5343c49877.png","pc":"yura","tg":["hero"]},{"id":"21st:yura__slot-headline","t":"Slot headline","d":"Hero title whose last word scrolls like a slot machine through the most popular coding agents","k":"section","s":"21st","c":"marketing/hero","g":"marketing","a":"yura","st":"indexed","pl":"https://cdn.21st.dev/yura/slot-headline/default/preview.1785416383475-ad562e8e-6d95-467d-8df6-9a509a79de40.png","pc":"yura"},{"id":"21st:yura__snake-loader","t":"Snake loader","d":"A loading indicator that plays a game of snake on a dot grid — the snake hunts apples, grows, and starts over.","k":"component","s":"21st","c":"status/loader","g":"status","a":"yura","st":"rated","pl":"https://cdn.21st.dev/yura/snake-loader/default/preview.1785336766662-24f2c86d-7fda-44d5-8cff-9b937db34aea.png","pc":"yura","tg":["spinner"],"sc":23},{"id":"21st:zainali.portfolio__patrolesence","t":"Patrolesence","d":"This is first demo","k":"component","s":"21st","c":"other","g":"other","a":"zainali.portfolio","st":"indexed","pl":"https://cdn.21st.dev/zainali.portfolio/patrolesence/default/preview.1784289464901-3197b017-7faf-46f9-80ae-013115238e0e.png","pc":"zainali.portfolio"},{"id":"21st:zalanirbhay21__aurora-nexus-landing","t":"Aurora nexus landing","d":"A high-contrast, bento-style landing page with a magnetic island navbar. Features cinematic GSAP-style entrance animations and ultra-responsive layout tiles","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"zalanirbhay21","st":"indexed","pl":"https://cdn.21st.dev/zalanirbhay21/aurora-nexus-landing/default/preview.1768803021791.png","pc":"zalanirbhay21"},{"id":"21st:zanwei__ball-model-picker","t":"Ball model picker","d":"A pinball-style reasoning effort picker with fixed-step physics, elastic peg collisions, glowing trails, and six landing outcomes.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/ball-model-picker/default/preview.1785326401763-7b8706b7-773d-4351-9c2c-13468dd7e56a.png","pc":"zanwei"},{"id":"21st:zanwei__chatgpt-model-selector","t":"Chatgpt model selector","d":"A ChatGPT-inspired model intelligence picker with five magnetic tiers, animated color progression, sparkles, and an Ultra celebration.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/chatgpt-model-selector/default/preview.1785389900430-3fcc18cd-2c89-4774-b6e2-08cd06cbbcd1.png","pc":"zanwei","tg":["slider"]},{"id":"21st:zanwei__claude-model-selector","t":"Claude model selector","d":"A Claude-inspired effort picker with six magnetic levels, spring snapping, keyboard controls, and an animated Ultracode pixel field.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/claude-model-selector/default/preview.1785389895730-86d76b43-d4e8-40c6-a9da-a96e7c8ee095.png","pc":"zanwei","tg":["slider"]},{"id":"21st:zanwei__dot-matrix-camera","t":"Dot matrix camera","d":"A WebGL camera effect that turns the webcam feed into an interactive dot matrix display with adjustable density, dot, brightness and glow controls. Ported to React from Zanwei Guo'","k":"component","s":"21st","c":"other","g":"other","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/zanwei/dot-matrix-camera/default/preview.1785488464146-1e418477-d7a2-44c0-b76f-0e8654e83f8c.png","pc":"zanwei"},{"id":"21st:zanwei__gradient-shimmer","t":"Gradient shimmer","d":"A zero-dependency text shimmer that sweeps a multi-stop gradient highlight across your text using the Web Animations API, with built-in palettes, easing presets, and off-screen/red","k":"motion","s":"21st","c":"motion/text-effect","g":"motion","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/zanwei/gradient-shimmer/default/preview.1785488479725-7fff7fec-f1d0-4864-a9d0-7aadc9b36b80.png","pc":"zanwei"},{"id":"21st:zanwei__liquid-connector","t":"Liquid connector","d":"A dependency-free SVG path-math component for a continuous liquid card-to-prompt peel interaction with keyboard and reduced-motion support.","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/liquid-connector/default/preview.1785322787951-38a67edc-1dd0-49aa-9dd7-b98eb67c7f75.png","pc":"zanwei"},{"id":"21st:zanwei__model-picker","t":"Model picker","d":"A dark cockpit-style model and reasoning-effort picker with a three-model matrix, five effort levels, and an animated ULTRA lever.","k":"component","s":"21st","c":"inputs/select","g":"inputs","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/model-picker/default/preview.1785388688658-5df958a8-5ba6-43a0-88dc-e1bf73e816b2.png","pc":"zanwei"},{"id":"21st:zanwei__shared-element-transition-dialog","t":"Shared element transition dialog","d":"A dependency-free hold-to-delete dialog with shared-element transitions, native dialog semantics, Shadow DOM, and reduced-motion support.","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"zanwei","st":"indexed","pl":"https://cdn.21st.dev/larsen66/shared-element-transition-dialog/default/preview.1785331274704-bdce5b49-007d-40a3-a094-c0505a228c4a.png","pc":"zanwei"},{"id":"21st:zanwei__status-indicator","t":"Status indicator","d":"A dependency-free status indicator whose selected dot expands into a labeled pill through an interruptible spring-driven morph.","k":"component","s":"21st","c":"overlays/alert-banner","g":"overlays","a":"zanwei","st":"indexed","u":4,"pl":"https://cdn.21st.dev/larsen66/status-indicator/default/preview.1785318594178-1b0ddd82-e2b9-42d4-87cf-c6407dab3bf3.png","pc":"zanwei"},{"id":"21st:zanwei__table-of-content","t":"Table of content","d":"A dependency-free vertical table of content with pointer scrubbing, keyboard navigation, spring-driven tick magnification, and floating section previews.","k":"component","s":"21st","c":"data-display/table","g":"data-display","a":"zanwei","st":"indexed","u":8,"pl":"https://cdn.21st.dev/larsen66/table-of-content/default/preview.1785319439180-5f9b7125-c500-4175-8307-7fc26b53950c.png","pc":"zanwei","tg":["navigation-menu","table"]},{"id":"21st:zendeurr.pro__mosaic-leaf","t":"Mosaic leaf","d":"Animated (wave) ASCII art in the Mosaic style, made with the 21st.dev ASCII editor and baked to a looping video. Styled with a mosaic, pixel look. A drop-in, zero-dependency React ","k":"component","s":"21st","c":"media/player","g":"media","a":"zendeurr.pro","st":"indexed","pl":"https://cdn.21st.dev/zendeurr.pro/mosaic-leaf/default/preview.1783882292019.webp","pc":"zendeurr.pro","tg":["video"]},{"id":"21st:zerotherm27-create__hello","t":"Hello","d":"Smoke test component to isolate a publish 500 error.","k":"component","s":"21st","c":"other","g":"other","a":"zerotherm27-create","st":"indexed","pl":"https://21st.dev/@zerotherm27-create/components/hello","pc":"zerotherm27-create"},{"id":"21st:zerotherm27-create__mesh-gradient","t":"Mesh gradient","d":"Animated WebGL shader background in the Mesh drift style. Generated by the 21st.dev Shader Builder. 4-color palette (#2D94A4, #FFF310, #2CF4FF, #F0F0F0). Features: high intensity. ","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"zerotherm27-create","st":"indexed","pl":"https://cdn.21st.dev/zerotherm27-create/mesh-gradient/default/preview.1785640524163-cd123a98-1cfe-4054-ac70-9f2ec6a7fbc9.webp","pc":"zerotherm27-create"},{"id":"21st:zhiyuanlu79__gradient-d02073f9","t":"Gradient d02073f9","d":"Pure CSS gradient background in the Bloom Field style, made with the 21st.dev Gradient Builder. 4-color palette (#FBE9F0, #CDE7F0, #E6D6F5, #D6F0E4). Features: film grain. A drop-i","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"zhiyuanlu79","st":"indexed","pl":"https://cdn.21st.dev/zhiyuanlu79/gradient-d02073f9/default/preview.1785921929194-c3b22410-1c29-4199-8fe7-55182dcddd6b.webp","pc":"zhiyuanlu79"},{"id":"21st:ziegfiroyt__ai43","t":"Ai43","d":"A mini code viewer card that shows a structured JSON response with a filename header, copy button, and preformatted preview body.","k":"component","s":"21st","c":"actions/button","g":"actions","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/ai43/default/preview.1785099765160-1cd8214f-b7ce-428b-9bda-5d7a8579fa0a.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__auth30","t":"Auth30","d":"A full-height numeric keypad lock screen with PIN dots, a biometric shortcut, and a backspace key for mobile app locks and quick re-authentication.","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"ziegfiroyt","st":"indexed","u":2,"pl":"https://cdn.21st.dev/ziegfiroyt/auth30/default/preview.1785101986995-6ca8d62f-481c-4cdc-990f-7f2569e2852d.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__automation1","t":"Automation1","k":"component","s":"21st","c":"other","g":"other","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/automation1/default/preview.1785099729258-71dcffaf-cded-4e50-b561-6f42ad233d94.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__automation10","t":"Automation10","d":"A marketplace automation recipe card showing a row of connected app icons, a name, description, install count, and a tone-colored call-to-action button.","k":"section","s":"21st","c":"marketing/cta","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/automation10/default/preview.1785101587889-abb4e4f3-7a18-40ca-8b41-88bc2ce64ec2.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__browser28","t":"Browser28","d":"A depth-stacked set of browser address bars, each narrowing and fading to show a different subdomain with a lock icon and traffic-light dots on the front window.","k":"component","s":"21st","c":"navigation/dock","g":"navigation","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/browser28/default/preview.1785100176727-8c7a921d-4867-4ad3-a510-00b283d04b70.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature-146","t":"Feature 146","d":"Benefits list with checkmarks","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature-146/default/preview.1768226403145.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature107","t":"Feature107","d":"A responsive feature section with a 3-column grid of centered cards, each showing a large icon, title, and short description, with an optional badge, heading, and call-to-action bu","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature107/default/preview.1785102014180-78098fc2-56fe-4d09-9bbd-0630d9615986.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature112","t":"Feature112","d":"A tabbed feature section that toggles between groups of three cards using button tabs, ideal for segmenting features by team, plan, or use case.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature112/default/preview.1785101315578-526dc3f2-4af2-4406-beba-166f2a126a37.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature135","t":"Feature135","d":"A centered flexbox grid of company or product logos with grayscale hover effects, ideal for showcasing customers, integrations, or partners.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"ziegfiroyt","st":"indexed","u":8,"pl":"https://cdn.21st.dev/ziegfiroyt/feature135/default/preview.1785101368171-625df068-9e30-4183-846d-653e3db4cb56.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature144","t":"Feature144","d":"A responsive grid of service cards, each with a title, description, and arrow icon that links to a detail page — for services listings, solutions overviews, or offering showcases.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature144/default/preview.1785100103955-bf719b76-79a4-4c1c-9266-8045486c79ea.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature152","t":"Feature152","d":"A centered row of inline feature pills with icons and labels, ideal for highlighting key benefits or feature lists.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature152/default/preview.1785099909563-bb6e0f5c-ef18-4c7c-a1bb-83845e865f1a.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature179","t":"Feature179","d":"A two-column feature section with a sticky stats panel on one side and scrollable feature cards on the other.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature179/default/preview.1785100085515-2e41a07c-410a-45e2-a517-20c5233cf139.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature194","t":"Feature194","d":"A three-column feature section where each card swaps a plain icon for a live micro-asset — a bar chart, a before/after stat, and a terminal prompt — over a configurable media surfa","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature194/default/preview.1785099882596-c1caad48-2e7d-4614-973d-08fcba3e68d0.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature22","t":"Feature22","d":"A multi-step setup checklist with status indicators and ETAs beside a sticky sidebar that tracks completion progress and key stats, for onboarding flows and setup wizards.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature22/default/preview.1785099245854-bf635e3e-1866-4f7b-aaae-3f7285612414.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature23","t":"Feature23","d":"A six-card grid that displays quality metrics with icons, progress bars, and numeric scores for tracking system health and compliance.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature23/default/preview.1785099098592-f7a94636-9ce5-425f-90ca-a674aa016020.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature26","t":"Feature26","d":"A six-card feature grid with icons in rounded containers that lift and highlight on hover, plus a badge, heading, and per-card titles and descriptions.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature26/default/preview.1785099805271-5afd390a-eac2-4198-93aa-95e23af247bb.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature28","t":"Feature28","d":"A responsive process timeline that lays out sequential steps with icons, descriptions, and time-estimate badges — horizontal on desktop, vertical on mobile — for onboarding flows a","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature28/default/preview.1785100139138-cc3bed1d-c5fb-43ad-a317-d07afc1ce7f6.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature29","t":"Feature29","d":"A six-card feature grid with icons, descriptions, and highlighted stats (latency, uptime, user counts) and hover effects for showcasing SaaS or platform capabilities.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature29/default/preview.1785099193312-d06473d5-ab30-477f-bf1f-f632a565541b.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature63","t":"Feature63","d":"A 3-column grid of image cards with a text overlay, hover zoom effect, and arrow indicators for showcasing team use cases, industry solutions, or department features.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature63/default/preview.1785101385826-1eb4e82a-27ea-4913-8a8d-e4a95a76a1ba.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__feature9","t":"Feature9","d":"A three-step how-it-works feature section with side-by-side step cards, each showing a live media surface (image, video, or embedded component) anchored to the bottom.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/feature9/default/preview.1785101199192-8365f23c-996c-406e-97a0-7b6615583aa6.png","pc":"ziegfiroyt"},{"id":"21st:ziegfiroyt__reveal1","t":"Reveal1","d":"An interactive image comparison component with a draggable divider that reveals a before and after image, supporting horizontal and vertical orientations.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ziegfiroyt","st":"indexed","u":9,"pl":"https://cdn.21st.dev/ziegfiroyt/reveal1/default/preview.1783715607677.png","pc":"ziegfiroyt","tg":["image","slider"]},{"id":"21st:ziegfiroyt__reveal2","t":"Reveal2","d":"Split-layout before/after image comparison slider with a draggable divider and a sidebar of feature highlights and icons.","k":"component","s":"21st","c":"inputs/slider","g":"inputs","a":"ziegfiroyt","st":"indexed","u":6,"pl":"https://cdn.21st.dev/ziegfiroyt/reveal2/default/preview.1783716127426.png","pc":"ziegfiroyt","tg":["features","image","slider"]},{"id":"21st:ziegfiroyt__testimonial1","t":"Testimonial1","d":"Full-width swipeable testimonial carousel with autoplay and dot navigation for showcasing customer quotes on landing pages.","k":"section","s":"21st","c":"marketing/testimonials","g":"marketing","a":"ziegfiroyt","st":"indexed","u":12,"pl":"https://cdn.21st.dev/ziegfiroyt/testimonial1/default/preview.1785101061488-e80e32a5-5638-479f-8aac-72f1a79e267b.png","pc":"ziegfiroyt","tg":["carousel","slider","testimonials"]},{"id":"21st:ziegfiroyt__usecase-2","t":"Usecase 2","d":"Grid-based use case cards with images, descriptions and feature lists.","k":"section","s":"21st","c":"marketing/features","g":"marketing","a":"ziegfiroyt","st":"indexed","pl":"https://cdn.21st.dev/ziegfiroyt/usecase-2/default/preview.1768227325075.png","pc":"ziegfiroyt"},{"id":"21st:zipfelbube03__diagonal-hover-reveal","t":"Diagonal hover reveal","d":"A mouse-tracked before/after comparison component with a diagonal clip-path divider. Hover to reveal — the line follows your cursor and snaps back with spring easing on mouse leave","k":"section","s":"21st","c":"marketing/comparison","g":"marketing","a":"zipfelbube03","st":"indexed","pl":"https://cdn.21st.dev/zipfelbube03/diagonal-hover-reveal/default/preview.1773755247928.png","pc":"zipfelbube03"},{"id":"21st:zochory__animated-loading-svg-text-shimmer","t":"Animated loading svg text shimmer","d":"An animated loading breadcrumb component with a spinning SVG loader icon, shimmer text effect, and chevron. Perfect for indicating loading states in a visually appealing way.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zochory","st":"indexed","u":52,"pl":"https://cdn.21st.dev/zochory/animated-loading-svg-text-shimmer/default/preview.1772182488136.png","pc":"zochory","tg":["spinner"]},{"id":"21st:zochory__copy-button-variants","t":"Copy button variants","d":"CopyButton with crossfade animation between two state/content","k":"component","s":"21st","c":"actions/button","g":"actions","a":"zochory","st":"rated","u":14,"pl":"https://cdn.21st.dev/zochory/copy-button-variants/default/preview.1763938028517.png","pc":"zochory","sc":16},{"id":"21st:zochory__dropdown-menu-apps-sdk-ui","t":"Dropdown menu apps sdk ui","d":"Menu -Structured actions in a dropdown list based on the OpenAI Apps SDK UI","k":"component","s":"21st","c":"navigation/menu","g":"navigation","a":"zochory","st":"indexed","pl":"https://cdn.21st.dev/zochory/dropdown-menu-apps-sdk-ui/default/preview.1763837945010.png","pc":"zochory"},{"id":"21st:zochory__prompt-input-dynamic-grow","t":"Prompt input dynamic grow","d":"A prompt input that grow on click, with subtle glow, and a onFocus on click ripple effect. shrink when not anymore inFocus","k":"component","s":"21st","c":"ai-agent/composer","g":"ai-agent","a":"zochory","st":"rated","u":140,"pl":"https://cdn.21st.dev/zochory/prompt-input-dynamic-grow/default/preview.1761169709563.png","pc":"zochory","tg":["input"],"sc":18},{"id":"21st:zochory__segmented-control","t":"Segmented control","d":"Toggle through grouped options - based on OpenAI Apps SDK UI","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"zochory","st":"rated","pl":"https://cdn.21st.dev/zochory/segmented-control/default/preview.1763844793015.png","pc":"zochory","sc":17},{"id":"21st:zochory__sign-in-minimalist","t":"Sign in minimalist","k":"component","s":"21st","c":"flows/sign-in","g":"flows","a":"zochory","st":"indexed","pl":"https://cdn.21st.dev/zochory/sign-in-minimalist/default/preview.1765099849197.png","pc":"zochory"},{"id":"21st:zochory__toggle-switch-glass","t":"Toggle switch glass","d":"A glass-style toggle switch with smooth, tactile animations and light/dark mode support. ","k":"component","s":"21st","c":"actions/switch","g":"actions","a":"zochory","st":"indexed","pl":"https://cdn.21st.dev/zochory/toggle-switch-glass/default/preview.1766687437295.png","pc":"zochory","tg":["toggle"]},{"id":"21st:zulelee__nova-sphere","t":"Nova sphere","d":"An animated 3D sphere background with pulsating particles, wireframe layers, and electric connections. Creates an epic backdrop for modern tech interfaces.","k":"motion","s":"21st","c":"motion/background","g":"motion","a":"zulelee","st":"indexed","pl":"https://cdn.21st.dev/zulelee/nova-sphere/default/preview.1748209782092.png","pc":"zulelee"},{"id":"21st:zzzzshawn__dotm-circular-10","t":"Dotm circular 10","d":"Animated dot-matrix loading spinner whose binary-style opacity tiers pulse in modular steps so only a few cells peak at once, producing a crisp coded circular bloom.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-10/default/preview.1784450652892-4f5ce91d-8a1b-45ad-b85f-1f6ee32e00db.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-circular-12","t":"Dotm circular 12","d":"An animated dot-matrix loading spinner where a stepped beam sweeps around a circular grid with a dim opposite echo and diagonal spoke accents.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-12/default/preview.1784397695668-31c40e88-8398-4132-b7a4-7792e08040d9.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-circular-18","t":"Dotm circular 18","d":"An animated dot-matrix loading indicator whose mirrored braille dot pairs pulse from the top and bottom toward the center with a connective center-column accent.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-18/default/preview.1784752988015-771e7c6c-36b1-4cc0-8b52-c81c80016d3c.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-circular-20","t":"Dotm circular 20","d":"Animated dot-matrix loader that cycles through distinct braille-like glyphs with previous-frame ghosting for a crisp, readable symbol transition.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","u":9,"pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-20/default/preview.1784452179069-ffa80148-c643-4e3c-9ce9-98e3004bc840.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-circular-3","t":"Dotm circular 3","d":"An animated dot-matrix loading spinner where a plasma-like comet sweep and pulsing core move through a circular mask.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-3/default/preview.1784462112038-38c20130-89eb-4d9e-8fc0-a2f851538a3f.png","pc":"zzzzshawn"},{"id":"21st:zzzzshawn__dotm-circular-7","t":"Dotm circular 7","d":"Animated circular dot-matrix loader whose scanning gate alternates between vertical and horizontal sweeps, producing a crisp shutter rhythm across a masked grid of dots.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-7/default/preview.1784755096616-3198d384-b9ca-4206-825a-9b6f7da1307f.png","pc":"zzzzshawn"},{"id":"21st:zzzzshawn__dotm-circular-8","t":"Dotm circular 8","d":"A circular dot-matrix loading animation whose center pulses with a dual-beat heartbeat cadence, radiating soft concentric waves.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-circular-8/default/preview.1784395079971-6a3a76c1-97d3-4b5e-adee-741e0a643b98.png","pc":"zzzzshawn"},{"id":"21st:zzzzshawn__dotm-hex-10","t":"Dotm hex 10","d":"An animated hexagonal dot-matrix loading indicator with a liquid swirl shimmer that ripples through the hex lattice.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-hex-10/default/preview.1785536522456-805bb17d-23ae-46e6-b509-26590a115e0d.png","pc":"zzzzshawn"},{"id":"21st:zzzzshawn__dotm-square-2","t":"Dotm square 2","d":"An animated dot-matrix loading spinner whose lit dots trace a clockwise snake route column by column across a 5x5 grid.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-square-2/default/preview.1784471633859-a45dca0b-63b8-417b-8a6a-a172715ce78a.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-square-4","t":"Dotm square 4","d":"Animated dot-matrix loading spinner where two counter-rotating rings of dots orbit around a still center.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","u":9,"pl":"https://cdn.21st.dev/zzzzshawn/dotm-square-4/default/preview.1784429332051-7d63135f-adbd-4619-94b0-837da310765c.png","pc":"zzzzshawn","tg":["spinner"]},{"id":"21st:zzzzshawn__dotm-square-6","t":"Dotm square 6","d":"Animated dot-matrix loader where alternating columns of dots snake up and down in opposite directions.","k":"component","s":"21st","c":"layout/bento-grid","g":"layout","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-square-6/default/preview.1784396375439-0d3d8914-c20a-4ecf-ac1e-55f3e174d420.png","pc":"zzzzshawn","tg":["grid"]},{"id":"21st:zzzzshawn__dotm-triangle-13","t":"Dotm triangle 13","d":"An animated dot-matrix loading indicator where a stepped snake traces a serpentine zigzag path with a soft trailing tail across a triangle-shaped grid.","k":"component","s":"21st","c":"status/loader","g":"status","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-triangle-13/default/preview.1785537323885-690c9a4e-3f2e-44f7-9578-070d00b14312.png","pc":"zzzzshawn"},{"id":"21st:zzzzshawn__dotm-triangle-4","t":"Dotm triangle 4","d":"A dot-matrix loading spinner where three dots chase around a triangle outline leaving short fading trails while the dots stay fixed in place.","k":"motion","s":"21st","c":"motion/border","g":"motion","a":"zzzzshawn","st":"indexed","pl":"https://cdn.21st.dev/zzzzshawn/dotm-triangle-4/default/preview.1785536900307-0212bbb9-2ee5-42d5-b334-2d9f80df90b8.png","pc":"zzzzshawn"},{"id":"21st-ascii:community__111-1b1b1d95-b943-45a3-83ff-1644085a2298","t":"111","d":"111 turns any photo into mosaic ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_37uTI9hlEYXnjEFWy2aLO2iI5gF/20848c4f-fc0a-41cf-a289-5234327b4539.webp","pc":"community"},{"id":"21st-ascii:community__1s1s-ce28fb3d-6bbe-4c90-83b7-6b2db90c7b43","t":"1s1s","d":"1s1s turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HdhXqtaGNK6PDvN2DFY8vAT2Sr/5a8e1637-89e6-4132-8e00-61fbb69fda53.webp","pc":"community"},{"id":"21st-ascii:community__absinthe-f2aea758-e8aa-4a0f-848f-68e83a655ffb","t":"Absinthe","d":"Absinthe turns any photo into characters ASCII art with a glitch, neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/f2aea758-e8aa-4a0f-848f-68e83a655ffb.jpg","pc":"community"},{"id":"21st-ascii:community__acg-aa78889f-b9e1-4b42-9d30-8314ce06ea53","t":"acg","d":"acg turns any photo into triangles ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39fm4Vn9JRZxIDavlqXFa5DaQB6/c1791817-bb48-4701-8eff-8dfd07e39488.webp","pc":"community"},{"id":"21st-ascii:community__act-of-creation-2c1ab28b-293a-4c8f-a2d2-f2697222bd56","t":"Act of creation","d":"Act of creation turns any photo into voxel ASCII art with a mosaic, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GMpZ2x21zhvHKicoTIMpHGLqpH/b14be566-20d3-470a-a478-283d5da34dff.png","pc":"community"},{"id":"21st-ascii:community__adan-y-dios-b9131b92-b492-41c4-8670-f8404b61fdfc","t":"adan y dios","d":"adan y dios turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3ExVfhyU8AKI7RnhKaZ3aw3zJW6/e397eeb7-cb85-4e83-8fe8-944e1bd6be89.webp","pc":"community"},{"id":"21st-ascii:community__agents-odyssey-d0928d41-b32a-42b3-b6ab-f90bc55b0d3a","t":"Agents Odyssey","d":"Agents Odyssey turns any photo into characters ASCII art with a terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3E58J0dlpBNJOiOFx1s2HhsiRfy/da3d0b23-59ea-4644-916a-85b185b77407.webp","pc":"community"},{"id":"21st-ascii:community__aircraft-cabin-9373e012-fc02-4707-b8b3-11ee84449359","t":"aircraft cabin","d":"aircraft cabin turns any photo into matrix ASCII art with a retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3FiWvlvyf1NFbcyefLxuzu1GsyU/0850bb48-a789-48b8-8e93-d6b55dcc59a0.webp","pc":"community"},{"id":"21st-ascii:community__alinyxe-d8808552-9486-456a-acc0-820915834d61","t":"Alinyxe","d":"Alinyxe turns any photo into hex dump ASCII art with a colorful, pixel, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BRg6PyisstXC1zlxhG66cyXdXC/14654a9f-58ae-4f0d-badd-58be336614d7.webp","pc":"community"},{"id":"21st-ascii:community__alinyxe-ea932b38-1f33-42a2-9141-385999ea1dc9","t":"Alinyxe","d":"Alinyxe turns any photo into hex dump ASCII art with a animated, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BRg6PyisstXC1zlxhG66cyXdXC/9f5d9f38-d914-49c9-87c2-149027b5e507.webp","pc":"community"},{"id":"21st-ascii:community__all-about-the-benjamins-b1fb93e5-0750-45f9-9d2e-e50334a4f4bd","t":"All about the Benjamins","d":"All about the Benjamins turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39EaRfg2w8uEmTqnT3x185d0oOr/039443d3-dc1c-495f-9418-9f0474c93bf9.webp","pc":"community"},{"id":"21st-ascii:community__amber-dusk-fb27c825-bcf6-454b-914e-48924c842a85","t":"Amber Dusk","d":"Amber Dusk turns any photo into diamond ASCII art with a colorful look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/fb27c825-bcf6-454b-914e-48924c842a85.jpg","pc":"community"},{"id":"21st-ascii:community__animated-mosaic-portrait-5f88f002-7a75-4c62-b5c5-559705ac8f71","t":"Animated Mosaic Portrait","d":"Animated Mosaic Portrait turns any photo into mosaic ASCII art with a animated, colorful, mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/8478023b-41f4-480c-bfac-c44ad876652a.webp","pc":"community"},{"id":"21st-ascii:community__anime-63cdfe3b-1612-497b-8543-d5934044fddb","t":"anime","d":"anime turns any photo into dots ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Gv3EUZPUJrMTTgyQXIozrYTNWN/d40181d0-1455-4369-94dd-c2729938dfc6.webp","pc":"community"},{"id":"21st-ascii:community__aossie-logo-bb472d6c-85ff-44c5-b5df-95bf14a1965a","t":"Aossie Logo","d":"Aossie Logo turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H6URayH59FFognGTudD2L8eUz0/fc508483-eb7c-41b6-8822-7d13836d6880.webp","pc":"community"},{"id":"21st-ascii:community__ascii-flower-7e81d96d-0512-43e2-b311-ec057243029b","t":"ascii flower","d":"ascii flower turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_303XMtoirrQlWWGb8KnV7WJoQOZ/7fa35d6b-864c-403a-ac1c-31366c7f0ace.webp","pc":"community"},{"id":"21st-ascii:community__ascii-log-leet-6f959e72-b49c-4f1e-913e-d8c05d678ab3","t":"ASCII log leet","d":"ASCII log leet turns any photo into characters ASCII art with a neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_35NAal4ngoiwl586UuIyinZjTsG/b732d510-cc6f-4404-b9a4-04109f4e3c5a.webp","pc":"community"},{"id":"21st-ascii:community__barber-74bbd566-6dbc-427b-808d-5457d18156b0","t":"barber","d":"barber turns any photo into hex dump ASCII art with a minimal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H0cFXNmjKTZIPXU6tldfFwZPRB/71b08e54-51e5-4bf1-9c06-fc8716d15ed8.webp","pc":"community"},{"id":"21st-ascii:community__bed-laptop-ascii-427eb473-1a8b-40bb-98c6-766c07fe233a","t":"Bed Laptop Ascii","d":"Bed Laptop Ascii turns any photo into dots ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HdIGFrhAXvCUDQ3P1fjXzXyAJH/225ae3fc-1be9-4f3c-b251-112bfa3c5d68.webp","pc":"community"},{"id":"21st-ascii:community__bennet-46bfa460-8899-47d9-9d59-af514c9b52dc","t":"bennet","d":"bennet turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H515LbCV9LPma3wcrBvW7ztm9i/4be5636f-0cc9-441c-a377-ad5e6a4f92ed.webp","pc":"community"},{"id":"21st-ascii:community__bondz-df976528-aa87-49c4-b088-ef43cb1e7338","t":"BONDZ","d":"BONDZ turns any photo into bricks ASCII art with a glitch, monochrome, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3DgFtR07mWTnLi8r1M77rx1ApoX/2ddb5225-5dbc-41cf-b9c3-6231af2aeda1.webp","pc":"community"},{"id":"21st-ascii:community__brazil-characters-a1cac068-7a5d-469c-aad3-e039ba9cf703","t":"Brazil_Characters","d":"Brazil_Characters turns any photo into characters ASCII art with a mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3ETw91gLme3LLAc0GSmXpwQ4DiP/830d005f-3d68-49c4-a0cf-f7f12954a83d.webp","pc":"community"},{"id":"21st-ascii:community__bread-and-butter-015c6cbd-d837-4672-9aa7-1e20d373c40a","t":"Bread and Butter","d":"Bread and Butter turns any photo into dither ASCII art with a pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_35dXCb8T858HYP5Y3RlDAYfeaum/8c6162ac-7882-442f-8a89-fc9e04e0ae6e.webp","pc":"community"},{"id":"21st-ascii:community__brick-wall-65a193ca-da61-4f53-a7fe-32cbd1413677","t":"Brick Wall","d":"Brick Wall turns any photo into bricks ASCII art with a mosaic, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/65a193ca-da61-4f53-a7fe-32cbd1413677.jpg","pc":"community"},{"id":"21st-ascii:community__bull-3d7f66cc-d435-41f4-a836-e4b1f40a2392","t":"bull","d":"bull turns any photo into matrix ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_33plgKAPWvgH1cptLSFAUXCFisX/d63eba1e-269c-4704-b3f9-5b4190e08fcb.webp","pc":"community"},{"id":"21st-ascii:community__chess-e39b8cc1-802e-4003-9240-f799e5f40fc1","t":"chess","d":"chess turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2sisNb6Cf8GNAjP393wnJCLVH84/1783561310965-9zzg7h.png","pc":"community"},{"id":"21st-ascii:community__code-rain-14a45fc1-ebee-47a4-b8d4-772d084815d4","t":"Code Rain","d":"Code Rain turns any photo into characters ASCII art with a glitch, neon, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/14a45fc1-ebee-47a4-b8d4-772d084815d4.jpg","pc":"community"},{"id":"21st-ascii:community__collab-cfae2635-23b5-406b-8662-40ad068bdc49","t":"collab","d":"collab turns any photo into voxel ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2y4mAmG5WMonwhwjqKc8LyeecUz/8bfdb54b-25ce-40bd-b4f1-8bcf9642ad6b.webp","pc":"community"},{"id":"21st-ascii:community__creation-of-adam-04c6844d-b7ae-4308-ada5-85ef227c2376","t":"Creation of Adam","d":"Creation of Adam turns any photo into characters ASCII art with a animated, minimal, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GvGqINgQUzimY4TG0e8Wu9pu0I/357aa72a-5ed4-47e6-a6e1-6f2894a3ccbb.png","pc":"community"},{"id":"21st-ascii:community__d60-hero-835f9c49-9087-4db1-a02d-62a0d38bff59","t":"D60-hero","d":"D60-hero turns any photo into contour ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GYHFar2zrRr79sK3wSzHGVOC0I/eb38ebaf-a2ac-432d-bf49-2fc832ae9eeb.png","pc":"community"},{"id":"21st-ascii:community__dark-mode-5309be10-34dd-40d3-8387-e1e8b5ff6620","t":"dark mode","d":"dark mode turns any photo into voxel ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BDsysVu3WGuohsPQWdLSbzDhLY/e5d0bde6-c702-4a5a-81ca-a34f45d4e01f.webp","pc":"community"},{"id":"21st-ascii:community__datafobik-6e1f578b-7693-4fce-946f-928bbaf6cb35","t":"datafobik","d":"datafobik turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2xJO3zNCqtKxPsyybThWTp4ABVV/f321cc20-7ed8-4a4d-8cbf-ccef1e9a7506.webp","pc":"community"},{"id":"21st-ascii:community__dd-1a07348a-22fd-410c-b953-bd4decd98a67","t":"dd","d":"dd turns any photo into hexagons ASCII art with a neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HaYozvagbqmJ9f5mWuSZVV8x7d/27e9a2a3-a591-4938-be5a-25dbd4cb1e80.webp","pc":"community"},{"id":"21st-ascii:community__dd-cbfbdcf2-a570-43ab-83e3-b488347759a4","t":"dd","d":"dd turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3CjtIJZrtD26t43FFC2lIzSj1il/94464069-746c-41e0-84a9-b16ea3c83c07.webp","pc":"community"},{"id":"21st-ascii:community__dead-channel-137df756-c20f-4272-bcee-606ab947ceba","t":"Dead Channel","d":"Dead Channel turns any photo into voxel ASCII art with a crt, glitch look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/137df756-c20f-4272-bcee-606ab947ceba.jpg","pc":"community"},{"id":"21st-ascii:community__dedsec-16c97125-ff13-4052-87bd-611f8af926a1","t":"Dedsec","d":"Dedsec turns any photo into cross ASCII art with a cyberpunk look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Frtav8rJs86XuTulwOkMHPmGMM/d4dcd471-9a24-4ce4-b8d0-18267682de76.webp","pc":"community"},{"id":"21st-ascii:community__dfe-021cfc8b-cd96-4800-9ff9-113a8f6ed27c","t":"dfe","d":"dfe turns any photo into contour ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HPzPoXPg5iLZN8cSB7Od3SNXD7/e026006a-4f37-40f9-a69e-1ec7b4ffd25e.webp","pc":"community"},{"id":"21st-ascii:community__e43wr-b8874cef-a342-48a0-acb4-895d9e37ddb2","t":"e43wr","d":"e43wr turns any photo into characters ASCII art with a neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3E2E1aDt396bqtuPMbJwCpklsdB/df6e8f09-1b3e-43ab-8024-e9b64815c4ec.webp","pc":"community"},{"id":"21st-ascii:community__electric-gaze-898539cb-dc5d-4bfd-ab04-a499d2f0411b","t":"Electric Gaze","d":"Electric Gaze turns any photo into dither ASCII art with a animated, glitch, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/ae758991-0c3f-4c6a-9296-33784c65d43b.webp","pc":"community"},{"id":"21st-ascii:community__ember-f6c0f60d-9b9e-4f74-9c0a-aef9c5990ef8","t":"Ember","d":"Ember turns any photo into dots ASCII art with a colorful look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/f6c0f60d-9b9e-4f74-9c0a-aef9c5990ef8.jpg","pc":"community"},{"id":"21st-ascii:community__ff-27ca1849-d6bd-4dad-b78d-a6091ea01ffe","t":"Ff","d":"Ff turns any photo into characters ASCII art with a neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3D5npwPsyCLwGrYO0CGTZIicoJZ/de048d91-7cfa-47ae-9ce3-8e47dd88cd76.png","pc":"community"},{"id":"21st-ascii:community__first-light-fa5bb64a-9033-43bd-869f-e9e7b27078e4","t":"First Light","d":"First Light turns any photo into dither ASCII art with a colorful look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/fa5bb64a-9033-43bd-869f-e9e7b27078e4.jpg","pc":"community"},{"id":"21st-ascii:community__flicker-burst-56ed0603-d2e6-43fd-a77e-23154d63271f","t":"Flicker Burst","d":"Flicker Burst turns any photo into characters ASCII art with a animated, glitch, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/3d4ebbf2-826f-4eab-a268-233e2cd5bc2e.webp","pc":"community"},{"id":"21st-ascii:community__flicker-cityscape-ecf0edbf-2487-48dd-b521-c439e0761030","t":"Flicker Cityscape","d":"Flicker Cityscape turns any photo into characters ASCII art with a animated, glitch, neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/83e45857-6614-4d5f-9d8b-0a43723c1cef.webp","pc":"community"},{"id":"21st-ascii:community__flicker-tower-88ffc215-efc4-4130-86aa-93c3faa1d013","t":"Flicker Tower","d":"Flicker Tower turns any photo into characters ASCII art with a animated, minimal, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/82acfa6a-2643-4fe3-a6a2-ae9444247167.webp","pc":"community"},{"id":"21st-ascii:community__football-985b215a-94dc-43e5-b3ec-867438b4caeb","t":"football","d":"football turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3EdlFKmaHGbQGgihMk4YjXI7MRr/45810c3c-9d91-44bb-a7cb-06a63797803f.webp","pc":"community"},{"id":"21st-ascii:community__forest-c694ace1-2012-4042-90c3-1c917fba61c7","t":"Forest","d":"Forest turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GU9lDnevaFSdflC11GXo5RtDNq/f9062628-9f19-4141-a423-bd8346585b37.png","pc":"community"},{"id":"21st-ascii:community__front-page-a41d515d-5fbe-4224-b069-55ce73d06eeb","t":"Front Page","d":"Front Page turns any photo into characters ASCII art with a halftone, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a41d515d-5fbe-4224-b069-55ce73d06eeb.jpg","pc":"community"},{"id":"21st-ascii:community__gg-7975030e-0244-497a-9d43-5327e7e2ab06","t":"gg","d":"gg turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_38dTPmnvxt4Ud6smxMnoCiSlKN5/a53764ae-be24-4d82-bd04-c30ff4a1795c.webp","pc":"community"},{"id":"21st-ascii:community__golden-radiance-shimmer-455e6218-19a8-40ed-a0d6-05ced17dc6ba","t":"Golden Radiance Shimmer","d":"Golden Radiance Shimmer turns any photo into diamond ASCII art with a animated, colorful, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a4fe45dd-0254-418b-84c8-ead689f52c7b.webp","pc":"community"},{"id":"21st-ascii:community__hands-robots-2d6d36e5-362a-4f13-ab5d-fe4d47ac5a58","t":"Hands&Robots","d":"Hands&Robots turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39fTAsFSOAdJca54oHwUmSEkUSJ/4c5c2c9c-41e3-4fad-b951-636ba59f5a7f.png","pc":"community"},{"id":"21st-ascii:community__herbarium-713df613-b2f0-4e80-baba-3f6303be09f1","t":"Herbarium","d":"Herbarium turns any photo into dither ASCII art with a halftone look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/713df613-b2f0-4e80-baba-3f6303be09f1.jpg","pc":"community"},{"id":"21st-ascii:community__hero-personal-website-f3db4ab4-a60e-42c4-8da3-8aa27b59514c","t":"Hero - Personal Website","d":"Hero - Personal Website turns any photo into characters ASCII art with a retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3DGegI7DSMBe4TOO9tgylJbWneq/fc8eb20d-1b76-4d65-b19f-feff221dc91f.webp","pc":"community"},{"id":"21st-ascii:community__heximage-0bfb4fe9-7583-459d-8192-1f7971e3c037","t":"Heximage","d":"Heximage turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GTmm8jNoQIxVVDZmyng4bN3uFj/f1e9ca31-92ab-465d-a08f-41a0393623ce.webp","pc":"community"},{"id":"21st-ascii:community__hi-ff168469-d44e-4363-8295-a6f409f406eb","t":"hi","d":"hi turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GgXFvpTnErwNBVeKsshVdP6M3D/f8546dcd-4d95-4b49-ae66-8470ffc6e271.webp","pc":"community"},{"id":"21st-ascii:community__hs-office-505de466-0e33-40c3-b619-61c08a46b2e4","t":"HS Office","d":"HS Office turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GPTiAnC9sbzHhxwSKYXvQdPCa1/08bbdd00-25f5-4f38-84f9-c05482d745e1.webp","pc":"community"},{"id":"21st-ascii:community__ink-garden-543723c1-e472-4bcb-a82c-f111951a295c","t":"Ink Garden","d":"Ink Garden turns any photo into dither ASCII art with a minimal, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/543723c1-e472-4bcb-a82c-f111951a295c.jpg","pc":"community"},{"id":"21st-ascii:community__iris-8aadaad6-794e-4a6c-a2a7-d1b7f95cdfb6","t":"Iris","d":"Iris turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GN2P0snuNmd4xIGklouucy5NUy/a12bc1c9-0379-4a02-b0f1-da433219d083.webp","pc":"community"},{"id":"21st-ascii:community__is1s-fbc3e167-d04f-4bc9-8c99-a5a4568ee7c7","t":"is1s","d":"is1s turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HdhXqtaGNK6PDvN2DFY8vAT2Sr/7ba15b21-ac91-44e0-a191-c43a1096cb7e.webp","pc":"community"},{"id":"21st-ascii:community__kaaba-88174e06-a334-4ee1-84a7-3580bf087e46","t":"kaaba","d":"kaaba turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HWgY0RrtQiIqDokUq9WmLv9fvG/4e8e1a36-31b8-4920-9bee-2ae6ee285cd0.webp","pc":"community"},{"id":"21st-ascii:community__kk-3f846dcf-ff52-4580-85b6-ed471b2752a9","t":"kk","d":"kk turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_38dTPmnvxt4Ud6smxMnoCiSlKN5/f898942c-2cfe-4ba0-b0d6-7f5e24790306.webp","pc":"community"},{"id":"21st-ascii:community__kobe-0c62131a-8180-46a2-b8a5-09662c53aea2","t":"Kobe","d":"Kobe turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H515LbCV9LPma3wcrBvW7ztm9i/e86ed834-30cb-4877-9633-2de794ee7e12.webp","pc":"community"},{"id":"21st-ascii:community__kobe-6f02ee3b-da5b-4540-86d3-3e0876306430","t":"Kobe","d":"Kobe turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39fm4Vn9JRZxIDavlqXFa5DaQB6/fe0c515c-38b9-4375-bfa3-523cd6042b1c.webp","pc":"community"},{"id":"21st-ascii:community__kobe-are-you-ready-to-build-yourself-0221ccdd-9a16-4fe7-a3db-defa08230df9","t":"Kobe, are you ready to build yourself","d":"Kobe, are you ready to build yourself turns any photo into hatching ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H515LbCV9LPma3wcrBvW7ztm9i/a02958f4-42f1-44c9-9b90-8fd330846a7a.webp","pc":"community"},{"id":"21st-ascii:community__lahit-febe1254-6ec7-4786-8552-c292c1ff0d1b","t":"lahit","d":"lahit turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HQ4D8KD0q8xT7uhXqEp1m3rUrN/1cef70f1-589f-4f64-935c-ae64314e9c92.webp","pc":"community"},{"id":"21st-ascii:community__lauren-weeks-c0505889-0ef4-43af-8db0-f53af5a604cf","t":"Lauren_Weeks","d":"Lauren_Weeks turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39fm4Vn9JRZxIDavlqXFa5DaQB6/f8d29927-dd62-442a-b857-14ba6ac77a0c.webp","pc":"community"},{"id":"21st-ascii:community__light-mode-7db84f5b-edf1-489c-9f4e-8e83530dc789","t":"light mode","d":"light mode turns any photo into voxel ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BDsysVu3WGuohsPQWdLSbzDhLY/bb06ddd7-8890-4310-8cc5-2ffdb9f5db51.webp","pc":"community"},{"id":"21st-ascii:community__liminal-vincent-marcum-014dd54b-c957-4b26-981a-d4cac908b5a2","t":"Liminal - Vincent Marcum","d":"Liminal - Vincent Marcum turns any photo into mixed ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H0w1YnCp8g3oI2fnQnYRstoSko/d055e24c-b5cc-4969-bde8-6a5bcd7ed180.webp","pc":"community"},{"id":"21st-ascii:community__liquid-mosaic-a04a984a-fbb9-4a43-b832-89967a9e58dc","t":"liquid Mosaic","d":"liquid Mosaic turns any photo into dither ASCII art with a mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GfOHB2dxQI7kZ41USLqxbqthoO/358558cd-41ea-4b1d-9484-2332b71ff086.webp","pc":"community"},{"id":"21st-ascii:community__locked-matrix-1cc71f85-d5ee-4e6a-afb9-46c101cd0e13","t":"locked matrix","d":"locked matrix turns any photo into matrix ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HTEiOsrAJFXxFUEGcrAhd8Jp1e/2b2c6759-2fff-46d9-a4ac-1d14d0e550b7.webp","pc":"community"},{"id":"21st-ascii:community__m-bd6a3328-5a24-4464-83da-c3180c9be0fe","t":"m","d":"m turns any photo into characters ASCII art with a monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_30XIKFZ370uhAIEjYnAUVACE5e3/8974edf8-1ee2-4400-8fa6-a0a41bdd6d59.webp","pc":"community"},{"id":"21st-ascii:community__malinois-dd1b68ae-0143-467e-a716-b346d0086e02","t":"malinois","d":"malinois turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GsIGtcrqsI0GqBHCSINFZdte2n/3dbf9a1e-d49a-43f3-8d51-711f41cdb4c7.webp","pc":"community"},{"id":"21st-ascii:community__maomao-7900cfcd-fc8f-4eeb-92c8-2d84b7215670","t":"maomao","d":"maomao turns any photo into dither ASCII art with a crt, cyberpunk, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GmOlixWi8onZxPavVQ2o3dPvUK/47f760e4-1e12-4065-a06c-0187df46ac44.webp","pc":"community"},{"id":"21st-ascii:community__marbs123-1b20ddff-5b5d-4efe-8cbf-e5fad24c0de9","t":"MARBS123","d":"MARBS123 turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GQ1sJvL4jA5b65Zqqb9fRNasdm/9befbe31-93ec-40eb-b8f2-44c627d32544.webp","pc":"community"},{"id":"21st-ascii:community__mask-5013cf50-4847-4e7b-8302-cff2bfb3e16c","t":"MASK","d":"MASK turns any photo into dither ASCII art with a colorful, cyberpunk, mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GSey0Vp7ot014ZDWErRRrfgqon/e17d2e0a-453e-4041-a75b-2b0733358e2d.png","pc":"community"},{"id":"21st-ascii:community__mee-069cd30a-d392-491e-9bde-d5326a1334f2","t":"mee","d":"mee turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BhDKLCFmxDL0a1i0WzEGe36IyI/8f0a8ee0-d63e-45ab-87b0-5a41dc6b8100.webp","pc":"community"},{"id":"21st-ascii:community__mine-159dbc65-b7a2-4b3f-9b15-a30be451a30f","t":"mine","d":"mine turns any photo into contour ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GUBCXV06fu3rRHNyGC2652vX0C/b53adfc8-9d18-4f96-9bd3-71a222aec9ca.webp","pc":"community"},{"id":"21st-ascii:community__minimal-3d30236a-1639-46d6-a37f-4bd39a231a89","t":"minimal","d":"minimal turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GdLUDAN6ieID1Fu8OTL6zl5Al1/a30f332e-8a73-4a79-b394-1dab72ea63b8.webp","pc":"community"},{"id":"21st-ascii:community__minimal-488f05af-0110-4873-87e7-5afea99778ac","t":"Minimal","d":"Minimal turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GdLUDAN6ieID1Fu8OTL6zl5Al1/9e491c00-28aa-41a0-a325-2c7f061a44a0.webp","pc":"community"},{"id":"21st-ascii:community__mirrorball-c8e650a5-9c9f-4d75-ad0b-32da2d05b368","t":"Mirrorball","d":"Mirrorball turns any photo into disco ASCII art with a animated, colorful look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/c8e650a5-9c9f-4d75-ad0b-32da2d05b368.jpg","pc":"community"},{"id":"21st-ascii:community__mo-mosaic-11c565ed-8034-4db8-a4ef-d50690c915b6","t":"Mo Mosaic","d":"Mo Mosaic turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39AUrstSGWJUKmRU9spgBJgd1hs/95b377f8-e226-434d-be5c-2c7159b3e244.webp","pc":"community"},{"id":"21st-ascii:community__mosaic-a8f52e63-b892-4d2f-8602-955a2fd020f8","t":"Mosaic","d":"Mosaic turns any photo into mosaic ASCII art with a minimal, mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a8f52e63-b892-4d2f-8602-955a2fd020f8.jpg","pc":"community"},{"id":"21st-ascii:community__mosaic-leaf-121c1be4-a78d-4e4b-9749-0d716ce0af98","t":"MOSAIC leaf","d":"MOSAIC leaf turns any photo into mosaic ASCII art with a mosaic, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GObjJe4MtmTZs0SSVfVnBc4ULD/7f9bed03-1da8-499c-85b4-0ddf0d9a5c50.webp","pc":"community"},{"id":"21st-ascii:community__mrx-brain-2-138a7c62-3330-43fa-9846-429b142c1977","t":"MRX Brain 2","d":"MRX Brain 2 turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_32TAi07xdNkdI5Ranggnq6Ofdht/669cf3be-c6af-438b-860e-eab7f325ceb9.webp","pc":"community"},{"id":"21st-ascii:community__mt-d180918d-8ade-449e-bff1-3dd9690eb908","t":"mt","d":"mt turns any photo into half blocks ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3DOzWxNHTJ21ZO7EQhTsrYRfL5Y/9d35f23f-b498-4f6a-9728-fd3f8d6ffd95.webp","pc":"community"},{"id":"21st-ascii:community__mtfuji-dbdc3cf0-f082-4d19-b1b9-7955c59eee45","t":"mtfuji","d":"mtfuji turns any photo into diamond ASCII art with a pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3BAUCUGvgvkl2oldjJl3MpcOVBD/6c0c2cef-b8ea-48f0-9100-7d56446350cf.webp","pc":"community"},{"id":"21st-ascii:community__myphoto-2e0dd402-bfdb-471f-b59d-0e27532b96c9","t":"myphoto","d":"myphoto turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H5EFdbMDxJHEyMLGmhtjHXiEVc/e0769f52-93de-4558-9487-5783ec0ec9ec.webp","pc":"community"},{"id":"21st-ascii:community__n-04303476-5fa2-408a-912b-f51d1935dc7e","t":"n","d":"n turns any photo into hex dump ASCII art with a terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_30XIKFZ370uhAIEjYnAUVACE5e3/b1bc717b-9e46-449a-976e-b635d29acb8b.webp","pc":"community"},{"id":"21st-ascii:community__neon-citi-83197b13-b069-4f33-b2fb-89039e7ccee9","t":"neon citi","d":"neon citi turns any photo into stars ASCII art with a neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GBzAKrJNPm2lZ21TUsBSXZVEsJ/520002f5-a297-4aa7-9bb1-2c5859f10e10.webp","pc":"community"},{"id":"21st-ascii:community__neon-mirage-67bcbda3-6c8e-446b-b9cc-463c6194c531","t":"Neon Mirage","d":"Neon Mirage turns any photo into mosaic ASCII art with a colorful, neon, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/67bcbda3-6c8e-446b-b9cc-463c6194c531.jpg","pc":"community"},{"id":"21st-ascii:community__neon-mosaic-164f4470-6b13-4880-a126-a02eba1ac352","t":"Neon mosaic","d":"Neon mosaic turns any photo into matrix ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3FiWvlvyf1NFbcyefLxuzu1GsyU/dfdd5b98-3f26-43d3-b840-06a936c63db5.webp","pc":"community"},{"id":"21st-ascii:community__neon-nebula-0d9813a1-8a52-4899-912d-4975bc123c7c","t":"Neon Nebula","d":"Neon Nebula turns any photo into stars ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GfKZHMVrEGaZQLVz5Qufduwjfk/5a2bb8d2-7315-4c9d-a2ff-0b1bc615c76c.webp","pc":"community"},{"id":"21st-ascii:community__new1-7cabb4e8-a36a-4fff-acdb-9477c71a5e3e","t":"new1","d":"new1 turns any photo into hatching ASCII art with a cyberpunk, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_306ivTauWRHotgpqlmdvOcmx926/8bbcecf2-ae37-485f-8070-48f5df7a1110.webp","pc":"community"},{"id":"21st-ascii:community__njkhbjkhjkhjkhkjhjkh-53664d7b-b38c-48f3-879f-672bc98bd451","t":"njkhbjkhjkhjkhkjhjkh","d":"njkhbjkhjkhjkhkjhjkh turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HglXYxRVtqtNzwEcHcaUlaqKao/8850481e-d90c-4f6b-ad11-53a948aa9fba.webp","pc":"community"},{"id":"21st-ascii:community__nm-499319c3-231d-4444-87de-7c9981970913","t":"nm","d":"nm turns any photo into characters ASCII art with a minimal, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_30XIKFZ370uhAIEjYnAUVACE5e3/e0e7cd29-ec3d-4f34-a90f-0cc3f15dc33e.webp","pc":"community"},{"id":"21st-ascii:community__nsutx-99558e1b-3ca6-4477-818a-577041d9816a","t":"nsutx","d":"nsutx turns any photo into cross ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HmpR0LBYGKO2VSnaguqHOwEcog/b4a16422-815e-4bd7-938a-7983f8abe610.webp","pc":"community"},{"id":"21st-ascii:community__oval-eggs-35d7d4ef-c0c4-4ffd-b8eb-79835b531df7","t":"oval eggs","d":"oval eggs turns any photo into disco ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2yQhKWmRkueqJboOVE2MMynwBdu/e4177612-0363-4091-9c18-b27701d795fb.webp","pc":"community"},{"id":"21st-ascii:community__peace-8fbc7317-412c-49c5-856b-105488a048f1","t":"peace","d":"peace turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GSLHLh1gKvp6EJJjfwmJlhMrnB/f3abf6f7-d9a1-48a7-85ba-043b3821715e.webp","pc":"community"},{"id":"21st-ascii:community__peak-mountain-a1007e3f-ceb9-4c50-865c-68f7db06749a","t":"peak Mountain","d":"peak Mountain turns any photo into dots ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2xJxXqdwWohYrdd6fiMYrS9hbmO/1783609040154-smca6v.png","pc":"community"},{"id":"21st-ascii:community__phosphor-5fb0d0f3-a7fa-42c0-b7cf-b235c0550525","t":"Phosphor","d":"Phosphor turns any photo into characters ASCII art with a crt, retro, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/5fb0d0f3-a7fa-42c0-b7cf-b235c0550525.jpg","pc":"community"},{"id":"21st-ascii:community__phyrs-f6bc3d06-4508-4d2d-b78a-eb072e9c2b1b","t":"phyrs","d":"phyrs turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3ArjKkD2HsNDMWr9cecb8s0aFqO/66081e37-1d1e-408c-b30b-bd7e4cf66a01.webp","pc":"community"},{"id":"21st-ascii:community__pixelartreebackground-7ae6d045-163c-44a6-bb59-5bb7a761d08a","t":"pixelartreebackground","d":"pixelartreebackground turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HeGXsDW5CZ9Uhr4TVf8RjXzTFP/eb217e4f-391e-48dd-a5c6-b849005921da.webp","pc":"community"},{"id":"21st-ascii:community__pulsing-grid-56204714-28e1-4a85-97e4-86c0b815e9f4","t":"Pulsing Grid","d":"Pulsing Grid turns any photo into bricks ASCII art with a animated, monochrome, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/d173e473-b31e-4979-b5f7-4bc822d2b92b.webp","pc":"community"},{"id":"21st-ascii:community__qweqw-43220377-d42a-491f-9825-84b53c4997c2","t":"qweqw","d":"qweqw turns any photo into lines ASCII art with a retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HgdEeKGCVNhWWoCeJ53q1fDQCD/bf6f766e-747f-46dd-af14-6390b7eae845.webp","pc":"community"},{"id":"21st-ascii:community__recipe-6ae3e902-638f-42bf-b210-87e7e1afdff3","t":"پ","d":"پ turns any photo into contour ASCII art with a crt, neon look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Dew31pXLxAaHJJEzIGjdgV1L7Z/8591a147-c489-499c-a137-b22e3988196e.webp","pc":"community"},{"id":"21st-ascii:community__recipe-811f593a-5e0a-449e-99a0-ee166a61bbae","t":"半堂好课","d":"半堂好课 turns any photo into matrix ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Ff7GI3GncB5FwdkIYOqrujtyIw/c1fd33ea-0cd3-4b0c-817e-5180b7fcd460.webp","pc":"community"},{"id":"21st-ascii:community__recipe-9689532d-9c66-408e-9f6b-ba749fec77cb","t":"ı","d":"ı turns any photo into dither ASCII art with a animated look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_38dTPmnvxt4Ud6smxMnoCiSlKN5/788bc0a2-f980-49bb-a158-81301c7db9ca.webp","pc":"community"},{"id":"21st-ascii:community__redshift-63f8aa27-cea7-49e0-a6a4-c2dc0954563c","t":"Redshift","d":"Redshift turns any photo into dither ASCII art with a pixel, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/63f8aa27-cea7-49e0-a6a4-c2dc0954563c.jpg","pc":"community"},{"id":"21st-ascii:community__reverie-db9a71af-d4c2-4b93-9e94-5e4fd0c6f788","t":"Reverie","d":"Reverie turns any photo into characters ASCII art with a colorful, minimal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/db9a71af-d4c2-4b93-9e94-5e4fd0c6f788.jpg","pc":"community"},{"id":"21st-ascii:community__rocks-f76120d1-0f93-4180-b529-3ee1ea8a0fc3","t":"rocks","d":"rocks turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3CdJgTW8geRShR3gegqAjY0JB3B/c5fdc65e-e912-47dd-9052-9971cd6753d3.webp","pc":"community"},{"id":"21st-ascii:community__roman-monolithic-62cd160c-d141-4905-a7a1-3981e05be25b","t":"Roman Monolithic","d":"Roman Monolithic turns any photo into contour ASCII art with a colorful, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Huc0lifNrRRTlCXGouaMYtBnCN/0e258b1a-f096-40c0-9361-e238ac5d4b0e.webp","pc":"community"},{"id":"21st-ascii:community__roman-monolithic-9f964b74-1481-4f4d-9669-f9c0eacce9d4","t":"Roman Monolithic","d":"Roman Monolithic turns any photo into contour ASCII art with a colorful, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Huc0lifNrRRTlCXGouaMYtBnCN/72cc4c90-1d14-4107-b144-e76f1d721f05.webp","pc":"community"},{"id":"21st-ascii:community__s1-asci-art-7a4fe1d0-4be0-4e11-a6be-2ae8e756af17","t":"S1 ASCI Art","d":"S1 ASCI Art turns any photo into cross ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H92DZKEWMkakgZqcCOVlzigSSa/0f36d803-3aab-4d79-9515-1812b4b4eead.webp","pc":"community"},{"id":"21st-ascii:community__sa7bi-2a4878ca-13d3-4621-af92-6310621cbd40","t":"Sa7bi","d":"Sa7bi turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_36rrwGaolCyrqj84KQ6lr4wc0Ns/ec15488f-0ffd-4626-8668-84adf79cb841.webp","pc":"community"},{"id":"21st-ascii:community__schematic-78b6004b-6c7c-4b2d-b4d7-648c4f28f5cb","t":"Schematic","d":"Schematic turns any photo into characters ASCII art with a minimal, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/78b6004b-6c7c-4b2d-b4d7-648c4f28f5cb.jpg","pc":"community"},{"id":"21st-ascii:community__seed-cd259084-3acd-4023-afb7-eba4a922e32e","t":"seed","d":"seed turns any photo into dither ASCII art with a glitch look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3AW1sqZEzZdEq77JgHt3sgdaFvv/46af2156-f726-44a6-ab1c-8cc5098df036.webp","pc":"community"},{"id":"21st-ascii:community__shader-dither-969bed9f-1f18-4ac5-bf63-1a979f3c1c4b","t":"shader-dither","d":"shader-dither turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_31mZqQPdNteKeKMn1g1Rtu19xhE/174039d6-9c34-41ca-b988-1b530a820725.webp","pc":"community"},{"id":"21st-ascii:community__shadowplay-ae27f983-e681-4881-89a0-00f38ef9de3f","t":"Shadowplay","d":"Shadowplay turns any photo into characters ASCII art with a minimal, monochrome look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/ae27f983-e681-4881-89a0-00f38ef9de3f.jpg","pc":"community"},{"id":"21st-ascii:community__skywash-fa891d0a-4218-4c5b-b032-79a37dbce473","t":"Skywash","d":"Skywash turns any photo into dither ASCII art with a colorful, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/fa891d0a-4218-4c5b-b032-79a37dbce473.jpg","pc":"community"},{"id":"21st-ascii:community__spider-man-bnd-9056a003-2c0e-4079-bb27-01b5e330c2e2","t":"Spider Man BND","d":"Spider Man BND turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Hir8YDQ88PiIxc0JysnpfFkLAA/01304a79-eb67-42b2-a72c-ff70154adcb6.webp","pc":"community"},{"id":"21st-ascii:community__spider-man-e6478fe6-de12-4663-a802-503cd24e1a9c","t":"Spider Man","d":"Spider Man turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3FoHy15J546pivaN7YD1UGMG0kI/b1cf95fe-9a69-4809-87a0-198624247c19.webp","pc":"community"},{"id":"21st-ascii:community__sprite-2e69cf40-f772-4510-94d5-90fb82982303","t":"Sprite","d":"Sprite turns any photo into pixel art ASCII art with a colorful, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/2e69cf40-f772-4510-94d5-90fb82982303.jpg","pc":"community"},{"id":"21st-ascii:community__sss-329a4b07-0eab-4277-9ccc-1accdfbedb94","t":"sss","d":"sss turns any photo into dither ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2xJxXqdwWohYrdd6fiMYrS9hbmO/eae3b158-33e1-442d-8e17-3b4fb6656a7f.webp","pc":"community"},{"id":"21st-ascii:community__stairs-to-yourself-bd386a22-d1f8-46ff-9f78-a5abe8833fcd","t":"stairs to yourself","d":"stairs to yourself turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3H515LbCV9LPma3wcrBvW7ztm9i/573aa931-6fae-43b8-b634-a9191036196c.webp","pc":"community"},{"id":"21st-ascii:community__starry-nights-7ad845c6-760e-459d-b294-96ed22fe439e","t":"starry nights","d":"starry nights turns any photo into mosaic ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3CsH4USnadu1DaOGLGegjBVQeA2/20b7cadd-f69b-4a89-b3ec-9a1fc455a176.webp","pc":"community"},{"id":"21st-ascii:community__sunset-005d1754-9a88-415c-a8c2-cc339d36e569","t":"Sunset","d":"Sunset turns any photo into dots ASCII art with a neon, retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/1783619454766-p6wk5k.png","pc":"community"},{"id":"21st-ascii:community__terminal-pikachu-a0b55a43-58b6-4792-8375-43e630f093e5","t":"Terminal Pikachu","d":"Terminal Pikachu turns any photo into dither ASCII art with a glitch, terminal look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_39720J8FZrHCoGeL23ljF4x20L3/9b9bf5f4-272f-415d-bbb6-436ffba39927.webp","pc":"community"},{"id":"21st-ascii:community__test-192385b1-fa47-4360-9f82-a08b76aa24aa","t":"Test","d":"Test turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HFdVTD9diwPmr9RNePcj28skGj/a82ea67e-6f06-41f0-bc7a-39bdc8fca81a.webp","pc":"community"},{"id":"21st-ascii:community__test-3a6aa4f5-5007-4f47-832d-7468ef01ae31","t":"test","d":"test turns any photo into lines ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HbQpat5MTyFxZAplQS1DTjzaFE/355dbc2f-7596-4066-a74c-eebe40000279.webp","pc":"community"},{"id":"21st-ascii:community__test-b6e23c2a-9cc5-4292-8bdf-de8767a22ae7","t":"test","d":"test turns any photo into mosaic ASCII art with a pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GRKE8E4T91HLBKvL8CImp46wt2/605a5945-32ee-41fa-b00b-e419ea395aa1.png","pc":"community"},{"id":"21st-ascii:community__test-e132b6f2-bc13-4e48-9906-46d62e451e46","t":"test","d":"test turns any photo into dots ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3C0m5EBunnS8rUoJ9qlBd2MiPDR/9e02b5cb-2e9d-4d34-9489-3c489a6cd6bd.webp","pc":"community"},{"id":"21st-ascii:community__test2-768bee7d-b215-419b-b213-30c85df2478a","t":"test2","d":"test2 turns any photo into characters ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HbQpat5MTyFxZAplQS1DTjzaFE/1795fa2f-f484-425e-8519-4b43be5945ef.webp","pc":"community"},{"id":"21st-ascii:community__thread-light-7001ac36-260f-4f13-b9b4-8f5f6b02e546","t":"thread light","d":"thread light turns any photo into hatching ASCII art with a mosaic, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GfOHB2dxQI7kZ41USLqxbqthoO/bbbe6e96-d766-4602-aae0-5d96875ce726.webp","pc":"community"},{"id":"21st-ascii:community__thread-paint-0996d3f6-3cb5-4f4e-8828-398c5d47c98e","t":"thread paint","d":"thread paint turns any photo into hatching ASCII art with a retro look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GfOHB2dxQI7kZ41USLqxbqthoO/62e70811-e1f9-4691-b4a1-92140338364f.webp","pc":"community"},{"id":"21st-ascii:community__trippin-spiral-fa23bfd9-dad9-49f9-be46-6f4ce2e61c29","t":"trippin spiral","d":"trippin spiral turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3EuR8Rivo7IplxBpAILOW0HIiin/6c9e52dc-d1a3-4991-9ff9-230ade812b54.webp","pc":"community"},{"id":"21st-ascii:community__ultramarine-930000ff-ed31-46de-9d2f-8b29cb0508b3","t":"Ultramarine","d":"Ultramarine turns any photo into cross ASCII art with a colorful, crt look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/930000ff-ed31-46de-9d2f-8b29cb0508b3.jpg","pc":"community"},{"id":"21st-ascii:community__vapor-halftone-portrait-dfafeb46-1557-4084-a562-1a7519c9d70e","t":"Vapor Halftone Portrait","d":"Vapor Halftone Portrait turns any photo into dither ASCII art with a animated, halftone, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a210f50a-f035-4c56-9ec7-c3be7942fd4f.webp","pc":"community"},{"id":"21st-ascii:community__vibrant-pulse-glow-225d7e0d-2e3a-435a-b3b3-9eebc103ed2b","t":"Vibrant Pulse Glow","d":"Vibrant Pulse Glow turns any photo into bricks ASCII art with a animated, neon, pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/bf132235-4d83-412d-a5fe-fff9acd56df0.webp","pc":"community"},{"id":"21st-ascii:community__vignette-bloom-e05cb032-35be-4bcd-999b-cbf5b1588bac","t":"Vignette Bloom","d":"Vignette Bloom turns any photo into mosaic ASCII art with a animated, colorful, mosaic look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/0920f00b-2ec1-4cb9-87ec-5ba0d33c1d32.webp","pc":"community"},{"id":"21st-ascii:community__vv-f7224bf0-ed78-449c-a38c-56cee2633792","t":"vv","d":"vv turns any photo into mosaic ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_33jvtfoPon3ReZ5KQ8SJ7n98z7V/c97fd673-862b-49aa-8c9d-475822f58ee2.webp","pc":"community"},{"id":"21st-ascii:community__waterfall-c154d49b-23e1-4015-ac49-7abd5d78a766","t":"Waterfall","d":"Waterfall turns any photo into diamond ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3CIDFvZMf5pQsCyTDv1a4wpEDaE/e9b08fcf-c6f5-4225-a527-e51c8238ecf7.webp","pc":"community"},{"id":"21st-ascii:community__whitecurd-original-47de2eed-6783-435b-bc8f-e67c28e36d1c","t":"Whitecurd original","d":"Whitecurd original turns any photo into rings ASCII art with a pixel look. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3Hfg68Y5FL9dPj0O9gWPiLs2yN0/2a4cb239-65a0-4d48-b424-5cd0559014e3.webp","pc":"community"},{"id":"21st-ascii:community__wonder-4ed4be04-770d-45f2-af98-8d7130a86fe1","t":"Wonder","d":"Wonder turns any photo into pixel art ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3HyZ0rt6rMCUjIcV47idGnCBAAf/18cf87d4-f31f-4cb8-8af3-4b39d4e26a75.png","pc":"community"},{"id":"21st-ascii:community__xarticle-a7819c2f-e9ac-4e01-8fd4-41d718bfa640","t":"xarticle","d":"xarticle turns any photo into hex dump ASCII art. Remix it free in the 21st.dev ASCII art editor.","k":"motion","s":"21st","c":"motion/ascii","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/ascii-recipes/thumbnails/user_3GU9lDnevaFSdflC11GXo5RtDNq/faf93a0e-df3d-4bc4-a6ab-e91d2a5a0f62.webp","pc":"community"},{"id":"21st-gradient:community__2-71725d5e-999d-48a7-ac67-a746506a3d80","t":"2","d":"Remix 2, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HOaRSRbHdSlHqh9NpLonwQr7Ag/6ea3b489-aa36-48db-9329-8fbc3b68c2a0.png","pc":"community"},{"id":"21st-gradient:community__almoayyed-dc893a4f-0b29-4732-9b29-d4de9c0b70ee","t":"Almoayyed","d":"Remix Almoayyed, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_31I43ytqYMVYor6ke33EQGu4ncu/24ee90e7-9d35-4007-a7fd-489f3539457c.webp","pc":"community"},{"id":"21st-gradient:community__animated-gradient-7a296a0d-220d-4682-a558-3b40fd81f6ad","t":"Animated Gradient","d":"Remix Animated Gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3CDfC5V4Uw4bIHMVUaQqML3Y1QM/80833310-dbe5-4559-a805-3686cfb9aed7.webp","pc":"community"},{"id":"21st-gradient:community__aryan-blue-2102cd52-9ae3-4da2-8a29-155de780c1dc","t":"Aryan Blue","d":"Remix Aryan Blue, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3H1sfhJZYBzFchpnVeZHbG1Duw4/66a75195-86bf-4c4b-b6dd-706d803747af.webp","pc":"community"},{"id":"21st-gradient:community__asd-b1e038b8-f853-40ca-9343-ecb03e4720f2","t":"asd","d":"asd","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HpDTba430DO8sIk75oqS3V6szD/ce3a3d05-7d90-45e2-9bb5-99fbada72e6d.webp","pc":"community"},{"id":"21st-gradient:community__axis-blend-gradient-169c2f52-9586-4e15-b010-a1d6c3342eab","t":"Axis Blend gradient","d":"Remix Axis Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HTMXzguieRPd53y9DKYbF00b6B/3a590148-2b62-4b92-867c-c69df1e7eca7.webp","pc":"community"},{"id":"21st-gradient:community__axis-blend-gradient-8374fae1-5a4b-47d3-b0a9-3a7c87dcd534","t":"Axis Blend gradient","d":"Remix Axis Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HpfpSl6uSSCptngXivjiZWYHlL/68c719d1-1c51-46ce-8997-c5e558edc41a.webp","pc":"community"},{"id":"21st-gradient:community__baby-blue-ff8ba6b1-b284-40f1-aad8-08031a91829b","t":"baby blue","d":"Remix baby blue, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GE0EXAqXuiZJVvLpbAJqzpgMvv/3023da01-63c3-4e3a-ba81-c57f2249a159.webp","pc":"community"},{"id":"21st-gradient:community__background-rowds-shop-v1-10bf6028-254c-4b76-9d3c-1a62c0aa09cb","t":"background rowds shop v1","d":"Remix background rowds shop v1, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3DSKgLyqJmL7LCAZYXn4nLIO8E1/f43a1e7b-6f71-472a-ae52-ac867898f091.webp","pc":"community"},{"id":"21st-gradient:community__bg-9204599f-25c3-4b59-ba38-5053bc3fde79","t":"bg","d":"Remix bg, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Hu2MCxNSgwFumOq5vCnHfF5fjU/a1c88634-7412-4d5a-aac4-7ecbfee79488.webp","pc":"community"},{"id":"21st-gradient:community__blerry-app-4f64ff32-9865-4087-9300-267bd75c835f","t":"Blerry.app","d":"Remix Blerry.app, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_39B4gMXMqtMCBFa8u6ygibRT1xB/489742d9-2230-44ce-898c-102906922cf4.webp","pc":"community"},{"id":"21st-gradient:community__blerry-app-9145352b-6d55-436d-96c1-094e7a453e55","t":"blerry.app","d":"Remix blerry.app, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_39B4gMXMqtMCBFa8u6ygibRT1xB/87d1feb2-b709-4eea-8fa0-2001fa68a80d.webp","pc":"community"},{"id":"21st-gradient:community__blerry-app-ef7a4d3a-c092-443e-a252-fd87e4f73acf","t":"BLERRY.APP","d":"Remix BLERRY.APP, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Cj4SVSBXYhAWLGDTULgkF9Wbcz/6c2c6378-68ae-49cc-bb6c-2cf8775ba6c4.webp","pc":"community"},{"id":"21st-gradient:community__blerry-app-f289a5ee-d7a2-4847-91d6-a5436d03b014","t":"blerry.app","d":"Remix blerry.app, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_39B4gMXMqtMCBFa8u6ygibRT1xB/abe24644-b721-4543-b5f0-5fbc3ac5c77d.webp","pc":"community"},{"id":"21st-gradient:community__bloom-field-gradient-6a30e6f3-3d73-4f8d-8721-85fdf2f3894a","t":"Bloom Field gradient","d":"Remix Bloom Field gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3BBBFbswHL0I6oHWq5DXnqg3Ua9/1d535f30-b13c-4f72-8ca6-70a9430986b3.webp","pc":"community"},{"id":"21st-gradient:community__bloom-field-gradient-81ad6317-65e2-420f-accb-fef272854767","t":"Bloom Field Gradient","d":"A soft bloom gradient with a radiant center blending lavender, violet, and cool gray for a dreamy, atmospheric feel.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HlCUZimaPuPTnUROvM6OI7F8GW/05a49d7c-7bf1-4b8f-a742-acb2ae1bd579.webp","pc":"community"},{"id":"21st-gradient:community__bloom-field-gradient-fba2fa02-eb4c-49d4-8490-8d69c5c0baf7","t":"Bloom Field gradient","d":"Remix Bloom Field gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HlyYCfcE3SQYJjOb8PPP7NJRe9/94bbcddf-98d4-4d2d-a3c5-dc9e5a782bf2.webp","pc":"community"},{"id":"21st-gradient:community__blue-d5bf4bf0-e157-4465-8e16-3b5945973a85","t":"blue","d":"deep blue","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HAXQ3E008uS5ygFRtZGgKYnEmA/c94bd7f6-73e2-4c08-91eb-7a8afe9f8b15.webp","pc":"community"},{"id":"21st-gradient:community__blue-viterna-451e2915-ac62-482c-98d2-a9011948f768","t":"Blue Viterna","d":"Remix Blue Viterna, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HOaRSRbHdSlHqh9NpLonwQr7Ag/2d91d34a-5e65-4821-bec0-2cfcc533eb51.png","pc":"community"},{"id":"21st-gradient:community__bright-lagoon-133238b9-0358-4cd2-9cf3-6129b4d8e34b","t":"Bright Lagoon","d":"Remix Bright Lagoon, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/32e25c16-3503-4841-a2ec-72461ede86b0.webp","pc":"community"},{"id":"21st-gradient:community__bubblegum-fade-e9baa27c-cd1d-4a7d-af1f-c13a22c2acb7","t":"Bubblegum Fade","d":"Remix Bubblegum Fade, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/5f15718c-2e1d-4c84-938f-8286c9b9f829.webp","pc":"community"},{"id":"21st-gradient:community__color-carousel-265dde0f-116f-41c4-9f22-9305b99848e3","t":"Color Carousel","d":"Remix Color Carousel, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/53671096-14e8-431a-ae6c-e2c2bb05ec45.webp","pc":"community"},{"id":"21st-gradient:community__coral-gloom-afb8254c-81aa-4dda-b7bf-01e7aa4dc8e3","t":"Coral Gloom","d":"Remix Coral Gloom, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/142e55bd-ba94-4be3-9011-d97604d2a980.webp","pc":"community"},{"id":"21st-gradient:community__cotton-bubblegum-lilac-f8218dec-6d6b-4267-ad3d-9e4319704259","t":"Cotton Bubblegum Lilac","d":"Remix Cotton Bubblegum Lilac, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/da6dd996-e671-421d-a8b2-e2c080485fe7.webp","pc":"community"},{"id":"21st-gradient:community__d-grad-s-bleu-0e03a186-d79b-4117-9970-f759f6b8873b","t":"Dégradés bleu","d":"Remix Dégradés bleu, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HQeLGMLmnjvjWL8PJ7lteg8fbZ/cf34761d-a12d-464c-8497-5d4f769b5ee0.webp","pc":"community"},{"id":"21st-gradient:community__d-grad-s-bleu-4c662b6d-5980-4dc1-827d-2c5efaa9b432","t":"Dégradés bleu","d":"Remix Dégradés bleu, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HQeLGMLmnjvjWL8PJ7lteg8fbZ/d51d73b2-6918-4bbd-b9a4-e40e5a3d1d11.webp","pc":"community"},{"id":"21st-gradient:community__deep-horizon-268c30b6-143a-4ec9-b5d7-9fb5409e12a5","t":"Deep Horizon","d":"Remix Deep Horizon, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/2518746a-8c11-4bd1-a24f-023c2acb2a2a.webp","pc":"community"},{"id":"21st-gradient:community__deep-sea-f20e093d-4234-409d-b9dd-1fc7bf77d7e4","t":"Deep Sea","d":"Remix Deep Sea, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/ce3ad7b7-1d6d-46dc-9ebb-60a3c669a9e1.webp","pc":"community"},{"id":"21st-gradient:community__desert-horizon-ebbcf7d9-61c0-4cee-94d5-0331ec3e784a","t":"Desert Horizon","d":"Remix Desert Horizon, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/73f2d4be-4c35-4cbc-8926-30c6bfa8284b.webp","pc":"community"},{"id":"21st-gradient:community__dither-grid-gradient-0c68a2ca-791c-4157-b5cc-b589dfd34a55","t":"Dither Grid gradient","d":"Remix Dither Grid gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HNZ3uInf3sRnjvnKmQt025spzR/aca0c179-d0c1-43c5-b615-15a802bd6a6e.webp","pc":"community"},{"id":"21st-gradient:community__dreamy-pastel-wash-f6f05037-03d9-463c-b617-63fe4122d127","t":"Dreamy Pastel Wash","d":"Remix Dreamy Pastel Wash, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/09def2a9-d25d-436f-b4f5-17081ffded61.webp","pc":"community"},{"id":"21st-gradient:community__ember-bloom-78fb1eec-3877-4a9e-b28a-e12b4699cac1","t":"Ember Bloom","d":"Remix Ember Bloom, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/f0706daa-203c-456c-abf7-d3bf98e75833.webp","pc":"community"},{"id":"21st-gradient:community__ember-cascade-4374960c-b852-41ae-9756-2a7edb77ae03","t":"Ember Cascade","d":"Remix Ember Cascade, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/9788b732-6124-47c2-82ca-1cf036036901.webp","pc":"community"},{"id":"21st-gradient:community__fds-fc72db94-f85a-4786-8a02-c6180c9d1092","t":"fds","d":"Remix fds, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Dnx1C7KPerBHm2EXbunqRwxQfH/6e042351-af56-4056-bbaf-40c92453f8bd.webp","pc":"community"},{"id":"21st-gradient:community__floral-veil-8a192437-b877-4628-ae72-239e207f964f","t":"Floral Veil","d":"Remix Floral Veil, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a4c8f56d-a397-4142-a31f-e1bac72f9b4c.webp","pc":"community"},{"id":"21st-gradient:community__forest-meadow-0875e7df-524d-40b6-a2cc-8e8b3aa905b9","t":"Forest Meadow","d":"Remix Forest Meadow, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/55984991-1b15-4ddd-80e4-95ee5c46696a.webp","pc":"community"},{"id":"21st-gradient:community__gg-18df6864-c6c4-4011-8fd3-f93d6f10376c","t":"gg","d":"Remix gg, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_31I43ytqYMVYor6ke33EQGu4ncu/1e1625b5-8286-4406-8d62-9d2d43a279e0.webp","pc":"community"},{"id":"21st-gradient:community__golden-halo-b700d1e7-c449-4e8f-86b2-b6af00ab8b1a","t":"Golden Halo","d":"Remix Golden Halo, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/03a7a224-5289-4044-9028-18efb98c069d.webp","pc":"community"},{"id":"21st-gradient:community__gradient-mc-anim-9a8abc52-d0ef-4d2f-984e-4bba394efe40","t":"Gradient MC Animé","d":"Remix Gradient MC Animé, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Hmbknsn2TTXbQGnO5SkiTnOzlX/28dc31e7-505e-438a-8f17-0b5b689cebdd.webp","pc":"community"},{"id":"21st-gradient:community__green-down-5731df92-f45c-423e-9046-49a0ea954ac5","t":"GREEN DOWN","d":"Remix GREEN DOWN, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Fz7TBp6yIfW5AGVKcuDNoxJPCu/e78a4714-e099-465d-abc3-37242e08c493.webp","pc":"community"},{"id":"21st-gradient:community__guapdexploration1-3a23862c-f461-4298-b054-5d30e0da8b70","t":"guapdexploration1","d":"Remix guapdexploration1, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3F1mZoVoDwn3S9HuTfLoztrysRS/7a6fab53-1df4-489a-b1db-767e0f0f9383.webp","pc":"community"},{"id":"21st-gradient:community__horizon-glow-gradient-04a9e2f9-8c4a-42bc-9f00-97d8f939cf64","t":"Horizon Glow gradient","d":"Remix Horizon Glow gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2zpxKH7FTSRMppMxO3vCFsnd4Ky/c033fc33-9875-433c-ac63-85646a2175e6.webp","pc":"community"},{"id":"21st-gradient:community__horizon-glow-gradient-9b9dc4b6-2a8b-415d-8aaa-b34854e61f75","t":"Horizon Glow gradient","d":"Remix Horizon Glow gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HAxEcDdaUElI7b0wg0seruh8tO/8c226d24-c5cd-48b7-85cc-9ec220786962.webp","pc":"community"},{"id":"21st-gradient:community__hypnotising-wobble-c92f274e-dd1d-48ae-a5fd-9f7058e66354","t":"hypnotising wobble","d":"Remix hypnotising wobble, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GlKb1Z9LpEFpJMph0p28XiAadb/a9b93c7e-e9d6-4a72-a6b2-8bc71869eb4c.webp","pc":"community"},{"id":"21st-gradient:community__ignisia-gradient-e78041da-ee0d-4a41-87b6-0c96380f159e","t":"Ignisia Gradient","d":"Remix Ignisia Gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3H2NgkKr1GkcybkvyfwBCXY2nKm/66db7670-4944-419d-bb9a-e4da89dfdb34.webp","pc":"community"},{"id":"21st-gradient:community__ignisia-gradient-official-87a5b1e1-c576-4d1a-aec4-e9b783578969","t":"Ignisia Gradient Official","d":"Remix Ignisia Gradient Official, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3H2NgkKr1GkcybkvyfwBCXY2nKm/8f639cfa-99fe-44ab-9f82-469fec86c1ff.webp","pc":"community"},{"id":"21st-gradient:community__iris-bloom-fda7e784-fbc9-4173-aeb8-6509975a3e7e","t":"Iris Bloom","d":"Remix Iris Bloom, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a708b9c4-d180-42ff-858e-9a99799ce9f9.webp","pc":"community"},{"id":"21st-gradient:community__iris-petal-fb144aa7-7b9d-49c5-b6d0-ddd3f21e0fe9","t":"Iris Petal","d":"Remix Iris Petal, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/f78e9a12-d881-4655-913d-71c50b8727fe.webp","pc":"community"},{"id":"21st-gradient:community__jade-orb-93d8ba4b-3369-4f83-ada8-842b17798c74","t":"Jade Orb","d":"Remix Jade Orb, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/60398f28-ec76-4d54-a3d2-fe46087cdf7f.webp","pc":"community"},{"id":"21st-gradient:community__jade-sky-85ea2692-591f-4b2b-928f-de88da3d1a88","t":"Jade Sky","d":"Remix Jade Sky, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/27841fe6-88aa-42d3-a006-ef8b48cd4a43.webp","pc":"community"},{"id":"21st-gradient:community__lapis-peach-swirl-7c07e711-cefd-46b9-8f3e-269e401143c2","t":"Lapis Peach Swirl","d":"Remix Lapis Peach Swirl, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/0643eec4-31a8-4eca-b53b-eeed3682bd5e.webp","pc":"community"},{"id":"21st-gradient:community__lovable-1cfe9cf6-68ae-4923-ad09-097429e00d0d","t":"Lovable","d":"Remix Lovable, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Hgl0fECoe1shgN8ptZH6H5Kf3X/8fd7e487-1ae5-4035-a0bd-490c78cfe65d.webp","pc":"community"},{"id":"21st-gradient:community__marine-foam-06587a57-f921-4fb4-8967-74391b5b9fbd","t":"Marine Foam","d":"Remix Marine Foam, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/30a40b02-2de1-4738-85d4-e24583189d16.webp","pc":"community"},{"id":"21st-gradient:community__marine-horizon-e869fcde-a49a-4916-87e5-98b572947498","t":"Marine Horizon","d":"Remix Marine Horizon, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/49008add-e065-4704-acbb-660dd8a53385.webp","pc":"community"},{"id":"21st-gradient:community__menu-4dcadf09-f4d9-4a36-b660-62720e86fdd0","t":"MENU","d":"Remix MENU, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_39B4gMXMqtMCBFa8u6ygibRT1xB/4367faf8-1368-4ab4-9584-a35f4cf08470.webp","pc":"community"},{"id":"21st-gradient:community__my-gradient-86d84851-38a8-49d2-aa73-f9a79f3a2e87","t":"my gradient","d":"better ui","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GtyTX4fcsTPClZ2HjmgmT47Sh6/6abb4597-c0cf-48e1-bc1f-97f8805c0d70.webp","pc":"community"},{"id":"21st-gradient:community__ocean-grain-29a415d7-76fd-45be-be7c-a7cd8b50bd8f","t":"Ocean grain","d":"Remix Ocean grain, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_35kMasyYwGtQgcfNDRFBPuxH4Ye/150fedf8-cdd1-4b7e-bb72-fdf95aca8078.webp","pc":"community"},{"id":"21st-gradient:community__ocean-rings-b098000f-4aa8-44bd-a922-6ae0dd02c12c","t":"Ocean Rings","d":"Remix Ocean Rings, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/8863c2b7-2e17-4c44-9338-63e631e0e980.webp","pc":"community"},{"id":"21st-gradient:community__ocean-ripple-95374da7-5304-4304-a19f-c48430f39476","t":"Ocean Ripple","d":"Remix Ocean Ripple, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/1025d1c0-bedf-413b-9c78-d7e221ac7f41.webp","pc":"community"},{"id":"21st-gradient:community__ocean-sky-ba5ea2af-44fa-45f1-8c4b-88b947dad6b5","t":"Ocean Sky","d":"Remix Ocean Sky, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/bad9fddb-bfbb-4900-a325-b9472fe44d32.webp","pc":"community"},{"id":"21st-gradient:community__ocean-square-611f584d-d9b5-428c-b6a3-479db15d5bf0","t":"Ocean Square","d":"Remix Ocean Square, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/736f78b1-d4d7-419c-80f1-3344eb7111a8.webp","pc":"community"},{"id":"21st-gradient:community__oceanic-depths-dbd4b7fc-fbbe-40b8-84ae-5ee1af072202","t":"Oceanic Depths","d":"Remix Oceanic Depths, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/88b39a16-f7d5-4322-ba08-8a3d7debf425.webp","pc":"community"},{"id":"21st-gradient:community__oceanic-glow-cacc0131-a5ac-42e3-9577-1c52f540ac11","t":"Oceanic Glow","d":"Remix Oceanic Glow, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/b0f25d8f-e258-4d81-afe2-8bcee2245023.webp","pc":"community"},{"id":"21st-gradient:community__oceanic-shimmer-edd345b3-bbfc-488d-9798-87a22acf7276","t":"Oceanic Shimmer","d":"Remix Oceanic Shimmer, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/f418eead-89f8-45a5-b2aa-bc8abda81e79.webp","pc":"community"},{"id":"21st-gradient:community__orange-gamification-3ec497dd-04c7-4c8d-9291-018172c0bf43","t":"Orange gamification","d":"Remix Orange gamification, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HVDhsq2hJQxccmOmViB1pIWxWX/e8f4c65c-2e83-417b-9f44-175cf3ad6912.webp","pc":"community"},{"id":"21st-gradient:community__orchid-petal-sky-5bccdbda-6bc4-4d83-8d0d-cead4a853ade","t":"Orchid Petal Sky","d":"Remix Orchid Petal Sky, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/93608a6e-398c-4d6d-a0f4-ee28b8c5936e.webp","pc":"community"},{"id":"21st-gradient:community__orgblu-0d426a6e-e14c-4864-8d31-68c9d2ef4b40","t":"ORGBLU","d":"Orgblue","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3D5npwPsyCLwGrYO0CGTZIicoJZ/e4519d97-c922-491c-b703-7fa4f6a4d9be.png","pc":"community"},{"id":"21st-gradient:community__pedidosmenu-com-6c3bebfe-9209-4e75-a10f-445b14a1b635","t":"PedidosMenu.com","d":"Remix PedidosMenu.com, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_39B4gMXMqtMCBFa8u6ygibRT1xB/b10fee52-e5cb-4a41-bd60-1efac820f16c.webp","pc":"community"},{"id":"21st-gradient:community__pipo-58063e64-512c-42dc-b70f-8f7888ec8067","t":"Pipo","d":"Remix Pipo, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GeIpeDGDMJSRdRw3JFtR1P0Dtb/0508e8ad-6421-478b-ba86-3aa32fa4f5c3.webp","pc":"community"},{"id":"21st-gradient:community__pixel-blush-483c1e00-19a6-43a4-aea3-3d3926c5be1f","t":"Pixel Blush","d":"Remix Pixel Blush, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/5f1aebe0-5b94-4de8-9e90-6d3d8620e96b.webp","pc":"community"},{"id":"21st-gradient:community__plum-peach-butter-4ef92f6a-4732-42a0-a16a-42b75e4f833c","t":"Plum Peach Butter","d":"Remix Plum Peach Butter, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/724cf873-b94a-4e67-9a58-9c727cc74a19.webp","pc":"community"},{"id":"21st-gradient:community__plum-sand-apricot-c2b7cddf-7488-4a84-a7bc-2c52f88135a4","t":"Plum Sand Apricot","d":"Remix Plum Sand Apricot, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/c2f446e7-7b29-4fd3-ac2e-6742d586d24e.webp","pc":"community"},{"id":"21st-gradient:community__pulse-bar-slitted-glass-65ea4007-0767-4294-8359-edd838a00cb6","t":"Pulse bar slitted glass","d":"Because it has slitted glass","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3FfldkLWPuVmVyT2bzg0X1X2eot/a144646a-4f79-4282-8d48-9bdc87d0d5dd.webp","pc":"community"},{"id":"21st-gradient:community__pur-1dbec9d5-0d23-4d00-a26a-071b03d7b72e","t":"pur","d":"Remix pur, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3F07VeB4aZMZl60YRbvtzSlvp2q/3eec49dd-988f-4900-86fa-997cac75beb6.png","pc":"community"},{"id":"21st-gradient:community__purple-animated-waves-3e62a83e-176c-4413-91d7-c7702eb1ff9c","t":"Purple Animated Waves","d":"Remix Purple Animated Waves, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_38nd6MBEJ1BjvRg3l3jtSxqP2RN/bfc2d8cf-ad23-4168-9eba-5580da74fad9.webp","pc":"community"},{"id":"21st-gradient:community__purple-animated-waves-c82eb192-d361-494a-9038-d27618453503","t":"Purple Animated Waves","d":"Remix Purple Animated Waves, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_38nd6MBEJ1BjvRg3l3jtSxqP2RN/35911e9f-08c5-4847-9d1a-99be9ff08b04.webp","pc":"community"},{"id":"21st-gradient:community__purple-animated-waves-graved-79346d10-1c32-41dc-a435-e35093ee42d8","t":"Purple Animated Waves Graved","d":"Remix Purple Animated Waves Graved, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_38nd6MBEJ1BjvRg3l3jtSxqP2RN/46b9b79e-c837-4d66-893b-394d55ddb261.webp","pc":"community"},{"id":"21st-gradient:community__recipe-4fbb85ee-b733-4bfc-b7cb-4f06d9080085","t":"그라데이션","d":"Remix 그라데이션, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GZa8jRodPVHgt9ncLDfB9tYSY7/ab2d7d95-2253-4b1f-85cd-a1cb287df769.webp","pc":"community"},{"id":"21st-gradient:community__recipe-c1a9005a-0392-47a0-a1a1-caf4eea1171f","t":"夢かわグラデ","d":"Remix 夢かわグラデ, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3H8G3vB5u9DK3DtddyZ0TVVorEV/c6b3a544-6703-429d-8838-5308bf4bd836.webp","pc":"community"},{"id":"21st-gradient:community__recipe-d02073f9-0470-4702-9a3d-47329f0fbe3c","t":"淡粉色","d":"Remix 淡粉色, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HPMlh2ryIffV4GdmCme49Ek2jw/3c18d9d1-761a-4d6a-b501-45811129e815.webp","pc":"community"},{"id":"21st-gradient:community__ribbon-gradient-1-80ea453a-a702-4077-b9a2-fbe71cbb7b8e","t":"Ribbon Gradient 1","d":"Remix Ribbon Gradient 1, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_37f3l8SQjSMJ0cVz3DKNN8y3pqT/f05399eb-580a-42f0-b61e-12b3bd96f883.webp","pc":"community"},{"id":"21st-gradient:community__rosewood-blush-803856e1-f722-4990-b966-32738d184dd9","t":"Rosewood Blush","d":"Remix Rosewood Blush, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/177c476f-4d04-4386-8112-c3085cb71430.webp","pc":"community"},{"id":"21st-gradient:community__sea-mist-tiles-6f1088bc-a915-4273-a807-ee1da999b211","t":"Sea Mist Tiles","d":"Remix Sea Mist Tiles, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/1f4c68cc-2919-4943-bd6b-cf227ded6639.webp","pc":"community"},{"id":"21st-gradient:community__shadowed-steps-c3e8febd-f858-47e5-951a-8887115895af","t":"Shadowed Steps","d":"Remix Shadowed Steps, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/03baa80c-d923-4ec2-88ea-774f2f38b470.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-1f93acd9-db22-4335-b9ef-e8bac7ace8ea","t":"Silk blend","d":"Remix Silk blend, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3Aa33BOFT28NfaOyAAlbJlZDlQF/6b482991-723e-4e73-8e89-a1b0dc3791d7.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-17284c8d-1c58-41c9-82d3-3ad4a8517cea","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_35kMasyYwGtQgcfNDRFBPuxH4Ye/2aaf3c4e-3a21-4b0a-b3e6-8c1ce6eb768e.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-37793190-332d-47b2-8540-51039fd79cd8","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3H1sfhJZYBzFchpnVeZHbG1Duw4/3e54e7d1-aa26-4017-9cac-8253dea59d20.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-3913fbc4-175e-498a-842b-3c1482c04614","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HigJZSiFP5kZrrQbka7Mmbumxp/cca71a74-ea5f-4c00-acd1-5e9cbbc464c3.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-a1ae0c0e-7273-4673-8406-1cf567fe6544","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3CzJzoAayn6QI50pQoqlVmfhBgw/8beaed26-07ce-4051-9da8-9c34ccc49272.png","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-e8209203-e23d-42b6-8af1-bf4e5d45b6df","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GpQ2MncZOijCwbVRHOfZM6XAM7/0573ad79-1e25-46a0-b363-276883f32519.webp","pc":"community"},{"id":"21st-gradient:community__silk-blend-gradient-faef6ee1-8340-4ac1-930e-984262eea779","t":"Silk Blend gradient","d":"Remix Silk Blend gradient, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3EmisfWW1w4LtrySRVYcuiusN0h/eaa08794-e261-40fb-8a97-0bbe1bd191e5.webp","pc":"community"},{"id":"21st-gradient:community__soft-pastel-blend-d1034cb2-39e4-41a0-b892-38a013c24c7d","t":"Soft Pastel Blend","d":"Remix Soft Pastel Blend, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/1d71faac-5f7a-4562-ac14-5bfb8a7d16a2.webp","pc":"community"},{"id":"21st-gradient:community__steel-cone-3189cee2-e447-4828-bb1f-acab9b1db69b","t":"Steel Cone","d":"Remix Steel Cone, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/d42e20ca-0523-4bf8-a10f-494908a704ef.webp","pc":"community"},{"id":"21st-gradient:community__sunset-04c6cda1-e332-4271-a417-b1e9b535f4b8","t":"Sunset","d":"Remix Sunset, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3HOaRSRbHdSlHqh9NpLonwQr7Ag/fa7edd21-064b-4f33-ac7c-3b60bd41e117.png","pc":"community"},{"id":"21st-gradient:community__sunset-0e257812-cc1e-47c5-93b0-e81190627846","t":"Sunset","d":"Remix Sunset, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3GFyENFkOzvLU24iRceveih6bme/a2eaabd0-5b1d-4d6c-b4a4-e8970bd6e4e5.webp","pc":"community"},{"id":"21st-gradient:community__sunset-bloom-16f0a851-93fe-484e-87dd-0480a06f511e","t":"Sunset Bloom","d":"Remix Sunset Bloom, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/dffa35f4-0db5-41f7-8ebd-d22f9cdb0b4a.webp","pc":"community"},{"id":"21st-gradient:community__sunset-blush-788cc52e-b892-4a5c-ba02-7b0abaeeb38f","t":"Sunset Blush","d":"Remix Sunset Blush, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/c7107e35-37c3-439e-8ecd-3ff3ed30c3c2.webp","pc":"community"},{"id":"21st-gradient:community__sunset-orb-2389ca2f-5232-48d2-af54-00d58fb5d063","t":"Sunset Orb","d":"Remix Sunset Orb, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/d01172ed-2576-4ad0-9dec-ffe16e11e0f2.webp","pc":"community"},{"id":"21st-gradient:community__sunset-swell-0b03be2d-6889-4010-bb06-5a3f5cb3b646","t":"Sunset Swell","d":"Remix Sunset Swell, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/edffb8cb-9432-4cc2-b9ea-d6e3da27de12.webp","pc":"community"},{"id":"21st-gradient:community__target-2-b889cb3a-df71-430e-95f7-4f1816b9c0ea","t":"Target 2","d":"Remix Target 2, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3F07VeB4aZMZl60YRbvtzSlvp2q/9b1baec2-a4c3-4d90-b310-0ec37ee4b83e.png","pc":"community"},{"id":"21st-gradient:community__target-ac330893-7fab-4cde-9383-60df34c9ff7d","t":"target","d":"Remix target, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_3F07VeB4aZMZl60YRbvtzSlvp2q/be9754e2-9116-4f37-b864-03e9c527f52f.png","pc":"community"},{"id":"21st-gradient:community__verdant-sprawl-b86012c9-e2fe-4528-8795-17002146d27e","t":"Verdant Sprawl","d":"Remix Verdant Sprawl, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/1fb69311-4303-498d-a063-d15908ad2097.webp","pc":"community"},{"id":"21st-gradient:community__vermilion-rings-ed911ad7-d161-447e-96be-50f38bf75c91","t":"Vermilion Rings","d":"Remix Vermilion Rings, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/df2df8e0-ae52-4b8f-80da-1c7749945879.webp","pc":"community"},{"id":"21st-gradient:community__violet-nocturne-fe31f7c5-4f9c-405a-88c2-b55b835c3312","t":"Violet Nocturne","d":"Remix Violet Nocturne, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/27bacd2b-3747-4812-a416-9ab87e6e03f7.webp","pc":"community"},{"id":"21st-gradient:community__violet-orbit-ee617eb7-bdff-41bc-b7ca-6b1b08b6db05","t":"Violet Orbit","d":"Remix Violet Orbit, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/cea086b2-fae8-4822-b7ef-ef96da36a918.webp","pc":"community"},{"id":"21st-gradient:community__violet-radiance-26b23ad3-26ea-4731-978d-f717c2c0ea82","t":"Violet Radiance","d":"Remix Violet Radiance, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/82b2a47d-a5bb-47ea-b051-4483c4b08af3.webp","pc":"community"},{"id":"21st-gradient:community__violet-starlight-138cec05-292b-4892-bfa9-2c319a4b7968","t":"Violet Starlight","d":"Remix Violet Starlight, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/abd4b5df-930d-4765-9369-517c34c83627.webp","pc":"community"},{"id":"21st-gradient:community__watermelon-marigold-da44a40f-9729-4a3b-8ac3-68de86c5cdb7","t":"Watermelon Marigold","d":"Remix Watermelon Marigold, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/a039d617-02a7-48e2-8dbb-631cae8f0688.webp","pc":"community"},{"id":"21st-gradient:community__zigzag-veil-b5350904-1b5c-4815-b2d3-47d2fb935f10","t":"Zigzag Veil","d":"Remix Zigzag Veil, a community gradient made with the 21st Gradient Builder.","k":"motion","s":"21st","c":"motion/gradient","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/gradient-recipes/thumbnails/user_2nElBLvklOKlAURm6W1PTu6yYFh/8a3343c0-f7dc-4ddb-9c8d-66e98dfdcf79.webp","pc":"community"},{"id":"21st-library:0xUrvish__layouts","t":"Layouts","d":"A micro-interaction React UI library built on shadcn/ui and Framer Motion. Preview all 24 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Curs","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"0xUrvish","st":"indexed","pl":"https://21st.dev/api/og/profile/0xUrvish","pc":"0xUrvish"},{"id":"21st-library:21st__agent-elements","t":"Agent Elements","d":"Collection of React UI components for building AI agent chat interfaces, like send/attachment buttons, suggestions, and loaders. Preview all 22 components live on 21st — copy the T","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"21st","st":"indexed","pl":"https://21st.dev/api/og/profile/21st","pc":"21st"},{"id":"21st-library:Alwurts__simple-ai","t":"simple-ai","d":"Open-source AI-focused UI components, blocks, and React Flow workflows built with shadcn/ui and the Vercel AI SDK. Preview all 3 components live on 21st — copy the TSX, install via","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"Alwurts","st":"indexed","pl":"https://21st.dev/api/og/profile/Alwurts","pc":"Alwurts"},{"id":"21st-library:BelkacemYerfa__shadcn-extension","t":"Shadcn Extension Components","d":"An open-source component collection that extends shadcn/ui with additional reusable UI components.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"BelkacemYerfa","st":"indexed","pl":"https://21st.dev/api/og/profile/BelkacemYerfa","pc":"BelkacemYerfa"},{"id":"21st-library:Codehagen__prism-ui","t":"Prism UI","d":"A fully customizable, accessible, production-ready component library built on top of shadcn/ui. Preview all 17 components live on 21st — copy the TSX, install via the shadcn CLI, o","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"Codehagen","st":"indexed","pl":"https://21st.dev/api/og/profile/Codehagen","pc":"Codehagen"},{"id":"21st-library:Edil-ozi__edil-ozi","t":"Edil Ozi","d":"Open-source collection of React components you can copy and paste into your apps. Preview all 8 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them int","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"Edil-ozi","st":"indexed","pl":"https://21st.dev/api/og/profile/Edil-ozi","pc":"Edil-ozi"},{"id":"21st-library:ElevenLabs__elevenlabs-ui","t":"ElevenLabs UI","d":"A component library and custom registry built on shadcn/ui for building multimodal AI agent interfaces faster. Preview all 10 components live on 21st — copy the TSX, install via th","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ElevenLabs","st":"indexed","pl":"https://21st.dev/api/og/profile/ElevenLabs","pc":"ElevenLabs"},{"id":"21st-library:KarrixLee__kl-ui","t":"KL UI Components","d":"Browse the KL UI component library on 21st.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"KarrixLee","st":"indexed","pl":"https://21st.dev/api/og/profile/KarrixLee","pc":"KarrixLee"},{"id":"21st-library:LegionWebDev__evil-charts","t":"Evil Charts","d":"Open-source collection of beautifully designed, animated chart components built with shadcn/ui and Recharts. Preview all 5 components live on 21st — copy the TSX, install via the s","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"LegionWebDev","st":"indexed","pl":"https://21st.dev/api/og/profile/LegionWebDev","pc":"LegionWebDev"},{"id":"21st-library:LegionWebDev__svg-ui","t":"SVG UI","d":"Copy-paste library of animated SVG components built with React and Tailwind CSS. Preview all 3 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"LegionWebDev","st":"indexed","pl":"https://21st.dev/api/og/profile/LegionWebDev","pc":"LegionWebDev"},{"id":"21st-library:RayMethula__rapidui","t":"RapidUI","d":"Instant, copy-paste UI blocks for React and Next.js developers. Preview all 4 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claud","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"RayMethula","st":"indexed","pl":"https://21st.dev/api/og/profile/RayMethula","pc":"RayMethula"},{"id":"21st-library:ShadcnStudio__shadcnstudio","t":"ShadcnStudio","d":"An open-source collection of copy-and-paste shadcn/ui components, blocks, and templates with a theme generator. Preview all 14 components live on 21st — copy the TSX, install via t","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ShadcnStudio","st":"indexed","pl":"https://21st.dev/api/og/profile/ShadcnStudio","pc":"ShadcnStudio"},{"id":"21st-library:SubframeApp__subframe-ui","t":"Subframe UI","d":"Beautiful, accessible React and Tailwind CSS components to copy and paste, ready to customize in Subframe. Preview all 12 components live on 21st — copy the TSX, install via the sh","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"SubframeApp","st":"indexed","pl":"https://21st.dev/api/og/profile/SubframeApp","pc":"SubframeApp"},{"id":"21st-library:TomIsLoading__hover-dev","t":"Hover.Dev","d":"Copy-paste animated, interactive UI components and templates for React, Tailwind CSS, and Framer Motion. Preview all 5 components live on 21st — copy the TSX, install via the shadc","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"TomIsLoading","st":"indexed","pl":"https://21st.dev/api/og/profile/TomIsLoading","pc":"TomIsLoading"},{"id":"21st-library:airbnb__visx","t":"visx","d":"A collection of reusable, low-level visualization components that combine d3's computational power with React's approach to building user interfaces. Preview all 35 components live","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"airbnb","st":"indexed","pl":"https://21st.dev/api/og/profile/airbnb","pc":"airbnb"},{"id":"21st-library:amanshakya1808__forge-ui","t":"Forge UI","d":"Open-source collection of animated, responsive React components built with Tailwind CSS and Framer Motion. Preview all 6 components live on 21st — copy the TSX, install via the sha","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"amanshakya1808","st":"indexed","pl":"https://21st.dev/api/og/profile/amanshakya1808","pc":"amanshakya1808"},{"id":"21st-library:amanshakya307__forge-ui","t":"Forge UI Components","d":"A library of animated, responsive, Tailwind-powered React components for fast front-end development.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"amanshakya307","st":"indexed","pl":"https://21st.dev/api/og/profile/amanshakya307","pc":"amanshakya307"},{"id":"21st-library:aniket-508__heroicons-animated","t":"Heroicons Animated Components","d":"Animated heroicons icons.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"aniket-508","st":"indexed","pl":"https://21st.dev/api/og/profile/aniket-508","pc":"aniket-508"},{"id":"21st-library:antdesign__ant-design","t":"Ant Design","d":"Enterprise-class UI design language and React component library with a set of high-quality components. Preview all 7 components live on 21st — copy the TSX, install via the shadcn ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"antdesign","st":"indexed","pl":"https://21st.dev/api/og/profile/antdesign","pc":"antdesign"},{"id":"21st-library:archived_de9fb983__untitledui","t":"untitledui Components","d":"Large open-source collection of React components built with Tailwind CSS and React Aria; copy, paste, and build.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"archived_de9fb983","st":"indexed","pl":"https://21st.dev/api/og/profile/archived_de9fb983","pc":"archived_de9fb983"},{"id":"21st-library:arihantcodes_1f7b8c4d__spectrum-ui","t":"Spectrum UI","d":"250+ React and Next.js components, blocks, and animations built with Tailwind CSS and Framer Motion. Preview all 22 components live on 21st — copy the TSX, install via the shadcn C","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"arihantcodes_1f7b8c4d","st":"indexed","pl":"https://21st.dev/api/og/profile/arihantcodes_1f7b8c4d","pc":"arihantcodes_1f7b8c4d"},{"id":"21st-library:avijit07x__animateicons-hugeicons","t":"AnimateIcons / Hugeicons Components","d":"Animated hugeicons icons.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"avijit07x","st":"indexed","pl":"https://21st.dev/api/og/profile/avijit07x","pc":"avijit07x"},{"id":"21st-library:avijit07x__animateicons-lucide","t":"AnimateIcons / Lucide Components","d":"Animated lucide icons.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"avijit07x","st":"indexed","pl":"https://21st.dev/api/og/profile/avijit07x","pc":"avijit07x"},{"id":"21st-library:ayushmxxn__serenity-ui","t":"Serenity UI","d":"Beautifully crafted UI components to elevate your web projects. Preview all 16 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Clau","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ayushmxxn","st":"indexed","pl":"https://21st.dev/api/og/profile/ayushmxxn","pc":"ayushmxxn"},{"id":"21st-library:badtzx0__badtz-ui","t":"Badtz UI","d":"Animated UI component library for React and Next.js developers. Preview all 16 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Clau","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"badtzx0","st":"indexed","pl":"https://21st.dev/api/og/profile/badtzx0","pc":"badtzx0"},{"id":"21st-library:bankkroll__bankk","t":"Bankk","d":"Personal collection of React UI components by developer BankkRoll, including pricing cards, testimonials, tabs, and auth forms. Preview all 17 components live on 21st — copy the TS","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"bankkroll","st":"indexed","pl":"https://21st.dev/api/og/profile/bankkroll","pc":"bankkroll"},{"id":"21st-library:berlix__berlix-ui","t":"Berlix UI","d":"Copy-paste React components focused on smooth animations and clean design, built with Tailwind CSS and Framer Motion. Preview all 4 components live on 21st — copy the TSX, install ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"berlix","st":"indexed","pl":"https://21st.dev/api/og/profile/berlix","pc":"berlix"},{"id":"21st-library:bklitai__bklit","t":"Bklit","d":"React component library of design-engineered charts and data-visualization components. Preview all 3 components live on 21st — copy the TSX, install via the shadcn CLI, or pull the","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"bklitai","st":"indexed","pl":"https://21st.dev/api/og/profile/bklitai","pc":"bklitai"},{"id":"21st-library:brijr__brijr","t":"brijr","d":"Open-source collection of type-safe React and Tailwind CSS components for building Next.js websites. Preview all 5 components live on 21st — copy the TSX, install via the shadcn CL","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"brijr","st":"indexed","pl":"https://21st.dev/api/og/profile/brijr","pc":"brijr"},{"id":"21st-library:builduilabs__build-ui","t":"Build UI","d":"Video courses and reference code for building modern, animated user interfaces for the web. Preview all 6 components live on 21st — copy the TSX, install via the shadcn CLI, or pul","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"builduilabs","st":"indexed","pl":"https://21st.dev/api/og/profile/builduilabs","pc":"builduilabs"},{"id":"21st-library:bundui__bundui","t":"Bundui","d":"UI components and blocks built with Tailwind CSS and shadcn/ui. Preview all 17 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Clau","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"bundui","st":"indexed","pl":"https://21st.dev/api/og/profile/bundui","pc":"bundui"},{"id":"21st-library:bundui__shadcn-ui-kit","t":"Shadcn UI Kit","d":"Collection of shadcn/ui-based admin dashboards, templates, components, and blocks for building React apps faster. Preview all 5 components live on 21st — copy the TSX, install via ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"bundui","st":"indexed","pl":"https://21st.dev/api/og/profile/bundui","pc":"bundui"},{"id":"21st-library:chetanverma16__chetanverma-ui","t":"chetanverma/ui","d":"Collection of reusable animated React components built with Framer Motion and Tailwind CSS by Chetan Verma. Preview all 18 components live on 21st — copy the TSX, install via the s","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"chetanverma16","st":"indexed","pl":"https://21st.dev/api/og/profile/chetanverma16","pc":"chetanverma16"},{"id":"21st-library:cnippet.dev__cnippet","t":"Cnippet","d":"Premium UI components, pre-built blocks, and guides to accelerate React and Next.js development. Preview all 70 components live on 21st — copy the TSX, install via the shadcn CLI, ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"cnippet.dev","st":"indexed","pl":"https://21st.dev/api/og/profile/cnippet.dev","pc":"cnippet.dev"},{"id":"21st-library:codecalm__tabler","t":"Tabler Icons Components","d":"Tabler Icons icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"codecalm","st":"indexed","pl":"https://21st.dev/api/og/profile/codecalm","pc":"codecalm"},{"id":"21st-library:coss.com__coss","t":"coss","d":"Open-source React UI component library built on Base UI; the official design system of Cal.com. Preview all 28 components live on 21st — copy the TSX, install via the shadcn CLI, o","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"coss.com","st":"indexed","pl":"https://21st.dev/api/og/profile/coss.com","pc":"coss.com"},{"id":"21st-library:cult-ui__cult-ui","t":"cult ui","d":"78+ free, open-source animated React components and effects that drop into any shadcn/ui project. Preview all 18 components live on 21st — copy the TSX, install via the shadcn CLI,","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"cult-ui","st":"indexed","pl":"https://21st.dev/api/og/profile/cult-ui","pc":"cult-ui"},{"id":"21st-library:cyberalien__line-md","t":"Material Line Icons Components","d":"Animated line-md icons.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"cyberalien","st":"indexed","pl":"https://21st.dev/api/og/profile/cyberalien","pc":"cyberalien"},{"id":"21st-library:dadopelanosvela__dalexdev","t":"DalexDev Components","d":"Personal collection of React UI components, including neumorphic and glow effects, by frontend developer Alejandro Velasco.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"dadopelanosvela","st":"indexed","pl":"https://21st.dev/api/og/profile/dadopelanosvela","pc":"dadopelanosvela"},{"id":"21st-library:danielpetho__fancy-components","t":"Fancy Components","d":"Free, open-source React library of ready-to-use animated components and microinteractions. Preview all 29 components live on 21st — copy the TSX, install via the shadcn CLI, or pul","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"danielpetho","st":"indexed","pl":"https://21st.dev/api/og/profile/danielpetho","pc":"danielpetho"},{"id":"21st-library:ddoemonn__interior-dev","t":"interior.dev","d":"micro-interactions for react, built for the half-second after a click. Preview all 51 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor a","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ddoemonn","st":"indexed","pl":"https://21st.dev/api/og/profile/ddoemonn","pc":"ddoemonn"},{"id":"21st-library:deltacomponents__deltacomponents","t":"deltacomponents","d":"High-performance component registry built on top of shadcn/ui, from AI chat interfaces to interactive media. Preview all 4 components live on 21st — copy the TSX, install via the s","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"deltacomponents","st":"indexed","pl":"https://21st.dev/api/og/profile/deltacomponents","pc":"deltacomponents"},{"id":"21st-library:dev.shejanmahamud__joly-ui","t":"Joly UI Components","d":"Open-source set of 50+ shadcn/ui-based React and Next.js components with TypeScript support.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"dev.shejanmahamud","st":"indexed","pl":"https://21st.dev/api/og/profile/dev.shejanmahamud","pc":"dev.shejanmahamud"},{"id":"21st-library:devsam7t3__liquid-glass","t":"Liquid Glass Components","d":"@avenra/liquid-glass is a zero-dependency, physics-based SVG displacement lens library for the web that simulates real glass optics. It leverages Snell's law refraction, specular h","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"devsam7t3","st":"indexed","pl":"https://21st.dev/api/og/profile/devsam7t3","pc":"devsam7t3"},{"id":"21st-library:dgearsonu1__authenticui","t":"AuthenticUI","d":"Browse the AuthenticUI component library. Preview all 14 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"dgearsonu1","st":"indexed","pl":"https://21st.dev/api/og/profile/dgearsonu1","pc":"dgearsonu1"},{"id":"21st-library:diceui__dice-ui","t":"Dice UI","d":"Accessible shadcn/ui components built with React, TypeScript, and Tailwind CSS; copy-paste ready. Preview all 3 components live on 21st — copy the TSX, install via the shadcn CLI, ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"diceui","st":"indexed","pl":"https://21st.dev/api/og/profile/diceui","pc":"diceui"},{"id":"21st-library:dillionverma__magic-ui","t":"Magic UI","d":"150+ free, open-source animated React components and effects built with Tailwind CSS and Motion. Preview all 60 components live on 21st — copy the TSX, install via the shadcn CLI, ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"dillionverma","st":"indexed","pl":"https://21st.dev/api/og/profile/dillionverma","pc":"dillionverma"},{"id":"21st-library:dubinc__dub","t":"Dub Components","d":"Open-source link attribution platform for short links, conversion tracking, and affiliate programs.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"dubinc","st":"indexed","pl":"https://21st.dev/api/og/profile/dubinc","pc":"dubinc"},{"id":"21st-library:educalvolpz__smoothui","t":"SmoothUI","d":"50+ animated React components for shadcn/ui, built with Motion and Tailwind CSS. Preview all 11 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them int","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"educalvolpz","st":"indexed","pl":"https://21st.dev/api/og/profile/educalvolpz","pc":"educalvolpz"},{"id":"21st-library:ekmas__neobrutalism","t":"Neobrutalism","d":"A collection of neobrutalism-styled UI components based on shadcn/ui and Tailwind CSS. Preview all 9 components live on 21st — copy the TSX, install via the shadcn CLI, or pull the","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ekmas","st":"indexed","pl":"https://21st.dev/api/og/profile/ekmas","pc":"ekmas"},{"id":"21st-library:flower0wine__huajianjiu","t":"花间酒","d":"Browse the 花间酒 component library. Preview all 3 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"flower0wine","st":"indexed","pl":"https://21st.dev/api/og/profile/flower0wine","pc":"flower0wine"},{"id":"21st-library:fuma-nama__fumadocs","t":"Fumadocs","d":"Beautiful, flexible React.js documentation framework for Next.js, Astro, and Vite-based frameworks. Preview all 7 components live on 21st — copy the TSX, install via the shadcn CLI","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"fuma-nama","st":"indexed","pl":"https://21st.dev/api/og/profile/fuma-nama","pc":"fuma-nama"},{"id":"21st-library:hari__animata","t":"Animata","d":"Free, open-source collection of copy-paste animation and interaction components built with React and Tailwind CSS. Preview all 6 components live on 21st — copy the TSX, install via","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"hari","st":"indexed","pl":"https://21st.dev/api/og/profile/hari","pc":"hari"},{"id":"21st-library:haydenbleasel__kibo-ui","t":"Kibo UI","d":"A registry of composable, accessible, open-source components for use with shadcn/ui. Preview all 26 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"haydenbleasel","st":"indexed","pl":"https://21st.dev/api/og/profile/haydenbleasel","pc":"haydenbleasel"},{"id":"21st-library:hero_ui__hero-ui","t":"Hero Ui","d":"Beautiful, fast, and modern React UI library (previously NextUI), built on React Aria and Tailwind CSS. Preview all 6 components live on 21st — copy the TSX, install via the shadcn","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"hero_ui","st":"indexed","pl":"https://21st.dev/api/og/profile/hero_ui","pc":"hero_ui"},{"id":"21st-library:hugeicons__hugeicons","t":"Hugeicons Components","d":"Hugeicons icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"hugeicons","st":"indexed","pl":"https://21st.dev/api/og/profile/hugeicons","pc":"hugeicons"},{"id":"21st-library:ibelick__background-snippets","t":"Background Snippets","d":"Modern background snippets: copy, paste, ready-to-use. Preview all 4 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code ov","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ibelick","st":"indexed","pl":"https://21st.dev/api/og/profile/ibelick","pc":"ibelick"},{"id":"21st-library:ibelick__motion-primitives","t":"Motion Primitives","d":"A UI kit of beautiful, customizable animated components built with Motion and Tailwind CSS. Preview all 34 components live on 21st — copy the TSX, install via the shadcn CLI, or pu","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ibelick","st":"indexed","pl":"https://21st.dev/api/og/profile/ibelick","pc":"ibelick"},{"id":"21st-library:ibelick__prompt-kit","t":"Prompt Kit","d":"High-quality, accessible, customizable components for AI interfaces, built on top of shadcn/ui. Preview all 9 components live on 21st — copy the TSX, install via the shadcn CLI, or","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ibelick","st":"indexed","pl":"https://21st.dev/api/og/profile/ibelick","pc":"ibelick"},{"id":"21st-library:intentui__intent-ui","t":"Intent UI","d":"Accessible React components to copy, customize, and make your own. Preview all 10 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and C","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"intentui","st":"indexed","pl":"https://21st.dev/api/og/profile/intentui","pc":"intentui"},{"id":"21st-library:jolbol1__jolly-ui","t":"Jolly UI","d":"shadcn/ui-compatible, accessible copy-paste components built with React Aria and Tailwind CSS. Preview all 51 components live on 21st — copy the TSX, install via the shadcn CLI, or","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"jolbol1","st":"indexed","pl":"https://21st.dev/api/og/profile/jolbol1","pc":"jolbol1"},{"id":"21st-library:jshguo__interfaces-ds","t":"Interfaces DS","d":"A design system and React component registry for building elegant, accessible user interfaces. Preview all 23 components live on 21st — copy the TSX, install via the shadcn CLI, or","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"jshguo","st":"indexed","pl":"https://21st.dev/api/og/profile/jshguo","pc":"jshguo"},{"id":"21st-library:kaif-ui__kaif-ui","t":"Kaif UI","d":"Library of beautifully crafted, animated components built with Next.js, React, Tailwind CSS, and Framer Motion. Preview all 5 components live on 21st — copy the TSX, install via th","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"kaif-ui","st":"indexed","pl":"https://21st.dev/api/og/profile/kaif-ui","pc":"kaif-ui"},{"id":"21st-library:kapishdima__remocn","t":"Remocn","d":"Copy-paste video component library for Remotion: production-ready animations, transitions, and backgrounds for React. Preview all 6 components live on 21st — copy the TSX, install ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"kapishdima","st":"indexed","pl":"https://21st.dev/api/og/profile/kapishdima","pc":"kapishdima"},{"id":"21st-library:karthikmudunuri__eldora-ui","t":"Eldora UI","d":"150+ free, open-source animated React components built with TypeScript, Tailwind CSS, and Motion. Preview all 13 components live on 21st — copy the TSX, install via the shadcn CLI,","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"karthikmudunuri","st":"indexed","pl":"https://21st.dev/api/og/profile/karthikmudunuri","pc":"karthikmudunuri"},{"id":"21st-library:kinfe123__farm-ui","t":"Farm UI","d":"A client-first, animation-rich UI component library built on Radix UI and shadcn/ui with Framer Motion. Preview all 12 components live on 21st — copy the TSX, install via the shadc","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"kinfe123","st":"indexed","pl":"https://21st.dev/api/og/profile/kinfe123","pc":"kinfe123"},{"id":"21st-library:kokonutd__kokonut-ui","t":"Kokonut UI","d":"100+ modern UI components built with Tailwind CSS, shadcn/ui, and Motion. Preview all 49 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Curso","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"kokonutd","st":"indexed","pl":"https://21st.dev/api/og/profile/kokonutd","pc":"kokonutd"},{"id":"21st-library:kvnkld__aicss","t":"AIcss","d":"Beautifully crafted, copy-paste UI components for AI agent conversations, including thinking states, tool calls, streaming text, tables, and more. Preview all 17 components live on","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"kvnkld","st":"indexed","pl":"https://21st.dev/api/og/profile/kvnkld","pc":"kvnkld"},{"id":"21st-library:lepikhinb__lunar-ui","t":"Lunar UI Components","d":"A collection of interactive Tailwind CSS components built for React and Vue.js.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"lepikhinb","st":"indexed","pl":"https://21st.dev/api/og/profile/lepikhinb","pc":"lepikhinb"},{"id":"21st-library:lina.sameer__lina","t":"Lina Components","d":"Drop-in shadcn/ui ScrollArea replacement (Radix/Base UI) with native touch, adaptive masks, and polished interactions.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"lina.sameer","st":"indexed","pl":"https://21st.dev/api/og/profile/lina.sameer","pc":"lina.sameer"},{"id":"21st-library:liveblocks__frimousse","t":"Frimousse Components","d":"A lightweight, unstyled, and composable emoji picker for React.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"liveblocks","st":"indexed","pl":"https://21st.dev/api/og/profile/liveblocks","pc":"liveblocks"},{"id":"21st-library:ln-dev7__circle","t":"Circle","d":"Open-source project management UI inspired by Linear, built with Next.js and shadcn/ui. Preview all 23 components live on 21st — copy the TSX, install via the shadcn CLI, or pull t","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ln-dev7","st":"indexed","pl":"https://21st.dev/api/og/profile/ln-dev7","pc":"ln-dev7"},{"id":"21st-library:ln-dev7__lndev-ui","t":"lndev-ui","d":"A collection of small, well-coded React components (free and premium) to streamline development. Preview all 30 components live on 21st — copy the TSX, install via the shadcn CLI, ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ln-dev7","st":"indexed","pl":"https://21st.dev/api/og/profile/ln-dev7","pc":"ln-dev7"},{"id":"21st-library:lucide-icons__lucide","t":"Lucide Components","d":"Lucide icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"lucide-icons","st":"indexed","pl":"https://21st.dev/api/og/profile/lucide-icons","pc":"lucide-icons"},{"id":"21st-library:lukacho__lukacho-ui","t":"Lukacho UI","d":"Free, open-source collection of animated React UI components built with Next.js, Tailwind CSS, and Framer Motion. Preview all 6 components live on 21st — copy the TSX, install via ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"lukacho","st":"indexed","pl":"https://21st.dev/api/og/profile/lukacho","pc":"lukacho"},{"id":"21st-library:lyanchouss__daliagents","t":"Dali Agents","d":"Browse the Dali Agents component library. Preview all 48 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"lyanchouss","st":"indexed","pl":"https://21st.dev/api/og/profile/lyanchouss","pc":"lyanchouss"},{"id":"21st-library:manuarora700__aceternity-ui","t":"Aceternity UI","d":"Copy-paste animated React and Tailwind CSS components built with Framer Motion. Preview all 83 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"manuarora700","st":"indexed","pl":"https://21st.dev/api/og/profile/manuarora700","pc":"manuarora700"},{"id":"21st-library:mdafsarx__nur-ui","t":"nur/ui","d":"A modern React and Next.js UI component library with animated components and CLI scaffolding. Preview all 8 components live on 21st — copy the TSX, install via the shadcn CLI, or p","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"mdafsarx","st":"indexed","pl":"https://21st.dev/api/og/profile/mdafsarx","pc":"mdafsarx"},{"id":"21st-library:meschacirung__tailark","t":"Tailark","d":"Pre-built marketing blocks and page templates for building modern marketing websites with shadcn/ui and Tailwind CSS. Preview all 40 components live on 21st — copy the TSX, install","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"meschacirung","st":"indexed","pl":"https://21st.dev/api/og/profile/meschacirung","pc":"meschacirung"},{"id":"21st-library:meta__astryx","t":"Astryx","d":"An open source design system that is fully customizable and agent ready. Preview all 11 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"meta","st":"indexed","pl":"https://21st.dev/api/og/profile/meta","pc":"meta"},{"id":"21st-library:micka_design__fluid-functionalism","t":"Fluid Functionalism","d":"Refined React UI components with satisfying hover interactions, compatible with shadcn/ui and installable via CLI. Preview all 9 components live on 21st — copy the TSX, install via","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"micka_design","st":"indexed","pl":"https://21st.dev/api/og/profile/micka_design","pc":"micka_design"},{"id":"21st-library:mikolajdobrucki__launch-ui","t":"Launch UI","d":"Free, open-source blocks and templates built with React, shadcn/ui, and Tailwind CSS for landing and marketing sites. Preview all 6 components live on 21st — copy the TSX, install ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"mikolajdobrucki","st":"indexed","pl":"https://21st.dev/api/og/profile/mikolajdobrucki","pc":"mikolajdobrucki"},{"id":"21st-library:moazamtrade__shadway","t":"shadway","d":"An open-source workspace with a curated component library, AI-powered UI generation, and community component drops. Preview all 44 components live on 21st — copy the TSX, install v","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"moazamtrade","st":"indexed","pl":"https://21st.dev/api/og/profile/moazamtrade","pc":"moazamtrade"},{"id":"21st-library:molecule-lab-rushil__molecule-ui","t":"Molecule UI","d":"Shadcn-compatible registry of animated, production-ready UI components you add to a Next.js app via shadcn add. Preview all 18 components live on 21st — copy the TSX, install via t","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"molecule-lab-rushil","st":"indexed","pl":"https://21st.dev/api/og/profile/molecule-lab-rushil","pc":"molecule-lab-rushil"},{"id":"21st-library:moumensoliman__ui-tripled","t":"UI TripleD","d":"Production-ready UI blocks, components, and pages for shadcn/ui and Base UI, powered by Framer Motion. Preview all 87 components live on 21st — copy the TSX, install via the shadcn","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"moumensoliman","st":"indexed","pl":"https://21st.dev/api/og/profile/moumensoliman","pc":"moumensoliman"},{"id":"21st-library:mui__base-ui","t":"Base UI","d":"An unstyled UI component library for building accessible user interfaces. Preview all 29 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Curso","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"mui","st":"indexed","pl":"https://21st.dev/api/og/profile/mui","pc":"mui"},{"id":"21st-library:mvp_Subha__mvpblocks","t":"MVPBlocks","d":"Prebuilt UI blocks to ship beautiful MVPs fast, built with Next.js, React, and Tailwind CSS. Preview all 6 components live on 21st — copy the TSX, install via the shadcn CLI, or pu","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"mvp_Subha","st":"indexed","pl":"https://21st.dev/api/og/profile/mvp_Subha","pc":"mvp_Subha"},{"id":"21st-library:nayan_radadiya6__shadcn-extras","t":"shadcn-extras","d":"React library of beautiful, animated UI components built with Motion and Tailwind CSS for shadcn/ui. Preview all 6 components live on 21st — copy the TSX, install via the shadcn CL","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"nayan_radadiya6","st":"indexed","pl":"https://21st.dev/api/og/profile/nayan_radadiya6","pc":"nayan_radadiya6"},{"id":"21st-library:ncdai__chanh-dai","t":"Chánh Đại","d":"Portfolio and open-source React components by design engineer Chánh Đại, including a wheel picker and animated UI effects. Preview all 5 components live on 21st — copy the TSX, ins","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ncdai","st":"indexed","pl":"https://21st.dev/api/og/profile/ncdai","pc":"ncdai"},{"id":"21st-library:nextjsshop__nextjsshop","t":"Nextjsshop","d":"A marketplace for production-ready Next.js templates and UI components. Preview all 10 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"nextjsshop","st":"indexed","pl":"https://21st.dev/api/og/profile/nextjsshop","pc":"nextjsshop"},{"id":"21st-library:nyxbui__nyxb-ui","t":"Nyxb UI","d":"Fusion UI library combining shadcn/ui and Magic UI with 150+ React, TypeScript, Tailwind, and Framer Motion components. Preview all 5 components live on 21st — copy the TSX, instal","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"nyxbui","st":"indexed","pl":"https://21st.dev/api/og/profile/nyxbui","pc":"nyxbui"},{"id":"21st-library:olovajs__sera-ui","t":"Sera UI Components","d":"UI component library for React, Next.js and JSX frameworks, built with Tailwind CSS.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"olovajs","st":"indexed","pl":"https://21st.dev/api/og/profile/olovajs","pc":"olovajs"},{"id":"21st-library:openstatusHQ__openstatus","t":"OpenStatus Components","d":"Open-source uptime monitoring and status page platform with checks from global regions.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"openstatusHQ","st":"indexed","pl":"https://21st.dev/api/og/profile/openstatusHQ","pc":"openstatusHQ"},{"id":"21st-library:originui__origin-ui","t":"Origin UI","d":"An extensive collection of copy-and-paste UI components for building app interfaces, built with Tailwind CSS and React. Preview all 44 components live on 21st — copy the TSX, insta","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"originui","st":"indexed","pl":"https://21st.dev/api/og/profile/originui","pc":"originui"},{"id":"21st-library:osmosupply__osmo","t":"Osmo","d":"Membership toolkit of copy-paste components, animations, and page transitions for Webflow and HTML developers. Preview all 3 components live on 21st — copy the TSX, install via the","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"osmosupply","st":"indexed","pl":"https://21st.dev/api/og/profile/osmosupply","pc":"osmosupply"},{"id":"21st-library:ozantekin__shsf-ui","t":"SHSF UI","d":"Motion-first React UI library built with TypeScript, Tailwind CSS, Motion, and shadcn/ui. Preview all 6 components live on 21st — copy the TSX, install via the shadcn CLI, or pull ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ozantekin","st":"indexed","pl":"https://21st.dev/api/og/profile/ozantekin","pc":"ozantekin"},{"id":"21st-library:paceui__pace-ui","t":"Pace UI","d":"React component library on Tailwind and shadcn/ui with 50+ component variants, 100+ blocks, and starter kits. Preview all 7 components live on 21st — copy the TSX, install via the ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"paceui","st":"indexed","pl":"https://21st.dev/api/og/profile/paceui","pc":"paceui"},{"id":"21st-library:phosphor-icons__phosphor","t":"Phosphor Icons Components","d":"Phosphor Icons icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"phosphor-icons","st":"indexed","pl":"https://21st.dev/api/og/profile/phosphor-icons","pc":"phosphor-icons"},{"id":"21st-library:phucbm__phuc-ui","t":"Phuc UI","d":"Collection of modern React UI components with GSAP animations, built with TypeScript, Tailwind CSS, and Nextra. Preview all 6 components live on 21st — copy the TSX, install via th","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"phucbm","st":"indexed","pl":"https://21st.dev/api/og/profile/phucbm","pc":"phucbm"},{"id":"21st-library:pqoqubbw__lucide-animated","t":"Lucide Animated Components","d":"Animated lucide icons.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"pqoqubbw","st":"indexed","pl":"https://21st.dev/api/og/profile/pqoqubbw","pc":"pqoqubbw"},{"id":"21st-library:prebuiltui__prebuiltui","t":"PrebuiltUI","d":"435+ free, customizable Tailwind CSS UI components for React, Vue, Next.js, and HTML. Preview all 24 components live on 21st — copy the TSX, install via the shadcn CLI, or pull the","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"prebuiltui","st":"indexed","pl":"https://21st.dev/api/og/profile/prebuiltui","pc":"prebuiltui"},{"id":"21st-library:preetsuthar17__hextaui","t":"HextaUI","d":"Extended components and blocks built on top of shadcn/ui with React and Tailwind CSS. Preview all 113 components live on 21st — copy the TSX, install via the shadcn CLI, or pull th","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"preetsuthar17","st":"indexed","pl":"https://21st.dev/api/og/profile/preetsuthar17","pc":"preetsuthar17"},{"id":"21st-library:reaviz__reaviz","t":"REAVIZ","d":"A modular data visualization library for React, built on D3 with many chart types and interactions. Preview all 34 components live on 21st — copy the TSX, install via the shadcn CL","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"reaviz","st":"indexed","pl":"https://21st.dev/api/og/profile/reaviz","pc":"reaviz"},{"id":"21st-library:remix-design__remix-icon","t":"Remix Icon Components","d":"Remix Icon icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"remix-design","st":"indexed","pl":"https://21st.dev/api/og/profile/remix-design","pc":"remix-design"},{"id":"21st-library:reuno-ui__reuno-ui","t":"reuno-ui","d":"Browse the reuno-ui component library. Preview all 35 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"reuno-ui","st":"indexed","pl":"https://21st.dev/api/og/profile/reuno-ui","pc":"reuno-ui"},{"id":"21st-library:riu-f__riu","t":"riu Components","d":"Browse the riu component library on 21st.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"riu-f","st":"indexed","pl":"https://21st.dev/api/og/profile/riu-f","pc":"riu-f"},{"id":"21st-library:rmahammad__motiq","t":"Motiq","d":"Animated React and shadcn/ui components you install as editable source. 86 components, MIT licensed, zero lock-in. Preview all 13 components live on 21st — copy the TSX, install vi","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"rmahammad","st":"indexed","pl":"https://21st.dev/api/og/profile/rmahammad","pc":"rmahammad"},{"id":"21st-library:ruixen.ui__ruixen-ui","t":"Ruixen UI","d":"React marketing UI for shadcn: 240+ landing-page sections and components built with Tailwind CSS. Preview all 379 components live on 21st — copy the TSX, install via the shadcn CLI","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ruixen.ui","st":"indexed","pl":"https://21st.dev/api/og/profile/ruixen.ui","pc":"ruixen.ui"},{"id":"21st-library:rynkovski__extendui","t":"ExtendUI","d":"Reusable components built on shadcn/ui to increase performance when building web applications. Preview all 6 components live on 21st — copy the TSX, install via the shadcn CLI, or ","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"rynkovski","st":"indexed","pl":"https://21st.dev/api/og/profile/rynkovski","pc":"rynkovski"},{"id":"21st-library:saurabh-2607__great-ui","t":"Great UI","d":"Copy-paste React components built with Next.js, React 19, Tailwind CSS v4 and Motion. Preview all 26 components live on 21st — copy the TSX, install via the shadcn CLI, or pull the","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"saurabh-2607","st":"indexed","pl":"https://21st.dev/api/og/profile/saurabh-2607","pc":"saurabh-2607"},{"id":"21st-library:scriptvg__kromm-lab","t":"Kromm Lab Components","d":"Components and utilities for the kromm-lab workspace.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"scriptvg","st":"indexed","pl":"https://21st.dev/api/og/profile/scriptvg","pc":"scriptvg"},{"id":"21st-library:sean0205__reui","t":"ReUI","d":"Open-source shadcn/ui components, blocks, and animated icons for React, with an MCP server for AI agents. Preview all 91 components live on 21st — copy the TSX, install via the sha","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"sean0205","st":"indexed","pl":"https://21st.dev/api/og/profile/sean0205","pc":"sean0205"},{"id":"21st-library:senommu__motokoui","t":"Motoko UI","d":"Build better. Designed for Production. Preview all 9 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"senommu","st":"indexed","pl":"https://21st.dev/api/og/profile/senommu","pc":"senommu"},{"id":"21st-library:shadcn__shadcn-ui","t":"shadcn/ui","d":"Beautifully designed, copy-paste React components you customize and own, built with Radix UI and Tailwind CSS. Preview all 86 components live on 21st — copy the TSX, install via th","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shadcn","st":"indexed","pl":"https://21st.dev/api/og/profile/shadcn","pc":"shadcn"},{"id":"21st-library:shadcnblockscom__shadcnblocks-com","t":"Shadcnblocks.com","d":"A large set of pre-built blocks and components for shadcn/ui and Tailwind CSS, with templates and a page builder. Preview all 35 components live on 21st — copy the TSX, install via","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shadcnblockscom","st":"indexed","pl":"https://21st.dev/api/og/profile/shadcnblockscom","pc":"shadcnblockscom"},{"id":"21st-library:shadcnspace__shadcnspace","t":"ShadcnSpace","d":"A collection of free and Pro shadcn/ui blocks, components, and templates for React and Next.js apps. Preview all 43 components live on 21st — copy the TSX, install via the shadcn C","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shadcnspace","st":"indexed","pl":"https://21st.dev/api/og/profile/shadcnspace","pc":"shadcnspace"},{"id":"21st-library:shailendrakumar19999__shailendra","t":"Shailendra","d":"Browse the Shailendra component library. Preview all 42 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shailendrakumar19999","st":"indexed","pl":"https://21st.dev/api/og/profile/shailendrakumar19999","pc":"shailendrakumar19999"},{"id":"21st-library:shoota__gymnopedies","t":"Gymnopédies Components","d":"Browse the Gymnopédies component library on 21st.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shoota","st":"indexed","pl":"https://21st.dev/api/og/profile/shoota","pc":"shoota"},{"id":"21st-library:shugar__geist","t":"Geist","d":"Vercel's design system: React components for building consistent web experiences. Preview all 81 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them in","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"shugar","st":"indexed","pl":"https://21st.dev/api/og/profile/shugar","pc":"shugar"},{"id":"21st-library:skyleen77__animate-ui","t":"Animate UI","d":"A library of animated React components built with Tailwind CSS and Motion, distributed as copy-paste code. Preview all 13 components live on 21st — copy the TSX, install via the sh","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"skyleen77","st":"indexed","pl":"https://21st.dev/api/og/profile/skyleen77","pc":"skyleen77"},{"id":"21st-library:sshahaider__efferd","t":"Efferd","d":"Ready-to-use shadcn/ui blocks for React and Tailwind CSS, installable via the shadcn CLI. Preview all 98 components live on 21st — copy the TSX, install via the shadcn CLI, or pull","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"sshahaider","st":"indexed","pl":"https://21st.dev/api/og/profile/sshahaider","pc":"sshahaider"},{"id":"21st-library:ssicevs__ssicevs","t":"ssych ui","d":"Complex software UI made readable. Preview all 14 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"ssicevs","st":"indexed","pl":"https://21st.dev/api/og/profile/ssicevs","pc":"ssicevs"},{"id":"21st-library:subhadeeproy3902__subhadeep-roy","t":"Subhadeep Roy","d":"MVPBlocks, an open-source library of copy-paste Tailwind CSS UI blocks for quickly building MVPs and landing pages. Preview all 4 components live on 21st — copy the TSX, install vi","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"subhadeeproy3902","st":"indexed","pl":"https://21st.dev/api/og/profile/subhadeeproy3902","pc":"subhadeeproy3902"},{"id":"21st-library:tailgrids__tailgrids","t":"TailGrids Components","d":"Open-source React UI library built with Tailwind CSS: production-ready components, blocks, and templates.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"tailgrids","st":"indexed","pl":"https://21st.dev/api/og/profile/tailgrids","pc":"tailgrids"},{"id":"21st-library:tailwindlabs__heroicons","t":"Heroicons Components","d":"Heroicons icon family.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"tailwindlabs","st":"indexed","pl":"https://21st.dev/api/og/profile/tailwindlabs","pc":"tailwindlabs"},{"id":"21st-library:theorcdev__8bitcn","t":"8bitcn","d":"Retro 8-bit styled, copy-paste UI components and blocks built on shadcn/ui with React and Tailwind CSS. Preview all 105 components live on 21st — copy the TSX, install via the shad","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"theorcdev","st":"indexed","pl":"https://21st.dev/api/og/profile/theorcdev","pc":"theorcdev"},{"id":"21st-library:tom_ui__spell","t":"Spell","d":"Refined, animated React UI components for design engineers to copy and paste into any project. Preview all 23 components live on 21st — copy the TSX, install via the shadcn CLI, or","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"tom_ui","st":"indexed","pl":"https://21st.dev/api/og/profile/tom_ui","pc":"tom_ui"},{"id":"21st-library:uiable__uiable","t":"uiable","d":"Free, open-source React component library built on shadcn/ui and Base UI, with copy-paste components you fully own. Preview all 5 components live on 21st — copy the TSX, install vi","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"uiable","st":"indexed","pl":"https://21st.dev/api/og/profile/uiable","pc":"uiable"},{"id":"21st-library:uilayout.contact__ui-layouts","t":"UI Layouts","d":"Copy-paste React components, animated blocks, and design tools, compatible with the shadcn registry. Preview all 66 components live on 21st — copy the TSX, install via the shadcn C","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"uilayout.contact","st":"indexed","pl":"https://21st.dev/api/og/profile/uilayout.contact","pc":"uilayout.contact"},{"id":"21st-library:uvcanvas__uvcanvas","t":"uvcanvas Components","d":"React component library for beautifully shaded WebGL canvas backgrounds and wallpapers.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"uvcanvas","st":"indexed","pl":"https://21st.dev/api/og/profile/uvcanvas","pc":"uvcanvas"},{"id":"21st-library:vercel__ai-elements","t":"AI Elements","d":"A component library and custom registry built on top of shadcn/ui to help you build AI-native applications faster. Preview all 11 components live on 21st — copy the TSX, install vi","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"vercel","st":"indexed","pl":"https://21st.dev/api/og/profile/vercel","pc":"vercel"},{"id":"21st-library:voxlet-ui__voxlet-ui","t":"Voxlet UI","d":"The best animated React and Tailwind components for fast web development. Preview all 5 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"voxlet-ui","st":"indexed","pl":"https://21st.dev/api/og/profile/voxlet-ui","pc":"voxlet-ui"},{"id":"21st-library:youcefbnm__systaliko-ui","t":"Systaliko UI","d":"A collection of animated React components built with Tailwind CSS and Motion, installable per component. Preview all 32 components live on 21st — copy the TSX, install via the shad","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"youcefbnm","st":"indexed","pl":"https://21st.dev/api/og/profile/youcefbnm","pc":"youcefbnm"},{"id":"21st-library:zochory__hax-design","t":"hax-design","d":"Browse the hax-design component library. Preview all 7 components live on 21st — copy the TSX, install via the shadcn CLI, or pull them into Cursor and Claude Code over MCP.","k":"resource","s":"21st","c":"discover/21st-libraries","g":"discover","a":"zochory","st":"indexed","pl":"https://21st.dev/api/og/profile/zochory","pc":"zochory"},{"id":"21st-shader:community__1st-shader-ffc81e4d-5145-4afb-a461-512c264ef3d0","t":"1st shader","d":"Remix 1st shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3CHW6IkGMLdsAt2pewXeefUSFuF/96116aa7-ee05-4419-ba44-a045834d04ff.png","pc":"community"},{"id":"21st-shader:community__a-b9ff80b5-23c8-46f0-9f64-173d2b25cf47","t":"a","d":"Remix a, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3FSmjn8jIoIIPQ9jeJWjKdyxg07/0b85b8df-fef8-4439-8b25-5afac835f04d.webp","pc":"community"},{"id":"21st-shader:community__abstract-plasma-c90478bc-935c-44bc-b5e7-42be1a02235e","t":"Abstract Plasma","d":"Remix Abstract Plasma, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/ec0e977c-a850-47bd-a511-f5b45f54293a.webp","pc":"community"},{"id":"21st-shader:community__abstract-ripple-a340a01c-19e7-43f8-8d2c-88a08a57c6ea","t":"Abstract Ripple","d":"Remix Abstract Ripple, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/b68a7691-fc76-4566-bc6e-fb53c9492803.webp","pc":"community"},{"id":"21st-shader:community__adisyon-shader-2500c12f-0286-4cb2-983f-e8c06c0cca0b","t":"Adisyon Shader","d":"Remix Adisyon Shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3CgIV5scLnijqcuE3dazPg4DYrp/6aa0c9f6-bfd4-4567-ae90-272b61a37e20.webp","pc":"community"},{"id":"21st-shader:community__amethyst-bloom-887c6cf8-7733-4f72-934c-5fd6eac7ddae","t":"Amethyst Bloom","d":"Remix Amethyst Bloom, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/c9fc4542-d5b4-44fa-8600-173966c5a395.webp","pc":"community"},{"id":"21st-shader:community__amethyst-wash-6711f18a-3f56-49eb-bec2-50acf20777cb","t":"Amethyst Wash","d":"Remix Amethyst Wash, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/a713f986-4ad9-471c-8b82-12d29c9ec3b7.webp","pc":"community"},{"id":"21st-shader:community__asd-30df7bc3-7a43-449d-9c04-d0103727d587","t":"asd","d":"Remix asd, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Gu0sXQKoXe2kWedsOV27DSrBTc/1e5ddfe7-d032-450f-969d-3e2b21716fc9.webp","pc":"community"},{"id":"21st-shader:community__ass-4c6576f2-8c4b-418b-8141-f85a33890a57","t":"Ass","d":"Remix Ass, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Bfh18UPoZxkPdPwxJLnLq03cNJ/cd07b8e0-e1ae-47a0-bcb6-ab0c77866a62.webp","pc":"community"},{"id":"21st-shader:community__autoworks-ba07ddb1-4f1e-4e77-837a-30cc606962e2","t":"autoworks","d":"Remix autoworks, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2sXAxFwtD1FJeorRf1tsvKns0Kt/24a807c1-71c3-48e9-a4a7-ba1ba88832a5.webp","pc":"community"},{"id":"21st-shader:community__background-1-6f7ef79d-cf45-4908-89a5-5b948915f505","t":"Background 1","d":"webgm","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HuVO7yVG7XyLbE7mfbV73vgxMZ/3cc6e119-ec64-48df-84aa-685c0d03014e.webp","pc":"community"},{"id":"21st-shader:community__black-and-white-shader-9ad2698d-c817-4cca-8d92-6be9d9fb496d","t":"Black and White shader","d":"Remix Black and White shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HKgLnrOEantZYemI1nCc1TcK1L/0792e659-9096-47dd-8eb5-45b4d5e44582.webp","pc":"community"},{"id":"21st-shader:community__blue-gold-mesh-6efa1d55-87ae-431a-bc0f-598273aaabda","t":"Blue-gold mesh","d":"On a landing page for an event","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2y3IF0VXJeDDYRyIytpsNttvmWu/a45c64d1-339f-4361-8b45-19cb2b88a66f.webp","pc":"community"},{"id":"21st-shader:community__blue-halftone-64fec2eb-0cc8-4a2e-afa4-4a7444d59c40","t":"Blue halftone","d":"sports website background","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Fe0zPqRpDFl1YKMkSaPATiHVHX/6d07908b-f8da-4bcc-a15c-0f2b5acc81f6.webp","pc":"community"},{"id":"21st-shader:community__blue-light-swirl-1cb528fa-0d40-4ae2-abb4-7981681e1464","t":"Blue Light Swirl","d":"Remix Blue Light Swirl, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/17d37c6c-52ed-4047-85b7-edce7510ca82.webp","pc":"community"},{"id":"21st-shader:community__blue-noise-3285d408-7a22-4ece-8d03-51c094189baa","t":"Blue Noise","d":"Remix Blue Noise, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HMYtQ8gzQNxRijoXkM2N4FlNVt/2553f75a-25a9-4d11-a4d3-bb49639b8f1b.webp","pc":"community"},{"id":"21st-shader:community__c2e812-6a47aca0-9108-40c8-9c0d-a692c82cb0a0","t":"c2e812","d":"Remix c2e812, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3H3jvMUekZHBmq96J1MOTPnTtPW/86ad7e77-06be-4c18-800b-3890b55934e4.webp","pc":"community"},{"id":"21st-shader:community__caustics-shader-9da59921-aab0-49a8-aaa8-fb2d5a23b5f2","t":"Caustics Shader","d":"Remix Caustics Shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3AhTySF8IeRu4lqInSilCJ1nClY/7d18728b-7dc7-4490-a0de-6a9f46eb44d7.webp","pc":"community"},{"id":"21st-shader:community__color-panels-2b6db046-9db8-497b-8ff3-5c783c470150","t":"Color Panels","d":"Animated WebGL shader background in the Color Panels style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/color-panels/0-default.webp?v=cd80eb14750646489ea3ca0e659dabea558785a8b39683fbe4448a686bc7b468","pc":"community"},{"id":"21st-shader:community__color-panels-glass-878bb7fa-7bd7-45bf-b47b-c6e78a0844ae","t":"Color Panels · Glass","d":"Animated WebGL shader background in the Color Panels style. Glass variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/color-panels/1-glass.webp?v=f4effa734e1855c56b7c089483c77324c7ee58fba60bbc101e5f90bb7425f2e8","pc":"community"},{"id":"21st-shader:community__color-panels-gradient-4161adc0-3f23-420f-bf06-84d5ac3bb4f1","t":"Color Panels · Gradient","d":"Animated WebGL shader background in the Color Panels style. Gradient variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/color-panels/2-gradient.webp?v=a2449987c5a92b025cf1c46b5d6bd2b358cbd636b694528a03d638f6e030a4df","pc":"community"},{"id":"21st-shader:community__color-panels-opening-80e32826-0c44-49a7-ba93-ef75ce6ad9d9","t":"Color Panels · Opening","d":"Animated WebGL shader background in the Color Panels style. Opening variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/color-panels/3-opening.webp?v=3345022e4e381e57de6b1b47ddeae962d4bc49468180b9228193cb46dd91b7b8","pc":"community"},{"id":"21st-shader:community__crimson-veil-d73083f2-d0f0-4ad2-9bee-57429d4fd1e7","t":"Crimson Veil","d":"Remix Crimson Veil, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/3ed521c3-6e0e-49c8-8109-7652ffc9746a.webp","pc":"community"},{"id":"21st-shader:community__dark-2b21fa75-5cba-45be-a357-067ae793a112","t":"dark","d":"Remix dark, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3EjoCzqZ46iDVVNVvg8QbFyhanL/4caefa0c-97bb-4cd4-b335-30ce81b81fa2.webp","pc":"community"},{"id":"21st-shader:community__dithering-a937d59b-347d-4204-ba1f-6e121d967cea","t":"Dithering","d":"Animated WebGL shader background in the Dithering style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/0-default.webp?v=37c5f048ca2c9cde26ddb05477c2cdf26d8cea50a18b5f6017fb403a4344f24f","pc":"community"},{"id":"21st-shader:community__dithering-bugs-c8260c76-8d83-49e2-8235-28ef3080a13f","t":"Dithering · Bugs","d":"Animated WebGL shader background in the Dithering style. Bugs variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0B","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/4-bugs.webp?v=46193409e79455931674c8ec0b24809ed06663c73c6c29ca33b8f15442509342","pc":"community"},{"id":"21st-shader:community__dithering-ripple-2385de77-c160-47c7-a5cd-cb1e01fde4b8","t":"Dithering · Ripple","d":"Animated WebGL shader background in the Dithering style. Ripple variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#AD","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/3-ripple.webp?v=cbb8571713ab221f0280aff7bf9d34d8708a993c0c0a100e19c7b6a9b75fb567","pc":"community"},{"id":"21st-shader:community__dithering-sine-wave-833afde2-5be5-4897-be7f-24dd62c4e68c","t":"Dithering · Sine Wave","d":"Animated WebGL shader background in the Dithering style. Sine Wave variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/2-sine-wave.webp?v=2da2f6acce39c04110ed360055a1f2b14313f218d83acecbcaeb72632312079c","pc":"community"},{"id":"21st-shader:community__dithering-swirl-4ed00382-20e3-40cc-b26b-991d9085f9f0","t":"Dithering · Swirl","d":"Animated WebGL shader background in the Dithering style. Swirl variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/5-swirl.webp?v=4883558269f9a5e7db889330490694ed47157257adb7cb3020d1572c33e75ce4","pc":"community"},{"id":"21st-shader:community__dithering-warp-62ff08af-6985-4f88-9508-0167ebfe2304","t":"Dithering · Warp","d":"Animated WebGL shader background in the Dithering style. Warp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0B0B","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dithering/1-warp.webp?v=08f7eea305604ee6c4ff59095e2fae8c930d4f1e61180b985ac066cc6b158d08","pc":"community"},{"id":"21st-shader:community__dot-grid-a0f71404-6003-4938-99ff-d0a8235e730d","t":"Dot Grid","d":"Animated WebGL shader background in the Dot Grid style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#07","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-grid/0-default.webp?v=1300a3e77a0283909093cbefff810fd1495392c863a9b6574f014528eab4a3ca","pc":"community"},{"id":"21st-shader:community__dot-grid-tree-line-acffd5ae-560e-43c8-9392-a856b455d650","t":"Dot Grid · Tree line","d":"Animated WebGL shader background in the Dot Grid style. Tree line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-grid/2-tree-line.webp?v=019a8af1d87b431e1bb1911e5e34a386a5524f7929080810f5b0b4d4c16a6c17","pc":"community"},{"id":"21st-shader:community__dot-grid-triangles-3ce89dc4-a0eb-428e-bd9d-44adbe6e549e","t":"Dot Grid · Triangles","d":"Animated WebGL shader background in the Dot Grid style. Triangles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-grid/1-triangles.webp?v=42d65af5869991a2a91ee9748a4c46bf7c51088af8b1616a95ac7e8569908061","pc":"community"},{"id":"21st-shader:community__dot-grid-wallpaper-b3851e03-7979-4bf7-b05a-ee6f96dd8239","t":"Dot Grid · Wallpaper","d":"Animated WebGL shader background in the Dot Grid style. Wallpaper variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-grid/3-wallpaper.webp?v=d8a23a0e40abcae1099a28fab65677883033289a0546c5ceba54486174426172","pc":"community"},{"id":"21st-shader:community__dot-orbit-34632b84-c7ef-4ac2-a040-cea4f337bf9c","t":"Dot Orbit","d":"Animated WebGL shader background in the Dot Orbit style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-orbit/0-default.webp?v=0e622f9b7e1cfefab6d0c5ea6ff6d0760f68d71c23937ead59402e181b27f5fe","pc":"community"},{"id":"21st-shader:community__dot-orbit-bubbles-0126e309-25ff-49b3-8fdb-3726cc70c4a2","t":"Dot Orbit · Bubbles","d":"Animated WebGL shader background in the Dot Orbit style. Bubbles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-orbit/1-bubbles.webp?v=de24fde25c3385fa96393923d7305c6ac14ee5e498d778dbd1bcf0d4ae7e897e","pc":"community"},{"id":"21st-shader:community__dot-orbit-hallucinatory-3ef16333-0985-4886-ac95-0264ebc966e6","t":"Dot Orbit · Hallucinatory","d":"Animated WebGL shader background in the Dot Orbit style. Hallucinatory variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-orbit/3-hallucinatory.webp?v=d843b377030b77517d2d139a98cea046605e9066d797307f8211d6d73e1adb62","pc":"community"},{"id":"21st-shader:community__dot-orbit-shine-2f561011-92b8-4f46-83ee-8a9c752a419a","t":"Dot Orbit · Shine","d":"Animated WebGL shader background in the Dot Orbit style. Shine variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#FBB","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/dot-orbit/2-shine.webp?v=7ef61220c4b89c0b434bdc82e10bc1bb717625405f8b8c08589da99905310a46","pc":"community"},{"id":"21st-shader:community__dotgridshaderoncrack-a00431cf-5693-4bfe-a844-7b68ebe50cc1","t":"dotgridshaderoncrack","d":"Remix dotgridshaderoncrack, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Dxnz6nDEVd9AcomEZwyCvkiByn/94397956-089b-475b-908c-2c9c50f6f9f5.webp","pc":"community"},{"id":"21st-shader:community__dotted-veil-a0086f85-7a5d-4a07-b617-7ffc75246fa1","t":"Dotted Veil","d":"Remix Dotted Veil, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/7ce968d6-4c3c-44fc-948a-dd8b22911de7.webp","pc":"community"},{"id":"21st-shader:community__dq-bad7b03c-984d-47e3-84d0-ae1803e39334","t":"dq","d":"Remix dq, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HR2u97vL6xetmwEsFGfOlWfNfx/1bf33ade-fd91-4d69-a3fb-5c2b1d9cc532.png","pc":"community"},{"id":"21st-shader:community__electric-aura-6105754a-2b84-4ac3-914d-3f6f51d0546c","t":"Electric Aura","d":"Remix Electric Aura, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/d052c3cd-644e-47a0-96cc-f6c9dfa4d820.webp","pc":"community"},{"id":"21st-shader:community__electric-bloom-96b1efc9-1671-414a-a1d7-2b0eed03b5cf","t":"Electric Bloom","d":"Remix Electric Bloom, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/2e392b13-e693-448a-bcaa-ccc064b19112.webp","pc":"community"},{"id":"21st-shader:community__ember-drift-5efdc7c5-5433-44ec-a3d8-ce4560c1ddb5","t":"Ember Drift","d":"Remix Ember Drift, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/c885dc06-d4a7-4879-bf99-78d33927267b.webp","pc":"community"},{"id":"21st-shader:community__ethereal-whispers-ef67d8e5-d245-4c5f-8f92-9a336d369eaf","t":"Ethereal Whispers","d":"Remix Ethereal Whispers, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/29e4e706-d4df-48a1-a269-d63ea8c9971f.webp","pc":"community"},{"id":"21st-shader:community__flavers-e94bbee9-40fc-4598-a756-e1e1a1732cd2","t":"Flavers","d":"Remix Flavers, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Cm3dt5olUCwbQeE1xJp9FJ3rKf/9e688c68-1389-4ff4-b97f-bbcd7ff85098.webp","pc":"community"},{"id":"21st-shader:community__fluted-glass-1b1e272f-f627-482e-a7db-3a57b81c3c63","t":"Fluted Glass","d":"Animated WebGL shader background in the Fluted Glass style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/fluted-glass/0-default.webp?v=8451b7e52241294fae5431da28fa669a4a614da09734ee299c079436209936e7","pc":"community"},{"id":"21st-shader:community__fluted-glass-abstract-00f0e217-9a1e-4126-8d03-bf91f3e39ac5","t":"Fluted Glass · Abstract","d":"Animated WebGL shader background in the Fluted Glass style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/fluted-glass/1-abstract.webp?v=c1ea79b3f86213d79c20abe482a38efd50bd5360f9242cd730b1dab66b26dc8b","pc":"community"},{"id":"21st-shader:community__fluted-glass-folds-ca5b6fcd-2788-408a-ab42-0027b19f3fb6","t":"Fluted Glass · Folds","d":"Animated WebGL shader background in the Fluted Glass style. Folds variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/fluted-glass/3-folds.webp?v=29ec93a48251a99b6bef4163130bcda76e810bc21c52c73625a22af714d4521b","pc":"community"},{"id":"21st-shader:community__fluted-glass-waves-2789e583-7dd2-4810-8595-1205aa82abcd","t":"Fluted Glass · Waves","d":"Animated WebGL shader background in the Fluted Glass style. Waves variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/fluted-glass/2-waves.webp?v=7cb36cd43819508ee48e6f3b654b79b640597372b0cba85dabca6de89892a8ca","pc":"community"},{"id":"21st-shader:community__fluted-glass-waves-shader-f0380e2b-83f2-44bc-aad1-aac41d200605","t":"Fluted Glass · Waves shader","d":"This would look good on a header or a footer","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3G10CW2Pt2okE95PM4moMqaJ1xU/70b2c16e-7576-4552-9e19-bf288d271ba5.webp","pc":"community"},{"id":"21st-shader:community__focuznow-hero-eda5f0e2-2104-44f3-9753-23a9e6c6ee39","t":"Focuznow Hero","d":"Remix Focuznow Hero, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Hdz5Nmdqjlo0K4P33FtyZFWKM9/f069c664-8fb2-4fbc-b7af-ab513d999717.webp","pc":"community"},{"id":"21st-shader:community__gem-smoke-63984c15-b6f5-4a6c-9e6a-0d1d09e195bd","t":"Gem Smoke","d":"Animated WebGL shader background in the Gem Smoke style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/gem-smoke/0-default.webp?v=3430a7fd2aefe2c4aa49a134435382385c66837d947f271fdd544c887b205f0d","pc":"community"},{"id":"21st-shader:community__gem-smoke-circle-b1a08834-bb83-4ad4-bb37-046e8d8c973b","t":"Gem Smoke · Circle","d":"Animated WebGL shader background in the Gem Smoke style. Circle variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#11","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/gem-smoke/1-circle.webp?v=2524fdf173c7fa4819dc9baab809610ebd0a22f0210ba06708eef4f977b6e886","pc":"community"},{"id":"21st-shader:community__gem-smoke-daisy-b461e183-241d-4a26-bc45-326627a14ba2","t":"Gem Smoke · Daisy","d":"Animated WebGL shader background in the Gem Smoke style. Daisy variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F59","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/gem-smoke/2-daisy.webp?v=823e3526da2a50df05a044e829a92f40077b9d830b89a782c5c30c4404df05e8","pc":"community"},{"id":"21st-shader:community__gem-smoke-diamond-ab24dd16-cf6c-4f3c-b28d-8f266442fc51","t":"Gem Smoke · Diamond","d":"Animated WebGL shader background in the Gem Smoke style. Diamond variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/gem-smoke/3-diamond.webp?v=206e9b6e7dc6e04ad2f2b98044eed66102076350d4f5c1597fb39fe6c4af81e1","pc":"community"},{"id":"21st-shader:community__gem-smoke-metaballs-8f11313c-55f7-4501-bc46-dc9666e1b773","t":"Gem Smoke · Metaballs","d":"Animated WebGL shader background in the Gem Smoke style. Metaballs variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/gem-smoke/4-metaballs.webp?v=c350f48f6676fc7f13a03d052bd186ac2ebcc3c892fdcffbac1662694bb67499","pc":"community"},{"id":"21st-shader:community__ghostly-embrace-fa98a054-4f0a-47fb-80c0-5361e49b217f","t":"Ghostly Embrace","d":"Remix Ghostly Embrace, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/4e44e34e-d914-4e8c-afe4-a4e66fd179b9.webp","pc":"community"},{"id":"21st-shader:community__god-rays-d6229b5d-50ec-49d5-b6c8-89cae6553101","t":"God Rays","d":"Animated WebGL shader background in the God Rays style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#05","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/god-rays/0-default.webp?v=71acc5a8ce89641fb91405e64799b6838f2ea31a1ad27aa077902c3dcd029c8d","pc":"community"},{"id":"21st-shader:community__god-rays-ether-fc10e47e-a69f-485e-99a0-4d72464e18cf","t":"God Rays · Ether","d":"Animated WebGL shader background in the God Rays style. Ether variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#E35D","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/god-rays/3-ether.webp?v=72a0ae6b7d0a91fe019377940c7ba2fb65ced3f51593c9ecfc4b4e80b3287734","pc":"community"},{"id":"21st-shader:community__god-rays-linear-e5849372-8c93-4625-a9c4-42be3464d84f","t":"God Rays · Linear","d":"Animated WebGL shader background in the God Rays style. Linear variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#E35","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/god-rays/2-linear.webp?v=fba9d709152ef128893bd985c9991396b8b4150f500d0db54af155c44f783b89","pc":"community"},{"id":"21st-shader:community__god-rays-linear-shader-b0c58fd2-816e-48a9-9270-770e544143fa","t":"God Rays · Linear shader","d":"Remix God Rays · Linear shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GBzAKrJNPm2lZ21TUsBSXZVEsJ/e44411c1-b94a-4d2c-92ec-191d3e61b82f.webp","pc":"community"},{"id":"21st-shader:community__god-rays-warp-ee0ead3e-9057-47e8-9351-7820e6b00a0a","t":"God Rays · Warp","d":"Animated WebGL shader background in the God Rays style. Warp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#05030","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/god-rays/1-warp.webp?v=13c613613198dc49ebcb89e12c84ca130d8e1d53826f9c004fe8cb5c630f1cfc","pc":"community"},{"id":"21st-shader:community__grain-gradient-1e7c27b0-5d0b-422e-838a-4e9c996a75f2","t":"Grain Gradient","d":"Animated WebGL shader background in the Grain Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/grain-gradient/0-default.webp?v=eb3157d0154326e564c5bad0921856a47ecb8e5ad0837d31cf7d85ed72ebb3a8","pc":"community"},{"id":"21st-shader:community__grain-gradient-91bf999d-77b0-4274-a536-347a8c668b0f","t":"Grain Gradient","d":"Remix Grain Gradient, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HLZ0VcFlJewmbPjDciyy5KTXmL/be9561d5-efe1-4337-968a-a264b6134c49.webp","pc":"community"},{"id":"21st-shader:community__grain-gradient-truchet-f065b194-8e59-4e72-a8f6-8646136e11c8","t":"Grain Gradient · Truchet","d":"Animated WebGL shader background in the Grain Gradient style. Truchet variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/grain-gradient/3-truchet.webp?v=c017df77b5f86c182596ab0faf8956a49f0e70039705c386fa1e429e3ae6b0cf","pc":"community"},{"id":"21st-shader:community__green-border-bd95ded7-72f2-4a01-b6aa-9d5eefc9f277","t":"Green Border","d":"Remix Green Border, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HVBCmVZfTvLahdL9BdxNrLEMoC/e547dbb1-138b-4e8a-8757-5169f76b667f.webp","pc":"community"},{"id":"21st-shader:community__halftone-cmyk-20669053-82d8-44a1-aa3f-7b639e8efcdf","t":"Halftone CMYK","d":"Animated WebGL shader background in the Halftone CMYK style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-cmyk/0-default.webp?v=c103c52f1cf9ddb0a6a2756b471ca7569adb5331758157cc8cc021dbeadf2f82","pc":"community"},{"id":"21st-shader:community__halftone-cmyk-drops-0cc8115f-2884-40aa-b49f-0c75ea965237","t":"Halftone CMYK · Drops","d":"Animated WebGL shader background in the Halftone CMYK style. Drops variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-cmyk/1-drops.webp?v=3c890c2a679bcd92228e114623d2f1959a02192be1207783806472dcab22d38a","pc":"community"},{"id":"21st-shader:community__halftone-cmyk-newspaper-78298ce7-67b5-48f0-9aa2-7f4204388fe6","t":"Halftone CMYK · Newspaper","d":"Animated WebGL shader background in the Halftone CMYK style. Newspaper variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-cmyk/2-newspaper.webp?v=667062deb355d4e9b0cd106e277500cc2e823183252638308da2a037a92fbc61","pc":"community"},{"id":"21st-shader:community__halftone-cmyk-vintage-a9a2d47e-ae6d-459c-9fc8-61975432fd8d","t":"Halftone CMYK · Vintage","d":"Animated WebGL shader background in the Halftone CMYK style. Vintage variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-cmyk/3-vintage.webp?v=be5fc36f5665a3658029804b500f24d2efd25598d4d8b28c469729357aa770d9","pc":"community"},{"id":"21st-shader:community__halftone-dots-8180425b-5d39-4b9b-bf47-ea5bb17f08e3","t":"Halftone Dots","d":"Animated WebGL shader background in the Halftone Dots style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-dots/0-default.webp?v=18f3c8dcbe1ee2f5eff3b6e4c8781765b020688fde700a2f9f73139222f55d70","pc":"community"},{"id":"21st-shader:community__halftone-dots-led-screen-f7aa2edd-fac2-4882-ad25-40ea4d13c6e2","t":"Halftone Dots · LED screen","d":"Animated WebGL shader background in the Halftone Dots style. LED screen variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pale","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-dots/1-led-screen.webp?v=192fcc62c38d9b2cef77d937c8039fcfbaf1279ce1194d916be942e789acb184","pc":"community"},{"id":"21st-shader:community__halftone-dots-mosaic-27c4791e-7839-4cad-aea5-44e2e6243d6a","t":"Halftone Dots · Mosaic","d":"Animated WebGL shader background in the Halftone Dots style. Mosaic variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-dots/2-mosaic.webp?v=0c1ffc724889b824539c7ff30140554e017a96c382aa2895b78bc108e37abf13","pc":"community"},{"id":"21st-shader:community__halftone-dots-round-and-square-20bc8986-8499-4fb1-9488-2489a165079d","t":"Halftone Dots · Round and square","d":"Animated WebGL shader background in the Halftone Dots style. Round and square variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-colo","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/halftone-dots/3-round-and-square.webp?v=611bfd66b250e36ea78cb33a0446778fc51a27a2e53245f9b3de5c17cab4c0c5","pc":"community"},{"id":"21st-shader:community__halftone-shader-32d12b3d-d9c8-44a4-bce0-f10192d8bbde","t":"Halftone shader","d":"Remix Halftone shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GBzAKrJNPm2lZ21TUsBSXZVEsJ/bb014cb9-2b3b-4c88-8463-b2125ec15884.webp","pc":"community"},{"id":"21st-shader:community__halftone-vibe-88f06dc6-164b-4a25-aa67-e228d54ac56c","t":"Halftone Vibe","d":"Remix Halftone Vibe, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/4569f488-ddaa-4ecc-8fd6-1d3d6619a506.webp","pc":"community"},{"id":"21st-shader:community__heatmap-dfd82519-4b9e-4aa3-800b-04305115fc26","t":"Heatmap","d":"Animated WebGL shader background in the Heatmap style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 6-color palette (#000","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/heatmap/0-default.webp?v=b5e9bcff3e5aad99373aecde4ab8bf59737c95dffcc49b7d936325b5d528e3a1","pc":"community"},{"id":"21st-shader:community__heatmap-sepia-d35b39b3-e075-4938-b6fc-c101a09f65a6","t":"Heatmap · Sepia","d":"Animated WebGL shader background in the Heatmap style. Sepia variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 6-color palette (#00000","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/heatmap/1-sepia.webp?v=7c541dcf42de2fde997cf24b4335c6a25b3105856be9747ebcf0c70751f0aee8","pc":"community"},{"id":"21st-shader:community__hero-994cb5ea-808a-4ade-af9d-7a39429e34a9","t":"hero","d":"Remix hero, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Hdzg3DHoXVBPQYjTcas5CRIeZL/9252aeba-0e20-42c4-8eee-1e31cabcad8d.webp","pc":"community"},{"id":"21st-shader:community__hero-anim-1-5f22fe63-d0c9-49e9-8794-f385b601ee56","t":"hero anim 1","d":"Remix hero anim 1, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_38nd6MBEJ1BjvRg3l3jtSxqP2RN/bc70b197-c7e2-4d2b-8c16-2b0f03aac1e7.webp","pc":"community"},{"id":"21st-shader:community__icey-night-shards-92b084b2-8315-442e-81e3-73a8ac937518","t":"Icey Night Shards","d":"Remix Icey Night Shards, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3ArSghIP8kaGsdiUjCE5gZYFOp9/b04145fa-4cb7-4456-9e33-27d9a1d46422.webp","pc":"community"},{"id":"21st-shader:community__image-dithering-1f6979d9-3378-4ebf-a326-70f15ba29cb2","t":"Image Dithering","d":"Animated WebGL shader background in the Image Dithering style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/image-dithering/0-default.webp?v=7d136f08d7957cef40698825bdc547606984f67d4cc449d9b40c33427b87d303","pc":"community"},{"id":"21st-shader:community__image-dithering-natural-716a37b6-48b6-498e-8abb-bbe4eca69d38","t":"Image Dithering · Natural","d":"Animated WebGL shader background in the Image Dithering style. Natural variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/image-dithering/3-natural.webp?v=fdf883590419513ba232d3f1af10609c24553804056653fe02b894ee5045e601","pc":"community"},{"id":"21st-shader:community__image-dithering-retro-0373f634-f305-48e1-bf4d-da5d17069e81","t":"Image Dithering · Retro","d":"Animated WebGL shader background in the Image Dithering style. Retro variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/image-dithering/2-retro.webp?v=13d30f44b4caa154b6e8080a99d2fa93dd7de0e0ea6d210c14380a2b6a0c2a6e","pc":"community"},{"id":"21st-shader:community__istanblue-0b0d97b5-c563-439d-8039-03062aa4d036","t":"Istanblue","d":"Loading Page","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3CgIV5scLnijqcuE3dazPg4DYrp/e4e3d151-982e-42b0-8faa-a6f642513062.webp","pc":"community"},{"id":"21st-shader:community__just-playing-089b27b9-e065-4c5f-a121-fe06858b2ab1","t":"Just Playing","d":"Remix Just Playing, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3BgxJPZLxGcp8RwF0ug3lYpVYie/2a3ded96-2aae-45de-98e8-115f5b716e78.webp","pc":"community"},{"id":"21st-shader:community__kim-77fd5db6-4cc4-4e9a-aab9-3c0ddb64f3e3","t":"kim","d":"Remix kim, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3C4u3aqRLNBrs4vsgYYjmtgypFo/05e184ae-6fcb-4e6a-8e94-f96592475171.webp","pc":"community"},{"id":"21st-shader:community__koinonia-9962f7ea-0ce0-4170-be43-eda374a5029a","t":"koinonia","d":"Remix koinonia, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3BE7q4Teve1n7THowk0tiubsrqK/06344796-eba6-4fa3-92b4-e598a5a3b954.png","pc":"community"},{"id":"21st-shader:community__light-blue-plasma-shader-w-grain-interactive-8fc1c3ae-322a-48cc-a3b0-ac0f9bbbf6d0","t":"Light Blue Plasma Shader W/ grain & interactive","d":"Remix Light Blue Plasma Shader W/ grain & interactive, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HKgLnrOEantZYemI1nCc1TcK1L/e319b51c-2ace-405c-b9ea-7c73c9f872ee.webp","pc":"community"},{"id":"21st-shader:community__line-shader-homlu-ui-7bb14707-7c6d-4c46-adb3-820ede3a3aa3","t":"Line Shader Homlu UI","d":"Shader 2","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_39720J8FZrHCoGeL23ljF4x20L3/e591f6fe-98e7-486a-b075-09234fd38a73.webp","pc":"community"},{"id":"21st-shader:community__liquid-metal-1cbe6395-cb1f-41d4-acf1-93c7db0093ef","t":"Liquid Metal","d":"Animated WebGL shader background in the Liquid Metal style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/liquid-metal/0-default.webp?v=3536de347b252645cc6371b0516d6a3ef7270946ec8055e780eec749cdabbc21","pc":"community"},{"id":"21st-shader:community__liquid-metal-backdrop-6f706199-2e43-4a82-b3a5-4660aa8f8067","t":"Liquid Metal · Backdrop","d":"Animated WebGL shader background in the Liquid Metal style. Backdrop variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/liquid-metal/2-backdrop.webp?v=7a5c68db6b49cf3346b6c1530d69ef032dc23a4d2c8c1086fbd906e0d75476d8","pc":"community"},{"id":"21st-shader:community__liquid-metal-noir-4c73d14f-4ba1-4e35-b52d-b35f60094482","t":"Liquid Metal · Noir","d":"Animated WebGL shader background in the Liquid Metal style. Noir variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/liquid-metal/1-noir.webp?v=64a1b53101cb75e47d9f0e09d08f969b382aa45db9656afb955aed4ecb6f9a9e","pc":"community"},{"id":"21st-shader:community__liquid-metal-stripes-aed3560e-cace-4616-9995-eb7d0a73ce33","t":"Liquid Metal · Stripes","d":"Animated WebGL shader background in the Liquid Metal style. Stripes variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/liquid-metal/3-stripes.webp?v=f3a0ef7978b5e92086f80f79974fa556d95eefc20df69d6fb75cea2737589351","pc":"community"},{"id":"21st-shader:community__love-story-461dd778-9c8c-4ef9-aa76-c4cd066a0231","t":"Love Story","d":"Adult content","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3G26uRV2dyV17rV74l5Zt2fyo2E/adf9150a-fa8e-4b47-aecd-447ac66a6fa8.webp","pc":"community"},{"id":"21st-shader:community__manu-c067f9f6-c5f5-4d41-adab-90dafa165911","t":"manu","d":"Remix manu, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HECSCbc5qiWg5VXl7eQmNhxVnF/bbe71fb7-b1b3-4bf2-90b5-edffd13e4c91.webp","pc":"community"},{"id":"21st-shader:community__mesh-drift-shader-2d002d53-553a-4af3-8e8f-39bf2d1c8b7b","t":"Mesh drift shader","d":"Remix Mesh drift shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3I4nA2UqprIMsNTSjJAXBade3Uo/883d5bb8-fe39-455b-a87e-5bc7dc884bb7.webp","pc":"community"},{"id":"21st-shader:community__mesh-drift-shader-afe19790-5997-4a22-9fac-2ff5bfc88052","t":"Mesh drift shader","d":"Remix Mesh drift shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3AComHpSQIE8rID0GTUAmCiK5qD/5bbc5901-e15b-4fec-af2b-5721c06675a9.webp","pc":"community"},{"id":"21st-shader:community__mesh-gradient-1df7d41a-4dea-4be4-95cf-5bb58bb5ad97","t":"mesh gradient","d":"Remix mesh gradient, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3ErA8mBMfG1Klgae8B3t9w3I1VR/50e4d23f-d022-409d-b872-1485d3a628d8.webp","pc":"community"},{"id":"21st-shader:community__mesh-gradient-b9b31156-a36f-420d-bf1d-27f499b1411c","t":"Mesh Gradient","d":"Animated WebGL shader background in the Mesh Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/mesh-gradient/0-default.webp?v=2a9f38f602686142a1821547fdbfc3f84d8b262934899cc023c7a3458801669f","pc":"community"},{"id":"21st-shader:community__mesh-gradient-beach-81717d4f-dc3c-4703-830b-1ae948c6f899","t":"Mesh Gradient · Beach","d":"Animated WebGL shader background in the Mesh Gradient style. Beach variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/mesh-gradient/3-beach.webp?v=99629eafb81e0505749699c599c68df51f382edeb9c08c5c694c9cc9eb1f1da6","pc":"community"},{"id":"21st-shader:community__mesh-gradient-ink-e2fdc792-27a5-4f4f-bec9-bfac794b7beb","t":"Mesh Gradient · Ink","d":"Animated WebGL shader background in the Mesh Gradient style. Ink variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/mesh-gradient/1-ink.webp?v=c7cb8f19e7743144b24baca595bd00c5a766555d42fa192830bf18b527675fb8","pc":"community"},{"id":"21st-shader:community__mesh-gradient-purple-6366519a-c3b4-4b01-b0a0-e2ec413f5333","t":"Mesh Gradient · Purple","d":"Animated WebGL shader background in the Mesh Gradient style. Purple variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/mesh-gradient/2-purple.webp?v=ad3b77204d6b6c7b51cf4f7c6854a31218e8788618d18dfc4d0c1a8f8eb4277b","pc":"community"},{"id":"21st-shader:community__metaballs-25d5ecc9-48c6-4693-ac1f-a89e01bc9dcf","t":"Metaballs","d":"Animated WebGL shader background in the Metaballs style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/metaballs/0-default.webp?v=3a971de644f5a0633f09803953d00e6b96bcf438f8e06abd34937c94bf629006","pc":"community"},{"id":"21st-shader:community__metaballs-background-46ed7494-e0f1-4123-9607-307252e85302","t":"Metaballs · Background","d":"Animated WebGL shader background in the Metaballs style. Background variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/metaballs/3-background.webp?v=9bfbfb710501ddfa38c7afab72983c60c3d16e12ade3d7ea507d7c1ae33dbdd1","pc":"community"},{"id":"21st-shader:community__metaballs-ink-drops-b053619e-7594-40ae-b748-6677229901f6","t":"Metaballs · Ink Drops","d":"Animated WebGL shader background in the Metaballs style. Ink Drops variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/metaballs/1-ink-drops.webp?v=4ffe9b184d9efa38cc2d2ec87caf411571b2c77b034f0e1eabfa7b4de64db353","pc":"community"},{"id":"21st-shader:community__metaballs-solar-6e4a99f1-3a66-4064-871f-7c7a09d72172","t":"Metaballs · Solar","d":"Animated WebGL shader background in the Metaballs style. Solar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#FB9","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/metaballs/2-solar.webp?v=2290603ad240b1717c739e6554dab3aed8fc35decc9cc0efe3ac1dfda1f6ef1f","pc":"community"},{"id":"21st-shader:community__molten-cells-399f42a5-1bb9-4343-9300-24789ee9dd4e","t":"Molten Cells","d":"Remix Molten Cells, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/96d57849-8348-455d-bd5e-9a58ae53bab5.webp","pc":"community"},{"id":"21st-shader:community__molten-pillars-4971bce2-a5ea-4b84-b01d-0f845ec472a2","t":"Molten Pillars","d":"Remix Molten Pillars, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/a1fd7f38-0ea5-423a-97dc-021f4e06554a.webp","pc":"community"},{"id":"21st-shader:community__neuro-noise-71347c41-002c-4069-ac4f-d5df175ad169","t":"Neuro Noise","d":"Animated WebGL shader background in the Neuro Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/neuro-noise/0-default.webp?v=cb22ccaf0f5f9fb233bf918f145059946959317cfbb46545b5e044c503e80e2e","pc":"community"},{"id":"21st-shader:community__neuro-noise-bloodstream-c4777cd2-f80d-464b-a9cd-143b6d08356f","t":"Neuro Noise · Bloodstream","d":"Animated WebGL shader background in the Neuro Noise style. Bloodstream variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/neuro-noise/2-bloodstream.webp?v=dee1d29366a1b381349561c03b02ad3072880ea9066a2d3e03f0b6a68635b7a1","pc":"community"},{"id":"21st-shader:community__neuro-noise-ghost-8f25f8b1-c176-42ff-a460-6a285dbcc75f","t":"Neuro Noise · Ghost","d":"Animated WebGL shader background in the Neuro Noise style. Ghost variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#D","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/neuro-noise/3-ghost.webp?v=39e00b223815b986849bc38fc6e3d06ce58b658121727e48f38aa5234bba5f1c","pc":"community"},{"id":"21st-shader:community__neuro-noise-sensation-daf72911-8bd3-441e-b749-5486758942ef","t":"Neuro Noise · Sensation","d":"Animated WebGL shader background in the Neuro Noise style. Sensation variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/neuro-noise/1-sensation.webp?v=5e58043aa67e8185dc2ef08b5568ab05263183934d296c326994f9bb38465245","pc":"community"},{"id":"21st-shader:community__neuro-noise-shader-4e8767b2-aac3-4a18-b098-4785b6320494","t":"Neuro Noise shader","d":"Remix Neuro Noise shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GxZW0t1zkZqrk6NmWtTjDb4DL3/dce434f8-6b92-4ce8-9728-533fffeadecd.webp","pc":"community"},{"id":"21st-shader:community__nice-bg-0df21133-2075-45f4-b946-264928d948fe","t":"Nice BG","d":"Remix Nice BG, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GN4e6htLHXrOssaEE8PH1d9OnF/12e740ce-9080-4470-9f13-89282953dc97.webp","pc":"community"},{"id":"21st-shader:community__ocean-swirl-dbe14abd-9770-4493-85cf-3bb10be6228a","t":"Ocean Swirl","d":"Remix Ocean Swirl, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/0ed035d9-b3f8-48f1-b8a9-d59f204340cb.webp","pc":"community"},{"id":"21st-shader:community__oceanic-currents-5fc8773a-9561-4cba-9eec-27b7899021e3","t":"Oceanic Currents","d":"Remix Oceanic Currents, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/050259fa-5458-4856-b30f-aee08283485b.webp","pc":"community"},{"id":"21st-shader:community__oceanic-currents-de22d8c9-11b9-400b-a04e-c33a720d1047","t":"Oceanic Currents","d":"Remix Oceanic Currents, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/ca0f9a02-9d31-4b55-9538-79d8d577e529.webp","pc":"community"},{"id":"21st-shader:community__oceanic-depths-998c87fc-6f57-4107-8b8a-ef06bb711894","t":"Oceanic Depths","d":"Remix Oceanic Depths, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/efc61a74-b594-404c-a46a-d23ca8590952.webp","pc":"community"},{"id":"21st-shader:community__oki10-79067101-d78d-4ad7-a0bb-4e7b6850bd8a","t":"Oki10","d":"neutral sites","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3FupvYEegnURSf2NDfUqK8TCQZJ/400006f2-0b2c-41bc-9688-03ee4c983f5a.webp","pc":"community"},{"id":"21st-shader:community__orb-shader-ddb48603-e255-4099-b5da-a89c8ba72a4f","t":"orb shader","d":"rothko","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3H7n56wNsdOLfPllULF1qTXgJIM/11b142d7-171f-4c18-bae4-aa99fc1079e2.webp","pc":"community"},{"id":"21st-shader:community__paper-texture-a80733c6-4ceb-4f64-9e68-4b946d2b4e63","t":"Paper Texture","d":"Animated WebGL shader background in the Paper Texture style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/paper-texture/0-default.webp?v=961d73f94c11c14b8f5b9d1f654fb83c32790e1c565713e1b1ea21a7e0b81f91","pc":"community"},{"id":"21st-shader:community__paper-texture-abstract-b9bbc8a7-3076-4978-8f9e-796fc6823293","t":"Paper Texture · Abstract","d":"Animated WebGL shader background in the Paper Texture style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/paper-texture/2-abstract.webp?v=94af2f5f0e84c5f2fab5c164ee811561d9bc7ee64c0e1fc6e6995f39f7477847","pc":"community"},{"id":"21st-shader:community__paper-texture-cardboard-d7483524-9a2b-4905-921c-e15900df01d4","t":"Paper Texture · Cardboard","d":"Animated WebGL shader background in the Paper Texture style. Cardboard variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/paper-texture/1-cardboard.webp?v=c89a5399d36c55e6def27a9bab49b0f25ee007bd3501fd6d340ddf3aa512c142","pc":"community"},{"id":"21st-shader:community__parallel-waves-4115aa50-09dd-44e5-aae3-1fac57f74317","t":"Parallel Waves","d":"Remix Parallel Waves, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/a4a0d478-f900-410a-b3ed-e558078bc89e.webp","pc":"community"},{"id":"21st-shader:community__perlin-noise-7b5f3798-fee3-4a3f-a839-e6afeb1cd930","t":"Perlin Noise","d":"Animated WebGL shader background in the Perlin Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/perlin-noise/0-default.webp?v=28df5ece33e1b06d79d1f6006b73fc965c9b485c94374021e65f7aafdce7ef07","pc":"community"},{"id":"21st-shader:community__perlin-noise-moss-b4f50511-1cb1-4151-a949-962e4336868e","t":"Perlin Noise · Moss","d":"Animated WebGL shader background in the Perlin Noise style. Moss variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#A","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/perlin-noise/2-moss.webp?v=b5f7b84e5b2bd610fd8809a9ca5c47fdeb65be5bcb8be397d7d050e1e5bb4fa9","pc":"community"},{"id":"21st-shader:community__perlin-noise-nintendo-water-61af44d6-d64f-4b54-96f6-eb44f51dab46","t":"Perlin Noise · Nintendo Water","d":"Animated WebGL shader background in the Perlin Noise style. Nintendo Water variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color p","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/perlin-noise/1-nintendo-water.webp?v=741d6cf0c21a8ef1384cf8abf85af2808efa4f353cb821c755a49a09121c5dfa","pc":"community"},{"id":"21st-shader:community__perlin-noise-worms-db829135-c5af-4a75-91bf-12f65bbd65c3","t":"Perlin Noise · Worms","d":"Animated WebGL shader background in the Perlin Noise style. Worms variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/perlin-noise/3-worms.webp?v=381ada0f1e438ba6c4cc01edb58a6ca5e8e96da8cb2a869333c563c9884d6c4c","pc":"community"},{"id":"21st-shader:community__piroca-foda-dnv-pqp-mt-foda-a0d64b30-7745-43f6-8c7d-9703b31d43a9","t":"piroca foda dnv pqp mt foda","d":"Remix piroca foda dnv pqp mt foda, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HglXYxRVtqtNzwEcHcaUlaqKao/e574202c-40d1-4fb5-90bb-3309d60dab9a.webp","pc":"community"},{"id":"21st-shader:community__portfolio-4765fd80-de2d-45bc-b39f-ebadf721b701","t":"portfolio","d":"Remix portfolio, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Gedjt9OlrMP1wOJV4kbN7wSDsS/75a43882-50f3-4dcb-bf18-c9e5db13ca35.webp","pc":"community"},{"id":"21st-shader:community__pqp-2d58d472-84da-4884-9303-0b57d699e95f","t":"pqp","d":"Remix pqp, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HglXYxRVtqtNzwEcHcaUlaqKao/a4e16cb5-a5a8-4143-8d70-fabf1ecd270d.webp","pc":"community"},{"id":"21st-shader:community__preet-shader-942cb7a5-8da6-4c27-8064-0ba6e3e8e91b","t":"preet shader","d":"Remix preet shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_30jeCNUhgwCRsLEF1PR1XtO4Gsu/688242ea-8c41-4561-a4a9-34a5777ba0bf.webp","pc":"community"},{"id":"21st-shader:community__pulsing-border-circle-37824556-88c2-4cda-a614-6b6ca73e72cf","t":"Pulsing Border · Circle","d":"Animated WebGL shader background in the Pulsing Border style. Circle variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/pulsing-border/1-circle.webp?v=d65d5bc3baf04eb09e26d6db2a6adf4c9e4163b95b72ae5e46d1048a354aaaf2","pc":"community"},{"id":"21st-shader:community__pulsing-border-e56a8e3f-07d7-46db-8043-1a2fd17b0556","t":"Pulsing Border","d":"Animated WebGL shader background in the Pulsing Border style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/pulsing-border/0-default.webp?v=1d7b27654177ee695c680c7a0f8de19c06bf11eac950ac7406b32d75a449c265","pc":"community"},{"id":"21st-shader:community__pulsing-border-northern-lights-54013b02-e80c-4168-a549-05f053960ee1","t":"Pulsing Border · Northern lights","d":"Animated WebGL shader background in the Pulsing Border style. Northern lights variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-colo","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/pulsing-border/2-northern-lights.webp?v=d6ef5d14f81fa9c05be7c88260bd37603e31f5ac0a600d3199b5c38008f2388b","pc":"community"},{"id":"21st-shader:community__pulsing-border-solid-line-e50520aa-c06d-4751-a64a-4e3b6697e4ed","t":"Pulsing Border · Solid line","d":"Animated WebGL shader background in the Pulsing Border style. Solid line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pal","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/pulsing-border/3-solid-line.webp?v=d60a03762732745b3666a08cbedc48c3d932c43742033ff6f63e0b3d6a2383e9","pc":"community"},{"id":"21st-shader:community__rds-silk-5ea5a7ed-9b06-4006-9526-caa949e16660","t":"RDS Silk","d":"Remix RDS Silk, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HDbM9020tmxmveYvgVD90FRwMz/c3e9110f-9291-4297-a9c9-d522460eed32.webp","pc":"community"},{"id":"21st-shader:community__recipe-59f0538a-65a5-4dd1-b64d-9bdfa7fbeba0","t":"波纹","d":"很不错","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3EChfx1XiHWNaiaPfLe1JFqTAd8/f84547db-5823-4871-acc3-fa21d447bb77.webp","pc":"community"},{"id":"21st-shader:community__recipe-b3e94fd7-f9b8-42b6-a1fd-715d10f2f114","t":"光晕背景","d":"Remix 光晕背景, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HauRgEWsXKsR6kdplMmnjdLKKB/fbbf13b3-a61c-4848-8cca-9359076f490e.webp","pc":"community"},{"id":"21st-shader:community__red-in-black-25cec6dc-977a-42d2-b406-98fb868ea4cb","t":"red in black","d":"background of a site","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Gdb1iQ87Xl8BNupgOGM31gL4PL/f13f36dd-fe93-4dab-a043-713dd1f7ac46.webp","pc":"community"},{"id":"21st-shader:community__red-plasma-c011276a-1ca2-4e37-8319-c72d5ae19aac","t":"Red Plasma","d":"Remix Red Plasma, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HKgLnrOEantZYemI1nCc1TcK1L/3b574784-feb2-4e7b-87ac-c221d91fa122.webp","pc":"community"},{"id":"21st-shader:community__reptile-smoke-36d060f2-046c-43c0-a275-f33e0854550b","t":"reptile smoke","d":"Remix reptile smoke, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3EjoCzqZ46iDVVNVvg8QbFyhanL/531c0126-edf5-4d58-a9ff-779a2f2a5743.webp","pc":"community"},{"id":"21st-shader:community__shader-anima-2d597ad1-a2b1-4155-b29c-02260e2ca20c","t":"Shader Anima","d":"Remix Shader Anima, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3FJtLGIhkzb5wpyt7JQQOab6VdB/fde97e89-7df6-40d0-98d2-b7adc03fbcfa.webp","pc":"community"},{"id":"21st-shader:community__shader-foda-azul-dnv-ac67480e-d8fb-469d-a5f3-6976c18e097c","t":"shader foda azul dnv","d":"Remix shader foda azul dnv, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HglXYxRVtqtNzwEcHcaUlaqKao/8c404a7f-955f-416c-ae52-c6aa987487ba.webp","pc":"community"},{"id":"21st-shader:community__shader-foda-rosa-24f883bb-8048-480a-addb-075c839efbd5","t":"shader foda rosa","d":"Remix shader foda rosa, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HglXYxRVtqtNzwEcHcaUlaqKao/389e0838-8c0e-455e-9bdf-0978cbdff810.webp","pc":"community"},{"id":"21st-shader:community__shader-r-cf258966-5ae2-4b27-bab4-25089a11eba1","t":"Shader R","d":"Remix Shader R, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GPszbsbimbmDDwbUP2ujvaz9vI/a54aad2b-834d-4560-b348-cff9691d787d.webp","pc":"community"},{"id":"21st-shader:community__shader-state-f6de1806-f6db-4979-a534-e2e869a37e13","t":"SHADER STATE","d":"Remix SHADER STATE, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_39zsDMwjMzuAgeK3uL2AVsQ6pxn/d2e50257-ea45-49a5-8ff4-1dc4b13b50e3.webp","pc":"community"},{"id":"21st-shader:community__shadow-blending-41b583a3-fcf8-4435-adb2-a2cc48c94872","t":"Shadow Blending","d":"Remix Shadow Blending, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/c8b96e82-2af8-424b-bbbf-62924a2778d7.webp","pc":"community"},{"id":"21st-shader:community__silk-shader-3f051ac3-23ad-4947-b63c-e8892bf5b5b7","t":"Silk shader","d":"Remix Silk shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3H55Y2LZqSPHpatSWAcNTxDZ240/a51ddf4c-f450-48c5-ae7d-8afdffd6d30c.webp","pc":"community"},{"id":"21st-shader:community__silk-shader-6e3f8ae6-8f50-4192-89c4-aa2a3f786a8c","t":"Silk shader","d":"Remix Silk shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3Gnn1Y7OEJa6OR4BdHjOzksmCIz/e003e990-80ae-4980-b16d-ddab002504aa.webp","pc":"community"},{"id":"21st-shader:community__silk-shader-e0391d67-6bb1-45ee-aed7-858f141cdca8","t":"Silk shader","d":"Remix Silk shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3DNXoOKBeoqMXZMOoCzM7Njs9Ws/f601f60c-3d20-499f-a4a1-ae6f7de84df4.webp","pc":"community"},{"id":"21st-shader:community__silk-shader-maro-f59a8375-c755-4737-81e2-0805e203dae7","t":"Silk Shader Maro","d":"Hotel","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3DNXoOKBeoqMXZMOoCzM7Njs9Ws/183f3a40-6cb2-4948-9bbc-6aeb286c1253.webp","pc":"community"},{"id":"21st-shader:community__simplex-noise-67c1579b-729d-42b6-94ff-b9d69fd7e947","t":"Simplex Noise","d":"Animated WebGL shader background in the Simplex Noise style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/simplex-noise/0-default.webp?v=9a2371a752ebd9695619f008dc21088acc61dd1939e7ec493216f6cf057631b9","pc":"community"},{"id":"21st-shader:community__simplex-noise-bubblegum-5b1bfc17-7553-4cb1-9d3a-db0ab65f1a47","t":"Simplex Noise · Bubblegum","d":"Animated WebGL shader background in the Simplex Noise style. Bubblegum variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palet","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/simplex-noise/3-bubblegum.webp?v=b9d7c37ec00c4e7a8b1acf04b474161859bdf671a2d5daa38cd9edd26b31cf65","pc":"community"},{"id":"21st-shader:community__simplex-noise-first-contact-04f05667-ff0e-4a69-a0c6-05f9fbb90c0b","t":"Simplex Noise · First contact","d":"Animated WebGL shader background in the Simplex Noise style. First contact variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color p","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/simplex-noise/2-first-contact.webp?v=2155303edb41c006cd790586367965adaa99976b20ae39f0427c60f700a8da80","pc":"community"},{"id":"21st-shader:community__simplex-noise-shader-eb4179c0-ba24-4723-b415-1a7df927bd9b","t":"Simplex Noise shader","d":"Remix Simplex Noise shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HRMomq7zVI1ZBD8tvolCLQcKBK/39fb79ac-74d9-4811-953c-3f32ab3b12fa.webp","pc":"community"},{"id":"21st-shader:community__simplex-noise-spots-df34d4ff-ea81-46bf-8be4-9dc613afbf5c","t":"Simplex Noise · Spots","d":"Animated WebGL shader background in the Simplex Noise style. Spots variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 5-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/simplex-noise/1-spots.webp?v=d88699ffb14feb6ea6e46f5b8d22f4682fc8b000e69f29c1b3c02cb2ceb56908","pc":"community"},{"id":"21st-shader:community__smoke-ring-9b40fc37-2db5-45f5-b7a2-9414f2d88b18","t":"Smoke Ring","d":"Animated WebGL shader background in the Smoke Ring style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/smoke-ring/0-default.webp?v=b448763b4825822ddc4e00a3445e323894d91c342681435ae3140b288925abcc","pc":"community"},{"id":"21st-shader:community__smoke-ring-cloud-7328ec95-d9c6-4dd6-9138-e0863d6f9868","t":"Smoke Ring · Cloud","d":"Animated WebGL shader background in the Smoke Ring style. Cloud variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#6A","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/smoke-ring/3-cloud.webp?v=dc90570112f6970d02da6923bcdfa57738a730b2dda2c1f891e3172ca8da6e92","pc":"community"},{"id":"21st-shader:community__smoke-ring-cloud-shader-7632bae0-ea46-4cb2-8ce0-4e58919c85ec","t":"Smoke Ring · Cloud shader","d":"Remix Smoke Ring · Cloud shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HHa9qbnC6J7bsK0XltQkkVLhIL/dc625dd6-c304-4f03-a0db-44b062af7cc5.webp","pc":"community"},{"id":"21st-shader:community__smoke-ring-line-b1933563-be64-409a-91a5-025601d7aa6b","t":"Smoke Ring · Line","d":"Animated WebGL shader background in the Smoke Ring style. Line variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#050","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/smoke-ring/1-line.webp?v=b83018c93a5ce9521122c51b204f616eb79f5caa3a9252eae9224f2191a2c71a","pc":"community"},{"id":"21st-shader:community__smoke-ring-solar-64e3f8c7-89cc-4446-901e-b05659f12926","t":"Smoke Ring · Solar","d":"Animated WebGL shader background in the Smoke Ring style. Solar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#6A","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/smoke-ring/2-solar.webp?v=c555b459d0ce903700cb57796a4c425ba96204674a7386a7f6bfd485bd919227","pc":"community"},{"id":"21st-shader:community__smoke-ring-solar-shader-24556315-55a5-4516-960a-745fea89fc62","t":"Smoke Ring · Solar shader","d":"Remix Smoke Ring · Solar shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HMY2yeCJu1M2KN7G7e34xg8P1Y/709f033e-047a-4e08-ae43-3a8fa1fdf6f9.webp","pc":"community"},{"id":"21st-shader:community__spiral-e6fdf56c-046a-4b60-a4d7-2faddcf922c7","t":"Spiral","d":"Animated WebGL shader background in the Spiral style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0904","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/spiral/0-default.webp?v=00a96584d23ffbb3ee97329e2fcfc4026e2fe4a41e0e431c1a49d08808596383","pc":"community"},{"id":"21st-shader:community__static-mesh-gradient-927768e1-3596-4a76-a280-c450d01166f0","t":"Static Mesh Gradient","d":"Static WebGL shader background in the Static Mesh Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pa","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-mesh-gradient/0-default.webp?v=93074ab844657175759c4b18299d4b4ef7549f78b98c70acf14ccd95d943be44","pc":"community"},{"id":"21st-shader:community__static-mesh-gradient-sea-d88a1a17-8c60-4bf4-9de5-918a61d466c2","t":"Static Mesh Gradient · Sea","d":"Static WebGL shader background in the Static Mesh Gradient style. Sea variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palett","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-mesh-gradient/3-sea.webp?v=82eb4601410f4b1cae17a676046509b633c4b188b8740bace81808b1513cad4c","pc":"community"},{"id":"21st-shader:community__static-mesh-gradient-sunset-c8876c0c-fbb7-4c8f-bc33-7c9e084a30f6","t":"Static Mesh Gradient · Sunset","d":"Static WebGL shader background in the Static Mesh Gradient style. Sunset variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pal","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-mesh-gradient/2-sunset.webp?v=54eda306850297ff38bc3918f83ca44ac3d5d9d51474d8d2504ab6000c1537fa","pc":"community"},{"id":"21st-shader:community__static-radial-gradient-82713af9-d427-4c9d-a184-c2a60055af09","t":"Static Radial Gradient","d":"Static WebGL shader background in the Static Radial Gradient style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color ","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-radial-gradient/0-default.webp?v=f71ba1db4344975fb18bab29b69cff4b643264e786bfdf10cf8720428de09340","pc":"community"},{"id":"21st-shader:community__static-radial-gradient-cross-section-68720ce4-90e1-478c-a982-ab759f79a68d","t":"Static Radial Gradient · Cross Section","d":"Static WebGL shader background in the Static Radial Gradient style. Cross Section variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-radial-gradient/2-cross-section.webp?v=6aa7150499cb342aab8c9c8fadc9e43e0c59651e255e15e51027c71be1861aed","pc":"community"},{"id":"21st-shader:community__static-radial-gradient-lo-fi-2a722d69-cc49-48c0-ac47-92099009fdd7","t":"Static Radial Gradient · Lo-Fi","d":"Static WebGL shader background in the Static Radial Gradient style. Lo-Fi variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color pa","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-radial-gradient/1-lo-fi.webp?v=c4146b6d24d94ddf511056a29e3224653a6e6d1b6978dce21fc20977e20d6fc7","pc":"community"},{"id":"21st-shader:community__static-radial-gradient-radial-60b58af5-7dfa-42d4-9564-e7b1e2b3d493","t":"Static Radial Gradient · Radial","d":"Static WebGL shader background in the Static Radial Gradient style. Radial variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color p","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/static-radial-gradient/3-radial.webp?v=c8b296d6a9fdb338d9a1e953a9a4161b3929c513f3f023bf794522533f75a7d8","pc":"community"},{"id":"21st-shader:community__streamclick-wallpaper-9035a394-c93d-4fab-82bd-141858044ed8","t":"Streamclick Wallpaper","d":"Remix Streamclick Wallpaper, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3ChDcuvD2YeLEGmWesUyqeNrGlJ/cf68f792-dd8e-4f7d-97d8-57ddcc99d809.webp","pc":"community"},{"id":"21st-shader:community__summerlouver-347169e1-05c4-4d5d-856a-97d3805908be","t":"SummerLouver","d":"Remix SummerLouver, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HTm8PtMwUUPXNdwzu7Xy15Tcfv/f1fcfca2-c570-47bf-a57f-5ddc77057695.webp","pc":"community"},{"id":"21st-shader:community__swirl-d31da01f-fc3e-4bd9-bcfa-c787be4a6be8","t":"Swirl","d":"Animated WebGL shader background in the Swirl style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#09090","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/swirl/0-default.webp?v=ae02c73fdf07f75a9db59882f0a913061c258b17919680976aef980ee287b5b5","pc":"community"},{"id":"21st-shader:community__swirl-opening-4fe6407a-d94e-4a01-b9d8-bd9c7828bcdf","t":"Swirl · Opening","d":"Animated WebGL shader background in the Swirl style. Opening variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#A855F","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/swirl/2-opening.webp?v=9ac71544d16663b5af2619e89b1110e5088d798bc5917141c883d3d84a6cb0e4","pc":"community"},{"id":"21st-shader:community__valley-of-the-mind-e8e1928e-fb1b-49d0-8893-72017df0d4d2","t":"Valley of the Mind","d":"Remix Valley of the Mind, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3FxFV5QMUOkwpNmtysxk0CpLwaP/77793f35-d7d9-4d09-b333-28b623491298.webp","pc":"community"},{"id":"21st-shader:community__verdant-swirl-be4418d0-06ed-45fe-aeff-a9127aaa4b2b","t":"Verdant Swirl","d":"Remix Verdant Swirl, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/124689e7-edbc-4d9a-af07-c0c906822f78.webp","pc":"community"},{"id":"21st-shader:community__vibrant-stream-f98fd05a-e739-4e0a-81b7-7169bbc16bc0","t":"Vibrant Stream","d":"Remix Vibrant Stream, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/131fd07e-3583-48a9-b9f2-698f54786917.webp","pc":"community"},{"id":"21st-shader:community__violet-plasma-42eaae5e-ceff-4ee5-b346-a0e20ad65912","t":"Violet Plasma","d":"Remix Violet Plasma, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/a5163c28-90a5-45c3-afd3-ceb2f2c672e4.webp","pc":"community"},{"id":"21st-shader:community__violet-swirl-b81565f8-59b7-4860-93cb-bb6e4d950458","t":"Violet Swirl","d":"Remix Violet Swirl, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/749a47b1-a209-496a-a003-ad422552587f.webp","pc":"community"},{"id":"21st-shader:community__voronoi-aff16adf-696d-4b69-b42c-3f9e6de9db1d","t":"Voronoi","d":"Animated WebGL shader background in the Voronoi style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#061","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/voronoi/0-default.webp?v=6be31acc994f71b7d66da7e2b7fe47428227537449439bba99b6b695f8491a69","pc":"community"},{"id":"21st-shader:community__voronoi-bubbles-ea406baf-3f06-46d4-b681-676e5fdfdfde","t":"Voronoi · Bubbles","d":"Animated WebGL shader background in the Voronoi style. Bubbles variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#67E","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/voronoi/3-bubbles.webp?v=ea410e74ea924c77a19348027976f230e08f6723c841f77072e65a0d8893315f","pc":"community"},{"id":"21st-shader:community__voronoi-cells-97ca345a-4dcf-4b7d-8a6e-cf04ea9a05ec","t":"Voronoi · Cells","d":"Animated WebGL shader background in the Voronoi style. Cells variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#67E8F","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/voronoi/2-cells.webp?v=2a9f994a2269ffeb822dc294d2cc9563ebe271c69994eaf463b4fe02413fd99c","pc":"community"},{"id":"21st-shader:community__voronoi-lights-c8ff71f2-c1e0-4fa7-a89f-d916305ba20f","t":"Voronoi · Lights","d":"Animated WebGL shader background in the Voronoi style. Lights variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#0610","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/voronoi/1-lights.webp?v=4a699958466c0345ac1079bd0df9d1e9a859330ef9075473a6fef1022f5a838f","pc":"community"},{"id":"21st-shader:community__warmth-ripple-4e121c2b-b059-4f05-83f5-a1626b294cad","t":"Warmth Ripple","d":"Remix Warmth Ripple, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2nA0HITg0H7hvozIDNdxvzinpei/b4bd770b-a473-4f61-8e11-c9cbf3c3ed11.webp","pc":"community"},{"id":"21st-shader:community__warp-804655a6-cd2a-46af-a678-094cbdd2c449","t":"Warp","d":"Animated WebGL shader background in the Warp style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#16051B","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/0-default.webp?v=6a756dc9e2f6f36fcc70d72eee4b1047e71addc7efa8d0a8b7758156a386de8c","pc":"community"},{"id":"21st-shader:community__warp-cauldron-pot-84f5a46c-9cc8-4fbc-bbbb-b46419f93afe","t":"Warp · Cauldron Pot","d":"Animated WebGL shader background in the Warp style. Cauldron Pot variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/1-cauldron-pot.webp?v=61a76a097e518f81e10b5488d3cab5dc095e58a52a7028100055ec04e01019a2","pc":"community"},{"id":"21st-shader:community__warp-kelp-83081764-5393-487e-8fb0-a2330bbba56c","t":"Warp · Kelp","d":"Animated WebGL shader background in the Warp style. Kelp variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F43F5E, #","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/3-kelp.webp?v=00053a81192814036b625064db6e2603e924fd6363f6cee2a68698d271d85d69","pc":"community"},{"id":"21st-shader:community__warp-live-ink-a579981e-81f9-4021-bc6e-3844625867e7","t":"Warp · Live Ink","d":"Animated WebGL shader background in the Warp style. Live Ink variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#F43F5","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/2-live-ink.webp?v=34e9b6a9689724051c016eafc0e7093dae1dc0149bb70ce18628f02ef4a5071b","pc":"community"},{"id":"21st-shader:community__warp-nectar-fa8a52f3-8271-4f6d-9a0b-e47a80e1955c","t":"Warp · Nectar","d":"Animated WebGL shader background in the Warp style. Nectar variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#16051B,","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/4-nectar.webp?v=79dbe2a9daf77c25d67e7d662b98cbbc747c4a652aa8b9de6b30ad330a75da67","pc":"community"},{"id":"21st-shader:community__warp-passion-36348a56-03ee-49a8-b6c1-217c4ead4b2a","t":"Warp · Passion","d":"Animated WebGL shader background in the Warp style. Passion variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#16051B","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/warp/5-passion.webp?v=8c945b98aedc4bcd41540fb266f9273d572d64f9a0c508d0a35d0d2a20e4353e","pc":"community"},{"id":"21st-shader:community__warp-stripes-shader-617a698c-c908-43ce-a963-b1eca3020405","t":"Warp stripes shader","d":"Remix Warp stripes shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GtzhxH8LXf247NgPxEPQBfFJRs/99d1bf2f-54d3-4936-83e4-d95eed0a77de.webp","pc":"community"},{"id":"21st-shader:community__water-23d131d7-4886-44f4-a0b1-f19c133c17fd","t":"Water","d":"Animated WebGL shader background in the Water style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#10182","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/water/0-default.webp?v=d4529de59f63a71e6aff219c4a37a0b7d5f53ccfaba787ba64671e5653c82d08","pc":"community"},{"id":"21st-shader:community__water-abstract-b8570812-8853-4e89-8549-9bb0766df790","t":"Water · Abstract","d":"Animated WebGL shader background in the Water style. Abstract variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#B8E1","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/water/2-abstract.webp?v=49084d70ac26047a493596816dbe9edd2e006581848003031e5792e49c680a86","pc":"community"},{"id":"21st-shader:community__water-slow-mo-38950d88-95a2-49d2-96ee-322932b6c3cb","t":"Water · Slow-mo","d":"Animated WebGL shader background in the Water style. Slow-mo variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#10182","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/water/1-slow-mo.webp?v=4b5a94d77b73952f08821dc8b679b6a535913311ba4576c72bf586e3b1d88118","pc":"community"},{"id":"21st-shader:community__water-streaming-c86bf186-5b1b-4317-993a-544131f7ec1b","t":"Water · Streaming","d":"Animated WebGL shader background in the Water style. Streaming variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#B8E","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/water/3-streaming.webp?v=e212d8873e4f38dfbc60b370519a7be9473ef0e2dad08e48c02f083d7927a6f4","pc":"community"},{"id":"21st-shader:community__waves-1fce316e-4c1e-4226-b60b-529f79c4ae29","t":"Waves","d":"Animated WebGL shader background in the Waves style. Default variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#03192","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/waves/0-default.webp?v=7f261714436aaaade5f2ac1132ad894bc27f08d12d57923cdf15fa20af8c4726","pc":"community"},{"id":"21st-shader:community__waves-background-2-f9500abb-89e2-4003-8271-04e6635030e0","t":"Waves background 2","d":"Remix Waves background 2, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2zW2XqerqPxcIA3Qna2rxZAeBAy/49f6fc3b-09e4-4c03-9290-3d0e5ae569d2.png","pc":"community"},{"id":"21st-shader:community__waves-background-3c5fb9f7-83a2-494f-aa7f-0a01d34b19e6","t":"Waves background","d":"Remix Waves background, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_2zW2XqerqPxcIA3Qna2rxZAeBAy/40cf4e83-019d-48d0-91a9-35e7df9ce87c.png","pc":"community"},{"id":"21st-shader:community__waves-groovy-296a3311-808b-43f6-8279-339f9a4b854e","t":"Waves · Groovy","d":"Animated WebGL shader background in the Waves style. Groovy variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#031926","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/waves/1-groovy.webp?v=7571285f4d7c26c70e735c9e0525f2d40b96f7056a054b221cb1a04ea1f7e16b","pc":"community"},{"id":"21st-shader:community__waves-header-green-a0778f72-4a5c-44b9-bf62-c68c921d073c","t":"Waves Header Green","d":"Remix Waves Header Green, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_32lWhYzAZZ8pghZ9dRb4dPltEOH/7d24d94e-2b9f-42c6-8d9f-99c17a608ea7.webp","pc":"community"},{"id":"21st-shader:community__waves-ride-the-wave-a625d241-0520-4787-95ef-3f6568ec239b","t":"Waves · Ride the wave","d":"Animated WebGL shader background in the Waves style. Ride the wave variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/waves/3-ride-the-wave.webp?v=1c3e2b6562caea96bee5b6143997dc176a2d11baa21622b3315804b4542d3311","pc":"community"},{"id":"21st-shader:community__waves-shader-1b152579-90a6-4d9b-8c7c-4d3246f263d9","t":"Waves Shader","d":"Remix Waves Shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3AhTySF8IeRu4lqInSilCJ1nClY/dfb7e1b2-e1a2-4e89-8970-cab8d2f86c21.webp","pc":"community"},{"id":"21st-shader:community__waves-shader-343b3596-b69f-4d4f-a1f8-5551256d9657","t":"Waves shader","d":"Remix Waves shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HftXWE1HaN1nFo0hLPy7N8beVF/40326bf4-b092-43f8-b38e-019b0f54955b.webp","pc":"community"},{"id":"21st-shader:community__waves-shader-76be1f24-f65b-4fde-88ba-4502428c29ac","t":"Waves shader","d":"Remix Waves shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3GMULWtcbgZgcHUNEavGVQaSGG3/889b3b67-7e19-476f-9b2b-a196cc67d0c8.png","pc":"community"},{"id":"21st-shader:community__waves-shader-bc9a46d1-4f0e-41f8-bc03-c4fa24343b81","t":"Waves shader","d":"Remix Waves shader, a community shader made with the 21st Shader Builder.","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_3HNZ3uInf3sRnjvnKmQt025spzR/dfb2c4b7-2968-43d5-a3c4-c08cdb3a06d7.webp","pc":"community"},{"id":"21st-shader:community__waves-shaders-homlu-ui-7f5c0add-2285-4006-ad44-e75c6b27a7b5","t":"Waves shaders Homlu UI","d":"Hero","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_39720J8FZrHCoGeL23ljF4x20L3/0eefb28c-1e7e-4bc7-aa07-42d7d1e35cb7.webp","pc":"community"},{"id":"21st-shader:community__waves-tangled-up-fb86476f-69d4-4abb-8e1e-e0a2dc5e4edd","t":"Waves · Tangled up","d":"Animated WebGL shader background in the Waves style. Tangled up variant. Generated by the 21st.dev Shader Builder. Adapted from Paper Shaders under Apache-2.0. 4-color palette (#38","k":"motion","s":"21st","c":"motion/shader","g":"motion","a":"community","st":"indexed","pl":"https://assets.21st.dev/shader-recipes/thumbnails/user_papershaders/paper-variants/waves/2-tangled-up.webp?v=e8859821c1dec720ee0115ddf6e549d977a77991a9037b0f076e9f07d01dd373","pc":"community"},{"id":"21st-template:0xboom__full-event-calendar","t":"Full Event Calendar","d":"Modern fully packed event calendar for both mobile and desktop.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"0xboom","st":"indexed","pl":"https://cdn.21st.dev/user_2u8cQmcxOF8otE9xspfAwq98XyZ/full-event-calendar/preview.webp","pc":"0xboom"},{"id":"21st-template:beratberkayg__cat-admin-template","t":"cat admin template","d":"Minimal components. Maximum purrformance.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"beratberkayg","st":"indexed","pl":"https://cdn.21st.dev/user_2sjKtWeP6DDixDrGQQItKElODmk/cat-admin-template/preview.png","pc":"beratberkayg"},{"id":"21st-template:btech10574.24__the-defense-reformation","t":"The Defense Reformation","d":"https://www.18theses.com/","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"btech10574.24","st":"indexed","pl":"https://cdn.21st.dev/user_31xGuj7CuRHp8FKndHNs5ZHdqy8/templates/the-defense-reformation/preview-1786691080000.jpg","pc":"btech10574.24"},{"id":"21st-template:bundui__cosmic-saas-landing-page-template-shadcn-ui","t":"Cosmic - Saas Landing Page Template (shadcn/ui)","d":"A modern, responsive landing page template for developers, optimized for SaaS projects. Built with shadcn/ui, Tailwind CSS, and Next.js.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/user_2xooKdk7IqLvzBUm2uT6CVnLloq/cosmic-saas-landing-page-template-shadcn-ui/preview.png","pc":"bundui"},{"id":"21st-template:bundui__neofolio-portfolio-template-shadcn-ui","t":"Neofolio - Portfolio Template (shadcn/ui)","d":"Neofolio is a dashboard style portfolio website template built with Next.js and shadcn/ui. You can present yourself online in an ideal way, sell your products or showcase your work","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/user_2xooKdk7IqLvzBUm2uT6CVnLloq/neofolio-portfolio-template-shadcn-ui/preview.png","pc":"bundui"},{"id":"21st-template:bundui__waitly-free-waitlist-template","t":"Waitly - Free Waitlist Template","d":"A simple and useful waitlist Next.js template. Built with shadcn/ui, Tailwind CSS, and Next.js. Open source.\n\n","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"bundui","st":"indexed","pl":"https://cdn.21st.dev/user_2xooKdk7IqLvzBUm2uT6CVnLloq/waitly-free-waitlist-template/preview.png","pc":"bundui"},{"id":"21st-template:buoooou__buou-next-ai","t":"BuouAI","d":"This is an Super Next Starter Kit with ChatGPT/Runpod/Replicate to create your AI SaaS, enabling you to quickly generate your first 💰 online","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"buoooou","st":"indexed","pl":"https://cdn.21st.dev/user_2u3tZbpsSEeH1fuWFoa8yrPgEIE/buou-next-ai/preview.png","pc":"buoooou"},{"id":"21st-template:buoooou__buou-next-kit","t":"BuouNext","d":"This is an Super Full-Stack Next Starter Kit with all you need to build your SaaS, AI tool, or any other web app","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"buoooou","st":"indexed","pl":"https://cdn.21st.dev/user_2u3tZbpsSEeH1fuWFoa8yrPgEIE/buou-next-kit/preview.png","pc":"buoooou"},{"id":"21st-template:charanjit-singh__indie-kit-with-dodo","t":"Indie Kit With Dodo","d":"Launch your Startup with Dodo Payments","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"charanjit-singh","st":"indexed","pl":"https://cdn.21st.dev/user_2vrGGWabmWPHU3RrMbdIdAiq4Uj/indie-kit-with-dodo/preview.png","pc":"charanjit-singh"},{"id":"21st-template:cult-ui__cult-directory-template","t":"Directory","d":"Dominate search rankings and monetize traffic with this SEO powerhouse. Our full-stack Next.js, Shadcn, and Supabase directory template features a 3-stage scraping and AI enrichmen","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"cult-ui","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//cult-directory-template.png","pc":"cult-ui"},{"id":"21st-template:cult-ui__cult-landing-page","t":"Landing Page","d":"Craft high-converting landing pages that captivate and convert. Perfect for SaaS startups, digital products, and subscription services looking to make a lasting first impression an","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"cult-ui","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//cult-landing-page.png","pc":"cult-ui"},{"id":"21st-template:cult-ui__cult-offline-travel-stash","t":"Travel Stash","d":"Next-gen travel app. Vercel ai sdk, claude haiku and RxDB allow you to generate complete travel itineraries. Store your data locally using RxDB and retrieve it offline when your in","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"cult-ui","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//cult-offline-travel-stash.png","pc":"cult-ui"},{"id":"21st-template:cult-ui__cult-prompt-stash","t":"Prompt Stash","d":"A local-first AI prompt manager with variable highlighting, secure key storage, and AI agents. Organize and optimize your prompts offline.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"cult-ui","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//cult-prompt-stash.png","pc":"cult-ui"},{"id":"21st-template:cult-ui__logo-gpt-template","t":"Logo GPT","d":"Generate, store, and download logos with Dalle3 and supabase. This template features image generation with seamless auth and storage, plus a built-in token economy. Perfect for bui","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"cult-ui","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//logo-gpt-template.png","pc":"cult-ui"},{"id":"21st-template:dailydischq__roomify-interior-design-ai-platform","t":"Roomify - Interior Design AI Platform","d":" Roomify - Interior Design AI Platform\n\nA modern web application for AI-powered interior design with secure user authentication and API key management.\n\n Features\n\n- User Authentic","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dailydischq","st":"indexed","pl":"https://cdn.21st.dev/user_2yLqjWS8dOp14VY5pW0IjI7d4UY/roomify-interior-design-ai-platform/preview.png","pc":"dailydischq"},{"id":"21st-template:danatelofficial__earned","t":"Earned","d":"My project is a web-based weight lifting tracker designed to help athletes and regular lifters log workouts, track progress, and stay consistent with their training. The current ve","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"danatelofficial","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/users/user_3GvcC1ZHeEh48s78vXADRqqpc2K/bento/img-0dsv690f.png?v=1784872840233","pc":"danatelofficial"},{"id":"21st-template:designali-in__dalim","t":"Dalim","d":"Designs That Give","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"designali-in","st":"indexed","pl":"https://cdn.21st.dev/user_2rO0IUQINTfBex4xN8Ghho5dpr4/dalim/preview.jpg","pc":"designali-in"},{"id":"21st-template:dhileepkumargm__karate","t":"Karate","d":"Shinken Karate is a high-converting, premium Framer template engineered specifically for martial arts dojos, fitness academies, and local training centers.\n\nDesigned with a bold, m","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dhileepkumargm","st":"indexed","pl":"https://cdn.21st.dev/user_2xffZsPH7trHq0L2RAacpvdoyXT/templates/karate/preview-1783142097029.png","pc":"dhileepkumargm"},{"id":"21st-template:dillionverma__dev-tool-template","t":"Dev Tool Template","d":"A professional landing page template designed for developer tools and APIs. Showcase code snippets, highlight features, and display pricing plans. Includes an integrated MDX blog, ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dillionverma","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//dev-tool-template.png","pc":"dillionverma"},{"id":"21st-template:dillionverma__mobile-template","t":"Mobile Template","d":"Showcase your mobile app with a professionally designed landing page. Features interactive app previews, smooth animations, and mobile-first design. Includes customizable sections ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dillionverma","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//mobile-template.png","pc":"dillionverma"},{"id":"21st-template:dillionverma__portfolio-template","t":"Portfolio Template","d":"Showcase your work with a sleek, modern portfolio page. This template features sections for projects, skills, and contact information, ideal for creatives and professionals looking","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dillionverma","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//portfolio-template.png","pc":"dillionverma"},{"id":"21st-template:dillionverma__saas-template","t":"SaaS Template","d":"Create a stunning landing page for your startup or product with our professionally designed template. Includes customizable sections, responsive design, and optimized for conversio","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dillionverma","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//saas-template.png","pc":"dillionverma"},{"id":"21st-template:dillionverma__startup-template","t":"Startup Template","d":"Launch your startup with a professional, responsive landing page. Includes customizable sections for hero, features, pricing, perfect for showcasing your product or idea.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"dillionverma","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//startup-template.png","pc":"dillionverma"},{"id":"21st-template:drewsephski__hyper-ai","t":"Hyper AI","d":"A multipage AI SaaS Starter","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"drewsephski","st":"indexed","pl":"https://cdn.21st.dev/user_2wFZQU7iZkPkpGHI1P7dR4w42N0/hyper-ai/preview.png","pc":"drewsephski"},{"id":"21st-template:easemize__chat-app-chatgpt-chatbot","t":"Chat app chatgpt chatbot","d":"A fully functional chatbot interface designed for developers building agentic AI applications who need a modern starter kit.\n\nFeatures:\n- Clean chat interface\n- Modern prompt input","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"easemize","st":"indexed","pl":"https://cdn.21st.dev/user_2xJxXqdwWohYrdd6fiMYrS9hbmO/templates/chat-app-chatgpt-chatbot/preview-1783180523441.png","pc":"easemize"},{"id":"21st-template:ekmas__neobrutalism-bento","t":"Neobrutalism bento","d":"Neobrutalism bento is a neobrutalism-styled nextjs tailwind template heavily insipired by bento.me.\n\nThis template is built with neobrutalism components.\nYou can check them out her","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ekmas","st":"indexed","pl":"https://cdn.21st.dev/user_2reteS3IODi8OJpbNYOpgLKdwT7/neobrutalism-bento/preview.webp","pc":"ekmas"},{"id":"21st-template:ekmas__neobrutalism-portfolio","t":"Neobrutalism portfolio","d":"Neobrutalism portfolio is a neobrutalism-styled nextjs tailwind template for portfolios.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ekmas","st":"indexed","pl":"https://cdn.21st.dev/user_2reteS3IODi8OJpbNYOpgLKdwT7/neobrutalism-portfolio/preview.webp","pc":"ekmas"},{"id":"21st-template:ekmas__neobrutalism-windowed-portfolio","t":"Neobrutalism windowed portfolio","d":"Neobrutalism windowed portfolio is a neobrutalism-styled nextjs tailwind template for portfolios.\n\nThis template is built with neobrutalism components. \nYou can check them out here","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ekmas","st":"indexed","pl":"https://cdn.21st.dev/user_2reteS3IODi8OJpbNYOpgLKdwT7/neobrutalism-windowed-portfolio/preview.webp","pc":"ekmas"},{"id":"21st-template:emmanuelajako406__pulse-ai","t":"Pulse AI","d":"Pulse AI is a premium Next.js SaaS template built for startups, founders, and developers who want to launch modern web applications faster. It combines a polished design system, re","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"emmanuelajako406","st":"indexed","pl":"https://cdn.21st.dev/user_3G80nDkNZerGPSZ0nzvRgGKg14f/templates/pulse-ai/preview-1783339726402.png","pc":"emmanuelajako406"},{"id":"21st-template:emptyhills25.14__finance","t":"Finance","d":"Ready-to-use website and app template.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"emptyhills25.14","st":"indexed","pl":"https://cdn.21st.dev/user_3GYKozSKhPzWWFzh5EYfUBs2Vfj/templates/finance/preview-1785449860569.png","pc":"emptyhills25.14"},{"id":"21st-template:gnzikoune__food-nutrition-tracker","t":"Food Nutrition Tracker","d":"It's a simple food nutrition tracker app","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"gnzikoune","st":"indexed","pl":"https://cdn.21st.dev/user_2vmhJe3vTV6bs4SZd26VXcnEIhp/food-nutrition-tracker/preview.png","pc":"gnzikoune"},{"id":"21st-template:horizon-ui__horizon-ui-admin-dashboard-template","t":"Admin Dashboard Template","d":"Start building your dashboard with Horizon UI, the most popular Free and Open-source Admin Template provider for NextJS and Shadcn UI!","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"horizon-ui","st":"indexed","pl":"https://cdn.21st.dev/user_horizon-ui/horizon-ui-admin-dashboard-template/preview.png","pc":"horizon-ui"},{"id":"21st-template:horizon-ui__horizon-ui-ai-boilerplate","t":"AI Boilerplate","d":"Improve your development process with a set of ready-to-use pages. Landing section categories like Footer, Hero, Features, Pricing, and many more are available to save you precious","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"horizon-ui","st":"indexed","pl":"https://cdn.21st.dev/user_horizon-ui/horizon-ui-ai-boilerplate/preview.png","pc":"horizon-ui"},{"id":"21st-template:ibelick__ibelick-noir","t":"Noir","d":"Saas landing page template\n\nA minimal, black-and-white one-page landing page template, built to showcase products, features, and drive conversions. Perfect for startups, agencies, ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2rkgEMvkQ7I2oxalLXELCy8NObN/ibelick-noir/preview.png","pc":"ibelick"},{"id":"21st-template:ibelick__motion-primitives-nim","t":"Nim","d":"Personal website template. \nA fast, minimal, and elegant personal website template with a built-in blog. Perfect for developers, designers, and founders who want a beautiful and fu","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ibelick","st":"indexed","pl":"https://cdn.21st.dev/user_2nElBLvklOKlAURm6W1PTu6yYFh/motion-primitives-nim/preview.png","pc":"ibelick"},{"id":"21st-template:kinfe123__arc","t":"Arc","d":"a new way of creating software - a farmui template","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/user_2rgfvfP6KhEePYzaDzrZPKcn1JO/arc/preview.png","pc":"kinfe123"},{"id":"21st-template:kinfe123__asset-x","t":"AssetX","d":"AssetX manages your web 3.0 account.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/user_2rgfvfP6KhEePYzaDzrZPKcn1JO/asset-x/preview.png","pc":"kinfe123"},{"id":"21st-template:kinfe123__builder-template","t":"Builder Template","d":"Develop website at speed with ease and feature rich.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/user_2rgfvfP6KhEePYzaDzrZPKcn1JO/builder-template/preview.png","pc":"kinfe123"},{"id":"21st-template:kinfe123__remark","t":"Remark","d":"Remak makes it easy to work with API with our easy use SDK along with compressive documentation and blog pages","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kinfe123","st":"indexed","pl":"https://cdn.21st.dev/user_2rgfvfP6KhEePYzaDzrZPKcn1JO/remark/preview.png","pc":"kinfe123"},{"id":"21st-template:kokonutd__ai-template","t":"AI Template","d":"Beautiful landing template for Startup inspired by modern design and little interaction.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/ai-template/preview.png","pc":"kokonutd"},{"id":"21st-template:kokonutd__futur","t":"Futur","d":"Futur is a beautiful startup business template designed and built with Next.js, Tailwind CSS, and Motion. It's perfect for showcasing your startup with a clean, futuristic design a","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/futur/preview.jpeg","pc":"kokonutd"},{"id":"21st-template:kokonutd__kokonutd-designer-template","t":"Designer Template","d":"A fully clean and beautiful Designer Template with a neat Design.\n\nWhat's included\nHero with Assets\nFeatures preview and animated cards\nFrequently Asked Questions with animations\nC","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/user_2rQ1QHrJyxpmWMHhqhANzWMc64n/kokonutd-designer-template/preview.png","pc":"kokonutd"},{"id":"21st-template:kokonutd__kokonutd-saas-template","t":"Saas Template","d":"A fully clean and beautiful Saas Template with a beautiful design. The whole page is filled with animations to keep users eyes.\n\nWhat's included\nHero Landing with beautiful animati","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"kokonutd","st":"indexed","pl":"https://cdn.21st.dev/kokonutd-saas-template/preview.png","pc":"kokonutd"},{"id":"21st-template:lyanchouss__dali-agents-ai-agency-website-template","t":"Dali Agents - AI Agency Website Template","d":"A cinematic, conversion-focused website template for AI agencies, automation studios, and digital product teams.\n  It includes an animated hero, service and project sections, respo","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/user_2xFgBhIEcC8WVjxizPEzB14AOkb/templates/dali-agents-ai-agency-website-template/preview-1786465388168.png","pc":"lyanchouss"},{"id":"21st-template:lyanchouss__dali-ai-agency-agent-studio-site","t":"Dali - AI Agency & Agent Studio Site","d":"The site behind daliagents.com. Built for AI/agent studios and dev shops that need to look like they ship software, not slides.\n\nWhat's inside\n- 4 locales (EN / RU / KA / HY) in pe","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"lyanchouss","st":"indexed","pl":"https://cdn.21st.dev/user_2xFgBhIEcC8WVjxizPEzB14AOkb/templates/dali-ai-agency-agent-studio-site/preview-1785796217683.png","pc":"lyanchouss"},{"id":"21st-template:malikabdullah0120__devdossier-animated-portfolio","t":"DevDossier Animated Portfolio","d":"DevDossier — The Classified Developer Portfolio\n\nA premium, highly interactive portfolio template built for developers. Designed with a unique \"Tactical Case File / Intelligence Do","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"malikabdullah0120","st":"indexed","pl":"https://cdn.21st.dev/user_3HiYdGFNeFg8rtmU6pgjM5f6sGa/templates/devdossier-animated-portfolio/preview-1786868785684.png","pc":"malikabdullah0120"},{"id":"21st-template:malikabdullah0120__the-chair-premium-barbershop-digital-experience","t":"The CHAIR — Premium Barbershop Digital Experience","d":"Excited to showcase **THE CHAIR** — a modern, fully functional full-stack web application built for luxury barbershops, salons, and men’s grooming studios. 💈🚀\n\nThis isn’t a static ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"malikabdullah0120","st":"indexed","pl":"https://cdn.21st.dev/user_3HiYdGFNeFg8rtmU6pgjM5f6sGa/templates/the-chair-premium-barbershop-digital-experience/preview-1786946809673.png","pc":"malikabdullah0120"},{"id":"21st-template:manuarora700__agenlabs-agency-template","t":"Agenlabs Agency Template","d":"Agenlabs is template with Clean modern design and crisp illustrations, perfect template to get your Agency business up and running.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//agenlabs-agency-template.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__ai-saas-template","t":"AI SaaS Template","d":"Every AI SaaS template is a multi-page template focused on AI applications offering SaaS solutions.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//ai-saas-template.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__devpro-portfolio-template","t":"DevPro Portfolio Template","d":"DevPro is a portfolio template for developers with blogs, projects, events and everything. Clean. Modern. Responsive. Neat.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//devpro-portfolio-template.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__foxtrot-marketing-template","t":"Foxtrot Marketing Template","d":"Foxtrot is a SaaS marketing template that has a modern design with a pinch of class, perfect for launching your single page website.\n\n","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//foxtrot-marketing-template.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__playful-template","t":"Playful Marketing Template","d":"A simple, elegant and playful marketing template with minimal colors and creative microinteractions.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//playful-marketing.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__proactiv","t":"Proactiv Marketing Template","d":"Proactiv is a marketing template designed for SaaS companies focusing on marketing tools for social media.\n\n","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//proactiv.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__sidefolio-portfolio-template","t":"Sidefolio Portfolio Template","d":"Sidefolio is a portfolio template for developers with blogs, projects, resume and everything. A sidebar layout with a modern design. Mobile responsive with toggleable sidebar.\n\n","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//sidefolio-portfolio-template.png","pc":"manuarora700"},{"id":"21st-template:manuarora700__startup-landing-simple","t":"Startup Landing Template","d":"A simple, clean, modern and minimalistic landing page template for startups. Filled with microinteractions to keep your users engaged.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"manuarora700","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/images//startup-landing-simple.png","pc":"manuarora700"},{"id":"21st-template:mdadul__e-commerce-marketplace-template","t":"E-commerce Marketplace Template","d":"An E-commerce marketplace landing page template. ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"mdadul","st":"indexed","pl":"https://cdn.21st.dev/user_2t44nbexIqmWujbi1mger1PcFbX/e-commerce-marketplace-template/preview.png","pc":"mdadul"},{"id":"21st-template:monolythdev__qronos-ai-agent-scheduler-template","t":"Qronos AI Agent Scheduler Template","d":"Qronos is a polished, responsive landing-page template for SaaS, AI, and autonomous agent-related product marketing sites. It pairs a dark, high-contrast visual system with product","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"monolythdev","st":"indexed","pl":"https://cdn.21st.dev/user_3EiTTxMOCiZGxbAlgIREvkoJcyF/templates/qronos-ai-agent-scheduler-template/preview-1786452419048.png","pc":"monolythdev"},{"id":"21st-template:monolythdev__shelfy-retail-ai-startup-template","t":"Shelfy Retail AI Startup Template","d":"Shelfy is a high-end, responsive landing page template crafted specifically for deep-tech startups, computer vision platforms, smart warehouse providers, and inventory automation s","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"monolythdev","st":"indexed","pl":"https://cdn.21st.dev/user_3EiTTxMOCiZGxbAlgIREvkoJcyF/templates/shelfy-retail-ai-startup-template/preview-1784451178093.png","pc":"monolythdev"},{"id":"21st-template:monuraja11__bubble-12","t":"bubble-12@","d":"bubble-website12","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"monuraja11","st":"indexed","pl":"https://cdn.21st.dev/user_2x68uhF9Jb5SjSxGQypKZCETXP8/bubble-12/preview.PNG","pc":"monuraja11"},{"id":"21st-template:nextjsshop__aceai","t":"Aceai","d":"Launch AI products faster with a sleek, modern SaaS foundation.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/aceai/preview-1782387187416.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__agent-ai","t":"Agent-AI","d":"Build, Launch & Scale AI Agents Faster with a Production-Ready Next.js Template","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/agent-ai/preview-1782388140263.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__anox","t":"Anox","d":"Design faster. Launch smarter. Scale without limits.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/anox/preview-1782387338873.webp","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__bookify","t":"Bookify","d":"Dark-Mode E-Commerce & Content Template","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/bookify/preview-1782386853191.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__bookmark-design","t":"Bookmark Design","d":"A smarter way to collect the web.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/bookmark-design/preview-1782387732032.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__connectsphere","t":"ConnectSphere","d":"Mobile App SaaS Landing Template","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/connectsphere/preview-1782386550569.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__cypon-analytics","t":"Cypon-Analytics","d":"Modern Analytics for Modern Teams.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/cypon-analytics/preview-1782387828783.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__deepflow","t":"Deepflow","d":"AI SaaS Landing Page Template","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/deepflow/preview-1782386657777.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__deo-ecommerce","t":"Deo-Ecommerce","d":"Modern Next.js Ecommerce Template Built for Fast-Growing Brands","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/deo-ecommerce/preview-1782387903359.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__ecommerce-template","t":"Ecommerce Template","d":"Build high-converting ecommerce experiences effortlessly.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/ecommerce-template/preview-1782387637006.webp","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__evolv-ai","t":"Evolv-Ai","d":"Build smarter AI workflows with speed, clarity, and scale.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/evolv-ai/preview-1782388238151.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__fleetops","t":"FleetOps","d":"A modern Next.js landing page template for fleet management SaaS.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/fleetops/preview-1782386953983.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__gitlist","t":"Gitlist","d":"Dark-Themed Mobile App SaaS Landing Page","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/gitlist/preview.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__mosa-ai","t":"Mosa AI","d":"The modern AI assistant template for building smarter conversations and seamless user experiences.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/mosa-ai/preview-1782387983704.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__nexflow","t":"Nexflow","d":"Streamline your workflow with a modern validation system.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/nexflow/preview-1782387423999.webp","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__nexuscloud","t":"Nexuscloud","d":"Ship faster with scalable cloud infrastructure that just works.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/nexuscloud/preview-1782387270326.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__omega","t":"Omega","d":"Precision meets performance for modern agencies.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/omega/preview-1782387513663.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__orbit-mail","t":"Orbit Mail","d":"Build stunning email campaigns with a modern, developer-friendly email template.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/orbit-mail/preview-1782388077950.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__personal-portfolio","t":"Personal-Portfolio","d":"Next.js & MDX Powered Developer Website","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/personal-portfolio/preview.png","pc":"nextjsshop"},{"id":"21st-template:nextjsshop__thinkscope","t":"ThinkScope","d":"Ready-to-use website and app template.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"nextjsshop","st":"indexed","pl":"https://cdn.21st.dev/user_2zxiDlyxY96s67p94sGoEXo2PsN/templates/thinkscope/preview-1782386745392.png","pc":"nextjsshop"},{"id":"21st-template:openairlabs__multi-step-ai-chat-style-lead-gen-form","t":"Multi Step AI Chat Style Lead Gen Form","d":"A CRO optimised, AI-inspired multi-step form template built with v0, Tailwind CSS, and Next.js—designed for high-converting lead gen, waitlists, surveys, and more.\n\nThis template d","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"openairlabs","st":"indexed","pl":"https://cdn.21st.dev/user_2v9Z1YKrVZGo8si21BdRBy53ls5/multi-step-ai-chat-style-lead-gen-form/preview.png","pc":"openairlabs"},{"id":"21st-template:pinakfaldu3748__agent-flow-pro-ai-automation-landing-page-template","t":"AgentFlow Pro - AI Automation Landing Page Template","d":"AgentFlow Pro is a conversion-optimized Next.js landing page template designed specifically for AI automation platforms and SaaS companies.\n\n🚀 Key Features:\n- Modern Tech Stack: Ne","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"pinakfaldu3748","st":"indexed","pl":"https://cdn.21st.dev/user_3399iSQId9cz4E0M191iEAIExYE/agent-flow-pro-ai-automation-landing-page-template/preview.png","pc":"pinakfaldu3748"},{"id":"21st-template:rockgaming755__b2b-for-your-next-business","t":"B2B For Your next business","d":"We are an award-winning studio pushing the boundaries of strategy, design, and engineering to build digital products people love.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"rockgaming755","st":"indexed","pl":"https://cdn.21st.dev/user_36QZpYRIEz37wEDJm37FU07Ezlh/templates/b2b-for-your-next-business/preview-1786448064579.png","pc":"rockgaming755"},{"id":"21st-template:rockgaming755__portfolio-2026","t":"portfolio 2026","d":"are you watching for portfolio. waiting are over!!!","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"rockgaming755","st":"indexed","pl":"https://cdn.21st.dev/user_36QZpYRIEz37wEDJm37FU07Ezlh/templates/portfolio-2026/preview-1782816379162.png","pc":"rockgaming755"},{"id":"21st-template:ruixen.ui__folio-open-source-data-intelligence-landing-template","t":"Folio — Open Source Data Intelligence Landing Template","d":"Production-grade Next.js 15 landing template for open-source data intelligence, BI, and AI-charting products. Hero with embedded dashboard preview, Bento feature grid, animated Fea","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/templates/folio-open-source-data-intelligence-landing-template/preview-1782463876385.png","pc":"ruixen.ui"},{"id":"21st-template:ruixen.ui__portfolio-developer-portfolio-blog-component-registry-free","t":"Portfolio — Developer Portfolio + Blog + Component Registry (Free)","d":"Free, MIT-licensed Next.js 15 portfolio monorepo with blog (MDX), project showcase, GitHub heatmap, vCard, PWA, JSON-LD SEO, and a built-in shadcn-compatible component registry.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/templates/portfolio-developer-portfolio-blog-component-registry-free/preview-1782976365586.png","pc":"ruixen.ui"},{"id":"21st-template:ruixen.ui__vertex-ai-workflow-automation-landing-template","t":"Vertex — AI Workflow Automation Landing Template","d":"Production-grade Next.js 15 landing page for AI workflow automation products. 10+ pre-built sections (hero with rotating CRM cards, features, pricing comparison, testimonials, FAQ,","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"ruixen.ui","st":"indexed","pl":"https://cdn.21st.dev/user_2y5Wd5l713ZIFYjX19aZXSyXd6b/templates/vertex-ai-workflow-automation-landing-template/preview-1782463534802.png","pc":"ruixen.ui"},{"id":"21st-template:sean0205__metronic-all-in-one-tailwind-react-next-js-templates-components","t":"Metronic - All-in-One Tailwind, React, Next.js Templates & Components","d":"A complete toolkit of 1000+ UI components built with Tailwind 4 for React, Next.js based on shadn/ui and ReUI libraries to build scalable web apps faster than ever.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/user_2wpPk1CyWKAxM46S7k5UoCQhmqF/metronic-all-in-one-tailwind-react-next-js-templates-components/preview.png","pc":"sean0205"},{"id":"21st-template:sean0205__saasify-product-marketing-template","t":"SaaSify - Product Marketing Template","d":"SaaSify a landing page template for SaaS products built with Next.js and Tailwind using Shadcn, MagicUI and ReUI components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/user_2wpPk1CyWKAxM46S7k5UoCQhmqF/saasify-product-marketing-template/preview.png","pc":"sean0205"},{"id":"21st-template:sean0205__supastart-nextjs-supabase-boilerplate","t":"Supastart - Next.js Supabase Boilerplate","d":"Next.js starterkit with Supabase auth and  fully functional User Management CRUD app.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sean0205","st":"indexed","pl":"https://cdn.21st.dev/user_2wpPk1CyWKAxM46S7k5UoCQhmqF/supastart-nextjs-supabase-boilerplate/preview.png","pc":"sean0205"},{"id":"21st-template:senommu__alpha-motoko-ui","t":"Alpha Motoko UI","d":"A premium React landing page template for modern SaaS products. Built with Next.js 15, React 19, Tailwind CSS v4, shadcn/ui, and Motion. Designed for startups, AI tools, developer ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/user_39720J8FZrHCoGeL23ljF4x20L3/templates/alpha-motoko-ui/preview-1785380300098.png","pc":"senommu"},{"id":"21st-template:senommu__homlu-admin-react-dashboard-template","t":"Dash by Motoko UI","d":"A polished SaaS admin UI you can run today — auth, analytics, CRM-style modules, and a custom design system included.\n\nWhat’s inside\n\n- 🔐  Clerk auth — sign-in, sign-up, OTP, forgo","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"senommu","st":"indexed","pl":"https://cdn.21st.dev/user_39720J8FZrHCoGeL23ljF4x20L3/templates/homlu-admin-react-dashboard-template/preview-1786266894661.png","pc":"senommu"},{"id":"21st-template:serafimcloud__able-pro-bootstrap-tailwind-react-next-js-angular-vue-asp-la","t":"Able Pro (Bootstrap, Tailwind, React, Next.js, Angular, Vue, ASP, Laravel Admin Template)","d":"CodedThemes' flagship multi-framework premium admin dashboard, shipping across Bootstrap, Tailwind, React, Next.js, Angular, Vue, ASP and Laravel with extensive prebuilt pages and ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/able-pro-bootstrap-tailwind-react-next-js-angular-vue-asp-la/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__able-pro-next-js-mui-react-admin-template","t":"Able Pro Next.js MUI React Admin Template","d":"Next.js and Material-UI React build of the Able Pro admin dashboard with a large library of ready-to-use pages and UI components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/able-pro-next-js-mui-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__agenforce-marketing-template","t":"Agenforce Marketing Template","d":"A marketing template for multiple use cases including AI agents, agencies, chatbots and SaaS, with delightful micro-interactions and animations.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/agenforce-marketing-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__agenta","t":"Agenta","d":"Futuristic landing page for a neural-augmentation / brain-computer-interface AI product, with hero, feature sections and tiered subscription pricing. Aesthetically dense, detail-ri","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/agenta/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__ai-agent-template","t":"AI Agent Template","d":"A landing page template for an AI agent / B2B AI automation startup (showcased as \"SkyAgent\"), aimed at teams using an AI assistant to automate workflows and repetitive tasks.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/ai-agent-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__aispace","t":"AISpace","d":"Modern React AI SaaS landing page template aimed at AI and developer tool products.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/aispace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__alt-text-generator","t":"Alt Text Generator","d":"Generate image descriptions (alt text) using AI.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/alt-text-generator/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__appspace","t":"AppSpace","d":"Modern React mobile app landing page template for SaaS and mobile app products.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/appspace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__appy","t":"Appy","d":"A dark and white website template designed for showcasing mobile apps. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/appy/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__argon-dashboard-pro-react","t":"Argon Dashboard PRO React","d":"Premium React + Reactstrap (Bootstrap 4) admin dashboard with 200+ components, plugins and example pages for building admin interfaces.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/argon-dashboard-pro-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__argon-dashboard-react","t":"Argon Dashboard React","d":"Free open-source dashboard built with React, Reactstrap and Bootstrap 4, featuring over 100 prebuilt components and example pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/argon-dashboard-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__berry-free-mui-react-admin-template","t":"Berry Free MUI React Admin Template","d":"The free React (Material-UI) edition of Berry, a modern responsive admin dashboard with a flexible component-driven design.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/berry-free-mui-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__better-auth-postgres","t":"Better Auth Postgres","d":"Multi-tenant, organization-based Next.js SaaS starter combining Better Auth for authentication, Drizzle ORM with PostgreSQL, and Stripe for subscription billing and team management","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/better-auth-postgres/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__bizspace","t":"BizSpace","d":"React business and consulting website template for agencies, with services, process, and testimonials sections.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/bizspace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__black-dashboard-react","t":"Black Dashboard React","d":"Free React admin dashboard built with Reactstrap and Bootstrap 4, with dark/light modes and components geared toward data visualization.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/black-dashboard-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__blog-template","t":"Blog Template","d":"A fully customizable blog template with integrated MDX support for publishing articles and posts.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/blog-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__bookkeeper-react-accounting-template","t":"Bookkeeper - React Accounting Template","d":"Ready-to-use accounting and bookkeeping app built with React, Node.js and PostgreSQL, with general ledger, accounts receivable and analytics dashboards for SMBs.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/bookkeeper-react-accounting-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__buoustore-next-starter-kit","t":"BuouStore Next Starter Kit","d":"E-commerce focused Next.js starter kit with a storefront, order management, admin dashboard, Stripe payments, and animations. Built with Next.js, TypeScript, Tailwind CSS, and Pris","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/buoustore-next-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__chadnext-starter","t":"ChadNext","d":"A quick Next.js starter bundling shadcn/ui, Lucia auth, Prisma, server actions, and Stripe. Includes internationalization and file uploads to speed up new projects.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/chadnext-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__changelog-template","t":"Changelog Template","d":"A changelog / product-updates template for documenting version releases and feature improvements over time.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/changelog-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__chatbot-ui","t":"Chatbot UI","d":"A ChatGPT-style, browser-based chatbot interface.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/chatbot-ui/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__chatbot","t":"Chatbot","d":"A full-featured, hackable Next.js AI chatbot built by Vercel using the AI SDK.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/chatbot/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cms-dashboard","t":"CMS Dashboard","d":"React dashboard template for content and subscription platforms, with content management and admin views.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cms-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__codeforge-template","t":"Codeforge Template","d":"A landing page template for an AI-powered code generation / developer tool, with sections geared toward shipping production code faster via AI (code writing, reviews, testing, refa","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/codeforge-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__community","t":"Community","d":"A beautiful forum template fit for any community and tech news portal. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/community/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__coreui-free-react-admin-template","t":"CoreUI Free React Admin Template","d":"Open-source React 19 and Bootstrap 5 admin dashboard with pre-built components, dark/light modes and responsive layouts optimized for AI-assisted development. Free and open-source.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/coreui-free-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__coreui-pro-react-admin-template","t":"CoreUI PRO React Admin Template","d":"Premium React 19 and Bootstrap 5 admin dashboard with 250+ customizable UI components, four pre-designed themes and responsive design, eliminating third-party dependencies. Standar","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/coreui-pro-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__creative-tim-material-dashboard-react","t":"Material Dashboard 2 React","d":"A free React admin dashboard built on MUI with Material Design, charts, and example pages. Free with a paid Pro version.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/creative-tim-material-dashboard-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__creative","t":"Creative","d":"The perfect landing page template for launching communities and creative sites. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/creative/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cruip-mosaic-lite-react","t":"Mosaic Lite","d":"A free admin dashboard template from Cruip built in React and Tailwind CSS. Includes charts, tables, and a responsive layout for analytics interfaces.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cruip-mosaic-lite-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cruip-mosaic-pro","t":"Mosaic","d":"A premium admin dashboard template from Cruip built in React and Tailwind CSS. Bundles many prebuilt analytics, ecommerce, and settings views for building back offices.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cruip-mosaic-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cruip-open-react-template","t":"Open React Template","d":"A free dark-themed landing page from Cruip built in Next.js and Tailwind CSS. Designed to showcase open-source projects, SaaS products, and online services.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cruip-open-react-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cruip-simple-light","t":"Simple Light","d":"A free light-themed landing page template from Cruip, coded in Next.js and Tailwind CSS. Provides the core sections needed for a SaaS or product marketing page.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cruip-simple-light/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cryptgen-marketing-template","t":"Cryptgen Marketing Template","d":"A single-page, modern and responsive marketing template with a bento grid, testimonials, features and a call to action. SEO-optimized with microinteractions.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cryptgen-marketing-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cube","t":"Cube","d":"A fabulous landing page template for quickly iterating on ideas, startups, and software. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cube/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__cult-seo-v2-0","t":"Cult SEO v2.0","d":"A website crawler that grades performance and generates AI-powered improvement recommendations, intended as a base for building your own SEO analysis tool.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/cult-seo-v2-0/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__dashboardkit-free-react-admin-template","t":"DashboardKit Free React Admin Template","d":"A free React admin dashboard starter with essential analytics widgets, UI components and prebuilt pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/dashboardkit-free-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__datta-able-free-next-js-tailwind-admin-template","t":"Datta Able Free Next.js Tailwind Admin Template","d":"A free admin dashboard built with Next.js and Tailwind CSS, featuring light/dark mode, RTL support and ready-made dashboard and auth pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/datta-able-free-next-js-tailwind-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__datta-able-react-free-admin-template","t":"Datta Able React Free Admin Template","d":"A free React admin dashboard template from the Datta Able family with a modern dashboard, UI components and authentication pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/datta-able-react-free-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__devfolio","t":"DevFolio","d":"A modern one-page portfolio to show off a developer's experience, projects, and more. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/devfolio/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__devspace","t":"DevSpace","d":"A gorgeous personal blog template to share your thoughts and ideas. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/devspace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__docs","t":"Docs","d":"Create comprehensive product docs with this handy documentation template. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/docs/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__ecommerce-react-template","t":"Ecommerce React Template","d":"Turnkey online store with a React frontend, Node.js backend and PostgreSQL, including product listings, a blog CMS, Stripe payments, authentication and an admin dashboard. Original","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/ecommerce-react-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__file-manager","t":"File Manager","d":"React cloud file management dashboard template for SaaS and team tools, with file storage, sharing, and activity tracking.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/file-manager/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__fincash","t":"Fincash","d":"React fintech website template built for digital wallets, payment apps, and personal finance platforms, with a complete website structure and reusable components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/fincash/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__fintech","t":"FinTech","d":"A stylish landing page perfect for showcasing modern apps and services. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/fintech/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__flatlogic-one-react-template","t":"Flatlogic One React Template","d":"React admin template and theme with hundreds of components and pages for building dashboards and internal tools.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/flatlogic-one-react-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__flexy-free-next-js-admin-template-flexy-lite","t":"Flexy Free Next.js Admin Template (Flexy Lite)","d":"A free, sleek Next.js admin dashboard template built on Material UI and TypeScript, ready for personal or commercial use.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/flexy-free-next-js-admin-template-flexy-lite/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__fundex","t":"Fundex","d":"React finance dashboard template for personal finance tools, with charts and account/metrics views.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/fundex/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__gradient-able-reactjs-free-admin-template","t":"Gradient Able Reactjs Free Admin Template","d":"A free React admin dashboard template featuring a gradient-styled UI, charts and prebuilt pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/gradient-able-reactjs-free-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__gray","t":"Gray","d":"Showcase your product in style with this black and white landing page template. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/gray/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__greenhome","t":"Greenhome","d":"A real estate and property website template. Designed for property listings and real estate agencies to showcase homes.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/greenhome/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__hikari-saas-starter","t":"Hikari","d":"An open-source SaaS starter on Next.js with Stripe billing and Supabase auth and database. Uses the App Router and ships with subscription and account management flows.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/hikari-saas-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__horizon-ai-boilerplate-pro-shadcn-ui-nextjs","t":"Horizon AI Boilerplate PRO (shadcn/ui + NextJS)","d":"Premium @shadcn/ui + NextJS 14 AI SaaS boilerplate with Stripe payments, Supabase auth and OAuth, 100+ components and 20+ pages. This is the paid PRO upgrade of the free open-sourc","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/horizon-ai-boilerplate-pro-shadcn-ui-nextjs/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__horizon-ai-template","t":"Horizon AI Template","d":"OpenAI ChatGPT admin dashboard, chatbot and AI starter kit for React, NextJS and Chakra UI with 27+ ready-to-use pages. Premium one-time price observed around $79 (distinct from th","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/horizon-ai-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__horizon-ui-pro","t":"Horizon UI PRO","d":"Premium React admin dashboard template built on Chakra UI with 400+ components and 46+ fully coded pages (NFT, auth, profile, e-commerce). Tiered licensing: Personal $59, Teams $15","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/horizon-ui-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__ixartz-nextjs-boilerplate","t":"Next.js Boilerplate by ixartz","d":"A production-ready Next.js starter with TypeScript, Tailwind CSS, Drizzle ORM, and Clerk auth. Comes preconfigured with Vitest, Playwright, Storybook, and error monitoring.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/ixartz-nextjs-boilerplate/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__jetship-next-js-starter-kit-pro","t":"Jetship Next.js Starter Kit - PRO","d":"Next.js SaaS starter kit with Tailwind CSS, authentication, billing, and prebuilt SaaS pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/jetship-next-js-starter-kit-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__jobboard","t":"JobBoard","d":"A trendy job board template to kick-start your jobs directory business. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/jobboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__jobhire","t":"Jobhire","d":"A job board website template built with Next.js. Designed for listing job openings and recruiting/hiring platforms.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/jobhire/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__light-able-react-next-js-vue-angular-bootstrap-laravel-nodej","t":"Light Able (React, Next.js, Vue, Angular, Bootstrap, Laravel, NodeJS, Django, ASP, CakePHP, MVC5, Figma)","d":"A light, clean multi-framework admin dashboard template available across React, Next.js, Vue, Angular, Bootstrap, Laravel, Node.js, Django, ASP, CakePHP, MVC5 and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/light-able-react-next-js-vue-angular-bootstrap-laravel-nodej/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__light-blue-react","t":"Light Blue React","d":"React admin dashboard template with a distinctive semi-transparent design and a large set of prebuilt UI components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/light-blue-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__lume","t":"Lume","d":"SaaS landing page for an AI productivity / agent platform whose models understand context across conversations and automate workflows. Includes tiered pricing from free to enterpri","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/lume/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__magic-portfolio-for-next-js","t":"Magic Portfolio for Next.js","d":"A creative portfolio boilerplate featuring projects, blog, and gallery with SEO optimization.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/magic-portfolio-for-next-js/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__mantis-free-mui-react-admin-template","t":"Mantis Free MUI React Admin Template","d":"A free React admin dashboard built on Material-UI with a clean, modern design and a set of starter dashboard pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/mantis-free-mui-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__matdash-free-tailwind-next-js-admin-template","t":"MatDash Free Tailwind Next.js Admin Template","d":"Easy-to-use free Next.js + Tailwind admin dashboard template to build web apps faster.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/matdash-free-tailwind-next-js-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__matdash-free-tailwind-react-dashboard","t":"Matdash Free Tailwind React Dashboard","d":"High-quality free React + Tailwind dashboard template; modern, responsive, and SEO-friendly.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/matdash-free-tailwind-react-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__matdash-tailwind-next-js-admin-template-ai-prompt","t":"MatDash Tailwind Next.js Admin Template + AI-Prompt","d":"Powerful, developer-friendly Next.js + Tailwind admin template with AI-prompt support.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/matdash-tailwind-next-js-admin-template-ai-prompt/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__matdash-tailwind-react-admin-template-ai-prompt","t":"MatDash Tailwind React Admin Template + AI-Prompt","d":"Developer-friendly, multipurpose React + Tailwind admin panel template with AI-prompt support.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/matdash-tailwind-react-admin-template-ai-prompt/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__material-dashboard-3-pro-react","t":"Material Dashboard 3 PRO React","d":"Premium React + Material-UI admin dashboard with a large set of components, plugins and example pages for production admin apps.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/material-dashboard-3-pro-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__material-kit-2-pro-react","t":"Material Kit 2 PRO React","d":"Premium React + Material-UI design system for building marketing and landing pages, with extensive sections and example pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/material-kit-2-pro-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__material-kit-2-react","t":"Material Kit 2 React","d":"Free MUI design system for React with over 40 frontend elements and prebuilt blocks and example pages; includes Figma files.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/material-kit-2-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__material-tailwind-dashboard-react","t":"Material Tailwind Dashboard React","d":"A free admin dashboard built with React, Tailwind CSS, and the Material Tailwind component library. Open source with a paid Pro version.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/material-tailwind-dashboard-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materially-free-reactjs-admin-template","t":"Materially Free Reactjs Admin Template","d":"A free Material Design React admin dashboard template with analytics widgets and a clean responsive layout.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materially-free-reactjs-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materialm-free-next-js-tailwind-admin-template","t":"MaterialM Free Next.js Tailwind Admin Template","d":"A free Next.js 16 + Tailwind admin template based on ShadCN UI, offering a comprehensive set of dashboard pages and components for modern apps.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materialm-free-next-js-tailwind-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materialm-free-tailwind-react-admin-template","t":"MaterialM Free Tailwind React Admin Template","d":"A free React admin template built with Tailwind CSS, Flowbite React, TypeScript and ApexCharts, inspired by Google's Material Design 3 for a modern aesthetic.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materialm-free-tailwind-react-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materialm-tailwind-react-admin-template-pro","t":"MaterialM Tailwind React Admin Template (Pro)","d":"Premium React admin template built with Tailwind CSS and Material Design 3 styling, offering an extended set of dashboards, apps and components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materialm-tailwind-react-admin-template-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materio-mui-nextjs-admin-free","t":"Materio MUI NextJS Admin - Free","d":"Free Material UI Next.js admin dashboard template.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materio-mui-nextjs-admin-free/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__materio-mui-nextjs-admin-pro","t":"Materio MUI NextJS Admin - Pro","d":"Premium Material UI Next.js admin dashboard template with rich components and layouts.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/materio-mui-nextjs-admin-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__minimal-portfolio-template","t":"Minimal Portfolio Template","d":"An elegant, feature-rich portfolio website template with a minimalistic center-aligned design and tasteful microinteractions. Built with Next.js 15 and React 19.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/minimal-portfolio-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-free-mui-next-js-admin-template","t":"Modernize Free MUI Next Js Admin Template","d":"Easy-to-use free Next.js (MUI) admin dashboard template to build web apps faster.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-free-mui-next-js-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-free-react-mui-dashboard","t":"Modernize Free React MUI Dashboard","d":"Free React + MUI admin dashboard template with a professional layout and easy customization for faster development.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-free-react-mui-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-free-tailwind-next-js-admin-dashboard","t":"Modernize Free Tailwind Next.js Admin Dashboard","d":"Free Tailwind + Next.js admin dashboard template (free tier of Modernize Pro).","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-free-tailwind-next-js-admin-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-next-js-16-admin-dashboard","t":"Modernize Next Js 16 Admin Dashboard","d":"Powerful, developer-friendly Next.js 16 admin dashboard template for building web apps faster.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-next-js-16-admin-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-next-js-tailwind-dashboard-template","t":"Modernize Next.js Tailwind Dashboard Template","d":"A premium Tailwind + Next.js dashboard template with light and dark skins, well-designed dashboards, applications and pages, bundled with an AI prompt.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-next-js-tailwind-dashboard-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-react-mui-dashboard-theme","t":"Modernize React MUI Dashboard Theme","d":"Premium React + Material UI admin template; AdminMart's most powerful, developer-friendly MUI dashboard.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-react-mui-dashboard-theme/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__modernize-tailwind-and-next-js-dashboard-template-ai-prompt","t":"Modernize Tailwind and Next.js Dashboard Template + AI-Prompt","d":"Powerful Next.js admin panel built with Tailwind CSS, including AI-prompt support, to build apps faster.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/modernize-tailwind-and-next-js-dashboard-template-ai-prompt/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__monster-bootstrap-5-react-angular-vue-next-js-admin-template","t":"Monster Bootstrap 5, React, Angular, Vue & Next.js Admin Template (Pro)","d":"Premium multi-framework admin template (Bootstrap 5, React, Angular, Vue and Next.js) with a comprehensive set of dashboards, apps and UI components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/monster-bootstrap-5-react-angular-vue-next-js-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__morphic-ai-powered-answer-engine","t":"Morphic: AI-powered answer engine","d":"An AI-powered answer engine with generative UI capabilities.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/morphic-ai-powered-answer-engine/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__next-js-commerce-medusa-medusa-next-js-ecommerce-store-start","t":"Next.js Commerce (Medusa) - Medusa Next.js Ecommerce Store Starter","d":"An ecommerce store built with Next.js App Router, Medusa, and TailwindCSS, featuring Algolia search and Stripe checkout.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/next-js-commerce-medusa-medusa-next-js-ecommerce-store-start/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__next-js-contentlayer-blog-starter","t":"Next.js Contentlayer Blog Starter","d":"A blog template with Next.js 13 App Router, Contentlayer, Tailwind CSS, and dark mode.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/next-js-contentlayer-blog-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__next-shadcn-dashboard-starter","t":"Next.js Shadcn Dashboard Starter","d":"An open-source admin dashboard built on Next.js and shadcn/ui with charts, data tables, and forms. Includes Clerk auth and a feature-based folder structure.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/next-shadcn-dashboard-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__nextjs-material-dashboard-2-pro","t":"NextJS Material Dashboard 2 PRO","d":"Premium Next.js admin dashboard built on Material-UI with many components and example pages, optimized for server-rendered React apps.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/nextjs-material-dashboard-2-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__nextjs-saas-starter","t":"Next.js SaaS Starter","d":"An official SaaS starter from the Next.js team with authentication, Stripe subscriptions, and a logged-in dashboard. Uses Postgres with Drizzle ORM and shadcn/ui.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/nextjs-saas-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__nextly","t":"Nextly","d":"A free landing page template for startups and SaaS products. Ready-made marketing landing page sections built with Next.js.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/nextly/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__nextra-docs-starter-kit","t":"Nextra: Docs Starter Kit","d":"A simple, powerful, flexible markdown-powered docs site built with Next.js (Nextra).","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/nextra-docs-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__nodus-agent-template","t":"Nodus Agent Template","d":"A clean, minimal and modern template focused on startups building AI agents and AI chatbots. Built with Next.js 15, React 19 and Tailwind CSS 4.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/nodus-agent-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__notus-nextjs","t":"Notus NextJS","d":"Free Tailwind CSS and Next.js UI kit and admin template with over 100 individual components, plus presentation and dashboard example pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/notus-nextjs/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__notus-react","t":"Notus React","d":"Free Tailwind CSS and React UI kit and admin with over 100 prebuilt components and example pages for building modern web apps and dashboards.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/notus-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__open-pro","t":"Open PRO","d":"A dark and sleek SaaS website template to show off your startup or software. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/open-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__originix","t":"Originix","d":"React startup and business website template for growing companies, with pre-built sections for services, testimonials, blog, and lead capture.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/originix/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__payload-website-starter","t":"Payload Website Starter","d":"A production-ready website built with Payload, the Next.js-native CMS.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/payload-website-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__platforms-starter-kit","t":"Platforms Starter Kit","d":"Next.js template for building multi-tenant applications with the App Router and Redis.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/platforms-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__podcast","t":"Podcast","d":"A fabulous podcast website template for hosting and sharing your shows. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/podcast/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__polar-subscription","t":"Polar Subscription","d":"Next.js landing page and blog with Supabase auth/database and Polar subscription integration, plus SEO optimization.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/polar-subscription/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__postly","t":"Postly","d":"SaaS landing page for a social media management platform that schedules posts, manages multiple accounts and tracks analytics across major networks. Productivity-tool dashboard sty","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/postly/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__precedent-nextjs-starter","t":"Precedent","d":"An opinionated collection of components, hooks, and utilities for Next.js by Steven Tey. Bundles Tailwind CSS, Radix, Framer Motion, and Clerk auth to bootstrap projects fast.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/precedent-nextjs-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__primer","t":"Primer","d":"A production-ready info product template built with Tailwind CSS and Next.js, designed for stunning landing pages to sell your first course or ebook.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/primer/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__productized-agency-template","t":"Productized Agency Template","d":"Modern template for productized agencies to showcase services, packages, and pricing with a clean, conversion-focused design. Built with Next.js, React 19 and Tailwind CSS 4.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/productized-agency-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__quoty","t":"Quoty","d":"Impress your freelance clients with this elegant quote and invoice template. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/quoty/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__react-dashboard","t":"React Dashboard","d":"Free and open-source React admin dashboard template with a clean starter layout and core components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/react-dashboard/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__react-material-admin-full","t":"React Material Admin Full","d":"React admin and dashboard template built with Material-UI, with hundreds of ready-to-use components and pages. Originally a $99+ premium product, free since January 2025.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/react-material-admin-full/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__react-native-starter","t":"React Native Starter","d":"Cross-platform mobile application starter built with React Native, shipping with dozens of ready-to-use components, pages and theme support for iOS and Android.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/react-native-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__remix-dashboard-template","t":"Remix Dashboard Template","d":"A starter for building a dashboard application with Remix, including routing and a layout shell. Free and open source.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/remix-dashboard-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__remix-mdx-blog-starter","t":"Remix Blog Starter (MDX)","d":"A technical blogging starter for Remix and Tailwind CSS using MDX, with tags and customizable layouts. Free and open source.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/remix-mdx-blog-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__saasable-free-mui-react-ui-kit-with-dashboard-template","t":"SaasAble Free MUI React UI Kit with Dashboard Template","d":"A free Material-UI React UI kit that includes both landing-page components and a starter dashboard template for SaaS applications.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/saasable-free-mui-react-ui-kit-with-dashboard-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__saasable-mui-next-js-dashboard-template","t":"SaasAble MUI Next.js Dashboard Template","d":"A SaaS-focused dashboard template built with Next.js and Material-UI, geared toward launching SaaS apps with marketing landings and an admin dashboard.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/saasable-mui-next-js-dashboard-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__saasfly","t":"Saasfly","d":"A complete, open-source solution for building SaaS applications quickly and easily.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/saasfly/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__saasspace","t":"SaasSpace","d":"Modern React SaaS landing page template for software platforms and products.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/saasspace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__schedule-marketing-template","t":"Schedule Marketing Template","d":"An elegant marketing template for scheduling and booking appointments, featuring bento grids and a modern responsive design. Built with Next.js 15 and Tailwind CSS 4.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/schedule-marketing-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__shoplit-next-js-boilerplate","t":"Shoplit - Next.js Boilerplate","d":"A production-ready e-commerce admin panel built with ReUI components, Next.js and TypeScript, blending frontend and backend logic with PostgreSQL and Prisma ORM.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/shoplit-next-js-boilerplate/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__simple","t":"Simple","d":"A clean and simple website template for displaying any app or idea. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/simple/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__simplistic-saas-template","t":"Simplistic SaaS Template","d":"A SaaS template designed for AI and agentic startups, featuring bento grids with rich illustrations and microinteractions. Includes dark mode and mobile responsiveness.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/simplistic-saas-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__sing-app-react","t":"Sing App React","d":"React admin dashboard template with a clean, modern UI and many prebuilt pages for building business software applications.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sing-app-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__sneat-mui-nextjs-admin-pro","t":"Sneat MUI NextJS Admin - Pro","d":"Premium Material UI Next.js admin dashboard template with many layouts and pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sneat-mui-nextjs-admin-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__sofia-react-full","t":"Sofia React Full","d":"React admin template based on Bootstrap and Material-UI, combining both design systems into a single dashboard starter.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sofia-react-full/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__soft-ui-dashboard-pro-react","t":"Soft UI Dashboard PRO React","d":"Premium React + Material-UI admin dashboard in the Soft UI style, with 300+ components, multiple dashboards and example pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/soft-ui-dashboard-pro-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__soft-ui-dashboard-react","t":"Soft UI Dashboard React","d":"Free React + Material-UI admin template with over 70 individual elements and prebuilt design blocks to go from prototype to production.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/soft-ui-dashboard-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__sonae","t":"Sonae","d":"B2B SaaS marketing site for a multi-model AI agent platform aimed at developers, integrating providers like Claude, OpenAI and Gemini in one workspace to build, deploy and manage a","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sonae/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__spike-free-next-js-admin-template","t":"Spike Free Next.js Admin Template","d":"A free Next.js admin dashboard template from the Spike family with a clean layout and reusable components for quickly setting up an admin interface.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/spike-free-next-js-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__spike-free-react-tailwind-admin-template","t":"Spike Free React Tailwind Admin Template","d":"A free React + Tailwind CSS admin dashboard template with ready-to-use dashboards and UI elements. A solid starting point for building modern web applications.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/spike-free-react-tailwind-admin-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__spike-next-js-admin-template-pro","t":"Spike Next.js Admin Template (Pro)","d":"Premium Next.js admin dashboard template from the Spike line with a large library of dashboard pages, applications and components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/spike-next-js-admin-template-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__spike-react-tailwind-admin-template-pro","t":"Spike React Tailwind Admin Template (Pro)","d":"Premium React + Tailwind admin dashboard template with extensive pre-built dashboards, apps and UI components for production web applications.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/spike-react-tailwind-admin-template-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__spike-tailwind-admin-free","t":"Spike Free Tailwind Admin","d":"A free Tailwind CSS admin dashboard template with a clean layout, charts, and sample pages. Open source with a paid Pro version.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/spike-tailwind-admin-free/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__start-react-pro","t":"Start React Pro","d":"A React + Bootstrap 5 admin dashboard template with an extended aside panel, grid view and data tools, shipping 50+ customizable UI components and built with React Router, Redux an","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/start-react-pro/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__storely-next-js-template","t":"Storely - Next.js Template","d":"A shop client (storefront) app built with ReUI components, Next.js and Tailwind 4, backed by a PostgreSQL database and Prisma ORM for a complete e-commerce experience.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/storely-next-js-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__stripe-subscription-starter","t":"Stripe Subscription Starter","d":"An all-in-one subscription starter kit for high-performance SaaS applications, powered by Stripe, Supabase, and Vercel.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/stripe-subscription-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__summit-next-js-app-template","t":"Summit - Next.js App Template","d":"A Next.js 15 / React 19 app template built with Shadcn, ReUI and Tailwind, featuring a Reddit-style layout with sidebars, feed list, account management and messaging. Includes dark","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/summit-next-js-app-template/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__sveltekit-saas-kit","t":"SvelteKit SaaS Kit","d":"A free SaaS template built with SvelteKit, Supabase, and shadcn-svelte covering sign-up, OAuth, email verification, and account management. Open source.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sveltekit-saas-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__synth-ai","t":"Synth AI","d":"React AI website template for AI business assistant platforms, with features, pricing, and FAQ sections.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/synth-ai/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailadmin-html","t":"TailAdmin","d":"A free Tailwind CSS admin dashboard template in plain HTML with charts, forms, and pre-built application pages. Free with a paid Pro tier.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailadmin-html/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-ai-chat","t":"AI Chat","d":"An AI chat application UI from TailGrids built in React and Tailwind CSS. Provides a conversation interface with message threads and a composer.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-ai-chat/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-dashspace","t":"DashSpace","d":"An admin dashboard template from TailGrids built in React and Tailwind CSS. Provides charts, tables, and settings pages for building admin panels.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-dashspace/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-lytic","t":"Lytic","d":"An analytics dashboard template from TailGrids built in React and Tailwind CSS. Focuses on data visualization with charts and metric cards.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-lytic/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-neoxa","t":"Neoxa","d":"A SaaS dashboard template from TailGrids built in React and Tailwind CSS. Includes analytics widgets and management views for a back-office interface.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-neoxa/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-nexstudio","t":"NexStudio","d":"A creative agency marketing template from TailGrids built in React and Tailwind CSS. Includes portfolio, services, and contact sections for studio websites.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-nexstudio/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-saasly","t":"SaaSly","d":"A SaaS marketing template from TailGrids built in React and Tailwind CSS. Provides hero, feature, pricing, and testimonial sections for a software product site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-saasly/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-techself","t":"TechSelf","d":"An ecommerce storefront template from TailGrids built in React and Tailwind CSS. Includes product listings, cart, and checkout layouts for an online shop.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-techself/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailgrids-writemate-ai","t":"WriteMate AI","d":"An AI product marketing template from TailGrids built in React and Tailwind CSS. Designed to promote an AI writing tool with feature and pricing sections.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailgrids-writemate-ai/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwind-nextjs-starter-blog","t":"Tailwind Next.js Starter Blog","d":"A popular Next.js and Tailwind CSS blog template with MDX, tags, and syntax highlighting. Includes RSS, sitemap, and newsletter integration out of the box.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwind-nextjs-starter-blog/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-commit","t":"Commit","d":"An official Tailwind team changelog template built with Next.js and Tailwind CSS. Presents product updates in a timeline format suited to release notes.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-commit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-compass","t":"Compass","d":"An official Tailwind team template for selling an online course, built with Next.js and Tailwind CSS. Includes lesson listing, pricing, and a marketing landing page.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-compass/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-keynote","t":"Keynote","d":"An official Tailwind team conference template built with Next.js and Tailwind CSS. Includes schedule, speakers, and sponsor sections for an event site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-keynote/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-pocket","t":"Pocket","d":"An official Tailwind team app marketing template built with Next.js and Tailwind CSS. Showcases a mobile app with screenshots, features, and pricing.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-pocket/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-protocol","t":"Protocol","d":"An official Tailwind team API documentation template built with Next.js and Tailwind CSS. Provides a reference layout with code samples, endpoints, and search.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-protocol/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-radiant","t":"Radiant","d":"An official Tailwind team SaaS marketing template built with Next.js and Tailwind CSS. Features a polished multi-page marketing site with blog and pricing.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-radiant/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-salient","t":"Salient","d":"An official Tailwind team SaaS marketing landing page built with Next.js and Tailwind CSS. Includes a hero, feature grids, testimonials, and tiered pricing.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-salient/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-spotlight","t":"Spotlight","d":"An official Tailwind team personal website template built with Next.js and Tailwind CSS. Offers a clean layout for developers and writers with articles, projects, and an about page","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-spotlight/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-studio","t":"Studio","d":"An official Tailwind team agency and studio template built with Next.js and Tailwind CSS. Includes work, services, and case study pages for a creative agency site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-studio/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-syntax","t":"Syntax","d":"An official Tailwind team documentation template built with Next.js and Tailwind CSS. Designed for product or library docs with sidebar navigation and versioned content.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-syntax/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tailwindui-transmit","t":"Transmit","d":"An official Tailwind team podcast template built with Next.js and Tailwind CSS. Includes an episode list, persistent audio player, and show notes pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tailwindui-transmit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__talent","t":"Talent","d":"A stunning website template suitable for SaaS apps, recruiting networks, and more. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/talent/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tanstack-start-on-vercel","t":"TanStack Start on Vercel","d":"Deploy a full-stack app on Vercel with TanStack Start.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tanstack-start-on-vercel/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__the-caculator-cac-roi-benchmarking-tool","t":"The CACulator: CAC & ROI Benchmarking Tool","d":"Free, no-signup calculator that reveals your real Customer Acquisition Cost across channels and benchmarks it against global industry averages, with AI-powered recommendations. A c","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/the-caculator-cac-roi-benchmarking-tool/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__tidy","t":"Tidy","d":"An elegant website template to show off your company's corporate side. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/tidy/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-app-router-playground","t":"Next.js App Router Playground","d":"A reference app demonstrating many Next.js App Router features such as layouts, streaming, and server actions. Useful as a learning resource and pattern library.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-app-router-playground/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-blog-starter-kit","t":"Blog Starter Kit","d":"A statically generated blog using Next.js and Markdown. Includes post listing, dynamic routes, and a clean reading layout.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-blog-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-hume-evi-starter","t":"Hume AI Empathic Voice Interface Starter","d":"A voice chat starter using Hume AI's Empathic Voice Interface. Captures microphone input and renders real-time, emotionally aware spoken responses.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-hume-evi-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-image-gallery-starter","t":"Image Gallery Starter","d":"A photo gallery app built on Next.js and Vercel Blob storage. Demonstrates uploading, storing, and serving images with optimized loading.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-image-gallery-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-isr-blog-nextjs-wordpress","t":"ISR Blog with Next.js and WordPress","d":"A blog that pairs Next.js Incremental Static Regeneration with a WordPress backend as a headless CMS. Content updates publish without a full rebuild.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-isr-blog-nextjs-wordpress/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-liveblocks-starter-kit","t":"Liveblocks Starter Kit","d":"A starter for building real-time collaborative products with Liveblocks and Next.js. Provides presence, multiplayer rooms, and authentication scaffolding.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-liveblocks-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-morphic-ai-answer-engine","t":"Morphic AI Answer Engine","d":"An AI-powered answer engine with a generative UI, built on Next.js and the AI SDK. Returns sourced answers and renders interactive result components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-morphic-ai-answer-engine/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-nextjs-boilerplate","t":"Next.js Boilerplate","d":"Vercel's official minimal starting point for a Next.js app using the App Router. Ships with a clean project structure so you can deploy and start building in seconds.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-nextjs-boilerplate/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-nextjs-commerce","t":"Next.js Commerce","d":"Vercel's reference ecommerce storefront for headless Shopify, built with the App Router and React Server Components. Includes cart, search, and product pages tuned for performance.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-nextjs-commerce/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-nextjs-enterprise-boilerplate","t":"Next.js Enterprise Boilerplate","d":"An enterprise-grade Next.js starter wired with Tailwind CSS, Radix UI, TypeScript, and a full testing stack of Jest, Playwright, and Storybook. Aimed at maintainable, large-scale a","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-nextjs-enterprise-boilerplate/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-nextra-docs-starter","t":"Nextra Docs Starter Kit","d":"A markdown-powered documentation site built on Nextra and Next.js. Provides navigation, search, and theming out of the box for technical docs.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-nextra-docs-starter/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-portfolio-starter-kit","t":"Portfolio Starter Kit","d":"A minimal portfolio and blog scaffold powered by Next.js and Markdown. Includes a hero, about section, and MDX-based posts ready to customize.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-portfolio-starter-kit/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vercel-sanity-nextjs-personal-website","t":"Sanity + Next.js Personal Website","d":"A personal website template wired to Sanity with visual editing and live preview. Lets non-developers edit content with real-time collaboration.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vercel-sanity-nextjs-personal-website/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__vision-ui-dashboard-pro-react","t":"Vision UI Dashboard PRO React","d":"Premium dark-themed React + Material-UI admin dashboard with a modern, glassy design and prebuilt pages for analytics-style apps.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/vision-ui-dashboard-pro-react/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__waitlist","t":"Waitlist","d":"Start building your product's audience with this sleek coming-soon landing page. Available in HTML, Next.js, Vue, and Figma.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/waitlist/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:serafimcloud__your-next-store","t":"Your Next Store","d":"A modern, ultra-fast commerce storefront with Stripe as the backend, using shadcn UI components.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"serafimcloud","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/your-next-store/preview.jpg","pc":"serafimcloud"},{"id":"21st-template:sh20raj__cinematic-creative-studio-landing-page-next-js-gsap-video","t":"Cinematic Creative Studio Landing Page – Next.js + GSAP + Video","d":"A cinematic landing page template crafted for studios, creative agencies, and fashion-forward brands. With immersive video backgrounds, bold typography, and smooth GSAP animations,","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/user_2rTidf8ywiOqdoBn7DYG6caFaNJ/cinematic-creative-studio-landing-page-next-js-gsap-video/preview.avif","pc":"sh20raj"},{"id":"21st-template:sh20raj__gsap-cocktail-showcase","t":"GSAP-Powered Cocktail Showcase (React + Tailwind + Vite)","d":"Shake up your site with this sleek, interactive cocktail showcase template! Crafted with React, Tailwind CSS, and Vite, it features stunning GSAP-powered ScrollTrigger animations—i","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/user_2rTidf8ywiOqdoBn7DYG6caFaNJ/gsap-cocktail-showcase/preview.png","pc":"sh20raj"},{"id":"21st-template:sh20raj__gta-vi-cinematic-landing","t":"GTA VI — Cinematic Landing (React + Tailwind + GSAP)","d":"Recreate the viral GTA VI cinematic landing experience with this production-ready React template. Built with React + Vite, Tailwind CSS and GSAP (ScrollTrigger & SplitText), this t","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/user_2rTidf8ywiOqdoBn7DYG6caFaNJ/gta-vi-cinematic-landing/preview.png","pc":"sh20raj"},{"id":"21st-template:sh20raj__netflix-clone","t":"Netflix Clone","d":"Netflix Clone Template with Playable Trailers – Only $18 on 21st.dev!\n\nTransform your streaming platform vision into reality with this feature-rich Netflix clone template, designed","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/user_2rTidf8ywiOqdoBn7DYG6caFaNJ/netflix-clone/preview.png","pc":"sh20raj"},{"id":"21st-template:sh20raj__sales-landing-page-for-maximum-conversions","t":"Sales Landing Page for Maximum Conversions 🚀","d":"Sales Landing Page for Maximum Conversions 🚀\nLooking to boost your sales and capture more leads? This high-converting Sales Landing Page is designed to help you drive results quick","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"sh20raj","st":"indexed","pl":"https://cdn.21st.dev/user_2rTidf8ywiOqdoBn7DYG6caFaNJ/sales-landing-page-for-maximum-conversions/preview.png","pc":"sh20raj"},{"id":"21st-template:shadcnblockscom__aspect","t":"Aspect","d":"A corporate template built on shadcn/ui and Tailwind, perfect for creating a sophisticated marketing site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/aspect/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__echo","t":"Echo","d":"A personal portfolio template built on shadcn/ui and Tailwind, perfect for creating a stunning personal portfolio website.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/echo/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__hatch","t":"Hatch","d":"A minimal freelancer template built on shadcn/ui and Tailwind, perfect for a clean portfolio and freelance services site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/hatch/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__hive","t":"Hive","d":"An agency portfolio template built on shadcn/ui and Tailwind, perfect for creating a modern agency portfolio website.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/hive/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__kinto","t":"Kinto","d":"An elegant single product/app template built on shadcn/ui and Tailwind.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/kinto/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__lumen","t":"Lumen","d":"A luminescent, modern landing page template with all core pages and sections for a landing page or marketing website.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/lumen/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__meridian","t":"Meridian","d":"A premium developer-tools SaaS template built on shadcn/ui and Tailwind, featuring a signature intro animation and Fumadocs-powered MDX docs.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/meridian/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__metafi","t":"Metafi","d":"A modern template built on shadcn/ui and Tailwind, perfect for creating a sophisticated marketing site.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/metafi/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__plasma","t":"Plasma","d":"A developer SaaS/app template with landing, pricing, docs, changelog and download pages.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/plasma/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__scalar","t":"Scalar","d":"A modern product/app/SaaS template perfect for GitHub projects, open source projects or developer-focused SaaS.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/scalar/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__shadcnblockscom-charter","t":"Charter","d":"A fintech style app template built on Nextjs with shadcn/ui and Tailwind. Perfect for creating a modern and efficient startup or fintech marketing site.\n\nFeatures\nNextjs 15\nReact 1","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblockscom-charter/preview.png","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__shadcnblockscom-mainline","t":"Mainline","d":"Our most popular template. A minimal, yet unique, landing page template built with Nextjs 15, shadcn/ui and Tailwind 4. Contains all the core pages and sections for a landing page ","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblockscom-mainline/preview.png","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__shadcnblockscom-relative","t":"Relative","d":"A landing page template crafted with Next.js, shadcn/ui, and Tailwind. Perfect for quickly launching a marketing site with essential sections.\n\nFeatures\nNextjs 15\nReact 19\nTailwind","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblockscom-relative/preview.png","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__shadcnblockscom-streamline","t":"Streamline","d":"A sleek and modern landing page template crafted with Next.js, shadcn/ui, and Tailwind. Perfect for quickly establishing a professional marketing presence with essential sections.\n","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://cdn.21st.dev/user_2rguB0QxcSITG2Y7ivePFsKsUU6/shadcnblockscom-streamline/preview.png","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__sonic","t":"Sonic","d":"A modern single product landing page template perfect for selling or promoting a physical or digital product.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/sonic/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shadcnblockscom__zippay","t":"Zippay","d":"A modern fintech SaaS and marketing template with everything needed for a fintech SaaS and marketing website.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shadcnblockscom","st":"indexed","pl":"https://vucvdpamtrjkzmubwlts.supabase.co/storage/v1/object/public/templates/user_2nElBLvklOKlAURm6W1PTu6yYFh/zippay/preview.jpg","pc":"shadcnblockscom"},{"id":"21st-template:shuvamk__nuggets-design-agency-website","t":"Nuggets: Design Agency Website","d":"Nuggets is a premium Next.js template crafted for modern digital agencies. With its sleek design, smooth animations, and comprehensive features, it provides everything needed to es","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"shuvamk","st":"indexed","pl":"https://cdn.21st.dev/user_2vxWQUOBsE2vYFeIonhiuv7vdnV/nuggets-design-agency-website/preview.png","pc":"shuvamk"},{"id":"21st-template:skyNexalabs__skynexa-labs-premium-digital-agency-website-template","t":"SkyNexa Labs - Premium Digital Agency Website Template","d":"SkyNexa Labs is a modern, high-performance digital agency website template designed for agencies, startups, freelancers, and software companies. It features a sleek dark UI with ne","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"skyNexalabs","st":"indexed","pl":"https://cdn.21st.dev/user_3HJqGmK6DSv8HAqixZXEfUWtLC2/templates/skynexa-labs-premium-digital-agency-website-template/preview-1785597644878.png","pc":"skyNexalabs"},{"id":"21st-template:syedmoin-lab__portfolio","t":"Portfolio","d":"This is a portfolio website built with Next.js, TailwindCSS, and Spotify.","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"syedmoin-lab","st":"indexed","pl":"https://cdn.21st.dev/user_2wBWLRyg4nQ3hj519HWAP5K83Rf/portfolio/preview.png","pc":"syedmoin-lab"},{"id":"21st-template:tahababou12__hero-dashboard","t":"Hero Dashboard","d":"BragAI","k":"page","s":"21st","c":"pages/templates","g":"pages","a":"tahababou12","st":"indexed","pl":"https://cdn.21st.dev/user_30sOVVhunFp8Qizrzdg5PHw6VVD/hero-dashboard/preview.webp","pc":"tahababou12"},{"id":"21st-theme:12a8qnqwen__modern-minimal-remix-1783103238804","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"12a8qnqwen","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783103238804/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"12a8qnqwen"},{"id":"21st-theme:1553577844__azure-pro-remix-1783950931878","t":"Azure Pro remix","d":"Explore the Azure Pro remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"1553577844","st":"indexed","pl":"https://21st.dev/community/themes/azure-pro-remix-1783950931878/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"1553577844"},{"id":"21st-theme:1bertogit__aurora-circuit-1784930012228","t":"Aurora Circuit","d":"Explore the Aurora Circuit shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"1bertogit","st":"indexed","pl":"https://21st.dev/community/themes/aurora-circuit-1784930012228/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"1bertogit"},{"id":"21st-theme:2207377167__a-1784709575911","t":"a","d":"Explore the a shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"2207377167","st":"indexed","pl":"https://21st.dev/community/themes/a-1784709575911/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"2207377167"},{"id":"21st-theme:369cv__modern-minimal-remix-1783057707880","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"369cv","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783057707880/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"369cv"},{"id":"21st-theme:98precent__zachix-mono-remix-1783143905881","t":"zachix Mono remix","d":"Explore the zachix Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"98precent","st":"indexed","pl":"https://21st.dev/community/themes/zachix-mono-remix-1783143905881/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"98precent"},{"id":"21st-theme:99singh.jas__modern-minimal-remix-1783197535050","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"99singh.jas","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783197535050/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"99singh.jas"},{"id":"21st-theme:9fedya__asdasd-1783503193873","t":"asdasd","d":"Explore the asdasd shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"9fedya","st":"indexed","pl":"https://21st.dev/community/themes/asdasd-1783503193873/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"9fedya"},{"id":"21st-theme:a1024053774__claude-amber-remix-1783349761251","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"a1024053774","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1783349761251/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"a1024053774"},{"id":"21st-theme:abenezeryohannes__sage-garden-remix-1782568612746","t":"Sage Garden remix","d":"Explore the Sage Garden remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"abenezeryohannes","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden-remix-1782568612746/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"abenezeryohannes"},{"id":"21st-theme:abhishek_df9aa968__vercel-remix-1783170196339","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"abhishek_df9aa968","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783170196339/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"abhishek_df9aa968"},{"id":"21st-theme:aboudistyles__bain-remix-1783299176570","t":"Bain remix","d":"Explore the Bain remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aboudistyles","st":"indexed","pl":"https://21st.dev/community/themes/bain-remix-1783299176570/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aboudistyles"},{"id":"21st-theme:adeamos83__modern-minimal-remix-1784063199717","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"adeamos83","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1784063199717/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"adeamos83"},{"id":"21st-theme:ademcwealth__zen-linen-remix-1783982368796","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ademcwealth","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1783982368796/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ademcwealth"},{"id":"21st-theme:admin_5263efae__slate-minimal-1786709313092","t":"Slate Minimal","d":"Explore the Slate Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"admin_5263efae","st":"indexed","pl":"https://21st.dev/community/themes/slate-minimal-1786709313092/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"admin_5263efae"},{"id":"21st-theme:admndesignwork__layrrrd-1783321142317","t":"Layrrrd","d":"Explore the Layrrrd shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"admndesignwork","st":"indexed","pl":"https://21st.dev/community/themes/layrrrd-1783321142317/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"admndesignwork"},{"id":"21st-theme:aerrocnavi1990__ruby-sand-remix-1783388895953","t":"Ruby Sand remix","d":"Explore the Ruby Sand remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aerrocnavi1990","st":"indexed","pl":"https://21st.dev/community/themes/ruby-sand-remix-1783388895953/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aerrocnavi1990"},{"id":"21st-theme:aftaeva50__quantum-satis-clinic-1785363125507","t":"Quantum Satis Clinic","d":"Explore the Quantum Satis Clinic shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aftaeva50","st":"indexed","pl":"https://21st.dev/community/themes/quantum-satis-clinic-1785363125507/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aftaeva50"},{"id":"21st-theme:agasthydebnath__my-theme-1782634859195","t":"my theme","d":"Explore the my theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"agasthydebnath","st":"indexed","pl":"https://21st.dev/community/themes/my-theme-1782634859195/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"agasthydebnath"},{"id":"21st-theme:aguillarops__teste-1783910003947","t":"teste","d":"Explore the teste shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aguillarops","st":"indexed","pl":"https://21st.dev/community/themes/teste-1783910003947/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aguillarops"},{"id":"21st-theme:ahmedg3far44__devpilot-1785566711680","t":"DevPilot","d":"Explore the DevPilot shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ahmedg3far44","st":"indexed","pl":"https://21st.dev/community/themes/devpilot-1785566711680/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ahmedg3far44"},{"id":"21st-theme:ahndohun__baroworks-1783943524832","t":"baroworks","d":"Explore the baroworks shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ahndohun","st":"indexed","pl":"https://21st.dev/community/themes/baroworks-1783943524832/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ahndohun"},{"id":"21st-theme:aica.official.hackathon__modern-minimal-remix-1783839113458","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aica.official.hackathon","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783839113458/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aica.official.hackathon"},{"id":"21st-theme:aivcreative__limitless-1786940812008","t":"Limitless","d":"Explore the Limitless shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aivcreative","st":"indexed","pl":"https://21st.dev/community/themes/limitless-1786940812008/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aivcreative"},{"id":"21st-theme:akashskykumar1.ak__claude-remix-1783277993909","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"akashskykumar1.ak","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783277993909/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"akashskykumar1.ak"},{"id":"21st-theme:akshet.katyaal92__solar-dusk-remix-1784025024270","t":"Solar Dusk remix","d":"Explore the Solar Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"akshet.katyaal92","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk-remix-1784025024270/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"akshet.katyaal92"},{"id":"21st-theme:alanqoudif__amber-mono-linen-remix-1782690206437","t":"Amber Mono Linen remix","d":"Explore the Amber Mono Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alanqoudif","st":"indexed","pl":"https://21st.dev/community/themes/amber-mono-linen-remix-1782690206437/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alanqoudif"},{"id":"21st-theme:alexandredelaporte13__theme-landing-page-skeells-1782825709406","t":"Theme landing page SKEELLS","d":"Explore the Theme landing page SKEELLS shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alexandredelaporte13","st":"indexed","pl":"https://21st.dev/community/themes/theme-landing-page-skeells-1782825709406/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alexandredelaporte13"},{"id":"21st-theme:alexrbsn__kongquest-1782692227631","t":"KongQuest","d":"Explore the KongQuest shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alexrbsn","st":"indexed","pl":"https://21st.dev/community/themes/kongquest-1782692227631/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alexrbsn"},{"id":"21st-theme:alextanase2409__teal-mist-remix-1784021695296","t":"Teal Mist remix","d":"Explore the Teal Mist remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alextanase2409","st":"indexed","pl":"https://21st.dev/community/themes/teal-mist-remix-1784021695296/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alextanase2409"},{"id":"21st-theme:alextanase2409__teal-mist-remix-1784022639282","t":"Teal Mist remix","d":"Explore the Teal Mist remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alextanase2409","st":"indexed","pl":"https://21st.dev/community/themes/teal-mist-remix-1784022639282/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alextanase2409"},{"id":"21st-theme:ali.almusleh95__ali-1782592680521","t":"ali","d":"Explore the ali shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ali.almusleh95","st":"indexed","pl":"https://21st.dev/community/themes/ali-1782592680521/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ali.almusleh95"},{"id":"21st-theme:alsabdul22__supabase-remix-1782989583441","t":"Supabase remix","d":"Explore the Supabase remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"alsabdul22","st":"indexed","pl":"https://21st.dev/community/themes/supabase-remix-1782989583441/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"alsabdul22"},{"id":"21st-theme:amilejohn4__modern-minimal-remix-1783512145556","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amilejohn4","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783512145556/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amilejohn4"},{"id":"21st-theme:amina120807__mizen-health-companion-1783697869905","t":"Mizen Health Companion","d":"Explore the Mizen Health Companion shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amina120807","st":"indexed","pl":"https://21st.dev/community/themes/mizen-health-companion-1783697869905/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amina120807"},{"id":"21st-theme:amit.choudhari1109__amber-hearth-remix-1783098733496","t":"Amber Hearth remix","d":"Explore the Amber Hearth remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amit.choudhari1109","st":"indexed","pl":"https://21st.dev/community/themes/amber-hearth-remix-1783098733496/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amit.choudhari1109"},{"id":"21st-theme:amit.choudhari1109__vintage-paper-remix-remix-1783092787564","t":"Vintage Paper remix remix","d":"Explore the Vintage Paper remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amit.choudhari1109","st":"indexed","pl":"https://21st.dev/community/themes/vintage-paper-remix-remix-1783092787564/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amit.choudhari1109"},{"id":"21st-theme:amit.choudhari1109__vintage-paper-remix-remix-remix-1783092875547","t":"Vintage Paper remix remix remix","d":"Explore the Vintage Paper remix remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amit.choudhari1109","st":"indexed","pl":"https://21st.dev/community/themes/vintage-paper-remix-remix-remix-1783092875547/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amit.choudhari1109"},{"id":"21st-theme:amrozmabrouk__voyanta-1785514451459","t":"Voyanta","d":"Explore the Voyanta shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"amrozmabrouk","st":"indexed","pl":"https://21st.dev/community/themes/voyanta-1785514451459/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"amrozmabrouk"},{"id":"21st-theme:andre.procopio__claude-amber-remix-1782991623233","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"andre.procopio","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1782991623233/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"andre.procopio"},{"id":"21st-theme:andre.procopio__linen-stone-remix-1782992417442","t":"Linen Stone remix","d":"Explore the Linen Stone remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"andre.procopio","st":"indexed","pl":"https://21st.dev/community/themes/linen-stone-remix-1782992417442/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"andre.procopio"},{"id":"21st-theme:andresandrades1979__harbor-steel-remix-1784241843461","t":"Harbor Steel remix","d":"Explore the Harbor Steel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"andresandrades1979","st":"indexed","pl":"https://21st.dev/community/themes/harbor-steel-remix-1784241843461/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"andresandrades1979"},{"id":"21st-theme:anselmosouza083__claude-remix-1782959546329","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"anselmosouza083","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782959546329/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"anselmosouza083"},{"id":"21st-theme:antonio.victor6__claude-amber-remix-ibm-1783614901426","t":"Claude Amber remix IBM","d":"Explore the Claude Amber remix IBM shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"antonio.victor6","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-ibm-1783614901426/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"antonio.victor6"},{"id":"21st-theme:antonio.victor6__claude-amber-remix-ibm-1783615109416","t":"Claude Amber remix IBM","d":"Explore the Claude Amber remix IBM shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"antonio.victor6","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-ibm-1783615109416/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"antonio.victor6"},{"id":"21st-theme:anupammishra00011__solar-dusk-remix-1783490812667","t":"Solar Dusk remix","d":"Explore the Solar Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"anupammishra00011","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk-remix-1783490812667/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"anupammishra00011"},{"id":"21st-theme:aras_5ddc978f__orange-vivid-1786155970340","t":"Orange Vivid","d":"Explore the Orange Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aras_5ddc978f","st":"indexed","pl":"https://21st.dev/community/themes/orange-vivid-1786155970340/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aras_5ddc978f"},{"id":"21st-theme:arnoldmottamarketing__azure-mono-remix-1783461034817","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"arnoldmottamarketing","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1783461034817/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"arnoldmottamarketing"},{"id":"21st-theme:aryan5v__remix-1784079106402","t":"remix","d":"Explore the remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aryan5v","st":"indexed","pl":"https://21st.dev/community/themes/remix-1784079106402/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aryan5v"},{"id":"21st-theme:asalami560__lime-frost-remix-1783699092189","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"asalami560","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1783699092189/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"asalami560"},{"id":"21st-theme:asalami560__lime-frost-remix-1783699142369","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"asalami560","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1783699142369/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"asalami560"},{"id":"21st-theme:ash-ma__hand-tracking-ar-1783949513321","t":"Hand Tracking AR","d":"Explore the Hand Tracking AR shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ash-ma","st":"indexed","pl":"https://21st.dev/community/themes/hand-tracking-ar-1783949513321/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ash-ma"},{"id":"21st-theme:ashalzaryabb__azure-flow-remix-1783541397544","t":"Azure Flow remix","d":"Explore the Azure Flow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ashalzaryabb","st":"indexed","pl":"https://21st.dev/community/themes/azure-flow-remix-1783541397544/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ashalzaryabb"},{"id":"21st-theme:astewaymtadesse__mocha-mousse-remix-1783532194726","t":"Mocha Mousse remix","d":"Explore the Mocha Mousse remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"astewaymtadesse","st":"indexed","pl":"https://21st.dev/community/themes/mocha-mousse-remix-1783532194726/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"astewaymtadesse"},{"id":"21st-theme:astewaymtadesse__mocha-mousse-remix-1783532449864","t":"Mocha Mousse remix","d":"Explore the Mocha Mousse remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"astewaymtadesse","st":"indexed","pl":"https://21st.dev/community/themes/mocha-mousse-remix-1783532449864/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"astewaymtadesse"},{"id":"21st-theme:aston8427__bain-remix-1784217155186","t":"Bain remix","d":"Explore the Bain remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"aston8427","st":"indexed","pl":"https://21st.dev/community/themes/bain-remix-1784217155186/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"aston8427"},{"id":"21st-theme:avilaops__saudepet-1786918400371","t":"SaudePet","d":"Explore the SaudePet shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"avilaops","st":"indexed","pl":"https://21st.dev/community/themes/saudepet-1786918400371/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"avilaops"},{"id":"21st-theme:ax__claude-remix-1783499878411","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ax","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783499878411/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ax"},{"id":"21st-theme:badrabarry224__zen-linen-remix-1782944386969","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"badrabarry224","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1782944386969/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"badrabarry224"},{"id":"21st-theme:beko2210__lime-frost-remix-1782576440278","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"beko2210","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1782576440278/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"beko2210"},{"id":"21st-theme:ben_92bae8ec__432-editorial-1784021074047","t":"432 Editorial","d":"Explore the 432 Editorial shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ben_92bae8ec","st":"indexed","pl":"https://21st.dev/community/themes/432-editorial-1784021074047/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ben_92bae8ec"},{"id":"21st-theme:benevolentjoker__goth-1783287129360","t":"GOTH","d":"Explore the GOTH shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"benevolentjoker","st":"indexed","pl":"https://21st.dev/community/themes/goth-1783287129360/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"benevolentjoker"},{"id":"21st-theme:bestseal.owner__modern-minimal-remix-1783183133901","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bestseal.owner","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783183133901/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bestseal.owner"},{"id":"21st-theme:bhargav.bhalala1999__jewellary1-1782752462763","t":"jewellary1","d":"Explore the jewellary1 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bhargav.bhalala1999","st":"indexed","pl":"https://21st.dev/community/themes/jewellary1-1782752462763/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bhargav.bhalala1999"},{"id":"21st-theme:bhavanaks249__blue-1782743611893","t":"Blue","d":"Explore the Blue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bhavanaks249","st":"indexed","pl":"https://21st.dev/community/themes/blue-1782743611893/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bhavanaks249"},{"id":"21st-theme:bhavanaks249__blue-plus-jakarta-sans-lora-1782743911160","t":"Blue - Plus Jakarta Sans - Lora","d":"Explore the Blue - Plus Jakarta Sans - Lora shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bhavanaks249","st":"indexed","pl":"https://21st.dev/community/themes/blue-plus-jakarta-sans-lora-1782743911160/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bhavanaks249"},{"id":"21st-theme:bjoern.hoettges__cyberpunk-remix-1782568811828","t":"Cyberpunk remix","d":"Explore the Cyberpunk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bjoern.hoettges","st":"indexed","pl":"https://21st.dev/community/themes/cyberpunk-remix-1782568811828/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bjoern.hoettges"},{"id":"21st-theme:bob17040246__coral-blush-remix-1783526328082","t":"Coral Blush remix","d":"Explore the Coral Blush remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bob17040246","st":"indexed","pl":"https://21st.dev/community/themes/coral-blush-remix-1783526328082/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bob17040246"},{"id":"21st-theme:bonigodwin26__supabase-sage-remix-1782821824398","t":"Supabase Sage remix","d":"Explore the Supabase Sage remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bonigodwin26","st":"indexed","pl":"https://21st.dev/community/themes/supabase-sage-remix-1782821824398/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bonigodwin26"},{"id":"21st-theme:brandon_9a75d207__amber-minimal-remix-1783386814917","t":"Amber Minimal remix","d":"Explore the Amber Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"brandon_9a75d207","st":"indexed","pl":"https://21st.dev/community/themes/amber-minimal-remix-1783386814917/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"brandon_9a75d207"},{"id":"21st-theme:brianisatryhard__bain-remix-remix-1783431131935","t":"Bain remix remix","d":"Explore the Bain remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"brianisatryhard","st":"indexed","pl":"https://21st.dev/community/themes/bain-remix-remix-1783431131935/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"brianisatryhard"},{"id":"21st-theme:bricov2000__candyland-remix-1782815026252","t":"Candyland remix","d":"Explore the Candyland remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bricov2000","st":"indexed","pl":"https://21st.dev/community/themes/candyland-remix-1782815026252/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bricov2000"},{"id":"21st-theme:brijeshsp106__career-spring-1782838759430","t":"career spring","d":"Explore the career spring shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"brijeshsp106","st":"indexed","pl":"https://21st.dev/community/themes/career-spring-1782838759430/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"brijeshsp106"},{"id":"21st-theme:bringtojz__emerald-sun-remix-1783261719353","t":"Emerald Sun remix","d":"Explore the Emerald Sun remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"bringtojz","st":"indexed","pl":"https://21st.dev/community/themes/emerald-sun-remix-1783261719353/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"bringtojz"},{"id":"21st-theme:businessplus14758__amber-glow-remix-1782814330367","t":"Amber Glow remix","d":"Explore the Amber Glow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"businessplus14758","st":"indexed","pl":"https://21st.dev/community/themes/amber-glow-remix-1782814330367/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"businessplus14758"},{"id":"21st-theme:byjuananguirao__mooncalendar-theme-1784252439566","t":"MoonCalendar Theme","d":"Explore the MoonCalendar Theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"byjuananguirao","st":"indexed","pl":"https://21st.dev/community/themes/mooncalendar-theme-1784252439566/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"byjuananguirao"},{"id":"21st-theme:calogero.lamattina.k__lamattina-dev-cyan-slate-1786400641856","t":"lamattina-dev-cyan-slate","d":"Explore the lamattina-dev-cyan-slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"calogero.lamattina.k","st":"indexed","pl":"https://21st.dev/community/themes/lamattina-dev-cyan-slate-1786400641856/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"calogero.lamattina.k"},{"id":"21st-theme:camilapinillacastro__sage-garden-remix-1783212186075","t":"Sage Garden remix","d":"Explore the Sage Garden remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"camilapinillacastro","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden-remix-1783212186075/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"camilapinillacastro"},{"id":"21st-theme:carlapereira.art__mocha-mousse-remix-1784215221151","t":"Mocha Mousse remix","d":"Explore the Mocha Mousse remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"carlapereira.art","st":"indexed","pl":"https://21st.dev/community/themes/mocha-mousse-remix-1784215221151/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"carlapereira.art"},{"id":"21st-theme:cd-adam-cle__lime-frost-remix-1783676894143","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"cd-adam-cle","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1783676894143/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"cd-adam-cle"},{"id":"21st-theme:centricedge__hosting-1784894009005","t":"hosting","d":"Explore the hosting shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"centricedge","st":"indexed","pl":"https://21st.dev/community/themes/hosting-1784894009005/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"centricedge"},{"id":"21st-theme:centricedge__hosting2-1784896190310","t":"hosting2","d":"Explore the hosting2 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"centricedge","st":"indexed","pl":"https://21st.dev/community/themes/hosting2-1784896190310/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"centricedge"},{"id":"21st-theme:ceolifecenter__fato-ads-1786955863118","t":"Fato Ads","d":"Explore the Fato Ads shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ceolifecenter","st":"indexed","pl":"https://21st.dev/community/themes/fato-ads-1786955863118/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ceolifecenter"},{"id":"21st-theme:chaseyork88__placeholder-1784665437509","t":"Placeholder","d":"Explore the Placeholder shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"chaseyork88","st":"indexed","pl":"https://21st.dev/community/themes/placeholder-1784665437509/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"chaseyork88"},{"id":"21st-theme:christianinostroza__supabase-remix-1782943502908","t":"Supabase remix","d":"Explore the Supabase remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"christianinostroza","st":"indexed","pl":"https://21st.dev/community/themes/supabase-remix-1782943502908/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"christianinostroza"},{"id":"21st-theme:citizenshipcc__citizenship-1784343843342","t":"CitizenShip","d":"Explore the CitizenShip shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"citizenshipcc","st":"indexed","pl":"https://21st.dev/community/themes/citizenship-1784343843342/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"citizenshipcc"},{"id":"21st-theme:cjaruso2354-afk__lime-frost-remix-1782899639956","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"cjaruso2354-afk","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1782899639956/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"cjaruso2354-afk"},{"id":"21st-theme:cjaruso2354-afk__neo-brutalism-remix-1782899809823","t":"Neo Brutalism remix","d":"Explore the Neo Brutalism remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"cjaruso2354-afk","st":"indexed","pl":"https://21st.dev/community/themes/neo-brutalism-remix-1782899809823/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"cjaruso2354-afk"},{"id":"21st-theme:cminsoo618__modern-minimal-remix-1782875047613","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"cminsoo618","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782875047613/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"cminsoo618"},{"id":"21st-theme:community__33d-brand-1784378483810","t":"33D Brand","d":"Explore the 33D Brand shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/33d-brand-1784378483810/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:community__baroworks-1783929815612","t":"baroworks","d":"Explore the baroworks shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/baroworks-1783929815612/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:community__dealer-brand-audit-1784378493186","t":"Dealer Brand Audit","d":"Explore the Dealer Brand Audit shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/dealer-brand-audit-1784378493186/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:community__pink-soft-1786164768271","t":"Pink Soft","d":"Explore the Pink Soft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/pink-soft-1786164768271/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:community__portfolio-theme-1786131704948","t":"Portfolio Theme","d":"Explore the Portfolio Theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/portfolio-theme-1786131704948/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:community__promotor-wow-1784911966303","t":"ProMotor Wow","d":"Explore the ProMotor Wow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"community","st":"indexed","pl":"https://21st.dev/community/themes/promotor-wow-1784911966303/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"community"},{"id":"21st-theme:connormuscat2__bdo-1784288545632","t":"BDO","d":"Explore the BDO shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"connormuscat2","st":"indexed","pl":"https://21st.dev/community/themes/bdo-1784288545632/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"connormuscat2"},{"id":"21st-theme:contact.sametkapucuoglu__besk-proof-board-1786327298204","t":"BESK Proof Board","d":"Explore the BESK Proof Board shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"contact.sametkapucuoglu","st":"indexed","pl":"https://21st.dev/community/themes/besk-proof-board-1786327298204/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"contact.sametkapucuoglu"},{"id":"21st-theme:contact_36e39b35__morgen-capital-theme-1786482074159","t":"Morgen Capital Theme","d":"Explore the Morgen Capital Theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"contact_36e39b35","st":"indexed","pl":"https://21st.dev/community/themes/morgen-capital-theme-1786482074159/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"contact_36e39b35"},{"id":"21st-theme:contact_c98a6bef__oleera-1786554308314","t":"Oleera","d":"Explore the Oleera shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"contact_c98a6bef","st":"indexed","pl":"https://21st.dev/community/themes/oleera-1786554308314/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"contact_c98a6bef"},{"id":"21st-theme:contact_d74a734b__rising-rocket-1785591647407","t":"Rising Rocket","d":"Explore the Rising Rocket shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"contact_d74a734b","st":"indexed","pl":"https://21st.dev/community/themes/rising-rocket-1785591647407/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"contact_d74a734b"},{"id":"21st-theme:creative.blex__blexthema01-1783468425715","t":"Blexthema01","d":"Explore the Blexthema01 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"creative.blex","st":"indexed","pl":"https://21st.dev/community/themes/blexthema01-1783468425715/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"creative.blex"},{"id":"21st-theme:czq229134474__modern-minimal-remix-1782705132194","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"czq229134474","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782705132194/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"czq229134474"},{"id":"21st-theme:damanhduy2111__ok-1784607188438","t":"ok","d":"Explore the ok shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"damanhduy2111","st":"indexed","pl":"https://21st.dev/community/themes/ok-1784607188438/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"damanhduy2111"},{"id":"21st-theme:damanhduy2111__slate-minimal-1784598526079","t":"Slate Minimal","d":"Explore the Slate Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"damanhduy2111","st":"indexed","pl":"https://21st.dev/community/themes/slate-minimal-1784598526079/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"damanhduy2111"},{"id":"21st-theme:danielbrownlaw__orange-soft-1786455326423","t":"Orange Soft","d":"Explore the Orange Soft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"danielbrownlaw","st":"indexed","pl":"https://21st.dev/community/themes/orange-soft-1786455326423/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"danielbrownlaw"},{"id":"21st-theme:danielgregersen12__claude-remix-1783539808246","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"danielgregersen12","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783539808246/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"danielgregersen12"},{"id":"21st-theme:dasaassistant__claude-amber-remix-1783552383369","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dasaassistant","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1783552383369/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dasaassistant"},{"id":"21st-theme:datachaihaobo__caffeine-remix-1782989728069","t":"Caffeine remix","d":"Explore the Caffeine remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"datachaihaobo","st":"indexed","pl":"https://21st.dev/community/themes/caffeine-remix-1782989728069/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"datachaihaobo"},{"id":"21st-theme:dbarriosbarba2028__every-story-matters-1785684650986","t":"Every Story Matters","d":"Explore the Every Story Matters shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dbarriosbarba2028","st":"indexed","pl":"https://21st.dev/community/themes/every-story-matters-1785684650986/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dbarriosbarba2028"},{"id":"21st-theme:dbarriosbarba2028__everystorymatters-1785695318538","t":"EveryStoryMatters","d":"Explore the EveryStoryMatters shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dbarriosbarba2028","st":"indexed","pl":"https://21st.dev/community/themes/everystorymatters-1785695318538/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dbarriosbarba2028"},{"id":"21st-theme:den.crypto.001__mint-signal-remix-1783098951929","t":"Mint Signal remix","d":"Explore the Mint Signal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"den.crypto.001","st":"indexed","pl":"https://21st.dev/community/themes/mint-signal-remix-1783098951929/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"den.crypto.001"},{"id":"21st-theme:design_198ffe2e__nexa-1784864348223","t":"NEXA","d":"Explore the NEXA shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"design_198ffe2e","st":"indexed","pl":"https://21st.dev/community/themes/nexa-1784864348223/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"design_198ffe2e"},{"id":"21st-theme:detachedparent-max__bubblegum-remix-1783985458444","t":"Bubblegum remix","d":"Explore the Bubblegum remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detachedparent-max","st":"indexed","pl":"https://21st.dev/community/themes/bubblegum-remix-1783985458444/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detachedparent-max"},{"id":"21st-theme:detachedparent-max__bubblegum-remix-remix-1784008689354","t":"Bubblegum remix remix","d":"Explore the Bubblegum remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detachedparent-max","st":"indexed","pl":"https://21st.dev/community/themes/bubblegum-remix-remix-1784008689354/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detachedparent-max"},{"id":"21st-theme:detachedparent-max__indigo-frost-remix-1783987432067","t":"Indigo Frost remix","d":"Explore the Indigo Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detachedparent-max","st":"indexed","pl":"https://21st.dev/community/themes/indigo-frost-remix-1783987432067/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detachedparent-max"},{"id":"21st-theme:detachedparent-max__solar-dusk-re-remix-1783990450958","t":"Solar Dusk re remix","d":"Explore the Solar Dusk re remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detachedparent-max","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk-re-remix-1783990450958/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detachedparent-max"},{"id":"21st-theme:detachedparent-max__zen-linen-remix-1784120258554","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detachedparent-max","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1784120258554/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detachedparent-max"},{"id":"21st-theme:detoritsmash__vercel-remix-1783754624889","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"detoritsmash","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783754624889/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"detoritsmash"},{"id":"21st-theme:dev_e31fc7ba__v1-bdj-1785369007570","t":"v1-bdj","d":"Explore the v1-bdj shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dev_e31fc7ba","st":"indexed","pl":"https://21st.dev/community/themes/v1-bdj-1785369007570/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dev_e31fc7ba"},{"id":"21st-theme:developer_9d6ddb41__digitomics-1783410756093","t":"Digitomics","d":"Explore the Digitomics shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"developer_9d6ddb41","st":"indexed","pl":"https://21st.dev/community/themes/digitomics-1783410756093/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"developer_9d6ddb41"},{"id":"21st-theme:developer_9d6ddb41__digitomics-remix-1783413124616","t":"Digitomics remix","d":"Explore the Digitomics remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"developer_9d6ddb41","st":"indexed","pl":"https://21st.dev/community/themes/digitomics-remix-1783413124616/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"developer_9d6ddb41"},{"id":"21st-theme:dimitri__coral-teal-remix-1784134671980","t":"Coral Teal remix","d":"Explore the Coral Teal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dimitri","st":"indexed","pl":"https://21st.dev/community/themes/coral-teal-remix-1784134671980/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dimitri"},{"id":"21st-theme:dimitrii.maksimenko__azure-mist-remix-1783065951126","t":"Azure Mist remix","d":"Explore the Azure Mist remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dimitrii.maksimenko","st":"indexed","pl":"https://21st.dev/community/themes/azure-mist-remix-1783065951126/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dimitrii.maksimenko"},{"id":"21st-theme:djuny.alain__honey-sandstone-remix-1783833872987","t":"Honey Sandstone remix","d":"Explore the Honey Sandstone remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"djuny.alain","st":"indexed","pl":"https://21st.dev/community/themes/honey-sandstone-remix-1783833872987/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"djuny.alain"},{"id":"21st-theme:dontsmile52__sunset-horizon-1783898686915","t":"Sunset Horizon","d":"Explore the Sunset Horizon shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"dontsmile52","st":"indexed","pl":"https://21st.dev/community/themes/sunset-horizon-1783898686915/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"dontsmile52"},{"id":"21st-theme:eagavrilova018__indigo-mono-remix-1782894658983","t":"Indigo Mono remix","d":"Explore the Indigo Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"eagavrilova018","st":"indexed","pl":"https://21st.dev/community/themes/indigo-mono-remix-1782894658983/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"eagavrilova018"},{"id":"21st-theme:edipdev__pink-vivid-1786269003824","t":"Pink Vivid","d":"Explore the Pink Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"edipdev","st":"indexed","pl":"https://21st.dev/community/themes/pink-vivid-1786269003824/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"edipdev"},{"id":"21st-theme:edwuard2213__claude-azure-remix-1782825469780","t":"Claude Azure remix","d":"Explore the Claude Azure remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"edwuard2213","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure-remix-1782825469780/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"edwuard2213"},{"id":"21st-theme:eliaszaki__classic-blue-and-dark-theme-1785167003696","t":"Classic blue and dark theme","d":"Explore the Classic blue and dark theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"eliaszaki","st":"indexed","pl":"https://21st.dev/community/themes/classic-blue-and-dark-theme-1785167003696/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"eliaszaki"},{"id":"21st-theme:emrecanyerden12__azure-mono-remix-1783443604133","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"emrecanyerden12","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1783443604133/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"emrecanyerden12"},{"id":"21st-theme:estermarcelinavitoriabarros-code__prado-almeida-site-1786108789145","t":"Prado Almeida site","d":"Explore the Prado Almeida site shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"estermarcelinavitoriabarros-code","st":"indexed","pl":"https://21st.dev/community/themes/prado-almeida-site-1786108789145/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"estermarcelinavitoriabarros-code"},{"id":"21st-theme:ey.lee__respec-theme-1785489378764","t":"Respec theme","d":"Explore the Respec theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ey.lee","st":"indexed","pl":"https://21st.dev/community/themes/respec-theme-1785489378764/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ey.lee"},{"id":"21st-theme:ferreiraferreira14__ninja-1786814780438","t":"Ninja","d":"Explore the Ninja shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ferreiraferreira14","st":"indexed","pl":"https://21st.dev/community/themes/ninja-1786814780438/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ferreiraferreira14"},{"id":"21st-theme:friendsamly__modern-minimal-remix-remix-1783598162996","t":"Modern Minimal remix remix","d":"Explore the Modern Minimal remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"friendsamly","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-remix-1783598162996/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"friendsamly"},{"id":"21st-theme:fusshenry__pride-advice-1783492394446","t":"Pride Advice","d":"Explore the Pride Advice shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"fusshenry","st":"indexed","pl":"https://21st.dev/community/themes/pride-advice-1783492394446/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"fusshenry"},{"id":"21st-theme:gabriel7000rodrigues__midnight-1784742173266","t":"Midnight v2","d":"Explore the Midnight v2 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gabriel7000rodrigues","st":"indexed","pl":"https://21st.dev/community/themes/midnight-1784742173266/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gabriel7000rodrigues"},{"id":"21st-theme:gabrielgacutan3__claude-amber-remix-1784111926864","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gabrielgacutan3","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1784111926864/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gabrielgacutan3"},{"id":"21st-theme:gabrielsarayva1910__vercel-remix-1783529973801","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gabrielsarayva1910","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783529973801/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gabrielsarayva1910"},{"id":"21st-theme:gauranshrajput27__pastel-dreams-remix-1782847833917","t":"Pastel Dreams remix","d":"Explore the Pastel Dreams remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gauranshrajput27","st":"indexed","pl":"https://21st.dev/community/themes/pastel-dreams-remix-1782847833917/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gauranshrajput27"},{"id":"21st-theme:gean.malaquias_70505cac__orange-vivid-1786975625618","t":"Orange Vivid","d":"Explore the Orange Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gean.malaquias_70505cac","st":"indexed","pl":"https://21st.dev/community/themes/orange-vivid-1786975625618/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gean.malaquias_70505cac"},{"id":"21st-theme:genic68503__yomedic-1782740209088","t":"yomedic","d":"Explore the yomedic shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"genic68503","st":"indexed","pl":"https://21st.dev/community/themes/yomedic-1782740209088/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"genic68503"},{"id":"21st-theme:george_7ec2d912__sky-vivid-1786657334157","t":"Sky Vivid","d":"Explore the Sky Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"george_7ec2d912","st":"indexed","pl":"https://21st.dev/community/themes/sky-vivid-1786657334157/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"george_7ec2d912"},{"id":"21st-theme:ginowhixd__claude-amber-remix-1783034863370","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ginowhixd","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1783034863370/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ginowhixd"},{"id":"21st-theme:ginowhixd__vercel-remix-gra-1783074281391","t":"Vercel remix gra","d":"Explore the Vercel remix gra shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ginowhixd","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-gra-1783074281391/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ginowhixd"},{"id":"21st-theme:gitworkdone__dial-daddy-club-1784686129831","t":"Dial Daddy Club","d":"Explore the Dial Daddy Club shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gitworkdone","st":"indexed","pl":"https://21st.dev/community/themes/dial-daddy-club-1784686129831/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gitworkdone"},{"id":"21st-theme:gozustrike__primer-tema-1782918709525","t":"primer tema","d":"Explore the primer tema shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gozustrike","st":"indexed","pl":"https://21st.dev/community/themes/primer-tema-1782918709525/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gozustrike"},{"id":"21st-theme:gozustrike__red-theme-1782885994092","t":"red theme","d":"Explore the red theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gozustrike","st":"indexed","pl":"https://21st.dev/community/themes/red-theme-1782885994092/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gozustrike"},{"id":"21st-theme:gustavo.raimundo__neon-cyber-remix-1784052082337","t":"Neon Cyber remix","d":"Explore the Neon Cyber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gustavo.raimundo","st":"indexed","pl":"https://21st.dev/community/themes/neon-cyber-remix-1784052082337/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gustavo.raimundo"},{"id":"21st-theme:gustavo_bb9bd13d__azure-mono-remix-1784052943785","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"gustavo_bb9bd13d","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1784052943785/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"gustavo_bb9bd13d"},{"id":"21st-theme:guyunfeng1220__sky-vivid-1785401618119","t":"Sky Vivid","d":"Explore the Sky Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"guyunfeng1220","st":"indexed","pl":"https://21st.dev/community/themes/sky-vivid-1785401618119/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"guyunfeng1220"},{"id":"21st-theme:hacigo34__harbor-steel-remix-1784058014384","t":"Harbor Steel remix","d":"Explore the Harbor Steel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hacigo34","st":"indexed","pl":"https://21st.dev/community/themes/harbor-steel-remix-1784058014384/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hacigo34"},{"id":"21st-theme:hacigo34__harbor-steel-remix-remix-1784058099611","t":"Harbor Steel remix remix","d":"Explore the Harbor Steel remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hacigo34","st":"indexed","pl":"https://21st.dev/community/themes/harbor-steel-remix-remix-1784058099611/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hacigo34"},{"id":"21st-theme:hajdeosk__zen-linen-remix-1782605645890","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hajdeosk","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1782605645890/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hajdeosk"},{"id":"21st-theme:halilbrahimkaynak53__borsan-1784276577239","t":"borsan","d":"Explore the borsan shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"halilbrahimkaynak53","st":"indexed","pl":"https://21st.dev/community/themes/borsan-1784276577239/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"halilbrahimkaynak53"},{"id":"21st-theme:hanjun7__solar-dusk-remix-1782980951302","t":"Solar Dusk remix","d":"Explore the Solar Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hanjun7","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk-remix-1782980951302/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hanjun7"},{"id":"21st-theme:hanukong0218__claude-azure-remix-1782798098888","t":"Claude Azure remix","d":"Explore the Claude Azure remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hanukong0218","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure-remix-1782798098888/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hanukong0218"},{"id":"21st-theme:hargun.dhutt__taste-in-motion-colour-slam-1784579653373","t":"Taste in Motion Colour Slam","d":"Explore the Taste in Motion Colour Slam shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hargun.dhutt","st":"indexed","pl":"https://21st.dev/community/themes/taste-in-motion-colour-slam-1784579653373/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hargun.dhutt"},{"id":"21st-theme:harryrobertl__neo-brutalism-remix-1783358263714","t":"Neo Brutalism remix","d":"Explore the Neo Brutalism remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"harryrobertl","st":"indexed","pl":"https://21st.dev/community/themes/neo-brutalism-remix-1783358263714/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"harryrobertl"},{"id":"21st-theme:hazimmohamed950__graphite-mono-remix-1783078591439","t":"Graphite Mono remix","d":"Explore the Graphite Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hazimmohamed950","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono-remix-1783078591439/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hazimmohamed950"},{"id":"21st-theme:hectoryb9__claude-remix-1784244656123","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hectoryb9","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1784244656123/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hectoryb9"},{"id":"21st-theme:hennyp112__rose-quartz-remix-1783974221288","t":"Rose Quartz remix","d":"Explore the Rose Quartz remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hennyp112","st":"indexed","pl":"https://21st.dev/community/themes/rose-quartz-remix-1783974221288/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hennyp112"},{"id":"21st-theme:hk20141947__candyland-remix-1782748513826","t":"Candyland remix","d":"Explore the Candyland remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hk20141947","st":"indexed","pl":"https://21st.dev/community/themes/candyland-remix-1782748513826/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hk20141947"},{"id":"21st-theme:hollyorifndj__vercel-remix-1782909113391","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hollyorifndj","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1782909113391/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hollyorifndj"},{"id":"21st-theme:hruby__modern-minimal-remix-1782703474048","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hruby","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782703474048/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hruby"},{"id":"21st-theme:hsu-hlaing-htet__rose-1782570319670","t":"Rose","d":"Explore the Rose shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hsu-hlaing-htet","st":"indexed","pl":"https://21st.dev/community/themes/rose-1782570319670/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hsu-hlaing-htet"},{"id":"21st-theme:hsu-hlaing-htet__rose-1782570553735","t":"Rose","d":"Explore the Rose shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hsu-hlaing-htet","st":"indexed","pl":"https://21st.dev/community/themes/rose-1782570553735/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hsu-hlaing-htet"},{"id":"21st-theme:hunxoo__ikun-1783132773426","t":"ikun","d":"Explore the ikun shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hunxoo","st":"indexed","pl":"https://21st.dev/community/themes/ikun-1783132773426/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hunxoo"},{"id":"21st-theme:hunxoo__ikun-remix-1783132983345","t":"ikun remix","d":"Explore the ikun remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"hunxoo","st":"indexed","pl":"https://21st.dev/community/themes/ikun-remix-1783132983345/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"hunxoo"},{"id":"21st-theme:imenarwigema__loanstack-1782938858891","t":"Loanstack","d":"Explore the Loanstack shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"imenarwigema","st":"indexed","pl":"https://21st.dev/community/themes/loanstack-1782938858891/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"imenarwigema"},{"id":"21st-theme:ing.josephcapellan__modern-minimal-remix-1783523082923","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ing.josephcapellan","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783523082923/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ing.josephcapellan"},{"id":"21st-theme:isuikinho__cobalt-mist-remix-1783532608225","t":"Cobalt Mist remix","d":"Explore the Cobalt Mist remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"isuikinho","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-mist-remix-1783532608225/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"isuikinho"},{"id":"21st-theme:itzme-dark__indigo-harbor-remix-1782680076523","t":"Indigo Harbor remix","d":"Explore the Indigo Harbor remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"itzme-dark","st":"indexed","pl":"https://21st.dev/community/themes/indigo-harbor-remix-1782680076523/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"itzme-dark"},{"id":"21st-theme:jaanigambler03__my-gonm-1784115607108","t":"my gonm","d":"Explore the my gonm shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jaanigambler03","st":"indexed","pl":"https://21st.dev/community/themes/my-gonm-1784115607108/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jaanigambler03"},{"id":"21st-theme:jaivalsoni1256__k-1782903660503","t":"k","d":"Explore the k shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jaivalsoni1256","st":"indexed","pl":"https://21st.dev/community/themes/k-1782903660503/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jaivalsoni1256"},{"id":"21st-theme:jandersonalmeida__med-faturas-1783563490839","t":"Med Faturas","d":"Explore the Med Faturas shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jandersonalmeida","st":"indexed","pl":"https://21st.dev/community/themes/med-faturas-1783563490839/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jandersonalmeida"},{"id":"21st-theme:jannoxpesimista__modern-minimal-remix-1784058811121","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jannoxpesimista","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1784058811121/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jannoxpesimista"},{"id":"21st-theme:jc.cross8__candyland-remix-1782952892140","t":"Candyland remix","d":"Explore the Candyland remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jc.cross8","st":"indexed","pl":"https://21st.dev/community/themes/candyland-remix-1782952892140/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jc.cross8"},{"id":"21st-theme:jeren4974__template-1783705022709","t":"template","d":"Explore the template shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jeren4974","st":"indexed","pl":"https://21st.dev/community/themes/template-1783705022709/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jeren4974"},{"id":"21st-theme:jesse_d4a3cf52__darkmatter-remix-1783597085496","t":"Darkmatter remix","d":"Explore the Darkmatter remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jesse_d4a3cf52","st":"indexed","pl":"https://21st.dev/community/themes/darkmatter-remix-1783597085496/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jesse_d4a3cf52"},{"id":"21st-theme:jessian661__gatherly-1782634948332","t":"gatherly","d":"Explore the gatherly shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jessian661","st":"indexed","pl":"https://21st.dev/community/themes/gatherly-1782634948332/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jessian661"},{"id":"21st-theme:jh__lime-frost-remix-1784105619851","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jh","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1784105619851/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jh"},{"id":"21st-theme:jhurtado0598__zucar-1784774309407","t":"zucar","d":"Explore the zucar shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jhurtado0598","st":"indexed","pl":"https://21st.dev/community/themes/zucar-1784774309407/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jhurtado0598"},{"id":"21st-theme:jithendra-varma__vintage-1782743587380","t":"vintage","d":"Explore the vintage shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jithendra-varma","st":"indexed","pl":"https://21st.dev/community/themes/vintage-1782743587380/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jithendra-varma"},{"id":"21st-theme:jl.uli1996__northern-lights-remix-1782931519032","t":"Northern Lights remix","d":"Explore the Northern Lights remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jl.uli1996","st":"indexed","pl":"https://21st.dev/community/themes/northern-lights-remix-1782931519032/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jl.uli1996"},{"id":"21st-theme:joantsayem__emerald-sun-remix-1783211310807","t":"Emerald Sun remix","d":"Explore the Emerald Sun remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"joantsayem","st":"indexed","pl":"https://21st.dev/community/themes/emerald-sun-remix-1783211310807/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"joantsayem"},{"id":"21st-theme:joaopp05__new-1783614097865","t":"new","d":"Explore the new shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"joaopp05","st":"indexed","pl":"https://21st.dev/community/themes/new-1783614097865/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"joaopp05"},{"id":"21st-theme:joaopp05__new-1783614356324","t":"new","d":"Explore the new shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"joaopp05","st":"indexed","pl":"https://21st.dev/community/themes/new-1783614356324/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"joaopp05"},{"id":"21st-theme:jobbaa__black-an-dwhite-1783494082115","t":"Black an dwhite","d":"Explore the Black an dwhite shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jobbaa","st":"indexed","pl":"https://21st.dev/community/themes/black-an-dwhite-1783494082115/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jobbaa"},{"id":"21st-theme:jocutraw__matrix-green-remix-1782603505828","t":"Matrix Green remix","d":"Explore the Matrix Green remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jocutraw","st":"indexed","pl":"https://21st.dev/community/themes/matrix-green-remix-1782603505828/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jocutraw"},{"id":"21st-theme:john.soriano__paymongo-theme-1783332882818","t":"PayMongo Theme","d":"Explore the PayMongo Theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"john.soriano","st":"indexed","pl":"https://21st.dev/community/themes/paymongo-theme-1783332882818/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"john.soriano"},{"id":"21st-theme:john.soriano__tnkr-1785137789647","t":"TNKR","d":"Explore the TNKR shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"john.soriano","st":"indexed","pl":"https://21st.dev/community/themes/tnkr-1785137789647/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"john.soriano"},{"id":"21st-theme:john_b3ee2bc7__fortescue-1782971991470","t":"Fortescue","d":"Explore the Fortescue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"john_b3ee2bc7","st":"indexed","pl":"https://21st.dev/community/themes/fortescue-1782971991470/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"john_b3ee2bc7"},{"id":"21st-theme:johnkefilwe__raylum-1782997123576","t":"Raylum","d":"Explore the Raylum shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"johnkefilwe","st":"indexed","pl":"https://21st.dev/community/themes/raylum-1782997123576/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"johnkefilwe"},{"id":"21st-theme:jonn4y__neon-red-remix-remix-1783320565493","t":"Neon Red remix remix","d":"Explore the Neon Red remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jonn4y","st":"indexed","pl":"https://21st.dev/community/themes/neon-red-remix-remix-1783320565493/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jonn4y"},{"id":"21st-theme:jordanlmcr__azimuts-4july-1783161877313","t":"Azimuts 4July","d":"Explore the Azimuts 4July shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jordanlmcr","st":"indexed","pl":"https://21st.dev/community/themes/azimuts-4july-1783161877313/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jordanlmcr"},{"id":"21st-theme:josafatech__escalado-1782738647711","t":"Escalado","d":"Explore the Escalado shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"josafatech","st":"indexed","pl":"https://21st.dev/community/themes/escalado-1782738647711/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"josafatech"},{"id":"21st-theme:josafatech__escalado-v2-1783211369385","t":"Escalado V2","d":"Explore the Escalado V2 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"josafatech","st":"indexed","pl":"https://21st.dev/community/themes/escalado-v2-1783211369385/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"josafatech"},{"id":"21st-theme:jty54157__claude-azure-remix-1783725050841","t":"Claude Azure remix","d":"Explore the Claude Azure remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"jty54157","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure-remix-1783725050841/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"jty54157"},{"id":"21st-theme:juxchxx__kodama-grove-remix-1783014901522","t":"Kodama Grove remix","d":"Explore the Kodama Grove remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"juxchxx","st":"indexed","pl":"https://21st.dev/community/themes/kodama-grove-remix-1783014901522/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"juxchxx"},{"id":"21st-theme:k4m65k6__amber-minimal-remix-1784031991159","t":"Amber Minimal remix","d":"Explore the Amber Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"k4m65k6","st":"indexed","pl":"https://21st.dev/community/themes/amber-minimal-remix-1784031991159/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"k4m65k6"},{"id":"21st-theme:kanchandaskuldeep1954__modern-minimal-remix-1782965632907","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kanchandaskuldeep1954","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782965632907/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kanchandaskuldeep1954"},{"id":"21st-theme:kanishkasharma21135378__vercel-remix-1782634733838","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kanishkasharma21135378","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1782634733838/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kanishkasharma21135378"},{"id":"21st-theme:kantipudi604__northernlights-1783791122087","t":"NorthernLights","d":"Explore the NorthernLights shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kantipudi604","st":"indexed","pl":"https://21st.dev/community/themes/northernlights-1783791122087/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kantipudi604"},{"id":"21st-theme:karatarkan921__echos-kayip-modul-1783333806746","t":"Echos Kayip Modul","d":"Explore the Echos Kayip Modul shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"karatarkan921","st":"indexed","pl":"https://21st.dev/community/themes/echos-kayip-modul-1783333806746/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"karatarkan921"},{"id":"21st-theme:karthick.branding__gowc-1786358916305","t":"GOWC","d":"Explore the GOWC shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"karthick.branding","st":"indexed","pl":"https://21st.dev/community/themes/gowc-1786358916305/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"karthick.branding"},{"id":"21st-theme:kasraco__perpetuity-remix-1783850966120","t":"Perpetuity remix","d":"Explore the Perpetuity remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kasraco","st":"indexed","pl":"https://21st.dev/community/themes/perpetuity-remix-1783850966120/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kasraco"},{"id":"21st-theme:kay089680__claude-remix-1782586539780","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kay089680","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782586539780/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kay089680"},{"id":"21st-theme:khairilaffan0618__sinyal-cohiba-1784271955445","t":"Sinyal Cohiba","d":"Explore the Sinyal Cohiba shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"khairilaffan0618","st":"indexed","pl":"https://21st.dev/community/themes/sinyal-cohiba-1784271955445/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"khairilaffan0618"},{"id":"21st-theme:klajdo.fyraj__amber-slate-remix-1782997518946","t":"Amber Slate remix","d":"Explore the Amber Slate remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"klajdo.fyraj","st":"indexed","pl":"https://21st.dev/community/themes/amber-slate-remix-1782997518946/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"klajdo.fyraj"},{"id":"21st-theme:klajdo.fyraj__indigo-harbor-remix-1783589672318","t":"Indigo Harbor remix","d":"Explore the Indigo Harbor remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"klajdo.fyraj","st":"indexed","pl":"https://21st.dev/community/themes/indigo-harbor-remix-1783589672318/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"klajdo.fyraj"},{"id":"21st-theme:knowledge-jo__vercel-remix-1783359285309","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"knowledge-jo","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783359285309/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"knowledge-jo"},{"id":"21st-theme:komandamedia__komanda-media-1787053713750","t":"Komanda Media","d":"Explore the Komanda Media shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"komandamedia","st":"indexed","pl":"https://21st.dev/community/themes/komanda-media-1787053713750/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"komandamedia"},{"id":"21st-theme:kris.axiris__cyberpunk-remix-1783337795356","t":"Cyberpunk remix","d":"Explore the Cyberpunk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kris.axiris","st":"indexed","pl":"https://21st.dev/community/themes/cyberpunk-remix-1783337795356/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kris.axiris"},{"id":"21st-theme:kvagrwalak1__cyro-1784531109672","t":"CYRO","d":"Explore the CYRO shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kvagrwalak1","st":"indexed","pl":"https://21st.dev/community/themes/cyro-1784531109672/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kvagrwalak1"},{"id":"21st-theme:kyle_697c2a14__bos-1784044369050","t":"BOS","d":"Explore the BOS shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kyle_697c2a14","st":"indexed","pl":"https://21st.dev/community/themes/bos-1784044369050/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kyle_697c2a14"},{"id":"21st-theme:kyle_697c2a14__gom-remix-1784137249114","t":"GoM Remix","d":"Explore the GoM Remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kyle_697c2a14","st":"indexed","pl":"https://21st.dev/community/themes/gom-remix-1784137249114/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kyle_697c2a14"},{"id":"21st-theme:kylian.barthelemy2003__olympia-1782904290624","t":"Olympia","d":"Explore the Olympia shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kylian.barthelemy2003","st":"indexed","pl":"https://21st.dev/community/themes/olympia-1782904290624/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kylian.barthelemy2003"},{"id":"21st-theme:kylian.barthelemy2003__olympia-1782904543478","t":"Olympia","d":"Explore the Olympia shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kylian.barthelemy2003","st":"indexed","pl":"https://21st.dev/community/themes/olympia-1782904543478/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kylian.barthelemy2003"},{"id":"21st-theme:kym__basic-blue-1784080694571","t":"basic blue","d":"Explore the basic blue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"kym","st":"indexed","pl":"https://21st.dev/community/themes/basic-blue-1784080694571/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"kym"},{"id":"21st-theme:lassegrossfeld__modern-minimal-remix-1782837821440","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lassegrossfeld","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782837821440/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lassegrossfeld"},{"id":"21st-theme:lautodidakte__zen-linen-remix-1782901458026","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lautodidakte","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1782901458026/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lautodidakte"},{"id":"21st-theme:lenamtuan28102010lfx__nah-1783853024115","t":"nah","d":"Explore the nah shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lenamtuan28102010lfx","st":"indexed","pl":"https://21st.dev/community/themes/nah-1783853024115/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lenamtuan28102010lfx"},{"id":"21st-theme:lifeofnikk__elegant-luxury-remix-1783526055118","t":"Elegant Luxury remix","d":"Explore the Elegant Luxury remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lifeofnikk","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-1783526055118/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lifeofnikk"},{"id":"21st-theme:lishaozhe633__notebook-remix-1783578445882","t":"Notebook remix","d":"Explore the Notebook remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lishaozhe633","st":"indexed","pl":"https://21st.dev/community/themes/notebook-remix-1783578445882/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lishaozhe633"},{"id":"21st-theme:lishaozhe633__notebook-remix-1783578479859","t":"Notebook remix","d":"Explore the Notebook remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lishaozhe633","st":"indexed","pl":"https://21st.dev/community/themes/notebook-remix-1783578479859/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lishaozhe633"},{"id":"21st-theme:liveallgamegamer__vercel-remix-1784110465664","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"liveallgamegamer","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1784110465664/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"liveallgamegamer"},{"id":"21st-theme:localhost_serafim__modern-minimal-remix-1782878654851","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"localhost_serafim","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782878654851/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"localhost_serafim"},{"id":"21st-theme:lorenzobla__aker-1785161100894","t":"Aker","d":"Explore the Aker shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lorenzobla","st":"indexed","pl":"https://21st.dev/community/themes/aker-1785161100894/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lorenzobla"},{"id":"21st-theme:lorenzobla__mytheme-1785241853002","t":"Mytheme","d":"Explore the Mytheme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"lorenzobla","st":"indexed","pl":"https://21st.dev/community/themes/mytheme-1785241853002/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"lorenzobla"},{"id":"21st-theme:losermuug__quantum-rose-remix-1783151448056","t":"Quantum Rose remix","d":"Explore the Quantum Rose remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"losermuug","st":"indexed","pl":"https://21st.dev/community/themes/quantum-rose-remix-1783151448056/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"losermuug"},{"id":"21st-theme:ludwig.mair__retro-arcade-remix-1784208379665","t":"Retro Arcade remix","d":"Explore the Retro Arcade remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ludwig.mair","st":"indexed","pl":"https://21st.dev/community/themes/retro-arcade-remix-1784208379665/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ludwig.mair"},{"id":"21st-theme:luid100it__graphite-mono-remix-1782797001923","t":"Graphite Mono remix","d":"Explore the Graphite Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"luid100it","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono-remix-1782797001923/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"luid100it"},{"id":"21st-theme:m_f030ba73__seagreen-minimal-1786131459580","t":"SeaGreen Minimal","d":"Explore the SeaGreen Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"m_f030ba73","st":"indexed","pl":"https://21st.dev/community/themes/seagreen-minimal-1786131459580/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"m_f030ba73"},{"id":"21st-theme:madebyjred__neon-onyx-remix-1784250664898","t":"Neon Onyx remix","d":"Explore the Neon Onyx remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"madebyjred","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx-remix-1784250664898/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"madebyjred"},{"id":"21st-theme:madjid__twitter-remix-bilka-1783023812359","t":"Twitter remix bilka","d":"Explore the Twitter remix bilka shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"madjid","st":"indexed","pl":"https://21st.dev/community/themes/twitter-remix-bilka-1783023812359/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"madjid"},{"id":"21st-theme:mahankalsarthak93__indigo-soft-1785837236796","t":"Indigo Soft","d":"Explore the Indigo Soft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mahankalsarthak93","st":"indexed","pl":"https://21st.dev/community/themes/indigo-soft-1785837236796/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mahankalsarthak93"},{"id":"21st-theme:mamoonimtiaz12__modern-minimal-remix-1782749124701","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mamoonimtiaz12","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782749124701/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mamoonimtiaz12"},{"id":"21st-theme:marcelolaranjeira__engeloc-1785739889971","t":"Engeloc","d":"Explore the Engeloc shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"marcelolaranjeira","st":"indexed","pl":"https://21st.dev/community/themes/engeloc-1785739889971/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"marcelolaranjeira"},{"id":"21st-theme:marco.martignani__graphite-mono-remix-1783440836163","t":"Graphite Mono remix","d":"Explore the Graphite Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"marco.martignani","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono-remix-1783440836163/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"marco.martignani"},{"id":"21st-theme:mariannalig__reddit-1784667383022","t":"reddit","d":"Explore the reddit shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mariannalig","st":"indexed","pl":"https://21st.dev/community/themes/reddit-1784667383022/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mariannalig"},{"id":"21st-theme:marktantongco__tealmark-1782551579141","t":"TealMark","d":"Explore the TealMark shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"marktantongco","st":"indexed","pl":"https://21st.dev/community/themes/tealmark-1782551579141/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"marktantongco"},{"id":"21st-theme:massimobuonfrate01__green-notes-1783614187319","t":"Green Notes","d":"Explore the Green Notes shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"massimobuonfrate01","st":"indexed","pl":"https://21st.dev/community/themes/green-notes-1783614187319/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"massimobuonfrate01"},{"id":"21st-theme:mat.enc__digitomics-mateen-1783429256610","t":"Digitomics-Mateen","d":"Explore the Digitomics-Mateen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mat.enc","st":"indexed","pl":"https://21st.dev/community/themes/digitomics-mateen-1783429256610/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mat.enc"},{"id":"21st-theme:matheoceleste__claude-remix-1783342954828","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"matheoceleste","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783342954828/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"matheoceleste"},{"id":"21st-theme:matheus.rezendevr__slate-minimal-1785641895048","t":"Slate Minimal","d":"Explore the Slate Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"matheus.rezendevr","st":"indexed","pl":"https://21st.dev/community/themes/slate-minimal-1785641895048/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"matheus.rezendevr"},{"id":"21st-theme:matingd4__styleziila-1783918801455","t":"styleziila","d":"Explore the styleziila shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"matingd4","st":"indexed","pl":"https://21st.dev/community/themes/styleziila-1783918801455/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"matingd4"},{"id":"21st-theme:max007ng__tricolor-care-1787052830744","t":"Tricolor Care","d":"Explore the Tricolor Care shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"max007ng","st":"indexed","pl":"https://21st.dev/community/themes/tricolor-care-1787052830744/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"max007ng"},{"id":"21st-theme:maxicrypt79-dot__neon-cyber-remix-1782877158846","t":"Neon Cyber remix","d":"Explore the Neon Cyber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"maxicrypt79-dot","st":"indexed","pl":"https://21st.dev/community/themes/neon-cyber-remix-1782877158846/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"maxicrypt79-dot"},{"id":"21st-theme:maxmok0508__slate-minimal-1785998648603","t":"Slate Minimal","d":"Explore the Slate Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"maxmok0508","st":"indexed","pl":"https://21st.dev/community/themes/slate-minimal-1785998648603/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"maxmok0508"},{"id":"21st-theme:maxmok404__modern-minimal-remix-1782799115038","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"maxmok404","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782799115038/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"maxmok404"},{"id":"21st-theme:mdawoodkhurram14__rpb-gamg-1783945055756","t":"Rpb gamg","d":"Explore the Rpb gamg shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mdawoodkhurram14","st":"indexed","pl":"https://21st.dev/community/themes/rpb-gamg-1783945055756/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mdawoodkhurram14"},{"id":"21st-theme:mekuvan2023__clickonhann-1786266979428","t":"clickonhann","d":"Explore the clickonhann shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mekuvan2023","st":"indexed","pl":"https://21st.dev/community/themes/clickonhann-1786266979428/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mekuvan2023"},{"id":"21st-theme:memykungzazath60__tbs-1786414220650","t":"TBS","d":"Explore the TBS shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"memykungzazath60","st":"indexed","pl":"https://21st.dev/community/themes/tbs-1786414220650/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"memykungzazath60"},{"id":"21st-theme:mforourke8__solar-rio-1783258454360","t":"solar RIO","d":"Explore the solar RIO shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mforourke8","st":"indexed","pl":"https://21st.dev/community/themes/solar-rio-1783258454360/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mforourke8"},{"id":"21st-theme:mforourke8__solar-roi-1783258500588","t":"Solar ROI","d":"Explore the Solar ROI shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mforourke8","st":"indexed","pl":"https://21st.dev/community/themes/solar-roi-1783258500588/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mforourke8"},{"id":"21st-theme:mforourke8__solar-roi-remix-1783258535322","t":"Solar ROI remix","d":"Explore the Solar ROI remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mforourke8","st":"indexed","pl":"https://21st.dev/community/themes/solar-roi-remix-1783258535322/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mforourke8"},{"id":"21st-theme:midlajnvs__modern-minimal-remix-1783919011339","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"midlajnvs","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783919011339/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"midlajnvs"},{"id":"21st-theme:midlajnvs__modern-minimal-remix-remix-1783919044016","t":"Modern Minimal remix remix","d":"Explore the Modern Minimal remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"midlajnvs","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-remix-1783919044016/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"midlajnvs"},{"id":"21st-theme:milixxxxx__sss-1782605599584","t":"sss","d":"Explore the sss shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"milixxxxx","st":"indexed","pl":"https://21st.dev/community/themes/sss-1782605599584/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"milixxxxx"},{"id":"21st-theme:miloburko1__modern-minimal-remix-1783002775635","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"miloburko1","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783002775635/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"miloburko1"},{"id":"21st-theme:modabou9__pink-vivid-1785470418619","t":"Pink Vivid","d":"Explore the Pink Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"modabou9","st":"indexed","pl":"https://21st.dev/community/themes/pink-vivid-1785470418619/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"modabou9"},{"id":"21st-theme:mohammed_df73c4c3__supabase-remix-1782568258690","t":"Supabase remix","d":"Explore the Supabase remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mohammed_df73c4c3","st":"indexed","pl":"https://21st.dev/community/themes/supabase-remix-1782568258690/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mohammed_df73c4c3"},{"id":"21st-theme:moiro24__emerald-spring-remix-1783553463697","t":"Emerald Spring remix","d":"Explore the Emerald Spring remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"moiro24","st":"indexed","pl":"https://21st.dev/community/themes/emerald-spring-remix-1783553463697/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"moiro24"},{"id":"21st-theme:moonlitflower112__darkblue-white-1784028751628","t":"Darkblue-white","d":"Explore the Darkblue-white shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"moonlitflower112","st":"indexed","pl":"https://21st.dev/community/themes/darkblue-white-1784028751628/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"moonlitflower112"},{"id":"21st-theme:mr.mazoff__golden-linen-mazovai-1783712412297","t":"Golden Linen  MazovAi","d":"Explore the Golden Linen  MazovAi shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mr.mazoff","st":"indexed","pl":"https://21st.dev/community/themes/golden-linen-mazovai-1783712412297/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mr.mazoff"},{"id":"21st-theme:mr.mazoff__mono-remix-1784196778332","t":"Mono remix","d":"Explore the Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mr.mazoff","st":"indexed","pl":"https://21st.dev/community/themes/mono-remix-1784196778332/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mr.mazoff"},{"id":"21st-theme:mr.mazoff__mono-remix-remix-1784196845167","t":"Mono remix remix","d":"Explore the Mono remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mr.mazoff","st":"indexed","pl":"https://21st.dev/community/themes/mono-remix-remix-1784196845167/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mr.mazoff"},{"id":"21st-theme:mregundwar_deloitte__claude-remix-1783001218992","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mregundwar_deloitte","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783001218992/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mregundwar_deloitte"},{"id":"21st-theme:msconcer__lime-frost-remix-1784238234966","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"msconcer","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1784238234966/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"msconcer"},{"id":"21st-theme:mukeshthakor__my-premix-1783275266103","t":"My Premix","d":"Explore the My Premix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mukeshthakor","st":"indexed","pl":"https://21st.dev/community/themes/my-premix-1783275266103/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mukeshthakor"},{"id":"21st-theme:multiulet__sky-vivid-1786431768942","t":"Sky Vivid","d":"Explore the Sky Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"multiulet","st":"indexed","pl":"https://21st.dev/community/themes/sky-vivid-1786431768942/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"multiulet"},{"id":"21st-theme:mustaphadahmane85__claude-remix-1783454828835","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"mustaphadahmane85","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783454828835/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"mustaphadahmane85"},{"id":"21st-theme:najjibullahqaderi__najeeb-rohani-1784039444290","t":"Najeeb Rohani","d":"Explore the Najeeb Rohani shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"najjibullahqaderi","st":"indexed","pl":"https://21st.dev/community/themes/najeeb-rohani-1784039444290/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"najjibullahqaderi"},{"id":"21st-theme:nexfixwork__vintage-paper-remix-1782850400670","t":"Vintage Paper remix","d":"Explore the Vintage Paper remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nexfixwork","st":"indexed","pl":"https://21st.dev/community/themes/vintage-paper-remix-1782850400670/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nexfixwork"},{"id":"21st-theme:ngocdiem226__ocean-breeze-remix-1783704194185","t":"Ocean Breeze remix","d":"Explore the Ocean Breeze remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ngocdiem226","st":"indexed","pl":"https://21st.dev/community/themes/ocean-breeze-remix-1783704194185/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ngocdiem226"},{"id":"21st-theme:nikhilgoud489__nikhil-1783277187381","t":"Nikhil","d":"Explore the Nikhil shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nikhilgoud489","st":"indexed","pl":"https://21st.dev/community/themes/nikhil-1783277187381/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nikhilgoud489"},{"id":"21st-theme:nikitapage10__tempo-1786237716147","t":"TEMPO","d":"Explore the TEMPO shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nikitapage10","st":"indexed","pl":"https://21st.dev/community/themes/tempo-1786237716147/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nikitapage10"},{"id":"21st-theme:nour.wb.biz__elegant-luxury-remix-1784109344391","t":"Elegant Luxury remix","d":"Explore the Elegant Luxury remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nour.wb.biz","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-1784109344391/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nour.wb.biz"},{"id":"21st-theme:nour.wb.biz__elegant-luxury-remix-remix-1784109456133","t":"Elegant Luxury remix remix","d":"Explore the Elegant Luxury remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nour.wb.biz","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-remix-1784109456133/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nour.wb.biz"},{"id":"21st-theme:nour.wb.biz__noon-1784374952148","t":"Noon","d":"Explore the Noon shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nour.wb.biz","st":"indexed","pl":"https://21st.dev/community/themes/noon-1784374952148/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nour.wb.biz"},{"id":"21st-theme:nukellasanjay__neon-block-remix-1783623927941","t":"Neon Block remix","d":"Explore the Neon Block remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nukellasanjay","st":"indexed","pl":"https://21st.dev/community/themes/neon-block-remix-1783623927941/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nukellasanjay"},{"id":"21st-theme:nurhasdy.nandar__pln-1786429335213","t":"PLN","d":"Explore the PLN shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"nurhasdy.nandar","st":"indexed","pl":"https://21st.dev/community/themes/pln-1786429335213/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"nurhasdy.nandar"},{"id":"21st-theme:o.zhutov__vercel-remix-1783270960997","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"o.zhutov","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783270960997/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"o.zhutov"},{"id":"21st-theme:obiney500__quick-theme-1786397511983","t":"Quick theme","d":"Explore the Quick theme shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"obiney500","st":"indexed","pl":"https://21st.dev/community/themes/quick-theme-1786397511983/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"obiney500"},{"id":"21st-theme:olga-4011__twitter-remix-1783525018300","t":"Twitter remix","d":"Explore the Twitter remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"olga-4011","st":"indexed","pl":"https://21st.dev/community/themes/twitter-remix-1783525018300/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"olga-4011"},{"id":"21st-theme:oliverjonesy38__claude-remix-1782801914929","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"oliverjonesy38","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782801914929/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"oliverjonesy38"},{"id":"21st-theme:om.pawar1512__graphite-mono-remix-1784115510118","t":"Graphite Mono remix","d":"Explore the Graphite Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"om.pawar1512","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono-remix-1784115510118/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"om.pawar1512"},{"id":"21st-theme:omkhammash__emerald-vivid-1786714739024","t":"Emerald Vivid","d":"Explore the Emerald Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"omkhammash","st":"indexed","pl":"https://21st.dev/community/themes/emerald-vivid-1786714739024/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"omkhammash"},{"id":"21st-theme:omkhammash__emerald-vivid-2-1786715529893","t":"Emerald Vivid 2","d":"Explore the Emerald Vivid 2 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"omkhammash","st":"indexed","pl":"https://21st.dev/community/themes/emerald-vivid-2-1786715529893/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"omkhammash"},{"id":"21st-theme:ondenet34__test-1783523139487","t":"test","d":"Explore the test shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ondenet34","st":"indexed","pl":"https://21st.dev/community/themes/test-1783523139487/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ondenet34"},{"id":"21st-theme:operdrix__violet-dusk-remix-1783977689866","t":"Violet Dusk remix","d":"Explore the Violet Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"operdrix","st":"indexed","pl":"https://21st.dev/community/themes/violet-dusk-remix-1783977689866/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"operdrix"},{"id":"21st-theme:otiktok932__modern-minimal-remix-1784019825388","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"otiktok932","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1784019825388/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"otiktok932"},{"id":"21st-theme:oualidmenadjelia__ironclad-precision-1785075006454","t":"Ironclad Precision","d":"Explore the Ironclad Precision shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"oualidmenadjelia","st":"indexed","pl":"https://21st.dev/community/themes/ironclad-precision-1785075006454/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"oualidmenadjelia"},{"id":"21st-theme:ozgur16.yegin__vercel-remix-1782613354008","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ozgur16.yegin","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1782613354008/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ozgur16.yegin"},{"id":"21st-theme:panjidenisgiantoroo__sunset-horizon-remix-1783502440500","t":"Sunset Horizon remix","d":"Explore the Sunset Horizon remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"panjidenisgiantoroo","st":"indexed","pl":"https://21st.dev/community/themes/sunset-horizon-remix-1783502440500/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"panjidenisgiantoroo"},{"id":"21st-theme:parkheshubh__azure-mono-remix-1782613475819","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"parkheshubh","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1782613475819/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"parkheshubh"},{"id":"21st-theme:paulpietra83__gleam-1782809130254","t":"Gleam","d":"Explore the Gleam shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"paulpietra83","st":"indexed","pl":"https://21st.dev/community/themes/gleam-1782809130254/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"paulpietra83"},{"id":"21st-theme:pavan.das__green-vivid-1785138855007","t":"Green Vivid","d":"Explore the Green Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pavan.das","st":"indexed","pl":"https://21st.dev/community/themes/green-vivid-1785138855007/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pavan.das"},{"id":"21st-theme:pavonini2021__kodama-grove-remix-1782919111582","t":"Kodama Grove remix","d":"Explore the Kodama Grove remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pavonini2021","st":"indexed","pl":"https://21st.dev/community/themes/kodama-grove-remix-1782919111582/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pavonini2021"},{"id":"21st-theme:pdiop3885__modern-minimal-remix-1783408215608","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pdiop3885","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783408215608/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pdiop3885"},{"id":"21st-theme:pealman1375__claude-azure-remix-1784132378015","t":"Claude Azure remix","d":"Explore the Claude Azure remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pealman1375","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure-remix-1784132378015/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pealman1375"},{"id":"21st-theme:petd3593__neon-magenta-remix-1782874393357","t":"Neon Magenta remix","d":"Explore the Neon Magenta remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"petd3593","st":"indexed","pl":"https://21st.dev/community/themes/neon-magenta-remix-1782874393357/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"petd3593"},{"id":"21st-theme:peteryzbruun__monochromatics-light-1783167338592","t":"Monochromatics Light","d":"Explore the Monochromatics Light shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"peteryzbruun","st":"indexed","pl":"https://21st.dev/community/themes/monochromatics-light-1783167338592/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"peteryzbruun"},{"id":"21st-theme:peteryzbruun__pine-terminal-remix-1783145711579","t":"Pine Terminal remix","d":"Explore the Pine Terminal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"peteryzbruun","st":"indexed","pl":"https://21st.dev/community/themes/pine-terminal-remix-1783145711579/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"peteryzbruun"},{"id":"21st-theme:peteryzbruun__seafoam-green-1783145561036","t":"seafoam green","d":"Explore the seafoam green shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"peteryzbruun","st":"indexed","pl":"https://21st.dev/community/themes/seafoam-green-1783145561036/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"peteryzbruun"},{"id":"21st-theme:pjy464297__violet-bloom-remix-1784103853858","t":"Violet Bloom remix","d":"Explore the Violet Bloom remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pjy464297","st":"indexed","pl":"https://21st.dev/community/themes/violet-bloom-remix-1784103853858/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pjy464297"},{"id":"21st-theme:pmbuzhmehrani__exvorta-base-1784742455357","t":"exvorta-base","d":"Explore the exvorta-base shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pmbuzhmehrani","st":"indexed","pl":"https://21st.dev/community/themes/exvorta-base-1784742455357/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pmbuzhmehrani"},{"id":"21st-theme:pmetha9595__modern-minimal-remix-1783671047984","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pmetha9595","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783671047984/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pmetha9595"},{"id":"21st-theme:pranavpat401__zen-linen-remix-1783647292981","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pranavpat401","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1783647292981/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pranavpat401"},{"id":"21st-theme:predictiondose__doom-64-remix-1782730134816","t":"Doom 64 remix","d":"Explore the Doom 64 remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"predictiondose","st":"indexed","pl":"https://21st.dev/community/themes/doom-64-remix-1782730134816/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"predictiondose"},{"id":"21st-theme:priyalove920__claude-remix-1782959216691","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"priyalove920","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782959216691/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"priyalove920"},{"id":"21st-theme:priyalove920__claude-remix-1782959669308","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"priyalove920","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782959669308/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"priyalove920"},{"id":"21st-theme:profitsalesorg-crypto__promotor-1784910880981","t":"ProMotor","d":"Explore the ProMotor shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"profitsalesorg-crypto","st":"indexed","pl":"https://21st.dev/community/themes/promotor-1784910880981/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"profitsalesorg-crypto"},{"id":"21st-theme:profitsalesorg-crypto__promotor-wow-1784919270278","t":"ProMotor Wow","d":"Explore the ProMotor Wow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"profitsalesorg-crypto","st":"indexed","pl":"https://21st.dev/community/themes/promotor-wow-1784919270278/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"profitsalesorg-crypto"},{"id":"21st-theme:pttaatatata__elegant-luxury-remix-1782723230590","t":"Elegant Luxury remix","d":"Explore the Elegant Luxury remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"pttaatatata","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-1782723230590/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"pttaatatata"},{"id":"21st-theme:puadomany__mocha-mousse-remix-1782596462712","t":"Mocha Mousse remix","d":"Explore the Mocha Mousse remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"puadomany","st":"indexed","pl":"https://21st.dev/community/themes/mocha-mousse-remix-1782596462712/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"puadomany"},{"id":"21st-theme:qcasares__qprofile-neon-cyber-after-gustavo-raimundo-1785789080284","t":"qprofile Neon Cyber (after gustavo.raimundo)","d":"Explore the qprofile Neon Cyber (after gustavo.raimundo) shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"qcasares","st":"indexed","pl":"https://21st.dev/community/themes/qprofile-neon-cyber-after-gustavo-raimundo-1785789080284/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"qcasares"},{"id":"21st-theme:radchenko.viktoriaa__color-th-1782604693183","t":"Color th","d":"Explore the Color th shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"radchenko.viktoriaa","st":"indexed","pl":"https://21st.dev/community/themes/color-th-1782604693183/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"radchenko.viktoriaa"},{"id":"21st-theme:ramitaptraining__claude-remix-1784155834076","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ramitaptraining","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1784155834076/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ramitaptraining"},{"id":"21st-theme:ramitaptraining__claude-remix-remix-1784155848780","t":"Claude remix remix","d":"Explore the Claude remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ramitaptraining","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-remix-1784155848780/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ramitaptraining"},{"id":"21st-theme:ranjeet94787__vercel-remix-1784198263955","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ranjeet94787","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1784198263955/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ranjeet94787"},{"id":"21st-theme:raphael.gysel1__primary-color-1783165791285","t":"Primary color","d":"Explore the Primary color shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"raphael.gysel1","st":"indexed","pl":"https://21st.dev/community/themes/primary-color-1783165791285/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"raphael.gysel1"},{"id":"21st-theme:rashchupkina2002__sky-vivid-1787012512075","t":"Sky Vivid","d":"Explore the Sky Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"rashchupkina2002","st":"indexed","pl":"https://21st.dev/community/themes/sky-vivid-1787012512075/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"rashchupkina2002"},{"id":"21st-theme:rashidhamedas__taranom-emerald-gold-1784716637053","t":"Taranom Emerald Gold","d":"Explore the Taranom Emerald Gold shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"rashidhamedas","st":"indexed","pl":"https://21st.dev/community/themes/taranom-emerald-gold-1784716637053/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"rashidhamedas"},{"id":"21st-theme:raz_9b05efe0__raz-1782585383841","t":"Raz","d":"Explore the Raz shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"raz_9b05efe0","st":"indexed","pl":"https://21st.dev/community/themes/raz-1782585383841/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"raz_9b05efe0"},{"id":"21st-theme:reouven29__azure-mono-remix-1783592561222","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"reouven29","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1783592561222/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"reouven29"},{"id":"21st-theme:richard_d05d0c60__catppuccin-remix-1782827973632","t":"Catppuccin remix","d":"Explore the Catppuccin remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"richard_d05d0c60","st":"indexed","pl":"https://21st.dev/community/themes/catppuccin-remix-1782827973632/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"richard_d05d0c60"},{"id":"21st-theme:riseabovetherest__riseabovethe-rest-1783187047143","t":"riseabovethe.rest","d":"Explore the riseabovethe.rest shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"riseabovetherest","st":"indexed","pl":"https://21st.dev/community/themes/riseabovethe-rest-1783187047143/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"riseabovetherest"},{"id":"21st-theme:rohmet__claude-azure-remix-1782822501256","t":"Claude Azure remix","d":"Explore the Claude Azure remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"rohmet","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure-remix-1782822501256/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"rohmet"},{"id":"21st-theme:romaltaraz__nature-remix-1782640315606","t":"Nature remix","d":"Explore the Nature remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"romaltaraz","st":"indexed","pl":"https://21st.dev/community/themes/nature-remix-1782640315606/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"romaltaraz"},{"id":"21st-theme:ronitkalura__azure-flow-remix-1783803077392","t":"Azure Flow remix","d":"Explore the Azure Flow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ronitkalura","st":"indexed","pl":"https://21st.dev/community/themes/azure-flow-remix-1783803077392/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ronitkalura"},{"id":"21st-theme:ronitkalura__supabase-sage-remix-1783561592863","t":"Supabase Sage remix","d":"Explore the Supabase Sage remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ronitkalura","st":"indexed","pl":"https://21st.dev/community/themes/supabase-sage-remix-1783561592863/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ronitkalura"},{"id":"21st-theme:rrgb.info__azure-mono-remix-1783437497508","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"rrgb.info","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1783437497508/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"rrgb.info"},{"id":"21st-theme:ruban.techtraders__lime-frost-remix-1783044189825","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ruban.techtraders","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1783044189825/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ruban.techtraders"},{"id":"21st-theme:ruban.techtraders__lime-frost-remix-1783044267804","t":"Lime Frost remix","d":"Explore the Lime Frost remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ruban.techtraders","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost-remix-1783044267804/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ruban.techtraders"},{"id":"21st-theme:ruyam.bhattacharya1__neo-brutalism-remix-1783180585641","t":"Neo Brutalism remix","d":"Explore the Neo Brutalism remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ruyam.bhattacharya1","st":"indexed","pl":"https://21st.dev/community/themes/neo-brutalism-remix-1783180585641/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ruyam.bhattacharya1"},{"id":"21st-theme:ryan_3dbbe63c__intellisense-1783027021550","t":"IntelliSense","d":"Explore the IntelliSense shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ryan_3dbbe63c","st":"indexed","pl":"https://21st.dev/community/themes/intellisense-1783027021550/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ryan_3dbbe63c"},{"id":"21st-theme:saafijesser903__modern-minimal-remix-1783295300980","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"saafijesser903","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783295300980/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"saafijesser903"},{"id":"21st-theme:saasdevpau-oss__solar-dusk-remix-1784110212722","t":"Solar Dusk remix","d":"Explore the Solar Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"saasdevpau-oss","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk-remix-1784110212722/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"saasdevpau-oss"},{"id":"21st-theme:saijayanth532__cendriix-aurora-slate-1785939457192","t":"Cendriix Aurora Slate","d":"Explore the Cendriix Aurora Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"saijayanth532","st":"indexed","pl":"https://21st.dev/community/themes/cendriix-aurora-slate-1785939457192/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"saijayanth532"},{"id":"21st-theme:samueljohnsonib1__jobboard-1782928530251","t":"jobboard","d":"Explore the jobboard shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"samueljohnsonib1","st":"indexed","pl":"https://21st.dev/community/themes/jobboard-1782928530251/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"samueljohnsonib1"},{"id":"21st-theme:samuelmasih03480266596__neon-onyx-remix-1782554041727","t":"Neon Onyx remix","d":"Explore the Neon Onyx remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"samuelmasih03480266596","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx-remix-1782554041727/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"samuelmasih03480266596"},{"id":"21st-theme:samuelmasih03480266596__neon-onyx-remix-remix-1782554055378","t":"Neon Onyx remix remix","d":"Explore the Neon Onyx remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"samuelmasih03480266596","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx-remix-remix-1782554055378/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"samuelmasih03480266596"},{"id":"21st-theme:samuelmasih03480266596__neon-onyx-remix-remix-remix-1782554097865","t":"Neon Onyx remix remix remix","d":"Explore the Neon Onyx remix remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"samuelmasih03480266596","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx-remix-remix-remix-1782554097865/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"samuelmasih03480266596"},{"id":"21st-theme:samuelmasih03480266596__neon-onyx-remix-remix-remix-remix-1782554178735","t":"Neon Onyx remix remix remix remix","d":"Explore the Neon Onyx remix remix remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"samuelmasih03480266596","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx-remix-remix-remix-remix-1782554178735/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"samuelmasih03480266596"},{"id":"21st-theme:sapir_c46fb892__vintage-paper-remix-1782659106673","t":"Vintage Paper remix","d":"Explore the Vintage Paper remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sapir_c46fb892","st":"indexed","pl":"https://21st.dev/community/themes/vintage-paper-remix-1782659106673/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sapir_c46fb892"},{"id":"21st-theme:sarah_0516ce4c__claude-remix-1783204290723","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sarah_0516ce4c","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783204290723/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sarah_0516ce4c"},{"id":"21st-theme:sarahagbayani__slate-linen-remix-1783445960344","t":"Slate Linen remix","d":"Explore the Slate Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sarahagbayani","st":"indexed","pl":"https://21st.dev/community/themes/slate-linen-remix-1783445960344/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sarahagbayani"},{"id":"21st-theme:sarahkerner2101__mk-1786907829354","t":"MK","d":"Explore the MK shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sarahkerner2101","st":"indexed","pl":"https://21st.dev/community/themes/mk-1786907829354/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sarahkerner2101"},{"id":"21st-theme:saturnoci2018__neon-magenta-remix-1782821913281","t":"Neon Magenta remix","d":"Explore the Neon Magenta remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"saturnoci2018","st":"indexed","pl":"https://21st.dev/community/themes/neon-magenta-remix-1782821913281/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"saturnoci2018"},{"id":"21st-theme:satyamsingh.000121__portfolio-pro-dark-1786881610971","t":"Portfolio Pro Dark","d":"Explore the Portfolio Pro Dark shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"satyamsingh.000121","st":"indexed","pl":"https://21st.dev/community/themes/portfolio-pro-dark-1786881610971/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"satyamsingh.000121"},{"id":"21st-theme:semin.yuri13__claude-remix-1783091245687","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"semin.yuri13","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783091245687/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"semin.yuri13"},{"id":"21st-theme:semin.yuri13__modern-minimal-remix-1783428463753","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"semin.yuri13","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1783428463753/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"semin.yuri13"},{"id":"21st-theme:semin.yuri13__sasadasdasda-1784988121121","t":"saSadasdasda","d":"Explore the saSadasdasda shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"semin.yuri13","st":"indexed","pl":"https://21st.dev/community/themes/sasadasdasda-1784988121121/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"semin.yuri13"},{"id":"21st-theme:senommu__homlu-ui-1784131379515","t":"Homlu UI","d":"Explore the Homlu UI shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"senommu","st":"indexed","pl":"https://21st.dev/community/themes/homlu-ui-1784131379515/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"senommu"},{"id":"21st-theme:serafimcloud__advent-of-code","t":"Advent of Code","d":"Explore the Advent of Code shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/advent-of-code/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-glow","t":"Amber Glow","d":"Explore the Amber Glow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-glow/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-hearth","t":"Amber Hearth","d":"Explore the Amber Hearth shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-hearth/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-minimal","t":"Amber Minimal","d":"Explore the Amber Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-minimal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-mono-linen","t":"Amber Mono Linen","d":"Explore the Amber Mono Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-mono-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-mono","t":"Amber Mono","d":"Explore the Amber Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-retro","t":"Amber Retro","d":"Explore the Amber Retro shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-retro/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-slate","t":"Amber Slate","d":"Explore the Amber Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amber-terminal","t":"Amber Terminal","d":"Explore the Amber Terminal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amber-terminal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__amethyst-haze","t":"Amethyst Haze","d":"Explore the Amethyst Haze shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/amethyst-haze/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__aqua-pastel","t":"Aqua Pastel","d":"Explore the Aqua Pastel shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/aqua-pastel/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-flow","t":"Azure Flow","d":"Explore the Azure Flow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-flow/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-mist","t":"Azure Mist","d":"Explore the Azure Mist shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-mist/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-mono","t":"Azure Mono","d":"Explore the Azure Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-noir","t":"Azure Noir","d":"Explore the Azure Noir shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-noir/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-pro","t":"Azure Pro","d":"Explore the Azure Pro shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-pro/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__azure-slate","t":"Azure Slate","d":"Explore the Azure Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/azure-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__bain","t":"Bain","d":"Explore the Bain shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/bain/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__bamboo-teal","t":"Bamboo Teal","d":"Explore the Bamboo Teal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/bamboo-teal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__bold-tech","t":"Bold Tech","d":"Explore the Bold Tech shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/bold-tech/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__bronze-linen","t":"Bronze Linen","d":"Explore the Bronze Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/bronze-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__bubblegum","t":"Bubblegum","d":"Explore the Bubblegum shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/bubblegum/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__burgundy-wine","t":"Burgundy Wine","d":"Explore the Burgundy Wine shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/burgundy-wine/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__burnt-sienna","t":"Burnt Sienna","d":"Explore the Burnt Sienna shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/burnt-sienna/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__caffeine","t":"Caffeine","d":"Explore the Caffeine shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/caffeine/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__camel-linen","t":"Camel Linen","d":"Explore the Camel Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/camel-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__candyland","t":"Candyland","d":"Explore the Candyland shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/candyland/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__catppuccin-violet","t":"Catppuccin Violet","d":"Explore the Catppuccin Violet shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/catppuccin-violet/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__catppuccin","t":"Catppuccin","d":"Explore the Catppuccin shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/catppuccin/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__chalk-slate","t":"Chalk Slate","d":"Explore the Chalk Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/chalk-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claude-amber","t":"Claude Amber","d":"Explore the Claude Amber shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claude-azure","t":"Claude Azure","d":"Explore the Claude Azure shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claude-azure/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claude-crimson","t":"Claude Crimson","d":"Explore the Claude Crimson shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claude-crimson/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claude-linen","t":"Claude Linen","d":"Explore the Claude Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claude-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claude","t":"Claude","d":"Explore the Claude shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claude/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__clay-ember","t":"Clay Ember","d":"Explore the Clay Ember shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/clay-ember/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__claymorphism","t":"Claymorphism","d":"Explore the Claymorphism shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/claymorphism/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__clean-slate","t":"Clean Slate","d":"Explore the Clean Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/clean-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-field","t":"Cobalt Field","d":"Explore the Cobalt Field shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-field/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-loft","t":"Cobalt Loft","d":"Explore the Cobalt Loft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-loft/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-mist","t":"Cobalt Mist","d":"Explore the Cobalt Mist shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-mist/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-mono","t":"Cobalt Mono","d":"Explore the Cobalt Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-sky","t":"Cobalt Sky","d":"Explore the Cobalt Sky shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-sky/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cobalt-steel","t":"Cobalt Steel","d":"Explore the Cobalt Steel shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cobalt-steel/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cocoa-amber","t":"Cocoa Amber","d":"Explore the Cocoa Amber shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cocoa-amber/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__concrete-rust","t":"Concrete Rust","d":"Explore the Concrete Rust shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/concrete-rust/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__copper-clay","t":"Copper Clay","d":"Explore the Copper Clay shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/copper-clay/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__copper-dusk","t":"Copper Dusk","d":"Explore the Copper Dusk shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/copper-dusk/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__copper-linen","t":"Copper Linen","d":"Explore the Copper Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/copper-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__coral-blush","t":"Coral Blush","d":"Explore the Coral Blush shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/coral-blush/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__coral-noir","t":"Coral Noir","d":"Explore the Coral Noir shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/coral-noir/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__coral-teal","t":"Coral Teal","d":"Explore the Coral Teal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/coral-teal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cosmic-indigo","t":"Cosmic Indigo","d":"Explore the Cosmic Indigo shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cosmic-indigo/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cosmic-night","t":"Cosmic Night","d":"Explore the Cosmic Night shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cosmic-night/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__crimson-pulse","t":"Crimson Pulse","d":"Explore the Crimson Pulse shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/crimson-pulse/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__crimson-terminal","t":"Crimson Terminal","d":"Explore the Crimson Terminal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/crimson-terminal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cyan-dawn","t":"Cyan Dawn","d":"Explore the Cyan Dawn shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cyan-dawn/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cyber-cyan","t":"Cyber Cyan","d":"Explore the Cyber Cyan shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cyber-cyan/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__cyberpunk","t":"Cyberpunk","d":"Explore the Cyberpunk shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/cyberpunk/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__darkmatter","t":"Darkmatter","d":"Explore the Darkmatter shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/darkmatter/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__discord-linen","t":"Discord Linen","d":"Explore the Discord Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/discord-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__discord","t":"Discord","d":"Explore the Discord shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/discord/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__doom-64","t":"Doom 64","d":"Explore the Doom 64 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/doom-64/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__elegant-luxury","t":"Elegant Luxury","d":"Explore the Elegant Luxury shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__ember-dawn","t":"Ember Dawn","d":"Explore the Ember Dawn shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/ember-dawn/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__emerald-field","t":"Emerald Field","d":"Explore the Emerald Field shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/emerald-field/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__emerald-slate","t":"Emerald Slate","d":"Explore the Emerald Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/emerald-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__emerald-spring","t":"Emerald Spring","d":"Explore the Emerald Spring shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/emerald-spring/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__emerald-sun","t":"Emerald Sun","d":"Explore the Emerald Sun shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/emerald-sun/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__forest-copper","t":"Forest Copper","d":"Explore the Forest Copper shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/forest-copper/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__forest-linen","t":"Forest Linen","d":"Explore the Forest Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/forest-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__frost-indigo","t":"Frost Indigo","d":"Explore the Frost Indigo shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/frost-indigo/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__golden-linen","t":"Golden Linen","d":"Explore the Golden Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/golden-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__google","t":"Google","d":"Explore the Google shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/google/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__graphite-mono-soft","t":"Graphite Mono Soft","d":"Explore the Graphite Mono Soft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono-soft/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__graphite-mono","t":"Graphite Mono","d":"Explore the Graphite Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/graphite-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__graphite","t":"Graphite","d":"Explore the Graphite shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/graphite/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__harbor-blue","t":"Harbor Blue","d":"Explore the Harbor Blue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/harbor-blue/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__harbor-steel","t":"Harbor Steel","d":"Explore the Harbor Steel shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/harbor-steel/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__honey-glow-gold","t":"Honey Glow Gold","d":"Explore the Honey Glow Gold shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/honey-glow-gold/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__honey-glow","t":"Honey Glow","d":"Explore the Honey Glow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/honey-glow/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__honey-sandstone","t":"Honey Sandstone","d":"Explore the Honey Sandstone shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/honey-sandstone/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__indigo-frost","t":"Indigo Frost","d":"Explore the Indigo Frost shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/indigo-frost/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__indigo-harbor","t":"Indigo Harbor","d":"Explore the Indigo Harbor shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/indigo-harbor/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__indigo-mono","t":"Indigo Mono","d":"Explore the Indigo Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/indigo-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__inkwell-mono","t":"Inkwell Mono","d":"Explore the Inkwell Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/inkwell-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__iris-bloom","t":"Iris Bloom","d":"Explore the Iris Bloom shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/iris-bloom/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__jade-linen","t":"Jade Linen","d":"Explore the Jade Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/jade-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__kodama-grove","t":"Kodama Grove","d":"Explore the Kodama Grove shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/kodama-grove/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__kupikod","t":"Kupikod","d":"Explore the Kupikod shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/kupikod/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lagoon-gold","t":"Lagoon Gold","d":"Explore the Lagoon Gold shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lagoon-gold/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lavender-dawn","t":"Lavender Dawn","d":"Explore the Lavender Dawn shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lavender-dawn/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lavender-glass","t":"Lavender Glass","d":"Explore the Lavender Glass shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lavender-glass/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lime-frost","t":"Lime Frost","d":"Explore the Lime Frost shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lime-frost/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lime-grove","t":"Lime Grove","d":"Explore the Lime Grove shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lime-grove/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__lime-haze","t":"Lime Haze","d":"Explore the Lime Haze shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/lime-haze/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__linen-stone","t":"Linen Stone","d":"Explore the Linen Stone shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/linen-stone/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__matrix-green","t":"Matrix Green","d":"Explore the Matrix Green shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/matrix-green/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__meadow-gold","t":"Meadow Gold","d":"Explore the Meadow Gold shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/meadow-gold/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__meadow-mist","t":"Meadow Mist","d":"Explore the Meadow Mist shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/meadow-mist/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__meridian-blue","t":"Meridian Blue","d":"Explore the Meridian Blue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/meridian-blue/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__metamask","t":"MetaMask","d":"Explore the MetaMask shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/metamask/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__midnight-bloom","t":"Midnight Bloom","d":"Explore the Midnight Bloom shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/midnight-bloom/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__mint-signal","t":"Mint Signal","d":"Explore the Mint Signal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/mint-signal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__mint-slate","t":"Mint Slate","d":"Explore the Mint Slate shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/mint-slate/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__mocha-mousse","t":"Mocha Mousse","d":"Explore the Mocha Mousse shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/mocha-mousse/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__modern-minimal","t":"Modern Minimal","d":"Explore the Modern Minimal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__mono","t":"Mono","d":"Explore the Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__nature","t":"Nature","d":"Explore the Nature shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/nature/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neo-brutalism","t":"Neo Brutalism","d":"Explore the Neo Brutalism shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neo-brutalism/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neon-block","t":"Neon Block","d":"Explore the Neon Block shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neon-block/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neon-clover","t":"Neon Clover","d":"Explore the Neon Clover shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neon-clover/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neon-cyber","t":"Neon Cyber","d":"Explore the Neon Cyber shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neon-cyber/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neon-magenta","t":"Neon Magenta","d":"Explore the Neon Magenta shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neon-magenta/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__neon-onyx","t":"Neon Onyx","d":"Explore the Neon Onyx shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/neon-onyx/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__northern-lights","t":"Northern Lights","d":"Explore the Northern Lights shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/northern-lights/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__notebook","t":"Notebook","d":"Explore the Notebook shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/notebook/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__nubank","t":"Nubank","d":"Explore the Nubank shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/nubank/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__nxtbet","t":"NXTBET","d":"Explore the NXTBET shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/nxtbet/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__ocean-breeze","t":"Ocean Breeze","d":"Explore the Ocean Breeze shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/ocean-breeze/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__ocean-saas","t":"Ocean SaaS","d":"Explore the Ocean SaaS shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/ocean-saas/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__onyx-mono","t":"Onyx Mono","d":"Explore the Onyx Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/onyx-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__openclaw","t":"OpenClaw","d":"Explore the OpenClaw shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/openclaw/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__openprofile-noir","t":"OpenProfile Noir","d":"Explore the OpenProfile Noir shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/openprofile-noir/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__openprofile","t":"OpenProfile","d":"Explore the OpenProfile shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/openprofile/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__orchid-light","t":"Orchid Light","d":"Explore the Orchid Light shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/orchid-light/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__pastel-dreams","t":"Pastel Dreams","d":"Explore the Pastel Dreams shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/pastel-dreams/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__periwinkle-ink","t":"Periwinkle Ink","d":"Explore the Periwinkle Ink shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/periwinkle-ink/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__perpetuity","t":"Perpetuity","d":"Explore the Perpetuity shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/perpetuity/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__pine-emerald","t":"Pine Emerald","d":"Explore the Pine Emerald shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/pine-emerald/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__pine-terminal","t":"Pine Terminal","d":"Explore the Pine Terminal shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/pine-terminal/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__powder-blue","t":"Powder Blue","d":"Explore the Powder Blue shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/powder-blue/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__pure-mono","t":"Pure Mono","d":"Explore the Pure Mono shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/pure-mono/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__purple-rain","t":"Purple Rain","d":"Explore the Purple Rain shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/purple-rain/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__quantum-rose","t":"Quantum Rose","d":"Explore the Quantum Rose shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/quantum-rose/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__retro-arcade","t":"Retro Arcade","d":"Explore the Retro Arcade shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/retro-arcade/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__ros-pine","t":"Rosé Pine","d":"Explore the Rosé Pine shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/ros-pine/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__rose-cobalt","t":"Rose Cobalt","d":"Explore the Rose Cobalt shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/rose-cobalt/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__rose-quartz","t":"Rose Quartz","d":"Explore the Rose Quartz shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/rose-quartz/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__rosewood-clay","t":"Rosewood Clay","d":"Explore the Rosewood Clay shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/rosewood-clay/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__ruby-sand","t":"Ruby Sand","d":"Explore the Ruby Sand shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/ruby-sand/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__saffron-light","t":"Saffron Light","d":"Explore the Saffron Light shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/saffron-light/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sage-cream","t":"Sage Cream","d":"Explore the Sage Cream shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sage-cream/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sage-garden","t":"Sage Garden","d":"Explore the Sage Garden shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sage-meadow","t":"Sage Meadow","d":"Explore the Sage Meadow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sage-meadow/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sage-mist","t":"Sage Mist","d":"Explore the Sage Mist shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sage-mist/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sage-moss","t":"Sage Moss","d":"Explore the Sage Moss shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sage-moss/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sakura-dawn","t":"Sakura Dawn","d":"Explore the Sakura Dawn shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sakura-dawn/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sapphire-dawn","t":"Sapphire Dawn","d":"Explore the Sapphire Dawn shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sapphire-dawn/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__scarlet-snow","t":"Scarlet Snow","d":"Explore the Scarlet Snow shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/scarlet-snow/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sea-glass","t":"Sea Glass","d":"Explore the Sea Glass shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sea-glass/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__shopify","t":"Shopify","d":"Explore the Shopify shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/shopify/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__slate-haze","t":"Slate Haze","d":"Explore the Slate Haze shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/slate-haze/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__slate-linen-azure","t":"Slate Linen Azure","d":"Explore the Slate Linen Azure shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/slate-linen-azure/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__slate-linen","t":"Slate Linen","d":"Explore the Slate Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/slate-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__soft-pop","t":"Soft Pop","d":"Explore the Soft Pop shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/soft-pop/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__solar-dusk","t":"Solar Dusk","d":"Explore the Solar Dusk shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/solar-dusk/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__solar-halo","t":"Solar Halo","d":"Explore the Solar Halo shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/solar-halo/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__starry-night","t":"Starry Night","d":"Explore the Starry Night shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/starry-night/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__still-harbor","t":"Still Harbor","d":"Explore the Still Harbor shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/still-harbor/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sunlit-sky","t":"Sunlit Sky","d":"Explore the Sunlit Sky shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sunlit-sky/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__sunset-horizon","t":"Sunset Horizon","d":"Explore the Sunset Horizon shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/sunset-horizon/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__supabase-sage","t":"Supabase Sage","d":"Explore the Supabase Sage shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/supabase-sage/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__supabase","t":"Supabase","d":"Explore the Supabase shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/supabase/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__swiss-red","t":"Swiss Red","d":"Explore the Swiss Red shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/swiss-red/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__t3-chat","t":"T3 Chat","d":"Explore the T3 Chat shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/t3-chat/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__tangerine-coral","t":"Tangerine Coral","d":"Explore the Tangerine Coral shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/tangerine-coral/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__tangerine","t":"Tangerine","d":"Explore the Tangerine shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/tangerine/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__teal-mist","t":"Teal Mist","d":"Explore the Teal Mist shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/teal-mist/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__teal-spring","t":"Teal Spring","d":"Explore the Teal Spring shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/teal-spring/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__twitter-azure","t":"Twitter Azure","d":"Explore the Twitter Azure shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/twitter-azure/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__twitter","t":"Twitter","d":"Explore the Twitter shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/twitter/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__vercel","t":"Vercel","d":"Explore the Vercel shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/vercel/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__verdant-sky","t":"Verdant Sky","d":"Explore the Verdant Sky shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/verdant-sky/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__vermilion-clay","t":"Vermilion Clay","d":"Explore the Vermilion Clay shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/vermilion-clay/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__vintage-paper","t":"Vintage Paper","d":"Explore the Vintage Paper shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/vintage-paper/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-bloom","t":"Violet Bloom","d":"Explore the Violet Bloom shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-bloom/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-disco","t":"Violet Disco","d":"Explore the Violet Disco shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-disco/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-dusk-linen","t":"Violet Dusk Linen","d":"Explore the Violet Dusk Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-dusk-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-dusk","t":"Violet Dusk","d":"Explore the Violet Dusk shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-dusk/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-halo","t":"Violet Halo","d":"Explore the Violet Halo shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-halo/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-loft","t":"Violet Loft","d":"Explore the Violet Loft shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-loft/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__violet-pulse","t":"Violet Pulse","d":"Explore the Violet Pulse shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/violet-pulse/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__vs-code","t":"VS Code","d":"Explore the VS Code shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/vs-code/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__walnut-grove","t":"Walnut Grove","d":"Explore the Walnut Grove shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/walnut-grove/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__whatsapp","t":"WhatsApp","d":"Explore the WhatsApp shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/whatsapp/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__wikipedia","t":"Wikipedia","d":"Explore the Wikipedia shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/wikipedia/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__zen-linen","t":"Zen Linen","d":"Explore the Zen Linen shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:serafimcloud__zozostack","t":"Zozostack","d":"Explore the Zozostack shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/themes/zozostack/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"serafimcloud"},{"id":"21st-theme:setyawan.arif13__terrel-sportswear-1785383925749","t":"Terrel Sportswear","d":"Explore the Terrel Sportswear shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"setyawan.arif13","st":"indexed","pl":"https://21st.dev/community/themes/terrel-sportswear-1785383925749/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"setyawan.arif13"},{"id":"21st-theme:sevilalpaslan__peh-1783537384752","t":"peh","d":"Explore the peh shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sevilalpaslan","st":"indexed","pl":"https://21st.dev/community/themes/peh-1783537384752/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sevilalpaslan"},{"id":"21st-theme:seyitsamed99__rose-vivid-1785091605551","t":"Rose Vivid","d":"Explore the Rose Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"seyitsamed99","st":"indexed","pl":"https://21st.dev/community/themes/rose-vivid-1785091605551/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"seyitsamed99"},{"id":"21st-theme:sh.saifsadeeq__google-remix-1783586287003","t":"Google remix","d":"Explore the Google remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sh.saifsadeeq","st":"indexed","pl":"https://21st.dev/community/themes/google-remix-1783586287003/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sh.saifsadeeq"},{"id":"21st-theme:shaid__pine-emerald-remix-1782677276617","t":"Pine Emerald remix","d":"Explore the Pine Emerald remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"shaid","st":"indexed","pl":"https://21st.dev/community/themes/pine-emerald-remix-1782677276617/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"shaid"},{"id":"21st-theme:shanelle__aurelia-1783288452888","t":"Aurelia","d":"Explore the Aurelia shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"shanelle","st":"indexed","pl":"https://21st.dev/community/themes/aurelia-1783288452888/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"shanelle"},{"id":"21st-theme:sharqyulduzi1931__claude-remix-1783253402897","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sharqyulduzi1931","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1783253402897/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sharqyulduzi1931"},{"id":"21st-theme:shekhawat.rd31__pitstop-quiz-1786203099094","t":"PitStop-Quiz","d":"Explore the PitStop-Quiz shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"shekhawat.rd31","st":"indexed","pl":"https://21st.dev/community/themes/pitstop-quiz-1786203099094/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"shekhawat.rd31"},{"id":"21st-theme:shuolv936__claude-amber-remix-1783094349600","t":"Claude Amber remix","d":"Explore the Claude Amber remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"shuolv936","st":"indexed","pl":"https://21st.dev/community/themes/claude-amber-remix-1783094349600/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"shuolv936"},{"id":"21st-theme:siakhabakayoko__ghost-1783468236568","t":"GHOST","d":"Explore the GHOST shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"siakhabakayoko","st":"indexed","pl":"https://21st.dev/community/themes/ghost-1783468236568/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"siakhabakayoko"},{"id":"21st-theme:sihabhasan154__google-remix-remix-1784232304140","t":"Google remix remix","d":"Explore the Google remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sihabhasan154","st":"indexed","pl":"https://21st.dev/community/themes/google-remix-remix-1784232304140/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sihabhasan154"},{"id":"21st-theme:sihabhasan154__google-remix-remix-remix-1784232627319","t":"Google remix remix remix","d":"Explore the Google remix remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sihabhasan154","st":"indexed","pl":"https://21st.dev/community/themes/google-remix-remix-remix-1784232627319/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sihabhasan154"},{"id":"21st-theme:sinasamipour__graphite-remix-1782675447824","t":"Graphite remix","d":"Explore the Graphite remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sinasamipour","st":"indexed","pl":"https://21st.dev/community/themes/graphite-remix-1782675447824/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sinasamipour"},{"id":"21st-theme:sindhujadessai04__violet-bloom-remix-1783432982833","t":"Violet Bloom remix","d":"Explore the Violet Bloom remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sindhujadessai04","st":"indexed","pl":"https://21st.dev/community/themes/violet-bloom-remix-1783432982833/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sindhujadessai04"},{"id":"21st-theme:sleepondev1__vercel-remix-1782650244081","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sleepondev1","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1782650244081/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sleepondev1"},{"id":"21st-theme:smitsharma3649__zen-linen-remix-1784118114636","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"smitsharma3649","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1784118114636/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"smitsharma3649"},{"id":"21st-theme:sprajeeth72__claude-remix-1782912664461","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"sprajeeth72","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1782912664461/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"sprajeeth72"},{"id":"21st-theme:srjaejsry__concrete-rust-remix-1782585800130","t":"Concrete Rust remix","d":"Explore the Concrete Rust remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"srjaejsry","st":"indexed","pl":"https://21st.dev/community/themes/concrete-rust-remix-1782585800130/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"srjaejsry"},{"id":"21st-theme:srjaejsry__kodama-grove-remix-1782585641809","t":"Kodama Grove remix","d":"Explore the Kodama Grove remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"srjaejsry","st":"indexed","pl":"https://21st.dev/community/themes/kodama-grove-remix-1782585641809/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"srjaejsry"},{"id":"21st-theme:srjaejsry__modern-minimal-remix-1782585538001","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"srjaejsry","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782585538001/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"srjaejsry"},{"id":"21st-theme:stavpardo__orange-vivid-1785848136049","t":"Orange Vivid","d":"Explore the Orange Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"stavpardo","st":"indexed","pl":"https://21st.dev/community/themes/orange-vivid-1785848136049/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"stavpardo"},{"id":"21st-theme:stavpardo__orange-vivid-2-1785848729772","t":"Orange Vivid 2","d":"Explore the Orange Vivid 2 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"stavpardo","st":"indexed","pl":"https://21st.dev/community/themes/orange-vivid-2-1785848729772/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"stavpardo"},{"id":"21st-theme:stephen.wolff__meadowport-1785937965754","t":"meadowport","d":"Explore the meadowport shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"stephen.wolff","st":"indexed","pl":"https://21st.dev/community/themes/meadowport-1785937965754/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"stephen.wolff"},{"id":"21st-theme:stephennmiller__clean-slate-remix-1782688043305","t":"Clean Slate remix","d":"Explore the Clean Slate remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"stephennmiller","st":"indexed","pl":"https://21st.dev/community/themes/clean-slate-remix-1782688043305/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"stephennmiller"},{"id":"21st-theme:stonirodrigo__azure-mono-remix-1783964192248","t":"Azure Mono remix","d":"Explore the Azure Mono remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"stonirodrigo","st":"indexed","pl":"https://21st.dev/community/themes/azure-mono-remix-1783964192248/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"stonirodrigo"},{"id":"21st-theme:synergy.nug__black-white-1782914012050","t":"Black / white","d":"Explore the Black / white shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"synergy.nug","st":"indexed","pl":"https://21st.dev/community/themes/black-white-1782914012050/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"synergy.nug"},{"id":"21st-theme:szpvangoo__phovira-quiet-utility-1786277107741","t":"Phovira Quiet Utility","d":"Explore the Phovira Quiet Utility shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"szpvangoo","st":"indexed","pl":"https://21st.dev/community/themes/phovira-quiet-utility-1786277107741/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"szpvangoo"},{"id":"21st-theme:tanushree11097__remix-tanu-1785328673827","t":"remix tanu","d":"Explore the remix tanu shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tanushree11097","st":"indexed","pl":"https://21st.dev/community/themes/remix-tanu-1785328673827/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tanushree11097"},{"id":"21st-theme:tbiazatti__indigo-harbor-remix-1782867300974","t":"Indigo Harbor remix","d":"Explore the Indigo Harbor remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tbiazatti","st":"indexed","pl":"https://21st.dev/community/themes/indigo-harbor-remix-1782867300974/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tbiazatti"},{"id":"21st-theme:teddy_26bd66b5__periwinkle-ink-remix-1783473474299","t":"Periwinkle Ink remix","d":"Explore the Periwinkle Ink remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"teddy_26bd66b5","st":"indexed","pl":"https://21st.dev/community/themes/periwinkle-ink-remix-1783473474299/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"teddy_26bd66b5"},{"id":"21st-theme:teddy_26bd66b5__sage-garden-remix-1783727004324","t":"Sage Garden remix","d":"Explore the Sage Garden remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"teddy_26bd66b5","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden-remix-1783727004324/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"teddy_26bd66b5"},{"id":"21st-theme:thatsgcc.work__amber-glow-remix-1783078674535","t":"Amber Glow remix","d":"Explore the Amber Glow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"thatsgcc.work","st":"indexed","pl":"https://21st.dev/community/themes/amber-glow-remix-1783078674535/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"thatsgcc.work"},{"id":"21st-theme:thatsgcc.work__amber-glow-remix-remix-1783078639315","t":"Amber Glow remix remix","d":"Explore the Amber Glow remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"thatsgcc.work","st":"indexed","pl":"https://21st.dev/community/themes/amber-glow-remix-remix-1783078639315/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"thatsgcc.work"},{"id":"21st-theme:tito2601__verdant-sky-remix-1784199289287","t":"Verdant Sky remix","d":"Explore the Verdant Sky remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tito2601","st":"indexed","pl":"https://21st.dev/community/themes/verdant-sky-remix-1784199289287/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tito2601"},{"id":"21st-theme:tomasitod__vaina-con-alan-que-no-tiene-nombre-1784089523218","t":"Vaina con Alan que no tiene nombre","d":"Explore the Vaina con Alan que no tiene nombre shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tomasitod","st":"indexed","pl":"https://21st.dev/community/themes/vaina-con-alan-que-no-tiene-nombre-1784089523218/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tomasitod"},{"id":"21st-theme:tomasitod__vaina-con-alan-que-no-tiene-nombre-remix-1784089533772","t":"Vaina con Alan que no tiene nombre remix","d":"Explore the Vaina con Alan que no tiene nombre remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tomasitod","st":"indexed","pl":"https://21st.dev/community/themes/vaina-con-alan-que-no-tiene-nombre-remix-1784089533772/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tomasitod"},{"id":"21st-theme:topatletpro__openprofile-noir-remix-1784024364303","t":"OpenProfile Noir remix","d":"Explore the OpenProfile Noir remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"topatletpro","st":"indexed","pl":"https://21st.dev/community/themes/openprofile-noir-remix-1784024364303/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"topatletpro"},{"id":"21st-theme:toribryan.design__mch-1785990762607","t":"MCH","d":"Explore the MCH shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"toribryan.design","st":"indexed","pl":"https://21st.dev/community/themes/mch-1785990762607/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"toribryan.design"},{"id":"21st-theme:traderstudioo__vercel-remix-1782948403550","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"traderstudioo","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1782948403550/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"traderstudioo"},{"id":"21st-theme:traderstudioo__vercel-remix-remix-1782948437702","t":"Vercel remix remix","d":"Explore the Vercel remix remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"traderstudioo","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-remix-1782948437702/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"traderstudioo"},{"id":"21st-theme:tranthanhlan42322__modern-minimal-remix-1782736477819","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tranthanhlan42322","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782736477819/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tranthanhlan42322"},{"id":"21st-theme:trendgo.az__cyber-cyan-remix-1782588483453","t":"Cyber Cyan remix","d":"Explore the Cyber Cyan remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"trendgo.az","st":"indexed","pl":"https://21st.dev/community/themes/cyber-cyan-remix-1782588483453/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"trendgo.az"},{"id":"21st-theme:trimaxlan98__zen-linen-remix-1782623168748","t":"Zen Linen remix","d":"Explore the Zen Linen remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"trimaxlan98","st":"indexed","pl":"https://21st.dev/community/themes/zen-linen-remix-1782623168748/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"trimaxlan98"},{"id":"21st-theme:tsaiaditya1234__claude-remix-1784097421198","t":"Claude remix","d":"Explore the Claude remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tsaiaditya1234","st":"indexed","pl":"https://21st.dev/community/themes/claude-remix-1784097421198/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tsaiaditya1234"},{"id":"21st-theme:tsilitsina1998ira__modern-minimal-remix-1782720306124","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"tsilitsina1998ira","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782720306124/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"tsilitsina1998ira"},{"id":"21st-theme:uwe.rechkemmer__sage-garden-remix-1782912332751","t":"Sage Garden remix","d":"Explore the Sage Garden remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"uwe.rechkemmer","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden-remix-1782912332751/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"uwe.rechkemmer"},{"id":"21st-theme:versavisual-vinicius__dashllll-1785455224407","t":"dashllll","d":"Explore the dashllll shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"versavisual-vinicius","st":"indexed","pl":"https://21st.dev/community/themes/dashllll-1785455224407/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"versavisual-vinicius"},{"id":"21st-theme:victor_3335e2ad__vercel-remix-1783709674704","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"victor_3335e2ad","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783709674704/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"victor_3335e2ad"},{"id":"21st-theme:vidson313_492d01fa__surena-1783565931703","t":"surena","d":"Explore the surena shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vidson313_492d01fa","st":"indexed","pl":"https://21st.dev/community/themes/surena-1783565931703/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vidson313_492d01fa"},{"id":"21st-theme:vishantsingh7518__cyberpunk-remix-1783747743061","t":"Cyberpunk remix","d":"Explore the Cyberpunk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vishantsingh7518","st":"indexed","pl":"https://21st.dev/community/themes/cyberpunk-remix-1783747743061/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vishantsingh7518"},{"id":"21st-theme:vishantsingh7518__perpetuity-remix-1783747784866","t":"Perpetuity remix","d":"Explore the Perpetuity remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vishantsingh7518","st":"indexed","pl":"https://21st.dev/community/themes/perpetuity-remix-1783747784866/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vishantsingh7518"},{"id":"21st-theme:vivaanjv__webly-liquid-neon-1783607151425","t":"webly-liquid-neon","d":"Explore the webly-liquid-neon shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vivaanjv","st":"indexed","pl":"https://21st.dev/community/themes/webly-liquid-neon-1783607151425/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vivaanjv"},{"id":"21st-theme:vlect23__morita-1784236361437","t":"Morita","d":"Explore the Morita shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vlect23","st":"indexed","pl":"https://21st.dev/community/themes/morita-1784236361437/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vlect23"},{"id":"21st-theme:vyrexon.official__darkmatter-remix-1782669298155","t":"Darkmatter remix","d":"Explore the Darkmatter remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"vyrexon.official","st":"indexed","pl":"https://21st.dev/community/themes/darkmatter-remix-1782669298155/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"vyrexon.official"},{"id":"21st-theme:wakeupsidd8__sage-garden-remix-1782636563514","t":"Sage Garden remix","d":"Explore the Sage Garden remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wakeupsidd8","st":"indexed","pl":"https://21st.dev/community/themes/sage-garden-remix-1782636563514/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wakeupsidd8"},{"id":"21st-theme:wangrs020818__green-vivid-1784347913037","t":"Green Vivid","d":"Explore the Green Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wangrs020818","st":"indexed","pl":"https://21st.dev/community/themes/green-vivid-1784347913037/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wangrs020818"},{"id":"21st-theme:wangrs020818__green-vivid11-1784348021224","t":"Green Vivid11","d":"Explore the Green Vivid11 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wangrs020818","st":"indexed","pl":"https://21st.dev/community/themes/green-vivid11-1784348021224/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wangrs020818"},{"id":"21st-theme:wearescimakers__perpetuity-remix-1782946970267","t":"Perpetuity remix","d":"Explore the Perpetuity remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wearescimakers","st":"indexed","pl":"https://21st.dev/community/themes/perpetuity-remix-1782946970267/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wearescimakers"},{"id":"21st-theme:wendongliu255__vercel-remix-1783689874404","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wendongliu255","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783689874404/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wendongliu255"},{"id":"21st-theme:wildanshidiq__tes-1-1787037480029","t":"tes 1","d":"Explore the tes 1 shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"wildanshidiq","st":"indexed","pl":"https://21st.dev/community/themes/tes-1-1787037480029/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"wildanshidiq"},{"id":"21st-theme:willmacca123__vercel-remix-1783074197647","t":"Vercel remix","d":"Explore the Vercel remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"willmacca123","st":"indexed","pl":"https://21st.dev/community/themes/vercel-remix-1783074197647/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"willmacca123"},{"id":"21st-theme:xavierrubillos__sky-vivid-1785667647897","t":"Sky Vivid","d":"Explore the Sky Vivid shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"xavierrubillos","st":"indexed","pl":"https://21st.dev/community/themes/sky-vivid-1785667647897/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"xavierrubillos"},{"id":"21st-theme:xcldlcx__doom-64-remix-1783681839603","t":"Doom 64 remix","d":"Explore the Doom 64 remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"xcldlcx","st":"indexed","pl":"https://21st.dev/community/themes/doom-64-remix-1783681839603/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"xcldlcx"},{"id":"21st-theme:xvale01__scarlet-snow-remix-1782782690107","t":"Scarlet Snow remix","d":"Explore the Scarlet Snow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"xvale01","st":"indexed","pl":"https://21st.dev/community/themes/scarlet-snow-remix-1782782690107/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"xvale01"},{"id":"21st-theme:xvale01__scarlet-snow-remix-1782783710708","t":"Scarlet Snow remix","d":"Explore the Scarlet Snow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"xvale01","st":"indexed","pl":"https://21st.dev/community/themes/scarlet-snow-remix-1782783710708/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"xvale01"},{"id":"21st-theme:xwx819502905__claude-crimson-remix-1783080127157","t":"Claude Crimson remix","d":"Explore the Claude Crimson remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"xwx819502905","st":"indexed","pl":"https://21st.dev/community/themes/claude-crimson-remix-1783080127157/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"xwx819502905"},{"id":"21st-theme:yangchangwei12138__ali-remix-1782702784347","t":"ali remix","d":"Explore the ali remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"yangchangwei12138","st":"indexed","pl":"https://21st.dev/community/themes/ali-remix-1782702784347/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"yangchangwei12138"},{"id":"21st-theme:yaoztorun__istanbul-1784301108141","t":"ISTANBUL","d":"Explore the ISTANBUL shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"yaoztorun","st":"indexed","pl":"https://21st.dev/community/themes/istanbul-1784301108141/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"yaoztorun"},{"id":"21st-theme:yashsehgal251103__scarlet-snow-remix-1784187946445","t":"Scarlet Snow remix","d":"Explore the Scarlet Snow remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"yashsehgal251103","st":"indexed","pl":"https://21st.dev/community/themes/scarlet-snow-remix-1784187946445/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"yashsehgal251103"},{"id":"21st-theme:yh888877__elegant-luxury-remix-1783264071940","t":"Elegant Luxury remix","d":"Explore the Elegant Luxury remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"yh888877","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-1783264071940/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"yh888877"},{"id":"21st-theme:yh888877__elegant-luxury-remix-1783355861355","t":"Elegant Luxury remix","d":"Explore the Elegant Luxury remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"yh888877","st":"indexed","pl":"https://21st.dev/community/themes/elegant-luxury-remix-1783355861355/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"yh888877"},{"id":"21st-theme:ykalagirisamy__frost-indigo-remix-1782571068522","t":"Frost Indigo remix","d":"Explore the Frost Indigo remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ykalagirisamy","st":"indexed","pl":"https://21st.dev/community/themes/frost-indigo-remix-1782571068522/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ykalagirisamy"},{"id":"21st-theme:ykanal1453__violet-dusk-remix-1783010595525","t":"Violet Dusk remix","d":"Explore the Violet Dusk remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"ykanal1453","st":"indexed","pl":"https://21st.dev/community/themes/violet-dusk-remix-1783010595525/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"ykanal1453"},{"id":"21st-theme:zainaftab589__modern-minimal-remix-1784072277603","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"zainaftab589","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1784072277603/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"zainaftab589"},{"id":"21st-theme:zhanyuyue7__claude-1782735223697","t":"claude","d":"Explore the claude shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"zhanyuyue7","st":"indexed","pl":"https://21st.dev/community/themes/claude-1782735223697/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"zhanyuyue7"},{"id":"21st-theme:zvifisher100__modern-minimal-remix-1782633308215","t":"Modern Minimal remix","d":"Explore the Modern Minimal remix shadcn/ui theme: styles, tokens, and UI previews from the 21st Community.","k":"theme","s":"21st","c":"themes/shadcn","g":"themes","a":"zvifisher100","st":"indexed","pl":"https://21st.dev/community/themes/modern-minimal-remix-1782633308215/opengraph-image-1re4pe?20eb48ff300b24fb","pc":"zvifisher100"},{"id":"shell:U0","t":"Shell: CRM GroupedRail + SISO tokens (the one shell)","k":"shell","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U0/","pc":"SISO","lv":1},{"id":"shell:U13","t":"Reusable modules (the parts every family composes)","d":"library-ui-spec.md §6: shell; heading+breadcrumb+state badges; authored reasoning block (source vs interpretation); ecosystem loop + typed relationship map; repo/satellite cards wi","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U13/","pc":"SISO","lv":1},{"id":"shell:U23","t":"Template gallery","d":"plan/templates.json: every row's reasoning, content contract, sections, rob-from lists (Action Model inventory + 21st.dev picks), example today, verification","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U23/","pc":"SISO","lv":1},{"id":"shell:U4","t":"Project one pager (bigger; the hub that links to the rest)","d":"plan/projects.json (repos with branch/head/private, urls with HTTP code, seats with last writeback, landed, said verbatim, left, modules with verification lines) + <repo>/.agents/{","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U4/","pc":"SISO","lv":1},{"id":"shell:U5","t":"God Question page","d":"GOD-QUESTIONS.md cards (question, decision target, counterexample, evidence lines), docs/frontier-question-template.html (exact question, why it matters, assumptions, evidence map,","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U5/","pc":"SISO","lv":1},{"id":"shell:U19","t":"Compute run page","d":"domains/compute/runs/<run>/{preregistration,run,acceptance,runtime-audit}.json, events.jsonl, metadata.json (effort applied), receipts","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U19/","pc":"SISO","lv":1},{"id":"shell:U3","t":"Library module (standard Work) page","d":"registry/works/<id>.json + releases + source_links; his categories 16:50: 'projects, niches, client, personal' → maps onto type + section; connected to the GitHub repo front end (r","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U3/","pc":"SISO","lv":1},{"id":"shell:U9","t":"Agent Zero page (his concepts + the fleet, on the Library)","d":"INTENT.md, BASELINE.md, plan/{modules,projects,decisions}.json, GOD-QUESTIONS.md, source/ (44 verbatim files, 111,930 words), ledger/OWNERS.md, the atlas","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U9/","pc":"SISO","lv":1},{"id":"shell:U1","t":"Library landing (root front door)","d":"catalog.json counts (47 Works, 86 Releases, 40 Snapshots, 8 inventories, 27 repos 23 public / 4 private, 17 industries, 22 GQ), the ecosystem loop from library-ui-spec §6, featured","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U1/","pc":"SISO","lv":1},{"id":"shell:U18","t":"Source page (his words)","d":"source/<date-time>-<slug>.md: verbatim block + Reads; transcript timestamp; the decisions/projects it caused","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U18/","pc":"SISO","lv":1},{"id":"shell:U2","t":"Section / catalogue","d":"catalog.json works[] (type, maturity, section, source_links), releases (86), snapshots (40), research.json, industries index","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U2/","pc":"SISO","lv":1},{"id":"shell:U16","t":"Decision page","d":"plan/decisions.json: id, date, his words, what it changed, what reverses it; the source/ file it came from","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U16/","pc":"SISO","lv":1},{"id":"shell:U17","t":"Agent seat page","d":"briefs/<SEAT>.md (born from), handoffs/<SEAT>.md, OWNERS.md lines, owners.log, rollout path + token maxima (GAPS M-4), verification line","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U17/","pc":"SISO","lv":1},{"id":"shell:U21","t":"Timeline page","d":"git log per repo (date, hash, author human/auto), OWNERS.md, decisions.json, ls source/, ls docs by mtime, owners.log","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U21/","pc":"SISO","lv":1},{"id":"shell:U8","t":"Industry detail / value research","d":"Foundry industry JSON (process hypotheses 70, capability rows 35), N2 value model + 10 examples, his 14:26 ask: 'per industry research with all of the projects and what we're offer","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U8/","pc":"SISO","lv":1},{"id":"shell:U14","t":"Person page","d":"PEOPLE-GRAPH-PROGRAM.md, client account repos, projects.json 'for whom', WhatsApp intake words (private)","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U14/","pc":"SISO","lv":1},{"id":"shell:U15","t":"Client account page","d":"his 5 Sep 22:20 'You've got client projects and you've got agency work. It should be split like that.'; account repo; the projects' U4 pages","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U15/","pc":"SISO","lv":1},{"id":"shell:U7","t":"Research doc reader","d":"site/docs/*.html, research.json, the Works of type knowledge_system/bundle","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U7/","pc":"SISO","lv":1},{"id":"shell:U11","t":"Private Work stub (client + personal)","d":"catalog repositories[] lifecycle_status + visibility; repos.json per front door; his 16:36: 'even client stock will have the listing of the repos even if they private'","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U11/","pc":"SISO","lv":1},{"id":"shell:U6","t":"Erdős question page","d":"SISO_Research/erdos/goals/*.md, DECISION-LOG.html, CHECKPOINT-2026-08-30.html, audits/, proof certificates","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U6/","pc":"SISO","lv":1},{"id":"shell:U10","t":"Now / activity","d":"owners.log lines (P5 writeback), OWNERS.md, herdr roster, rate_limits events","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U10/","pc":"SISO","lv":1},{"id":"shell:U12","t":"Release / Snapshot / Assembly record","d":"registry/{releases,snapshots,assemblies,source-inventories}/*.json (gls schemas, immutable history)","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U12/","pc":"SISO","lv":1},{"id":"shell:U20","t":"Play / skill page","d":"atlas/FRAMEWORKS-2026-09-05.html, skills-hub registry/skills/*/SKILL.md, install state per harness per machine (cold-discovery probes)","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U20/","pc":"SISO","lv":1},{"id":"shell:U22","t":"Estate / node page","d":"ESTATE.md, estate/SWEEP-*.md, briefs/MINI-SYNC.md, ledger mini-probe, herdr roster, rate_limits","k":"page","s":"siso-shell","c":"layout/page-shell","g":"layout","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/t/U22/","pc":"SISO","lv":1},{"id":"tool:gen-image","t":"Generate an image (OpenRouter)","d":"One generated image through OpenRouter, Google's Gemini 3.1 Flash Image by default. Writes NAME.png and a gen-log line with the cost. The key comes from OPENROUTER_API_KEY and is n","k":"tool","s":"siso","c":"tools/image-gen","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"tool:gen-image-fal","t":"Generate an image (fal, Nano Banana 2.1)","d":"gen-image's twin through fal.ai for when OpenRouter runs out: Nano Banana 2.1 at 1K, about $0.04 an image. FAL_KEY is read from the environment, never printed.","k":"tool","s":"siso","c":"tools/image-gen","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"tool:ui-pick","t":"ui-pick: rank his curated picks for a need","d":"Ranks Shaan's curated picks against what you need, reading his own note on each; about 1.5 s and $0.0006 a call. Ranks only; you still decide by looking.","k":"tool","s":"siso","c":"tools/pick","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"tool:pagecheck","t":"uihub check <url>: a page against the rules","d":"Checks a rendered page against the rules a script can see: box in a box, type sizes, emoji, inline colours, clickable non-buttons, motion without reduced motion; one screenshot, ex","k":"tool","s":"siso","c":"tools/check","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"tool:design-lab","t":"design-lab: pick by looking","d":"Builds a hosted side-by-side page of real rendered options so a person picks a direction by looking, not by reading names.","k":"tool","s":"siso","c":"tools/pick","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"tool:siso-shell-compose","t":"compose: a page from a siso-shell family","d":"Renders one of the 24 page families (U0-U23) from a data file into a static page inside the SISO shell.","k":"tool","s":"siso","c":"tools/compose","g":"tools","a":"SISO","st":"ours","pl":"https://siso-shell.pages.dev/how/","pc":"SISO"},{"id":"tool:shoot","t":"shoot: headless screenshots","d":"Screenshots of a URL through camofox (headless, never opens a window); one tab, closed after.","k":"tool","s":"siso","c":"tools/check","g":"tools","a":"SISO","st":"ours","pc":"SISO"},{"id":"21st:efferd__search-modal","t":"Search modal","k":"component","s":"21st","c":"overlays/dialog","g":"overlays","a":"efferd","st":"indexed","pl":"https://21st.dev/og/component/efferd/search-modal","pc":"efferd"},{"id":"21st:anubra266__popover-notifications","t":"Popover notifications","k":"component","s":"21st","c":"overlays/popover","g":"overlays","a":"anubra266","st":"indexed","pl":"https://21st.dev/og/component/anubra266/popover-1","pc":"anubra266"},{"id":"21st:felipemenezes098__card-05","t":"Card 05","k":"component","s":"21st","c":"data-display/card","g":"data-display","a":"felipemenezes098","st":"indexed","pl":"https://21st.dev/community/components/felipemenezes098/card-05/opengraph-image-1jdxmh?6205e47b55e0293a","pc":"felipemenezes098"},{"id":"21st:serafimcloud__incident-status-timeline","t":"Incident status timeline","k":"component","s":"21st","c":"other","g":"other","a":"serafimcloud","st":"indexed","pl":"https://21st.dev/community/components/serafimcloud/incident-status-timeline/opengraph-image-1jdxmh?6205e47b55e0293a","pc":"serafimcloud"}]}