How to Use Twig Functional Components

In STCMS, you can create powerful, reusable, and purely presentational UI elements using Twig's macro feature. We call this pattern "Functional Components." They are perfect for UI elements that don't require complex state management, such as buttons, cards, alerts, or form inputs.

This approach keeps your code DRY (Don't Repeat Yourself), ensures visual consistency across your site, and uses the power of **Tailwind CSS** for styling.

---

Step 1: Create a Component Macro

It's best practice to define your components in a dedicated file. We have already created one for you at templates/components.twig. Let's look at the "button" component inside it:

This macro accepts parameters like `text` and `url`, and even supports different color `variant`s, all styled with Tailwind CSS.

---

Step 2: Import and Use the Component

To use the components on any page, you first need to import the file. We give it a namespace (e.g., `components`) to avoid naming conflicts.

Now, you can call the macro like a function. Here are some live examples:

---

Advanced Example: A Card Component

This pattern is excellent for more complex structures like cards. Here is the code for our card component:

And here is how we can use it to render a grid of cards: