Using Ribbons with React, Vue, and Angular

June 9, 2026 by Matteo Bruni

tsParticles Ribbons integrates seamlessly with modern JavaScript frameworks. The official @tsparticles/react, @tsparticles/vue, and @tsparticles/angular packages provide dedicated components that make integration straightforward.

React Integration

Install the required packages:

npm install @tsparticles/ribbons @tsparticles/react

Create a ribbons component:

import { useCallback } from 'react';
import { Particles } from '@tsparticles/react';
import { ribbons } from '@tsparticles/ribbons';

export const RibbonsBackground = () => {
  const particlesInit = useCallback(async (engine) => {
    await ribbons.init(engine);
  }, []);

  const options = {
    preset: 'ribbons',
    background: {
      color: '#000000',
    },
    fullScreen: {
      enable: true,
    },
  };

  return (
    <Particles
      id="ribbons"
      init={particlesInit}
      options={options}
    />
  );
};

The Particles component handles canvas creation, resizing, and lifecycle management automatically. Pass your ribbon configuration through the options prop.

Triggering Ribbons on Demand

For event-based ribbons (like button clicks), use the ribbons() function directly:

import { ribbons } from '@tsparticles/ribbons';

function CelebrationButton() {
  const handleClick = () => {
    ribbons({
      colors: ['#FFD700', '#FFA500'],
      positionX: 50,
      emitterSize: { width: 0, height: 0 },
    });
  };

  return <button onClick={handleClick}>Celebrate!</button>;
}

Vue.js Integration

Install the packages:

npm install @tsparticles/ribbons @tsparticles/vue3

import { createApp } from 'vue';
import { ParticlesPlugin } from '@tsparticles/vue3';
import { ribbons } from '@tsparticles/ribbons';

const app = createApp(App);
app.use(ParticlesPlugin, {
  init: async (engine) => {
    await ribbons.init(engine);
  },
});
app.mount('#app');

Then in your component template:

<template>
  <Particles
    id="ribbons"
    :options="{
      preset: 'ribbons',
      background: { color: '#000000' },
      fullScreen: { enable: true },
    }"
  />
</template>

For Vue 2.x, use @tsparticles/vue2 instead. The API is identical.

Angular Integration

Install the required packages:

npm install @tsparticles/ribbons @tsparticles/angular

Import the module and initialize ribbons:

import { NgParticlesModule } from '@tsparticles/angular';
import { ribbons } from '@tsparticles/ribbons';

@NgModule({
  imports: [
    NgParticlesModule.init({
      init: async (engine) => {
        await ribbons.init(engine);
      },
    }),
  ],
})
export class AppModule { }

Use the component in your template:

<ng-particles
  [id]="'ribbons'"
  [options]="{
    preset: 'ribbons',
    background: { color: '#000000' },
    fullScreen: { enable: true },
  }"
></ng-particles>

Svelte Integration

For Svelte applications, use the @tsparticles/ribbons package directly with Svelte's onMount lifecycle:

<script>
  import { onMount } from 'svelte';
  import { ribbons } from '@tsparticles/ribbons';

  onMount(async () => {
    await ribbons.init();
    ribbons();
  });
</script>

Or use the svelte-particles package for a component-based approach.

Using with jQuery

If you're using jQuery, simply include the script tag and call ribbons():

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/ribbons@latest/tsparticles.ribbons.bundle.min.js"></script>
<script>
  $(document).ready(function () {
    ribbons();
  });
</script>

No additional plugin is needed — the ribbons function is available globally after including the bundle.

TypeScript Support

All tsParticles packages include TypeScript definitions. The ribbons() function and the create() method are fully typed, providing autocomplete and type checking in your IDE.

import { ribbons, type RibbonsOptions } from '@tsparticles/ribbons';

const options: RibbonsOptions = {
  colors: ['#FF0000', '#00FF00', '#0000FF'],
  positionX: 50,
};

ribbons(options);

Type definitions are included in the package and require no additional installation.