> ## Documentation Index > Fetch the complete documentation index at: https://docs.bytesell.io/llms.txt > Use this file to discover all available pages before exploring further. # Components > Props, scope, slots, and imports. A component is a `.slurp` file included from another file. It takes props, renders markup, and can accept children through a ``. ## Declaring a component Components live in `components/`, where they are checked but never emitted as a page. ```slurp components/Card.slurp theme={null} --- props { title: string featured: boolean = false } ---

${ title }

``` Import it in the frontmatter of whatever uses it, then use it as a tag: ```slurp index.slurp theme={null} --- using "@components/Card" ---

Anything here lands in the slot.

 ``` A tag is a component if its first character is uppercase. `` is a component; `` is a plain HTML element and is emitted as one. There is no registration step beyond the `using` line. ## Props are passed by expression A quoted COMPONENT prop is a literal string. A quoted ELEMENT attribute interpolates. The same characters mean two different things depending on whether the tag starts with an uppercase letter, and nothing reports the difference. ```slurp theme={null} {* element: renders "Hi World" *} {* component: renders "Hi ${name}" *} {* component, correct: "Hi World" *} ``` This is the most common mistake in the language. If a prop shows up on the page as literal `${...}` text, this is why. To pass a value, brace it. To build a string around a value, brace a template literal. ## Prop forms | Written | The component receives | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `prop={expr}` | The evaluated expression. | | ``prop={`text ${x}`}`` | A template literal, interpolated. | | `prop="text"` | A literal string. Never interpolated. | | `prop` | Boolean `true`. | | `prop=123` | TWO props. An unquoted value lexes as an attribute name, so you get `prop = true` and a second prop named `123`. Write `prop={123}`. | | `...spread` | A parse error. Both `` and `` fail. Pass props explicitly. | ## Prop declarations and defaults The `props` block records names and types for tooling. Types are never checked at render time, so a missing prop is simply null and renders as the empty string. No error, no warning. Two things follow from that: * **An undeclared prop still arrives.** Passing `` makes `note` readable inside the component even though `props` never mentions it. Declaring it serves the reader and the editor, not the renderer. * **A `= default` does have a render-time effect.** Omit `featured` above and the component sees `false`, not null. The default expression is evaluated in the caller's scope, so it can read the caller's globals. Write one declaration per line: ```slurp theme={null} --- props { title: string count?: number featured: boolean = false } --- ``` A type expression runs to the end of the line. Two declarations sharing a line with no comma between them merge into one: ```slurp theme={null} props { a: string b: string = "fallback" } ``` `a` swallows `b`'s declaration as part of its own type and takes `"fallback"` as its own default. `b` is never recorded, so `b`'s default never applies. A comma fixes it; one declaration per line avoids the ambiguity entirely. ## Scope: page globals, overlaid by props A component renders in its own root scope. It sees the page globals, with whatever was passed to it layered on top and winning on a name collision. So a component can read a global it was never passed: ```slurp components/Footer.slurp theme={null}
© ${ year } ${ site.title }
``` What it cannot see is the caller's local bindings. An `{each}` loop variable and `loop.index` do not exist inside a component. ```slurp theme={null} {each product in products} {* Card cannot see `product`. Renders empty. *} {/each} ``` Pass it in: ```slurp theme={null} {each product in products} {/each} ``` Nothing reports this. It renders as blanks inside the component. `loop.index` works the same way. It is a caller-side value, so build the string in the caller and pass the result: ```slurp theme={null} {each p in products} {/each} ``` ## Children and the slot Children of a component tag land at its ``. ```slurp components/Badge.slurp theme={null} ``` ```slurp theme={null} Sale ``` Two rules apply: `children here` renders the component and drops the text. Silently. If content vanishes, check that the component has a ``. A component has exactly one content slot. `` renders as a literal `` element carrying its fallback content, and a child written `