Packages

pui

1.0.0-beta.13
1.0.0-beta.18 1.0.0-beta.17 1.0.0-beta.16 1.0.0-beta.15 1.0.0-beta.14 1.0.0-beta.13 1.0.0-beta.12 1.0.0-beta.11 1.0.0-beta.10 1.0.0-beta.9 1.0.0-beta.8 1.0.0-beta.7 1.0.0-beta.6 1.0.0-beta.5 1.0.0-beta.4 1.0.0-beta.3 1.0.0-beta.1 1.0.0-alpha.32 1.0.0-alpha.31 1.0.0-alpha.30 1.0.0-alpha.29 1.0.0-alpha.28 1.0.0-alpha.27 1.0.0-alpha.26 1.0.0-alpha.25 1.0.0-alpha.24 1.0.0-alpha.23 1.0.0-alpha.22 1.0.0-alpha.21 1.0.0-alpha.19 1.0.0-alpha.18 1.0.0-alpha.17 1.0.0-alpha.16 1.0.0-alpha.15 1.0.0-alpha.14 1.0.0-alpha.13 1.0.0-alpha.12 1.0.0-alpha.11

A Phoenix LiveView UI toolkit

HexDocs

Current section

Files

Jump to
Readme
38 Versions
2 Dependencies
Dependants
Files
Activity
pui priv skills_templates pui-components references component-usage-patterns.md
Raw

priv/skills_templates/pui-components/references/component-usage-patterns.md 

# Component Usage Patterns



## Baseline Pattern



1. Read module docs with `IEx.Helpers.h/1`.

2. Add minimal markup with documented attrs and slots.

3. Compile and test.

4. Style incrementally.



## Forms



- Prefer passing a `Phoenix.HTML.FormField` to `field` attrs when supported.

- Only fall back to direct `name`/`value` usage when the component allows it.



## Headless Variants



- If using variants like `unstyled`, provide explicit visibility and spacing classes.

- Do not assume default styles in headless paths.