```meta
title: @use — um componente do tema, com as palavras da página
description: Um componente que o tema da página define — um cartão de curso, um passo a passo — preenchido com as palavras desta página.
```

_flows.md · documentação · [Blocos](/@docs/blocks)_

# @use

Um componente do tema que a página veste — um cartão de curso, um cartão de evento, um passo a passo —, preenchido com as palavras desta página. O desenho é do tema; as palavras são da página.

## Por que não está desenhado aqui

Um componente mora num tema publicado: cada um é uma página do tema, com o desenho e os espaços (slots) que um `@use` preenche. O tema destas páginas não tem componentes, então um `@use` aqui não teria o que desenhar.

## O markdown

~~~text
```@use cartao-de-curso
titulo: Cerâmica para iniciantes
data: Sáb · 14 jun · 10h
link: https://example.com/inscricao
```
~~~

Um slot por linha, `slot: palavras`. Uma lista é uma linha por item, com os campos na ordem que o componente declara:

~~~text
```@use passo-a-passo
etapas: Pedido feito | done | 10 mar
etapas: Em produção | current | 12 mar
etapas: Enviado | upcoming | 15 mar
```
~~~

## Como um componente é feito

Na pasta `components` do tema, uma página por componente: uma cerca ```` ```component ```` que diz para que ele serve e quais slots ele tem, e depois markdown comum — diretivas, blocos, controles — com `{{titulo}}` onde entram as palavras de quem o usa.

~~~text
```component
name: Cartão de curso
when: Para anunciar um curso com data, vagas e preço.
slot titulo: O nome do curso *
slot data: Dia e hora do primeiro encontro *
slot link: Para onde o botão leva
```

:::card tone:soft
`pill:info:{{data}}`
### {{titulo}}
[Inscrever]({{link}}){primary}
:::
~~~

A tela do tema lista os componentes, com quando usar cada um e os slots. Um `@data view:timeline item:passo-a-passo` desenha cada linha de uma coleção com um componente.

## O que precisa

Um tema publicado com componentes, vestido pela página (ou por uma página acima dela).