@farcaster/snap 1.18.0 → 1.20.0

package/dist/react-native/v2/snap-view.js

@@ -50,32 +50,36 @@ export function SnapViewV2({ snap, handlers, loading = false, appearance = "dark
     return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }));
 }
 // ─── SnapCardV2 (card frame + height limits) ─────────
-function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, appearance, }) {
+function SnapCardV2Inner({ snap, handlers, loading, borderRadius, showOverflowWarning, onValidationError, validationErrorFallback, actionError, appearance, plain, }) {
     const { colors } = useSnapTheme();
-    const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
-    return (_jsxs(_Fragment, { children: [_jsx(View, { style: cardStyles.frameRing, children: _jsxs(View, { style: [
-                        cardStyles.card,
-                        {
-                            borderRadius,
-                            maxHeight,
-                            borderColor: colors.border,
-                            backgroundColor: colors.surface,
-                        },
-                    ], children: [_jsx(View, { style: cardStyles.body, children: _jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }) }), showOverflowWarning && (_jsxs(View, { style: cardStyles.warningOverlay, children: [_jsx(View, { style: cardStyles.warningLine }), _jsx(View, { style: cardStyles.warningLabel, children: _jsxs(Text, { style: cardStyles.warningLabelText, children: [SNAP_MAX_HEIGHT, "px"] }) })] }))] }) }), actionError && (_jsx(Text, { style: [
-                    cardStyles.actionError,
-                    {
-                        color: appearance === "dark"
-                            ? "rgba(255,100,100,0.9)"
-                            : "rgba(200,0,0,0.8)",
-                    },
-                ], children: actionError }))] }));
+    const clipHeight = showOverflowWarning ? undefined : SNAP_MAX_HEIGHT;
+    const content = (_jsx(SnapViewV2Inner, { snap: snap, handlers: handlers, loading: loading, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback }));
+    if (plain) {
+        return content;
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(View, { style: {
+                    borderRadius,
+                    borderWidth: 1,
+                    borderColor: colors.border,
+                    backgroundColor: colors.surface,
+                    maxHeight: clipHeight,
+                    overflow: "hidden",
+                    minHeight: 120,
+                }, children: [_jsx(View, { style: { paddingHorizontal: 16, paddingVertical: 16 }, children: content }), showOverflowWarning && (_jsxs(View, { style: { position: "absolute", top: SNAP_MAX_HEIGHT, left: 0, right: 0, bottom: 0, zIndex: 10, pointerEvents: "none" }, children: [_jsx(View, { style: { height: 1, borderTopWidth: 1, borderStyle: "dashed", borderColor: "rgba(255,100,100,0.6)" } }), _jsx(View, { style: { position: "absolute", top: -10, right: 4, backgroundColor: "rgba(0,0,0,0.7)", paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3 }, children: _jsxs(Text, { style: { fontSize: 10, color: "rgba(255,100,100,0.7)", fontFamily: Platform.select({ ios: "Menlo", default: "monospace" }) }, children: [SNAP_MAX_HEIGHT, "px"] }) }), _jsx(View, { style: { flex: 1, backgroundColor: "rgba(255,50,50,0.15)" } })] }))] }), actionError && (_jsx(Text, { style: {
+                    paddingHorizontal: 12,
+                    paddingVertical: 8,
+                    fontSize: 13,
+                    color: appearance === "dark"
+                        ? "rgba(255,100,100,0.9)"
+                        : "rgba(200,0,0,0.8)",
+                }, children: actionError }))] }));
 }
-export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, }) {
-    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV2Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, appearance: appearance }) }));
+export function SnapCardV2({ snap, handlers, loading = false, appearance = "dark", colors, borderRadius = 16, showOverflowWarning = false, onValidationError, validationErrorFallback, actionError, plain = false, }) {
+    return (_jsx(SnapThemeProvider, { appearance: appearance, colors: colors, children: _jsx(SnapCardV2Inner, { snap: snap, handlers: handlers, loading: loading, borderRadius: borderRadius, showOverflowWarning: showOverflowWarning, onValidationError: onValidationError, validationErrorFallback: validationErrorFallback, actionError: actionError, appearance: appearance, plain: plain }) }));
 }
 const cardStyles = StyleSheet.create({
     frameRing: { alignSelf: "stretch" },
-    card: { overflow: "hidden", borderWidth: 1, minHeight: 120 },
+    card: { borderWidth: 1, minHeight: 120, overflow: "hidden" },
     body: { paddingHorizontal: 16, paddingVertical: 16 },
     actionError: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 13 },
     warningOverlay: {

package/dist/ui/catalog.d.ts

@@ -295,6 +295,7 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
                 step: z.ZodOptional<z.ZodNumber>;
                 defaultValue: z.ZodOptional<z.ZodNumber>;
                 label: z.ZodOptional<z.ZodString>;
+                showValue: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
             description: string;
         };
@@ -417,7 +418,6 @@ export declare const snapJsonRenderCatalog: import("@json-render/core").Catalog<
             description: string;
             params: z.ZodObject<{
                 target: z.ZodString;
-                isSnap: z.ZodOptional<z.ZodBoolean>;
             }, z.core.$strip>;
         };
         open_mini_app: {

package/dist/ui/catalog.js

@@ -99,10 +99,9 @@ export const snapJsonRenderCatalog = defineCatalog(snapJsonRenderSchema, {
             params: z.object({ target: z.string() }),
         },
         open_url: {
-            description: "Open target snap or external URL.",
+            description: "Open URL in browser.",
             params: z.object({
                 target: z.string(),
-                isSnap: z.boolean().optional(),
             }),
         },
         open_mini_app: {

package/dist/ui/slider.d.ts

@@ -9,5 +9,6 @@ export declare const sliderProps: z.ZodObject<{
     step: z.ZodOptional<z.ZodNumber>;
     defaultValue: z.ZodOptional<z.ZodNumber>;
     label: z.ZodOptional<z.ZodString>;
+    showValue: z.ZodOptional<z.ZodBoolean>;
 }, z.core.$strip>;
 export type SliderProps = z.infer<typeof sliderProps>;

package/dist/ui/slider.js

@@ -10,6 +10,8 @@ export const sliderProps = z
     step: z.number().optional(),
     defaultValue: z.number().optional(),
     label: z.string().max(SLIDER_MAX_LABEL_CHARS).optional(),
+    /** When true, display the current value next to the label. */
+    showValue: z.boolean().optional(),
 })
     .superRefine((val, ctx) => {
     if (val.min > val.max) {

package/llms.txt

@@ -134,6 +134,7 @@ Field values are sent in POST `inputs[name]` when a `submit` action fires.
 - `step` (number, optional, > 0. Default: 1)
 - `defaultValue` (number, optional, between min and max)
 - `label` (string, optional, max 60)
+- `showValue` (boolean, optional): display the current value next to the label
 - POST value: number
 
 **switch** — Boolean toggle.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farcaster/snap",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "Farcaster Snaps 🫰",
   "repository": {
     "type": "git",

package/src/react/components/slider.tsx

@@ -16,6 +16,7 @@ export function SnapSlider({
   const max = Number(props.max ?? 100);
   const step = Number(props.step ?? 1);
   const label = props.label ? String(props.label) : undefined;
+  const showValue = props.showValue === true;
   const path = `/inputs/${name}`;
   const raw = get(path);
   const value =
@@ -27,7 +28,16 @@ export function SnapSlider({
 
   return (
     <div className="flex w-full flex-col gap-1.5">
-      {label && <Label style={{ color: colors.text }}>{label}</Label>}
+      {label && (
+        <div className="flex items-center justify-between">
+          <Label style={{ color: colors.text }}>{label}</Label>
+          {showValue && (
+            <span style={{ color: colors.textMuted, fontSize: 13, lineHeight: "18px" }}>
+              {Math.round(value)}
+            </span>
+          )}
+        </div>
+      )}
       <input
         type="range"
         min={min}

package/src/react/index.tsx

@@ -57,6 +57,7 @@ export function SnapCard({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -69,6 +70,8 @@ export function SnapCard({
   validationErrorFallback?: ReactNode;
   /** Server-side action error message to display inline. */
   actionError?: string | null;
+  /** When true, renders without card frame (no border, background, or padding). */
+  plain?: boolean;
 }) {
   if (snap.version === SPEC_VERSION_2) {
     return (
@@ -82,6 +85,7 @@ export function SnapCard({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
+        plain={plain}
       />
     );
   }
@@ -94,6 +98,7 @@ export function SnapCard({
       appearance={appearance}
       maxWidth={maxWidth}
       actionError={actionError}
+      plain={plain}
     />
   );
 }

package/src/react/v1/snap-view.tsx

@@ -1,8 +1,11 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import { SnapViewCore } from "../snap-view-core";
 import type { SnapPage, SnapActionHandlers } from "../index";
 
+const SNAP_MAX_HEIGHT = 500;
+
 export function SnapViewV1({
   snap,
   handlers,
@@ -31,6 +34,7 @@ export function SnapCardV1({
   appearance = "dark",
   maxWidth = 480,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -38,15 +42,121 @@ export function SnapCardV1({
   appearance?: "light" | "dark";
   maxWidth?: number;
   actionError?: string | null;
+  plain?: boolean;
 }) {
+  const isDark = appearance === "dark";
+  const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
+  const toggleBg = isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)";
+  const toggleBgHover = isDark
+    ? "rgba(255,255,255,0.1)"
+    : "rgba(0,0,0,0.08)";
+  const toggleText = isDark ? "rgba(255,255,255,0.82)" : "rgba(0,0,0,0.72)";
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [isExpandable, setIsExpandable] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [snap]);
+
+  useEffect(() => {
+    const node = contentRef.current;
+    if (!node) return;
+
+    const measure = () => {
+      setIsExpandable(node.scrollHeight > SNAP_MAX_HEIGHT + 1);
+    };
+
+    measure();
+
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [snap, plain]);
+
+  useEffect(() => {
+    if (!isExpandable) {
+      setIsExpanded(false);
+    }
+  }, [isExpandable]);
+
+  const isClipped = isExpandable && !isExpanded;
+
   return (
-    <div style={{ position: "relative", width: "100%", maxWidth }}>
-      <SnapViewV1
-        snap={snap}
-        handlers={handlers}
-        loading={loading}
-        appearance={appearance}
-      />
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        maxWidth,
+        overflow: "hidden",
+        ...(plain ? {} : {
+          borderRadius: 16,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: surfaceBg,
+        }),
+      }}
+    >
+      <div
+        style={
+          isClipped
+            ? {
+                maxHeight: SNAP_MAX_HEIGHT,
+                overflow: "hidden",
+              }
+            : undefined
+        }
+      >
+        <div ref={contentRef} style={plain ? undefined : { padding: 16 }}>
+          <SnapViewV1
+            snap={snap}
+            handlers={handlers}
+            loading={loading}
+            appearance={appearance}
+          />
+        </div>
+      </div>
+      {isExpandable ? (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            padding: plain ? "8px 0 0" : "10px 16px 12px",
+            ...(plain
+              ? {}
+              : { borderTop: `1px solid ${borderColor}` }),
+          }}
+        >
+          <button
+            type="button"
+            aria-expanded={isExpanded}
+            onClick={() => setIsExpanded((value) => !value)}
+            style={{
+              appearance: "none",
+              border: "none",
+              borderRadius: 9999,
+              backgroundColor: toggleBg,
+              color: toggleText,
+              padding: "6px 10px",
+              fontSize: 13,
+              lineHeight: "18px",
+              fontWeight: 600,
+              cursor: "pointer",
+            }}
+            onMouseEnter={(event) => {
+              event.currentTarget.style.backgroundColor = toggleBgHover;
+            }}
+            onMouseLeave={(event) => {
+              event.currentTarget.style.backgroundColor = toggleBg;
+            }}
+          >
+            {isExpanded ? "Show less" : "Show more"}
+          </button>
+        </div>
+      ) : null}
       {actionError && (
         <div
           style={{

package/src/react/v2/snap-view.tsx

@@ -95,6 +95,7 @@ export function SnapCardV2({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -105,9 +106,13 @@ export function SnapCardV2({
   onValidationError?: (result: ValidationResult) => void;
   validationErrorFallback?: ReactNode;
   actionError?: string | null;
+  plain?: boolean;
 }) {
   const maxHeight = showOverflowWarning ? SNAP_WARNING_HEIGHT : SNAP_MAX_HEIGHT;
-  const bg = appearance === "dark" ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+  const isDark = appearance === "dark";
+  const bg = isDark ? "rgba(0,0,0,0.85)" : "rgba(255,255,255,0.9)";
+  const borderColor = isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)";
+  const surfaceBg = isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.02)";
 
   return (
     <>
@@ -118,8 +123,14 @@ export function SnapCardV2({
         maxWidth,
         maxHeight,
         overflow: "hidden",
+        ...(plain ? {} : {
+          borderRadius: 16,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: surfaceBg,
+        }),
       }}
     >
+      <div style={plain ? undefined : { padding: 16 }}>
       <SnapViewV2
         snap={snap}
         handlers={handlers}
@@ -128,6 +139,7 @@ export function SnapCardV2({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
       />
+      </div>
       {showOverflowWarning && (
         <div
           style={{

package/src/react-native/components/snap-action-button.tsx

@@ -65,7 +65,7 @@ export function SnapActionButton({
               return <I size={16} color={iconColor} />;
             })()
           : null}
-        <Text style={{ color: textColor, fontSize: 14, fontWeight: "600" }}>
+        <Text style={{ color: textColor, fontSize: 14, lineHeight: 18, fontWeight: "600" }}>
           {label}
         </Text>
         {showExternalIcon ? (
@@ -77,7 +77,7 @@ export function SnapActionButton({
 }
 
 const styles = StyleSheet.create({
-  outer: { flex: 1, minWidth: 0 },
+  outer: { minWidth: 0 },
   btn: {
     paddingHorizontal: 16,
     borderRadius: 10,

package/src/react-native/components/snap-badge.tsx

@@ -13,7 +13,7 @@ export function SnapBadge({
   const iconName = props.icon ? String(props.icon) : undefined;
   const isAccent = !color || color === "accent";
   const resolvedColor = isAccent ? accentHex : hex(color);
-  const isFilled = variant === "default";
+  const isFilled = variant !== "outline";
 
   const Icon = iconName ? ICON_MAP[iconName] : undefined;
 
@@ -54,6 +54,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 12,
+    lineHeight: 16,
     fontWeight: "500",
   },
 });

package/src/react-native/components/snap-bar-chart.tsx

@@ -64,10 +64,10 @@ export function SnapBarChart({
 }
 
 const styles = StyleSheet.create({
-  wrap: { flex: 1, width: "100%", gap: 8 },
+  wrap: { width: "100%", gap: 8 },
   row: { flexDirection: "row", alignItems: "center", gap: 8 },
-  label: { width: 80, fontSize: 12, textAlign: "right" },
+  label: { width: 80, fontSize: 12, lineHeight: 16, textAlign: "right" },
   track: { flex: 1, height: 10, borderRadius: 9999, overflow: "hidden" },
   fill: { height: "100%", borderRadius: 9999 },
-  value: { width: 32, fontSize: 12, fontVariant: ["tabular-nums"] },
+  value: { width: 32, fontSize: 12, lineHeight: 16, fontVariant: ["tabular-nums"] },
 });

package/src/react-native/components/snap-cell-grid.tsx

@@ -147,6 +147,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
-  cellText: { fontSize: 12, fontWeight: "600" },
+  cellText: { fontSize: 12, lineHeight: 16, fontWeight: "600" },
   selectionText: { fontSize: 11, fontFamily: "monospace", marginTop: 6 },
 });

package/src/react-native/components/snap-image.tsx

@@ -29,7 +29,6 @@ export function SnapImage({
 
 const styles = StyleSheet.create({
   frame: {
-    flex: 1,
     width: "100%",
     borderRadius: 8,
     overflow: "hidden",

package/src/react-native/components/snap-input.tsx

@@ -46,12 +46,13 @@ export function SnapInput({
 
 const styles = StyleSheet.create({
   wrap: { width: "100%", gap: 4 },
-  label: { fontSize: 13, fontWeight: "500" },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
   input: {
     borderWidth: 1,
     borderRadius: 8,
     paddingHorizontal: 12,
     paddingVertical: 10,
     fontSize: 14,
+    lineHeight: 18,
   },
 });

package/src/react-native/components/snap-item.tsx

@@ -14,12 +14,12 @@ export function SnapItem({
     : undefined;
   const variant = String(props.variant ?? "default");
 
-  const containerVariant = { paddingVertical: 8, paddingHorizontal: 10 };
+  const containerVariant = { paddingVertical: 6, paddingHorizontal: 10 };
 
   return (
     <View style={[styles.container, containerVariant]}>
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.text }]}>{title}</Text>
+        {title ? <Text style={[styles.title, { color: colors.text }]}>{title}</Text> : null}
         {description ? (
           <Text style={[styles.description, { color: colors.textSecondary }]}>
             {description}
@@ -37,7 +37,6 @@ export function SnapItem({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     flexDirection: "row",
     alignItems: "center",
   },
@@ -46,10 +45,12 @@ const styles = StyleSheet.create({
   },
   title: {
     fontSize: 15,
+    lineHeight: 20,
     fontWeight: "500",
   },
   description: {
     fontSize: 13,
+    lineHeight: 18,
     marginTop: 1,
   },
   actions: {

package/src/react-native/components/snap-progress.tsx

@@ -26,8 +26,8 @@ export function SnapProgress({
 }
 
 const styles = StyleSheet.create({
-  wrap: { flex: 1, width: "100%", gap: 4 },
-  label: { fontSize: 13 },
+  wrap: { width: "100%", gap: 4 },
+  label: { fontSize: 13, lineHeight: 18 },
   track: {
     height: 10,
     borderRadius: 9999,

package/src/react-native/components/snap-slider.tsx

@@ -26,6 +26,7 @@ export function SnapSlider({
     : fallback;
 
   const label = props.label != null ? String(props.label) : null;
+  const showValue = props.showValue === true;
   const minLabel = props.minLabel != null ? String(props.minLabel) : null;
   const maxLabel = props.maxLabel != null ? String(props.maxLabel) : null;
 
@@ -34,9 +35,11 @@ export function SnapSlider({
       {label ? (
         <View style={styles.labelRow}>
           <Text style={[styles.label, { color: colors.text }]}>{label}</Text>
-          <Text style={[styles.valueText, { color: colors.textSecondary }]}>
-            {String(Math.round(clamped))}
-          </Text>
+          {showValue && (
+            <Text style={[styles.valueText, { color: colors.textSecondary }]}>
+              {String(Math.round(clamped))}
+            </Text>
+          )}
         </View>
       ) : null}
       <Slider
@@ -65,18 +68,18 @@ export function SnapSlider({
 }
 
 const styles = StyleSheet.create({
-  wrap: { width: "100%", gap: 6 },
+  wrap: { width: "100%", gap: 2 },
   labelRow: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
   },
-  label: { fontSize: 13, fontWeight: "500", flex: 1 },
-  valueText: { fontSize: 13 },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500", flex: 1 },
+  valueText: { fontSize: 13, lineHeight: 18 },
   slider: { width: "100%", height: 40 },
   minMaxRow: {
     flexDirection: "row",
     justifyContent: "space-between",
   },
-  minMax: { fontSize: 12 },
+  minMax: { fontSize: 12, lineHeight: 16 },
 });

package/src/react-native/components/snap-switch.tsx

@@ -39,6 +39,7 @@ const styles = StyleSheet.create({
   },
   label: {
     fontSize: 14,
+    lineHeight: 18,
     fontWeight: "400",
     flex: 1,
   },

package/src/react-native/components/snap-text.tsx

@@ -4,7 +4,7 @@ import { useSnapTheme } from "../theme";
 
 const SIZE_STYLES: Record<string, { fontSize: number; lineHeight?: number; fontWeight?: "400" | "500" | "600" | "700" }> = {
   md: { fontSize: 16, lineHeight: 24 },
-  sm: { fontSize: 13 },
+  sm: { fontSize: 13, lineHeight: 18 },
 };
 
 const WEIGHT_MAP: Record<string, "400" | "500" | "600" | "700"> = {
@@ -46,6 +46,6 @@ export function SnapText({
 }
 
 const styles = StyleSheet.create({
-  wrap: { flex: 1, width: "100%" },
+  wrap: { width: "100%" },
   base: {},
 });

package/src/react-native/components/snap-toggle-group.tsx

@@ -97,7 +97,7 @@ export function SnapToggleGroup({
 
 const styles = StyleSheet.create({
   wrap: { width: "100%", gap: 6 },
-  label: { fontSize: 13, fontWeight: "500" },
+  label: { fontSize: 13, lineHeight: 18, fontWeight: "500" },
   group: {
     padding: 4,
     borderRadius: 8,
@@ -121,6 +121,7 @@ const styles = StyleSheet.create({
   },
   optionText: {
     fontSize: 13,
+    lineHeight: 18,
     fontWeight: "500",
   },
 });

package/src/react-native/index.tsx

@@ -30,6 +30,7 @@ export function SnapCard({
   onValidationError,
   validationErrorFallback,
   actionError,
+  plain = false,
 }: {
   snap: SnapPage;
   handlers: SnapActionHandlers;
@@ -46,6 +47,8 @@ export function SnapCard({
   validationErrorFallback?: ReactNode;
   /** Server-side action error message to display inline. */
   actionError?: string | null;
+  /** When true, renders without card frame (no border, background, or padding). */
+  plain?: boolean;
 }) {
   if (snap.version === SPEC_VERSION_2) {
     return (
@@ -60,6 +63,7 @@ export function SnapCard({
         onValidationError={onValidationError}
         validationErrorFallback={validationErrorFallback}
         actionError={actionError}
+        plain={plain}
       />
     );
   }
@@ -73,6 +77,7 @@ export function SnapCard({
       colors={colors}
       borderRadius={borderRadius}
       actionError={actionError}
+      plain={plain}
     />
   );
 }