Swift Packages

Keep the design system in its own Swift package and use it from your app and your other packages.

When to use it

Use a package when your app is already split into packages, for example one per feature, and more than one of them needs FLX. Apple recommends this setup as an app grows.

If DesignSystem lives inside your app, as Installation sets it up, every file can use it right away and you can skip this page.

How it looks

MyApp├── MyApp.xcodeproj├── MyApp                    ← your app└── Packages    ├── DesignSystem         ← FLX lives here    │   ├── Package.swift    │   └── Sources    │       └── DesignSystem    │           ├── Tokens    │           ├── Theme    │           └── Components    └── Profile              ← one of your own packages        ├── Package.swift        └── Sources            └── Profile

A folder with a Package.swift is a package. That file names the package and lists what it depends on, like a package.json. The folder names are up to you. Packages is only a common choice.

Set it up

// swift-tools-version: 6.0import PackageDescriptionlet package = Package(  name: "DesignSystem",  platforms: [.iOS("16.4"), .macOS("13.3")],  products: [      .library(name: "DesignSystem", targets: ["DesignSystem"])  ],  targets: [      .target(name: "DesignSystem")  ])

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/foundation.json

Use it in your app

Add import DesignSystem at the top of each file that uses FLX:

import SwiftUIimport DesignSystemstruct ContentView: View {  var body: some View {      FLXButton("Save") {}  }}

To use a preset, apply it once in your app. Every package that uses FLX gets it too:

import SwiftUIimport DesignSystem@mainstruct MyApp: App {  var body: some Scene {      WindowGroup {          ContentView()              .flxTheme(.sienna)      }  }}

Files inside the DesignSystem package don't need the import.

Use it from your other packages

A package that uses FLX lists DesignSystem as a dependency in its own manifest:

// swift-tools-version: 6.0import PackageDescriptionlet package = Package(  name: "Profile",  platforms: [.iOS("16.4"), .macOS("13.3")],  products: [      .library(name: "Profile", targets: ["Profile"])  ],  dependencies: [      .package(path: "../DesignSystem")  ],  targets: [      .target(name: "Profile", dependencies: ["DesignSystem"])  ])

Its files import DesignSystem the same way:

import SwiftUIimport DesignSystempublic struct ProfileView: View {  public init() {}  public var body: some View {      FLXButton("Edit profile") {}  }}

ProfileView is public because your app shows it, and code in one package is only visible to others when it's public. The same rule is why FLX itself is public.

Text in your packages

Like SwiftUI's own Button, a title such as FLXButton("Save") is translated with your app's String Catalog. To use the catalog of the package the code lives in, pass a LocalizedStringResource with its bundle:

FLXButton(LocalizedStringResource("Edit profile", bundle: #bundle)) {}