React components

Last updated October 12, 2026

The 300+ free illustrations are available as React components through a shadcn registry. Every component lets you change the accent colour, line colour, theme, background and animation.

1. Add the registry

In your components.json, add Liniqo as a registry:

{
  "registries": {
    "@liniqo": "https://liniqo.com/r/{name}.json"
  }
}

2. Install a component

npx shadcn@latest add @liniqo/car-hero-price

Or without the registry setting, use the full URL:

npx shadcn@latest add https://liniqo.com/r/car-hero-price.json

This adds components/liniqo/illustration.tsx (the shared component) and components/liniqo/illustrations/car-hero-price.tsx. The name of each illustration is the id you see in the library: open a card and the id is in the page address (liniqo.com/#car-hero-price).

3. Use it

import { LiniqoCarHeroPrice } from "@/components/liniqo/illustrations/car-hero-price"

export function Hero() {
  return (
    <LiniqoCarHeroPrice
      accent="#e5484d"
      line="#1e2a66"
      theme="auto"
      animation="draw"
      size={480}
    />
  )
}

Props

Prop	Values	What it does
accent	any CSS colour	Accent colour. Default #3a57ff.
line	any CSS colour	Line colour. Default follows the theme.
theme	auto | light | dark | system	auto follows a .dark class or data-theme="dark" on a parent (the shadcn default). system follows the OS.
background	transparent | surface | any CSS colour	Panel behind the illustration.
size	number (px) or CSS length	Width. The illustration is square. Default 100%.
animation	none | draw | float | draw-float	Line draw-on and gentle float. Skipped when the visitor prefers reduced motion.
trigger	mount | inView | hover	When the animation starts.
speed	number	Animation speed multiplier. Default 1.
label	string	Accessible name. Use decorative to hide it from screen readers.

Using illustrations you bought

The paid illustrations are not in the public registry. Use the shared component with the SVG file from your download. Use the -light.svg or -dark.svg file, imported as a string:

import { Illustration } from "@/components/liniqo/illustration"
import safeBox from "./safe-box-light.svg?raw"

<Illustration svg={safeBox} label="Safe box" accent="#12a594" theme="auto" />

Install the shared component first with npx shadcn@latest add @liniqo/illustration. All props above work the same.

Licence

The free illustrations and the components follow the Liniqo licence. Questions? Support.