To begin, the most straightforward approach is to utilize one of the provided templates. These templates come pre-configured with the necessary settings, such as CssBaseline and other fundamental components.
If you're new to GitHub and need guidance on initiating a project using a template, you can access comprehensive instructions on how to get started on this example.
Follow TanStack Start getting started guide to create new application:
pnpm dlx @tanstack/cli@latest create my-app
Install dependencies:
pnpm add @bolio-ui/core
Add styles imports, BolioUIProvider and CssBaseline to src/routes/__root.tsx:
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { BolioUIProvider, CssBaseline } from '@bolio-ui/core'
import '@bolio-ui/core/styles.css'
export const Route = createRootRoute({
shellComponent: RootDocument
})
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<HeadContent />
</head>
<body>
<BolioUIProvider>
<CssBaseline />
{children}
</BolioUIProvider>
<Scripts />
</body>
</html>
)
}
Ready to go! Start the development server:
pnpm dev