Sedna.UI

One design-token contract. Semantic CSS. Consistent Blazor apps.

—design tokens

—CSS classes

—bundled icons

0third-party dependencies

For an AI agent, add the MCP server It searches this catalogue, returns the exact markup for an example, and says which release first shipped a class.

Start

Getting started Install the package, wire the host page, and rebrand the app. Concepts The two tiers, the cascade layers, the z-order scale and the token contract. Tokens Every colour, font and shadow token, read live from the loaded stylesheet. Branding The mark, its detail tiers, the palette read live, and the decisions behind it.

Reference

The script Loading it, and the JavaScript behind toasts, the clipboard and the delegated behaviours. From C# ISednaUi: toasts, dialogs, settings, the time zone and the spotlight, called from a component. MCP server The read-only endpoint an agent points at, its six tools and four resources.

Frame

Shell The three page shells, the rhythm inside them, and the skip link. Sidebar and nav Links, the current one, collapsible groups, and the icon rail. Nav layouts Arranging a nav that has outgrown one list: accordions, a filter, an area rail, areas in the topbar. Bottom bar The bar across the bottom of a phone, for the few places or actions used most. Topbar and user Header search, the status and version chips, and the user widget. Status bar The strip that says the circuit dropped, the session expired, or something threw. Hover hints One line of what-it-does on any control, and which side it opens. Common pages Access denied, not found, the error, the expired session, the maintenance window.

Structure

Page structure Title rows, dividers, callouts and code blocks. Cards Head, body and key/value rows. Put whatever markup you need inside. Grid and layout A 24-column grid for dashboards, a wrapping grid of peers, and a main column beside an aside. Lists Rows that open, act or merely show, as dividers or as cards, with stacking group headers. Collections Steps, accordions and trees. Timeline A record of what happened and when, with icon, avatar and gutter variants. Tabs Swap a region of content in place, and a strip of links that only looks like one. Segmented control Change a setting in place: a few short options, built from radios.

Actions

Buttons Six variants chosen by meaning, three sizes, plus icon-only, ghost and the FAB. Button groups Adjacent actions joined into one control, and the split button. Toolbar The filter bar that sits above a table or list. Menus A dropdown of actions opened from a control, and the value trigger. Popovers A small amount of content anchored to the control that opened it. Drag and drop Reorder a list, move cards between lanes, rearrange tiles — by mouse, touch and keyboard.

Forms

Form layout The anatomy of a field, two-up rows, sections and the actions row. Validation How a rejected value is shown, and what a screen reader is told. Text fields The text input in three sizes, its states, and the input group around it. Text areas Multi-line input, and locking which way it can be dragged. Date and time Date, time, month and week inputs, a from/to pair, and what iOS does to them. Selects The themed drop-down, options with content, and the list box. Combo fields A searchable select, chips for several picks, a server-backed list and free entry. Checks and switches Checkboxes, radios and the switch — and which of the three to reach for. File inputs File pickers and a dropzone that takes a real drop. Ranges and steppers Ranges, steppers and date inputs — the controls whose internals are per-engine. Colour The platform's colour picker in the field's chrome, and a preset palette of swatches.

Data

Tables One class on the table, plus sticky headers, sorting, pinned columns and a stacked layout. Stats One number that matters, which way it moved, and what it is measured against. Bars and meters A list of bars to compare a few values, one bar split into parts, and a value against its thresholds. Sparklines The last few dozen readings as one line, under a figure or in a table cell. Calendar A month with event pills, a week or day on a time axis, a year, and a date picker on the same grid. Pagination Moving through a long result set, and the breadcrumb trail that says where it sits.

Labels

Badges Semantic pills in three sizes, plus three categorical hues. Chips Removable filters and recipients, and the set they sit in. Avatars A person or an actor, the group, and the lockup that names them.

Content

Media A bounded frame for an image you did not size, and a gallery of attachments. Files A folder as a table or a grid of tiles, attachments, and uploads with their progress. Video A frame around the native player with its title, length and transcript, and video tiles. Audio A player around the native audio element, a waveform for a recording, and a track list. Prose Long-form text from a source the app does not control, and redacted values. Markdown Rendered Markdown, and an editor with a live preview. Rich-text editor chrome The frame, toolbar and body for an editor your app brings. Chat Bubbles, groups, replies, reactions and emoji, the composer, and the launcher with its flyover.

Feedback

Alerts Inline banners for a state that persists while the page is open. Toasts A confirmation that appears, says what happened, and goes away. Progress and spinners Determinate bars, indeterminate bars, and spinners. Skeletons Placeholders the shape of what is coming: lines, cards, rows, tables, forms, tiles, a chart. Empty states Nothing to show, and waiting for something: the drawing, the icon, and the block itself. State art The thirteen drawings that say which state a view is in, their accents and motion, and drawing your own. Live states The state of a connection, a pane of machine output, and work still running. Logs An application log in columns, a live tail, highlighting, expanding rows and actions per line.

Overlays

Modal A question that has to be answered before anything else happens. Drawers and sheets A panel from an edge, for a secondary flow that can be left. Command palette The Ctrl-K box: type, see matching commands, run one. Spotlight Dims the page except one element, for a tour or a first-run hint.

Utilities

Layout Rows, columns, alignment, sizing and the hairline between them. Spacing The gap inside a row or column, and a top or bottom margin on one element. Text Where a line sits, how loud it is, and what happens when it is too long. Visibility Screen-reader-only text, unavailable state, and what reaches the printer. Scrolling A region that scrolls on its own, with the library's scroll shadows. Safe area Holding your own bar clear of a home indicator, a notch or a rounded corner.