blocks/cli

73 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Search registries for available resources

Search for available resources in registries using: `npx shadcn@latest search @v0` to search a specific registry, `npx shadcn@latest search @acme --query "auth"` to search with a query, `npx shadcn@latest search @v0 @acme @lib` to search multiple registries, `npx shadcn@latest search @v0 --limit 10 --offset 20` to limit results, or `npx shadcn@latest list @acme` as an alias for search.

Search results include resource information

Search results include resource name and type, description, and registry source.

Inspect registry resources before installation

Use the `npx shadcn@latest view @namespace/resource` command to inspect registry items before installation. This outputs the payload of the registry item to the console, showing metadata, dependencies, file contents, CSS variables, Tailwind configuration, and required environment variables.

Install resources from namespaced registries

Once configured, install resources using namespace syntax: `npx shadcn@latest add @v0/dashboard` or multiple resources at once: `npx shadcn@latest add @acme/header @lib/auth-utils @ai/chatbot-rules`.

Install resources from URLs directly

The CLI supports installing resources from URLs directly without registry configuration: `npx shadcn@latest add https://registry.example.com/button.json` or from local files: `npx shadcn@latest add ./local-registry/button.json`.

Add direction component for RTL

To add RTL support, run: npx shadcn@latest add direction. Then add the DirectionProvider component to your project following your framework's documentation.

CLI automatically transforms classes for RTL

When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so components work seamlessly in both LTR and RTL contexts.

RTL CLI transformation details

When rtl: true is set in components.json, the shadcn CLI automatically transforms: physical positioning classes like left-* and right-* to logical equivalents like start-* and end-*; directional props are updated to use logical values; text alignment and spacing classes are adjusted accordingly; supported icons are automatically flipped using rtl:rotate-180.

Migrate existing components to RTL

To migrate existing components installed before enabling RTL, run: npx shadcn@latest migrate rtl [path]. [path] accepts a path or glob pattern to migrate. If no path is provided, it will migrate all files in the ui directory.

Add components to RTL Next.js project

After setting up RTL support, use the CLI command `npx shadcn@latest add item` to add components to your project. The CLI automatically handles RTL support for the components.

Adding components in TanStack Start RTL project

After setting up RTL support, add components using the CLI command: npx shadcn@latest add item. The CLI automatically handles RTL support for added components.

Adding components to RTL Vite project

After setup, add components using: npx shadcn@latest add item. The CLI automatically handles RTL support for components.

Lift Mode for Blocks

Lift Mode is a feature for Blocks that automatically lifts smaller components from a block template for copy and paste. It allows copying smaller components that make up a block template, such as cards, buttons, and forms, and pasting them directly into a project.

Give your agent this brain