Styling and Components

Styling and Components#

Warning

Project Neo is currently in Technical Preview. Features described in this section may change before general availability.

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 is the interactive catalog of everything a bundle can import from @squirro/nextgen-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/nextgen-core/components) and the item widgets (@squirro/nextgen-core/items), 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 item widgets, such as item cards, item lists, and item detail.

  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:

neo-ui catalog

For command details, see the CLI Reference page.

Host Components#

The @squirro/nextgen-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.

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Input,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@squirro/nextgen-core/components';

The full component list, organized by category:

Category

Components

Actions

Button, buttonVariants, IconButton, ActionDropdown

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

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

Icons#

lucide-react is included in the scaffolded project dependencies. Use icons directly in your components without any additional installation:

import { BarChart3, FileText, Users } from 'lucide-react';

function Analytics() {
  return (
    <div className="flex items-center gap-2">
      <BarChart3 className="size-5" />
      <span>Analytics</span>
    </div>
  );
}

Browse all available icons at lucide.dev/icons.

Alternatively, load an icon by its kebab-case name at runtime using DynamicIcon:

import { DynamicIcon } from '@squirro/nextgen-core/components';

<DynamicIcon name="bar-chart-3" className="size-5" />

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.

<div className="flex flex-col gap-4 p-6 rounded-lg border border-border bg-card">
  <h2 className="text-lg font-semibold text-foreground">Summary</h2>
</div>

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:

@import '@squirro/nextgen-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.


Contents