App Bar - Skeleton

import React from 'react';
import { AppBar } from '@skeletonlabs/skeleton-react';
import { ArrowLeft, Paperclip, Calendar, CircleUser } from 'lucide-react';

export const Page: React.FC = () => {
	return (
		<AppBar>
			<AppBar.Toolbar>
				<AppBar.ToolbarLead>
					<ArrowLeft size={24} />
				</AppBar.ToolbarLead>
				<AppBar.ToolbarCenter>{/* (optional) */}</AppBar.ToolbarCenter>
				<AppBar.ToolbarTrail>
					<Paperclip size={20} />
					<Calendar size={20} />
					<CircleUser size={20} />
				</AppBar.ToolbarTrail>
			</AppBar.Toolbar>
			<AppBar.Headline>
				<h2 className="h2">Headline</h2>
			</AppBar.Headline>
		</AppBar>
	);
};

import React from 'react';
import { AppBar } from '@skeletonlabs/skeleton-react';
import { ArrowLeft, Paperclip, Calendar, CircleUser } from 'lucide-react';

export const Page: React.FC = () => {
	return (
		<AppBar>
			<AppBar.Toolbar>
				<AppBar.ToolbarLead>
					<ArrowLeft size={24} />
				</AppBar.ToolbarLead>
				<AppBar.ToolbarCenter>Title</AppBar.ToolbarCenter>
				<AppBar.ToolbarTrail>
					<Paperclip size={20} />
					<Calendar size={20} />
					<CircleUser size={20} />
				</AppBar.ToolbarTrail>
			</AppBar.Toolbar>
		</AppBar>
	);
};

Responsive

Use Tailwind’s responsive design breakpoints to adjust for various screen sizes.

import React from 'react';
import { AppBar } from '@skeletonlabs/skeleton-react';
import { ArrowLeft, Paperclip, Calendar, CircleUser, Menu } from 'lucide-react';

export const Page: React.FC = () => {
	return (
		<AppBar>
			<AppBar.Toolbar>
				<AppBar.ToolbarLead>
					<ArrowLeft size={24} />
				</AppBar.ToolbarLead>
				<AppBar.ToolbarCenter classes="hidden sm:block">
					<span>Title</span>
				</AppBar.ToolbarCenter>
				<AppBar.ToolbarTrail>
					<div className="hidden space-x-4 sm:flex">
						<Paperclip size={20} />
						<Calendar size={20} />
						<CircleUser size={20} />
					</div>
					<div className="block sm:hidden">
						<Menu size={20} />
					</div>
				</AppBar.ToolbarTrail>
			</AppBar.Toolbar>
			<AppBar.Headline classes="sm:hidden">
				<h2 className="h2">Title</h2>
			</AppBar.Headline>
		</AppBar>
	);
};

API Reference

AppBar

Property	Type	Description
`base`	string	Set base styles.
`background`	string	Set background styles.
`spaceY`	string	Set vertical spacing styles.
`border`	string	Set border styles.
`padding`	string	Set padding styles.
`shadow`	string	Set shadow styles.
`classes`	string	Provide arbitrary CSS classes.
`children`	React.ReactNode	-

ToolBar

Property	Type	Description
`base`	string	Sets the toolbar component's base styles.
`gridCols`	string	Sets the toolbar component's grid columns styles.
`gap`	string	Sets the toolbar component's gap styles.
`classes`	string	Provide arbitrary CSS classes to the toolbar component.
`children`	React.ReactNode	-

ToolbarLead

Property	Type	Description
`base`	string	Sets the lead component's base styles.
`spaceX`	string	Sets the lead component's horizontal spacing styles.
`padding`	string	Sets the lead component's padding styles.
`classes`	string	Provide arbitrary CSS classes to the lead component.
`children`	React.ReactNode	-

ToolbarCenter

Property	Type	Description
`base`	string	Sets the center component's base styles.
`align`	string	Sets the center component's alignment styles.
`padding`	string	Sets the center component's padding styles.
`classes`	string	Provide arbitrary CSS classes to the center component.
`children`	React.ReactNode	-

ToolbarTrail

Property	Type	Description
`base`	string	Sets the trail component's base styles.
`spaceX`	string	Sets the trail component's horizontal spacing styles.
`padding`	string	Sets the trail component's padding styles.
`classes`	string	Provide arbitrary CSS classes to the trail component.
`children`	React.ReactNode	-

AppBarHeadline

Property	Type	Description
`base`	string	Sets the headline component's base styles.
`classes`	string	Provide arbitrary CSS classes to the headline component.
`children`	React.ReactNode	-