Search visuals

Search the library and jump to any visual preview.

Installation

CodedVisuals is compatible with any shadcn/ui + React + Tailwind CSS project out of the box. Compositions use the same design tokens shadcn/ui already defines, so they inherit your theme and dark mode with no extra configuration.

Compositions rely on two packages: Motion, which powers the animations, and lucide-react, the icon set they draw from. Most shadcn/ui projects already include them both, but some are configured to use a different icon library, so it is worth confirming.

Using the CLI? Nothing to install

If you add compositions with the shadcn CLI, you can skip this page entirely. Each composition declares its dependencies, so the CLI installs them for you the first time you add one if needed:

npx shadcn@latest add @codedvisuals/charts-line

The command above pulls in both the composition file and its packages. The CLI uses the private CodedVisuals registry, which needs a one time setup (issue a token, add the registry to your components.json); see the Registry guide. The manual steps below are only needed if you copy a composition's source by hand.

Install the dependencies

When copying source by hand, install the two packages yourself:

npm install motion lucide-react

Using a different package manager? pnpm add motion lucide-react or yarn add motion lucide-react work the same way.

Make sure you have lucide-react

Compositions import their icons from lucide-react, which is shadcn/ui's default icon library, so most projects already have it. Some shadcn/ui setups are configured to use a different library instead (for example Radix Icons, via "iconLibrary": "radix" in components.json). If yours is, lucide-react will not be installed, so add it with the command above. You can keep your own icon library everywhere else: compositions only need lucide-react for the icons inside them.

With Motion and lucide-react in place, head to Usage to copy a composition into your project and customize it.

Optional: install the AI skill package

If you use an AI coding agent (Claude Code, Cursor, Codex, and others), install the CodedVisuals skill so it knows the full catalog, every composition's props and defaults, and how to install one. Then just ask, for example "add visuals to my features grid section" or "drop in a line chart in the first feature of my bento grid", and it picks and wires them up for you.

npx skills add pixelcave/skills --skill codedvisuals

This uses the skills CLI and needs only npx, nothing to install globally. Add -g to make the skill available in every project instead of just the current one.

When a new update is released, run the following command to update the skill (or just re-add it like you did the first time):

npx skills update pixelcave/skills --skill codedvisuals

Requirements

  • React 18 or newer
  • Tailwind CSS v4
  • TypeScript
  • shadcn/ui tokens defined in your stylesheet (the standard :root and .dark variables)
  • Motion and lucide-react (installed above)

Not using shadcn/ui? Follow the Manual setup guide to add the few pieces compositions rely on.