Components
Loading preview...
This Scrollable Capsule Tabs component is designed to handle a large number of tabs elegantly. It displays a limited number of tabs at a time (visibleCount) and allows users to navigate through them using left/right arrows or pagination dots. The active tab is highlighted, and its corresponding content is displayed below. This layout is ideal for dashboards, analytics menus, or any interface where space is limited but many options need to be accessible. The smooth hover effects, pill-shaped tabs, and responsive design make it visually appealing and user-friendly.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/capsule-tabsimport CapsuleTabs from "@/components/ui/capsule-tabs";
export default function DemoOne() {
return <CapsuleTabs />;
}