Plugins

Plugins are optional package entries that extend the core library without changing its root import. They are not re-exported from @xingxingmofashu/ui, so an application that does not import a plugin does not bundle its code or styles.

Import pathsCopy Anchor Link

Plugin entries follow the package structure:

For example, the glass preset plugin exposes:

import {
  GlassPresetProvider,
  GlassPresetScope,
} from "@xingxingmofashu/ui/plugins/glass-preset";

@import "@xingxingmofashu/ui/plugins/glass-preset/index.css";

The wildcard exports resolve the module at plugins/<name>/index and the optional stylesheet at plugins/<name>/index.css.

StylingCopy Anchor Link

Plugins never import their own stylesheet from the core stylesheet. A plugin that ships CSS expects an explicit import after the core stylesheet:

@import "tailwindcss";
@import "@xingxingmofashu/ui";
@import "@xingxingmofashu/ui/plugins/glass-preset/index.css";

Keeping plugin CSS opt-in means the core stylesheet works on its own and unused plugin styles stay out of the build.

Client boundariesCopy Anchor Link

Plugins follow the same React boundaries as the core components. Modules that use hooks or browser APIs carry the "use client" directive. Server-safe helpers, such as the glass preset script generator, can be rendered or called from a server component. Check each plugin page for the exact entry points.