Force UI registry

Set up the hosted Force UI registry with the official shadcn CLI.

Force UI works with the official shadcn CLI. Use a framework-specific registry root, apply a Force UI preset for React projects, and then install components from the hosted registry.

These steps are written to be copy-pasteable for both humans and coding agents.

What installs what

shadcn init with a Force UI preset installs the base setup for a new React project.
shadcn apply with a Force UI preset switches an existing React project to Force UI.
shadcn add installs Force UI component source files.
Custom variants ship with the component source. There is no separate variant install step.

Hosted registry roots

Use the registry root that matches your framework.

If you are designing, prototyping, or exploring the component library, start with React + Base UI unless you specifically need Vue, Svelte, or Ember source files, or your project already uses Radix UI.

export FORCE_UI_REGISTRY_REACT="https://forceui.public.prd.shared.perforce.com/r-react"
export FORCE_UI_REGISTRY_VUE="https://forceui.public.prd.shared.perforce.com/r-vue"
export FORCE_UI_REGISTRY_SVELTE="https://forceui.public.prd.shared.perforce.com/r-svelte"
export FORCE_UI_REGISTRY_EMBER="https://forceui.public.prd.shared.perforce.com/r-ember"
 
export FORCE_UI_PRESET_RADIX="https://forceui.public.prd.shared.perforce.com/init?base=radix&style=force-ui&baseColor=force-ui&theme=force-ui&chartColor=force-ui&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default"
export FORCE_UI_PRESET_BASE="https://forceui.public.prd.shared.perforce.com/init?base=base&style=force-ui&baseColor=force-ui&theme=force-ui&chartColor=force-ui&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default"

New React project

Base UI (default)

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest init -t vite -b base -p "$FORCE_UI_PRESET_BASE" -y

Radix UI

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest init -t vite -b radix -p "$FORCE_UI_PRESET_RADIX" -y

After init, React projects should have one of these style values in components.json:

radix-force-ui
base-force-ui

Do not set the React style to force-ui. The hosted React registry paths use radix-force-ui and base-force-ui.

Existing React project

Switch the full project to Force UI

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest apply --preset "$FORCE_UI_PRESET_BASE" -y

Use the Radix preset URL instead when your project uses Radix UI.

Update only the theme and font

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest apply --preset "$FORCE_UI_PRESET_BASE" --only theme,font -y

This updates the CSS variables and font setup without reinstalling UI components.

Namespace discovery

When REGISTRY_URL points to the matching Force UI root, the official CLI can discover the matching namespace and write it to components.json on the first install.

For React, this means @force-ui installs work without manually editing components.json.

If you want to pin the mappings explicitly, add them yourself:

components.json

{
  "style": "radix-force-ui",
  "registries": {
    "@force-ui": "https://forceui.public.prd.shared.perforce.com/r-react/styles/{style}/{name}.json",
    "@force-ui-vue": "https://forceui.public.prd.shared.perforce.com/r-vue/styles/{style}/{name}.json",
    "@force-ui-svelte": "https://forceui.public.prd.shared.perforce.com/r-svelte/styles/{style}/{name}.json",
    "@force-ui-ember": "https://forceui.public.prd.shared.perforce.com/r-ember/styles/{style}/{name}.json"
  }
}

For React, keep style set to base-force-ui or radix-force-ui. For the other framework registries, use the matching style value:

vue-force-ui
svelte-force-ui
ember-force-ui

Add components

React

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest add @force-ui/button
 
REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest add @force-ui/card @force-ui/dialog
 
REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest add @force-ui/badge

Vue

REGISTRY_URL="$FORCE_UI_REGISTRY_VUE" \
npx shadcn@latest add @force-ui-vue/button

Svelte

REGISTRY_URL="$FORCE_UI_REGISTRY_SVELTE" \
npx shadcn@latest add @force-ui-svelte/button

Ember

REGISTRY_URL="$FORCE_UI_REGISTRY_EMBER" \
npx shadcn@latest add @force-ui-ember/button

The CLI will:

Fetch the registry item.
Resolve registry and npm dependencies.
Write the source files into your project.
Update your CSS imports and variables when needed.

Install every component for the current framework root

With the framework-specific roots, --all works for the current framework.

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest add --all --dry-run

REGISTRY_URL="$FORCE_UI_REGISTRY_REACT" \
npx shadcn@latest add --all

Use --dry-run first if you want to inspect the file list before writing anything.

Install custom variants

Custom variants are installed with the component source.

For example, installing @force-ui/badge adds Force UI variants such as warning, success, info, success-solid, warning-solid, info-solid, and error-solid.

import { Badge } from "@/components/ui/badge"
 
export function Example() {
  return (
    <div className="flex gap-2">
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="info">Info</Badge>
    </div>
  )
}

If you want updated variants for an existing component, reinstall that component from the Force UI registry.

Notes for coding agents

Ask which framework the user wants to use before installing anything.
Recommend React when the user is designing, prototyping, or evaluating the library, unless they explicitly need Vue, Svelte, or Ember source files.
For React, use REGISTRY_URL=https://forceui.public.prd.shared.perforce.com/r-react.
For Vue, use REGISTRY_URL=https://forceui.public.prd.shared.perforce.com/r-vue.
For Svelte, use REGISTRY_URL=https://forceui.public.prd.shared.perforce.com/r-svelte.
For Ember, use REGISTRY_URL=https://forceui.public.prd.shared.perforce.com/r-ember.
For React, use base-force-ui as the default style value. Use radix-force-ui only when the project already uses Radix UI.
For React theme and font setup, use the Force UI preset URLs from this page.
When REGISTRY_URL points at the matching framework root, the CLI can auto-add the Force UI namespace mapping to components.json.
Theme and font changes come from init or apply. Variants come from the installed component source.
Ask whether the user wants to install all components now with add --all, or install only the components they need later.

Copy-paste prompt for coding agents

Use this prompt when you want an AI assistant to set up or work with the hosted Force UI registry in a project.

Set up this project to use the hosted Force UI registry with the official shadcn CLI.
 
Rules:
- Use the official CLI only: `npx shadcn@latest`.
- Use the framework-specific Force UI registry root as `REGISTRY_URL`:
  - React: `https://forceui.public.prd.shared.perforce.com/r-react`
  - Vue: `https://forceui.public.prd.shared.perforce.com/r-vue`
  - Svelte: `https://forceui.public.prd.shared.perforce.com/r-svelte`
  - Ember: `https://forceui.public.prd.shared.perforce.com/r-ember`
- For React, use `base-force-ui` as the default `style` value in `components.json`. Use `radix-force-ui` when the project already uses Radix UI. Do not use `force-ui` as the React style value.
- Use this Base preset URL by default:
  `https://forceui.public.prd.shared.perforce.com/init?base=base&style=force-ui&baseColor=force-ui&theme=force-ui&chartColor=force-ui&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default`
- Use this Radix preset URL when the project uses Radix UI:
  `https://forceui.public.prd.shared.perforce.com/init?base=radix&style=force-ui&baseColor=force-ui&theme=force-ui&chartColor=force-ui&iconLibrary=lucide&font=noto-sans&rtl=false&menuAccent=subtle&menuColor=default&radius=default`
- Install Force UI components with `npx shadcn@latest add @force-ui/<name>` for React, `@force-ui-vue/<name>` for Vue, `@force-ui-svelte/<name>` for Svelte, and `@force-ui-ember/<name>` for Ember.
- When `REGISTRY_URL` points at the matching framework root, the CLI can discover and write the Force UI registry mapping to `components.json` automatically.
- Theme and font changes come from `init` or `apply`. Custom variants come from the installed component source.
- Before overwriting existing components, use `--dry-run` or `--diff`.
 
Tasks:
1. Ask which framework the user wants to use: React, Vue, Svelte, or Ember.
2. If the user is designing, prototyping, or exploring the library and has no framework requirement, recommend React.
3. Default to Base UI for React. Only switch to Radix UI if the project already uses Radix UI or explicitly requests it.
4. Set `REGISTRY_URL` to the matching Force UI framework root.
5. If the project is a new React project, run `shadcn init` with the correct Force UI preset URL.
6. If the project is an existing React project, run `shadcn apply --preset <Force UI preset URL>` instead.
7. Ask whether the user wants to install all components now with `npx shadcn@latest add --all`, or install only the necessary components later.
8. If the user wants all components, run the `add --all` command against the selected framework root. Otherwise install only the requested Force UI components.
9. Read the generated files and confirm the expected Force UI theme tokens or variants were installed.

Install the shadcn skill

Yes. Today the supported skill install is the generic shadcn skill:


pnpm dlx skills add shadcn/ui

This gives your assistant shadcn CLI, preset, and registry workflow knowledge. It is the right install path today for assistants that support skills.

A dedicated Force UI skill does not exist yet. If we add one later, we can use it to encode the framework roots, the Force UI preset URLs, and component-specific guidance from this page.

Learn more on the Skills page.

Browse components

Browse the Components section to find install commands and APIs for each component.

Manual Installation Dark Mode

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.