)
}
```
**3. Update navigation:**
```tsx
// app/frontend/components/nav-main.tsx
const navItems = [
{ title: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
{ title: 'Products', href: '/products', icon: Package }, // Add this
// ...
]
```
**4. Add route:**
```ruby
# config/routes.rb
resources :products
```
### Adding New shadcn/ui Components
The starter kit includes many components, but you can add more:
```bash
# Add a specific component
npx shadcn@latest add toast
npx shadcn@latest add calendar
npx shadcn@latest add data-table
# See all available components
npx shadcn@latest add
```
### Customizing the Layout
**Switch between sidebar and header layouts:**
```tsx
// app/frontend/layouts/app-layout.tsx
import AppSidebarLayout from '@/layouts/app/app-sidebar-layout'
import AppHeaderLayout from '@/layouts/app/app-header-layout'
// Use sidebar (default)
export default function AppLayout({ children }: Props) {
return {children}
}
// Or use header layout
export default function AppLayout({ children }: Props) {
return {children}
}
```
### Extending Types
```tsx
// app/frontend/types/index.ts
export interface User {
id: number
name: string
email: string
avatar_url: string | null
}
// Add your own types
export interface Product {
id: number
name: string
description: string
price: number
created_at: string
}
export interface PageProps {
auth: {
user: User | null
}
flash: {
success?: string
error?: string
}
}
```
### Using the Flash Hook
The starter kit includes a flash message system with Sonner toasts:
```tsx
// Already set up in the layout, just use flash in your controller
class ProductsController < ApplicationController
def create
@product = Product.create(product_params)
redirect_to products_path, notice: 'Product created!'
end
end
```
The `use-flash` hook automatically displays flash messages as toasts.
### Removing Features You Don't Need
**Remove settings pages:**
```bash
rm -rf app/frontend/pages/settings
rm -rf app/controllers/settings
# Remove routes in config/routes.rb
```
**Remove authentication (for internal tools):**
```bash
rm -rf app/frontend/pages/sessions
rm -rf app/frontend/pages/users
rm -rf app/frontend/pages/identity
rm app/controllers/sessions_controller.rb
rm app/controllers/users_controller.rb
rm -rf app/controllers/identity
# Update routes and ApplicationController
```
---
## Inertia Modal - Render Pages as Dialogs
The `inertia_rails-contrib` gem and `@inertiaui/modal` package let you render any Inertia page as a modal dialog.
### Installation
```bash
# Ruby gem (optional, for base_url helper)
bundle add inertia_rails-contrib
# NPM package (Vue)
npm install @inertiaui/modal-vue
# NPM package (React)
npm install @inertiaui/modal-react
```
### Setup (Vue)
```javascript
// app/frontend/entrypoints/application.js
import { createInertiaApp } from '@inertiajs/vue3'
import { renderApp } from '@inertiaui/modal-vue'
import { createSSRApp, h } from 'vue'
createInertiaApp({
resolve: (name) => pages[`../pages/${name}.vue`],
setup({ el, App, props, plugin }) {
createSSRApp({
render: () => renderApp(App, props), // Use renderApp
})
.use(plugin)
.mount(el)
},
})
```
### Tailwind Configuration
```javascript
// tailwind.config.js (v3)
module.exports = {
content: [
// ... your content paths
'./node_modules/@inertiaui/modal-vue/src/**/*.vue',
],
}
```
```css
/* For Tailwind v4 */
@import "tailwindcss";
@source '../../../node_modules/@inertiaui/modal-vue';
```
### Basic Usage
**Open a page as modal:**
```vue
Create User
```
**Wrap page content in Modal:**
```vue
Create User
```
### Modal with Base URL
Enable URL updates and browser history:
**Controller:**
```ruby
class UsersController < ApplicationController
def create
render inertia_modal: {
roles: Role.all.as_json
}, base_url: users_path
end
end
```
**Link with navigation:**
```vue
Create User
```
Now the URL changes to `/users/create` when opened, supports browser back button, and can be bookmarked.
### Slideover Variant
```vue
User Details
```
### Nested Modals
```vue
Edit User
Add New Role
```
### Closing Modals
```vue
```
---
## Integrating shadcn/ui
Use shadcn/ui components with Inertia Rails for a polished UI.
### Setup (Vue)
```bash
# Initialize shadcn/ui
npx shadcn-vue@latest init
# Add components
npx shadcn-vue@latest add button input card form
```
### Form with shadcn/ui
```vue
Login
```
### Data Table with Sorting and Filtering
```vue