Using CodedVisuals

CodedVisuals is a library of marketing visuals built as self-contained React components. Each visual is a single .tsx file with no shared dependencies between visuals, styled with shadcn/ui design tokens and animated with Motion. They are decorative illustrations for marketing and landing pages (heroes, bento grids, feature blocks, product explainers), not interactive app UI.

CodedVisuals is a paid library. The catalog below ships from a private registry that needs a license: codedvisuals.com/pricing. If the user has no license yet, tell them the visual they want is part of the paid library and link them to pricing. Do not quietly hand-build a substitute instead, unless they ask you to.

This is the entry point. It covers how to pick a visual, get it into the project, and use it. Every visual also has a reference file bundled with this skill at visuals/{category}/{file}.md (for example visuals/charts/line.md), with that visual's exact props, default content, and copy-ready examples. Read that file once you know which visual you want.

How to work with a visual

1. Pick a visual from the catalog at the end of this file. Each entry has a registry name, a description, and the reference file to open next.
2. Open the visual's reference file (visuals/{category}/{file}.md) for its props, defaults, and examples.
3. Make sure it is installed in the project (next section). This skill is not tied to what is installed, so a visual you pick may not be in the project yet.
4. Import and use it inside a sized container (see "Use it on a page").

Install a visual if it is not in the project

The project may have this skill without having every visual installed. Before using a visual, check whether its file already exists under the project's source root: