I have a question on React project structure, specifically imports for the experienced React JS engineers.

So I've been using a hybrid approach where I have barrel files (index.ts) at the feature/module level and direct imports for more specific/internal components

Example:

import { Card } from '@/components';            // barrel (public API)
import { CardHeader } from '@/components/Card'; // direct (more specific)

It feels like a good balance between clean imports and clarity but I'm curious how others handle this at scale.

1. Do you prefer full barrel pattern everywhere?
2. Avoid barrels completely?
3. Or something similar to this hybrid approach?

Any pros/cons you've experienced (especially in larger codebases)?