---
name: "@swiftui-flx"
slug: "swiftui-flx"
description: "SwiftUI components for iPhone, iPad and Mac, the shadcn/ui way. Native controls, design tokens, themes and dark mode. Install with the shadcn CLI and own the Swift code."
category: "Forms"
tags: ["buttons", "cards", "editor", "forms", "loaders", "media", "mobile", "navigation", "overlays", "theming"]
framework: "react"
license: "AGPL-3.0"
author: "felipemenezes098"
website: "https://swiftui.flexnative.com"
github: "https://github.com/felipemenezes098/swiftui-flx"
registry: "https://swiftui.flexnative.com/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 36
generated_at: "2026-10-10T06:32:55.998Z"
---

# @swiftui-flx

SwiftUI components for iPhone, iPad and Mac, the shadcn/ui way. Native controls, design tokens, themes and dark mode. Install with the shadcn CLI and own the Swift code.

## Links

- Website: https://swiftui.flexnative.com
- GitHub: https://github.com/felipemenezes098/swiftui-flx
- Registry JSON: https://swiftui.flexnative.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/swiftui-flx
- This file: https://sh4dcn.vercel.app/md/swiftui-flx.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://swiftui.flexnative.com/r/registry.json
pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/registry.json
bunx shadcn@latest add https://swiftui.flexnative.com/r/registry.json
# clone the source repo
git clone https://github.com/felipemenezes098/swiftui-flx.git
# fetch the raw registry index
curl -s https://swiftui.flexnative.com/r/registry.json
```

## Components (36)

| name | type | description | install |
| --- | --- | --- | --- |
| foundation | registry:file | Tokens and the default theme every component reads from. | `npx shadcn@latest add https://swiftui.flexnative.com/r/foundation.json` |
| preset-sienna | registry:file | Cream paper, burnt-earth ink, and a larger base radius. | `npx shadcn@latest add https://swiftui.flexnative.com/r/preset-sienna.json` |
| ios-button | registry:file | Triggers an action or event, such as submitting a form. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-button.json` |
| mac-button | registry:file | Triggers an action or event, such as submitting a form. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-button.json` |
| ios-card | registry:file | A card is a container that can be used to display content in a styled way. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-card.json` |
| mac-card | registry:file | A card is a container that can be used to display content in a styled way. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-card.json` |
| ios-avatar | registry:file | Displays a user's profile picture, with initials as a fallback. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-avatar.json` |
| mac-avatar | registry:file | Displays a user's profile picture, with initials as a fallback. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-avatar.json` |
| ios-badge | registry:file | Displays a small label for status, category, or count. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-badge.json` |
| mac-badge | registry:file | Displays a small label for status, category, or count. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-badge.json` |
| ios-item | registry:file | Displays a row of content, such as a list entry, notification, or settings row. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-item.json` |
| mac-item | registry:file | Displays a row of content, such as a list entry, notification, or settings row. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-item.json` |
| ios-menu | registry:file | Displays a list of actions or options revealed from a button or custom trigger. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-menu.json` |
| ios-picker | registry:file | Displays a dropdown for selecting one value from a set of options. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-picker.json` |
| ios-progress-view | registry:file | Displays progress toward completion of a task, as a bar or a spinner. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-progress-view.json` |
| mac-progress-view | registry:file | Displays progress toward completion of a task, as a bar or a spinner. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-progress-view.json` |
| ios-sheet | registry:file | Presents content in a sheet over the current view, driven by an item binding. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-sheet.json` |
| mac-sheet | registry:file | Presents content in a sheet over the current view, driven by an item binding. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-sheet.json` |
| ios-slider | registry:file | Displays a control for selecting a value from a bounded range. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-slider.json` |
| mac-slider | registry:file | Displays a control for selecting a value from a bounded range. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-slider.json` |
| ios-toggle | registry:file | Displays a switch for an on/off value. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-toggle.json` |
| mac-toggle | registry:file | Displays a checkbox for an on/off value. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-toggle.json` |
| ios-collapsible | registry:file | Displays content that can be expanded and collapsed. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-collapsible.json` |
| mac-collapsible | registry:file | Displays content that can be expanded and collapsed. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-collapsible.json` |
| ios-secure-field | registry:file | Displays an obscured text input for passwords and other sensitive text. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-secure-field.json` |
| mac-secure-field | registry:file | Displays an obscured text input for passwords and other sensitive text. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-secure-field.json` |
| ios-text-editor | registry:file | Displays a multi-line text input for long-form content. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-text-editor.json` |
| mac-text-editor | registry:file | Displays a multi-line text input for long-form content. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-text-editor.json` |
| ios-text-field | registry:file | Displays a single-line text input. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-text-field.json` |
| mac-text-field | registry:file | Displays a single-line text input. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-text-field.json` |
| ios-text-field-group | registry:file | Wraps a text field in a shared box with optional leading and trailing addons. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-text-field-group.json` |
| mac-text-field-group | registry:file | Wraps a text field in a shared box with optional leading and trailing addons. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-text-field-group.json` |
| ios-field-label | registry:file | Pairs a caption with a form control. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-field-label.json` |
| mac-field-label | registry:file | Pairs a caption with a form control. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-field-label.json` |
| ios-form-field | registry:file | Groups a label, control, description, and error message for a form field. | `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-form-field.json` |
| mac-form-field | registry:file | Groups a label, control, description, and error message for a form field. | `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-form-field.json` |

## For AI agents

```text
You are adding components from @swiftui-flx to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/swiftui-flx.md) for the component list.
2. Fetch the machine-readable index: https://swiftui.flexnative.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: swiftui-flx).
```