# Chocolate UI > Chocolate UI is a library of 2690 animated React blocks and 180 components for shadcn/ui and Tailwind CSS v4, animated with motion. Items install with the shadcn CLI (`npx shadcn@latest add @chocolate/`) or through the Chocolate UI MCP server, so AI coding assistants can search and add them. 389 items are free (MIT); everything else is included in a one-time $79 lifetime license. Key facts: - Website: https://chocolateui.com - Registry: https://api.chocolateui.com/r/{name}.json (shadcn registry format; Pro items need `Authorization: Bearer $CHOCOLATE_LICENSE_KEY`) - MCP server (Streamable HTTP): https://api.chocolateui.com/mcp - Stack: React 19, TypeScript, Tailwind CSS v4, shadcn/ui tokens, motion, lucide-react - Every block is one self-contained file; all copy, images and data are props with realistic defaults. ## Docs - [Introduction](https://chocolateui.com/docs): Chocolate UI is a library of animated, accessible React blocks and components for shadcn/ui and Tailwind CSS v4, with a CLI and MCP server. - [Installation](https://chocolateui.com/docs/installation): Install Chocolate UI blocks with the shadcn CLI: add the @chocolate registry to components.json, set your license key and import the theme. - [CLI](https://chocolateui.com/docs/cli): Use the Chocolate UI CLI to init a project, add blocks and components, search the registry, log in with a license key and run the MCP server. - [Theming](https://chocolateui.com/docs/theming): Theme Chocolate UI with shadcn CSS variables: colors, radius, fonts and dark mode apply to every block and component. - [Animation](https://chocolateui.com/docs/animation): How Chocolate UI animates: motion defaults, entrance reveals, reduced-motion support and timing rules shared by every block and component. - [MCP server](https://chocolateui.com/docs/mcp): Connect Claude Code, Cursor, Windsurf or Claude Desktop to the Chocolate UI MCP server to search, read and compose animated shadcn blocks. - [Licensing](https://chocolateui.com/docs/licensing): Chocolate UI licensing: free items are MIT licensed, Pro items come with a lifetime commercial license for unlimited projects. - [Changelog](https://chocolateui.com/docs/changelog): Release notes for Chocolate UI: new animated shadcn blocks, components, CLI and MCP server updates. - [MCP setup](https://chocolateui.com/mcp): copy-paste configs for Claude Code, Cursor, Windsurf and Claude Desktop - [Pricing](https://chocolateui.com/pricing): free vs. $79 lifetime All Access ## Block categories - [About blocks](https://chocolateui.com/blocks/about): 43 animated shadcn about sections (2 free) - [Application Shell blocks](https://chocolateui.com/blocks/application-shell): 47 animated shadcn application shell sections (2 free) - [Awards blocks](https://chocolateui.com/blocks/awards): 23 animated shadcn awards sections (2 free) - [Background Pattern blocks](https://chocolateui.com/blocks/background-pattern): 145 animated shadcn background pattern sections (2 free) - [Banner blocks](https://chocolateui.com/blocks/banner): 25 animated shadcn banner sections (2 free) - [Bento blocks](https://chocolateui.com/blocks/bento): 54 animated shadcn bento sections (2 free) - [Blog blocks](https://chocolateui.com/blocks/blog): 128 animated shadcn blog sections (2 free) - [Blog Post blocks](https://chocolateui.com/blocks/blog-post): 39 animated shadcn blog post sections (2 free) - [Book A Demo blocks](https://chocolateui.com/blocks/book-a-demo): 3 animated shadcn book a demo sections (2 free) - [Calendar blocks](https://chocolateui.com/blocks/calendar): 26 animated shadcn calendar sections (2 free) - [Careers blocks](https://chocolateui.com/blocks/careers): 16 animated shadcn careers sections (2 free) - [Careers Intro blocks](https://chocolateui.com/blocks/careers-intro): 4 animated shadcn careers intro sections (2 free) - [Case Studies blocks](https://chocolateui.com/blocks/case-studies): 17 animated shadcn case studies sections (2 free) - [Case Study blocks](https://chocolateui.com/blocks/casestudy): 4 animated shadcn case study sections (2 free) - [Changelog blocks](https://chocolateui.com/blocks/changelog): 7 animated shadcn changelog sections (2 free) - [Chart Card blocks](https://chocolateui.com/blocks/chart-card): 27 animated shadcn chart card sections (2 free) - [Chart Group blocks](https://chocolateui.com/blocks/chart-group): 15 animated shadcn chart group sections (2 free) - [Checkout blocks](https://chocolateui.com/blocks/checkout): 8 animated shadcn checkout sections (1 free) - [Code Example blocks](https://chocolateui.com/blocks/code-example): 9 animated shadcn code example sections (2 free) - [Community blocks](https://chocolateui.com/blocks/community): 7 animated shadcn community sections (2 free) - [Company Benefits blocks](https://chocolateui.com/blocks/company-benefits): 4 animated shadcn company benefits sections (2 free) - [Compare blocks](https://chocolateui.com/blocks/compare): 10 animated shadcn compare sections (2 free) - [Compare Products blocks](https://chocolateui.com/blocks/compare-products): 5 animated shadcn compare products sections (2 free) - [Compliance blocks](https://chocolateui.com/blocks/compliance): 12 animated shadcn compliance sections (2 free) - [Contact blocks](https://chocolateui.com/blocks/contact): 46 animated shadcn contact sections (2 free) - [Content blocks](https://chocolateui.com/blocks/content): 4 animated shadcn content sections (2 free) - [Cookie Banner blocks](https://chocolateui.com/blocks/cookie-banner): 19 animated shadcn cookie banner sections (2 free) - [Coverflow blocks](https://chocolateui.com/blocks/coverflow): 41 animated shadcn coverflow sections (2 free) - [Crud Companies blocks](https://chocolateui.com/blocks/crud-companies): 9 animated shadcn crud companies sections (2 free) - [CTA blocks](https://chocolateui.com/blocks/cta): 56 animated shadcn cta sections (2 free) - [Customer Details blocks](https://chocolateui.com/blocks/customer-details): 3 animated shadcn customer details sections (2 free) - [Dashboard blocks](https://chocolateui.com/blocks/dashboard): 40 animated shadcn dashboard sections (2 free) - [Data Table blocks](https://chocolateui.com/blocks/data-table): 32 animated shadcn data table sections (2 free) - [Deals blocks](https://chocolateui.com/blocks/deals): 5 animated shadcn deals sections (2 free) - [Device Mockup blocks](https://chocolateui.com/blocks/device-mockup): 38 animated shadcn device mockup sections (2 free) - [Download blocks](https://chocolateui.com/blocks/download): 24 animated shadcn download sections (2 free) - [Ecommerce Footer blocks](https://chocolateui.com/blocks/ecommerce-footer): 6 animated shadcn ecommerce footer sections (2 free) - [Ecommerce Hero blocks](https://chocolateui.com/blocks/ecommerce-hero): 6 animated shadcn ecommerce hero sections (2 free) - [Ecommerce Navbar blocks](https://chocolateui.com/blocks/ecommerce-navbar): 2 animated shadcn ecommerce navbar sections (2 free) - [Edit Product blocks](https://chocolateui.com/blocks/edit-product): 4 animated shadcn edit product sections (1 free) - [Experience blocks](https://chocolateui.com/blocks/experience): 4 animated shadcn experience sections (2 free) - [FAQ blocks](https://chocolateui.com/blocks/faq): 38 animated shadcn faq sections (2 free) - [Feature blocks](https://chocolateui.com/blocks/feature): 334 animated shadcn feature sections (2 free) - [Feedback blocks](https://chocolateui.com/blocks/feedback): 10 animated shadcn feedback sections (5 free) - [Field Mapping blocks](https://chocolateui.com/blocks/field-mapping): 2 animated shadcn field mapping sections (2 free) - [Footer blocks](https://chocolateui.com/blocks/footer): 45 animated shadcn footer sections (2 free) - [Forgot Password blocks](https://chocolateui.com/blocks/forgot-password): 4 animated shadcn forgot password sections (2 free) - [Gallery blocks](https://chocolateui.com/blocks/gallery): 127 animated shadcn gallery sections (2 free) - [Gantt blocks](https://chocolateui.com/blocks/gantt): 1 animated shadcn gantt sections (1 free) - [Help blocks](https://chocolateui.com/blocks/help): 2 animated shadcn help sections (2 free) - [Help Center blocks](https://chocolateui.com/blocks/help-center): 2 animated shadcn help center sections (2 free) - [Hero blocks](https://chocolateui.com/blocks/hero): 292 animated shadcn hero sections (2 free) - [Immersive blocks](https://chocolateui.com/blocks/immersive): 5 animated shadcn immersive sections (2 free) - [Inbox blocks](https://chocolateui.com/blocks/inbox): 7 animated shadcn inbox sections (2 free) - [Incentives blocks](https://chocolateui.com/blocks/incentives): 6 animated shadcn incentives sections (2 free) - [Industries blocks](https://chocolateui.com/blocks/industries): 4 animated shadcn industries sections (2 free) - [Integrations blocks](https://chocolateui.com/blocks/integrations): 35 animated shadcn integrations sections (2 free) - [Investors blocks](https://chocolateui.com/blocks/investors): 1 animated shadcn investors sections (1 free) - [Invite User blocks](https://chocolateui.com/blocks/invite-user): 11 animated shadcn invite user sections (2 free) - [Issue Detail blocks](https://chocolateui.com/blocks/issue-detail): 2 animated shadcn issue detail sections (2 free) - [Issue List blocks](https://chocolateui.com/blocks/issue-list): 4 animated shadcn issue list sections (1 free) - [Kanban blocks](https://chocolateui.com/blocks/kanban): 3 animated shadcn kanban sections (2 free) - [Launch blocks](https://chocolateui.com/blocks/launch): 2 animated shadcn launch sections (2 free) - [Leaderboard blocks](https://chocolateui.com/blocks/leaderboard): 3 animated shadcn leaderboard sections (2 free) - [List blocks](https://chocolateui.com/blocks/list): 3 animated shadcn list sections (2 free) - [Live Purchase blocks](https://chocolateui.com/blocks/live-purchase): 3 animated shadcn live purchase sections (2 free) - [Login blocks](https://chocolateui.com/blocks/login): 8 animated shadcn login sections (2 free) - [Logos blocks](https://chocolateui.com/blocks/logos): 40 animated shadcn logos sections (2 free) - [Magic Link blocks](https://chocolateui.com/blocks/magic-link): 4 animated shadcn magic link sections (2 free) - [Member List blocks](https://chocolateui.com/blocks/member-list): 6 animated shadcn member list sections (2 free) - [Navbar blocks](https://chocolateui.com/blocks/navbar): 21 animated shadcn navbar sections (2 free) - [Newsletter blocks](https://chocolateui.com/blocks/newsletter): 6 animated shadcn newsletter sections (2 free) - [Not Found blocks](https://chocolateui.com/blocks/not-found): 2 animated shadcn not found sections (2 free) - [Offer Modal blocks](https://chocolateui.com/blocks/offer-modal): 3 animated shadcn offer modal sections (2 free) - [Onboarding blocks](https://chocolateui.com/blocks/onboarding): 2 animated shadcn onboarding sections (2 free) - [Order History blocks](https://chocolateui.com/blocks/order-history): 5 animated shadcn order history sections (2 free) - [Order Management blocks](https://chocolateui.com/blocks/order-management): 6 animated shadcn order management sections (1 free) - [Order Summary blocks](https://chocolateui.com/blocks/order-summary): 8 animated shadcn order summary sections (1 free) - [Our Story blocks](https://chocolateui.com/blocks/our-story): 7 animated shadcn our story sections (2 free) - [Passkey blocks](https://chocolateui.com/blocks/passkey): 2 animated shadcn passkey sections (2 free) - [Payment Methods blocks](https://chocolateui.com/blocks/payment-methods): 4 animated shadcn payment methods sections (2 free) - [Portfolio blocks](https://chocolateui.com/blocks/portfolio): 3 animated shadcn portfolio sections (2 free) - [Press blocks](https://chocolateui.com/blocks/press): 1 animated shadcn press sections (1 free) - [Pricing blocks](https://chocolateui.com/blocks/pricing): 96 animated shadcn pricing sections (2 free) - [Process blocks](https://chocolateui.com/blocks/process): 4 animated shadcn process sections (2 free) - [Product Card blocks](https://chocolateui.com/blocks/product-card): 14 animated shadcn product card sections (2 free) - [Product Categories blocks](https://chocolateui.com/blocks/product-categories): 5 animated shadcn product categories sections (2 free) - [Product Detail blocks](https://chocolateui.com/blocks/product-detail): 10 animated shadcn product detail sections (2 free) - [Product Gallery blocks](https://chocolateui.com/blocks/product-gallery): 5 animated shadcn product gallery sections (2 free) - [Product Inventory blocks](https://chocolateui.com/blocks/product-inventory): 4 animated shadcn product inventory sections (2 free) - [Product List blocks](https://chocolateui.com/blocks/product-list): 10 animated shadcn product list sections (2 free) - [Product Quick View blocks](https://chocolateui.com/blocks/product-quick-view): 5 animated shadcn product quick view sections (2 free) - [Product Search blocks](https://chocolateui.com/blocks/product-search): 7 animated shadcn product search sections (2 free) - [Product Specs blocks](https://chocolateui.com/blocks/product-specs): 2 animated shadcn product specs sections (2 free) - [Project blocks](https://chocolateui.com/blocks/project): 34 animated shadcn project sections (2 free) - [Project Detail blocks](https://chocolateui.com/blocks/project-detail): 2 animated shadcn project detail sections (2 free) - [Project List blocks](https://chocolateui.com/blocks/project-list): 4 animated shadcn project list sections (2 free) - [Projects blocks](https://chocolateui.com/blocks/projects): 35 animated shadcn projects sections (2 free) - [Promo Banner blocks](https://chocolateui.com/blocks/promo-banner): 7 animated shadcn promo banner sections (2 free) - [Rate Card blocks](https://chocolateui.com/blocks/rate-card): 2 animated shadcn rate card sections (2 free) - [Reset Password blocks](https://chocolateui.com/blocks/reset-password): 5 animated shadcn reset password sections (2 free) - [Resource blocks](https://chocolateui.com/blocks/resource): 3 animated shadcn resource sections (2 free) - [Resources blocks](https://chocolateui.com/blocks/resources): 8 animated shadcn resources sections (2 free) - [Reviews blocks](https://chocolateui.com/blocks/reviews): 14 animated shadcn reviews sections (2 free) - [Service blocks](https://chocolateui.com/blocks/service): 7 animated shadcn service sections (2 free) - [Services blocks](https://chocolateui.com/blocks/services): 19 animated shadcn services sections (2 free) - [Settings Integrations blocks](https://chocolateui.com/blocks/settings-integrations): 10 animated shadcn settings integrations sections (2 free) - [Settings Members blocks](https://chocolateui.com/blocks/settings-members): 5 animated shadcn settings members sections (2 free) - [Settings Notifications blocks](https://chocolateui.com/blocks/settings-notifications): 4 animated shadcn settings notifications sections (2 free) - [Settings Profile blocks](https://chocolateui.com/blocks/settings-profile): 9 animated shadcn settings profile sections (2 free) - [Shader blocks](https://chocolateui.com/blocks/shader): 20 animated shadcn shader sections (2 free) - [Shipments blocks](https://chocolateui.com/blocks/shipments): 3 animated shadcn shipments sections (2 free) - [Shop The Look blocks](https://chocolateui.com/blocks/shop-the-look): 7 animated shadcn shop the look sections (2 free) - [Shopping Cart blocks](https://chocolateui.com/blocks/shopping-cart): 14 animated shadcn shopping cart sections (2 free) - [Sidebar blocks](https://chocolateui.com/blocks/sidebar): 21 animated shadcn sidebar sections (2 free) - [Signup blocks](https://chocolateui.com/blocks/signup): 10 animated shadcn signup sections (2 free) - [Skills blocks](https://chocolateui.com/blocks/skills): 2 animated shadcn skills sections (2 free) - [Social Media Trending blocks](https://chocolateui.com/blocks/social-media-trending): 8 animated shadcn social media trending sections (2 free) - [Stats blocks](https://chocolateui.com/blocks/stats): 20 animated shadcn stats sections (2 free) - [Stats Card blocks](https://chocolateui.com/blocks/stats-card): 10 animated shadcn stats card sections (2 free) - [Team blocks](https://chocolateui.com/blocks/team): 48 animated shadcn team sections (2 free) - [Team List blocks](https://chocolateui.com/blocks/team-list): 6 animated shadcn team list sections (2 free) - [Template blocks](https://chocolateui.com/blocks/template): 10 animated shadcn template sections (2 free) - [Testimonial blocks](https://chocolateui.com/blocks/testimonial): 40 animated shadcn testimonial sections (2 free) - [Timeline blocks](https://chocolateui.com/blocks/timeline): 19 animated shadcn timeline sections (2 free) - [Todo List blocks](https://chocolateui.com/blocks/todo-list): 10 animated shadcn todo list sections (2 free) - [Trust Strip blocks](https://chocolateui.com/blocks/trust-strip): 4 animated shadcn trust strip sections (2 free) - [Two Factor blocks](https://chocolateui.com/blocks/two-factor): 4 animated shadcn two factor sections (2 free) - [User Profile blocks](https://chocolateui.com/blocks/user-profile): 12 animated shadcn user profile sections (2 free) - [Verify Email blocks](https://chocolateui.com/blocks/verify-email): 6 animated shadcn verify email sections (2 free) - [Waitlist blocks](https://chocolateui.com/blocks/waitlist): 3 animated shadcn waitlist sections (2 free) - [Wishlist blocks](https://chocolateui.com/blocks/wishlist): 3 animated shadcn wishlist sections (1 free) - [Workplace Photos blocks](https://chocolateui.com/blocks/workplace-photos): 1 animated shadcn workplace photos sections (1 free) ## Components - [All components](https://chocolateui.com/components): 121 animated components (charts, dashboards, AI chat, text effects, backgrounds) and 59 UI primitives ## Optional - [Full text for LLMs](https://chocolateui.com/llms-full.txt): every doc page plus every block and component with its description, tier and install command - [Sitemap](https://chocolateui.com/sitemap.xml)