An unhandled error has occurred.

Sedna.UI

Semantic CSS for Blazor, built to be written by an agent.

Get started Browse the classes NuGet

Every component library gets you to ninety percent. The last ten is the button the component has no parameter for, and it is where you copy the component’s markup out and rebuild it yourself. Sedna.UI starts you at a hundred.

The markup is yours Plain, open HTML with semantic classes, from the first line. The package ships what sits underneath: the stylesheet, a design-token contract, the icons and the script.

The behaviour comes with it Menus, tabs, popovers and the command palette work from attributes on your own markup, and a small C# surface opens the dialogs your app writes.

Built to be written by an agent Add the MCP server — one URL, and your agent searches this catalogue, copies the exact markup, and checks which release first shipped a class.

A system, not a starter kit Every colour through a token, every class on a page here, and this site built with the library itself — down to the graph and the rich-text editor.

Start

Getting started Install the package, wire the host page, and rebrand the app. Concepts The three 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 tools and its 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. Page recipes Whole pages to start from: a list, the record it leads to, and a settings page.

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.

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. Segmented control Change a setting in place: a few short options, built from radios. 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.

Graph

Graph Records and the links between them on a canvas: the markup, the frame, and how a reader moves through it. Graph layouts Springs, islands per group, rings around a record, hierarchies, grids and circles, and switching between them. Exploring a graph Filters that are also the legend, search, a record's neighbourhood, the side panel, tooltips and the menu. Graph plugins The minimap, drawing links, folding groups, outlining groups, and exporting the drawing. Graph gallery Whole graphs for real jobs: an org chart, a service map, a network, a knowledge graph, a workflow, a large map. Graph in Blazor Records from C#, the reader's clicks as events, live updates, drawn links and filters from a component.

Workflow

Workflow A run through a process as a diagram: steps, parallel branches, decisions, loops, and the step at work. Watching a run A run followed live from C#: the overview for the room, every step under it, the call and the decisions.

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 Formatted text a reader writes, posted as HTML from a textarea. Chat Bubbles, groups, replies, reactions and emoji, the composer, and the launcher with its flyover.

Agents

Orb What an agent is doing, drawn as an orbit that moves the way the work does. Work in flight That an agent is busy and with what: the status pill, the beam, shimmer, and what came back. Agent avatars Who an agent is: a sphere lit from inside, in one of six tones, that moves with its state. Mochi The agent's character, rigged: actions, moods and tones, perched on a card, a divider or a control, or pointing at one. Steps and approvals What an agent thought, which tools it ran, its plan, and the permission it asks for. Asking an agent An agent's turn in a chat: reasoning, steps, a streamed answer, citations, feedback and the prompt. Voice A spoken conversation with an agent: the stage, live captions, the bars and the mic button.

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.