Hide radix imports

[dominikjasek]

Hey, is there any eslint or tsconfig rule which forbids default radix components?

In the following picture, I don't want to see second row.

[Alexjoshua14]

I'm not sure if this is directly helpful for you but for anyone using VSCode, you can add '@radix-ui' to the Auto Import File Exclude Patterns option in VSCode's settings.

[zenzen-sol]

@mizrabsheikh No, I was never able to find a solution for this, unfortunately. No matter what I did with the exclude pattern, there is either a blindspot for react-icons, or you catch all of radix-ui.

[chrisribal]

This also blocks auto-import of @radix-ui/react-icons, and I guess anything else in the @radix-ui namespace that doesn't have a counterpart in shadcn-ui.

@rwieruch I replied to your tweet with an incorrect clarification. I assumed that normal glob rules would apply in the exclude patterns, but they don't seem to work.

Does anyone have a clever trick for allowing only @radix-ui/react-icons, but blocking all the rest of @radix-ui/*?

Try to set the exclude rule to @radix-ui/!(icons). This excludes every radix-ui package, but the icons.

[vhbui02]

This also blocks auto-import of @radix-ui/react-icons, and I guess anything else in the @radix-ui namespace that doesn't have a counterpart in shadcn-ui.
@rwieruch I replied to your tweet with an incorrect clarification. I assumed that normal glob rules would apply in the exclude patterns, but they don't seem to work.
Does anyone have a clever trick for allowing only @radix-ui/react-icons, but blocking all the rest of @radix-ui/*?

Try to set the exclude rule to @radix-ui/!(icons). This excludes every radix-ui package, but the icons.

You're doing it wrong. It's "typescript.preferences.autoImportFileExcludePatterns": [ "@radix-ui/react-a*","@radix-ui/react-o*", "@radix-ui/react-b*","@radix-ui/react-p*", "@radix-ui/react-d*","@radix-ui/react-q*", "@radix-ui/react-c*","@radix-ui/react-r*", "@radix-ui/react-e*","@radix-ui/react-s*", "@radix-ui/react-f*","@radix-ui/react-t*", "@radix-ui/react-g*","@radix-ui/react-u*", "@radix-ui/react-h*","@radix-ui/react-v*", "@radix-ui/react-j*","@radix-ui/react-w*", "@radix-ui/react-k*","@radix-ui/react-x*", "@radix-ui/react-l*","@radix-ui/react-y*", "@radix-ui/react-m*","@radix-ui/react-z*", "@radix-ui/react-n*", ],

[longzheng]

I used ChatGPT to generate a list of all the Radix imports that Shadcn components use

{
    "typescript.preferences.autoImportFileExcludePatterns": [
        "/node_modules/storybook/**/*",
        "/src/**/*.stories.tsx",
        "@radix-ui/react-accordion",
        "@radix-ui/react-alert-dialog",
        "@radix-ui/react-aspect-ratio",
        "@radix-ui/react-avatar",
        "@radix-ui/react-checkbox",
        "@radix-ui/react-collapsible",
        "@radix-ui/react-context-menu",
        "@radix-ui/react-dialog",
        "@radix-ui/react-dropdown-menu",
        "@radix-ui/react-hover-card",
        "@radix-ui/react-label",
        "@radix-ui/react-menubar",
        "@radix-ui/react-navigation-menu",
        "@radix-ui/react-popover",
        "@radix-ui/react-progress",
        "@radix-ui/react-radio-group",
        "@radix-ui/react-scroll-area",
        "@radix-ui/react-select",
        "@radix-ui/react-separator",
        "@radix-ui/react-slider",
        "@radix-ui/react-switch",
        "@radix-ui/react-tabs",
        "@radix-ui/react-toast",
        "@radix-ui/react-toggle",
        "@radix-ui/react-toggle-group",
        "@radix-ui/react-tooltip"
    ]
}

[vhbui02]

I used ChatGPT to generate a list of all the Radix imports that Shadcn components use

{
  "typescript.preferences.autoImportFileExcludePatterns": [
    "@radix-ui/react-accordion",
    "@radix-ui/react-alert-dialog",
    "@radix-ui/react-aspect-ratio",
    "@radix-ui/react-avatar",
    "@radix-ui/react-checkbox",
    "@radix-ui/react-collapsible",
    "@radix-ui/react-context-menu",
    "@radix-ui/react-dialog",
    "@radix-ui/react-dropdown-menu",
    "@radix-ui/react-hover-card",
    "@radix-ui/react-menubar",
    "@radix-ui/react-navigation-menu",
    "@radix-ui/react-popover",
    "@radix-ui/react-progress",
    "@radix-ui/react-radio-group",
    "@radix-ui/react-scroll-area",
    "@radix-ui/react-select",
    "@radix-ui/react-separator",
    "@radix-ui/react-slider",
    "@radix-ui/react-switch",
    "@radix-ui/react-tabs",
    "@radix-ui/react-toggle-group",
    "@radix-ui/react-toast",
    "@radix-ui/react-tooltip"
  ]
}

Please don't use ChatGPT to handle these task:

• First, it's a "near-100%" accuracy pattern matcher, but it will never be 100%. So there can be mistakes.
• Second, the model's training date cut-off is dated back to a few months. It might not reflect newer changes on shadCN's upstream version.