Strong-Tie UXR Documentation

Strongtie Registry

Add Strongtie components directly to your project using the shadcn CLI with our custom registry.

The Strongtie registry provides additional components beyond the standard shadcn/ui library, including specialized components like combobox, multi-select, date-picker, and tree views. These components follow the same principles as shadcn/ui - they're copied into your project for full customization.

Registry URL: All Strongtie components are hosted at https://design.strongtie.io/r/{component}

What You Get

Extended component library - Additional components not in standard shadcn/ui
Same ownership model - Code is copied to your project, fully customizable
Strongtie branding - Pre-configured with Strongtie design standards
Full compatibility - Works seamlessly with shadcn/ui components

Prerequisites

Before using the Strongtie registry, you should already have shadcn/ui set up in your project. If you haven't done this yet, follow our ShadCN with Tailwind guide first.

Adding Components

Add components from the Strongtie registry by URL:


npx shadcn@latest add https://design.strongtie.io/r/combobox.json

Or configure the registry in your components.json (recommended - see below) and use the namespace:


npx shadcn@latest add @strongtie/combobox

This will:

Fetch the component from the Strongtie registry
Install any required dependencies
Copy the component to your components/ui/ directory
Make it ready for customization

Available Components

The Strongtie registry currently includes these extended components:

combobox - A searchable dropdown with autocomplete functionality
multi-select - Select multiple options with checkboxes and badge display
date-picker - Date selection with calendar popover and input options
tree - Hierarchical data display with expand/collapse functionality

Adding Multiple Components

You can add multiple components at once using the namespace syntax:


npx shadcn@latest add @strongtie/combobox @strongtie/multi-select @strongtie/date-picker

Customizing Registry Components

Once added, registry components work exactly like standard shadcn components. The code lives in your project and can be customized:

components/ui/combobox.tsx

// Modify styling, behavior, or structure as needed - you own this code
export function ComboBox({ className, ...props }: ComboBoxProps) {
  return <Command className={cn("your-custom-classes", className)} {...props} />
}

Component Dependencies

Registry components depend on standard shadcn/ui components and some external packages. The CLI automatically installs these dependencies when you add a component:

combobox requires: cmdk, lucide-react, popover, command, button
multi-select requires: lucide-react, button, badge, popover, checkbox
date-picker requires: lucide-react, popover, button, input, calendar
tree requires: lucide-react, button, collapsible

Updating Components

To update a component from the registry, run the add command again with the --overwrite flag or select 'y' when asked:


npx shadcn@latest add @strongtie/combobox --overwrite

Warning: The --overwrite flag will replace your local version. Any customizations will be lost. Consider using version control to track changes.

Setting Default Registry

To avoid typing --registry every time, you can configure it in your components.json:

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "vega",
  "registries": {
    "@strongtie": "https://design.strongtie.io/r/{name}"
  }
  // ... other config
}

Then add components with:


npx shadcn@latest add @strongtie/combobox

Troubleshooting

Registry not found error

Ensure you're using the latest version of the shadcn CLI:


npm install -g shadcn@latest

Component dependencies missing

If a component isn't working after installation, try adding it again:


npx shadcn@latest add @strongtie/combobox --overwrite

TypeScript errors

Restart your TypeScript server after adding new components:

VS Code: Cmd/Ctrl + Shift + P > "TypeScript: Restart TS Server"

Next Steps

View documentation for registry components:
Browse all components
Learn about customization

ShadCN with Tailwind @strongtie/styles

On This Page

What You Get Prerequisites Adding Components Available Components Adding Multiple Components Customizing Registry Components Component Dependencies Updating Components Setting Default Registry Troubleshooting Registry not found error Component dependencies missing TypeScript errors Next Steps

Contribute