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 extension, how to use icons, and the styling system, including Tailwind CSS, typography classes, and theme tokens.

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
Feedback	Badge, badgeVariants, Progress, Shimmer
Icons	DynamicIcon
Utility	Avatar, AvatarImage, AvatarFallback, ScrollArea, ScrollBar, CopyIconButton, ConfirmationDialog, DeleteConfirmationDialog

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 extension components. The full Tailwind CSS utility set is available.

<div className="flex flex-col gap-4 p-6 rounded-lg border border-neutral-200 bg-white">
  <h2 className="text-lg font-semibold">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 extension the same CSS custom properties used by the host and all host components, for example --color-neutral-100 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.