> ## Documentation Index
> Fetch the complete documentation index at: https://flex-fields.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Examples target Filament 5. Verify optional dependencies before configuring integrations.
> Upload transfer completion, permanent storage and record acceptance are separate milestones. Native and Spatie image conversions retain the original.

# Share styles and behavior

> Choose CSS-only reuse, complete runtime composition or optional features.

> [!TIP]
>
> **Watch this in the workshop:** [15:11 — declare dependency ownership](https://www.youtube.com/watch?v=m4V_R7YxTP4\&t=911s) · [22:31 — enable an optional Color Picker per instance](https://www.youtube.com/watch?v=m4V_R7YxTP4\&t=1351s).

| Option | Use it for |
| - | - |
| `stylesFrom` | Shared appearance without loading another component's JavaScript. |
| `uses` | Rendering a complete component that needs its styles and JavaScript. |
| `capabilities` | Optional features enabled for an individual rendered instance. |
| `publications` | Local resource directories shipped by your package. |
| `catalog` | Your component's name, description, examples and demo in the FLEX catalog. |

In the rating example, the column and entry load the display stylesheet. They do not load the interactive rating editor. Keep the common CSS in one output file. Include optional editors as capabilities instead of adding them to every surface's dependencies.

## An A / B / C composition

If A renders B and C, declare their identities once. Render B and C through their
actual PHP classes or child slots. Every rendered instance keeps its own state and
consumer; a shared stylesheet or module is acquired by its identity rather than
copied into A. Declaring an asset dependency alone does not render child HTML.

```php theme={"theme":{"light":"github-light","dark":"github-dark"}}
new ComponentDefinition(
    id: 'acme-order-field',
    kind: ComponentKind::Field,
    stylesFrom: ['acme-order-display'],
    uses: ['flex-text-input', 'select-field'],
    entry: 'acme-order-field',
);
```

Import `ComponentDefinition` and `ComponentKind` from
`Bjanczak\FilamentFlexFields\Support\Components`. Verify the registered child ID
with `fff:assets:explain`; use a declared child slot for children which should
remain dormant until rendered or activated.

> [!NOTE]
>
> CSS sharing, JavaScript dependencies and HTML composition are separate choices.
> Use child schemas to render and configure existing controls without duplicating
> their implementation.

## Continue reading

[Extension guides](https://flex-fields.bjanczak.com/docs/extensions.md) · [Definition and registration reference](https://flex-fields.bjanczak.com/docs/extensions/definition-reference.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.