# swiftui-flx > SwiftUI components for iOS, iPadOS and macOS that live in your own project, the shadcn/ui way. Built on native SwiftUI controls and their *Style protocols, themed through shared tokens, MIT licensed. swiftui-flx is not a Swift package. Every component is plain Swift source added to the app's project, so the user owns and edits it. - `DesignSystem/Tokens` and `DesignSystem/Theme` are the foundation. Every component needs them, so add them once, before any component. - `DesignSystem/Components/FLX` holds one component. Components read colors, radius, spacing and fonts from the theme, so never hardcode those values. - Requires iOS 16.4, iPadOS 16.4 or macOS 13.3 or later. Compiles in Swift 5 and Swift 6 language modes. Install with the shadcn CLI, run from the folder Xcode compiles (the one with the app's Swift files), or pass `--cwd `: - Foundation: `npx shadcn@latest add https://swiftui.flexnative.com/r/foundation.json` - iOS and iPadOS component: `npx shadcn@latest add https://swiftui.flexnative.com/r/ios-.json` - macOS component: `npx shadcn@latest add https://swiftui.flexnative.com/r/mac-.json` - An app that runs on iPhone and Mac adds both the `ios-` and `mac-` version of each component. Shared files are identical and platform files are guarded with `#if os(...)`. - Projects created before Xcode 16 list files one by one: after adding files, the user adds them to the target in Xcode with File > Add Files. Don't edit `project.pbxproj` by hand. - Without Node, copy each file by hand from the component's page, following the paths shown. - For an app that already has screens and its own styles, read [Existing Projects](https://swiftui.flexnative.com/docs/existing-projects.md) first. ## Docs - [Installation](https://swiftui.flexnative.com/docs/installation.md): How the design system is organized and how to set it up. - [Existing Projects](https://swiftui.flexnative.com/docs/existing-projects.md): Add the design system to an app you already have, with your own colors, one screen at a time. - [Swift Packages](https://swiftui.flexnative.com/docs/swift-packages.md): Keep the design system in its own Swift package and use it from your app and your other packages. - [Presets](https://swiftui.flexnative.com/docs/presets.md): Theme presets that set the colors and radius of every component. ## iOS components - [All iOS components](https://swiftui.flexnative.com/docs/components/ios.md): Components you can copy and paste into your iOS apps. Requires iOS 16.4+ or iPadOS 16.4+. - [Avatar](https://swiftui.flexnative.com/docs/components/ios/avatar.md): Displays a user's profile picture, with initials as a fallback. - [Badge](https://swiftui.flexnative.com/docs/components/ios/badge.md): Displays a small label for status, category, or count. - [Button](https://swiftui.flexnative.com/docs/components/ios/button.md): Triggers an action or event, such as submitting a form. - [Card](https://swiftui.flexnative.com/docs/components/ios/card.md): A card is a container that can be used to display content in a styled way. - [Collapsible](https://swiftui.flexnative.com/docs/components/ios/collapsible.md): Displays content that can be expanded and collapsed. - [Field Label](https://swiftui.flexnative.com/docs/components/ios/field-label.md): Pairs a caption with a form control. - [Form Field](https://swiftui.flexnative.com/docs/components/ios/form-field.md): Groups a label, control, description, and error message for a form field. - [Item](https://swiftui.flexnative.com/docs/components/ios/item.md): Displays a row of content, such as a list entry, notification, or settings row. - [Menu](https://swiftui.flexnative.com/docs/components/ios/menu.md): Displays a list of actions or options revealed from a button or custom trigger. - [Picker](https://swiftui.flexnative.com/docs/components/ios/picker.md): Displays a dropdown for selecting one value from a set of options. - [Progress View](https://swiftui.flexnative.com/docs/components/ios/progress-view.md): Displays progress toward completion of a task, as a bar or a spinner. - [Secure Field](https://swiftui.flexnative.com/docs/components/ios/secure-field.md): Displays an obscured text input for passwords and other sensitive text. - [Sheet](https://swiftui.flexnative.com/docs/components/ios/sheet.md): Presents content in a sheet over the current view, driven by an item binding. - [Slider](https://swiftui.flexnative.com/docs/components/ios/slider.md): Displays a control for selecting a value from a bounded range. - [Text Editor](https://swiftui.flexnative.com/docs/components/ios/text-editor.md): Displays a multi-line text input for long-form content. - [Text Field](https://swiftui.flexnative.com/docs/components/ios/text-field.md): Displays a single-line text input. - [Text Field Group](https://swiftui.flexnative.com/docs/components/ios/text-field-group.md): Wraps a text field in a shared box with optional leading and trailing addons. - [Toggle](https://swiftui.flexnative.com/docs/components/ios/toggle.md): Displays a switch for an on/off value. ## macOS components - [All macOS components](https://swiftui.flexnative.com/docs/components/mac.md): Components you can copy and paste into your macOS apps. Requires macOS 13.3+. - [Avatar](https://swiftui.flexnative.com/docs/components/mac/avatar.md): Displays a user's profile picture, with initials as a fallback. - [Badge](https://swiftui.flexnative.com/docs/components/mac/badge.md): Displays a small label for status, category, or count. - [Button](https://swiftui.flexnative.com/docs/components/mac/button.md): Triggers an action or event, such as submitting a form. - [Card](https://swiftui.flexnative.com/docs/components/mac/card.md): A card is a container that can be used to display content in a styled way. - [Collapsible](https://swiftui.flexnative.com/docs/components/mac/collapsible.md): Displays content that can be expanded and collapsed. - [Field Label](https://swiftui.flexnative.com/docs/components/mac/field-label.md): Pairs a caption with a form control. - [Form Field](https://swiftui.flexnative.com/docs/components/mac/form-field.md): Groups a label, control, description, and error message for a form field. - [Item](https://swiftui.flexnative.com/docs/components/mac/item.md): Displays a row of content, such as a list entry, notification, or settings row. - [Progress View](https://swiftui.flexnative.com/docs/components/mac/progress-view.md): Displays progress toward completion of a task, as a bar or a spinner. - [Secure Field](https://swiftui.flexnative.com/docs/components/mac/secure-field.md): Displays an obscured text input for passwords and other sensitive text. - [Sheet](https://swiftui.flexnative.com/docs/components/mac/sheet.md): Presents content in a sheet over the current view, driven by an item binding. - [Slider](https://swiftui.flexnative.com/docs/components/mac/slider.md): Displays a control for selecting a value from a bounded range. - [Text Editor](https://swiftui.flexnative.com/docs/components/mac/text-editor.md): Displays a multi-line text input for long-form content. - [Text Field](https://swiftui.flexnative.com/docs/components/mac/text-field.md): Displays a single-line text input. - [Text Field Group](https://swiftui.flexnative.com/docs/components/mac/text-field-group.md): Wraps a text field in a shared box with optional leading and trailing addons. - [Toggle](https://swiftui.flexnative.com/docs/components/mac/toggle.md): Displays a checkbox for an on/off value. ## Optional - [Website](https://swiftui.flexnative.com): Live previews of every component on iPhone and Mac.