Built-in Piko components

Piko ships six categories of components under the piko.sh/piko/components package. Each category has an opt-in helper that returns a list of component definitions callers pass to piko.WithComponents(...) at bootstrap. Source of truth: components/components.go.

Helper	Category	Components
`components.Piko()`	Core demo components	`piko-counter`, `piko-card`
`components.Example()`	Documentation examples	`example-greeting`
`components.M2()`	Material 2 data tables	`m2-data-table`, `m2-data-table-row`, `m2-data-table-cell`, `m2-data-table-header`, `m2-data-table-pagination`
`components.M3E()`	Material 3 Expressive library (46 components)	See M3E components reference
`components.Dev()`	Dev-mode overlay	`piko-dev-widget` (auto-enabled by `WithDevWidget()`)
`components.All()`	Every category except `Dev`	Equivalent to `Piko() + Example() + M2() + M3E()`

Registration

import "piko.sh/piko/components"

ssr := piko.New(
    piko.WithComponents(components.Piko()...),
    piko.WithComponents(components.M3E()...),
)

Helpers return []piko.ComponentDefinition. Spread them into WithComponents with .... Mix and match categories as needed. Unused components do not ship to the browser when CSS and JS tree-shaking are active.

`piko-counter`

A minimal reactive counter demonstrating state and event handling. Two buttons increment and decrement an internal counter. The current value reflects to the host element's count attribute.

<piko-counter></piko-counter>
<piko-counter count="10"></piko-counter>

Attribute	Type	Default	Purpose
`count`	`number`	`0`	Initial value. Reflects bidirectionally with the internal `state.count`. External writes via `setAttribute("count", ...)` update the displayed value.

The component declares no other props. The + and - buttons mutate state.count directly. Source: components/piko/piko-counter.pkc.

`piko-card`

A simple card wrapper with a named header, default content slot, and optional footer.

<piko-card>
    <h3 slot="header">Card title</h3>
    <p>Card body content.</p>
    <div slot="footer">Footer content</div>
</piko-card>

Source: components/piko/piko-card.pkc.

`example-greeting`

A documentation-example component. Useful as a reference when authoring your own components.

Source: components/example/example-greeting.pkc.

M2 data tables

A small set of data-table primitives sufficient to render tabular data with sorting and pagination.

Tag	Purpose
`m2-data-table`	Table container.
`m2-data-table-header`	Column header cell with sort affordances.
`m2-data-table-row`	Row container.
`m2-data-table-cell`	Body cell.
`m2-data-table-pagination`	Pager footer.

See Scenario 006: data table for a runnable walkthrough. Source files live under components/m2/.

M3E components

Material 3 Expressive library (46 components). See the M3E components reference for the full list.

An in-browser dev overlay that surfaces request timing, hot-reload status, and warnings. piko.WithDevWidget() enables the overlay. Registration of components.Dev() happens automatically.

Source: components/dev/piko-dev-widget.pkc.