Introduction

Cnippet UI is a growing collection of reusable, production‑ready building blocks for modern React/Next.js apps.

Components: Accessible UI primitives and patterns built with Radix and Tailwind.
Motion: Delightful interaction patterns powered by motion (Framer Motion v12).
Charts: Examples built with recharts.

Use them by copying code directly into your project or by cloning the repository to explore, tweak, and reuse.

Quick start

Follow these four simple steps to get going.

Create an account or sign in to unlock the full library.

Clone cnippet-dev/all-elements to get every example and component in one place.

git clone https://github.com/cnippet-dev/all-elements

Read the installation guide to set up dependencies and project structure.

Open any example and copy the code into your app. Adjust import paths for your structure.

UI Components: See content/components for usage and installation per component. Each page includes a collapsible source you can copy.
Motion Effects: See content/motion for interactive patterns like accordions, carousels, and reveal effects.
Docs/Guides: You are here. Start with the Installation guide next.

GitHub: https://github.com/cnippet-dev/all-elements