Render a Primitive

Define a Primitive gave the copy button its options, state and slots. Now let's put it on the page. Choose your framework in the page header, and the code below follows it.

Install the Adapter

An adapter connects a primitive to your framework. Install the one for yours:

npm install @ui-sdk/react

Create the Parts

createParts turns each slot into a part. Pass it the primitive and the element each part renders:

"use client"

import { createParts } from "@ui-sdk/react/primitive"
import { copyButton } from "./copy-button"

const { Root: CopyButton } = createParts(copyButton, { root: "button" })

export { CopyButton }

Root creates the primitive's instance and shares it with the parts inside. Every other slot becomes a part named in Pascal case, so a star slot becomes Star.

Pass Options

The primitive's options become the part's props, next to the element's own:

<CopyButton text="npm add @ui-sdk/core" onCopy={(text) => console.log(text)}>
  Copy
</CopyButton>

Read the State

The root's slot returns copied from its state, so the button's content can follow it:

<CopyButton text="npm add @ui-sdk/core">
  {({ copied }) => (copied ? "Copied" : "Copy")}
</CopyButton>

Write Your Own Part

createParts is enough when each slot maps to one element. When a part needs logic of its own, such as rendering a list from data, write it yourself and connect it to the same primitive. Custom Parts shows how in your framework.

Render on the Server

Parts render their attributes into the server's HTML, so the page shows the right state before your framework hydrates it. On web components, you send the markup and the element connects its behavior once its module loads. Server Rendering covers the setup for your framework.

Next

The button works, but it has no styles yet. Next, Style a Component styles it from the attributes it renders.