# Styling and Components
> **Note**
>
> Squirro Neo is available and is where new Squirro capabilities land first. On Squirro Cloud it is turned on from 3.15.5. Capabilities ship on a short release cycle, so see the [Release Notes](../../../getting/release/index.md#getting-release-notes) page for what is current. Neo is in [Technical Preview](../../../a-z/squirro-glossary.md#term-Technical-Preview), with general availability planned for H1 2027.
This page covers the UI components available to your bundle, how to use icons, and the styling system, including Tailwind CSS, typography classes, and theme tokens.
## Component Catalog
[neo-catalog.squirro.com](https://neo-catalog.squirro.com) is the interactive catalog of everything a bundle can import from `@squirro/neo-core`, and the fastest way to discover what is available and how to use it. It covers the full public surface: the UI primitives (`@squirro/neo-core/components`), the item widgets (`@squirro/neo-core/items`), and the chat widget (`@squirro/neo-core/chat`), each with a live preview and documentation generated from the actual TypeScript types.
Each component page provides:
- **A live preview** you can interact with, plus controls to try out variants and props without writing code.
- **A prop table** generated from the component TypeScript types, including descriptions.
- **Copy-paste import examples** using the public package paths, exactly what you write in a bundle.
- **A “Show code” option** on every example to see the full source.
To use the catalog:
1. Browse the sidebar. The components section holds the UI primitives, such as buttons, forms, dialogs, and charts. The widgets section holds the higher-level widgets: the item widgets, such as item cards, item lists, and item detail, and the embeddable `ChatPanel` chat widget.
2. Open the docs page for a component to see the prop table and usage examples.
3. Copy the import from the docs page straight into your dashboard.
To browse the catalog offline, or to see the exact component surface of the `@squirro/neo-ui` version installed in your bundle, serve the copy that ships with the CLI:
```bash
neo-ui catalog
```
For command details, see the [CLI Reference](cli-reference.md#neo-extensions-cli-reference) page.
## Host Components
The `@squirro/neo-core/components` package exports the same UI components used throughout the host application. Using them keeps your dashboards visually consistent with the rest of the product.
```typescript
import {
Button,
Card,
CardContent,
CardHeader,
CardTitle,
Input,
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@squirro/neo-core/components';
```
The full component list, organized by category:
| Category | Components |
| --- | --- |
| Actions | `Button`, `buttonVariants`, `IconButton`, `ActionDropdown`, `ComposerDropdownTrigger`, `chromeButtonShell` |
| Layout | `Card`, `CardContent`, `CardHeader`, `CardTitle`, `CardDescription`, `CardFooter`, `CardAction`, `Stack` |
| Forms | `Input`, `InputProps`, `Textarea`, `Checkbox`, `RadioGroup`, `RadioGroupItem`, `Switch`, `Label`, `Form`, `FormField`, `FormItem`, `FormLabel`, `FormControl`, `FormMessage`, `FormDescription`, `useFormField` |
| Select | `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollDownButton`, `SelectScrollUpButton` |
| Dialog | `Dialog`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`, `DialogTrigger`, `DialogClose`, `DialogCloseButton`, `DialogOverlay`, `DialogPortal`, `ExternalLinkDialog` |
| Popover | `Popover`, `PopoverContent`, `PopoverTrigger`, `PopoverAnchor` |
| Tooltip | `Tooltip`, `TooltipContent`, `TooltipProvider`, `TooltipTrigger` |
| Dropdown Menu | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioItem`, `DropdownMenuRadioGroup`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuGroup`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent`, `DropdownMenuPortal` |
| Navigation | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `SlidingTabs` |
| Feedback | `Badge`, `badgeVariants`, `Progress`, `Shimmer` |
| Charts | `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent`, `ChartConfig` (type) |
| Icons | `DynamicIcon` |
| Utility | `Avatar`, `AvatarImage`, `AvatarFallback`, `ScrollArea`, `ScrollBar`, `CopyIconButton`, `ConfirmationDialog`, `DeleteConfirmationDialog`, `TruncatedText`, `AttachmentCard`, `Kbd` |
## Chat Widget
`@squirro/neo-core/chat` exports an embeddable chat widget, the same conversation UI used throughout the core application, so a dashboard can offer a full chat experience without reimplementing streaming, citations, or interrupt handling.
Two components cover most cases: `ChatProvider`, which owns the conversation and streaming state, and `ChatPanel`, which renders the thread and the composer and reads everything from the surrounding provider.
```jsx
import { ChatPanel, ChatProvider, createChatDataSource, createGenaiQueryKeys } from '@squirro/neo-core/chat';
```
For the provider contract, the data source, authentication, theming, localization, and capability gating, see the [The Chat Widget](chat-widget.md#neo-extensions-chat-widget) page.
## Icons
`lucide-react` is included in the scaffolded project dependencies. Use icons directly in your components without any additional installation:
```jsx
import { BarChart3, FileText, Users } from 'lucide-react';
function Analytics() {
return (
Analytics
);
}
```
Browse all available icons at [lucide.dev/icons](https://lucide.dev/icons).
Alternatively, load an icon by its kebab-case name at runtime using `DynamicIcon`:
```jsx
import { DynamicIcon } from '@squirro/neo-core/components';
```
`DynamicIcon` lazy-loads and caches the icon. If the name is invalid, it renders nothing.
## Tailwind CSS
Tailwind utility classes work out of the box in all bundle components. The full Tailwind CSS utility set is available.
Use the host semantic color tokens (`bg-card`, `bg-background`, `border-border`, `text-foreground`, `text-muted-foreground`, `bg-primary`, and so on) rather than fixed Tailwind color scales such as `bg-white` or `border-neutral-200`. Semantic tokens follow the active brand theme and adapt to light and dark mode automatically, while hardcoded colors do not.
```jsx
Summary
```
## Typography Classes
The host defines custom typography classes that map to the design system. Use these instead of raw font specifications.
> **Note**
>
> These classes are defined in the host CSS and are available at port 5555 and in production. They do not apply in the standalone preview at port 3001.
| Class | Size and weight |
| --- | --- |
| `text-2xl-semibold` | 24px / 600 |
| `text-xl-semibold` | 20px / 600 |
| `text-lg-semibold` | 18px / 600 |
| `text-base-regular` | 16px / 400 |
| `text-base-medium` | 16px / 500 |
| `text-base-semibold` | 16px / 600 |
| `text-sm-regular` | 14px / 400 |
| `text-sm-medium` | 14px / 500 |
| `text-sm-semibold` | 14px / 600 |
| `text-xs-regular` | 12px / 400 |
| `text-xs-medium` | 12px / 500 |
## Theme Tokens
The scaffolded `src/index.css` already includes the following import, so no manual step is needed:
```css
@import '@squirro/neo-core/styles/theme.css';
```
That import gives your bundle the same CSS custom properties used by the host and all host components, for example `--color-primary`, `--color-muted`, and `--radius-md`. Host components render correctly regardless of whether the import is present, as the host applies the theme globally. Without it, those custom properties are not available in your own CSS.