# swiftcn > Typed utility styling and editable component recipes for native SwiftUI. Tailwind-style classes such as `.tw("p-4 bg-surface rounded-lg")` resolve to ordinary SwiftUI modifiers, button classes select Apple's native button styles, and 64 components are source you can copy and edit. Swift 6, iOS 17+, macOS 14+, no runtime dependencies. Notes for writing swiftcn code: - Only the classes in the [class reference](/swiftcn/classes.md) are valid. swiftcn is not Tailwind's full set: there are no responsive breakpoints, flex or grid utilities, percentages, `rem`, `calc`, or CSS variables. Use native SwiftUI stacks for layout. - One invalid class leaves the whole surface unstyled at run time. Add the `SwiftCNLintPlugin` build plugin to every target that uses swiftcn (see Installation); the build then fails on an invalid class before Swift compiles. To check without building, run `swift run swiftcn-lint Sources --format json` after editing class strings; each problem includes the file, line, column, and a suggested replacement. - Bracket values use native units: `w-[240]` is 240 points, `duration-[400]` is 400 milliseconds, `rotate-[3]` is 3 degrees. Interpolate Swift values inside brackets: `rotate-[\(angle)]`. - Typed utilities have the same vocabulary with compiler checks: `.tw(.p(4), .bg(.surface), .rounded(.lg))`. - Use `.buttonStyle(.tw("button-primary"))` for buttons; Apple draws the bezel. - Keep state, focus, gestures, and navigation in SwiftUI. Classes only describe appearance and animation. ## Docs - [Introduction](/swiftcn/docs): Familiar utility classes. Real SwiftUI views. Styles you can own. - [Installation](/swiftcn/docs/installation): Add SwiftCN as a package, or copy the source into your project. - [Quick start](/swiftcn/docs/quick-start): Build a native SwiftUI screen with state, shared recipes, and gentle motion. - **Styling** - [Styling & composition](/swiftcn/docs/styling): Compose string classes or typed utilities over native views. - [Utility reference](/swiftcn/docs/utilities): The supported vocabulary and its native SwiftUI mappings. - [Arbitrary arguments](/swiftcn/docs/arguments): Use explicit points, colors, transforms, and animation timing. - [Typed interpolation](/swiftcn/docs/interpolation): Compose class strings with native Swift values and animations. - [Native modifier plugins](/swiftcn/docs/native-modifiers): Register real SwiftUI modifiers as classes and compose them with cn. - **Design system** - [Themes](/swiftcn/docs/theme): Adaptive colors and native typography through the SwiftUI environment. - [Adaptive surfaces](/swiftcn/docs/adaptive-surfaces): Liquid Glass where the system provides it, with native fallbacks chosen by role. - [Global rules](/swiftcn/docs/global-rules): Set app defaults, editable recipes, custom utilities, and motion presets. - [Native controls & state](/swiftcn/docs/native-controls): Keep SwiftUI actions, roles, focus, and gestures. - [Native composition](/swiftcn/docs/native-composition): Style native SwiftUI controls, sheets, navigation, and split views with editable recipes. - [iPhone Duo](/swiftcn/docs/iphone-duo): Native pane placement, reserved regions, and repeatable catalog checks. - [Composable components](/swiftcn/docs/components): Compose card and field parts around native SwiftUI controls. - Component library - [Native component library](/swiftcn/docs/component-library): All 64 catalog entries, with native behavior, runnable examples, and copyable source. - [Accordion](/swiftcn/docs/component-library/accordion): Native accordion composition, package imports, and editable Swift source. - [Alert](/swiftcn/docs/component-library/alert): Native alert composition, package imports, and editable Swift source. - [Alert Dialog](/swiftcn/docs/component-library/alert-dialog): Native alert dialog composition, package imports, and editable Swift source. - [Aspect Ratio](/swiftcn/docs/component-library/aspect-ratio): Native aspect ratio composition, package imports, and editable Swift source. - [Attachment](/swiftcn/docs/component-library/attachment): Native attachment composition, package imports, and editable Swift source. - [Avatar](/swiftcn/docs/component-library/avatar): Native avatar composition, package imports, and editable Swift source. - [Badge](/swiftcn/docs/component-library/badge): Native badge composition, package imports, and editable Swift source. - [Breadcrumb](/swiftcn/docs/component-library/breadcrumb): Native breadcrumb composition, package imports, and editable Swift source. - [Bubble](/swiftcn/docs/component-library/bubble): Native bubble composition, package imports, and editable Swift source. - [Button](/swiftcn/docs/component-library/button): Native button composition, package imports, and editable Swift source. - [Button Group](/swiftcn/docs/component-library/button-group): Native button group composition, package imports, and editable Swift source. - [Calendar](/swiftcn/docs/component-library/calendar): Native calendar composition, package imports, and editable Swift source. - [Card](/swiftcn/docs/component-library/card): Native card composition, package imports, and editable Swift source. - [Carousel](/swiftcn/docs/component-library/carousel): Native carousel composition, package imports, and editable Swift source. - [Chart](/swiftcn/docs/component-library/chart): Native chart composition, package imports, and editable Swift source. - [Checkbox](/swiftcn/docs/component-library/checkbox): Native checkbox composition, package imports, and editable Swift source. - [Collapsible](/swiftcn/docs/component-library/collapsible): Native collapsible composition, package imports, and editable Swift source. - [Combobox](/swiftcn/docs/component-library/combobox): Native combobox composition, package imports, and editable Swift source. - [Command](/swiftcn/docs/component-library/command): Native command composition, package imports, and editable Swift source. - [Context Menu](/swiftcn/docs/component-library/context-menu): Native context menu composition, package imports, and editable Swift source. - [Data Table](/swiftcn/docs/component-library/data-table): Native data table composition, package imports, and editable Swift source. - [Date Picker](/swiftcn/docs/component-library/date-picker): Native date picker composition, package imports, and editable Swift source. - [Dialog](/swiftcn/docs/component-library/dialog): Native dialog composition, package imports, and editable Swift source. - [Direction](/swiftcn/docs/component-library/direction): Native direction composition, package imports, and editable Swift source. - [Drawer](/swiftcn/docs/component-library/drawer): Native drawer composition, package imports, and editable Swift source. - [Dropdown Menu](/swiftcn/docs/component-library/dropdown-menu): Native dropdown menu composition, package imports, and editable Swift source. - [Empty](/swiftcn/docs/component-library/empty): Native empty composition, package imports, and editable Swift source. - [Field](/swiftcn/docs/component-library/field): Native field composition, package imports, and editable Swift source. - [Hover Card](/swiftcn/docs/component-library/hover-card): Native hover card composition, package imports, and editable Swift source. - [Input](/swiftcn/docs/component-library/input): Native input composition, package imports, and editable Swift source. - [Input Group](/swiftcn/docs/component-library/input-group): Native input group composition, package imports, and editable Swift source. - [Input OTP](/swiftcn/docs/component-library/input-otp): Native input otp composition, package imports, and editable Swift source. - [Item](/swiftcn/docs/component-library/item): Native item composition, package imports, and editable Swift source. - [Kbd](/swiftcn/docs/component-library/kbd): Native kbd composition, package imports, and editable Swift source. - [Label](/swiftcn/docs/component-library/label): Native label composition, package imports, and editable Swift source. - [Marker](/swiftcn/docs/component-library/marker): Native marker composition, package imports, and editable Swift source. - [Menubar](/swiftcn/docs/component-library/menubar): Native menubar composition, package imports, and editable Swift source. - [Message](/swiftcn/docs/component-library/message): Native message composition, package imports, and editable Swift source. - [Message Scroller](/swiftcn/docs/component-library/message-scroller): Native message scroller composition, package imports, and editable Swift source. - [Native Select](/swiftcn/docs/component-library/native-select): Native native select composition, package imports, and editable Swift source. - [Navigation Menu](/swiftcn/docs/component-library/navigation-menu): Native navigation menu composition, package imports, and editable Swift source. - [Pagination](/swiftcn/docs/component-library/pagination): Native pagination composition, package imports, and editable Swift source. - [Popover](/swiftcn/docs/component-library/popover): Native popover composition, package imports, and editable Swift source. - [Progress](/swiftcn/docs/component-library/progress): Native progress composition, package imports, and editable Swift source. - [Questionnaire](/swiftcn/docs/component-library/questionnaire): Native questionnaire composition, package imports, and editable Swift source. - [Radio Group](/swiftcn/docs/component-library/radio-group): Native radio group composition, package imports, and editable Swift source. - [Resizable](/swiftcn/docs/component-library/resizable): Native resizable composition, package imports, and editable Swift source. - [Scroll Area](/swiftcn/docs/component-library/scroll-area): Native scroll area composition, package imports, and editable Swift source. - [Select](/swiftcn/docs/component-library/select): Native select composition, package imports, and editable Swift source. - [Separator](/swiftcn/docs/component-library/separator): Native separator composition, package imports, and editable Swift source. - [Sheet](/swiftcn/docs/component-library/sheet): Native sheet composition, package imports, and editable Swift source. - [Sidebar](/swiftcn/docs/component-library/sidebar): Native sidebar composition, package imports, and editable Swift source. - [Skeleton](/swiftcn/docs/component-library/skeleton): Native skeleton composition, package imports, and editable Swift source. - [Slider](/swiftcn/docs/component-library/slider): Native slider composition, package imports, and editable Swift source. - [Spinner](/swiftcn/docs/component-library/spinner): Native spinner composition, package imports, and editable Swift source. - [Switch](/swiftcn/docs/component-library/switch): Native switch composition, package imports, and editable Swift source. - [Table](/swiftcn/docs/component-library/table): Native table composition, package imports, and editable Swift source. - [Tabs](/swiftcn/docs/component-library/tabs): Native tabs composition, package imports, and editable Swift source. - [Textarea](/swiftcn/docs/component-library/textarea): Native textarea composition, package imports, and editable Swift source. - [Toast](/swiftcn/docs/component-library/toast): Native toast composition, package imports, and editable Swift source. - [Toggle](/swiftcn/docs/component-library/toggle): Native toggle composition, package imports, and editable Swift source. - [Toggle Group](/swiftcn/docs/component-library/toggle-group): Native toggle group composition, package imports, and editable Swift source. - [Tooltip](/swiftcn/docs/component-library/tooltip): Native tooltip composition, package imports, and editable Swift source. - [Typography](/swiftcn/docs/component-library/typography): Native typography composition, package imports, and editable Swift source. - **Motion** - [Animations](/swiftcn/docs/animations): Let SwiftUI interpolate state changes with familiar animation classes. - [Shared elements](/swiftcn/docs/shared-elements): Connect views with group classes and native matched geometry. - **Development** - [Build-time checks](/swiftcn/docs/build-time-checks): Catch misspelled classes when you build, before a view renders unstyled. - [Visual testing](/swiftcn/docs/visual-testing): Verify native appearances, state behavior, and platform boundaries. - [Troubleshooting](/swiftcn/docs/troubleshooting): Find invalid classes, fix state handling, and keep theme rules in scope.