Tabs

Books

Movies

Television

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Control name="books" group={group} onChange={setGroup}>
					<Tabs.Item>Books</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup}>
					<Tabs.Item>Movies</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup}>
					<Tabs.Item>Television</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				Books tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				Movies tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				Television tab content
			</Tabs.Panel>
		</Tabs>
	);
};

Icons

Easily customize tabs content with icons and arrange them in any combination you prefer.

Books

Movies

Television

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { LibraryBig, Film, Tv } from 'lucide-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Control name="books" group={group} onChange={setGroup} title="Books">
					<Tabs.Item>
						<LibraryBig size={20} />
						Books
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup} title="Movies">
					<Tabs.Item>
						<Film size={20} />
						Movies
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup} title="Tv">
					<Tabs.Item>
						<Tv size={20} />
						Television
					</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				Books tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				Movies tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				Television tab content
			</Tabs.Panel>
		</Tabs>
	);
};

Books

Movies

Television

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { LibraryBig, Film, Tv } from 'lucide-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Control name="books" group={group} onChange={setGroup} title="Books">
					<Tabs.Item classes="flex-col">
						<LibraryBig size={20} />
						Books
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup} title="Movies">
					<Tabs.Item classes="flex-col">
						<Film size={20} />
						Movies
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup} title="Tv">
					<Tabs.Item classes="flex-col">
						<Tv size={20} />
						Television
					</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				Books tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				Movies tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				Television tab content
			</Tabs.Panel>
		</Tabs>
	);
};

Stretch

Tabs can be stretched to fill the available space using the width prop.

Books

Movies

Television

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Control name="books" group={group} onChange={setGroup} width="w-full">
					<Tabs.Item>Books</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup} width="w-full">
					<Tabs.Item>Movies</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup} width="w-full">
					<Tabs.Item>Television</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				Books tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				Movies tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				Television tab content
			</Tabs.Panel>
		</Tabs>
	);
};

Justify

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { LibraryBig, Film, Tv } from 'lucide-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List justify="justify-center">
				<Tabs.Control name="books" group={group} onChange={setGroup}>
					<Tabs.Item>
						<LibraryBig size={20} />
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup}>
					<Tabs.Item>
						<Film size={20} />
					</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup}>
					<Tabs.Item>
						<Tv size={20} />
					</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				Books tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				Movies tab content
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				Television tab content
			</Tabs.Panel>
		</Tabs>
	);
};

Accessibility

This component adheres to the ARIA APG. Use the preview below to test tabbing and keyboard navigation.

Books

Movies

Television

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<Tabs>
			<Tabs.List>
				<Tabs.Control name="books" group={group} onChange={setGroup}>
					<Tabs.Item>Books</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="movies" group={group} onChange={setGroup}>
					<Tabs.Item>Movies</Tabs.Item>
				</Tabs.Control>
				<Tabs.Control name="television" group={group} onChange={setGroup}>
					<Tabs.Item>Television</Tabs.Item>
				</Tabs.Control>
			</Tabs.List>
			<Tabs.Panel group={group} value="books">
				<button type="button" className="btn preset-filled">
					Book tab Content
				</button>
			</Tabs.Panel>
			<Tabs.Panel group={group} value="movies">
				<button type="button" className="btn preset-filled">
					Movies tab content
				</button>
			</Tabs.Panel>
			<Tabs.Panel group={group} value="television">
				<button type="button" className="btn preset-filled">
					Television tab content
				</button>
			</Tabs.Panel>
		</Tabs>
	);
};

Right-to-Left

This component fully supports RTL layouts for seamless navigation and accessibility.

Books

Movies

Television

Books tab content

import React, { useState } from 'react';
import { Tabs } from '@skeletonlabs/skeleton-react';
import { LibraryBig, Film, Tv } from 'lucide-react';

export const Page: React.FC<any> = () => {
	const [group, setGroup] = useState('books');
	return (
		<div dir="rtl" className="w-full">
			<Tabs>
				<Tabs.List>
					<Tabs.Control name="books" group={group} onChange={setGroup} title="Books">
						<Tabs.Item>
							<LibraryBig size={20} />
							Books
						</Tabs.Item>
					</Tabs.Control>
					<Tabs.Control name="movies" group={group} onChange={setGroup} title="Movies">
						<Tabs.Item>
							<Film size={20} />
							Movies
						</Tabs.Item>
					</Tabs.Control>
					<Tabs.Control name="television" group={group} onChange={setGroup} title="Tv">
						<Tabs.Item>
							<Tv size={20} />
							Television
						</Tabs.Item>
					</Tabs.Control>
				</Tabs.List>
				<Tabs.Panel group={group} value="books">
					Books tab content
				</Tabs.Panel>
				<Tabs.Panel group={group} value="movies">
					Movies tab content
				</Tabs.Panel>
				<Tabs.Panel group={group} value="television">
					Television tab content
				</Tabs.Panel>
			</Tabs>
		</div>
	);
};

API Reference

Property	Type	Description
`id`	string	Provide a unique ID.
`base`	string	Sets base styles.
`spaceY`	string	Set vertical spacing between list and panels.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-

TabsList

Property	Type	Description
`base`	string	Sets the base styles.
`justify`	string	Sets the justification styles.
`gap`	string	Sets the gap spacing.
`border`	string	Sets the border styles.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-

TabsControl

Property	Type	Description
`id`	string	Provide a unique ID.
`name` *	string	Provide the tab control name.
`group` *	string	Provide the tab control radio group.
`title`	string	Provide a hoverable title attribute.
`label`	string	Sets the A11y label.
`controls`	string	Sets ARIA controls value to define which panel this tab controls.
`base`	string	Sets base styles.
`width`	string	Sets width styles.
`active`	string	Sets the active control styles.
`inactive`	string	Sets the inactive control styles.
`flex`	string	Sets flex styles.
`background`	string	Sets background styles.
`border`	string	Sets border styles.
`text`	string	Sets text size styles.
`padding`	string	Sets padding styles.
`rounded`	string	Sets rounded styles.
`gap`	string	Sets vertical gap styles.
`cursor`	string	Sets cursor styles.
`classes`	string	Provide arbitrary CSS classes.
`onClick`	object	Triggers on Tab Control click.
`onKeydown`	object	Triggers on Tab Control key down.
`onKeyup`	object	Triggers on Tab Control key up.
`onChange`	object	Triggers on Tab Control group change.
`children`	React.ReactNode	-

TabsControlItem

Property	Type	Description
`base`	string	Sets base styles.
`flex`	string	Sets flex styles.
`gap`	string	Sets gap styles.
`background`	string	Sets background styles.
`padding`	string	Sets padding styles.
`rounded`	string	Sets rounded styles.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-

TabsPanelItem

Property	Type	Description
`id`	string	Provide a unique ID.
`value` *	string	Provide the tab panel value.
`group` *	string	Provide the tab control radio group.
`labelledBy`	string	Sets the A11y labelledby.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-