A SwiftUI system components and interactions demo app

Overview

SwiftUI Kit

A SwiftUI system components and interactions demo app based on iOS 14, macOS Big Sur, watchOS 7, and tvOS 14.

SwiftUI Kit

Use the SwiftUI Kit app to see how SwiftUI views appear and interact when using the system defaults. You can view the source to see how particular examples work.

Includes Buttons, Colors, Controls, Fonts, Haptics, Images, Indicators, Shapes, Text, and more.

iOS, iPadOS, macOS, watchOS, tvOS

SwiftUI Kit examples

To run

Make sure you're using Xcode 12+ as well as a device running iOS 14+. Works on iPhone, iPad, Mac, Apple Watch, and Apple TV.

Accent color

To change the accent color and see how it affects the system components, go to the AccentColor section of Assets.xcassets in Xcode. You can then change the Light and Dark accent colors that will be applied to the app.

Contributing

Please feel free to submit pull requests in order to contribute back to SwiftUI Kit. This is for the SwiftUI community!

SwiftUI Resources

  • Recreate - A video series about recreating popular UI with SwiftUI
  • Primitive - Learn SwiftUI for designers

Apple Resources

  • Apple Human Interface Guidelines - Apple’s design guidelines for creating best-in-class apps.
  • SF Symbols – Apple’s comprehensive library of vector-based symbols included in Apple’s system fonts that you can incorporate into your app.

By Jordan Singer (@jsngr)

Credit SwiftUI Apple Developer Documentation for many examples and terminology

Comments
  • Visual Studio Code support?

    Visual Studio Code support?

    In VSCode using 'iOS Debug' it's possible to build & debug iOS Simulator applications. https://marketplace.visualstudio.com/items?itemName=nisargjhaveri.ios-debug

    I'm wondering whether there might be interest in using VSCode to hot reload:

    vscode-hotreload

    opened by markst 5
  • SwiftUI Kit, on the tube!

    SwiftUI Kit, on the tube!

    Screen Shot 2020-07-11 at 22 40 25

    Bam!

    Also:

    • Removed extraneous asset catalogs (all targets share the same one now)
    • Changed a few conditional statements to exclude tvOS instead of including all 3 other platforms (little cleaner)

    Known issues

    • Certain views don’t scroll, like FontsGrouping. May need an explicit ScrollView
    enhancement 
    opened by majouji 2
  • Add watchOS app + other improvements

    Add watchOS app + other improvements

    • Add watchOS app!
    • Exclude unsupported components with #if os statements
    • Update Readme + add useful Apple links
    • Add system images section in the Images group
    • Refactor var lineColor to be a color set in the asset library instead (initially to avoid a big, ugly if else block but seems to be the better approach)
    • Add renderingMode(.original) modifier example for multi-color system images
    • Add frame constraints to the shapes examples so they don’t stretch out too much when resizing windows on macOS
    opened by majouji 2
  • FIX: Image not being displayed

    FIX: Image not being displayed

    Fix the mismatched case of the image name. I had to change the name of the image, as just changing the case of the 'i' in the asset catalog didn't show up in git.

    opened by ghost 1
  • macOS: first button in sidebar hidden in full screen

    macOS: first button in sidebar hidden in full screen

    This might be a bug with SwiftUI itself (not the first time I’m seeing this with Sidebar(), but capturing here in case someone knows a fix.

    When entering in full screen mode, the first button in the sidebar view is hidden by the toolbar.

    ezgif com-video-to-gif

    bug 
    opened by majouji 1
  • First draft of a macOS Version

    First draft of a macOS Version

    I am not sure if you plan to extend the app for macOS, but if so, I have a first draft.

    • Modified ControlsGroup and FontsGroup to use SectionView
    • Add target, create folder for target specific files
    • Move unsupported things behind os check (Haptic, ActionSheet)
    • Fix compilation errors (UIColor -> NSColor)
    • Add close button to sheet
    • Add scrollview and frames modifier to content is visible
    • Style SectionView because a macOS Section is without any styling

    Known problems:

    • [x] Icon does not look like a Big Sur icon
    • [ ] Navigation Link button not working
    • [ ] When making window very thin some lables get cutoff, not sure why
    • [x] Sheet needs styling
    opened by Nef10 1
  • Add destructive button style for the action sheet

    Add destructive button style for the action sheet

    • Add the .destructive button style for the action sheet component
    • Add a second default button to further emphasize that the action sheet is meant to be used to present explicit options for the user to choose from (instead of the "OK"/"Done" dismissal which is usually better suited for an alert)
    • Add *.DS_Store to gitignore cuz it’s annoying

    Per the HIG, the destructive style is the first option presented (reference).

    opened by majouji 1
  • Set view previews to .sizeThatFits?

    Set view previews to .sizeThatFits?

    Love this repo – so helpful! Something Apple should provide themselves.

    Previews for extracted views (like the files in the Groupings folder) are shown in an iPhone frame by default (since the scheme is set to iPhone SE) – I wonder if it would make sense to change the preview layout to .previewLayout(.sizeThatFits) for these.

    Having the iPhone chrome can imply/suggest that it’s a "screen" rather than an isolated piece of UI (I can see this being confusing for someone starting out who isn’t familiar with breaking up views in multiple files).

    I can create a PR for it but wanted to check first!

    Updated preview would look like this: Screen Shot 2020-07-10 at 21 37 25

    opened by majouji 1
  • Enable context menu on tvOS

    Enable context menu on tvOS

    It works, so why don't show it :)

    However, the Divider() looks a bit weird:

    simulator_screenshot_72D8DF52-78EE-4DD9-AE7C-2CDD99C0F4E2

    But I think we should still show it as the app helps people to show what the elements are going to look like.

    opened by Nef10 0
  • tvOS: Add Sample Top Shelf Images

    tvOS: Add Sample Top Shelf Images

    Add sample Top Shelf images for tvOS to show where "Top Shelf" asset are used.

    More about Top Shelf assets: https://developer.apple.com/design/human-interface-guidelines/tvos/overview/top-shelf/

    Screen Shot 2020-07-11 at 23 11 10 enhancement tvOS 
    opened by majouji 0
  • Simplify Folder Structure

    Simplify Folder Structure

    Now that multiple targets are sharing the same code, I’ve rearranged the folder structure a little bit to better mirror Apple’s new Multiplatform boilerplate project in Xcode 12 and simplify folder names.

    • The Shared folder contains all the shared code (most of it, really)
    • Platform-specific folders contain their own info.plist and entitlements

    No functional changes otherwise!

    Screen Shot 2020-07-11 at 21 34 44
    opened by majouji 0
  • feat: Add SceneKit

    feat: Add SceneKit

    Feature:

    • now that SwiftUI 2.0 has SceneView supported by SceneKit, we can add a row under Maps for an example of SceneKit.

    Implementation

    • All we need is a model with extension .usdz and a few lines of code to implement this feature. you can preview implementation in the readMe of this repository
    opened by aaryankotharii 0
  • Modeling

    Modeling

    How should we be thinking about modeling the views, especially those that differ by platform and as the repo grows over time?

    Could imagine the #if method getting messy.

    As I was building this in the first place, I imagined making a struct to hold each grouping and an array of views inside of it. Curious if there are other suggestions and if doing this might be overkill?

    help wanted question 
    opened by jordansinger 2
  • Show code in app

    Show code in app

    The app reminds me a little bit of an app I've used before: Fiori Mentor

    It offers the option to copy the code directly from within the app, see here. Maybe we could offer something similar?

    Disclosure: The app was developer by my employer, however I was not involved.

    enhancement 
    opened by Nef10 3
Owner
Jordan Singer
I build my ideas.
Jordan Singer
A Swift library for documenting, isolating, and testing SwiftUI, UIKIt & AppKit components.

A Swift library for documenting, isolating, and testing SwiftUI, UIKit & AppKit components. Minimal Example An example demonstrated with the Slider ui

Hayden Pennington 6 Sep 12, 2022
A collection of missing SwiftUI components

SwiftUIKit A collection of components that will simplify and accelerate your iOS development. Components CurrencyTextField AdaptToKeyboard (not needed

youjinp 221 Sep 13, 2022
Introspect underlying UIKit components from SwiftUI

Introspect for SwiftUI Introspect allows you to get the underlying UIKit or AppKit element of a SwiftUI view. For instance, with Introspect you can ac

Siteline 3.5k Sep 22, 2022
NeoPop is CRED's inbuilt library for using NeoPop components in your app

NeoPOP NeoPOP is CRED's inbuilt library for using NeoPOP components in your app. What really is NeoPOP? NeoPOP was created with one simple goal; to cr

CRED 119 Sep 24, 2022
IOS15-SwiftUI-InAppPurchaseDemo - In-App Purchase Demo app written with SwiftUI

iOS15-SwiftUI-InAppPurchaseDemo In-App Purchase Demo app written with SwiftUI If

null 5 Jul 20, 2022
Orbit-swiftui - Orbit design system implemented in SwiftUI for iOS

Orbit is a SwiftUI component library which provides developers the easiest possi

Kiwi.com 27 Sep 21, 2022
A SwiftUI App that displays information about the planets in our solar system.

MySpaceApp Created by Noman Ahmad Current Version : 1.0 Description: MySpaceApp is a simple ios app designed for space enthusiasts. With this app, you

Noman Ahmad 1 Nov 2, 2021
A demo of how you can integrate SwiftUI and Airtable in your app

SwiftUI Airtable Demo This is a small, functional example app that demonstrates how you can use Airtable as a lightweight backend. I wouldn't recommen

Zack Shapiro 142 Aug 14, 2022
A demo app to showcase testable, modern iOS development with SwiftUI and Combine on MVVM-C architecture.

Coinz_App_iOS A demo app to showcase testable, modern iOS development with SwiftUI and Combine on MVVM-C architecture. Tech Stack: Swift, SwiftUI, Com

Burhan Aras 0 Dec 26, 2021
A directory demo app written with SwiftUI, Core Data, and Alamofire

Directory-SwiftUI A directory demo app written with SwiftUI, Core Data, and Alamofire Getting Started Clone (or fork) this repo: git clone [email protected]

Harold Martin 11 Jul 13, 2022
Joseph Heck 18 Aug 6, 2022
A very simple Rick & Morty app to demo GraphQL + SwiftUI

MortyUI A very simple Rick & Morty app to demo GraphQL + SwiftUI Characters Character detail Episode This app have a very simple SwiftUI MVVM architec

Thomas Ricouard 440 Sep 14, 2022
A SwiftUI wrapper around the `Add to Siri` button used to donate INIntents to the system.

AddToSiri A SwiftUI wrapper around the Add to Siri button used to donate INIntents to the system. Originally created by Reddit user u/dippnerd (Github

Florian Schweizer 4 Apr 22, 2022
A lightweight and efficient bus tracker app for the Miami-Dade Transit System

A lightweight bus tracker app for the Miami-Dade Transit System Built in Swift, this app features a favorites page, real-time bus location and ETA, us

Jacob Schuster 1 Dec 10, 2021
Demo implementing Modern MVVM with Combine and SwiftUI

ModernMVVM-Combine-SwiftUI Demo implementing Modern MVVM with Combine and SwiftUI Includes the following: Publishers feedback with needed extensions V

Ahmed M. Hassan 3 Aug 15, 2022
Demo to show Air Quality Indices of Cities (in India) using SwiftUI and Combine Framework

AirQualityMonitoring-SwiftUI-Combine Demo to show Air Quality Indices of Cities (in India) using SwiftUI and Combine Framework Demo Video City List wi

Minhaz Panara 0 Jan 23, 2022
Booky heavily-commented demo app built to explore Apple's new 'App Intents' framework introduced in iOS 16

Booky Demo App ℹ️ ABOUT Booky is a work-in-progress, heavily-commented demo app built to explore Apple's new 'App Intents' framework introduced in iOS

Alex Hay 61 Sep 28, 2022
A macOS app to simulate the system update

Goaf-Happy-Fishing A macOS app to simulate the system update. Turn on the app, t

Logeast 1 Dec 23, 2021
SwiftWebUI - A demo implementation of SwiftUI for the Web

SwiftWebUI More details can be found on the related blog post at the Always Right Institute. At WWDC 2019 Apple announced SwiftUI. A single "cross pla

SwiftWebUI 3.8k Sep 18, 2022