Requires David UI JS

Tailwind CSS Tabs

David UI's Tabs component provides a dynamic and organized way to display content in switchable sections. Styled with Tailwind CSS, it supports customizable designs, smooth transitions, and responsive layouts for seamless navigation.

Explore our responsive Tabs component examples, styled with Tailwind CSS, perfect for enhancing user engagement in your web or mobile projects.

---

#Basic Tabs

Try this straightforward implementation of the Tabs component featuring multiple tab options. Each tab displays distinct content, making it ideal for organizing and switching between different sections of a page or application.

---

#Tabs with Icon

An enhanced version of the Tabs component that incorporates icons for each tab. Perfect for creating visually appealing and intuitive navigation.

---

#Vertical Tabs

Use this example of a Tabs component with a vertical orientation. This layout is ideal for side navigation, allowing for clear separation of content while maintaining a structured and responsive design.

---

#Vertical Tabs with Icon

A vertical version of the Tabs component that includes icons alongside the tab labels. This setup is excellent for dashboards and side navigation menus, combining visual cues with usability.

---

#Transparent Tabs

A stylish implementation of the Tabs component with a transparent background. This design is ideal for blending seamlessly into minimalist or clean interfaces, offering smooth transitions and a light visual touch.

---

#Underline Tabs

This variation of the Tabs component features an underlined indicator for the active tab. This design provides a clear, elegant, and modern visual cue to indicate the selected tab, making it a great fit for streamlined navigation menus.

---

#Underline Vertical Tabs

Use this example to build a Tabs component with underline triggers and a subtle colored indicator, perfect for displaying tabs on a white or light-colored background.

---

#Required Script

The Tabs component in david-ai requires JavaScript to handle tab switching and content display. The library provides smooth transitions and interactive behavior through data attributes.

#Installation

To use the Tabs component in your project, you first need to install the david-ai library via npm:

#Basic Usage

#Using with Global Access

If you prefer, you can use the DavidAI global object instead of directly importing initTabs:

#Using with CDN

You can include david-ai via a CDN and initialize tabs functionality globally in the browser. Add the following script to your HTML file:

#HTML Code Example

---

#TypeScript

David AI Tabs component can be used programmatically with TypeScript support for more control and type safety:

#Programmatic Usage with TypeScript

Learn how to use David AI's Tabs component with TypeScript for dynamic tab navigation. This component provides programmatic methods to switch between tabs, track active states, and configure tab behavior with full type safety and customization options. The TypeScript integration enables robust tab management with features like animated indicators, keyboard navigation, and flexible orientation settings.

#HTML Structure

The HTML structure demonstrates an accessible and interactive tabs component featuring:

• Tab links that act as navigation controls
• Sliding indicator that highlights the active tab
• ARIA attributes for accessibility support
• Content panels that show/hide dynamically
• Smooth transitions between tab states
• Dark and light theme compatibility with Tailwind CSS
• Responsive design that adapts to different screen sizes
• Proper semantic HTML structure with role="tablist"
• Customizable styling through Tailwind classes
• Programmatic control through JavaScript methods

Here's the complete HTML implementation:

---

#Props & Methods

The Tabs component provides a flexible way to organize content into tabbed sections. It supports customizable tab indicators, content panels, and programmatic control through methods like tab activation. The component includes smooth animations and keyboard navigation for enhanced user experience.