SLARIVO / TABS

Tabs Components

Browse 238 exact locally owned demos. Filter the collection, inspect a focused preview, and unlock its implementation prompt.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Tabs with varients

• Slarivo Tabs in cell for navigation

  shadcn/ui tabs in cell for navigation

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Table

  Shadcn table with enhanced appearance

• Slarivo Tabs 6

  Here is Tabs Component

• Slarivo Table

  A simple table component for displaying tabular data.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Vercel Tabs

  Tabs in Vercel style

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Table

  Shadcn table with enhanced appearance

• Slarivo Table

  Shadcn table with enhanced appearance

• Slarivo Expandable Tabs

  A set of expandable tabs that show both icon and text when selected. Tabs animate smoothly to expand or collapse on click, and clicking outside collapses any open tab. Features - Animated Expansion: Smooth animations when revealing tab labels - Space Efficient: Collapses to icons-only when not in use - Click Outside: Automatically collapses when clicking outside - Separator Support: Optional separators between tab groups - Customizable: Supports custom colors and styling - Shadcn/UI Theme: Fully integrated with shadcn/ui theming system - Dark Mode: Built-in dark mode support - Accessible: Keyboard navigation and screen reader friendly Example Use Cases - Navigation Menus: Compact sidebar navigation - Toolbars: Feature-rich toolbars that save space - Mobile Interfaces: Touch-friendly navigation - Settings Panels: Grouped settings controls - Dashboard Controls: Quick access to main features

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Tabs

  Enchanced shadcn/ui tabs

• Slarivo Feature 108

  A versatile section with 3 features inside a tabs component

• Slarivo Hero 195

  A modern hero section with tabs, animated border and crisp fading background lines framing the hero images.

• Slarivo Gooey Filter

  An svg filter component that creates a gooey effect on the background. Can be used to create fluid interfaces or rounded-at-all-corners panels. Limited support for Safari.

• Slarivo Dorpdown Navigation

  A dynamic and interactive multi-level navigation menu with dropdown submenus and hover effects.

• Slarivo Animated Tabs

  Animated tabs interaction made with framer motion and tailwind css.

• Slarivo Feature Showcase

  The FeatureShowcase component is a responsive, theme-aware section built entirely with shadcn/ui primitives that blends storytelling and interaction. It pairs an informative left panel—featuring a headline, description, subtle stats, step-by-step accordion, and clear call-to-action buttons—with a dynamic right panel that displays tab-based media. Each tab reveals a full-bleed image that automatically fills the container, making the layout visually balanced and immersive. Ideal for product introductions or feature highlights, this component lets designers combine concise narrative content with interactive visuals to engage users across light and dark themes.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Animated Tabs

  Interactive tabs animated using clip path and framer motion

• Slarivo Animated Tabs

  Animated Tabs

• Slarivo Theme Tabs

  Theme Tabs

• Slarivo Highlight

  An animated highlight component that tracks active or hovered elements with smooth spring animations, supporting parent and children modes.

• Slarivo Simple Tabs with underline and bold font

  shadcn/ui simple tabs with underline and bold font

• Slarivo Code block

  CodeBlock component for switching between multiple code files, with syntax highlighting, file icons, and copy code functionality.

• Slarivo Pill Morph Tabs

  The Pill Morphing Tabs component is a modern take on tab navigation, styled as smooth rounded pills that provide a sleek and minimal interface. When switching between tabs, the active pill expands with a spring-based animation before settling back into its natural shape, creating an engaging and fluid user experience. Built with shadcn UI Tabs and enhanced by motion effects, this component supports customizable labels, panels, and default values while remaining responsive to both light and dark themes. Its subtle gradient or glassmorphism background adds depth and elegance, making it ideal for dashboards, profile sections, or multi-view layouts where clarity and aesthetics are equally important.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo E-commerce Product Detail

  Features This Product Detail component includes: Interactive Image Gallery Large main image with thumbnails Previous/next navigation arrows Thumbnails with active state indicator Product Information Name, price, and rating display Tabbed content for description, details, and shipping Wishlist functionality Customization Options Color selection with visual indicators Size selection with active states Quantity selector Purchase Actions Add to cart button Buy now button Responsive Design Mobile-friendly layout that adapts to different screen sizes Proper spacing and typography for all viewports Accessibility Features Proper ARIA attributes Keyboard navigation support Focus management Screen reader friendly markup Dark Mode Support Complete styling for both light and dark themes The component uses Tailwind CSS for styling and includes all the necessary SVG icons embedded directly in the code for portability.

• Slarivo Swap Card

  swap-card This file contains the reusable SwapCard component. It uses framer-motion for the layout animations, lucide-react for icons, and is styled with shadcn/ui principles.

• Slarivo Fade Slide Tabs

  The Fade + Slide Tabs component elevates traditional tab navigation by animating the tab content with smooth fade and slide effects. When switching tabs, the previous content gently fades out while the new content slides in from the right, creating a polished and fluid user experience. Built using shadcn UI Tabs and Framer Motion, this component supports fully customizable labels, content panels, and default active tabs. Its responsive design works seamlessly across light and dark themes, making it ideal for dashboards, multi-view interfaces, and applications where smooth, visually engaging transitions enhance usability and user engagement.

• Slarivo Animated Tabs Background

  Animated Tabs Background

• Slarivo Segment Group

  Here is Segment Group component

• Slarivo Package Installer Tabs

  The PackageInstallerTabs component is a modern, Shadcn UI–based code snippet viewer designed for quick package installation commands. It provides users with tabbed navigation for popular package managers—npm, pnpm, yarn, and bun—each represented with intuitive icons from react-icons. The active tab displays the corresponding command in a styled, monospace code block, making it easy to read and copy. A copy button with instant feedback (switching from a clipboard icon to a checkmark) allows users to quickly copy the command to their clipboard, improving workflow efficiency. Fully responsive and keyboard-accessible, this component combines visual clarity, usability, and developer-friendly interactivity while strictly following Shadcn UI design principles. It’s perfect for documentation, tutorials, or any developer-facing interface where multiple installation methods need to be presented cleanly and interactively.

• Slarivo Tabs

  Here is Tabs component

• Slarivo Tabs

  Here is Tabs component

• Slarivo Sliding Tabs

  The Sliding Glow Tabs component is a modern reimagining of the classic tab navigation pattern. Instead of a static underline, it features a glowing gradient bar that smoothly slides beneath the active tab, creating a sense of motion and energy. Built with shadcn UI and Framer Motion, it feels futuristic yet minimal, balancing aesthetics with usability. The glowing indicator not only highlights the current selection but also enhances user feedback with fluid transitions. Its design adapts easily across light and dark themes, making it versatile for dashboards, content sections, or app navigation. By passing props, developers can customize the number of tabs, their labels, and the content panels, ensuring the component is flexible enough for a wide range of use cases while still maintaining a sleek, engaging look.

• Slarivo Magnetic Tabs

  The Magnetic Tabs component is a dynamic, interactive tab system designed for modern UIs. It features a magnetic indicator that smoothly “snaps” toward the hovered or active tab, giving a playful, physics-based feel. The indicator is larger than the tab buttons and can be customized with indicatorPadding to create a prominent, glowing effect. Each tab displays its corresponding content with smooth transitions, making the interface feel fluid and responsive. The component is fully responsive, supports light and dark themes, and can be centered on the page or embedded within layouts, offering a visually engaging and tactile tab navigation experience.

• Slarivo Discrete Tab

  A tab component with discrete sliding animations.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).

• Slarivo Flexnative Tabs

  Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).

• Slarivo 8-bit Tabs

  Pixel-art tabs from 8bitcn.com — retro pixel borders on triggers and content panels. Wraps shadcn/ui Tabs.

• Slarivo Settings Page Skeleton

  Animated loading skeleton placeholder for a settings page with a header, action button, tab row, and grouped toggle/list rows.

• Slarivo indevuiTabs

  here is modern indev ui tabs component

• Slarivo BeUI Tabs

  Tabs component from the 21st.dev community.

• Slarivo FAQ tabs

  Replace the boring accordion with these cool animated ones.

• Slarivo Animated Tabs

  An animated tab component built with Framer Motion's layoutId prop.

• Slarivo AI Gen

  AI Image Gen

• Slarivo Progressive Carousel

  Timelines component from the 21st.dev community.

• Slarivo Slide Tabs

  Slide Tabs, Menu Nav

• Slarivo NotificationIn box Popover

  This Notification Inbox Popover provides a clean, inbox-style experience for managing alerts directly within the app. Users can toggle between All and Unread notifications using tabs, while each notification is displayed with a relevant Lucide icon, bold styling for unread items, and a timestamp for context. A small dot indicator reinforces which items are new. The design now also includes a “Mark all as read” option in the header, allowing users to quickly clear unread items in one click. Combined with the footer’s “View all notifications” action, this layout balances clarity and efficiency, making it well-suited for SaaS dashboards, admin panels, or productivity apps where streamlined notification handling is essential.

• Slarivo Interactive Logs Table

  Observability logs panel with animated filters, search, and expandable rows

• Slarivo Notifications Menu

  A sleek, ultra-minimal notifications menu focused on clarity and function, just the essentials, no clutter.

• Slarivo FeaturesDetail

  This FeaturesDetail component showcases product features through an animated, auto-sliding dashboard carousel with smooth GSAP transitions. It combines scroll-triggered effects and interactive tab navigation for a visually engaging feature preview.

• Slarivo Sticky Section Tabs

  A container component that displays child sections with sticky headers. As the user scrolls, the header for the current section sticks below a defined navigation height, providing clear context and navigation for long content pages.

• Slarivo Bento Card

  An interactive bento card with animated tabs and workspace preview.

• Slarivo Featured Image Section

  This feature section highlights Ruixen’s core strengths with an interactive tab layout. Each tab showcases a unique capability—like a user-friendly dashboard, smart keyword generation, and one-click SEO optimization. Designed with clean visuals and intuitive icons, it helps users quickly understand Ruixen’s value.

• Slarivo Animated Navigation Tabs

  A dynamic, animated navigation component with interactive tabs that dynamically highlight active and hover states.

• Slarivo Vertical Tabs

  Vertical tab navigation with smooth animated transitions.

• Slarivo Animated Tab Bar

  Here is Animated Tab Bar component

• Slarivo 3D Icon Tabs

  Animated tabs, inspired by Airbnb's latest design update.

• Slarivo Snippet

  Stats & KPIs component from the 21st.dev community.

• Slarivo Script Copy Button

  Copy code to clipboard

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs

  A set of layered sections of content—known as tab panels—that are displayed one at a time.

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs like bookmark

  shadcn/ui tabs like bookmark

• Slarivo Slide Tabs

  SlideTabs — Animated Hover Tab Indicator with Framer Motion SlideTabs is a sleek, interactive tab navigation component built with React and Framer Motion. It features a smooth, animated underline (cursor) that follows the user's hover action, giving your UI a modern and dynamic touch. ✨ Features: Framer Motion-powered hover animation that dynamically adjusts the position and width of the indicator. Custom cursor highlight that appears only when hovering over a tab. Responsive design with minimal styling — easy to customize and extend. Built with accessibility and interactivity in mind using native ul/li elements. 💡 Use Case: Perfect for navigation menus, feature tabs, or landing pages where you want to elevate the UX with subtle motion. 📦 Tech Stack: React (Functional Components + Hooks) Framer Motion for animation Tailwind CSS for styling 🔧 How it Works: Each Tab uses a ref to measure its size and position on hover. The Cursor (animated highlight) moves and resizes smoothly based on the hovered tab. On mouse leave, the cursor fades out for a clean effect.

• Slarivo Input Modal

  Here is Input Modal component

• Slarivo Animated Tabs

  Here is animated tabs modern ui component

• Slarivo Expandable Tabs

  Animated tabs that expand when clicked.

• Slarivo Expanded Tabs

  Here is Expanded Tabs component

• Slarivo Core Header Navbar

  CoreHeader – A sleek top navigation bar for dashboards and apps. Displays the page title, user identity, and avatar, with a subtle background pattern for a modern look.

• Slarivo Tabs

  Display tab content.

• Slarivo Sandbox

  Search Bars component from the 21st.dev community.

• Slarivo Tabs

  A set of layered sections of content with smooth animations and modern styling.

• Slarivo Tabs

  Display tab content.

• Slarivo Animated Shifting Tab Component

  This code implements a reusable React component that creates an animated tabbed interface with a shifting content overlay. It addresses the need for a visually engaging and interactive way to present different sections of content, such as product details, pricing plans, or blog posts. The component uses several libraries to achieve this: React for the core UI, Framer Motion for animations, and React Icons for providing visual elements. Here's a step-by-step breakdown: 1. **`ShiftingDropDown` Component:** This is the main container, holding the `Tabs` component. 2. **`Tabs` Component:** This manages the selected tab state using `useState` hooks for `selected` (the currently selected tab index) and `dir` (direction of animation, 'l' or 'r'). The `handleSetSelected` function updates these states based on mouse events, determining the animation direction. 3. **`Tab` Component:** Each tab is rendered as a button. The styling changes based on whether it's selected, using CSS classes and the `selected` prop. The `FiChevronDown` icon animates on selection. 4. **`Content` Component:** This displays the content for the selected tab. `AnimatePresence` ensures smooth entrance and exit animations for the content using Framer Motion's `initial`, `animate`, and `exit` properties. The `motion.div` smoothly animates the content's position based on the `dir` prop (left or right). 5. **`Bridge` Component:** A simple visual element that creates a bridge connecting the tab to the content. 6. **`Nub` Component:** This dynamically positioned element visually points to the selected tab. `useEffect` and `getBoundingClientRect` are used to calculate its position relative to the selected tab. 7. **Content Components (`Products`, `Pricing`, `Blog`):** These components render the actual content for each tab, using basic HTML elements and styling. 8. **`TABS` Array:** This array defines the data for each tab, mapping titles to their corresponding content components. Example Scenarios: - Displaying product features, pricing tiers, or blog posts. - Creating an interactive FAQ section. - Presenting different views or options within a dashboard. - Implementing a step-by-step guide or tutorial. The component leverages the power of React's state management and Framer Motion's animation capabilities to create a polished and user-friendly experience. The use of CSS classes and inline styles allows for easy customization and theming.

• Slarivo Tabs [react-aria-components]

  Tabs organize content into multiple sections and allow users to navigate between them.

• Slarivo Tabs

  A tabs component with support for persistent state, shared values across instances, and URL hash navigation. Features - Shared state across multiple instances - Persistent state with localStorage - URL hash navigation - Keyboard navigation - Automatic value detection - Custom styling support - Dark mode support

• Slarivo Hybrid Tabs

  The Icon + Label Hybrid Tabs component combines compactness with clarity by showing only icons for inactive tabs and expanding the active tab to reveal both the icon and its label. This approach saves horizontal space while still giving users descriptive context when they need it. Smooth transitions powered by Framer Motion make the tab expansion feel natural and engaging, while shadcn UI ensures a clean, accessible base structure. With its modern, space-efficient design, this component is especially useful for dashboards, mobile-friendly interfaces, or any application where both clarity and compactness matter.

• Slarivo Badge Tabs

  The Badge Tabs component is a dynamic, interactive tab system that displays badges alongside each tab label, making it ideal for real-time dashboards, notifications, or admin panels. Each tab can show a number or alert, and badges can animate as they change, providing a clear visual cue of updates. Selecting a tab highlights it distinctly, while inactive tabs remain subdued, ensuring users always know which tab is active. The component supports rich content for each tab, allowing for detailed displays such as messages, tasks, or alerts, all within a compact and visually engaging interface.

• Slarivo Vercel Notification Popover

  A Vercel-style notification center that adapts to the device. Renders as a popover on desktop and a bottom sheet on mobile, with animated tabs and hover actions.

• Slarivo Family Button

  Here is Family Button component

• Slarivo Sheet

  A flexible React + Tailwind CSS Sheet (Drawer) component built with Radix UI, featuring animated slide-in panels from any side. Perfect for dashboards, modals, mobile menus, and responsive UI layouts.

• Slarivo Sidebar Component

  Here is Sidebar Component

• Slarivo Faq

  Here is Faq component

• Slarivo Testimonials

  Here is Testimonials components

• Slarivo Navbars

  Here is Navbars component

• Slarivo Card Carousel

  Here is Card Carousel component

• Slarivo Accordion 05

  Accordion with hiding title

• Slarivo Menu Vertical

  Here is Menu Vertical component

• Slarivo Category List

  An interactive and theme-adaptive list component used to display and navigate through different categories or features. Each item provides visual feedback on hover, revealing more details and an icon, making it ideal for guiding users through key sections of an application.

• Slarivo Bottom Nav Bar

  A highly animated, touch-friendly mobile/navigation bar component for dashboard or finance applications. Built with Next.js, TypeScript, TailwindCSS v4, and Framer Motion, it delivers a visually appealing pill-style layout with seamless in-out label animation for active tabs. Each tab displays its icon and label only when active, with transition effects fully powered by responsive Tailwind utilities and Framer Motion—no inline styles. The component supports shadcn/ui theming, integrates accessibility best practices, and offers a sticky bottom mode via a single prop (stickyBottom). Designed and coded to meet 21st.dev's UI/UX and code standards, it’s ready for production integration, with dark theme support and easy configuration for icon and label sets.

• Slarivo Toolbar

  A text editor toolbar component with toggles

• Slarivo Pricing Section

  Here is Pricing Section component

• Slarivo Dock Tabs

  The component includes 10 sample app icons with different colors and uses Lucide React icons. You can easily customize the dock items, colors, and animation parameters to match your needs.

• Slarivo FAQ Accordion

  A clean and user-friendly accordion component designed for FAQ sections. It organizes common questions into collapsible panels with smooth transitions, making information easy to browse without overwhelming the user.

• Slarivo Interactive Accordion

  A minimal accordion with numbered items featuring smooth spring animations, rotating plus-to-X icons, and progressive underline hover effects.

• Slarivo FAQ Section

  The FAQSection component is a fully responsive and configurable FAQ layout built with Shadcn UI and Tailwind CSS. It features a clean two-column grid with collapsible accordions, allowing users to explore answers to common questions without clutter. Each section is data-driven — meaning you can easily customize the titles, descriptions, and FAQ content using props. Designed for modern web apps, this component provides a smooth, consistent experience across devices while preventing layout shifts when expanding or collapsing items. Ideal for product pages, help centers, and support sections.

• Slarivo Accordion 03

  Accordion with images and button

• Slarivo Dot Flow

  here is Dot Flow component

• Slarivo Pricing Component

  Pricing Component with sleek design and better handling

• Slarivo dock

  Here is dock component

• Slarivo Testimonal Slider

  Here is Testimonal Slider component

• Slarivo Accordion

  Neobrutalism-styled accordion component.

• Slarivo Testimonals Carousel

  Here is Testimonals Carousel component

• Slarivo Checkbox

  Here is modern minimalistic checkbox component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo dropdown 01

  A reusable component for dropdown

• Slarivo Expandable

  Here is expandable component

• Slarivo Tilt Card

  Here is Tilt Card component

• Slarivo DateTimePicker

  This TreeView component is an interactive file and folder explorer designed with React, Framer Motion, and shadcn/ui. It allows users to easily navigate hierarchical data by expanding or collapsing folders with a simple click on the icon or name. Each file and folder includes a tooltip on hover, ensuring clarity even for long names. The component emphasizes a clean and modern UI, leveraging shadcn’s design system for consistent styling and Framer Motion for smooth animations.

• Slarivo Tech Solutions Hero Section

  A responsive, grid-based showcase component for HAOS Tech Solutions with a customizable registry-ad background slot, dark-mode support, and accessible controls.

• Slarivo Accordion Multi-level

  Here is accordion multi-level component

• Slarivo Feature Accordion Section

  This component provides an interactive and visually engaging way to present key features in an organized layout. The left section highlights important items with clear icons, images, and counts, while an accordion ensures that detailed information can be expanded or collapsed as needed.

• Slarivo Icon Accordion

  An accordion component with icons, titles, and descriptions for each section. Ideal for organizing content, features, or settings into collapsible panels, making information easy to browse and interact with.

• Slarivo Accordion

  A fluid accordion with spring animations, collapsible sections, proximity hover effects in grouped mode, and smooth content transitions. Built on Radix UI with Framer Motion.

• Slarivo Accordion 04

  Accordion with bacgkround cross

• Slarivo Shadcn Accordion

  Accordions are one of those components you don’t think much about until your page gets too long. When used well, they make content easier to scan, reduce visual noise, and help users focus on what they actually care about.

• Slarivo Dynamic Island TOC

  A sleek Dynamic Island-inspired Table of Contents component for React and Next.js with animated expansion, scroll spy tracking, reading progress, smooth scrolling, automatic heading detection, and support for custom TOC elements.

• Slarivo Accordion 02

  accordion with animation plus minus

• Slarivo Special Card

  Here is Special Card component

• Slarivo Discussion

  A component for displaying nested discussions or comment threads.

• Slarivo Tabs

  Here is Tabs component

• Slarivo Interactive Pricing Component

  This React component displays pricing plans with features, allowing users to select a plan and billing cycle (monthly or annual). It addresses the need for a visually appealing and interactive way to present pricing information to potential customers. The component dynamically renders pricing cards, highlighting popular plans and showcasing features with checkmarks or 'X' icons. Users can toggle between monthly and annual billing, and optionally view a comparison table of all features across plans. The component leverages React's useState hook for managing component state (billing cycle and active tab). It uses a custom UI component library for styling and visual elements (Card, Button, Switch, Badge) and Lucide-React for icons. Data for pricing plans is passed as props, allowing for easy customization and reusability. The component includes a built-in feature comparison table (optional) that displays all features across plans, allowing for side-by-side comparison. Example scenarios include SaaS applications, e-commerce platforms, or any application requiring clear and interactive pricing presentation. Developers can easily customize the plans, billing options, and UI elements to match their specific design and branding requirements. The component is well-structured, using TypeScript for type safety and readability. The component handles different button variants for different plans, adding flexibility to the design. The annual discount is also dynamically calculated and displayed.

• Slarivo Accordion

  A vertically stacked set of interactive headings that each reveal an associated section of content.

• Slarivo Default

  Here is according default component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Accordion

  Here is Accordion component

• Slarivo Auth Tabs Card

  The Auth Tabs Card is a clean and modern login/sign-up component built strictly with shadcn UI components. It combines both authentication forms into a single card with easily switchable tabs, saving space and improving the user experience. Social login buttons at the top allow for fast onboarding, while the plain design ensures it works seamlessly in both light and dark themes. The bottom text dynamically toggles between Sign In and Sign Up, making the interface intuitive and interactive without adding unnecessary clutter. This component is ideal for apps that want a minimal yet functional and user-friendly authentication flow.

• Slarivo Animated Chip Tab Component

  This code implements a reusable tab component with a visually appealing animated selection effect. It leverages the concept of chip-style tabs, offering a modern and user-friendly interface for navigation. The component addresses the need for clean, interactive tab functionality, enhancing user experience in web applications. The component, `ChipTabs`, renders a series of tabs based on a predefined array (`tabs`). The `useState` hook manages the currently selected tab. Each tab is rendered as a `Chip` component. The `Chip` component is a styled button; when clicked, it updates the selected state using the `setSelected` function. The visual selection is achieved using CSS classes to change text color and background, and an animated underline is added using `Framer Motion`. This animation provides smooth visual feedback to the user upon tab selection. The `motion.span` element creates an animated, colored underline that smoothly transitions when a different tab is selected. This utilizes the `layoutId` prop for smooth transitions and the `transition` prop to customize the animation's duration and type. This component is particularly useful for navigation within web applications, allowing users to easily switch between different sections or views. It can be integrated into dashboards, settings pages, or any interface requiring tab-based navigation. For example, this could be used in a blog application for navigation between home, search, about, and FAQ pages, or in a user profile for managing different sections of their profile. The component's customizable nature allows for easy integration into various design systems and applications. The code utilizes the following key technologies: * **React:** For component-based UI development and state management. * **Framer Motion:** For creating smooth, visually appealing animations. * **CSS:** For styling and layout. The component is designed to be highly reusable and easily customizable to suit a variety of design needs.

• Slarivo Box Carousel

  Here is Box Carousel component

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo Vertical Bars

  Here is Vertical Bars component

• Slarivo checkbox 02

  A reusable component for a checkbox

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Flexnative Tabs

  Composable tabs primitive from the Flexnative UI registry with 10 pattern variants: basic, underline (line), vertical, disabled, leading icons, count badges, in-card, preview/code switch, pricing toggle, and custom pill triggers. Built on Radix Tabs.

• Slarivo Accordion Space

  Here is Accordion component

• Slarivo Folder Components

  A folder icon component with a frosted glass front flap, stacked document peek, and smooth spring hover animation that fans the papers open. Pick from 6 color themes via the prop. Drop it into any React or Next.js project and install directly via the shadcn CLI.

• Slarivo ZoomDepthTabs

  The Zoom + Depth Tabs component gives a modern, interactive feel to tab navigation by introducing subtle 3D-inspired animations. When a tab becomes active, it slightly zooms in and brightens, while inactive tabs tilt back and fade, creating the illusion of depth on the interface. This effect makes switching between sections feel more dynamic and engaging compared to standard flat tab bars. It works especially well for creative dashboards, analytics pages, or modern applications where user experience and aesthetics are equally important. By supporting props for labels, content, and default values, the component is flexible enough to adapt to different use cases while maintaining a sleek, professional style.

• Slarivo NestedTabs

  The Nested Tabs (Multi-Level Tabs) component introduces a structured way to organize complex content within your application. Unlike traditional flat tabs, it supports hierarchical navigation where each main tab can reveal its own set of sub-tabs, allowing users to dive deeper into related sections without overwhelming the interface. Smooth animations ensure that transitions between parent and child tabs feel natural and engaging. This makes it ideal for dashboards, documentation portals, and settings panels, where users often need to navigate across multiple categories and subcategories. With built-in support for both light and dark themes, the component adapts seamlessly to modern UI designs while keeping content neatly organized and highly accessible.

• Slarivo Dynamic Action

  Here is dynamic action bar component

• Slarivo Tabs

  Here is Tabs component

• Slarivo Flexnative Tabs

  Additional tab patterns from the Flexnative UI registry, companion to flexnative-tabs: an account/password settings form in a card, vertical icon-with-title triggers, and a compact icon-only view switcher. Same tabs primitive (no Radix dependency).

• Slarivo Image Expansion

  Pre-built image expansion & gallery components for modern landing pages — install on demand, no need to generate from scratch.

• Slarivo Compare 1

  Compare with tabs and comparision

• Slarivo Curtain Theme Toggle

  A high-end, interactive theme toggle component with a satisfying curtain-style transition animation. Supports standalone icon, full navigation app bar integration, and global Tailwind CSS dark mode syncing.

• Slarivo Accordion

  Here is Accordion component

• Slarivo Capsule Tabs

  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.

• Slarivo BeUI Bouncy Accordion

  Accordions component from the 21st.dev community.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

• Slarivo Menu

  Here is Menu component

• Slarivo Service Changelog

  A scroll-spy services section. A sticky tab strip at the top tracks the active entry while the reader scrolls through long-form panels with deliverables, optional preview media, and inline CTAs.

• Slarivo Shopping Cart

  A comprehensive UI component for displaying items in a shopping cart, allowing users to adjust quantities, remove items, and view a detailed cost summary.

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs Component

  Here is Tabs component

• Slarivo Tabs

  Here is Tabs component

• Slarivo Tabs

  A Tabs component for switching between related views without leaving the current context, featuring tabs, segmented control, segmented-control, pill.

• Slarivo Segment Group

  A Segment Group component for switching between related views without leaving the current context, featuring segmented control, segmented-control, tabs, filter.

• Slarivo Navbar

  A Navbar component for helping users move through pages, sections, and application areas, featuring navbar, dashboard, tabs, search.

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection,…

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection,…

• Slarivo Reshaped Tabs

  Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection,…

• Slarivo Settings Card with Sidebar

  A settings card with a vertical sidebar of icon-labeled sections that swap the panel content when selected.

• Slarivo Tabs (Radix UI)

  Accessible tabs built on Radix UI with a spring-animated active underline and a blur-and-height motion transition between panels.

• Slarivo Tabs With Icons

  A tabbed interface with an icon beside each tab label for switching between account settings sections like details, profile, password, and team.

• Slarivo Sidebar with Browser like Tabs

  A Sidebar with Browser like Tabs component for monitoring workflows, operational data, and product activity, featuring layout, dashboard, chrome, tabs.

• Slarivo Shared layout animation

  A Motion for React tab bar that shares an underline and waits on the selected food icon, from the official Motion examples catalog.

• Slarivo Categorized FAQ

  A FAQ section with tab-based category navigation and animated accordion answers.

• Slarivo FAQ Tabbed Explorer

  A categorized FAQ section with a sidebar of tabbed categories and an animated accordion that reveals answers for the selected topic.

• Slarivo Animated Tabs

  Animated tabs component with a smooth sliding indicator, offering underline, pill, and segment variants with icon support and full keyboard navigation.

• Slarivo Segmented Control Tabs

  A compact segmented-control style tab switcher with icons that toggles between daily, weekly, monthly and yearly stat cards.

• Slarivo Vertical Settings Tabs

  A settings panel with vertical underline tabs for switching between profile, security, notifications, and integrations sections.

• Slarivo Underline Tabs Card

  A tabbed settings card with underline-style tabs for switching between account, password, and preference forms.

• Slarivo Underline Tabs

  A tabs component with an animated underline indicator for switching between content panels.

• Slarivo Bjork Tabs

  A styled tabbed panel switcher for toggling between two or more related content views in the same space.

• Slarivo Studiova Interactive Services Tabs

  Luxury dark mode agency capabilities and services accordion tab system with champagne gold accents, dynamic deliverables preview, and responsive layouts.

• Slarivo Tabbed FAQ Accordion

  A categorized FAQ section with sidebar tabs for switching topics (account, billing, support) and an accordion of expandable question/answer items with helpful/not-helpful feedback buttons.

• Slarivo Feature Tab Switcher

  A vertical tab list that switches a side panel between three feature previews, such as conversation assignment, saved replies and snooze scheduling in a shared inbox.

• Slarivo Headless Tabs

  Accessible, fully customizable tab interface built on Headless UI with an animated active-tab highlight, focus management and keyboard navigation.

• Slarivo Tabs with Icons

  A tabs component with icon-labeled triggers switching between card panels for dashboard overview, analytics, and settings views.

• Slarivo Icon with Title Tabs

  A tabbed interface where each trigger stacks an icon above its label, with a distinct visual content panel below each tab.

• Slarivo Icon Only Tabs

  Compact icon-only tab triggers for switching between grid, list, and row content views.

• Slarivo Tabs Subtle

  Horizontal tab navigation with proximity-based hover, an animated pill selection indicator, and fluid variable-font-weight transitions, built on Radix Tabs. Ported from Fluid Functionalism by Micka Touillaud.

• Slarivo Tabs with Count Badges

  A line-style tabbed interface whose trigger labels are paired with secondary count badges, ideal for inbox, drafts, and archive style views.