# Rendering Primitives

Turn a Core primitive into Solid components with createParts.

This page renders the rating from [Compose Behaviors](/docs/core/compose-behaviors). Start with that guide's [complete `rating.ts`](/docs/core/compose-behaviors#complete-primitive): it already handles selection, arrow keys, and focus. Here we'll connect its `root` and `star` slots to Solid.

## Create the Parts

`createParts` maps slots to elements. Save this beside `rating.ts`:

```ts title="rating-parts.ts"
import { createParts } from "@ui-sdk/solid/primitive"
import { rating } from "./rating"

const { Root: RatingRoot, Star: RatingStar } = createParts(rating, {
  root: "div",
  star: "button",
})

export { RatingRoot, RatingStar }
```

`Root` creates the instance and shares it with the parts inside. Each mapped slot becomes a component. Slot names become Pascal case: `star` becomes `Star`, and `tab-icon` would become `TabIcon`.

If you leave out the `root` tag, `Root` still shares the instance but renders only its children.

## Render the Rating

The root accepts the primitive's options and the element's props. Each star receives its slot value and a name a screen reader can announce:

```tsx
import { RatingRoot, RatingStar } from "./rating-parts"
import { For } from "solid-js"

function Example() {
  return (
    <RatingRoot defaultValue={4} aria-label="Rating" class="flex gap-1">
      <For each={Array.from({ length: 5 }, (_, index) => index + 1)}>
        {(star) => (
          <RatingStar
            value={String(star)}
            aria-label={`${star} ${star === 1 ? "star" : "stars"}`}
            class="opacity-40 data-filled:opacity-100"
          >
            ★
          </RatingStar>
        )}
      </For>
    </RatingRoot>
  )
}

export { Example }
```

The primitive supplies `data-filled`; these classes make the filled stars easier to see. [Styling and Animation](/docs/solid/styling-and-animation) covers other ways to style parts.

Generated parts also support the same `render` prop and state callbacks as the components in the catalog. Use [Parts and Composition](/docs/solid/parts-and-composition) when you want to change their markup.

## Add Logic to a Part

Keep `createParts` when mapping slots to elements is enough. [Custom Parts](/docs/solid/custom-parts) uses the same rating to show how `usePrimitive` and `usePart` let you write your own root or child part.