Getting Started

SwiftUI.js is published as a component package. The docs site is separate and statically exported, but your application consumes only the UI package.

Install

pnpm add @swiftuijs/ui react react-dom

Include Styles

The component package ships its compiled CSS alongside the React exports.

import '@swiftuijs/ui/style/index.css';

Import the stylesheet once near the root of your application so token-driven defaults are available to every component.

Render Your First View

import { Button, Text, VStack } from '@swiftuijs/ui';

export function Demo() {
  return (
    <VStack spacing="md">
      <Text variant="body">Hello from SwiftUI.js.</Text>
      <Button>Continue</Button>
    </VStack>
  );
}

See An Integrated Demo

Open the kitchensink demo when you want to inspect the library as a composed interface. It is built from the shipped component package plus local prop values and app state, so it is a better evaluation target than a single isolated component.

Recommended Next Steps

1. Open the kitchensink demo to inspect the library as an app surface.
2. Read SwiftUI Alignment to understand how stacks and alignment guides are expressed on the web.
3. Read Responsive Design before building adaptive layouts.
4. Use the generated component reference for individual props, examples, and maturity notes.

Contribution Expectations

When you add a new component, ship the tests, Storybook story, and docs together so the implementation and the public narrative stay in sync.

Breaking rewrites are allowed when they improve correctness, remove inconsistent behavior, or make the foundation easier to support. If a rewrite changes the public surface, document the difference instead of hiding it.