---
title: 'TwicPics Components'
menuTitle: 'Components'
description: 'TwicPics components bring image & videos best-practices out-of-the-box to your favorite framework.'
category: 'essentials'
position: 3
---

# TwicPics Components

<illustration src="github/components/main/documentation/resources/components-cover.png" width="2400" height="1256" alt="TwicPics Components"></illustration>

<docs-page-description :description="description"></docs-page-description>

## What is TwicPics Components?

**TwicPics Components** is a **collection of web components** that make it dead easy to unleash the power of TwicPics in your projects.

Whether you need to display a content image, showcase a short video, or ensure optimal performance with _Large Contentful Paint_ (LCP) care, TwicPics Components has you covered.

### Display a Critical Image

If you need to display **critical images** with _art direction_ support, you can use the `<TwicPicture>` component.

It is a drop-in replacement for the standard `picture` tag and is based directly on the [TwicPics API](https://www.twicpics.com/docs/essentials/api) without additional effort.

```html
<!-- Before -->
<picture>
  <source
    media="(min-width: 1280px)"
    srcset="wide-image.jpg, wide-image-2x.jpg 2x, wide-image-3x.jpg 3x"
  >
  <source
    media="(min-width: 768px)"
    srcset="squared-image.jpg, squared-image-2x.jpg 2x, squared-image-3x.jpg 3x"
  >
  <img
    srcset="portrait-image.jpg, portrait-image-2x.jpg 2x, portrait-image-3x.jpg 3x"
    src="portrait-image.jpg"
  >
</picture>

<!-- After -->
<TwicPicture
  src="your-master-image.jpg"
  ratio="3/4, @md 1, @xl 16/9"
/>
```

### Display a Content Image

Suppose you want to display a **pixel-perfect image** with optimized _Cumulative Layout Shift_ (CLS), _Low-Quality Image Placeholder_ (LQIP), and lazy loading out of the box. In that case, you can use the `<TwicImg>` component.

It's a drop-in replacement for the standard `img` tag.

```html
<!-- Before -->
<img src="https://example.com/your-image.jpg" />

<!-- After -->
<TwicImg src="your-image.jpg" />
```

### Display a Video

For seamless playback of [videos optimized with TwicPics](/docs/guides/video-optimization), use the `<TwicVideo>` component. It's a sibling of `<TwicImg>` and serves as a drop-in replacement for the standard `video` tag.

```html
<!-- Before -->
<video >
  <source src="https://example.com/your-video.mp4" type="video/mp4">
  <!-- ... other video sources ... -->
</video>

<!-- After -->
<TwicVideo src="your-video.mp4" />
```

## Supported frameworks

Jump to the docs:

- [Angular](/docs/components/angular)
- [Flutter](/docs/components/flutter)
- [React](/docs/components/react), [React Native](/docs/components/react-native), [Gatsby](/docs/components/gatsby), and [Next.js](/docs/components/next)
- [Svelte 3](/docs/components/svelte-3), [Svelte 4](/docs/components/svelte-4), [Svelte 5](/docs/components/svelte-5) and [SvelteKit](/docs/components/sveltekit)
- [Vue 2](/docs/components/vue-2) & [Vue 3](/docs/components/vue-3), and [Nuxt 2](/docs/components/nuxt-2) & [Nuxt 3](/docs/components/nuxt-3)
- [Web Components](/docs/components/webcomponents)

## 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](https://twicpics-angular-demo.netlify.app/)
- [React](https://twicpics-react-demo.netlify.app/), [Next.js](https://twicpics-next-demo.netlify.app/) and [Gatsby.js](https://twicpics-gatsby-demo.netlify.app/)
- [Vue.js (version 2)](https://twicpics-vue2-demo.netlify.app/), [Vue.js (version 3)](https://twicpics-vue3-demo.netlify.app/), [Nuxt.js (version 2)](https://twicpics-nuxt2-demo.netlify.app/) and [Nuxt.js (version 3)](https://twicpics-nuxt3-demo.netlify.app/)
- [Svelte (version 3)](https://twicpics-svelte3-demo.netlify.app/), [Svelte (version 4)](https://twicpics-svelte4-demo.netlify.app/), [Svelte (version 5)](https://twicpics-svelte5-demo.netlify.app/) and [SvelteKit](https://twicpics-sveltekit-demo.netlify.app/)

## Feedback and support

TwicPics Components are open-source. Feel free to [open an issue](https://github.com/TwicPics/components/issues) on GitHub for feature requests and bugs.