Examples

registry:style

Custom style that extends JGuang UI

The following registry item is a custom style that extends JGuang UI. On JGuang UI Registry, it will:

• Install @tabler/icons-react as a dependency.
• Add the login-01 block and calendar component to the project.
• Add the editor from a remote registry.
• Set the font-sans variable to Inter, sans-serif.
• Install a brand color in light and dark mode.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Custom style from scratch

The following registry item is a custom style that doesn't extend JGuang UI. See the extends: none field.

It can be used to create a new style from scratch, i.e. custom components, css vars, dependencies, etc.

On JGuang UI Registry, the following will:

• Install tailwind-merge and clsx as dependencies.
• Add the utils registry item from the JGuang UI registry.
• Add the button, input, label, and select components from a remote registry.
• Install new css vars: main, bg, border, text, ring.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:theme

Custom theme

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Custom colors

The following style will init using JGuang UI defaults and then add a custom brand color.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:block

Custom block

This block installs the login-01 block from the JGuang UI registry.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install a block and override primitives

You can install a block from the JGuang UI registry and override the primitives using your custom ones.

On JGuang UI Registry, the following will:

• Add the login-01 block from the JGuang UI registry.
• Override the button, input, and label primitives with the ones from the remote registry.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:ui

UI component

A registry:ui item is a reusable UI component. It can have dependencies, registry dependencies, and CSS variables.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

UI component with CSS variables

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:lib

Utility library

A registry:lib item is a utility library. Use it to share helper functions, constants, or other non-component code.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:hook

Custom hook

A registry:hook item is a custom React hook.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Hook with dependencies

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Target Placeholders

Use files[].target placeholders when a registry item should install files under the user's configured JGuang UI directories. The available placeholders are @components/, @ui/, @lib/ and @hooks/.

The placeholders are resolved from components.json, so the same registry item works in projects using @/, custom TypeScript aliases, package imports or workspace package exports.

Anything after the placeholder is preserved. For example, @ui/ai/prompt-input.tsx installs under the user's configured ui directory at ai/prompt-input.tsx.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Registry dependencies can use target placeholders too. In the following example, the child item installs a UI component and a helper, while the parent item installs an app component and a hook.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

The target controls where the file is written, even when it differs from the file type.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

registry:font

Custom font

A registry:font item installs a Google Font. The font field is required and configures the font family, provider, import name, and CSS variable.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Monospace font

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Serif font

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Font with custom selector

Use the selector field to apply a font to specific CSS selectors instead of globally on html. This is useful for heading fonts or other targeted font applications.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

When selector is set, the font utility class (e.g. font-heading) is applied via CSS @apply on the specified selector within @layer base, instead of being added to the <html> element. The CSS variable is still injected on <html> so it's available globally.

registry:base

Custom base

A registry:base item is a complete design system base. It defines the full set of dependencies, CSS variables, and configuration for a project. The config field is unique to registry:base items.

The config field accepts the following properties (all optional):

Property	Type	Description
style	string	The style name for the base.
iconLibrary	string	The icon library to use (e.g. lucide).
rsc	boolean	Whether to enable React Server Components. Defaults to false.
tsx	boolean	Whether to use TypeScript. Defaults to true.
rtl	boolean	Whether to enable right-to-left support. Defaults to false.
menuColor	"default" | "inverted" | "default-translucent" | "inverted-translucent"	The menu color scheme. Defaults to "default".
menuAccent	"subtle" | "bold"	The menu accent style. Defaults to "subtle".
tailwind.baseColor	string	The base color name (e.g. neutral, slate, zinc).
tailwind.css	string	Path to the Tailwind CSS file.
tailwind.prefix	string	A prefix to add to all Tailwind classes.
aliases.components	string	Import alias for components.
aliases.utils	string	Import alias for utilities.
aliases.ui	string	Import alias for UI components.
aliases.lib	string	Import alias for lib.
aliases.hooks	string	Import alias for hooks.
registries	Record<string, string | object>	Custom registry URLs. Keys must start with @.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Base from scratch

Use extends: none to create a base that doesn't extend JGuang UI defaults.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Common Fields

Author

Use the author field to add attribution to your registry items.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Dev dependencies

Use the devDependencies field to install packages as dev dependencies.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Metadata

Use the meta field to attach arbitrary metadata to your registry items. This can be used to store custom data that your tools or scripts can use.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

CSS Variables

Custom Theme Variables

Add custom theme variables to the theme object.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Override Tailwind CSS variables

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add custom CSS

Base styles

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Components

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add custom utilities

Simple utility

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Complex utility

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Functional utilities

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add CSS imports

Use @import to add CSS imports to your registry item. The imports will be placed at the top of the CSS file.

Basic import

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Import with url() syntax

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Import with media queries

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add custom plugins

Use @plugin to add Tailwind plugins to your registry item. Plugins will be automatically placed after imports and before other content.

Important: When using plugins from npm packages, you must also add them to the dependencies array.

Basic plugin usage

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Plugin with npm dependency

When using plugins from npm packages like @tailwindcss/typography, include them in the dependencies.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Scoped and file-based plugins

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Multiple plugins with automatic ordering

When you add multiple plugins, they are automatically grouped together and deduplicated.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Combined imports and plugins

When using both @import and @plugin directives, imports are placed first, followed by plugins, then other CSS content.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add custom animations

Note: you need to define both @keyframes in css and theme in cssVars to use animations.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add environment variables

You can add environment variables using the envVars field.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Environment variables are added to the .env.local or .env file. Existing variables are not overwritten.

IMPORTANT: Use envVars to add development or example variables. Do NOT use it to add production variables.

Universal Items

As of 2.9.0, you can create universal items that can be installed without framework detection or components.json.

To make an item universal i.e framework agnostic, all the files in the item must have an explicit target.

Here's an example of a registry item that installs custom Cursor rules for python:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Here's another example for installing a custom ESLint config:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

You can also have a universal item that installs multiple files:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.