LIBRARY-TOUR.md

CSA Italy Havas UI — Component Library Tour

Generato tramite analisi statica del codice. Non modificare manualmente. Ultimo aggiornamento: 2026-04-15

Overview

Questa libreria fornisce componenti UI riutilizzabili basati su shadcn/ui, Radix UI e Tailwind CSS. Importa i componenti da @csa-italy/havas-design-system.

Available Components

Componente	Descrizione	Storybook
Accordion	—	Demo
AccordionItem	—	Demo
Alert	—	Demo
AlertDialog	—	Demo
AspectRatio	—	Demo
Avatar	—	Demo
Badge	—	Demo
Breadcrumb	—	Demo
Button	—	Demo
ButtonGroup	—	Demo
Calendar	—	Demo
Card	—	Demo
Carousel	—	Demo
ChartConfig	—	Demo
Checkbox	—	Demo
Collapsible	—	Demo
Combobox	—	Demo
Command	—	Demo
ContextMenu	—	Demo
Dialog	—	Demo
DirectionProvider	—	Demo
Drawer	—	Demo
DropdownMenu	—	Demo
Empty	—	Demo
Field	—	Demo
HoverCard	—	Demo
Input	—	Demo
InputGroup	—	Demo
InputOTP	—	Demo
Item	—	Demo
Kbd	—	Demo
Label	—	Demo
Menubar	—	Demo
NativeSelect	—	Demo
NavigationMenu	—	Demo
Pagination	—	Demo
Popover	—	Demo
Progress	—	Demo
RadioGroup	—	Demo
ResizableHandle	—	Demo
ScrollArea	—	Demo
Select	—	Demo
Separator	—	Demo
Sheet	—	Demo
Sidebar	—	Demo
Skeleton	—	Demo
Slider	—	Demo
Toaster	—	Demo
Spinner	—	Demo
Switch	—	Demo
Table	—	Demo
Tabs	—	Demo
Textarea	—	Demo
Toggle	—	Demo
ToggleGroup	—	Demo
Tooltip	—	Demo
GlobalHeader	GlobalHeader component for the application top navigation.
Standardizes the display of breadcrumbs, notifications, and user profile.	Demo

---

Accordion

File: src/components/ui/accordion.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-accordion--docs

Nessuna descrizione disponibile.

Usage:

import { Accordion } from '@csa-italy/havas-design-system'

<Accordion />

---

AccordionItem

File: src/components/ui/accordion.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-accordion--docs

Nessuna descrizione disponibile.

Usage:

import { AccordionItem } from '@csa-italy/havas-design-system'

<AccordionItem />

---

Alert

File: src/components/ui/alert.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-alert--docs

Nessuna descrizione disponibile.

Usage:

import { Alert } from '@csa-italy/havas-design-system'

<Alert />

---

AlertDialog

File: src/components/ui/alert-dialog.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-alert-dialog--docs

Nessuna descrizione disponibile.

Usage:

import { AlertDialog } from '@csa-italy/havas-design-system'

<AlertDialog />

---

AspectRatio

File: src/components/ui/aspect-ratio.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-aspect-ratio--docs

Nessuna descrizione disponibile.

Usage:

import { AspectRatio } from '@csa-italy/havas-design-system'

<AspectRatio />

---

Avatar

File: src/components/ui/avatar.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-avatar--docs

Nessuna descrizione disponibile.

Usage:

import { Avatar } from '@csa-italy/havas-design-system'

<Avatar />

---

Badge

File: src/components/ui/badge.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-badge--docs

Nessuna descrizione disponibile.

Usage:

import { Badge } from '@csa-italy/havas-design-system'

<Badge />

---

Breadcrumb

File: src/components/ui/breadcrumb.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-breadcrumb--docs

Nessuna descrizione disponibile.

Usage:

import { Breadcrumb } from '@csa-italy/havas-design-system'

<Breadcrumb />

---

Button

File: src/components/ui/button.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-button--docs

Nessuna descrizione disponibile.

Usage:

import { Button } from '@csa-italy/havas-design-system'

<Button />

---

ButtonGroup

File: src/components/ui/button-group.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-button-group--docs

Nessuna descrizione disponibile.

Usage:

import { ButtonGroup } from '@csa-italy/havas-design-system'

<ButtonGroup />

---

Calendar

File: src/components/ui/calendar.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-calendar--docs

Nessuna descrizione disponibile.

Usage:

import { Calendar } from '@csa-italy/havas-design-system'

<Calendar />

---

Card

File: src/components/ui/card.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-card--docs

Nessuna descrizione disponibile.

Usage:

import { Card } from '@csa-italy/havas-design-system'

<Card />

---

Carousel

File: src/components/ui/carousel.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-carousel--docs

Nessuna descrizione disponibile.

Props:

Prop	Tipo	Default	Required	Descrizione
opts	`Partial	undefined`	—	—
plugins	`CreatePluginType<LoosePluginType, {}>[]	undefined`	—	—
orientation	`"horizontal"	"vertical"	undefined`	—
setApi	`((api: CarouselApi) => void)	undefined`	—	—

Usage:

import { Carousel } from '@csa-italy/havas-design-system'

<Carousel />

---

ChartConfig

File: src/components/ui/chart.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-chart--docs

Nessuna descrizione disponibile.

Usage:

import { ChartConfig } from '@csa-italy/havas-design-system'

<ChartConfig />

---

Checkbox

File: src/components/ui/checkbox.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-checkbox--docs

Nessuna descrizione disponibile.

Usage:

import { Checkbox } from '@csa-italy/havas-design-system'

<Checkbox />

---

Collapsible

File: src/components/ui/collapsible.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-collapsible--docs

Nessuna descrizione disponibile.

Usage:

import { Collapsible } from '@csa-italy/havas-design-system'

<Collapsible />

---

Combobox

File: src/components/ui/combobox.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-combobox--docs

Nessuna descrizione disponibile.

Usage:

import { Combobox } from '@csa-italy/havas-design-system'

<Combobox />

---

Command

File: src/components/ui/command.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-command--docs

Nessuna descrizione disponibile.

Usage:

import { Command } from '@csa-italy/havas-design-system'

<Command />

---

ContextMenu

File: src/components/ui/context-menu.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-context-menu--docs

Nessuna descrizione disponibile.

Usage:

import { ContextMenu } from '@csa-italy/havas-design-system'

<ContextMenu />

---

Dialog

File: src/components/ui/dialog.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-dialog--docs

Nessuna descrizione disponibile.

Usage:

import { Dialog } from '@csa-italy/havas-design-system'

<Dialog />

---

DirectionProvider

File: src/components/ui/direction.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-direction--docs

Nessuna descrizione disponibile.

Usage:

import { DirectionProvider } from '@csa-italy/havas-design-system'

<DirectionProvider />

---

Drawer

File: src/components/ui/drawer.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-drawer--docs

Nessuna descrizione disponibile.

Usage:

import { Drawer } from '@csa-italy/havas-design-system'

<Drawer />

---

DropdownMenu

File: src/components/ui/dropdown-menu.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-dropdown-menu--docs

Nessuna descrizione disponibile.

Usage:

import { DropdownMenu } from '@csa-italy/havas-design-system'

<DropdownMenu />

---

Empty

File: src/components/ui/empty.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-empty--docs

Nessuna descrizione disponibile.

Usage:

import { Empty } from '@csa-italy/havas-design-system'

<Empty />

---

Field

File: src/components/ui/field.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-field--docs

Nessuna descrizione disponibile.

Usage:

import { Field } from '@csa-italy/havas-design-system'

<Field />

---

HoverCard

File: src/components/ui/hover-card.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-hover-card--docs

Nessuna descrizione disponibile.

Usage:

import { HoverCard } from '@csa-italy/havas-design-system'

<HoverCard />

---

Input

File: src/components/ui/input.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-input--docs

Nessuna descrizione disponibile.

Usage:

import { Input } from '@csa-italy/havas-design-system'

<Input />

---

InputGroup

File: src/components/ui/input-group.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-input-group--docs

Nessuna descrizione disponibile.

Usage:

import { InputGroup } from '@csa-italy/havas-design-system'

<InputGroup />

---

InputOTP

File: src/components/ui/input-otp.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-input-otp--docs

Nessuna descrizione disponibile.

Usage:

import { InputOTP } from '@csa-italy/havas-design-system'

<InputOTP />

---

Item

File: src/components/ui/item.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-item--docs

Nessuna descrizione disponibile.

Usage:

import { Item } from '@csa-italy/havas-design-system'

<Item />

---

Kbd

File: src/components/ui/kbd.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-kbd--docs

Nessuna descrizione disponibile.

Usage:

import { Kbd } from '@csa-italy/havas-design-system'

<Kbd />

---

Label

File: src/components/ui/label.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-label--docs

Nessuna descrizione disponibile.

Usage:

import { Label } from '@csa-italy/havas-design-system'

<Label />

---

Menubar

File: src/components/ui/menubar.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-menubar--docs

Nessuna descrizione disponibile.

Usage:

import { Menubar } from '@csa-italy/havas-design-system'

<Menubar />

---

NativeSelect

File: src/components/ui/native-select.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-native-select--docs

Nessuna descrizione disponibile.

Usage:

import { NativeSelect } from '@csa-italy/havas-design-system'

<NativeSelect />

---

NavigationMenu

File: src/components/ui/navigation-menu.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-navigation-menu--docs

Nessuna descrizione disponibile.

Usage:

import { NavigationMenu } from '@csa-italy/havas-design-system'

<NavigationMenu />

---

Pagination

File: src/components/ui/pagination.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-pagination--docs

Nessuna descrizione disponibile.

Usage:

import { Pagination } from '@csa-italy/havas-design-system'

<Pagination />

---

Popover

File: src/components/ui/popover.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-popover--docs

Nessuna descrizione disponibile.

Usage:

import { Popover } from '@csa-italy/havas-design-system'

<Popover />

---

Progress

File: src/components/ui/progress.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-progress--docs

Nessuna descrizione disponibile.

Usage:

import { Progress } from '@csa-italy/havas-design-system'

<Progress />

---

RadioGroup

File: src/components/ui/radio-group.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-radio-group--docs

Nessuna descrizione disponibile.

Usage:

import { RadioGroup } from '@csa-italy/havas-design-system'

<RadioGroup />

---

ResizableHandle

File: src/components/ui/resizable.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-resizable--docs

Nessuna descrizione disponibile.

Usage:

import { ResizableHandle } from '@csa-italy/havas-design-system'

<ResizableHandle />

---

ScrollArea

File: src/components/ui/scroll-area.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-scroll-area--docs

Nessuna descrizione disponibile.

Usage:

import { ScrollArea } from '@csa-italy/havas-design-system'

<ScrollArea />

---

Select

File: src/components/ui/select.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-select--docs

Nessuna descrizione disponibile.

Usage:

import { Select } from '@csa-italy/havas-design-system'

<Select />

---

Separator

File: src/components/ui/separator.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-separator--docs

Nessuna descrizione disponibile.

Usage:

import { Separator } from '@csa-italy/havas-design-system'

<Separator />

---

Sheet

File: src/components/ui/sheet.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-sheet--docs

Nessuna descrizione disponibile.

Usage:

import { Sheet } from '@csa-italy/havas-design-system'

<Sheet />

---

Sidebar

File: src/components/ui/sidebar.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-sidebar--docs

Nessuna descrizione disponibile.

Usage:

import { Sidebar } from '@csa-italy/havas-design-system'

<Sidebar />

---

Skeleton

File: src/components/ui/skeleton.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-skeleton--docs

Nessuna descrizione disponibile.

Usage:

import { Skeleton } from '@csa-italy/havas-design-system'

<Skeleton />

---

Slider

File: src/components/ui/slider.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-slider--docs

Nessuna descrizione disponibile.

Usage:

import { Slider } from '@csa-italy/havas-design-system'

<Slider />

---

Toaster

File: src/components/ui/sonner.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-sonner--docs

Nessuna descrizione disponibile.

Usage:

import { Toaster } from '@csa-italy/havas-design-system'

<Toaster />

---

Spinner

File: src/components/ui/spinner.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-spinner--docs

Nessuna descrizione disponibile.

Usage:

import { Spinner } from '@csa-italy/havas-design-system'

<Spinner />

---

Switch

File: src/components/ui/switch.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-switch--docs

Nessuna descrizione disponibile.

Usage:

import { Switch } from '@csa-italy/havas-design-system'

<Switch />

---

Table

File: src/components/ui/table.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-table--docs

Nessuna descrizione disponibile.

Usage:

import { Table } from '@csa-italy/havas-design-system'

<Table />

---

Tabs

File: src/components/ui/tabs.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-tabs--docs

Nessuna descrizione disponibile.

Usage:

import { Tabs } from '@csa-italy/havas-design-system'

<Tabs />

---

Textarea

File: src/components/ui/textarea.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-textarea--docs

Nessuna descrizione disponibile.

Usage:

import { Textarea } from '@csa-italy/havas-design-system'

<Textarea />

---

Toggle

File: src/components/ui/toggle.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-toggle--docs

Nessuna descrizione disponibile.

Usage:

import { Toggle } from '@csa-italy/havas-design-system'

<Toggle />

---

ToggleGroup

File: src/components/ui/toggle-group.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-toggle-group--docs

Nessuna descrizione disponibile.

Usage:

import { ToggleGroup } from '@csa-italy/havas-design-system'

<ToggleGroup />

---

Tooltip

File: src/components/ui/tooltip.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-tooltip--docs

Nessuna descrizione disponibile.

Usage:

import { Tooltip } from '@csa-italy/havas-design-system'

<Tooltip />

---

GlobalHeader

File: src/components/layout/GlobalHeader.tsx
Live Demo: https://csa-italy.github.io/havas-design-system/?path=/story/ui-globalheader--docs

GlobalHeader component for the application top navigation. Standardizes the display of breadcrumbs, notifications, and user profile.

Props:

Prop	Tipo	Default	Required	Descrizione
breadcrumbs	`BreadcrumbData[]	undefined`	—	—
userName	`string	undefined`	—	—
userInitials	`string	undefined`	—	—
userAvatarUrl	`string	undefined`	—	—
onNotificationClick	`(() => void)	undefined`	—	—
hasUnreadNotifications	`boolean	undefined`	—	—
LinkComponent	`ElementType<any, keyof JSX.IntrinsicElements>	undefined`	—	—
logo	ReactNode	—	—	Optional logo to display on the left of breadcrumbs
rightContent	ReactNode	—	—	Optional content to replace the default notifications and avatar section

Usage:

import { GlobalHeader } from '@csa-italy/havas-design-system'

<GlobalHeader />