Next generation coded illustrations

Get access for life.

Pay once and own it forever. Unlimited personal and client projects. Get every new visual we release in the future.

Solo

Launch offer!

Perfect for solo founders and indie makers shipping SaaS, AI apps and client projects.

$69$99one time

Early bird price for the first 150 purchases. Goes back to $99 after that.

Purchase Solo
  • All 108 visuals and 1010+ variations
  • All visuals released in the future
  • Install via shadcn CLI or copy/paste
  • AI Skills package included
  • shadcn MCP server support
  • Used in unlimited projects
  • Lifetime updates, no subscription

Team

Perfect for agencies and teams building together in-house or client projects.

$299one time

One license for a team of up to 10 people. One payment, lifetime updates.

Purchase Team
  • All 108 visuals and 1010+ variations
  • All visuals released in the future
  • Install via shadcn CLI or copy/paste
  • AI Skills package included
  • shadcn MCP server support
  • Used in unlimited projects
  • Lifetime updates, no subscription
Not ready? Try 5 visuals free on GitHub (opens in a new tab)

A fixed sample of 5 from the 108 visuals here, no account needed.
(browser/simple, charts/sparkline, files/stacked, integrations/logo-orbit, notifications/bell)

100% safe and secure payments powered by Polar

Library last updated August 25, 2026. See changelog

Always growing

The library keeps growing. Your one time payment includes every new visual we ship. Here are the latest additions to the library.

108Coded visuals
1010+Ready made variations
31Categories

Funnel

A conversion funnel of tapering stage slabs that pour in one by one, with per stage counts and conversion rates.

Gauge

A semicircular gauge whose arc sweeps to its value, with an optional zoned track, a center reading, and range labels.

Heatmap

A grid heatmap of labeled rows and columns whose cells light up in a diagonal sweep, with an intensity legend.

Branch Graph

A commit rail where feature branches fork off, run their own commits, and merge back, with pulses traveling every path.

Diff

A file diff with added and removed lines, in unified or side by side view, swept line by line as the change counters climb.

Pull Request

A pull request card whose CI checks run one by one, then settle into an approval and a merge button that lights up.

Empty

An empty grid of dashed placeholder slots where an add action ripples out and one slot briefly materializes before dissolving back.

Error

A request pulse traveling into a service card and breaking it, cascading its service tiles to a fault state under an alert badge.

Maintenance

A stack of service tiles with one lifted out and being worked on, hovering over its empty slot while a progress sweep runs underneath.

Not Found

A request spike traveling a route into a barrier at a large status code, ringing out concentric pulses, with the missing page left as a dashed ghost tile.

Tools

An agent working through its tool calls one at a time, each row running with a spinner then settling into a result and a duration.

Command Palette

A command palette with a typed query, grouped commands, keyboard hints, and a selection that walks the list.

Need more info?

Frequently asked questions. Everything you need to know before you get access.

What exactly do I get?

You get a license key which you can use to create an account on this website. When you log in, you can download the full source for every visual in the library from its preview page as self-contained React components. Each one is a single file with no shared dependencies, so you copy it into your project and ship.

How do I add a visual to my project?

Four ways. From any preview page, install it straight into your project with the shadcn CLI using your personal registry token, or copy the source (or download the file) and paste it in. You can also copy a ready to use import and usage snippet for any variation. The third way, and the one we recommend if you work with AI, is our skill files: install them into your project and let your AI assistant pick and pull the right visuals from the private registry for you. The fourth is the official shadcn MCP server, which reads the same registry, so your agent can browse and install visuals from there too.

How does the early bird discount work?

The first 150 Solo purchases get the early bird price. Once those are gone the Solo plan returns to its regular price of $99. The license and everything you receive stays exactly the same.

Is it a one time payment or a subscription?

One time. You pay once and get lifetime access to the current library plus every visual we add in the future. There is no recurring charge.

Can I use the visuals in client projects?

Yes. The Solo license covers unlimited personal and client projects built by you. If more than one person needs access, see the Team plan below.

When should I choose the Team plan?

Choose Team when more than one person needs access. One license covers up to 10 people from the same company, or contractors working on its projects, with a single shared license key and registry token. For now, there are no separate accounts.

Can I use visuals in my website builder, theme, template, component library etc?

No. The license covers using the visuals in your own websites and in projects you build for clients. It does not allow including them, in source or compiled form, in a product you sell or distribute to others, such as a website builder, theme, template, component library, or MCP server. If that is what you have in mind, get in touch and we can talk about a separate arrangement.

What do you mean by free lifetime updates?

For the lifetime of the project, you will continue to receive free updates without any additional cost. Don’t worry, if you check out our previous projects, you will see that we have a great history of supporting and updating them. We are already working on new visuals as you are reading this.

What does email support include, and how long does it take to get an answer?

We can assist you with anything related to using CodedVisuals, installing the visuals through the shadcn CLI or copying them into your project, and getting them set up with your own shadcn tokens. We can’t provide design customizations but might be able to help you in some cases where something doesn’t work the way it should and you need some guidance. We always try to reply in less than 24hrs to all emails on business days (Monday-Friday) except if we are taking some time off. In reality, you should hear from us really fast in most cases!

Can I request new features or report bugs?

Absolutely, we would love to get your feedback and will do our best to fix any possible issues in future updates. Also, we very much appreciate any feature suggestions. We can’t make any promises but based on the feedback we receive, we will know where to focus our efforts.

Do you offer refunds?

In general we do not offer refunds because the visuals are digital content you can copy and use right away, so please consider carefully before purchasing. If you hit a technical problem, reach out and we will help.

Who are you?

We are John & Stella and have been building web app UIs and websites for over 15 years now. More than 20,000 people worldwide have used our projects and we are so grateful for their support. 🙏

I have some further questions, how can I reach you?

Feel free to get in touch through our contact form or reach out to John on X. We’ll be more than happy to answer your questions. If we keep getting similar questions, we will definitely add them in this FAQ as well!