---
title: "Introduction"
description: "37 UI components for Twig built with Bootstrap 5 and Font Awesome 6: headers, footers, cards, grids and more, for Symfony and for Derafu"
type: "docs"
category: "doc"
tags: []
authors: [Anonymous]
date: "2026-10-20"
last_update: "2026-10-20"
time_minutes: 3
draft: false
unlisted: false
url: "https://www.derafu.dev/docs/ui/twig-components/introduction"
---

# UI Components for Twig

[![GitHub](https://img.shields.io/badge/github-derafu%2Ftwig--components-blue?logo=github)](https://github.com/derafu/twig-components)
![GitHub last commit](https://img.shields.io/github/last-commit/derafu/twig-components/main)
![CI Workflow](https://github.com/derafu/twig-components/actions/workflows/ci.yml/badge.svg?branch=main&event=push)
![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/derafu/twig-components)
![GitHub Issues](https://img.shields.io/github/issues-raw/derafu/twig-components)
![Total Downloads](https://poser.pugx.org/derafu/twig-components/downloads)
![Monthly Downloads](https://poser.pugx.org/derafu/twig-components/d/monthly)

**Derafu Twig Components** is a collection of 37 UI components for Twig, for websites. They are [Symfony UX Twig Components](https://symfony.com/bundles/ux-twig-component/current/index.html), written with Bootstrap 5 and Font Awesome 6, and are used in a template with a tag:

{% verbatim %}
```twig
<twig:block-alert type="info" content="The components are tags of Twig." />
```
{% endverbatim %}

## Features

- 🧩 **37 block components**: headers, footers, cards, grids, features, tabs, timelines, galleries and more (see [Components](components)).
- 🅱️ **Bootstrap 5 and Font Awesome 6**: the components use the grid, the utilities and the JavaScript of Bootstrap, and the icons of Font Awesome (see [Styles](styles)).
- 🎛️ **Symfony 8 without a bundle**: three settings of your application register them (see [Symfony](symfony)).
- 🔌 **Derafu without Symfony**: [`derafu/twig`](https://www.derafu.dev/docs/ui/twig) registers them in a Twig environment of its own (see [Derafu](derafu)).
- 🛡️ **Strict mode of Twig**: the templates work with `strict_variables`; a key that an item does not have is not an error.
- 🌐 **Translated**: the texts of the components and their errors are written in English and have their Spanish translation (see [Translations](translations)).
- 🏷️ **MIT License**: open-source and free to use.

## Installation

```bash
composer require derafu/twig-components
```

It requires `symfony/ux-twig-component` and [`derafu/translation`](https://www.derafu.dev/docs/core/translation).

## Structure of a Component

Each component has three parts:

- **A PHP class** in `Derafu\TwigComponents\Component\Block`, with the options of the component as properties and its validations. It is marked with `#[AsTwigComponent('block-...')]`, and the name is the one of the tag.
- **A Twig template** in `resources/templates/components`, with the HTML.
- **A CSS file** in `resources/css/components`.

The options are the attributes of the tag. The ones that are not text (numbers, arrays) go with a colon before their name:

{% verbatim %}
```twig
<twig:block-card-grid
    :cols="3"
    :cards="[
        {title: 'First', content: 'Text of the first card.'},
        {title: 'Second', content: 'Text of the second card.'},
    ]"
/>
```
{% endverbatim %}

A value that is not valid for an option (a number of columns that does not exist, an item without its required text) is a translatable error that names the component and says what is wrong. See [Translations](translations).

## Where to Go Next

- [Components](components): every component, with examples.
- [Symfony](symfony): use them in a Symfony application.
- [Derafu](derafu): use them with `derafu/twig`.
- [Styles](styles): the CSS and what the page needs.
- [Translations](translations): the texts and the errors.
- [Development](development): see the components in a browser while you work on them.



---
Last updated on 20/10/2026