UI Components for Twig

Derafu Twig Components is a collection of 37 UI components for Twig, for websites. They are Symfony UX Twig Components, written with Bootstrap 5 and Font Awesome 6, and are used in a template with a tag:

<!--TWIG_BLOCK_0-->

Features

• 🧩 37 block components: headers, footers, cards, grids, features, tabs, timelines, galleries and more (see 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).
• 🎛️ Symfony 8 without a bundle: three settings of your application register them (see Symfony).
• 🔌 Derafu without Symfony: derafu/twig registers them in a Twig environment of its own (see 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).
• 🏷️ MIT License: open-source and free to use.

Installation

composer require derafu/twig-components

It requires symfony/ux-twig-component and derafu/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:

<!--TWIG_BLOCK_1-->

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.

Where to Go Next

• Components: every component, with examples.
• Symfony: use them in a Symfony application.
• Derafu: use them with derafu/twig.
• Styles: the CSS and what the page needs.
• Translations: the texts and the errors.
• Development: see the components in a browser while you work on them.