Usage

Every composition is a single React component. Import it, give it a sized container, and tune its behavior with props or directly.

Add it to your project

There are two ways to bring a composition into your project.

1. Use the CLI (recommended)

If you are on shadcn/ui, the fastest path is the CLI. After a one time registry setup (issue your token and add the registry to components.json), install any visual by its registry name:

npx shadcn@latest add @codedvisuals/charts-line

Using a different package manager? pnpm dlx shadcn@latest add ..., yarn shadcn@latest add ..., or bunx --bun shadcn@latest add ... work the same way.

Each composition declares its dependencies, so the CLI installs them for you the first time you add one if needed. You do not need to install anything by hand on this path: the command above handles both the file and its packages. Every preview page also shows the exact install command via the Install button.

2. Copy the source

Prefer to paste it in yourself? On any preview page, logged in users can copy the source of a visual or download its file, then drop it into their own components/codedvisuals directory. Each preview card also lets you copy a ready to use import and usage snippet for that exact variation. This path does not install anything for you, so make sure Motion and lucide-react are present first (see Installation).

Give it a container

Compositions fill their parent. Wrap one in a box with a height, so it sits neatly inside your layout:

import ChartLine from "@/components/codedvisuals/charts/line";

export default function LandingPage() {
  return (
    <>
      {/* ... */}
      <div className="h-96 rounded-2xl border bg-card">
        <ChartLine animated />
      </div>
      {/* ... */}
    </>
  );
}

Control the animation

Animation is opt-in through three props:

• animated turns motion on. Without it the composition renders in its final, static state.
• trigger decides when the entrance plays:
  • mount: animate as soon as the composition renders.
  • inView (default): animate once when it scrolls into view.
  • inViewRepeat: replay every time it scrolls back into view.
• hover enables hover micro-interactions where a composition supports them.

<ChartLine animated trigger="mount" />
<ChartLine animated trigger="inView" />
<ChartLine animated trigger="inViewRepeat" hover />

To ship a completely still illustration, omit animated entirely.

Customize with props

Compositions are data-driven and many of them accept a set of props to customize their appearance and data. Swap copy, values, icons, and counts through typed props instead of editing the underlying markup:

<ChartLine
  isometric
  title="Conversions"
  badge="7d"
  value="4.82%"
  change="+0.6pp"
  ticks={["Mon", "Wed", "Fri", "Sun"]}
/>

Each composition ships sensible defaults, so every prop is optional. Pass only the ones you want to override and leave the rest.

Presentation modifiers

Many compositions accept marketing-ready modifiers for bento grids, heroes, and feature sections. These are not required but can be useful to quickly get a composition looking perfect in your project:

• gradient (default true when supported): a soft brand glow behind the composition.
• fadeOut (default false): fade the bottom edge into the background.
• isometric (default false): a subtle 3D tilt.

<ChartBar animated isometric fadeOut />

The exact props differ per composition. Open any composition's preview page to see its full set of variations and the props each one expects.

Theming

Compositions read your shadcn/ui tokens, so they match your brand with zero configuration. Change your --primary token and every composition updates. Toggle your .dark class and they switch to dark mode. The Tailwind palette is only used for small supportive accents, never for the core brand surfaces.