How can I customize the default spacing between components in shadcn to fit my design?

[desiah]

I am using shadcn in my project and I want to tweak the spacing between components globally to align with my design. Is there a way to do this without overriding every component manually?

[georgeeburt]

You can customise the default spacing globally in shadcn by extending the tailwind CSS configuration file (tailwind.config.js) since shadcn is built on tailwind.

Here is a simple example:

module.exports = {
  theme: {
    extend: {
      spacing: {
        'custom-1': '4px',
        'custom-2': '8px',
        // Add more as needed
      },
    },
  },
};

Hope this helps.

[desiah]

thank you