--- title: Provide and inject url: https://citry.dev/examples/provide-inject/ description: "Share a value with every component in a subtree." --- # Provide and inject Pass a value to a whole subtree with ``, and read it with `inject()`. ### Component ````citry """A button that reads its look from a provided theme, used as a live docs example.""" from typing import Any from citry import Component class ThemedButton(Component): """A button with no theme prop: it injects the nearest provided theme instead.""" class Kwargs: text: str class Slots: pass template = """ """ css = """ .themed-btn { padding: 0.5rem 1rem; margin: 0.25rem; border: none; border-radius: 6px; color: #ffffff; font-family: system-ui, sans-serif; font-size: 0.95rem; cursor: pointer; } """ def template_data(self, kwargs: Kwargs, slots: Slots) -> dict[str, Any]: theme = self.inject("theme") return { "text": kwargs.text, "label": theme.label, "style": "background: " + theme.accent + ";", } ```` ### Page ````citry """Standalone page showing provide/inject: buttons styled by an ancestor theme.""" from citry import Component class ProvideInjectPage(Component): """A full page wrapping ThemedButtons in themes they inject, never receive as props.""" class Kwargs: pass class Slots: pass template = """ Provide / inject example

These buttons read the outer theme:

Nested provide wins for buttons inside it:

""" ```` [Open the live result](/examples/provide-inject/demo/)