Changelog

All previous and current changes can be found here

0.0.4

What's New

Added Hotkeys utility

Easily create and customize keyboard shortcuts, sequences, and scopes to access commands instantly. This allows you to personalize your app workflow by defining shortcuts for frequently used actions.

To learn more, check out the Hotkeys documentation.

Improvements

Updated sizes

The size and border-radius of components (button, chip, code, input, textarea, etc.) has been updated to improve consistency and usability across the library.

0.0.3

What's New

Added NavigationMenu component

Added a NavigationMenu component to the library, allowing users to create navigation menus with ease.

To learn more, check out the NavigationMenu documentation.

Improvements

Updated packages readme

We updated the readme for all packages to provide clearer documentation and usage instructions.

0.0.2

What's New

Added Table of Contents (ToC)

We integrated a table of contents (ToC) component to streamline navigation for users, improving readability and user experience by allowing seamless jumping to specific sections.

How to Use

To use the ToC component, simply import it and wrap your content with it.

import {Toc} from "@elemnts-ui/react"

export default function Component() {
  return (
    <Toc>
      <Toc.Content>
        Content goes here
      </Toc.Content>
      <Toc.Nav>
        <Toc.Title />
        <Toc.List>
          <Toc.Item>
            <Toc.Link />
          </Toc.Item>
        </Toc.List>
      </Toc.Nav>
    </Toc>
  );
}

Improvements

Fixed scrollbar typo

We fixed a typo in the scrollbar style, ensuring consistent appearance across browsers.

scrollbarWidth: "thin"

Updated scrollbar colors

We updated the scrollbar colors to match the new design system.

scrollbarColor: "{colors.stroke.primary} {colors.transparent}"

0.0.1

What's New

Moto UI renamed to Elemnts UI

We are forced to rename to Elements UI to avoid confusion with the official Moto UI an interface design system for Motorola devices.

New packages

We have launched @elemnts-ui/core, a standalone package designed to replace several legacy internal dependencies.

Key Reason for the Update

We removed styled-system package because its fixed jsxFramework setting could conflict with other frameworks packages. We combined @moto-ui/colors and @moto-ui/preset-base into @elemnts-ui/core, making updates easier and ensuring compatibility with the latest Panda CSS versions.

Package Replacement Summary

Deprecated	Replacement	Path
`@moto-ui/colors`	`@elemnts-ui/core`	`@elemnts-ui/core/colors`
`@moto-ui/preset-base`	`@elemnts-ui/core`	`@elemnts-ui/core/presets`
`@moto-ui/styled-system`	`deprecated`	`none`

The new panda config

Import the preset from the core package and use it in your panda.config.ts file.

import { defineConfig } from "@pandacss/dev";
import { basePreset } from "@elemnts-ui/core/presets";

export default defineConfig({
  presets: [basePreset],
  include: [
    "src/**/*.{ts,tsx}",
    "node_modules/@elemnts-ui/react/dist/buildinfo.json",
  ],
});

Improvements

We have updated our design token architecture to simplify usage and improve component state handling.

Token Deprecations

All bg semantic tokens have been removed in favor of surface tokens, as both served identical semantic purposes.

New Interactive State Tokens

We have introduced a new mix token category to handle background colors for interactive component states (e.g., buttons, list items).

New Token	Intended Usage
`mix.hover`	Background color for hover states
`mix.active`	Background color for pressed or active states
`mix.selected`	Background color for selected or toggled states

Removed VirtualList component

The VirtualList component has been deprecated and completely removed from the library.

Why: The component introduced unnecessary bundle bloat and architectural complexity without providing enough flexibility for diverse use cases.
Recommended Action: If your application requires virtualization, we recommend integrating a dedicated community library suited to your framework (such as react-window or @tanstack/react-virtual).