@plume-ui-react/core NPM

Plume UI React Core

The Plume UI Core is the foundational module for the Plume UI library of React components. It provides configuration options and basic types used throughout the library.

Installation

You can install the Plume UI Core module using your preferred package manager:

npm install @plume-ui-react/core
# Or
yarn add @plume-ui-react/core

Configuration

The Plume UI Core allows you to customize the default configuration for the entire Plume UI library. You can configure various aspects, but the primary configuration is related to color palettes.

Default Configuration

The default configuration includes a set of predefined colors:

import { DefaultConfig } from '@plume-ui-react/core'

const defaultConfig: DefaultConfig = {
  colors: {
    primary: 'rgb(99, 102, 241)',
    secondary: 'rgb(107, 114, 128)',
    info: 'rgb(59, 130, 246)',
    warning: 'rgb(234, 179, 8)',
    error: 'rgb(239, 68, 68)',
    success: 'rgb(34, 197, 94)',
    dark: 'rgb(31, 41, 55)',
    light: 'rgb(250, 250, 250)',
  },
}

Custom Configuration

You can override the default configuration by providing your custom configuration:

import { setUserConfig } from '@plume-ui-react/core'

const customConfig = {
  colors: {
    primary: 'your-primary-color',
    // Add more custom color overrides as needed
  },
}

setUserConfig(customConfig)

Merged Configuration

To access the merged configuration that combines the default and custom configurations, use the following function:

import { getMergedConfig } from '@plume-ui-react/core'

const mergedConfig = getMergedConfig()

Types and Interfaces

The Plume UI Core module exports various types and interfaces that are essential for consistent and type-safe usage across the Plume UI library. These include:

DefaultConfig: The default configuration structure.
CustomUserConfig: The user's custom configuration structure.
PlumeUIConfig: The merged configuration that combines the default and user configurations.
ComponentProps: Common component props that allow custom classes and styles to be applied.

Additionally, it defines color palette types, sizing options, custom color palette interfaces, etc. to ensure consistent styling and theming across Plume UI components.