Using Saas UI with TanStack Start
A guide for installing Saas UI in TanStack Start projects
Templates
Use one of the following templates to get started quickly. The templates are configured correctly to use Saas UI.
Installation
The minimum node version required is Node.20.x
1
Install dependencies
npx @saas-ui/cli@rc init2
Setup provider
Wrap your application with the CLI-installed Provider in the root route's
document shell.
The generated provider configures:
- Chakra UI with
@saas-ui/chakra-preset - color mode with
next-themes - links used by installed Saas UI components
src/routes/__root.tsx
import * as React from 'react'
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { Provider } from '#components/setup/provider/provider'
export const Route = createRootRoute({
shellComponent: RootDocument,
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html suppressHydrationWarning>
<head>
<HeadContent />
</head>
<body>
<Provider>{children}</Provider>
<Scripts />
</body>
</html>
)
}3
Enjoy!
Combine Chakra UI primitives with editable Saas UI components installed by the CLI to build your interface.
import { Button, HStack } from '@chakra-ui/react'
const Demo = () => {
return (
<HStack>
<Button>Click me</Button>
<Button>Click me</Button>
</HStack>
)
}