Frame
Coordinate layout, state, loading, and motion across components through explicit configuration.
We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.
When to use Frame
Frame is the shared host for layout, state, loading, motion, and explicit coordination between components. Use semantic HTML when a page only needs ordinary structure.
Import
import { Frame, initMotion } from '@snowui-design-system/components';Use SnowUI to build the interface described by my requirements or design below. A core direction for SnowUI is interactive interfaces generated by AI in conversation. This capability is in development; official components have not yet completed chat-host acceptance. If I request an interface inside a conversation, verify host execution capabilities, component versions, and actual adapter evidence first. Use only verified subsets and allowed actions; preserve user input and distinguish local interaction, business submission, and conversation continuation. If unsupported, explain the limitation and use an authorized alternative. A web preview, code, or visual imitation does not establish in-conversation interaction. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof. This exemption also covers real work and authorized data: do not require a product ID, usage declaration, project ledger, or release check for conversation-only use. Review the separate product license only if the result is adopted into an independent website or application; never register a chat or generated surface as a project. The linked AI documents are reviewed English translations of the current public component and design guidance. Check the installed package version and revisit the linked pages when source or product scope changes. On first adoption, read the complete LICENSE: https://snowui.dev/LICENSE. For an installed version, its bundled license applies. Reuse checks within the same task, version, product and confirmed scope. Prepare downloads, installation, materials, and the environment using https://snowui.dev/llms/en/setup.md and machine setup https://snowui.dev/llms/setup.json. Detect actual file, terminal, Svelte build, resource-loading, and in-message rendering capabilities first. In an authorized Svelte 5 environment, reuse compatible dependencies or use pnpm add --save-exact @snowui-design-system/components@0.3.0-alpha.11 @snowui-design-system/resource-svelte@1.0.31 (or the existing package manager), resolve resource-base transitively, load @snowui-design-system/components/styles once, and run the component/material interaction checks. Select real named materials from https://snowui.dev/llms/resources.json. Never use a maintainer's disk path or load the full library into each message. Report download, installation, build, asset loading, in-message interaction, and continuation separately. Provide a non-secret setup summary for later use. A local install or copied prompt does not configure another AI product or a new chat. Discover that host and follow a real verified connection when available; machine setup currently has no SnowUI chat connection URL. Do not invent endpoints, bypass host permissions, write AI memory, or claim unexecuted installation or rendering. Read the design guide: https://snowui.dev/llms/en/design-system.md. Break the page into regions and implement them with public components and semantic HTML. Read the styling order once: https://snowui.dev/llms/en/styling.md. Match public Props such as variant and size first and preserve the original styles where possible. If customization is necessary, use your own class (including existing Tailwind), then instance style. Same-category Tokens are recommended; use only public roots, parts and documented overrides. Select components as needed: https://snowui.dev/llms/en/component-selection.md. Use https://snowui.dev/llms-en.txt to discover them, then read only the relevant API, composition rules and examples. For SnowUI Figma input, also read https://snowui.dev/llms/en/figma.md. The official package is for Svelte 5. Confirm the target framework; explain any necessary port instead of pretending a changed import provides another framework. Conversation-only use follows the free exemption above without project or seat review. For independent products only, Free use does not require registration, an account, a public key or a signed paid license file; follow the LICENSE limits on purpose, projects and developers. A claimed paid plan is not verified authorization. Verify trusted evidence when paid rights are needed; unavailable evidence or documents remain unknown, and only permitted work may continue. Apply my requirements below. Do not invent APIs, addresses or authorization. Use Frame guide section import. Read the actual code in this section: https://snowui.dev/components/frame#import. Complete public manual: https://snowui.dev/llms/en/components/frame/reference.md Component guide: https://snowui.dev/llms/en/components/frame.mdPublic API: https://snowui.dev/llms/en/components/frame/api.mdDependency: @snowui-design-system/components; read the example's actual imports and load the package stylesheet once. Preserve its behavior and adapt only what my requirements need.Layout and content
Use singleLine with leading/trailing attachments and Text lines={1} for one-line labels. Use row firstLine for wrapping prose; row, column, grid, and as compose other layouts. Use public tokens and class/style for visual values. loading and skeleton share the same inherited context.
Coordination
Call initMotion() during parent component initialization when using cross-component motion. Frame supports orchestrate*, target/action triggers, and styles rules. These capabilities use the same Frame implementation and context as ordinary layout.
API and examples
API Reference
| Property | Type | Default | Example | Description |
|---|---|---|---|---|
componentParts | ComponentParts | — | componentParts={ExampleIcon} | Internal parts-propagation boundary for a composite component. Ordinary pages configure public parts through the hosting component rather than this field. |
enableResponsive | boolean | true | enableResponsive | Enable responsive observation, including ResizeObserver and breakpoint detection. |
enableContext | boolean | true | enableContext | Provide FramePerception context to descendants. |
enableScaleObserver | boolean | false | enableScaleObserver | Observe proportional size. Writes runtime CSS variables for width, height, aspect ratio, and unified size. |
enableDefaultMotion | boolean | true | enableDefaultMotion | Default motion switch. false prevents Frame from injecting system default motion into while* stages; explicit user while* configuration still applies. |
enableAutoLayout | boolean | true | enableAutoLayout | Enable the automatic layout protocol when row or column is declared. Emits data-auto-layout and provides three-slot perception, first-line alignment, wrapping, and gap rules from auto-layout.css. Set false to disable; see LayoutProtocol.md. |
contentFill | boolean | false | contentFill | Make ordinary child content fill the Frame content width; takes priority over contentHug. |
contentHug | boolean | false | contentHug | Shrink ordinary child content width to its contents. |
pinOffset | number | string | — | pinOffset="Example" | Pin offset on both axes. Numbers become pixels; strings pass through. Prefer the relevant token string in new code. |
pinOffsetX | number | string | — | pinOffsetX="Example" | Horizontal pin offset, taking precedence over pinOffset. Numbers become pixels; strings pass through. |
pinOffsetY | number | string | — | pinOffsetY="Example" | Vertical pin offset, taking precedence over pinOffset. Numbers become pixels; strings pass through. |
scaleHeightVar | string | --snowui-scale-height-runtime | scaleHeightVar="Example" | CSS variable name receiving runtime height. |
scaleWidthVar | string | --snowui-scale-width-runtime | scaleWidthVar="Example" | CSS variable name receiving runtime width. |
scaleAspectRatioVar | string | --snowui-scale-aspect-ratio-runtime | scaleAspectRatioVar="Example" | CSS variable name receiving runtime aspect ratio. |
scaleSizeVar | string | --snowui-scale-size-runtime | scaleSizeVar="Example" | CSS variable name receiving runtime unified size. |
scaleObserverTarget | "self" | "parent" | 'self' | scaleObserverTarget="self" | Element observed for size changes. |
scaleBasis | "height" | "width" | "mixed" | "aspect" | 'height' | scaleBasis="height" | Basis model for proportional calculations. |
scaleMixHeightWeight | number | 0.5 | scaleMixHeightWeight={42} | Height weighting in mixed scale mode. |
scaleAspectBaseRatio | number | 1 | scaleAspectBaseRatio={42} | Reference height-to-width ratio in aspect mode. |
sizeRatio | number | 1 | sizeRatio={42} | Unified size ratio relative to the basis; 1 equals the basis size. |
iconSizeRatio | number | sizeRatio | iconSizeRatio={42} | Independent ratio for icon size. |
avatarSizeRatio | number | sizeRatio | avatarSizeRatio={42} | Independent ratio for avatar size. |
class | string | — | class="my-component" | External CSS class for public styling or layout adjustments. |
style | string | — | style="width: 100%;" | Inline style on the root. |
children | Snippet<[any]> | — | <Frame>Content</Frame> | Container child content. |
as | string | — | as="Example" | Role declared by this Frame in a composition. |
tag | string | div | tag="Example" | HTML tag rendered for the root. |
id | string | — | id="example" | Element ID. For motion identity, the caller must provide it explicitly. |
element | HTMLElement | — | bind:element={element} | Bindable root element reference. |
use | any[] | — | use={use} | Array of Svelte actions. |
size | number | — | size={42} | Logical size passed through context to descendants, including resource components that select a resolution. |
iconSize | number | — | iconSize={42} | Set the internal Icon size independently through context. |
avatarSize | number | — | avatarSize={42} | Set the internal Avatar size independently through context. |
loading | boolean | false | loading | Enter loading state. This indicates state without prescribing its visual presentation. |
skeleton | boolean | true | skeleton | Render a skeleton for loading state; may inherit the parent loading protocol. |
renderHints | RenderHints | — | renderHints={value} | Skeleton registration hints for root shape, size, radius, and line count. Caller fields override component hints individually. |
currentState | CoreState | "Idle" | currentState={value} | Externally controlled core state for a parent-managed lifecycle such as Toast or Portal. Transfers Appear, Disappear, or Active state to Frame default motion. |
customStates | string[] | — | customStates={customStates} | Additional custom state names for the state machine. |
StartLoad | StateTransition | — | StartLoad={value} | Transition after loading begins. |
Load | StateTransition | — | Load={value} | Transition after loading completes. |
Reload | StateTransition | — | Reload={value} | Transition after a reload and call onReload. |
Appear | StateTransition | — | Appear={value} | Transition after appearing. |
Disappear | StateTransition | — | Disappear={value} | Transition after disappearing. |
Idle | StateTransition | — | Idle={value} | Transition after becoming idle. |
Active | StateTransition | — | Active={value} | Transition after activation. |
Disabled | StateTransition | — | Disabled={value} | Transition after disabling. |
Validating | StateTransition | — | Validating={value} | Transition after validation begins. |
Uploading | StateTransition | — | Uploading={value} | Transition after uploading begins. |
Editing | StateTransition | — | Editing={value} | Transition after editing begins. |
onReload | () => Promise<void> | — | onReload={(value) => { /* handle value */ }} | Callback when entering Reload, used to refresh data. |
stateVars | Record<string, StateValueMap<any>> | — | stateVars={stateVarsOptions} | Map arbitrary CSS variable names to values by state. |
stateClass | StateValueMap<string> | — | stateClass={stateClassOptions} | Add classes according to state. |
stateStyle | StateValueMap<string | Record<string, string | number>> | — | stateStyle={stateStyleOptions} | Add styles according to state. |
stateContent | StateValueMap<any> | — | stateContent={stateContentOptions} | Switch child Snippets by state; Frame supplies cross-fade motion between them. |
Click | EventTrigger | — | Click={value} | Trigger a state transition on click. |
Drag | EventTrigger | — | Drag={value} | Trigger a state transition on drag. |
Hover | EventTrigger | — | Hover={value} | Trigger a state transition on hover. |
Focus | EventTrigger | — | Focus={value} | Trigger a state transition on focus. |
Key | | { key: string; state: CoreState } | { key: string; target: string; action: string; reverse?: boolean; } | { key: string; run: (e?: any) => void } | — | Key={(value) => { /* handle value */ }} | Trigger a state transition for specified keys. |
Scroll | EventTrigger | — | Scroll={value} | Trigger a state transition when scrolled to the component. |
collapsed | boolean | — | collapsed | Declare a collapsed form for form and state capabilities; does not create a trigger button. |
expanded | boolean | — | expanded | Declare an expanded form for form and state capabilities; does not create content automatically. |
responsive | FrameResponsiveProps | false | — | responsive={value} | Content adaptation settings based on container width, or false. With responsive capability enabled, public FrameResponsiveProps controls direction and content shrinkage. |
xs | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | xs="row" | Compatibility direction at the xs breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
sm | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | sm="row" | Compatibility direction at the sm breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
md | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | md="row" | Compatibility direction at the md breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
lg | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | lg="row" | Compatibility direction at the lg breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
xl | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | xl="row" | Compatibility direction at the xl breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
2xl | "row" | "column" | "grid" | "row-reverse" | "column-reverse" | — | 2xl="row" | Compatibility direction at the 2xl breakpoint using a mobile-first cascade when enableResponsive is on. New pages should prefer page responsive utilities. |
row | boolean | — | row | Set horizontal layout. Takes priority if row, column, and grid are all declared. |
firstLine | boolean | false | firstLine | Explicit first-line alignment for graphics with prose that may wrap; use singleLine for one-line labels. In a row or row-reverse three-slot layout, center leading and trailing attachments on the first text line. Text must inherit host line height. No effect without row layout, attachments, or auto layout; compatible with Pin. |
singleLine | boolean | false | singleLine | Explicit single-line composition: horizontal alignment, no wrapping, stable attachments and at least 4 CSS px of effective spacing. It takes priority over responsive direction changes. Text lines=1 owns truncation and full-text access. Disabled when enableAutoLayout=false. |
column | boolean | — | column | Set vertical layout when row is not active; reverse can flip direction. |
grid | boolean | — | grid | Set basic grid layout when row and column are inactive. Configure columns through public class or style. |
reverse | boolean | — | reverse | Reverse the selected layout direction. |
morph | boolean | — | morph | Animate Frame’s own layout changes. It does not replace chart, table, or text component timelines. |
whileLoad | MotionConfig | boolean | — | whileLoad={value} | Motion for the Load state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileReload | MotionConfig | boolean | — | whileReload={value} | Motion for the Reload state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileAppear | MotionConfig | boolean | — | whileAppear={value} | Motion for the Appear state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileDisappear | MotionConfig | boolean | — | whileDisappear={value} | Motion for the Disappear state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileIdle | MotionConfig | boolean | — | whileIdle={value} | Motion for the Idle state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileActive | MotionConfig | boolean | — | whileActive={value} | Motion for the Active state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileDisabled | MotionConfig | boolean | — | whileDisabled={value} | Motion for the Disabled state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileClick | MotionConfig | boolean | — | whileClick={value} | Motion for the Click state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileDrag | MotionConfig | boolean | — | whileDrag={value} | Motion for the Drag state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileHover | MotionConfig | boolean | — | whileHover={value} | Motion for the Hover state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileFocus | MotionConfig | boolean | — | whileFocus={value} | Motion for the Focus state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileKey | MotionConfig | boolean | — | whileKey={value} | Motion for the Key state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileScroll | MotionConfig | boolean | — | whileScroll={value} | Motion for the Scroll state or trigger. An object defines explicit motion; a boolean controls this stage’s default motion. It does not create business state or take over a child component’s specialized timeline. |
whileValidating | MotionConfig | boolean | — | whileValidating={value} | Motion for the Validating state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileUploading | MotionConfig | boolean | — | whileUploading={value} | Motion for the Uploading state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileEditing | MotionConfig | boolean | — | whileEditing={value} | Motion for the Editing state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileCollapsed | MotionConfig | — | whileCollapsed={value} | Motion for the Collapsed state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileExpanded | MotionConfig | — | whileExpanded={value} | Motion for the Expanded state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileXs | MotionConfig | — | whileXs={value} | Motion for the Xs state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileSm | MotionConfig | — | whileSm={value} | Motion for the Sm state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileMd | MotionConfig | — | whileMd={value} | Motion for the Md state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileLg | MotionConfig | — | whileLg={value} | Motion for the Lg state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
whileXl | MotionConfig | — | whileXl={value} | Motion for the Xl state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
while2xl | MotionConfig | — | while2xl={value} | Motion for the 2xl state or trigger. An object defines explicit motion. This is a migration compatibility entry; avoid expanding its use on new pages. |
variants | Record<string, MotionConfig> | — | variants={variantsOptions} | Motion variant attributes. |
delay | number | 0 | delay={42} | Execution delay in milliseconds. |
loopMotion | LoopMotionConfig | — | loopMotion={value} | Looped animation settings. By default, write duration, easing, iteration, direction, and playState to Frame loop-motion CSS variables. preset="rotateClockwise" activates continuous rotation on the root. |
scroll | ScrollConfig | — | scroll={value} | Scroll-linked motion configuration. |
layoutId | string | — | layoutId="Example" | Shared-element transition ID. |
itemId | string | — | itemId="Example" | Element replacement anchor ID, recommended with the same semantics as layoutId. |
scope | FrameScope | — | scope={value} | Context capability reach: self, children, descendants, or explicit. Does not impose new limits on unrelated context propagation. |
access | FrameAccess | — | access={value} | Context operation permission: readonly permits reads; writeable permits operations allowed by the public contract. |
timeline | string | — | timeline="Example" | Timeline declaration in the form timeline:[ID]:[Order]. |
orchestrate | boolean | — | orchestrate | Enable parent Frame motion sequencing for child items. |
orchestrateMode | "sequential" | "random" | "parallel" | — | orchestrateMode="sequential" | Arrange child items sequentially, randomly, or in parallel. |
orchestrateDelay | number | — | orchestrateDelay={42} | Interval between arranged child items in milliseconds; does not change each child duration. |
orchestrateOrder | | "visual-row" | "visual-column" | "visual-row-reverse" | "visual-column-reverse" | "dom" | — | orchestrateOrder="visual-row" | Order children by visual rows, visual columns, their reverse orders, or DOM order. |
orchestrateGroup | string | — | orchestrateGroup="Example" | Group identifier distinguishing cooperating children. |
orchestrateTrigger | "appear" | "hover" | "click" | "scroll" | "none" | — | orchestrateTrigger="appear" | Start arrangement on appear, hover, click, or scroll; none disables automatic triggering. |
orchestrateTarget | string | — | orchestrateTarget="Example" | Target selector limiting which children participate. |
styles | Record<string, Record<string, string | number>> | — | styles={stylesOptions} | Cross-Frame style arrangement keyed by target #id; values are style fields, not selectors for arbitrary descendants. |
padding | number | — | padding={42} | Legacy scalar visual field. Prefer padding tokens and public class or style on new pages. |
gap | number | — | gap={42} | Legacy numeric spacing mapped directly to a registered --gap-N token. Prefer the corresponding gap token on new pages. |
radius | number | "full" | — | radius={42} | Legacy scalar radius. Prefer radius tokens or component public radius controls on new pages. |
border | number | — | border={42} | Legacy border field. Prefer border tokens or a component public border control. |
innerBorder | boolean | string | — | innerBorder="Example" | Legacy inner-border field. Prefer public component controls and registered tokens; an inner border may be created without this input. |
fontSize | number | string | — | fontSize="Example" | Legacy font-size field. New pages pair --text-* with --leading-* instead of using size tokens for typography. |
minWidth | number | string | — | minWidth="Example" | Minimum width. Numbers become pixels; strings are CSS values. Prefer tokens or suitable layout expressions in new designs. |
minHeight | number | string | — | minHeight="Example" | Legacy minimum height. Express ordinary page sizing through root style and size tokens rather than unclear scalar parsing. |
width | number | string | — | width="Example" | Width. Numbers become pixels; strings are CSS values. Prefer the component API and tokens in new code. |
height | number | string | — | height="Example" | Legacy height field. Use root style and size tokens for ordinary page layout. |
opacity | number | — | opacity={42} | Root opacity. |