Get started

Four steps, and every part imports the way it does here.

01Copy the folders
Copy the library’s folders brand, components, home, product, screens and details and the four stylesheets into your project as src/kit/. This site keeps them there and refreshes them with kit.ts sync.
02Add the alias
Add one alias in tsconfig.json. Next and Turbopack read it, so there is no bundler config.
tsconfig.json
```
{  "compilerOptions": {    "paths": {      "@rchursin/*": ["./src/kit/*"]    }  }}
```

03Import the styles

Import the styles once, in src/app/globals.css.

src/app/globals.css

@import "../styles/brand.css";@import "../styles/effects.css";@import "../styles/luxe.css";@import "../styles/product.css";

04Wrap the app
Wrap the app once in AnnouncerProvider and ToastProvider (this site does it in BrandShell) and put the class dark on <html> for dark mode. Every part works in both themes.

Four steps, and every part imports the way it does here.

01Copy the folders
Copy the library’s folders brand, components, home, product, screens and details and the four stylesheets into your project as src/kit/. This site keeps them there and refreshes them with kit.ts sync.
02Add the alias
Add one alias in tsconfig.json. Next and Turbopack read it, so there is no bundler config.
tsconfig.json
```
{  "compilerOptions": {    "paths": {      "@rchursin/*": ["./src/kit/*"]    }  }}
```

Import the styles once, in src/app/globals.css.

src/app/globals.css

@import "../styles/brand.css";@import "../styles/effects.css";@import "../styles/luxe.css";@import "../styles/product.css";

04Wrap the app
Wrap the app once in AnnouncerProvider and ToastProvider (this site does it in BrandShell) and put the class dark on <html> for dark mode. Every part works in both themes.