EARLY ALPHA — APIs, tokens and block names may change between releases. Pin a version and expect breaking changes.
Neo Design System brings the ODC Portal's design language to your own apps. Install it, set the theme, drop in the shell — the look is done.
612 design tokens (colour, typography, spacing, sizing, elevation, motion) plus 277 dark-mode overrides, so light and dark are both correct out of the box.
Includes the NeoBase theme on a 12-column grid and 19 blocks covering the app shell, sidebar navigation, avatars, badges, icons, search, pagination, dropdowns and skeleton loaders.
Theme switching is built in — SetTheme, GetTheme, ToggleTheme, UseSystemTheme — and AppShell raises OnThemeChange.
Getting started: add NeoDesignSystem and TrueShade, set NeoBase as your theme, place AppShell and fill its Header, Aside and Content placeholders. Reference tokens from your own CSS with var(--token).
New
The login layer on the demo app now covers the three screens that surround it, so an account flow is styled end to end rather than only its front door. All three are built from the same Layout_Login block:
What the verify step added:
As with the password reveal in 0.2.0, the library ships the styling. Which requirements are met, and when, is your logic.
Form error states
Login inputs now have an invalid state: not-valid on a field gives it the error border, and keeps it through hover and focus rather than losing it to the interaction state. Pair it with the validation message and a submit that marks the offending fields.
The searchable dropdown
Most of this release. The dropdown now behaves the way the rest of the system does, rather than looking right and acting differently.
Unlike the password reveal, this one ships the behaviour as well as the styling: all 13 OutSystemsUI/Dropdowns client actions work against DropdownField, so DropdownSetValue, DropdownClear, DropdownGetSelectedValues and the rest do what they do on the stock widget.
The three blocks are DropdownField (the searchable field), DropdownEmpty (a floating menu container for icon-button row actions) and DropdownItem.
Dialog styling
A modal dialog, 48 rules that were previously missing: the overlay and its dimmed backdrop, the card, a header with title, subtitle and close, a footer, the scrollable variant, the tabbed variant, and the "unsaved changes" confirmation layer. Build a dialog with these class names and it picks up the design system instead of rendering unstyled.
As with the password reveal, the library ships the styling. Opening, closing and what the buttons do are yours.
Fixes
One behaviour change
DropdownSetValue and DropdownClear default to not raising the dropdown's change event, which left the control showing a stale selection after a programmatic change. Both now raise it. If you were relying on the silent behaviour — setting an initial value without triggering your own OnChange logic, say — guard that logic rather than the call.