# Netspaces Design System

> Source of truth for UI components, tokens, blocks and themes across all Netspaces products. Built on shadcn/ui and distributed as a shadcn registry — consumers install components by running `npx shadcn@latest add --registry https://ds.netspaces.org <name>`.

Consuming starts with one-time setup: `npx shadcn@latest init --registry https://ds.netspaces.org`. After that, any component or block can be added with `npx shadcn@latest add <name>`.

For static HTML deliverables (marketing sites, prototypes) where shadcn does not apply, each theme's tokens are served as plain CSS at `https://ds.netspaces.org/tokens/{brand}.css`. Token values say what a token IS; usage contracts (what it is FOR) come from `get_design_tokens` on the netspaces-ds MCP server.

## Foundations

- [Introduction](https://ds.netspaces.org/?path=/docs/foundations-introduction--docs): Overview and how to consume the DS
- [Colors](https://ds.netspaces.org/?path=/docs/foundations-colors--docs): All color tokens as CSS variables (light and dark)
- [Typography](https://ds.netspaces.org/?path=/docs/foundations-typography--docs): Type scale and font weights
- [Spacing](https://ds.netspaces.org/?path=/docs/foundations-spacing--docs): 4-pixel-based spacing scale
- [Radius](https://ds.netspaces.org/?path=/docs/foundations-radius--docs): Border radius tokens derived from --radius
- [Shadows](https://ds.netspaces.org/?path=/docs/foundations-shadows--docs): Elevation shadow scale
- [Grid](https://ds.netspaces.org/?path=/docs/foundations-grid--docs): Breakpoints and container widths
- [Icons](https://ds.netspaces.org/?path=/docs/foundations-icons--docs): Iconography (lucide-react)
- [Motion](https://ds.netspaces.org/?path=/docs/foundations-motion--docs): Duration scale and easings

## Components

- [accordion](https://ds.netspaces.org/r/accordion.json): Collapsible content sections, WAI-ARIA compliant.
- [alert](https://ds.netspaces.org/r/alert.json): Informational callout with icon, title and description.
- [alert-dialog](https://ds.netspaces.org/r/alert-dialog.json): Modal dialog that interrupts the user to confirm a destructive action.
- [aspect-ratio](https://ds.netspaces.org/r/aspect-ratio.json): Wrapper that constrains content to a specific width/height ratio.
- [avatar](https://ds.netspaces.org/r/avatar.json): User profile picture with image + fallback initials.
- [back-link](https://ds.netspaces.org/r/back-link.json): Canonical 'Voltar' link for app screens: proprietary chevron + label in primary (action link), strong-md type; label is contextual — 'Voltar' or the parent page name (ADR-0019).
- [badge](https://ds.netspaces.org/r/badge.json): Non-interactive signal — never a clickable element. Two variants with distinct semantics: plain (default) tracks the STATE of a process (Concluída, Em curso, Cancelada — colored icon + colored text, no container); soft (tinted pill) highlights a QUALITATIVE ATTRIBUTE of an item (Compatível, Requer atenção, Não recomendado, Produto). Both pair with the status prop (neutral/info/success/warning/danger). plain has sizes sm/lg.
- [breadcrumb](https://ds.netspaces.org/r/breadcrumb.json): Hierarchical navigation trail (Home > Section > Page).
- [button](https://ds.netspaces.org/r/button.json): Primary interactive trigger. Variants: default, destructive, outline, ghost, link, inverse, outline-inverse. Sizes: xs, sm, md, lg (default), icon-xs, icon-sm, icon-md, icon-lg.
- [button-group](https://ds.netspaces.org/r/button-group.json): Visually connected group of related buttons sharing borders.
- [calendar](https://ds.netspaces.org/r/calendar.json): Date picker grid for single or range selection (react-day-picker).
- [card](https://ds.netspaces.org/r/card.json): Surface container with optional header, content, footer, and action slot.
- [carousel](https://ds.netspaces.org/r/carousel.json): Horizontally scrolling slides with previous/next controls (embla-carousel).
- [chart](https://ds.netspaces.org/r/chart.json): Recharts wrapper with consistent tokens for Line/Bar/Area/Pie charts.
- [checkbox](https://ds.netspaces.org/r/checkbox.json): Single toggleable boolean input, with tri-state support.
- [collapsible](https://ds.netspaces.org/r/collapsible.json): Simple open/close wrapper for a single section of content.
- [combobox](https://ds.netspaces.org/r/combobox.json): Searchable select combining Popover and Command.
- [command](https://ds.netspaces.org/r/command.json): Command palette with keyboard navigation (cmdk).
- [context-menu](https://ds.netspaces.org/r/context-menu.json): Right-click menu with items, shortcuts, and separators.
- [dialog](https://ds.netspaces.org/r/dialog.json): Modal dialog with title, description, content and footer.
- [direction](https://ds.netspaces.org/r/direction.json): Provider that sets text/layout direction (ltr/rtl) for descendants.
- [drawer](https://ds.netspaces.org/r/drawer.json): Bottom-anchored sheet with drag-to-dismiss (vaul).
- [dropdown-menu](https://ds.netspaces.org/r/dropdown-menu.json): Button-triggered menu with items, submenus, and shortcuts.
- [empty](https://ds.netspaces.org/r/empty.json): Empty state with icon, title, description and optional action.
- [field](https://ds.netspaces.org/r/field.json): Form field primitive wrapping label, input, description and error.
- [form](https://ds.netspaces.org/r/form.json): react-hook-form integration with labels, descriptions, errors and accessibility wired.
- [hover-card](https://ds.netspaces.org/r/hover-card.json): Preview card shown on hover — useful for @mentions and link previews.
- [icon](https://ds.netspaces.org/r/icon.json): Custom inline SVG icons (app navigation, property details, chevrons, transaction arrows). All inherit color via currentColor — style with text-* classes.
- [input](https://ds.netspaces.org/r/input.json): Single-line text input. Supports all native input types.
- [input-group](https://ds.netspaces.org/r/input-group.json): Input with leading/trailing addons (icons, labels, buttons).
- [input-otp](https://ds.netspaces.org/r/input-otp.json): One-time password input with individual digit slots (input-otp).
- [item](https://ds.netspaces.org/r/item.json): List item primitive with media, title, description and actions.
- [kbd](https://ds.netspaces.org/r/kbd.json): Keyboard key visualization for shortcuts (⌘K).
- [label](https://ds.netspaces.org/r/label.json): Form label with htmlFor binding.
- [menubar](https://ds.netspaces.org/r/menubar.json): Application-style horizontal menu bar (File, Edit, View…).
- [native-select](https://ds.netspaces.org/r/native-select.json): Styled wrapper around native `<select>` — use when a native dropdown is preferred.
- [navigation-menu](https://ds.netspaces.org/r/navigation-menu.json): Top-level navigation with hover triggers and content panels.
- [pagination](https://ds.netspaces.org/r/pagination.json): Page navigation with previous/next and page links.
- [popover](https://ds.netspaces.org/r/popover.json): Floating panel anchored to a trigger, dismissed on outside click.
- [progress](https://ds.netspaces.org/r/progress.json): Horizontal progress indicator (0–100).
- [radio-group](https://ds.netspaces.org/r/radio-group.json): Mutually exclusive option set.
- [resizable](https://ds.netspaces.org/r/resizable.json): Draggable panel layout (horizontal/vertical) with react-resizable-panels.
- [scroll-area](https://ds.netspaces.org/r/scroll-area.json): Custom scrollbar overlay for a scrolling region.
- [select](https://ds.netspaces.org/r/select.json): Custom dropdown with search, groups and keyboard navigation.
- [separator](https://ds.netspaces.org/r/separator.json): Horizontal or vertical visual divider.
- [sheet](https://ds.netspaces.org/r/sheet.json): Side-anchored modal panel (top/right/bottom/left).
- [sidebar](https://ds.netspaces.org/r/sidebar.json): Collapsible application sidebar with SidebarProvider, menus, and mobile support.
- [skeleton](https://ds.netspaces.org/r/skeleton.json): Shimmering placeholder for loading content.
- [slider](https://ds.netspaces.org/r/slider.json): Horizontal range input for single value or range.
- [sonner](https://ds.netspaces.org/r/sonner.json): Toast notification system (sonner).
- [spinner](https://ds.netspaces.org/r/spinner.json): Animated loading indicator (Loader icon).
- [switch](https://ds.netspaces.org/r/switch.json): Binary on/off toggle (mobile-style).
- [table](https://ds.netspaces.org/r/table.json): Data table primitives (Table, TableHeader, TableRow, TableCell…).
- [tabs](https://ds.netspaces.org/r/tabs.json): Tabbed content with list, trigger and panels.
- [textarea](https://ds.netspaces.org/r/textarea.json): Multi-line text input, auto-growing optional via className.
- [toggle](https://ds.netspaces.org/r/toggle.json): Single pressable toggle (like bold/italic in a toolbar).
- [toggle-group](https://ds.netspaces.org/r/toggle-group.json): Group of related toggles (single or multiple selection).
- [tooltip](https://ds.netspaces.org/r/tooltip.json): Short contextual hint on hover/focus, requires TooltipProvider.

## Hooks

- [use-mobile](https://ds.netspaces.org/r/use-mobile.json): Hook returning whether the viewport matches the mobile breakpoint.

## Themes

- [theme-bloco](https://ds.netspaces.org/r/theme-bloco.json): Bloco brand theme — foreground navy #1e2333, primary cloud-blue #6078b9, tipografia Instrument Sans, radius escalonado (xs 0.25 → xl 1rem). (static CSS: https://ds.netspaces.org/tokens/bloco.css)
- [theme-goindex](https://ds.netspaces.org/r/theme-goindex.json): GoIndex brand theme — azul #558eff, foreground navy #071d49, tipografia Manrope, highlight cyan #3ce4fb. (static CSS: https://ds.netspaces.org/tokens/goindex.css)
- [theme-netspaces](https://ds.netspaces.org/r/theme-netspaces.json): Netspaces brand theme — azul #558eff sobre branco, tipografia Manrope (display) + Roboto (body), radius escalonado (xs 0.25 → xl 1rem). (static CSS: https://ds.netspaces.org/tokens/netspaces.css)
- [theme-propriedade-digital](https://ds.netspaces.org/r/theme-propriedade-digital.json): Propriedade Digital brand theme — azul #558eff, foreground navy #071d49, tipografia Manrope, highlight cyan #3ce4fb. (static CSS: https://ds.netspaces.org/tokens/propriedade-digital.css)
- [theme-simbiose](https://ds.netspaces.org/r/theme-simbiose.json): Simbiose Digital brand theme — roxo #9977fa (gradiente de marca até cyan #7edbfb), foreground navy #172249, tipografia Manrope + Asap. Cores provisórias derivadas de simbiosedigital.com, validação pendente. (static CSS: https://ds.netspaces.org/tokens/simbiose.css)