Components

TwicPics components bring image & videos best-practices out-of-the-box to your favorite framework.

Introduction

TwicPics Components are a drop-in replacement for <img> and <video> tags with optimized Cumulative Layout Shift (CLS), low-quality image placeholders, and lazy loading out of the box.

<!-- Before -->
<img src="https://assets.twicpics.com/examples/football.jpg" />

<!-- After -->
<TwicImg src="https://assets.twicpics.com/examples/football.jpg" />

Supported frameworks

Jump to the docs:

• Angular
• Flutter
• React, React Native, Gatsby, and Next.js
• Svelte 3, Svelte 4 and SvelteKit
• Vue 2 & Vue 3, and Nuxt 2 & Nuxt 3
• Web Components

Live demos

Regardless of the framework you work with, TwicPics is the most efficient solution to deliver your images and your videos and make them as responsive as desired.

Explore our demos and integration examples for :

• Angular
• React, Next.js and Gatsby.js
• Vue.js (version 2), Vue.js (version 3), Nuxt.js (version 2) and Nuxt.js (version 3)
• Svelte (version 3), Svelte (version 4) and SvelteKit

Feedback and support

TwicPics Components are open-source on GitHub. For features requests and bugs, open an issue. The TwicPics team also remains available for support via the live chat (at the bottom right.)