Tabs

Use Tabs for related content that doesn't need simultaneous viewing: settings categories, profile sections (About, Posts, Photos), dashboard views. Tabs save space and organize content logically. Don't use for sequential steps—use Steppers instead.

Keep it to 3-7 tabs ideally. More than that becomes hard to scan and indicates content might need different organization. If you have many categories, consider grouping them or using navigation patterns like Sidebar instead of Tabs.

Depends on use case. For forms or user input, yes—preserve state so users don't lose work when switching tabs. For simple content display, loading fresh content each time is fine. Match user expectations based on context.

Yes! Icons provide quick visual identification, especially helpful in horizontal tabs with limited space. Either icon-only (with tooltips) or icon + label for clarity. Ensure icons are meaningful, not decorative.

Yes, but watch for tab overflow. Use scrollable tabs or convert to a dropdown Select on small screens. Test on actual devices—what looks fine on desktop might have unclickable tabs on mobile due to space constraints.

Yes, this Figma Tabs component matches the shadcn/ui implementation exactly, ensuring your tabbed interfaces work consistently from design to production with proper keyboard navigation and state management.