arcane_jaspr library

Arcane Jaspr - A Jaspr port of the Arcane UI component library Supabase-inspired design with switchable accent colors

Classes

a
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Accordion
An accordion/collapsible component (Supabase-style)
AccordionItem
An accordion item data model
AlertBanner
An alert/banner component (Supabase-style)
AlertDialog
A simple alert dialog
AlertStyle
Alert/banner styling presets Use like: ArcaneAlert(style: AlertStyle.warning)
Angle
The <angle> CSS data type represents an angle value expressed in degrees, gradians, radians, or turns. It is used by CSS functions like rotate() and in gradient angles.
AnimatedCounter
Animated counter display for statistics
AnimatedGradientText
Animated gradient text with color shift
Animation
The animation CSS property applies an animation between styles.
AppBinding
Main class that provide services (also known as "bindings").
Arcane
Core Arcane utility class for app-wide operations
ArcaneApp
Root application component for Arcane Jaspr apps.
ArcaneAvatar
Avatar component for displaying user images or initials
ArcaneBarriers
Barrier colors for overlays
ArcaneButton
A styled button component.
ArcaneCard
A card component with consistent styling.
ArcaneChip
Chip/tag component for labels and filters
ArcaneChipGroup
Chip group for multiple chips
ArcaneColors
Centralized design tokens for Arcane Jaspr All values are static const strings that reference CSS variables for theme reactivity or provide consistent static values for spacing, typography, etc. Color tokens referencing CSS variables for dynamic theming
ArcaneCommonStyles
Common reusable style patterns
ArcaneCtaBanner
Call-to-action banner with gradient background
ArcaneDialog
A modal dialog component.
ArcaneDivider
A horizontal divider component
ArcaneEffects
Effect tokens for shadows, transitions, and animations
ArcaneField<T>
A generic form field component in the Arcane UI component system.
ArcaneFieldDirectProvider<T>
A flexible provider that delegates to custom getter/setter functions.
ArcaneFieldMapProvider<T>
A concrete implementation of ArcaneFieldProvider using a nested Map for storage.
ArcaneFieldMetadata
Metadata class holding descriptive information for an ArcaneField.
ArcaneFieldProvider<T>
The abstract base class for form field providers in the Arcane form system.
ArcaneFieldStyles
Static styles for ArcaneField components (public for @css annotation)
ArcaneFieldWrapper
A wrapper widget for form fields providing consistent styling and layout.
ArcaneForm
A complete form component with built-in state management.
ArcaneFormProvider
A form provider component that manages form state.
ArcaneFormScope
An inherited component to provide form context to descendants.
ArcaneIconButton
An icon-only button component.
ArcaneInput
Factory class for creating common field types.
ArcaneLayout
Layout tokens for container widths, heights, and dimensions
ArcaneLoader
Spinner loader component
ArcaneProgressBar
Progress bar component with various styles
ArcaneRadius
Border radius tokens (reference CSS variables for consistent theming)
ArcaneRatingStars
Star rating display component
ArcaneSelect
A select/dropdown input component
ArcaneSocialIcon
Social media icon link
ArcaneSocialIconGroup
Group of social icons
ArcaneSpacing
Spacing tokens for consistent padding, margin, and gap values
ArcaneStyles
Helper class for building inline CSS styles
ArcaneTabItem
A tab item for ArcaneTabs
ArcaneTabs
A tab component for switching between views.
ArcaneTextArea
A textarea component
ArcaneTextInput
A styled text input component
ArcaneTheme
Main theme configuration for Arcane Jaspr
ArcaneThemeProvider
InheritedComponent for theme propagation
ArcaneToastTheme
Toast theme configuration
ArcaneTypography
Typography tokens for font sizes, weights, and line heights
ArcaneVerticalDivider
A vertical divider component
ArcaneWindow
ArcaneWindow for web - just wraps ArcaneApp with optional background styling
ArcaneZIndex
Z-index tokens for layering
article
The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
aside
The <aside> HTML element represents a portion of a document whose content is only indirectly related to the document's main content. Asides are frequently presented as sidebars or call-out boxes.
AspectRatio
The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified width-to-height ratio.
AsyncSnapshot<T>
Immutable representation of the most recent interaction with an asynchronous computation.
AttrCheck
audio
The <audio> HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one. It can also be the destination for streamed media, using a MediaStream.
AvatarGroup
Avatar group for stacking multiple avatars
AvatarStyle
Avatar styling presets
b
The <b> HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance. This was formerly known as the Boldface element, and most browsers still draw the text in boldface. However, you should not use <b> for styling text; instead, you should use the CSS font-weight property to create boldface text, or the <strong> element to indicate that text is of special importance.
BackgroundImage
The background-image CSS property sets one or more background images on an element. It accepts images (url()), gradients, and the keyword none.
BackgroundPosition
The background-position CSS property sets the initial position for each background image. The position is relative to the box established by background-origin.
BackgroundRepeat
The background-repeat CSS property sets how background images are repeated. A background image can be repeated along the horizontal and vertical axes, or not repeated at all.
BackgroundSize
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
BackToTop
A back to top button (Supabase-style)
Badge
A pill-shaped badge/label component
BadgeStyle
Badge styling presets Use like: ArcaneBadge(style: BadgeStyle.success)
Bar
An app bar / header component.
blockquote
The <blockquote> HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.
body
The <body> HTML element represents the content of an HTML document. There can be only one <body> element in a document.
BodyText
Body text component
Border
Border for BoxDecoration
BorderRadius
Border radius
BorderSide
Represents one side of a CSS Border.
BottomBar
A fixed position bottom bar container
BottomNavigationBar
A bottom navigation bar component.
BottomNavItem
A bottom navigation item
BoxConstraints
Box constraints
BoxDecoration
Box decoration for Container
BoxShadow
Box shadow
br
The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
BuildableElement
An Element that has a build method.
BuildContext
The BuildContext supplied to a Components build() method.
Builder
A stateless utility component whose build method uses its builder callback to create the component's child.
BuildOwner
button
The <button> HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs a programmable action, such as submitting a form or opening a dialog.
ButtonGroup
A group of related buttons or controls
ButtonPanel
A panel component for action buttons, typically used in dialogs or footers.
ButtonSizeStyle
Button size presets
ButtonStyle
Button styling presets Use like: ArcaneButton(style: ButtonStyle.warning)
CachingIterable<E>
A lazy caching version of Iterable.
caption
The <caption> HTML element specifies the caption (or title) of a table, providing the table an accessible description.
CardCarousel
A horizontally scrollable widget container with edge fading.
CardCarouselTheme
Card carousel theme configuration
CardSection
A card with section-style content organization.
CardStyle
Card styling presets Use like: ArcaneCard(style: CardStyle.elevated)
Carpet
A background container component that provides a subtle surface layer.
Center
A center alignment component
CenterBody
A component that centers its content both horizontally and vertically.
ChangeNotifier
A class that can be extended or mixed in that provides a change notification API using VoidCallback for notifications.
Checkbox
Checkbox input component
CheckboxStyle
Checkbox styling presets Use like: Checkbox(style: CheckboxStyle.primary)
Chip
A single chip component
ChipGroup
A group of selectable chips where multiple can be selected
ChipStyle
Chip styling presets Use like: ArcaneChip(style: ChipStyle.primary)
circle
The <circle> SVG element is an SVG basic shape, used to draw circles based on a center point and a radius.
CircularProgress
Circular progress indicator
ClientAnnotation
Use with client to annotate a client component.
CloseButton
A close button (X icon)
code
The <code> HTML element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the user agent's default monospace font.
CodeSnippet
A code snippet component with copy button (Supabase-style)
col
The <col> HTML element defines one or more columns in a column group represented by its parent <colgroup> element. The <col> element is only valid as a child of a <colgroup> element that has no span attribute defined.
colgroup
The <colgroup> HTML element defines a group of columns within a table.
Collection
A versatile collection widget for managing and displaying groups of items.
Color
Color utilities for Arcane Jaspr Provides a simple color representation for CSS output
Colors
Common colors
ColorScheme
Color scheme for theming
Column
A column layout component (vertical flex)
Component
Describes the configuration for an Element.
ConfirmDialog
A confirmation dialog component.
Container
A container component with styling options
ContrastedColorScheme
Contrasted color scheme for light/dark mode support
CounterRow
Counter row for displaying multiple stats
CtaGroup
A CTA button group component
Cursor
The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
Curve
Describes the timing function of a transition.
CycleButton<T>
A button that cycles through a list of values on each click.
CycleOption<T>
An option for CycleButton
DataColumn<T>
A column definition for DataTable
datalist
The <datalist> HTML element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
DataTable<T>
A data table component for displaying tabular data.
dd
The <dd> HTML element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
DecoderAnnotation
Use with decoder to annotate an decoder function for a custom model.
details
The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.
dialog
The <dialog> HTML element represents a dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.
DialogBar
A simple top bar for dialogs
div
The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox is applied to its parent element).
Divider
A divider component
DividerStyle
Divider styling presets
dl
The <dl> HTML element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Document
DomComponent
Represents a html element in the DOM
DomElement
DotsLoader
Dots loader animation
A dropdown menu item
A dropdown menu component (Supabase-style)
dt
The <dt> HTML element specifies a term in a description or definition list, and as such must be used inside a <dl> element. It is usually followed by a <dd> element; however, multiple <dt> elements in a row indicate several terms that are all defined by the immediate next <dd> element.
EdgeInsets
Edge insets for padding/margin
Element
An instantiation of a Component at a particular location in the tree.
ElementSlot
ellipse
The <ellipse> element is an SVG basic shape, used to create ellipses based on a center coordinate, and both their x and y radius.
em
The <em> HTML element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.
embed
The <embed> HTML element embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.
EmptyState
An empty state component for when there's no content
EncoderAnnotation
Use with encoder to annotate an encoder function for a custom model.
ErrorState
An error state component
Expanded
An expanded component that fills available space
Expander
An expandable/collapsible component.
FAB
A floating action button component.
FABStyle
FAB (Floating Action Button) styling presets Use like: FAB(style: FABStyle.primary)
Factory<T>
A factory interface that also reports the type of the created objects.
FaqAccordion
A simple FAQ accordion
FeatureCard
A feature card component (Supabase-style) Used for showcasing product features with icon, title, and description
fieldset
The <fieldset> HTML element is used to group several controls as well as labels (<label>) within a web form.
figcaption
The <figcaption> HTML element represents a caption or legend describing the rest of the contents of its parent <figure> element, providing the <figure>> an accessible description.
figure
The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.
FillScreen
A screen that fills the entire viewport.
Filter
CSS filter effects let you define a way of processing an element's rendering before the element is displayed in the document. Examples of such effects include blurring and changing the intensity of the color of an element.
Flex
Controls how a flex item consumes available space inside a flex container.
FloatingActionButton
A floating action button
Flow
A flexible flow layout component that wraps children.
FontFamilies
A collection of generic and common font families.
FontFamily
The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
FontStyle
The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.
A website footer component (Supabase-style)
The <footer> HTML element represents a footer for its nearest ancestor sectioning content or sectioning root element. A <footer> typically contains information about the author of the section, copyright data or links to related documents.
A footer link
FooterLinkGroup
A footer link group
form
The <form> HTML element represents a document section containing interactive controls for submitting information.
FormContext
Form context data for accessing form state.
FormSection
A form section that groups multiple fields together.
Fragment
A utility component that renders its children without any wrapper element.
FullScreen
A simple fullscreen container
FutureBuilder<T>
Component that builds itself based on the latest snapshot of interaction with a Future.
GameCard
A game card with more details
GameSelector
A grid of game tiles
GameTile
A game tile component for game server selection
Gap
A flexible gap component
Glass
A glassmorphism container component.
GlassCard
A glass card with standard card styling
GlobalKey
A key that is unique across the entire app.
GlobalNodeKey<T extends Node>
A global key that provides access to the dom web.Node that is associated with its element.
GlobalObjectKey
A global key that takes its identity from the object used as its value.
GlobalObjectNodeKey<T extends Node>
A global node key that takes its identity from the object used as its value.
GlobalObjectStateKey<T extends State<StatefulComponent>>
A global state key that takes its identity from the object used as its value.
GlobalStateKey<T extends State<StatefulComponent>>
A global key that provides access to the State that is associated with its element.
GlowText
Glow text effect
GradientGlass
A gradient glass effect
GradientText
Text with gradient color
GridAreas
Represents the grid areas defined in a grid layout.
GridPlacement
Describes where a grid item should be placed within a grid. It can place an item by naming a grid area, or by describing start/end lines for the item's row and column tracks. Use this to control the item's location and span inside its grid.
GridTemplate
The grid-template CSS property defines grid columns, grid rows, and grid areas.
GridTrack
Represents a single track in a grid layout, which can be a line, a size, or a repeated set of tracks.
GridTracks
Represents a list of grid tracks for rows or columns.
GridView
A grid layout component for displaying items in a grid.
Gutter
A spacing component that provides consistent gaps between elements.
GutterTheme
Gutter theme configuration
h1
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h2
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h3
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h4
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h5
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
h6
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
HamburgerButton
Hamburger menu button
The <head> HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
A website header/navbar component (Supabase-style)
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.
Headline
A styled headline component (Supabase-style typography)
HeroCarousel
A hero carousel with full-width slides.
HeroSection
A hero section component (Supabase-style)
hr
The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
html
The <html> HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.
i
The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element.
IconButtonStyle
Icon button styling presets Use like: ArcaneIconButton(style: IconButtonStyle.primary)
IconCard
A simple icon card for feature grids
iframe
The <iframe> HTML element represents a nested browsing context, embedding another HTML page into the current one.
ImageCard
An image card with overlay text
ImageStyle
Helper representing an image style value such as url(...) or gradients.
img
The <img> HTML element embeds an image into the document.
Import
Define a platform specific import with auto-generated stubbing.
InfoTooltip
An info icon with tooltip
InheritedComponent
Base class for components that efficiently propagate information down the tree.
InheritedElement
An Element that uses an InheritedComponent as its configuration.
InheritedModel<T>
InheritedModelElement<T>
InlineCode
An inline code component
input<T>
The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
InputGroup
An input group that combines multiple inputs in a row.
InputSizeStyle
Input size presets
InputStyle
Input field styling presets Use like: ArcaneTextInput(style: InputStyle.filled)
IntegrationCard
An integration/partner card (Supabase-style)
IntegrationGrid
A grid of integration cards
JasprBadge
A "Built with Jaspr" badge component.
Key
A Key is an identifier for Components and Elements.
KeyValueRow
A row for KeyValueTable
KeyValueTable
A simple key-value table (two columns)
label
The <label> HTML element represents a caption for an item in a user interface.
LabeledGlobalKey
A global key with a debugging label.
LabeledGlobalNodeKey<T extends Node>
A global node key with a debugging label.
LabeledGlobalStateKey<T extends State<StatefulComponent>>
A global state key with a debugging label.
LeafElement
LeafRenderObjectElement
legend
The <legend> HTML element represents a caption for the content of its parent <fieldset>.
li
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
line
The <line> element is an SVG basic shape used to create a line connecting two points.
Linear
Tuple used with Curve.linear. The optional arguments are percentages between 0-100.
LinePlacement
Places an item by specifying grid lines or spans.
The <link> HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
ListCard
A list card that contains list items
Listenable
An object that maintains a list of listeners.
ListenableBuilder
ListView
A list view component for displaying scrollable lists.
Loader
A loading spinner component
LoaderStyles
Style injection for loader animations
LoadingOverlay
Loading overlay for full-screen loading states
LoadingSpinner
Indeterminate loading spinner
LoadingState
A loading state component
LocalKey
A key that is not a GlobalKey.
LogoCarousel
An infinite scrolling logo carousel (Supabase-style)
LogoGrid
A static logo grid
LogoItem
A logo item for the carousel
main_
The <main> HTML element represents the primary content of a document, distinct from content that is repeated across multiple pages such as site headers, footers, and navigation bars.
MasonryGrid
A masonry-style layout component.
MediaQuery
Media queries allow you to apply CSS styles depending on a device's media type (such as print vs. screen) or other features or characteristics such as screen resolution or orientation, aspect ratio, browser viewport width or height, user preferences such as preferring reduced motion, data usage, or transparency.
MegaMenu
A navigation dropdown with mega-menu style
MegaMenuSection
A section in a mega menu
meta
The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base >, <link >, <script >, <style > or <title >.
meter
The <meter> HTML element represents either a scalar value within a known range or a fractional value.
MetricDisplay
A metric display with label
MobileMenu
A mobile hamburger menu (Supabase-style)
MobileNavItem
Mobile navigation item
MultiChildElement
An Element that has multiple children based on a proxy list.
MultiChildRenderObjectElement
The <nav> HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes.
A carousel with navigation arrows.
A navigation destination
A screen with built-in navigation (sidebar or bottom nav).
Navigation theme configuration
A navigation link item
A simple nav link component
A navigation tile for sidebar or list navigation
NewsletterForm
A newsletter signup form (Supabase-style)
Notification
A notification that can bubble up the component tree.
object
The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
ObserverComponent
Base class for components that observes the build execution of it's descendants in the Component tree.
ObserverElement
An Element that uses an ObserverComponent as its configuration. You can override willRebuildElement, didRebuildElement and didUnmountElement to execute the required logic.
ol
The <ol> HTML element represents an ordered list of items — typically rendered as a numbered list.
optgroup
The <optgroup> HTML element creates a grouping of options within a <select> element.
option
The <option> HTML element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element. As such, <option> can represent menu items in popups and other lists of items in an HTML document.
Outline
Represents the CSS outline property.
OutlineText
Outline text effect
OutlineWidth
The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.
Overflow
The overflow CSS property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
OverflowValue
The overflow CSS property sets the desired behavior when content does not fit in the element's padding box (overflows) in the horizontal and/or vertical direction.
p
The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
Padding
A padding wrapper component
PageBody
A page-level centered content container
path
The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
polygon
The <polygon> element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
polyline
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point.
Position
The position CSS property sets how an element is positioned in a document
pre
The <pre> HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
PricingCard
A pricing card component (Supabase-style)
PricingGrid
A pricing grid for displaying multiple tiers
PricingTier
A pricing tier model
progress
The <progress> HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
ProgressBar
A progress bar component
ProgressStyle
Progress bar styling presets
PulseLoader
Pulse loader animation
Quotes
The CSS quotes property sets how the browser should render quotation marks that are automatically added to the HTML <q> element or added using the open-quotes or close-quotes (or omitted using the no-open-quote and no-close-quote) values of the of the CSS content property.
Radio
Radio button component
RadioCardItem<T>
An item for RadioCards
RadioCards<T>
A group of selectable cards where only one can be selected at a time.
Radius
Represents a corner radius used by BorderRadius.
RangeSlider
Range slider with two handles
RatingStars
Rating stars component
RawableRenderObject
RawableRenderText
RawText
Renders its text input as raw HTML.
rect
The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
RenderElement
RenderFragment
RenderObject
RenderText
Repeater
A simple repeater component for generating repeated elements.
ResponsiveScaffold
A responsive scaffold that adapts to screen size
Row
A row layout component (horizontal flex)
s
The <s> HTML element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.
Screen
Base screen component that provides consistent layout structure.
script
The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code. The <script> element can also be used with other languages, such as WebGL's GLSL shader programming language and JSON.
ScrollProgress
A scroll progress indicator
A search input component with optional icon and clear button.
Section
A section component for grouping related content with an optional header.
section
The <section> HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions.
select
The <select> HTML element represents a control that provides a menu of options.
SelectOption
Select option model
Selector<T>
A dropdown selector component.
SelectorOption<T>
An option for Selector
Sheet
A sheet/drawer dialog that slides in from the edge.
A sidebar navigation component.
SidebarGroup
A sidebar item group with optional label
SidebarItem
A sidebar navigation item
SizedBox
A sized box component
Skeleton
Skeleton loading placeholder component
SkeletonCard
Skeleton card placeholder
SkeletonText
Skeleton text block with multiple lines
Slider
Range slider input component
SliderStyle
Slider styling presets Use like: Slider(style: SliderStyle.primary)
SliverSection
A sliver-style section for use in scrollable lists
small
The <small> HTML element represents side-comments and small print, like copyright and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
SocialIcon
Social icon link component
SocialLinkItem
A social link item
Social links component with labels
source
The <source> HTML element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element. It is an empty element, meaning that it has no content and does not have a closing tag. It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
Spacer
A flexible spacer component
Spacing
Represents spacing properties such as padding and margin in CSS.
span
The <span> HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.
StatCard
Stat card for displaying metrics with optional trend indicator
StatCardRow
A row of stat cards
State<T extends StatefulComponent>
The logic and internal state for a StatefulComponent.
StatefulBuilder
A platonic component that both has state and calls a closure to obtain its child component.
StatefulComponent
A component that has mutable state.
StatefulElement
An Element that uses a StatefulComponent as its configuration.
StatelessComponent
A component that does not require mutable state.
StatelessElement
An Element that uses a StatelessComponent as its configuration.
StaticTable
A static table component for displaying simple tabular data.
StatusBadge
Status badge combining status indicator with text
StatusIndicator
Status indicator dot with optional label
StepItem
Step item data
Stepper
Horizontal stepper for multi-step processes
StreamBuilder<T>
Component that builds itself based on the latest snapshot of interaction with a Stream.
StreamBuilderBase<T, S>
Base class for components that build themselves based on interaction with a specified Stream.
strong
The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
StructuredCard
A card with header, body, and footer sections
Style
Renders the provided list of styles into css and wraps them with a <style> element.
StyleRule
Styles
Represents a set of css styles.
StylesMixin<T>
Subheadline
Subheadline / lead paragraph text
summary
The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed.
Surface
A surface component with customizable elevation and appearance
svg
The <svg> element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
SyncAnnotation
SynchronousFuture<T>
A Future whose then implementation calls the callback immediately.
TabBar
A simple tab bar without content (for custom tab handling)
TabBarItem
A tab bar item
table
The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
tbody
The <tbody> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of a table's (main) data.
td
The <td> HTML element defines a cell of a table that contains data and may be used as a child of the <tr> element.
Terminal
A terminal/command line component
TestimonialCard
A testimonial/quote card component (Supabase-style)
Text
Represents a plain text node with no additional properties.
textarea
The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
TextDecoration
The text-decoration CSS property sets the appearance of decorative lines on text.
TextDecorationLine
The text-decoration-line CSS property sets the kind of decoration that is used on text in an element, such as an underline or overline.
TextDecorationThickness
The text-decoration-thickness CSS property sets the stroke thickness of the decoration line that is used on text in an element, such as a line-through, underline, or overline.
TextElement
TextInputDialog
A text input dialog component.
TextShadow
The text-shadow CSS property adds shadows to text.
tfoot
The <tfoot> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the foot of a table with information about the table's columns. This is usually a summary of the columns, e.g., a sum of the given numbers in a column.
th
The <th> HTML element defines a cell as the header of a group of table cells and may be used as a child of the <tr> element. The exact nature of this group is defined by the scope and headers attributes.
thead
The <thead> HTML element encapsulates a set of table rows (<tr> elements), indicating that they comprise the head of a table with information about the table's columns. This is usually in the form of column headers (<th> elements).
ThemeToggle
Day/Night theme toggle switch
ThemeToggleSimple
Simple text-based theme toggle
Tile
A list tile component for displaying items in a list.
Timeline
Timeline component for showing progression or history
TimelineItem
Timeline item data class
Toast
A toast notification component.
ToastContainer
A toast container that positions toasts on the screen.
ToggleButton
A toggle button (on/off state)
ToggleButtonGroup
A toggle button group (like pricing monthly/yearly)
ToggleStyle
Toggle/Switch styling presets Use like: ToggleSwitch(style: ToggleStyle.primary)
ToggleSwitch
A toggle switch component
Toolbar
A toolbar component for a horizontal bar of actions
Tooltip
A tooltip component (Supabase-style)
TooltipCustom
A tooltip with custom content
TooltipStyle
Tooltip styling presets
tr
The <tr> HTML element defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.
TrackRepeat
Represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact form.
TrackSize
Represents the size of a grid track in a grid layout.
Transform
Represents the CSS transform property.
Transition
Represents the CSS transition property.
u
The <u> HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.
ul
The <ul> HTML element represents an unordered list of items, typically rendered as a bulleted list.
UniqueKey
A key that is only equal to itself.
Unit
Represents a CSS unit value.
ValueKey<T>
A key that uses a value of a particular type to identify itself.
ValueListenable<T>
An interface for subclasses of Listenable that expose a value.
ValueListenableBuilder<T>
ValueNotifier<T>
A ChangeNotifier that holds a single value.
VerticalStepper
Vertical stepper variant
video
The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.
WaitlistForm
A waitlist form with additional fields
wbr
The <wbr> HTML element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
ZIndex
The z-index CSS property sets the z-order of a positioned element and its descendants or flex and grid items. Overlapping elements with a larger z-index cover those with a smaller one.

Enums

AccentTheme
Accent color theme for Supabase-style theming
AlertVariant
Alert/banner variants
AlignContent
The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
AlignItems
The CSS align-items property sets the align-self value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.
Alignment
Alignment
AlignSelf
The align-self CSS property overrides a grid or flex item's align-items value. In grid, it aligns the item inside the grid area. In flexbox, it aligns the item on the cross axis.
All
The all CSS property resets all of an element's properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
AnimationDirection
The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
AnimationFillMode
The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.
AnimationPlayState
The animation-play-state CSS property sets whether an animation is running or paused.
Appearance
The appearance CSS property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.
AutoComplete
Indicates whether input elements can by default have their values automatically completed by the browser. autocomplete attributes on form elements override it on <form>.
AvatarSize
Avatar size presets
Axis
Axis
BackgroundAlignX
BackgroundAlignY
BackgroundAttachment
The background-attachment CSS property sets whether a background image's position is fixed within the viewport or scrolls with its containing block.
BackgroundAxisRepeat
The background-repeat CSS property sets how background images are repeated. Per-axis values for the BackgroundRepeat property.
BackgroundClip
The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.
BackgroundOrigin
The background-origin CSS property sets the background's origin: which box (border-box, padding-box or content-box) the background's position is relative to.
BadgeSize
Badge size
BadgeVariant
Badge variants (legacy - prefer using BadgeStyle presets)
BarBackButtonMode
Back button display mode
BorderStyle
Keywords for the visual style of borders (e.g. dotted, solid, double).
BoxFit
Box fit
BoxSizing
The box-sizing CSS property sets how the total width and height of an element is calculated.
Brightness
Brightness mode
ButtonSize
Button size variants
ButtonType
Defines the default behavior of a button.
ButtonVariant
Button style variants (legacy - prefer using ButtonStyle presets)
CheckboxSize
Checkbox size variants
ChipSize
Chip size variants
Combinator
ConnectionState
The state of connection to an asynchronous computation.
Contrast
The prefers-contrast CSS media feature is used to detect whether the user has requested the web content to be presented with a lower or higher contrast.
CrossAxisAlignment
Cross axis alignment
CrossOrigin
Indicates if the fetching of the media must be done using a CORS request. Media data from a CORS request can be reused in the <canvas> element without being marked "tainted". If the crossorigin attribute is not specified, then a non-CORS request is sent (without the Origin request header), and the browser marks the media as tainted and restricts access to its data, preventing its usage in <canvas> elements. If the crossorigin attribute is specified, then a CORS request is sent (with the Origin request header); but if the server does not opt into allowing cross-origin access to the media data by the origin site (by not sending any Access-Control-Allow-Origin response header, or by not including the site's origin in any Access-Control-Allow-Origin response header it does send), then the browser blocks the media from loading, and logs a CORS error to the devtools console.
Display
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
Dropdown alignment
FABPosition
FAB position variants
FABSize
FAB size variants
FlexDirection
The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
FlexWrap
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
FontWeight
Font weight
FormEncType
The MIME type of a form submission.
FormMethod
The HTTP method to submit a form with.
GutterSize
Gutter size options
HeadlineLevel
Headline levels
IconButtonSize
Icon button size variants
ImportPlatform
InputType
The type for an <input> element.
JustifyContent
The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multicol containers.
JustifyItems
The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.
JustifySelf
The CSS justify-self property sets the way a box is justified inside its alignment container along the appropriate axis.
ListStyle
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
ListStylePosition
The list-style-position CSS property sets the position of the ::marker relative to a list item.
MainAxisAlignment
Main axis alignment
MainAxisSize
Main axis size
MediaLoading
Indicates how the browser should load the media. Loading is only deferred when JavaScript is enabled.
Navigation mode
NumberingType
The numbering type for a list element.
Orientation
The orientation CSS media feature can be used to test the orientation of the viewport (or the page box, for paged media).
OutlineStyle
The style of an element's outline. An outline is a line that is drawn around an element, outside the border.
PointerEvents
The pointer-events CSS property sets under what circumstances (if any) a particular graphic element can become the target of pointer events.
Preload
Intended to provide a hint to the browser about what the author thinks will lead to the best user experience when loading a media object. The default value is different for each browser. The spec advises it to be set to Preload.metadata.
ProgressSize
Progress bar size
ReferrerPolicy
The Referrer-Policy controls how much referrer information (sent with the Referer header) should be included with requests.
SchedulerPhase
SheetPosition
Sheet position
SocialPlatform
Social media platforms
SpellCheck
Specifies whether an element is subject to spell checking by the underlying browser/OS.
StatusType
Status types
StepJump
Describes how the transition behaves at the start and end when using Curve.steps.
Target
The name/keyword for a browsing context (a tab, window, or <iframe>).
TextAlign
Text alignment
TextDecorationLineKeyword
TextDecorationStyle
The text-decoration-style CSS property sets the style of the lines specified by TextDecorationLine.
TextOverflow
Text overflow
TextTransform
The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
TextWrap
Indicates how the control wraps text.
ThemeMode
Theme mode
ThemeToggleSize
Theme toggle size
ToastPosition
Toast position
ToastVariant
Toast notification variant
ToggleSwitchSize
Toggle switch size variants
TooltipPosition
Tooltip position
UserSelect
The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.
Visibility
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.
WhiteSpace
The white-space CSS property sets how white space inside an element is handled.
WrapAlignment
Wrap behavior

Mixins

ComponentsBinding
Main app binding, controls the root component and global state
NotifiableElementMixin
Mixin this class to allow receiving Notification objects dispatched by child elements.
OnFirstBuild
Mixin on StatelessComponent that performs some async task on the first build
PreloadStateMixin<T extends StatefulComponent>
Mixin on State that preloads state on the server
RenderObjectElement
SchedulerBinding
SyncStateMixin<T extends StatefulComponent, U>
Mixin on State that syncs state data from the server to the client.
ViewTransitionMixin<T extends StatefulComponent>

Extensions

AngleExt on num
Extension helpers to create Angle values from numeric literals.
AppContext on BuildContext
ArcaneThemeContext on BuildContext
Extension to easily access theme from context
DurationExt on int
DurationExtension on int
Duration extension for convenience
SelectorMixin on Selector
UnitExt on num

Constants

client → const ClientAnnotation
Used to annotate a client component.
css → const CssUtility
Styling utility to create nested style definitions.
decoder → const DecoderAnnotation
Used to annotate an decoder function for a custom model.
encoder → const EncoderAnnotation
Used to annotate an encoder function for a custom model.
factory → const Object
Annotation on a function that creates new objects.
immutable → const Immutable
Annotation on an immutable class.
kDebugMode → const bool
A constant that is true if the application was compiled in debug mode.
kGenerateMode → const bool
A constant that is true if the application is running in static-site-generation mode.
kIsWasm → const bool
A constant that is true if the application was compiled to WebAssembly.
kIsWeb → const bool
A constant that is true if the application was compiled to run on the web.
kReleaseMode → const bool
A constant that is true if the application was compiled in release mode.
kVerboseMode → const bool
A constant that is true if the application was run in verbose mode.
mustCallSuper → const Object
Annotation on instance member that overriding members must call.
nonVirtual → const Object
Annotation on instance member that must not be overridden.
optionalTypeArgs → const Object
Annotation on type arguments that can safely be omitted.
protected → const Object
Annotation on instance member that should only be used by subclasses.
sync → const SyncAnnotation
visibleForTesting → const Object
Annotation on a public declaration that should only be used in tests.

Functions

arcaneStyles() → ArcaneStyles
Convenience function to create a new ArcaneStyles instance
describeIdentity(Object? object) → String
Returns a summary of the runtime type and hash code of object.
events<V>({VoidCallback? onClick, ValueChanged<V>? onInput, ValueChanged<V>? onChange}) → Map<String, EventCallback>
Helper function to provide typed event handlers to the events property of html components.
fragment(List<Component> children, {Key? key}) → Component
Renders a list of children without any wrapping element.
lerpDuration(Duration a, Duration b, double t) → Duration
Linearly interpolate between two Durations.
objectRuntimeType(Object? object, String optimizedValue) → String
Framework code should use this method in favor of calling toString on Object.runtimeType.
raw(String text, {Key? key}) → Component
Renders its input as raw unescaped html using RawText.
rawStyles(Map<String, String> properties) → Styles
Helper to create Jaspr Styles from a raw map. Usage: rawStyles({'color': 'red', 'padding': '10px'})
runApp(Component app) → void
Main entry point for a jaspr app
shortHash(Object? object) → String
Returns a 5 character long hexadecimal string generated from Object.hashCode's 20 least-significant bits.
text(String text, {Key? key}) → Component
Renders a text node.

Typedefs

AsyncCallback = Future<void> Function()
Signature of callbacks that have no arguments and return no data, but that return a Future to indicate when their work is complete.
AsyncComponentBuilder<T> = Component Function(BuildContext context, AsyncSnapshot<T> snapshot)
Signature for strategies that build components based on asynchronous interaction.
AsyncValueGetter<T> = Future<T> Function()
Signature for callbacks that are to asynchronously report a value on demand.
AsyncValueSetter<T> = Future<void> Function(T value)
Signature for callbacks that report that a value has been set and return a Future that completes when the value has been saved.
ComponentBuilder = Component Function(BuildContext context)
Signature for a function that creates a component, e.g. StatelessComponent.build or State.build.
ElementVisitor = void Function(Element element)
Signature for the callback to BuildContext.visitChildElements.
EventCallback = void Function(Event event)
IterableFilter<T> = Iterable<T> Function(Iterable<T> input)
Signature for callbacks that filter an iterable.
Margin = Spacing
The margin CSS property sets the outer spacing of an element.
SelectInput = ArcaneSelect
StatefulComponentBuilder = Component Function(BuildContext context, StateSetter setState)
Signature for the builder callback used by StatefulBuilder.
StateSetter = void Function(VoidCallback fn)
The signature of State.setState functions.
TextArea = ArcaneTextArea
ValueChanged<T> = void Function(T value)
Signature for callbacks that report that an underlying value has changed.
ValueGetter<T> = T Function()
Signature for callbacks that are to report a value on demand.
ValueSetter<T> = void Function(T value)
Signature for callbacks that report that a value has been set.
VerticalDivider = ArcaneVerticalDivider
Legacy alias for backwards compatibility
VoidCallback = void Function()
Signature of callbacks that have no arguments and return no data.