Search visuals

Search the library and jump to any visual preview.

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

Every composition brings its own height, so it always renders, but it looks best inside a box that gives it room. Set a height (or a min-h-*) on the wrapper, so it sits neatly inside your layout. h-96 is a good default. Without a defined height the composition sits edge to edge, top and bottom, with no space to breathe.

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

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

Keep the container padding-free. Each composition already clips its own content, so it fills the frame right up to the rounded corners with no overflow-hidden needed. Padding would shrink the composition and leave gaps inside the frame.

For a more subtle surface, swap the background:

<div className="h-96 rounded-2xl border border-border/50 bg-muted/20 dark:bg-muted/15">
  <ChartsLine animated />
</div>

Compose it into a layout

Pair a container with copy for a feature card, or place several in a bento grid. Because each composition clips itself, you only manage the outer frames.

A feature card sits the composition above a title and description:

<div className="rounded-2xl border border-border/50 bg-card">
  <div className="h-72 border-b border-border/50">
    <ChartsLine animated fadeOut />
  </div>
  <div className="p-5">
    <h3 className="text-sm font-semibold text-card-foreground">
      Real-time analytics
    </h3>
    <p className="mt-1 text-sm/relaxed text-muted-foreground">
      Track growth and conversions the moment they happen.
    </p>
  </div>
</div>

A bento grid mixes tile widths on a 12 column track. Make each row's col-span values add up to 12:

<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-12">
  <div className="h-96 rounded-2xl border border-border/50 bg-muted/20 lg:col-span-7 dark:bg-muted/15">
    <ChatAiChat animated isometric />
  </div>
  <div className="h-96 rounded-2xl border border-border/50 bg-muted/20 lg:col-span-5 dark:bg-muted/15">
    <PaymentCreditCard animated isometric stacked />
  </div>
</div>

Two finishing touches:

  • Edge fade. Pass mask utilities straight to a composition to soften it against the frame, for example className="mask-b-from-85%" to fade the bottom, or mask-t-from-85% mask-r-from-85% mask-b-from-85% mask-l-from-85% for an all around vignette.
  • Heroes and wide containers. Most compositions cap their own width with a max-w-*, so not all fill an extra wide hero out of the box. Some expose a wrapperClassName prop (for example geo/globe and geo/pin-drop) that accepts max-w-full to stretch the composition edge to edge.

Prefer to skip the markup? The bundled AI skill does all of this for you. It installs the composition through the registry and builds the surrounding layout, so you can just ask for something like "add a feature card with a line chart" or "lay out these visuals in a bento grid" and it picks, installs, and arranges them following these same container patterns.

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.
<ChartsLine animated trigger="mount" />
<ChartsLine animated trigger="inView" />
<ChartsLine 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:

<ChartsLine
  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.
<ChartsBar 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.

That's it!

Should you need more assistance, please feel free to reach out to us and we'll be happy to help you out. Happy building! 😊

Crafted withby pixelcave

2026 © CodedVisuals