Citry UI

Citry UI is the first-party styled component library for Citry. Its components render useful HTML on the server, add browser behavior through Citry's client runtime, and expose documented CSS variables and parts for application themes.

The library is a separate Python distribution. Install it when an application wants the built-in design system, while keeping the core citry package small.

Start with the library

Install and register Citry UI.
Use a component from the Components section.
Set colors, spacing, and component parts for your application.

Components

Actions

Button - Render styled native actions, links, and form submitters with Citry UI Button.
Button Group - Arrange related Citry UI actions as one named group.
Split Button - Keep one dominant action visible beside a Menu of related actions.
Toggle - Build standalone or grouped pressed Buttons with Citry UI.
Toolbar - Group persistent controls under one name and one page Tab stop.

Forms and inputs

Field and Input - Build labelled native text controls with Citry UI Field and Input.
Textarea - Enter multiline plain text with native editing, forms, validation, and optional browser control.
Native Select - Choose one value with native keyboard, touch, forms, validation, and an optional controlled browser value.
Checkbox - Choose independent Boolean options with native forms, mixed state, and controlled browser checkedness.
Radio - Select one visible option with native Citry UI Radio Groups and Radios.
Switch - Change an immediate on or off setting with a native Citry UI Switch.
Combobox - Search a local or remote collection and submit one stable option value.
Listbox - Choose one or more values from a persistent collection.
Select - Choose one value from a compact, styled form control.
MultiSelect - Choose several fixed values from a compact, styled form control.
TagsInput - Create and submit an ordered list of free-form text tags.
Editable - Edit one short text value in place without giving up native form behavior.
File input and drop target - Select files with a native picker or an accessible drop-backed picker.
Form - Compose native submission, validation, reset, and shared control state with Citry UI Form.

Layout

Stack and Group - Arrange Citry UI content in predictable vertical stacks and wrapping horizontal groups.
Container and Grid - Constrain page content, build responsive equal grids, and add asymmetric spans when needed.
ScrollArea - Keep bounded content reachable through native scrolling.
Divider - Separate sections semantically or visually with Citry UI.
Splitter - Resize two or more adjacent application panels.

Data display

Avatar - Present image identities with explicit names and reliable fallbacks.
Image - Render native responsive images with stable geometry and explicit alternative text.
Badge - Present compact status, category, count, and metadata labels with Citry UI.
Card - Group related content, media, metadata, and actions in a flexible Citry UI surface.
Carousel - Browse composed content with native Scroll Snap and explicit controls.
Icon - Render a consistent, accessible set of local SVG symbols with Citry UI Icon.
List - Compose semantic content, navigation, and action lists with Citry UI.
Table - Present finite server-owned records in a styled native Table.
Tag and TagGroup - Present descriptive, selectable, actionable, and removable Tag collections.
Tree - Explore and select hierarchical application data.

Breadcrumbs - Show hierarchical page location with semantic Citry UI Breadcrumbs.
Pagination - Navigate finite page sequences with native links or client-owned controls.
Stepper - Communicate and optionally navigate ordered workflow progress.
Tabs - Organize keyboard-accessible views with Citry UI Tabs.
NavigationMenu - Compose native website navigation with rich disclosure panels.

Feedback and status

Alert - Present persistent feedback with clear intent, optional actions, and deliberate announcement urgency.
Progress - Communicate determinate and indeterminate task progress with a native Citry UI progress element.
Skeleton - Compose precise loading placeholders from visible primitives.
Spinner - Show compact unknown-duration activity with a labelled Citry UI Spinner.
Toast - Deliver queued, timed application feedback with Citry UI.

Overlays and disclosure

Accordion - Organize related sections with native headings, controlled expansion, stable panel content, and nested groups.
Disclosure - Reveal one independent block of supporting content.
AlertDialog - Ask for an immediate cancel-or-action decision in an urgent modal prompt.
Dialog - Build accessible native modal workflows with Citry UI Dialog.
Drawer - Build accessible modal side Drawers and Sheets with Citry UI.
Menu - Present commands, links, application choices, and nested command collections from one Button.
ContextMenu - Offer target-relative application commands while preserving browser context actions.
CommandPalette - Search and run grouped application commands in a modal dialog.
Popover - Place accessible interactive content beside a Button with Citry UI Popover.
Tooltip - Add accessible, noninteractive descriptions to focusable controls with Citry UI Tooltip.
HoverCard - Preview supplementary content behind a link or control.

Citry UI is currently a preview. Review the package version before upgrading and test the component states your application depends on.