{"id":28416280,"url":"https://github.com/krusty84/eleganttabs","last_synced_at":"2026-01-28T02:51:29.439Z","repository":{"id":291650997,"uuid":"978321374","full_name":"Krusty84/ElegantTabs","owner":"Krusty84","description":"A simple SwiftUI package for macOS that gives you an easy and nice tab view. You can add icons, text, and custom colors. It handles hover and selection effects for you.","archived":false,"fork":false,"pushed_at":"2025-05-09T06:57:55.000Z","size":55,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T00:21:39.683Z","etag":null,"topics":["macos","swiftui","swiftui-tabview","tabs"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Krusty84.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-05T20:02:52.000Z","updated_at":"2025-05-09T06:57:58.000Z","dependencies_parsed_at":"2025-05-05T21:25:37.542Z","dependency_job_id":"d04c1e35-eeb4-463b-bdbc-8572b44605f4","html_url":"https://github.com/Krusty84/ElegantTabs","commit_stats":null,"previous_names":["krusty84/eleganttabs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Krusty84/ElegantTabs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krusty84%2FElegantTabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krusty84%2FElegantTabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krusty84%2FElegantTabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krusty84%2FElegantTabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Krusty84","download_url":"https://codeload.github.com/Krusty84/ElegantTabs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Krusty84%2FElegantTabs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28835119,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T02:10:51.810Z","status":"ssl_error","status_checked_at":"2026-01-28T02:10:50.806Z","response_time":57,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["macos","swiftui","swiftui-tabview","tabs"],"created_at":"2025-06-03T20:08:11.651Z","updated_at":"2026-01-28T02:51:29.426Z","avatar_url":"https://github.com/Krusty84.png","language":"Swift","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Swift Package Index](https://img.shields.io/badge/swift--package--index-ElegantTabs-blue)](https://swiftpackageindex.com/Krusty84/ElegantTabs)\n![Swift](https://img.shields.io/badge/swift-5.7-orange)\n[![Platform](https://img.shields.io/badge/platform-macOS%2015%2B-lightgrey)](https://developer.apple.com/macos/)\n\n# ElegantTabs\n\nA simple SwiftUI package for macOS that gives you an easy and nice tab view. You can add icons, text, and custom colors. It handles hover and selection effects for you.\n\n## Features\n\n✅ Easy to add tabs with text and icons\n\n✅ Customizable colors, sizes, and fonts\n\n✅ Hover and selected backgrounds\n\n✅ Uses SwiftUI and a result builder for clean code\n\n\n## Requirements\n\n- Tested on macOS 15\n- Tested on Xcode 16.2\n- Swift 5.7 or later\n\n\n## Installation\n\n### Swift Package Manager\n\n1. In Xcode, choose **File ▸ Add Packages…**\n2. Enter the URL of this repository:\n   ```\n   https://github.com/Krusty84/ElegantTabs.git\n   ```\n3. Select the version (for example, Up to Next Major 1.0.0) and add it to your app target.\n\n## Usage\n\nImport the package and use `ElegantTabsView` in your SwiftUI view. You need a `@State` or `@Binding` integer to track which tab is selected.\n\n```swift\nimport SwiftUI\nimport ElegantTabs\n\nstruct ContentView: View {\n    @State private var selectedTab = 0\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab) {\n            TabItem(title: \"Home\", icon: .system(name: \"house.fill\")) {\n                Text(\"Welcome to Home\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gearshape.fill\")) {\n                Text(\"Settings go here\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\n## Custom Style\n\nYou can change colors, icon size, fonts, padding, and more by passing a custom `TabStyle`.\n\n```swift\nlet customStyle = TabStyle(\n    selectedColor: .white,\n    unselectedColor: .gray,\n    hoverBackground: Color.blue.opacity(0.2),\n    selectedBackground: Color.blue.opacity(0.3),\n    backgroundColor: Color(NSColor.windowBackgroundColor),\n    iconSize: 28,\n    font: .headline,\n    cornerRadius: 10,\n    padding: 14,\n    tabHeight: 55,\n    selectedPadding: 6\n)\n\nElegantTabsView(selection: $selectedTab, style: customStyle) {\n    TabItem(title: \"Tab 1\", icon: .system(name: \"1.circle\")) {\n        Text(\"First tab view\")\n    }\n    TabItem(title: \"Tab 2\", icon: .system(name: \"2.circle\")) {\n        Text(\"Second tab view\")\n    }\n}\n```\n\n## Examples\n\n### Default Style\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 0\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab) {\n            TabItem(title: \"Home\", icon: .system(name: \"house.fill\")) {\n                Text(\"Welcome to Home\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gearshape.fill\")) {\n                Text(\"Settings go here\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/0ae9c3e9-74b2-4f16-984c-ed63357368f6\" /\u003e\n\n### Bold \u0026 Large Tabs\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 1\n\n    let boldStyle = TabStyle(\n        selectedColor: .white,\n        unselectedColor: .gray,\n        hoverBackground: Color.blue.opacity(0.2),\n        selectedBackground: Color.blue.opacity(0.3),\n        backgroundColor: Color(NSColor.windowBackgroundColor),\n        iconSize: 30,\n        font: .headline,\n        cornerRadius: 12,\n        padding: 16,\n        tabHeight: 60,\n        selectedPadding: 8\n    )\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab, style: boldStyle) {\n            TabItem(title: \"Dashboard\", icon: .system(name: \"speedometer\")) {\n                Text(\"Dashboard Screen\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Profile\", icon: .system(name: \"person.crop.circle\")) {\n                Text(\"Profile Screen\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/8ee267dd-51b9-41ce-b7a6-98b8105e4ea8\" /\u003e\n\n### Compact Tabs\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 0\n\n    let compactStyle = TabStyle(\n        selectedColor: .blue,\n        unselectedColor: .primary,\n        hoverBackground: Color.gray.opacity(0.2),\n        selectedBackground: Color.gray.opacity(0.1),\n        backgroundColor: Color(NSColor.windowBackgroundColor),\n        iconSize: 20,\n        font: .caption,\n        cornerRadius: 6,\n        padding: 6,\n        tabHeight: 40,\n        selectedPadding: 2\n    )\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab, style: compactStyle) {\n            TabItem(title: \"Files\", icon: .system(name: \"folder\")) {\n                Text(\"File List\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Search\", icon: .system(name: \"magnifyingglass\")) {\n                Text(\"Search View\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Help\", icon: .system(name: \"questionmark.circle\")) {\n                Text(\"Help Center\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/cf3b2030-a577-444f-8d07-c78bb9bcf6a7\" /\u003e\n\n### Colorful Accent Tabs\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 2\n\n    let accentStyle = TabStyle(\n        selectedColor: .white,\n        unselectedColor: .white.opacity(0.7),\n        hoverBackground: Color.purple.opacity(0.3),\n        selectedBackground: Color.purple,\n        backgroundColor: Color.black,\n        iconSize: 24,\n        font: .subheadline,\n        cornerRadius: 10,\n        padding: 12,\n        tabHeight: 50,\n        selectedPadding: 4\n    )\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab, style: accentStyle) {\n            TabItem(title: \"Music\", icon: .system(name: \"music.note\")) {\n                Text(\"Music Player\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Videos\", icon: .system(name: \"play.rectangle\")) {\n                Text(\"Video Gallery\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Podcasts\", icon: .system(name: \"mic.fill\")) {\n                Text(\"Podcast List\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/2a10d527-27b3-4461-aa39-bf6055915420\" /\u003e\n\n### Small Icons \u0026 Captions\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 0\n\n    let smallIconStyle = TabStyle(\n        selectedColor: .green,\n        unselectedColor: .secondary,\n        hoverBackground: Color.green.opacity(0.2),\n        selectedBackground: Color.green.opacity(0.3),\n        backgroundColor: Color(NSColor.windowBackgroundColor),\n        iconSize: 18,\n        font: .caption2,\n        cornerRadius: 8,\n        padding: 10,\n        tabHeight: 45,\n        selectedPadding: 3\n    )\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab, style: smallIconStyle) {\n            TabItem(title: \"Chat\", icon: .system(name: \"bubble.left.and.bubble.right\")) {\n                Text(\"Chat Room\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Calls\", icon: .system(name: \"phone\")) {\n                Text(\"Call Log\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gear\")) {\n                Text(\"App Settings\")\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/80b91042-05a0-4313-888e-0fab1f89061e\" /\u003e\n\n### Tab -\u003e your View\n\n```swift\nstruct ContentView: View {\n    @State private var selectedTab = 0\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab) {\n            TabItem(title: \"Profile\", icon: .system(name: \"person.crop.circle\")) {\n                ProfileView()        // your custom view\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gearshape.fill\")) {\n                SettingsView()       // another custom view\n                    .frame(maxWidth: .infinity, maxHeight: .infinity)\n            }\n        }\n    }\n}\n\nstruct ProfileView: View {\n    var body: some View {\n        VStack(spacing: 20) {\n            // Avatar\n            Image(systemName: \"person.crop.circle.fill\")\n                .resizable()\n                .frame(width: 100, height: 100)\n                .foregroundColor(.blue)\n            \n            // Name\n            Text(\"David Allan Coe\")\n                .font(.title)\n                .fontWeight(.semibold)\n            \n            // Bio\n            Text(\"macOS Developer\\nLoves Swift \u0026 SwiftUI\")\n                .font(.body)\n                .multilineTextAlignment(.center)\n                .foregroundColor(.secondary)\n            \n            Spacer()\n        }\n        .padding()\n    }\n}\n\nstruct SettingsView: View {\n    @State private var notificationsOn = true\n    @State private var darkModeOn = false\n    @State private var autoPlayVideos = false\n\n    var body: some View {\n        Form {\n            Section(header: Text(\"Preferences\")) {\n                Toggle(\"Enable Notifications\", isOn: $notificationsOn)\n                Toggle(\"Dark Mode\", isOn: $darkModeOn)\n                Toggle(\"Auto-play Videos\", isOn: $autoPlayVideos)\n            }\n\n            Section(header: Text(\"About\")) {\n                HStack {\n                    Text(\"App Version\")\n                    Spacer()\n                    Text(\"1.0.0\")\n                        .foregroundColor(.secondary)\n                }\n                HStack {\n                    Text(\"Terms of Service\")\n                    Spacer()\n                    Image(systemName: \"chevron.right\")\n                        .foregroundColor(.secondary)\n                }\n            }\n        }\n        .frame(maxWidth: .infinity, maxHeight: .infinity)\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/bf0ddb2b-c429-416c-822f-7ec6b8ce3442\" /\u003e\n\n### Pass somedate to Tab-View\n\n```swift\nimport SwiftUI\nimport ElegantTabs\n\nclass AppModel: ObservableObject {\n    @Published var username: String = \"Bob\"\n    @Published var isPremiumUser: Bool = false\n}\n\nstruct ContentView: View {\n    @State private var selectedTab = 0\n    @StateObject private var model = AppModel()\n\n    var body: some View {\n        ElegantTabsView(selection: $selectedTab) {\n            TabItem(title: \"Profile\", icon: .system(name: \"person.crop.circle\")) {\n                ProfileView()\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gearshape.fill\")) {\n                SettingsView()\n            }\n        }\n        .environmentObject(model)    // data passing\n    }\n}\n\nstruct ProfileView: View {\n    @EnvironmentObject var model: AppModel\n\n    var body: some View {\n        VStack(spacing: 16) {\n            Text(\"Welcome, \\(model.username)!\")\n                .font(.title)\n            Text(model.isPremiumUser ? \"Premium ✨\" : \"Free User\")\n                .foregroundColor(model.isPremiumUser ? .yellow : .gray)\n        }\n        .padding()\n    }\n}\n\nstruct SettingsView: View {\n    @EnvironmentObject var model: AppModel\n\n    var body: some View {\n        Form {\n            Section(header: Text(\"Account\")) {\n                TextField(\"Name\", text: $model.username)\n            }\n            Section(header: Text(\"Subscription\")) {\n                Toggle(\"Premium User\", isOn: $model.isPremiumUser)\n            }\n        }\n        .padding()\n    }\n}\n```\n\u003cimg width=\"900\" alt=\"image\" src=\"https://github.com/user-attachments/assets/c1701c94-be9a-4bc7-8d0f-6b41e8575cce\" /\u003e\n\n### Place your Tab application in Menu Bar\n\n```swift\n\nimport SwiftUI\nimport AppKit\nimport ElegantTabs\n\n@main\nstruct MyApp: App {\n    var body: some Scene {\n        MenuBarExtra {\n            MenuBarContentView()\n                .frame(width: 300, height: 200)\n        } label: {\n            Image(systemName: \"dot.radiowaves.left.and.right\")\n        }\n        .menuBarExtraStyle(.window)\n    }\n}\n\n// Switch between MainWindow (tabs) and InfoWindow by holding Option\nstruct MenuBarContentView: View {\n    @State private var optionKey = false\n\n    var body: some View {\n        Group {\n            if optionKey {\n                InfoWindow()\n            } else {\n                MainWindow()\n            }\n        }\n        .onAppear {\n            optionKey = NSEvent.modifierFlags.contains(.option)\n        }\n    }\n}\n\n//MainWindow\n\nstruct MainWindow: View {\n    @State private var selected = 0\n\n    let style = TabStyle(\n        selectedColor: .white,\n        unselectedColor: .blue.opacity(0.7),\n        hoverBackground: Color.blue.opacity(0.2),\n        selectedBackground: Color.blue,\n        backgroundColor: Color(NSColor.windowBackgroundColor),\n        iconSize: 20,\n        font: .subheadline,\n        cornerRadius: 8,\n        padding: 10,\n        tabHeight: 45,\n        selectedPadding: 4\n    )\n\n    var body: some View {\n        ElegantTabsView(selection: $selected, style: style) {\n            TabItem(title: \"Status\", icon: .system(name: \"antenna.radiowaves.left.and.right\")) {\n                StatusView()\n            }\n            TabItem(title: \"Settings\", icon: .system(name: \"gearshape.fill\")) {\n                SettingsView()\n            }\n        }\n    }\n}\n\n\nstruct InfoWindow: View {\n    @State private var selected = 0\n\n    var body: some View {\n        ElegantTabsView(selection: $selected) {\n            TabItem(title: \"About\", icon: .system(name: \"info.circle\")) {\n                AboutView()\n            }\n            TabItem(title: \"Help\", icon: .system(name: \"questionmark.circle\")) {\n                HelpView()\n            }\n        }\n    }\n}\n\n\nstruct StatusView: View {\n    var body: some View {\n        VStack {\n            Text(\"All systems nominal\")\n                .font(.headline)\n            Text(\"Last check: \\(Date(), format: .dateTime.hour().minute())\")\n                .font(.caption)\n        }\n        .padding()\n    }\n}\n\nstruct AboutView: View {\n    var body: some View {\n        VStack(spacing: 8) {\n            Text(\"My Menu Bar App\").font(.title2).bold()\n            Text(\"Version 1.0.0\").font(.caption)\n            Text(\"© 2025 My Company\").font(.footnote).foregroundColor(.secondary)\n        }\n        .padding()\n    }\n}\n\n// Use your existing SettingsView here\nstruct SettingsView: View {\n    @State private var notificationsOn = true\n    @State private var darkModeOn = false\n\n    var body: some View {\n        Form {\n            Section(\"Preferences\") {\n                Toggle(\"Enable Notifications\", isOn: $notificationsOn)\n                Toggle(\"Dark Mode\",           isOn: $darkModeOn)\n            }\n        }\n        .padding()\n    }\n}\n\nstruct HelpView: View {\n    var body: some View {\n        VStack(spacing: 8) {\n            Text(\"Need help?\").font(.headline)\n            Text(\"Visit example.com/help for docs and support.\")\n                .font(.caption)\n                .multilineTextAlignment(.center)\n        }\n        .padding()\n    }\n}\n```\n\u003cimg width=\"350\" alt=\"image\" src=\"https://github.com/user-attachments/assets/e6e86617-ff49-433c-8506-e6eeed8e665c\" /\u003e\n\n## Respect\n\nInspired by Jerome [ (myCustomTabView).](https://github.com/jmuzet/myCustomTabView) repository, Merci Dear Jerome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrusty84%2Feleganttabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrusty84%2Feleganttabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrusty84%2Feleganttabs/lists"}