Glass fields
Five frosted glass form fields that keep one layout and vary only the surface: frost, tint, smoke, crystal and depth. Every translucent layer is a color-mix of a semantic token, so the glass follows your theme. Label, control and messages stay wired with htmlFor and aria-describedby.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/field-glassDependencies, the @ai2/tokens theme and the component file are installed together.
Copy the source
components/ui/field-glass.tsx"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { glassDepth } from "@/components/ui/glass"
/* Glass field family: 5 frosted-glass form fields. The layout is the same in every
variant (label + a real input + an optional description); the difference is on
the SURFACE. The glass surface now comes from the glassDepth scale in @ai2/glass
(NO hand-made backdrop-blur, AGENTS.md 4.5): the step gives the surface (blur +
translucency + the ai2 inset signature) and the variant gives the character
(tint, border, gradient). The glass sits on the SHELL; the inner control keeps
its own opaque-ish surface, so text stays readable over the glass and the focus
ring does not collide with the signature. The ids are produced with useId, the
description is bound to the control with aria-describedby, and invalidity falls
back to the standard danger appearance ON THE CONTROL via aria-invalid. Color
comes ONLY from tokens, alpha only via color-mix. Static - no animation. Renders
with no props too.
TRAP: glassDepth carries a [box-shadow:...]; because cn() is tailwind-merge, a
second shadow-* added to the shell silently deletes the signature. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
const gap: Record<StyledSize, string> = {
sm: "gap-1",
md: "gap-1.5",
lg: "gap-2",
xl: "gap-2.5",
}
const labelText: Record<StyledSize, string> = {
sm: "text-xs",
md: "text-sm",
lg: "text-sm",
xl: "text-base",
}
const helpText: Record<StyledSize, string> = {
sm: "text-xs",
md: "text-xs",
lg: "text-sm",
xl: "text-sm",
}
const controlHeight: Record<StyledSize, string> = {
sm: "h-8 text-sm",
md: "h-9 text-sm",
lg: "h-10 text-base",
xl: "h-12 text-base",
}
const shellPad: Record<StyledSize, string> = {
sm: "p-2.5",
md: "p-3",
lg: "p-3.5",
xl: "p-4",
}
/* Kontrol taban stili. Cam yuzeyde de gecersiz gorunum TEK standart. */
const controlBase =
"w-full rounded-md border bg-transparent px-3 py-1 text-foreground outline-none transition-colors placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40"
const DEFAULT_LABEL = "Label"
const DEFAULT_DESCRIPTION = "Short help text for this field."
const DEFAULT_PLACEHOLDER = "Value"
interface FieldProps {
className?: string
size?: StyledSize
label?: React.ReactNode
description?: React.ReactNode
error?: React.ReactNode
placeholder?: string
}
/* Shared shell: a glass panel plus label plus control plus messages. shellClassName carries each variant's blur/fill technique, controlClassName the inner control surface. */
function GlassShell({
className,
size = "md",
label = DEFAULT_LABEL,
description = DEFAULT_DESCRIPTION,
error,
placeholder = DEFAULT_PLACEHOLDER,
shellClassName,
controlClassName,
}: FieldProps & { shellClassName: string; controlClassName: string }) {
const base = React.useId()
const controlId = `${base}-control`
const invalid = error != null && error !== false
const descId = description != null && description !== false ? `${base}-desc` : undefined
const errorId = invalid ? `${base}-error` : undefined
const describedBy = [descId, errorId].filter(Boolean).join(" ") || undefined
return (
<div
data-slot="styled-field"
className={cn("flex w-full max-w-xs flex-col rounded-xl", gap[size], shellPad[size], shellClassName, className)}
>
<label
htmlFor={controlId}
data-slot="styled-field-label"
className={cn("w-fit font-medium leading-none text-foreground select-none", labelText[size])}
>
{label}
</label>
<input
id={controlId}
placeholder={placeholder}
aria-describedby={describedBy}
aria-invalid={invalid ? true : undefined}
className={cn(controlBase, controlHeight[size], controlClassName)}
/>
{description != null && description !== false ? (
<p id={descId} data-slot="styled-field-description" className={cn("leading-snug text-muted-foreground", helpText[size])}>
{description}
</p>
) : null}
{invalid ? (
<p id={errorId} data-slot="styled-field-error" className={cn("font-medium leading-snug text-danger", helpText[size])}>
{error}
</p>
) : null}
</div>
)
}
/* Frost: classic frosted glass. sm (4px) -> the shallowest step in the family; it carries a light foreground fill as its character. */
export function FrostField(props: FieldProps) {
return (
<GlassShell
{...props}
shellClassName={cn(
glassDepth.sm,
"border border-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_5%,transparent)]"
)}
controlClassName="border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_45%,transparent)] focus-visible:border-ring"
/>
)
}
/* Tint: info-toned glass - colored but readable. md (8px) -> the default step; the
hue already carries the character. */
export function TintField(props: FieldProps) {
return (
<GlassShell
{...props}
shellClassName={cn(
glassDepth.md,
"border border-[color-mix(in_oklab,var(--color-info)_22%,transparent)] bg-[color-mix(in_oklab,var(--color-info)_9%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-info)_9%,transparent)]"
)}
controlClassName="border-[color-mix(in_oklab,var(--color-info)_28%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_50%,transparent)] focus-visible:border-primary"
/>
)
}
/* Smoke: dark, smoky glass. lg (16px) -> the "what is behind becomes texture" feel the old blur-xl (24px) was after; we leave xl to Depth and stop at lg so the five separate clearly. Character: a strong foreground scrim. */
export function SmokeField(props: FieldProps) {
return (
<GlassShell
{...props}
shellClassName={cn(
glassDepth.lg,
"border border-[color-mix(in_oklab,var(--color-foreground)_16%,transparent)] bg-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)]"
)}
controlClassName="border-[color-mix(in_oklab,var(--color-foreground)_20%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_35%,transparent)] focus-visible:border-ring"
/>
)
}
/* Crystal: clear glass with a thin bright edge. md (8px) -> the same step as Tint with a different character: a colourless, very low background fill plus a bright border, so it reads as distinct from both Tint and Frost. The hand-written bright-edge inset shadow was REMOVED: the glassDepth signature's top inset highlight is exactly for that job and a second [box-shadow:] would erase the signature. */
export function CrystalField(props: FieldProps) {
return (
<GlassShell
{...props}
shellClassName={cn(
glassDepth.md,
"border border-[color-mix(in_oklab,var(--color-background)_60%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_25%,transparent)] supports-[backdrop-filter]:bg-[color-mix(in_oklab,var(--color-background)_25%,transparent)]"
)}
controlClassName="border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_30%,transparent)] focus-visible:border-ring"
/>
)
}
/* Depth: layered glass - a gradient fill where the area lifts off the surface. xl (24px) -> the "detached layer" feel the old shadow-lg plus blur-lg was after now comes from the maximum diffusion step; shadow-lg was REMOVED because it would erase the signature. Because the gradient carries the character, the step's bg-background/80 fill is deliberately zeroed (otherwise the gradient's alpha is drowned) - the gradient owns the translucency. */
export function DepthField(props: FieldProps) {
return (
<GlassShell
{...props}
shellClassName={cn(
glassDepth.xl,
"border border-[color-mix(in_oklab,var(--color-foreground)_12%,transparent)] bg-transparent supports-[backdrop-filter]:bg-transparent bg-gradient-to-b from-[color-mix(in_oklab,var(--color-background)_55%,transparent)] to-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)]"
)}
controlClassName="border-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)] bg-[color-mix(in_oklab,var(--color-background)_55%,transparent)] shadow-[inset_0_1px_2px_0_color-mix(in_oklab,var(--color-foreground)_10%,transparent)] focus-visible:border-ring"
/>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Frost
The classic frosted panel: a medium blur over a faint fill.
Short help text for this field.
import { FrostField } from "@/components/ui/field-glass"
<FrostField />Short help text for this field.
Short help text for this field.
Short help text for this field.
Short help text for this field.
Tint
A primary-tinted glass that stays readable.
Short help text for this field.
import { TintField } from "@/components/ui/field-glass"
<TintField />Short help text for this field.
Short help text for this field.
Short help text for this field.
Short help text for this field.
Smoke
A darker, smoky panel with a strong blur.
Short help text for this field.
import { SmokeField } from "@/components/ui/field-glass"
<SmokeField />Short help text for this field.
Short help text for this field.
Short help text for this field.
Short help text for this field.
Crystal
Nearly clear, with a light blur and a bright inner edge.
Short help text for this field.
import { CrystalField } from "@/components/ui/field-glass"
<CrystalField />Short help text for this field.
Short help text for this field.
Short help text for this field.
Short help text for this field.
Depth
A layered gradient panel with a shadow, lifting off the page.
Short help text for this field.
import { DepthField } from "@/components/ui/field-glass"
<DepthField />Short help text for this field.
Short help text for this field.
Short help text for this field.
Short help text for this field.
ai2 Glass fields: 5 styled variations on the token system
The ai2 Glass fields are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around frosted glass surfaces behind a form field. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: these are static surfaces; no motion library work is required. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, there is no motion to reduce.
What is in the ai2 Glass fields?
5 exports in one file: Frost, Tint, Smoke, Crystal and Depth. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: these are static surfaces; no motion library work is required.
- Reduced-motion aware: Under prefers-reduced-motion, there is no motion to reduce.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Glass fields sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.