Getting StartedGo from zero to a working XDS app in five steps.
Install the CLIUse the XDS CLI to scaffold a new app. It wires up Next.js, the design system, and a working theme out of the box.
Terminal
bash
npx @xds/cli init my-app
cd my-app
Pick a themeChoose between the default theme and the neutral theme. Themes live as separate packages so you can swap them without touching component code.
app/layout.tsx
tsx
import '@xds/theme-default/styles.css';
​
export default function RootLayout({children}) {
  return <html><body>{children}</body></html>;
}
Add your first componentXDS components are imported from per-category subpath entrypoints. This keeps bundles small and makes intent clear.
app/page.tsx
tsx
import {XDSButton} from '@xds/core/Button';
import {XDSStack} from '@xds/core/Layout';
​
export default function Page() {
  return (
    <XDSStack direction="vertical" gap={2}>
      <XDSButton label="Hello XDS" onPress={() => alert('Hi!')} />
    </XDSStack>
  );
}
Customize with xstyleEvery XDS component accepts an `xstyle` prop for StyleX style overrides created via `stylex.create()`.
Style overrides
tsx
import * as stylex from '@stylexjs/stylex';
​
const overrides = stylex.create({
  save: { alignSelf: 'flex-end', marginTop: 16 },
});
​
<XDSButton label="Save" xstyle={overrides.save} />
Run the dev serverStart the dev server and open the preview URL. Changes to components hot-reload automatically.
Terminal
bash
yarn dev