Frosted UI

https://github.com/whopio/frosted-ui
Admin
Frosted UI is a design system used by Whop, providing a set of components and styles for building...
Tokens:52,705
Snippets:555
Trust Score:8.8
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Frosted UI Icons

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/README.md

Install the package via npm.

```bash
npm install @frosted-ui/icons
```

--------------------------------

### Install dependencies

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/scripts/emoji-colors/README.md

Run this command to ensure all required packages for the generation script are installed.

```bash
pnpm install
```

--------------------------------

### Install Frosted UI

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/README.md

Use the package manager to add the library to your project.

```sh
$ pnpm add frosted-ui
```

--------------------------------

### Run the development server

Source: https://github.com/whopio/frosted-ui/blob/main/apps/tailwind/README.md

Execute this command in the terminal to start the local development server.

```bash
yarn dev
```

--------------------------------

### Running Storybook locally

Source: https://github.com/whopio/frosted-ui/blob/main/CONTRIBUTING.md

Starts the Storybook development server for the frosted-ui package.

```bash
pnpm --filter="frosted-ui" storybook
```

--------------------------------

### Install peer dependencies

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Commands to install required peer dependencies for the library.

```bash
npm install react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
yarn add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
# or
pnpm add react react-native react-native-reanimated react-native-safe-area-context react-native-screens react-native-svg lucide-react-native
```

--------------------------------

### Install package dependencies

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Commands to install the core package using npm, yarn, or pnpm.

```bash
npm install @frosted-ui/react-native
# or
yarn add @frosted-ui/react-native
# or
pnpm add @frosted-ui/react-native
```

--------------------------------

### Basic component usage

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Example of wrapping an application with ThemeProvider and using a Button component.

```tsx
import { Button, Text, ThemeProvider } from '@frosted-ui/react-native';

export default function App() {
  return (
    <ThemeProvider>
      <Button variant="surface" size="2">
        <Text>Hello World</Text>
      </Button>
    </ThemeProvider>
  );
}
```

--------------------------------

### Background Color Usage

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Examples for applying background colors using steps 1 and 2 for app backgrounds and subtle component tints.

```typescript
// Main app background
backgroundColor: colors.background; // Uses white in light mode and gray['1'] in dark mode

// Subtle colored background for a section
backgroundColor: gray['2']; // or palette['2']

// Card with subtle tint
backgroundColor: palette.a2;
```

--------------------------------

### Border and Separator Styling

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Examples for applying borders and separators using steps 6, 7, and 8 for interactive and non-interactive elements.

```typescript
// Non-interactive card border - use the stroke token
borderColor: colors.stroke;

// Interactive input border
borderColor: isFocused ? palette.a8 : isHovered ? gray.a7 : colors.stroke;

// Separator/divider - use the stroke token
backgroundColor: colors.stroke;

// Focus ring (accessibility critical!)
outlineColor: palette.a8;
```

--------------------------------

### Pictogram Usage Example

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/CONTRIBUTING.md

Example of how to use a generated pictogram component in React.

```jsx
<ConePictogram variant="dark" />
```

--------------------------------

### Component Background States

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Examples for managing interactive component backgrounds using steps 3, 4, and 5 for default, hover, and selected states.

```typescript
// Interactive list item
const listItemStyle = {
  backgroundColor: isSelected
    ? palette.a5 // Selected
    : isHovered
      ? palette.a4 // Hover
      : palette.a3, // Default
};

// If component has transparent default state, use 3 for hover
const ghostButtonHover = {
  backgroundColor: isHovered ? palette.a3 : 'transparent',
};
```

--------------------------------

### Frosted UI App Structure Template

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/README.md

Basic setup for a React Native application using the ThemeProvider and PortalHost from Frosted UI.

```tsx
import { ThemeProvider, PortalHost } from '@frosted-ui/react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider accentColor="blue">
        {/* Your app content */}
        <PortalHost />
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}
```

--------------------------------

### Build and Develop the Plugin

Source: https://github.com/whopio/frosted-ui/blob/main/packages/figma-icon-sync-plugin/README.md

Commands to build the plugin for production or run it in development mode.

```bash
pnpm --filter="@frosted-ui/figma-icon-sync-plugin" build
# or, while iterating:
pnpm --filter="@frosted-ui/figma-icon-sync-plugin" dev
```

--------------------------------

### Create a Settings List

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Demonstrates a settings menu using List.Item with Switch and Checkbox components. Use List.Separator to divide distinct setting groups.

```tsx
<List.Root>
  {/* Switch setting */}
  <List.Item>
    <List.ItemSlot>
      <View style={iconBoxStyle}>
        <Icon as={Bell} size={20} color={colors.palettes.blue.a11} />
      </View>
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Notifications</List.ItemTitle>
    </List.ItemContent>
    <List.ItemSlot>
      <Switch checked={enabled} onCheckedChange={setEnabled} />
    </List.ItemSlot>
  </List.Item>

  <List.Separator />

  {/* Pressable setting with checkbox */}
  <List.Item onPress={() => setDarkMode(!darkMode)}>
    <List.ItemSlot>
      <View style={iconBoxStyle}>
        <Icon as={Settings} size={20} color={colors.palettes.purple.a11} />
      </View>
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Dark Mode</List.ItemTitle>
    </List.ItemContent>
    <List.ItemSlot>
      <Checkbox checked={darkMode} onCheckedChange={setDarkMode} />
    </List.ItemSlot>
  </List.Item>
</List.Root>
```

--------------------------------

### Get Emoji Color Helper

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/scripts/emoji-colors/IMPLEMENTATION.md

Directly retrieve a color string for a specific emoji using the helper function.

```tsx
import { getColorForEmoji } from 'frosted-ui';

const color = getColorForEmoji('🎨'); // Returns: 'brown'
```

--------------------------------

### Build color assets

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-native-colors/README.md

Run this command to update the color assets and generate a new zip file.

```bash
pnpm build
```

--------------------------------

### Implement ContextMenu

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Create a long-press or right-click menu. ContextMenu.Item children should be plain text.

```tsx
<ContextMenu.Root>
  <ContextMenu.Trigger>
    <Card>
      <Text>Long press me</Text>
    </Card>
  </ContextMenu.Trigger>
  <ContextMenu.Content>
    <ContextMenu.Item onSelect={() => handleAction()}>Action</ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>
```

--------------------------------

### Implement a leaderboard list

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Construct a leaderboard using List.Root with conditional styling for user entries and custom item slots.

```tsx
<List.Root variant="soft">
  {entries.map((entry, index) => (
    <React.Fragment key={entry.rank}>
      {index > 0 && <List.Separator />}
      <List.Item style={entry.isUser ? { backgroundColor: colors.palettes.gray.a3 } : undefined}>
        <List.ItemSlot>
          <Text size="2" weight="bold" style={{ width: 24, textAlign: 'center' }}>
            {entry.rank}
          </Text>
        </List.ItemSlot>
        <List.ItemSlot>
          <Avatar fallback={entry.avatar} size="2" color={entry.color} />
        </List.ItemSlot>
        <List.ItemContent>
          <Text weight={entry.isUser ? 'bold' : 'medium'}>{entry.name}</Text>
        </List.ItemContent>
        <List.ItemSlot>
          <Text weight="medium" color={entry.color}>
            {entry.points.toLocaleString()} pts
          </Text>
        </List.ItemSlot>
      </List.Item>
    </React.Fragment>
  ))}
</List.Root>
```

--------------------------------

### Implement a Basic List with Slots

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Uses List.Root and List.Item to render a collection of items with avatars, badges, and icons. Requires mapping over data and using List.Separator for spacing.

```tsx
<List.Root>
  {users.map((user, index) => (
    <React.Fragment key={user.id}>
      {index > 0 && <List.Separator />}
      <List.Item onPress={() => {}}>
        <List.ItemSlot>
          <Avatar fallback={user.name} size="3" />
        </List.ItemSlot>
        <List.ItemContent>
          <List.ItemTitle>{user.name}</List.ItemTitle>
          <List.ItemDescription>{user.email}</List.ItemDescription>
        </List.ItemContent>
        <List.ItemSlot>
          <Badge color={user.status === 'Active' ? 'success' : 'warning'} size="1">
            <Text>{user.status}</Text>
          </Badge>
        </List.ItemSlot>
        <List.ItemSlot>
          <Icon as={ChevronRight} size={16} color={colors.palettes.gray.a8} />
        </List.ItemSlot>
      </List.Item>
    </React.Fragment>
  ))}
</List.Root>
```

--------------------------------

### Apply Solid Backgrounds

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Use step 9 for primary solid backgrounds and step 10 for hover states.

```typescript
// Solid button
const solidButtonStyle = {
  backgroundColor: isPressed
    ? palette['10'] // with brightness filter
    : isHovered
      ? palette['10']
      : palette['9'],
};

// Progress bar indicator
backgroundColor: palette['9'];

// Checkbox when checked
backgroundColor: palette['9'];
```

--------------------------------

### Implement DropdownMenu

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Create a menu triggered by a button press. DropdownMenu.Item children should be plain text.

```tsx
<DropdownMenu.Root>
  <DropdownMenu.Trigger>
    <Button>
      <Text>Actions</Text>
    </Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content align="end">
    <DropdownMenu.Item onSelect={() => handleEdit()}>Edit</DropdownMenu.Item>
    <DropdownMenu.Item onSelect={() => handleDuplicate()}>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item onSelect={() => handleDelete()} color="danger">
      Delete
    </DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu.Root>
```

--------------------------------

### Frosted UI Documentation File Structure

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/README.md

Displays the directory structure of the Frosted UI documentation files within the node_modules package.

```text
node_modules/@frosted-ui/react-native/docs/llm/
├── README.md           # This file (start here)
├── COLOR_SYSTEM.md     # Color palettes, shades, variants
├── TYPOGRAPHY.md       # Text scale, font weights, components
├── COMPONENTS.md       # Full component API reference
└── DESIGN_PATTERNS.md  # UX patterns, layout composition
```

--------------------------------

### Run generate-icon-lib CLI

Source: https://github.com/whopio/frosted-ui/blob/main/packages/generate-icon-lib/README.md

Execute the CLI tool to pull assets from a Figma file, specifying the file key and asset type.

```shell
generate-icon-lib [--file=<figma-file-key>] [--type=icons|pictograms]
```

--------------------------------

### Skeleton

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Loading placeholder components that match the dimensions of actual UI elements.

```APIDOC
## Skeleton Components

### Skeleton.Avatar
- **Props**: size ('0'-'9'), shape
- **Description**: Matches Avatar dimensions exactly.

### Skeleton.Text
- **Props**: size ('0'-'9')
- **Description**: Matches Text/Heading line height.

### Skeleton.Rect
- **Props**: style
- **Description**: For custom shapes with defined dimensions.
```

--------------------------------

### Using the Link component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/TYPOGRAPHY.md

Demonstrates basic usage, inline text integration, color customization, underline behavior, and font styling for the Link component.

```tsx
import { Link, Text } from '@frosted-ui/react-native';

// Basic link
<Link onPress={() => navigation.navigate('Terms')}>Terms of Service</Link>

// Inline within text
<Text>
  By signing up, you agree to our <Link onPress={() => {}}>Terms</Link> and{' '}
  <Link onPress={() => {}}>Privacy Policy</Link>.
</Text>

// With color
<Link color="blue" onPress={() => {}}>Documentation</Link>
<Link color="danger" onPress={() => {}}>Delete account</Link>

// Underline options
<Link underline="always" onPress={() => {}}>Always underlined</Link>
<Link underline="auto" onPress={() => {}}>Underlined on press</Link>

// Sizes and weights
<Link size="2" weight="medium" onPress={() => {}}>Medium link</Link>
```

--------------------------------

### Linting the project

Source: https://github.com/whopio/frosted-ui/blob/main/CONTRIBUTING.md

Executes the linting process across the codebase using pnpm.

```bash
pnpm lint
```

--------------------------------

### Configuring ThemeProvider

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Wrap the application root with ThemeProvider to customize semantic color defaults.

```tsx
<ThemeProvider
  accentColor="purple" // Default: 'blue'
  dangerColor="tomato" // Default: 'red' (must be: tomato | red | ruby)
  warningColor="yellow" // Default: 'amber' (must be: yellow | amber)
  successColor="teal" // Default: 'green' (must be: teal | jade | green | grass)
  infoColor="blue" // Default: 'sky' (must be: blue | sky)
>
  <App />
</ThemeProvider>
```

--------------------------------

### Implement Skeleton.Text component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Creates a loading placeholder that aligns with Text or Heading components using the same size scale.

```tsx
{/* These align perfectly when swapped */}
<Text size="2">Loading complete</Text>
<Skeleton.Text size="2" />

{/* Match a Heading */}
<Heading size="6">Page Title</Heading>
<Skeleton.Text size="6" />
```

--------------------------------

### Implement Feature Showcase

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Displays a list of features using cards with icons and descriptive text.

```tsx
const features = [
  { icon: Zap, title: 'Lightning Fast', description: 'Sub-100ms response times', color: 'amber' },
  { icon: Users, title: 'Team Collaboration', description: 'Real-time sync', color: 'blue' },
  { icon: Sparkles, title: 'AI Powered', description: 'Smart suggestions', color: 'purple' },
];

<View style={{ gap: 12 }}>
  {features.map((feature) => (
    <Card key={feature.title} variant="soft">
      <View style={{ flexDirection: 'row', gap: 16 }}>
        <View
          style={{
            width: 48,
            height: 48,
            borderRadius: 12,
            backgroundColor: colors.palettes[feature.color].a3,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Icon as={feature.icon} size={24} color={colors.palettes[feature.color].a11} />
        </View>
        <View style={{ flex: 1, gap: 4 }}>
          <Text weight="medium">{feature.title}</Text>
          <Text size="2" color="gray">
            {feature.description}
          </Text>
        </View>
      </View>
    </Card>
  ))}
</View>;
```

--------------------------------

### Apply Text and Icon Colors

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Use steps 11 and 12 for text contrast levels, with 12 being primary and 11 being secondary.

```typescript
// Primary text (high contrast)
color: gray['12'];

// Secondary text (lower contrast but still accessible)
color: gray['11']; // or gray.a11

// Tertiary text
color: gray['10']; // or gray.a10

// Colored text that's accessible
color: palette['11']; // or palette.a11

// Icon color (matches low-contrast text)
color: palette.a11;
```

--------------------------------

### Basic List Implementation

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

A standard list structure using List.Root, List.Item, and various slots for icons, avatars, and badges.

```tsx
<List.Root variant="surface">
  <List.Item onPress={() => {}}>
    <List.ItemSlot>
      <Icon as={Bell} size={20} />
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>Notifications</List.ItemTitle>
      <List.ItemDescription>Manage alerts and sounds</List.ItemDescription>
    </List.ItemContent>
    <List.ItemSlot>
      <Icon as={ChevronRight} size={16} />
    </List.ItemSlot>
  </List.Item>
  <List.Separator />
  <List.Item onPress={() => {}}>
    <List.ItemSlot>
      <Avatar fallback="JD" size="3" />
    </List.ItemSlot>
    <List.ItemContent>
      <List.ItemTitle>John Doe</List.ItemTitle>
      <List.ItemDescription>john@example.com</List.ItemDescription>
    </List.ItemContent>
    <List.ItemSlot>
      <Badge color="success" size="1">
        <Text>Active</Text>
      </Badge>
    </List.ItemSlot>
  </List.Item>
</List.Root>
```

--------------------------------

### Recommended Component Usage Patterns

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Follow these patterns for auto-styling, compound component structure, and semantic color usage.

```tsx
// Use Text inside Button (auto-styled)
<Button>
  <Text>Click me</Text>
</Button>

// Use compound component pattern correctly
<TextField.Root>
  <TextField.Input placeholder="..." />
</TextField.Root>

// Use semantic colors
<Button color="danger">
  <Text>Delete</Text>
</Button>
```

--------------------------------

### Icon

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

A wrapper for Lucide icons that supports automatic color inheritance and custom sizing.

```APIDOC
## Icon

### Description
Wrapper for Lucide icons with automatic color inheritance.

### Props
- **as** (LucideIcon) - Required - The Lucide icon component
- **size** (number) - Optional - Icon size in pixels (Default: 14)
- **color** (string) - Optional - Override color (Default: inherited)

### Usage Example
import { ArrowRight } from 'lucide-react-native';

<Icon as={ArrowRight} size={16} />
```

--------------------------------

### Locate AI documentation files

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

File structure for AI/LLM documentation provided within the package.

```text
node_modules/@frosted-ui/react-native/docs/llm/
├── README.md           # Overview and quick reference
├── COLOR_SYSTEM.md     # Color palettes, shades, variants, accessibility
├── TYPOGRAPHY.md       # Typography scale, font weights, components
├── COMPONENTS.md       # Full component API reference
└── DESIGN_PATTERNS.md  # UX patterns, layout composition, visual design
```

--------------------------------

### Implement Skeleton.Avatar component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Creates a loading placeholder that matches the dimensions of an Avatar component.

```tsx
{/* These have identical dimensions */}
<Avatar fallback="JD" size="3" shape="circle" />
<Skeleton.Avatar size="3" shape="circle" />
```

--------------------------------

### Import Global Styles

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/README.md

Include the required CSS file at the root of your application.

```tsx
import 'frosted-ui/styles.css';
```

--------------------------------

### Configure Figma Access Token

Source: https://github.com/whopio/frosted-ui/blob/main/packages/generate-icon-lib/README.md

Store the Figma personal access token in an .env file for authentication.

```shell
echo "FIGMA_ACCESS_TOKEN=<token>" >> packages/frosted-ui-icons/.env
```

--------------------------------

### View Transition cleanup with finally

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/src/components/lightbox/REVIEW.md

Suggested fix to ensure cleanup runs even if the View Transition rejects.

```tsx
const transition = startViewTransition(() => { /* ... */ });

transition.finished.finally(() => {
  if (triggerTarget) triggerTarget.style.viewTransitionName = '';
  docEl.removeAttribute('data-lightbox-view-transition');
  docEl.style.removeProperty('--fui-morph-border-radius-from');
  docEl.style.removeProperty('--fui-morph-border-radius-to');
});
```

--------------------------------

### Implement Popover

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Create a floating content panel. Use the align prop to position the content relative to the trigger.

```tsx
<Popover.Root>
  <Popover.Trigger>
    <Button>
      <Text>Open Popover</Text>
    </Button>
  </Popover.Trigger>
  <Popover.Content align="start">
    <View style={{ padding: 16 }}>
      <Text>Popover content</Text>
    </View>
  </Popover.Content>
</Popover.Root>
```

--------------------------------

### Product Grid Screen Implementation

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

A responsive product grid that utilizes the adaptive layout hook to adjust column counts and container alignment.

```tsx
function ProductGridScreen() {
  const { colors } = useThemeTokens();
  const { getColumns, padding, isDesktop } = useAdaptiveLayout();

  // Min 200px per item for comfortable cards, max 3 columns
  const columns = getColumns(200, 3);
  const gap = 16;

  const products = [...]; // Your product data

  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: colors.background }}
      contentContainerStyle={{
        padding,
        gap: 24,
        maxWidth: isDesktop ? 1200 : undefined,
        alignSelf: isDesktop ? 'center' : undefined,
        width: '100%',
      }}>
      {/* Header */}
      <View style={{ gap: 4 }}>
        <Heading size="5">Products</Heading>
        <Text color="gray">{products.length} items</Text>
      </View>

      {/* Responsive Grid */}
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap }}>
        {products.map((product) => (
          <View
            key={product.id}
            style={{
              flexGrow: 1,
              flexBasis: columns === 1 ? '100%' : `${Math.floor(100 / columns) - 2}%`,
              maxWidth: columns === 1 ? '100%' : `${Math.floor(100 / columns) - 1}%`,
            }}>
            <ProductCard product={product} />
          </View>
        ))}
      </View>
    </ScrollView>
  );
}
```

--------------------------------

### Implement Screen Structure

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Standard layout container using a header, scrollable content area, and optional footer.

```tsx
<View style={{ flex: 1, backgroundColor: colors.background }}>
  {/* Header */}
  <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
    <Heading size="6">Screen Title</Heading>
  </View>

  {/* Content */}
  <ScrollView contentContainerStyle={{ padding: 16, gap: 24 }}>{/* Sections go here */}</ScrollView>

  {/* Footer (optional - for primary actions) */}
  <View style={{ padding: 16, borderTopWidth: 1, borderTopColor: colors.stroke }}>
    <Button variant="solid">
      <Text>Primary Action</Text>
    </Button>
  </View>
</View>
```

--------------------------------

### Frosted UI Core Import Reference

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/README.md

Standard import statement for accessing theme providers, components, and types from the Frosted UI library.

```typescript
// Core imports
import {
  // Theme
  ThemeProvider,
  useTheme,
  useThemeTokens,

  // Components
  Button,
  Badge,
  Callout,
  Card,
  Checkbox,
  CircularProgress,
  Dialog,
  Heading,
  IconButton,
  Progress,
  RadioGroup,
  Select,
  Separator,
  Skeleton,
  Spinner,
  Switch,
  Tabs,
  Text,
  TextArea,
  TextField,
  Tooltip,

  // Types
  type AccentColor,
  type Color,
  type SemanticColor,
} from '@frosted-ui/react-native';
```

--------------------------------

### Create a Leaderboard List

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Renders a ranked list of users with conditional styling for the current user and top performers.

```tsx
const entries = [
  { rank: 1, name: 'Sarah Chen', points: 12450, avatar: 'SC', color: 'pink' },
  { rank: 2, name: 'Alex Kim', points: 11200, avatar: 'AK', color: 'blue' },
  { rank: 3, name: 'Jordan Lee', points: 10890, avatar: 'JL', color: 'green' },
  { rank: 4, name: 'You', points: 9540, avatar: 'ME', color: 'accent', isUser: true },
];

<List.Root variant="soft">
  {entries.map((entry, index) => (
    <React.Fragment key={entry.rank}>
      {index > 0 && <List.Separator />}
      <List.Item style={entry.isUser ? { backgroundColor: colors.palettes.gray.a3 } : undefined}>
        <List.ItemSlot>
          <Text
            size="2"
            weight="bold"
            style={{ width: 24, textAlign: 'center' }}
            color={entry.rank <= 3 ? undefined : 'gray'}>
            {entry.rank}
          </Text>
        </List.ItemSlot>
        <List.ItemSlot>
          <Avatar fallback={entry.avatar} size="2" color={entry.color} />
        </List.ItemSlot>
        <List.ItemContent>
          <Text weight={entry.isUser ? 'bold' : 'medium'}>{entry.name}</Text>
        </List.ItemContent>
        <List.ItemSlot>
          <Text weight="medium" color={entry.color}>
            {entry.points.toLocaleString()} pts
          </Text>
        </List.ItemSlot>
      </List.Item>
    </React.Fragment>
  ))}
</List.Root>;
```

--------------------------------

### Implement action pairs

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Use a row layout with flex-1 buttons to balance primary and secondary actions side-by-side.

```tsx
<View style={{ flexDirection: 'row', gap: 8 }}>
  <Button variant="soft" color="gray" style={{ flex: 1 }}>
    <Text>Cancel</Text>
  </Button>
  <Button variant="solid" style={{ flex: 1 }}>
    <Text>Confirm</Text>
  </Button>
</View>
```

--------------------------------

### Icon Generation Scripts

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/CONTRIBUTING.md

Commands to sync icons and pictograms from the Figma source.

```bash
pnpm generate-src
```

```bash
pnpm generate-pictograms
```

```bash
pnpm generate-all
```

--------------------------------

### Create a List with RadioGroup

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Integrates RadioGroup.Root with a List component for selection-based lists. Ensures the RadioGroup wraps the List to manage state across items.

```tsx
<RadioGroup.Root value={selected} onValueChange={setSelected}>
  <List.Root>
    {options.map((option, index) => (
      <React.Fragment key={option.id}>
        {index > 0 && <List.Separator />}
        <List.Item onPress={() => setSelected(option.id)}>
          <List.ItemSlot>
            <RadioGroup.Item value={option.id} />
          </List.ItemSlot>
          <List.ItemSlot>
            <View style={iconBoxStyle}>
              <Icon as={option.icon} size={20} />
            </View>
          </List.ItemSlot>
          <List.ItemContent>
            <List.ItemTitle>{option.name}</List.ItemTitle>
            <List.ItemDescription>{option.time}</List.ItemDescription>
          </List.ItemContent>
          <List.ItemSlot>
            <Text weight="medium" color={option.price === 'Free' ? 'success' : undefined}>
              {option.price}
            </Text>
          </List.ItemSlot>
        </List.Item>
      </React.Fragment>
    ))}
  </List.Root>
</RadioGroup.Root>
```

--------------------------------

### Implement Section with Header

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Layout pattern for a section containing a title and an optional action button.

```tsx
<View style={{ gap: 12 }}>
  <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
    <Heading size="4">Section Title</Heading>
    <Button variant="ghost" size="1">
      <Text>See All</Text>
    </Button>
  </View>
  <Card>{/* Section content */}</Card>
</View>
```

--------------------------------

### Implement TextField component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Demonstrates simple text input usage and advanced usage with slots for icons and buttons.

```tsx
{
  /* Simple usage */
}
<TextField.Input placeholder="Enter text..." />;

{
  /* With slots */
}
<TextField.Root variant="surface">
  <TextField.Slot>
    <Icon as={Search} size={16} />
  </TextField.Slot>
  <TextField.Input placeholder="Search..." />
  <TextField.Slot>
    <IconButton variant="ghost" size="1">
      <Icon as={X} size={14} />
    </IconButton>
  </TextField.Slot>
</TextField.Root>;
```

--------------------------------

### Implement interaction states with shade patterns

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Follow the 3-4-5 shade pattern to differentiate between default, hover, and selected interaction states.

```tsx
// ✅ Good: Follows the 3-4-5 pattern for component states
const bgColor = isSelected
  ? palette.a5 // Selected/Active
  : isHovered
    ? palette.a4 // Hover
    : palette.a3; // Default
```

--------------------------------

### List Components

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

The List component suite provides a structured way to display lists of items with support for slots, titles, and descriptions.

```APIDOC
## List Components

### List.Root Props
- **variant** ('soft' | 'surface' | 'ghost') - Optional - Card visual style. Default: 'surface'.

### List.Item Props
- **onPress** (() => void) - Optional - Makes item interactive (pressable).
- **disabled** (boolean) - Optional - Disables press handling. Default: false.
- **style** (ViewStyle) - Optional - Custom styles.
```

--------------------------------

### Implement Select component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Shows a dropdown selection menu with items, separators, and grouped options. Note that Select.Item children must be plain text.

```tsx
<Select.Root value={value} onValueChange={setValue}>
  <Select.Trigger>
    <Select.Value placeholder="Choose option..." />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="option1" label="Option 1">
      Option 1
    </Select.Item>
    <Select.Item value="option2" label="Option 2">
      Option 2
    </Select.Item>
    <Select.Separator />
    <Select.Group>
      <Select.Label>More Options</Select.Label>
      <Select.Item value="option3" label="Option 3">
        Option 3
      </Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>
```

--------------------------------

### Create Info Tooltip

Source: https://github.com/whopio/frosted-ui/blob/main/packages/figma-icon-sync-plugin/dist/ui.html

Creates an info tooltip anchored to an icon using CSS anchor positioning.

```javascript
function makeInfo(text) { const name = '--info-' + ++infoSeq; return ( '<span class="info" tabindex="0" style="anchor-name:' + name + ';--tip-anchor:' + name + '">i<span class="tip">' + escapeHtml(text) + '</span></span>' ); }
```

--------------------------------

### Implement a Now Playing media player card

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Uses a Card component with a Slider for interactive playback control and IconButton components for media navigation.

```tsx
const [isPlaying, setIsPlaying] = React.useState(true);
const [position, setPosition] = React.useState(84); // seconds
const duration = 225; // 3:45 in seconds

const formatTime = (seconds: number) => {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

<Card>
  <View style={{ gap: 16 }}>
    {/* Album Art + Info */}
    <View style={{ flexDirection: 'row', gap: 16 }}>
      <View
        style={{
          width: 80,
          height: 80,
          borderRadius: 8,
          backgroundColor: colors.palettes.pink.a3,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
        <Icon as={Music} size={32} color={colors.palettes.pink.a11} />
      </View>
      <View style={{ flex: 1, justifyContent: 'center', gap: 4 }}>
        <Text size="3" weight="bold" numberOfLines={1}>
          Midnight Dreams
        </Text>
        <Text size="2" color="gray" numberOfLines={1}>
          Aurora Synth
        </Text>
        <Text size="1" color="gray">
          Neon Horizons • 2024
        </Text>
      </View>
      <IconButton variant="ghost" size="2">
        <Icon as={Heart} size={20} />
      </IconButton>
    </View>

    {/* Playback Position - Interactive Slider */}
    <View style={{ gap: 4 }}>
      <Slider value={position} onValueChange={setPosition} min={0} max={duration} size="1" />
      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Text size="0" color="gray">
          {formatTime(position)}
        </Text>
        <Text size="0" color="gray">
          {formatTime(duration)}
        </Text>
      </View>
    </View>

    {/* Controls */}
    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
      <IconButton variant="ghost" size="3">
        <Icon as={SkipBack} size={24} />
      </IconButton>
      <IconButton variant="solid" size="4" onPress={() => setIsPlaying(!isPlaying)}>
        <Icon as={isPlaying ? Pause : Play} size={24} />
      </IconButton>
      <IconButton variant="ghost" size="3">
        <Icon as={SkipForward} size={24} />
      </IconButton>
    </View>
  </View>
</Card>;
```

--------------------------------

### Environment Configuration

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/CONTRIBUTING.md

Required environment variable for the Figma generator.

```text
FIGMA_ACCESS_TOKEN
```

--------------------------------

### ThemeProvider

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

A component that wraps the application to configure the theme's semantic color mappings.

```APIDOC
## ThemeProvider

### Description
Configures the application's color theme by defining semantic color overrides.

### Props
- **accentColor** (string) - Optional. Sets the accent color palette.
- **dangerColor** (string) - Optional. Sets the danger color palette (options: tomato, red, ruby).
- **warningColor** (string) - Optional. Sets the warning color palette (options: yellow, amber).
- **successColor** (string) - Optional. Sets the success color palette (options: teal, jade, green, grass).
- **infoColor** (string) - Optional. Sets the info color palette (options: blue, sky).
```

--------------------------------

### Implement a Button with Icon

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Compose buttons by nesting Icon and Text components.

```tsx
<Button>
  <Icon as={Plus} size={16} />
  <Text>Add Item</Text>
</Button>
```

--------------------------------

### Access theme tokens

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/README.md

Using useThemeTokens to retrieve design system colors for custom styling.

```tsx
import { useThemeTokens } from '@frosted-ui/react-native';

function MyComponent() {
  const { colors, isDark } = useThemeTokens();

  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.palettes.gray['12'] }}>Hello World</Text>
    </View>
  );
}
```

--------------------------------

### Implement Button Loading

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Uses the Spinner component to wrap content, showing or hiding based on the loading prop.

```tsx
<Button variant="solid" disabled={isLoading} onPress={handleSubmit}>
  <Spinner loading={isLoading} size="1">
    <Text>Submit</Text>
  </Spinner>
</Button>
```

--------------------------------

### Configure Theme Component

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/README.md

Wrap your application components with the Theme provider to enable design system styles.

```tsx
import { Theme } from 'frosted-ui';

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}
```

--------------------------------

### Implement Focus Rings

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Use the a8 palette shade for consistent focus outlines.

```typescript
const focusStyle = focused
  ? {
      outlineWidth: 2,
      outlineStyle: 'solid',
      outlineColor: palette.a8,
      outlineOffset: 2,
    }
  : undefined;
```

--------------------------------

### TextArea

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

A multi-line text input component.

```APIDOC
## TextArea

### Description
Multi-line text input.

### Props
- **size** ('1' | '2' | '3' | '4') - Default: '3'
- **variant** ('surface' | 'soft') - Default: 'surface'
- **color** (Color) - Optional
```

--------------------------------

### Implement AlertDialog

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Use for confirmation dialogs with action and cancel buttons.

```tsx
<AlertDialog.Root>
  <AlertDialog.Trigger>
    <Button color="danger">
      <Text>Delete</Text>
    </Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete Item</AlertDialog.Title>
      <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>
        <Button variant="soft" color="gray">
          <Text>Cancel</Text>
        </Button>
      </AlertDialog.Cancel>
      <AlertDialog.Action>
        <Button variant="solid" color="danger">
          <Text>Delete</Text>
        </Button>
      </AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>
```

--------------------------------

### Implement Payment Method Selection

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Displays a list of saved payment methods with an additional action item for adding new cards.

```tsx
const [selected, setSelected] = React.useState('visa');

<RadioGroup.Root value={selected} onValueChange={setSelected}>
  <List.Root>
    {[
      { id: 'visa', name: 'Visa', last4: '4242', expiry: '12/25' },
      { id: 'mastercard', name: 'Mastercard', last4: '8888', expiry: '03/26' },
    ].map((card, index) => (
      <React.Fragment key={card.id}>
        {index > 0 && <List.Separator />}
        <List.Item onPress={() => setSelected(card.id)}>
          <List.ItemSlot>
            <RadioGroup.Item value={card.id} />
          </List.ItemSlot>
          <List.ItemSlot>
            <View style={cardIconStyle}>
              <Icon as={CreditCard} size={20} color={colors.palettes.gray.a11} />
            </View>
          </List.ItemSlot>
          <List.ItemContent>
            <List.ItemTitle>
              {card.name} •••• {card.last4}
            </List.ItemTitle>
            <List.ItemDescription>Expires {card.expiry}</List.ItemDescription>
          </List.ItemContent>
        </List.Item>
      </React.Fragment>
    ))}

    <List.Separator />

    {/* Add new card option */}
    <List.Item onPress={() => {}}>
      <List.ItemSlot>
        <View style={addButtonStyle}>
          <Icon as={Plus} size={14} color={colors.palettes.accent.a11} />
        </View>
      </List.ItemSlot>
      <List.ItemContent>
        <Text weight="medium" color="accent">
          Add new card
        </Text>
      </List.ItemContent>
    </List.Item>
  </List.Root>
</RadioGroup.Root>;
```

--------------------------------

### Plugin Directory Structure

Source: https://github.com/whopio/frosted-ui/blob/main/packages/figma-icon-sync-plugin/README.md

The required file structure for the plugin, where manifest.json must remain adjacent to the dist folder.

```text
figma-icon-sync-plugin/
├── manifest.json   ← you select this when importing
└── dist/
    ├── code.js
    └── ui.html
```

--------------------------------

### Configure Borders and Separators

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COLOR_SYSTEM.md

Use the colors.stroke semantic token for consistent gray borders and separators.

```typescript
// Default border/separator - USE THIS for gray borders
borderColor: colors.stroke; // Pre-defined semantic token (gray.a5 in light, gray.a4 in dark)

// Separator component
backgroundColor: colors.stroke;

// Colored separator (when you need a tinted separator)
backgroundColor: palette.a6;

// Input border states
borderColor: colors.stroke; // Default - use the stroke token
borderColor: gray.a7; // Hover
borderColor: palette.a8; // Focus
```

--------------------------------

### Implement Shipping Options List

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

Uses RadioGroup.Root to manage selection state within a List component for shipping methods.

```tsx
const [selected, setSelected] = React.useState('standard');

const options = [
  {
    id: 'standard',
    name: 'Standard Shipping',
    price: 'Free',
    time: '5-7 business days',
    icon: Truck,
  },
  { id: 'express', name: 'Express Shipping', price: '$9.99', time: '2-3 business days', icon: Zap },
  { id: 'overnight', name: 'Overnight', price: '$24.99', time: 'Next business day', icon: Clock },
];

<RadioGroup.Root value={selected} onValueChange={setSelected}>
  <List.Root>
    {options.map((option, index) => (
      <React.Fragment key={option.id}>
        {index > 0 && <List.Separator />}
        <List.Item onPress={() => setSelected(option.id)}>
          <List.ItemSlot>
            <RadioGroup.Item value={option.id} />
          </List.ItemSlot>
          <List.ItemSlot>
            <View style={iconBoxStyle}>
              <Icon as={option.icon} size={20} />
            </View>
          </List.ItemSlot>
          <List.ItemContent>
            <List.ItemTitle>{option.name}</List.ItemTitle>
            <List.ItemDescription>{option.time}</List.ItemDescription>
          </List.ItemContent>
          <List.ItemSlot>
            <Text weight="medium" color={option.price === 'Free' ? 'success' : undefined}>
              {option.price}
            </Text>
          </List.ItemSlot>
        </List.Item>
      </React.Fragment>
    ))}
  </List.Root>
</RadioGroup.Root>;
```

--------------------------------

### Optimize caption registration with refs

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui/src/components/lightbox/REVIEW.md

Use a ref-based Map to store captions to avoid triggering full-tree re-renders during registration.

```tsx
const captionsRef = React.useRef(new Map<number, React.ReactNode>());

const registerCaption = React.useCallback((index: number, caption: React.ReactNode) => {
  captionsRef.current.set(index, caption);
  return () => { captionsRef.current.delete(index); };
}, []);
```

--------------------------------

### Define UI Configuration Constants

Source: https://github.com/whopio/frosted-ui/blob/main/packages/figma-icon-sync-plugin/src/ui.html

Defines the KIND and RULE_LABELS objects used to map icon/pictogram metadata and validation rules to UI labels.

```javascript
const KIND = { icons: { countLabel: 'icons detected', meta: (r) => '<b>' + r.variantCount + '</b> size variants · <b>' + r.categoryCount + '</b> categories', pageWarn: 'No page named “Icons” found — scanned the current page instead.', syncLabel: 'Open icon sync on GitHub', diffNoun: 'icons', diffInfo: 'Compares the icons on this page against the latest published @frosted-ui/icons npm release — showing which icons would be added or removed.', groups: ICON_GROUPS, }, pictograms: { countLabel: 'pictograms detected', meta: (r) => '<b>' + r.variantCount + '</b> variants · <b>' + r.categoryCount + '</b> backgrounds', pageWarn: 'No page named “Pictograms” found — scanned the current page instead.', syncLabel: 'Open pictogram sync on GitHub', diffNoun: 'pictograms', diffInfo: 'Compares the pictograms on this page against the latest published @frosted-ui/icons npm release — showing which pictograms would be added or removed.', groups: PICTOGRAM_GROUPS, }, }; const RULE_LABELS = { 'duplicate-name': 'Duplicate names', 'number-in-name': 'Numbers in names', 'empty-name': 'Empty names', 'modifier-order': 'Wrong modifier order', 'invalid-size-label': 'Invalid size label', 'disallowed-size': 'Disallowed size', 'no-variants': 'No size variants', 'duplicate-size': 'Duplicate sizes', 'incomplete-sizes': 'Missing sizes', 'size-mismatch': 'Dimension mismatch', 'hidden-layers': 'Hidden layers', 'not-single-shape': 'Not a single shape', 'bad-constraints': 'Not set to Scale', 'incomplete-set': 'Incomplete icon set', 'orphan': 'Outside Icons frame', 'fill-and-stroke': 'Fill + stroke on same shape', 'empty-export': 'Empty SVG export', 'inline-style': 'Inline style breaks codegen', 'pictogram-empty-name': 'Invalid variant name', 'pictogram-number-in-name': 'Numbers in names', 'pictogram-invalid-background': 'Unknown background', 'pictogram-duplicate': 'Duplicate variants', 'pictogram-incomplete-backgrounds': 'Missing backgrounds', 'pictogram-dimension': 'Wrong dimensions', 'pictogram-bad-constraints': 'Not set to Scale', 'pictogram-not-single-layer': 'Extra or hidden layers', 'pictogram-mismatched-shapes': 'Geometry differs across backgrounds', 'pictogram-inline-style': 'Inline style breaks codegen', 'pictogram-empty-export': 'Empty SVG export', 'pictogram-orphan': 'Outside Pictogram container', };
```

--------------------------------

### Implement Info Card

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/DESIGN_PATTERNS.md

A standard card configuration used for displaying informational content with a title and action buttons.

```tsx
<Card>
  <View style={{ gap: 12 }}>
    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
      <Icon as={Info} size={16} />
      <Text weight="medium">Card Title</Text>
    </View>
    <Text size="3" color="gray">
      Supporting description text that provides more context.
    </Text>
    <View style={{ flexDirection: 'row', gap: 8 }}>
      <Button variant="soft" color="gray" size="2">
        <Text>Dismiss</Text>
      </Button>
      <Button variant="solid" size="2">
        <Text>Action</Text>
      </Button>
    </View>
  </View>
</Card>
```

--------------------------------

### Configure Next.js modularizeImports

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-icons/README.md

Optimize bundle size in Next.js by configuring modularizeImports for icon and pictogram paths.

```js
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  modularizeImports: {
    '@frosted-ui/icons': {
      transform: {
        // Pictograms live under `pictograms/` in the built package.
        '*Pictogram': '@frosted-ui/icons/pictograms/{{member}}',
        '*': '@frosted-ui/icons/{{member}}',
      },
      skipDefaultConversion: true,
    },
  },
};

export default nextConfig;
```

--------------------------------

### Implement an Icon

Source: https://github.com/whopio/frosted-ui/blob/main/packages/frosted-ui-react-native/docs/llm/COMPONENTS.md

Use the Icon wrapper for Lucide icons. It supports automatic color inheritance when placed inside other components.

```tsx
import { ArrowRight } from 'lucide-react-native';

<Icon as={ArrowRight} size={16} />;
```
Tokens:
Raw