# [OriginKit](<https://www.originkit.dev/>)

[originkit.dev](<https://www.originkit.dev/>)

The largest free animated component library for modern websites. Copy the code, use it in Framer, or connect through MCP.

[UI & UX Design](<https://creatorstoolbox.com/communities/ui-ux>)[Web Design](<https://creatorstoolbox.com/communities/web-design>)[Development](<https://creatorstoolbox.com/communities/development>)[Animation & Motion](<https://creatorstoolbox.com/communities/animation>)[Automation](<https://creatorstoolbox.com/communities/automation>)

Media 1 of 3

## About OriginKit

OriginKit is a free animated component library for building modern websites, billed as the largest of its kind. Every component ships with motion built in, so you get polished animated UI without writing the animation code yourself. Use components three ways: copy the code straight into your project, use them in Framer, or connect through MCP so AI coding agents can browse and place components for you.

Pricing model: Free

## Features

- Free animated UI components

- Copy-paste code for your site

- Framer support

- MCP server so AI agents can use the library

## FAQs

Common questions about OriginKit

Is OriginKit free?

Yes, the component library is free to use.

How do I use the components?

Copy the code into your project, use them in Framer, or connect your AI agent to the OriginKit MCP server.

## Similar products

- [![Border Beam](<https://www.google.com/s2/favicons?domain=jakubantalik.com&sz=128>)

Border Beambeam.jakubantalik.com

A lightweight React component that renders an animated glowing border beam effect — multiple sizes, color variants, and themes.](<https://creatorstoolbox.com/products/border-beam>)

- [![Loading UI](<https://www.google.com/s2/favicons?domain=loading-ui.com&sz=128>)

Loading UIloading-ui.com

Free, open-source CSS and React loaders, spinners, and animations for building polished, accessible loading states.](<https://creatorstoolbox.com/products/loading-ui>)

- [![Dot Matrix](<https://dotmatrix.zzzzshawn.cloud/icon.svg>)

Dot Matrixdotmatrix.zzzzshawn.cloud

Open-source React component library of 55+ expressive dot-matrix loaders — install via the shadcn registry and own the code locally.](<https://creatorstoolbox.com/products/dotmatrix>)

- [![ObsidianUI](<https://www.obsidianui.dev/icon.png>)

ObsidianUIobsidianui.dev

Open-source React and Tailwind CSS component library of animated, interactive UI effects you can preview, copy, or install via the shadcn CLI.](<https://creatorstoolbox.com/products/obsidian-ui>)

- [![Skills for Designers and Engineers](<https://creatorstoolbox.com/images/logos/emil-kowalski-skills-75a9447b600d5575d919645f8325ab45f11c20a4fe6bb9ee38a6d79aa9858ba5.png>)

Skills for Designers and Engineersgithub.com/emilkowalski/skills

Free MIT-licensed agent skills for designers and engineers, covering animation taste, performance, and small interface mistakes.](<https://creatorstoolbox.com/products/emil-kowalski-skills>)

- [Stageshowbenji.org

Free MIT-licensed agent skill for faux product UI stills, cursor animations, and bento grids, in React and plain CSS.](<https://creatorstoolbox.com/products/stageshow>)

---
Canonical source: https://creatorstoolbox.com/products/originkit