# `PetalComponents`
[🔗](https://github.com/petalframework/petal_components/blob/v4.1.2/lib/petal_components.ex#L1)

Importing `use PetalComponents` brings the core component set into scope as
unqualified function components (`<.button>`, `<.modal>`, `<.table>`, …).

The `PetalComponents.Chat` family (`conversation`, `chat_message`, `markdown`,
`tool_call`, …) is intentionally **not** part of this import. It defines
generically-named functions like `markdown/1` that would clash with an app's
own helpers, so you opt into it explicitly and call it namespaced:

    alias PetalComponents.Chat

    <Chat.conversation id="chat">
      <Chat.chat_message role="assistant"><Chat.markdown content={@text} /></Chat.chat_message>
    </Chat.conversation>

See the [streaming chat guide](streaming_chat.html) for the full setup.

# `default_js_lib`

---

*Consult [api-reference.md](api-reference.md) for complete listing*