# Examples ยท JGuang UI > Examples of registry items: styles, components, css vars, etc. - Page: https://jiguang132.com/systems/jguang-ui/docs/registry/examples - Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c ## 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. ```text 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`. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ## registry:theme ### Custom theme ```text 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. ```text 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. ```text 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. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### UI component with CSS variables ```text 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. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Hook with dependencies ```text 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`. ```text 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. ```text 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`. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Monospace font ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Serif font ```text 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. ```text 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 `` element. The CSS variable is still injected on `` 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` | Custom registry URLs. Keys must start with `@`. | ```text 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. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Dev dependencies Use the `devDependencies` field to install packages as dev dependencies. ```text 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. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Override Tailwind CSS variables ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ## Add custom CSS ### Base styles ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Components ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ## Add custom utilities ### Simple utility ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Complex utility ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Functional utilities ```text 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 ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Import with url() syntax ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Import with media queries ```text 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 ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ### Scoped and file-based plugins ```text 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. ```text 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. ```text 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. ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` ## Add environment variables You can add environment variables using the `envVars` field. ```text 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_: ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` Here's another example for installing a custom ESLint config: ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` You can also have a universal item that installs multiple files: ```text Use the JGuang UI Registry URL provided on /systems/jguang-ui#install. ``` --- Index of all JGuang resources: https://jiguang132.com/llms.txt