Skip to main content

ore-styled

@bedrock-core/ore-styled is a themed component layer over the @bedrock-core/ui primitives.

Beta

@bedrock-core/ore-styled is in beta: the API can change between releases. Pin exact versions and read the changelog before upgrading.

What is @bedrock-core/ore-styled?​

Every component renders with authentic Minecraft textures shipped in the render pack, so a screen matches the vanilla look with no texture work. It is entirely optional: the primitives underneath are fine to style yourself.

The textures are defaults, not a lock. Every surface prop a primitive accepts is accepted here too, with the theme's value as the fallback — pass one and yours wins.

Install​

npm install @bedrock-core/ore-styled

No extra resource pack: the theme's textures live in the same render pack the framework already requires.

Import​

import { Button, Card, Checkbox, Divider, Dropdown, Form, Header, Input, MenuRow, Radio, Slider, Tabs, Toggle, ToggleButtons, Trail } from '@bedrock-core/ore-styled';

Layout and chrome​

  • <Button> — a button in seven variants, or a themed <Link> when given to
  • <Card> — the standard panel background, padding and gap, in six variants
  • <Divider> — a horizontal or vertical rule in three variants
  • <Header> — a screen header bar: back control, breadcrumb trail, close control
  • <Trail> — the breadcrumb trail on its own, with live segments that take no room when empty
  • <MenuRow> — a browse-list row: thumbnail, title, subtitle, trailing chevron
  • <Tabs> — panes switched on the client, each header a label on the theme's faces
  • FRAME, PADDING, PADDING_BOTTOM, HEADER_HEIGHT, HEADER_GAP, BODY — the canvas every bedrock-core screen is baked at and the card inside it, so two packs that meet in one frame agree on its geometry without asking each other

Booleans​

  • <Checkbox> — the box, then the caption
  • <Toggle> — the caption, then a switch pinned right; the settings-row reading order

One choice out of several​

  • <Radio> — a bullet and a label per row
  • <ToggleButtons> — side-by-side segments with fused borders, one choice or several

Forms and modal fields​

  • <Form> — the native form root with the theme's button treatment

  • <Form.Button> — a submit or exit action with primary, secondary, danger, or transparent styling

  • <Input> — a single-line text field

  • <Dropdown> — the current selection with a chevron, and a popup

  • <Slider> — a track, a progress fill and a thumb

Captions​

The runtime's controls are deliberately label-free — a caption is composed in this layer, and every themed component above does it for you when you pass label. fieldLabel is that composition, exported for a control of your own:

import { fieldLabel } from '@bedrock-core/ore-styled';

fieldLabel('Volume', true);   // the caption, in the theme's field-label style

It takes the label and whether the control is enabled. A literal string carries the state color as a § prefix; a string the active resolver knows as a .lang key passes through untouched, because a prefix in front of a key stops it resolving.

Use the themed <Form> from this package when you want its action buttons to match the rest of the screen. Its props match the runtime form root, so the field components above sit inside it in the usual way.

Theme​

  • theme — the token map every component reads, and what to change to restyle the set

Next steps​

  • <Button> — the variants, and a form's two actions
  • Hosts — what each screen can carry, and why a field refuses some of them
  • Control props — the layout props every component here accepts
On this page