# Docs

- StellarAdmin.UI: Tag Helpers for ASP.NET Core MVC and Razor Pages

  - **Getting Started**
  - [Introduction](/docs/ui): First, a little bit of background on StellarAdmin.UI and why I created it.
  - [Installation](/docs/ui/installation): Get started with StellarAdmin.UI
  - [Conventions](/docs/ui/conventions): The rules every StellarAdmin Tag Helper follows for attributes, classes, model binding and links
  - [Agent Skills](/docs/ui/agent-skills): Teach your coding agent to build UIs and themes with StellarAdmin.UI
  - [Acknowledgements & Licenses](/docs/ui/acknowledgements): The libraries and tools that inspired StellarAdmin

  - **Theming**
  - [Theming](/docs/ui/theming): Use the default theme, or give StellarAdmin your own look by setting a few CSS variables
  - [Theme Variables](/docs/ui/theme-variables): Every CSS variable a theme file can set, with its default and its range
  - [Density and Scopes](/docs/ui/density-and-scopes): Change the density or the theme of one part of a page
  - [Design Tokens](/docs/ui/design-tokens): Use the theme's colours, sizes and spacing in your own CSS or Tailwind CSS utilities
  - [Dark Mode](/docs/ui/dark-mode): Apply dark mode and respect saved or system appearance preferences

  - **Customization**
  - [Icons](/docs/ui/icons): Using the built-in Lucide icons and adding your own
  - [JavaScript & Interactivity](/docs/ui/javascript): How StellarAdmin.UI enhances components using JavaScript
  - [Templated Views & Slots](/docs/ui/templated-views): Build your own Tag Helpers whose markup can be overridden, and pass content into named slots

  - **Layout**
  - [App Header](/docs/ui/components/app-header): The application's top navigation bar, composed with a sidebar trigger, breadcrumb, and trailing actions
  - [Card](/docs/ui/components/card): Use cards to group related information in a container
  - [Group](/docs/ui/components/group): Arrange elements and components within a horizontal flex container
  - [Page Container](/docs/ui/components/page-container): Wrap the main content of a page, centering it and constraining it to a width appropriate for the type of page
  - [Page Header](/docs/ui/components/page-header): A header section at the top of a page's content with a title, description, actions, breadcrumb, and navigation
  - [Separator](/docs/ui/components/separator): Visually divides or groups content
  - [Stack](/docs/ui/components/stack): Arrange elements and components within a vertical flex container

  - **Form Layout**
  - [Form Section](/docs/ui/components/form-section): Group form content with a title and description using split, stacked, or card layouts
  - [Grid](/docs/ui/components/grid): Lay out form fields and other content in responsive columns

  - **Forms**
  - [Checkbox](/docs/ui/components/checkbox): Capture boolean input from user
  - [Checkbox group](/docs/ui/components/checkbox-group): Select multiple options bound to a collection
  - [Field](/docs/ui/components/field): Easily create form fields with labels, help text and input controls
  - [Icon Picker](/docs/ui/components/icon-picker): A control for choosing one of your registered icons, which posts the icon's name
  - [Image Upload](/docs/ui/components/image-upload): An image picker that uploads the picked file straight away, with progress, and posts only the value the server returns
  - [Input](/docs/ui/components/input): Displays a form input field.
  - [Input Group](/docs/ui/components/input-group): Display additional information or actions to an input or textarea
  - [Input OTP](/docs/ui/components/input-otp): An input for one-time passwords and verification codes, rendered as individual character slots
  - [Label](/docs/ui/components/label): Renders an accessible caption for a form control
  - [Questionnaire](/docs/ui/components/questionnaire): Asks the reader a question and collects the answer as a set of large, tappable choices
  - [Radio button](/docs/ui/components/radio): Allow users to select from a list of choices
  - [Radio group](/docs/ui/components/radio-group): Select one option bound to a single property
  - [Rich Text Editor](/docs/ui/components/rich-text-editor): An editor for formatted text, with headings, lists, links, tables and images, whose value is HTML
  - [Segmented Control](/docs/ui/components/segmented-control): A single-choice control with the appearance of default tabs and native radio behavior.
  - [Select](/docs/ui/components/select): Displays a list of options for the user to pick from
  - [Slider](/docs/ui/components/slider): An input where the user selects a value, or range of values, from a given range
  - [Switch](/docs/ui/components/switch): A control that lets users toggle a setting on or off
  - [Textarea](/docs/ui/components/textarea): Displays a text area that allows users to enter multiple lines of text input
  - [Toggle](/docs/ui/components/toggle): A two-state button that can be toggled on or off
  - [Toggle Group](/docs/ui/components/toggle-group): A set of two-state buttons that can be toggled on or off

  - **Actions**
  - [Button](/docs/ui/components/button): Trigger an action, such as submitting a form or running JavaScript
  - [Button Group](/docs/ui/components/button-group): Group related buttons together into a single section
  - [Link Button](/docs/ui/components/link-button): Render an anchor styled as a button for navigating to other URLs

  - **Data Display**
  - [Avatar](/docs/ui/components/avatar): An image element or initials representing the user.
  - [Badge](/docs/ui/components/badge): Badges can be used to highlight information such as status, category, and count.
  - [Carousel](/docs/ui/components/carousel): Browse slides with native scrolling, snapping, and lightweight navigation controls
  - [Checklist](/docs/ui/components/checklist): A list of steps or tasks, each with a status
  - [Chip](/docs/ui/components/chip): A compact token for a selected or entered value, with optional media and a remove button.
  - [Data Grid](/docs/ui/components/data-grid): Display typed data with columns, sorting, selection, pagination, row details, and inline editing.
  - [Details](/docs/ui/components/details): Displays labelled read-only values, such as the fields of a record or its audit information
  - [Empty](/docs/ui/components/empty): Display an empty state
  - [Icon](/docs/ui/components/icon): Displays an SVG icon from the Lucide icon toolkit
  - [Image](/docs/ui/components/image): Displays an image as a thumbnail or a figure, with a placeholder when there is none and a broken-image tile when it can't be loaded
  - [Item](/docs/ui/components/item): A versatile component that can be used to display any content
  - [Kbd](/docs/ui/components/kbd): Displays keystrokes or keyboard shortcuts
  - [Table](/docs/ui/components/table): Displays data in a tabular format
  - [Timeline](/docs/ui/components/timeline): An ordered list of events, each with a marker joined to the next by a rail

  - **Chat Interfaces**
  - [Attachment](/docs/ui/components/attachment): Displays a file or image with its media, metadata, upload state and actions
  - [Bubble](/docs/ui/components/bubble): Displays framed conversational content, such as the messages in a chat thread
  - [Marker](/docs/ui/components/marker): Displays an inline note in a conversation, such as a status update, a system message or a labeled divider
  - [Message](/docs/ui/components/message): Lays out a single message in a conversation, with its avatar, sender name, and status
  - [Message Scroller](/docs/ui/components/message-scroller): Displays a scrolling conversation that stays on the newest message as it arrives

  - **Feedback**
  - [Alert](/docs/ui/components/alert): Alerts are used to display notifications or other important messages inline
  - [Environment Indicator](/docs/ui/components/environment-indicator): Shows which environment the application runs in, such as production, staging or a developer's machine.
  - [Progress](/docs/ui/components/progress): Indicates the progress of a task
  - [Skeleton](/docs/ui/components/skeleton): Displays a placeholder while content is loading
  - [Spinner](/docs/ui/components/spinner): Indicates a loading or busy state

  - **Overlays**
  - [Alert Dialog](/docs/ui/components/alert-dialog): A modal dialog that interrupts the user with important content and expects a confirm or cancel response.
  - [Dialog](/docs/ui/components/dialog): Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
  - [Dropdown Menu](/docs/ui/components/dropdown-menu): Displays a menu of actions or options triggered by a button
  - [Popover](/docs/ui/components/popover): Display additional information in a popover on click or hover
  - [Sheet](/docs/ui/components/sheet): A sheet slides in from the edge of the screen to display supplementary content or actions without leaving the current page.
  - [Toast](/docs/ui/components/toast): A short, non-interrupting notification about the result of an action, shown from the server or from JavaScript.
  - [Tooltip](/docs/ui/components/tooltip): A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

  - **Navigation**
  - [Accordion](/docs/ui/components/accordion): Divide content into collapsible sections
  - [Breadcrumb](/docs/ui/components/breadcrumb): Breadcrumbs provide navigation context and allow users to quickly navigate the current page's hierarchy
  - [Collapsible](/docs/ui/components/collapsible): An interactive component which expands/collapses a panel.
  - [Command](/docs/ui/components/command): A searchable menu of commands or options, navigated with the keyboard from a single search input
  - [Pagination](/docs/ui/components/pagination): Allow users to navigate between multiple pages of data
  - [Sidebar](/docs/ui/components/sidebar): Displays a sidebar to navigate inside the application
  - [Tabs](/docs/ui/components/tabs): Allow users to switch between pages, or between panels on the same page

  - **JavaScript Helpers**
  - [alertDialog()](/docs/ui/components/js-alert-dialog): A JavaScript wrapper for awaiting a confirmation from an alert dialog
  - [dialog()](/docs/ui/components/js-dialog): A JavaScript wrapper to help you work with promise-based dialogs