Skip to main content

ore-styled

@bedrock-core/ore-styled is a themed component layer built on top of the @bedrock-core/ui primitives. Every component renders with authentic Minecraft textures shipped through the @bedrock-core/ore-styled resource pack, so your UI matches the vanilla look out of the box.

Install​

yarn add @bedrock-core/ore-styled

You also need the matching @bedrock-core/ore-styled resource pack installed in your project — it provides the textures referenced by the theme.

Import​

import { Button, Card, Checkbox, Toggle, RadioGroup, Radio, ToggleButtonGroup, ToggleButtonItem, Divider, Input, Dropdown, Slider } from '@bedrock-core/ore-styled';

Components​

  • <Button> — styled button with six variants (hero, primary, secondary, contrast, danger, realm).
  • <Card> — container with the standard panel background, padding, and gap.
  • <Checkbox> — labelled checkbox, controlled or uncontrolled.
  • <Toggle> — on/off switch.
  • <RadioGroup> / <Radio> — single-choice radio set.
  • <ToggleButtonGroup> / <ToggleButtonItem> — segmented button group with single selection.
  • <Divider> — horizontal or vertical divider line in three variants.
  • <Input> — single-line text field; pressing it opens the native modal text field.
  • <Dropdown> — select field with a chevron; pressing it opens the native modal dropdown.
  • <Slider> — field drawn as a track + thumb; pressing it opens the native modal slider.

Experimental Components​

caution

These components are experimental and may change or be removed. They have known limitations in multi-addon worlds — each requires a manually supplied ItemAuxMap via ItemAuxContext. Read each component's page before use.

import { ItemSlot, ItemContainer, EquipmentSlots } from '@bedrock-core/ore-styled';
import { ItemAuxContext, type ItemAuxMap } from '@bedrock-core/ui';
  • <ItemSlot> — single inventory slot with item or overlay texture.
  • <ItemContainer> — grid of ItemSlots covering a Container's slots.
  • <EquipmentSlots> — helmet → boots + offhand column with silhouette overlays.

Theme​

All visual tokens (spacing, font colors, component textures) live in a single theme object you can read and reuse. See the theme page for the full token map.