Button component usage example in Remix
Example of using the Button component in Remix (file: app/routes/index.tsx): import { Button } from "~/components/ui/button" export default function Home() { return ( <div> <Button>Click me</Button> </div> ) }
blocks/setup
167 notes in this subject, read out of this brain and free to use. This is page 3 of 3.
Remix installation guide is separate from React Router
The Remix installation guide is distinct from the React Router installation guide. For React Router, refer to the React Router installation documentation.
Create a new Remix project
Create a new Remix project using the command: npx create-remix@latest my-app
Initialize shadcn/ui in Remix
Run the shadcn init command to set up shadcn/ui in your Remix project: npx shadcn@latest init
Button component import path in Remix
When using the Button component in a Remix project, import it from ~/components/ui/button
React Router Card component example
Example of importing and using the Card component in a React Router app at app/routes/home.tsx: ```tsx import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "~/components/ui/card" export default function Home() { return ( <Card className="max-w-sm"> <CardHeader> <CardTitle>Project Overview</CardTitle> <CardDescription> Track progress and recent activity for your React Router app. </CardDescription> </CardHeader> <CardContent> Your design system is ready. Start building your next component. </CardContent> </Card> ) } ``` For monorepo projects, import from '@workspace/ui/components/card' instead and update apps/web/app/routes/home.tsx.
React Router existing project setup
To add shadcn/ui to an existing React Router project: (1) If needed, create a new React Router project first with 'npm create react-router@latest'. Note that create-react-router already configures Tailwind CSS and the default ~/* import alias. If adding to an older or custom React Router app, ensure both Tailwind CSS and the ~/* import alias are configured. (2) Run 'npx shadcn@latest init' to set up shadcn/ui in the project. (3) Add components using 'npx shadcn@latest add [component-name]', such as 'npx shadcn@latest add button'.
React Router Button component example
Example of importing and using the Button component in a React Router app at app/routes/home.tsx: ```tsx import { Button } from "~/components/ui/button" export default function Home() { return ( <div className="flex min-h-svh flex-col items-center justify-center"> <Button>Click me</Button> </div> ) } ```
React Router setup with CLI
To set up shadcn/ui in a React Router project using the CLI: (1) Run 'npx shadcn@latest init -t react-router' to scaffold a new project and follow the prompts to configure base, preset, monorepo, and other options. For monorepo projects, use 'npx shadcn@latest init -t react-router --monorepo'. (2) Add components using 'npx shadcn@latest add [component-name]'. For monorepo projects, use '-c apps/web' or run from the apps/web directory.
Create TanStack Router project with shadcn/ui
To create a new TanStack Router project with shadcn/ui pre-configured, run: npx create-tsrouter-app@latest my-app --template file-router --tailwind --add-ons shadcn
Import shadcn/ui Button component in TanStack Router
In a TanStack Router file route component, import the Button component with: import { Button } from "@/components/ui/button". Then use it in JSX like <Button>Click me</Button>.
shadcn/create command for TanStack Start
After building a preset on shadcn/create with template=start, the generated command follows this format: npx shadcn@latest init --preset [CODE] --template start. The exact command will include additional selected options such as --base, --monorepo, or --rtl.
Create new TanStack Start project
To create a new TanStack Start project from scratch, run: npx @tanstack/cli@latest create. Select TanStack Start, the React framework, and recommended defaults to ensure Tailwind CSS and the @/* import alias are configured. Do not add the shadcn add-on when prompted; the shadcn CLI will configure shadcn/ui separately.
Initialize shadcn/ui in existing TanStack Start project
To set up shadcn/ui in an existing TanStack Start project, run: npx shadcn@latest init. Ensure that Tailwind CSS and the @/* import alias are already configured in the project before running this command.
TanStack Start installation overview
There are three setup options for installing shadcn/ui in TanStack Start: using shadcn/create to build a preset visually, using the CLI to scaffold from the terminal, or configuring shadcn/ui manually in an existing TanStack Start project.
Vite: install Tailwind CSS with @tailwindcss/vite
Install Tailwind CSS for Vite with: npm install tailwindcss @tailwindcss/vite. Then replace everything in src/index.css with: @import "tailwindcss";
Vite: configure TypeScript @ alias
Vite splits TypeScript configuration across files. Add baseUrl and paths to compilerOptions in both tsconfig.json and tsconfig.app.json with: "baseUrl": ".", "paths": { "@/*": ["./src/*"] }
Vite: configure @ alias in vite.config.ts
Update vite.config.ts to resolve the @ alias by adding resolve.alias configuration. Import path from 'path' and @tailwindcss/vite. The resolve section should be: resolve: { alias: { "@": path.resolve(__dirname, "./src") } }
Vite: install @types/node before configuring vite.config.ts
Run npm install -D @types/node before updating vite.config.ts to ensure Vite can resolve the @ alias.
Card component example for Vite
After adding the Card component with npx shadcn@latest add card, import it as: import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card". The Card component accepts className prop for styling.
Vite installation: three setup paths
shadcn/ui for Vite can be set up three ways: using shadcn/create to build a preset visually and generate a project, using the CLI to scaffold a new Vite project directly from the terminal, or manually configuring shadcn/ui in an existing Vite project.
MessageScroller installation
Install MessageScroller by running: npm install @shadcn/react
MessageScroller import from @shadcn/react
Import MessageScroller and useMessageScroller from the @shadcn/react package: import { MessageScroller, useMessageScroller } from "@shadcn/react/message-scroller"
MessageScroller hooks import
Import hooks from @shadcn/react/message-scroller: useMessageScroller, useMessageScrollerScrollable, and useMessageScrollerVisibility. The hooks read from MessageScroller.Provider and behave identically to the styled component versions.
RTL support available for Next.js, Vite, and TanStack Start
shadcn/ui provides RTL framework guides for Next.js, Vite, and TanStack Start under the Get Started section, with details on installing and configuring RTL support and fonts for each framework.
Example: Next.js RTL layout with DirectionProvider
Example showing how to set up a Next.js root layout with RTL support: ```tsx import { DirectionProvider } from "@/components/ui/direction" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl"> <body> <DirectionProvider direction="rtl">{children}</DirectionProvider> </body> </html> ) } ```
Create Next.js project with RTL support
Use the command `npx shadcn@latest create --template next --rtl` to create a new Next.js project with RTL support. This command generates a components.json file with the `rtl: true` flag.
components.json RTL configuration
When creating a Next.js project with the --rtl flag, the generated components.json file contains `"rtl": true` at the root level of the configuration object.
DirectionProvider component for RTL
Wrap your Next.js application with the DirectionProvider component and set the direction prop to "rtl". Import it from "@/components/ui/direction".
HTML attributes for RTL Next.js
Add `dir="rtl"` and `lang="ar"` attributes to the html tag in app/layout.tsx. Update lang="ar" to your target language as needed.
Recommended RTL font: Noto Sans
For the best RTL experience, use fonts with proper support for your target language. Noto is a recommended font family that pairs well with Inter and Geist. For Arabic, use Noto_Sans_Arabic with subsets: ["arabic"]. For Hebrew, use Noto_Sans_Hebrew.
Example: Next.js RTL layout with Noto Sans Arabic font
Example showing how to set up a Next.js root layout with RTL support and Noto Sans Arabic font: ```tsx import { Noto_Sans_Arabic } from "next/font/google" import { DirectionProvider } from "@/components/ui/direction" const fontSans = Noto_Sans_Arabic({ subsets: ["arabic"], variable: "--font-sans", }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="ar" dir="rtl" className={fontSans.variable}> <body> <DirectionProvider direction="rtl">{children}</DirectionProvider> </body> </html> ) } ```
shadcn/create for new RTL Next.js projects
Use shadcn/create with RTL template flag to generate a fully configured Next.js app with custom themes, Base UI or Radix, icon libraries, and RTL support. Visit /create?template=next&base=base&rtl=true
shadcn/create for TanStack Start with RTL
Use shadcn/create tool with template=start&base=base&rtl=true parameters to create a fully configured TanStack Start app with RTL support, custom themes, Base UI or Radix, and icon libraries pre-configured.
Create TanStack Start project with RTL support
To create a new TanStack Start project with RTL support, run the command: npx shadcn@latest create --template start --rtl. This generates a components.json file with the rtl: true flag.
TanStack Start components.json RTL configuration
When creating a TanStack Start project with the --rtl flag, the components.json file is generated with rtl: true. Example structure: {"$schema": "https://ui.shadcn.com/schema.json", "style": "base-nova", "rtl": true}
DirectionProvider for RTL in TanStack Start
Wrap your app with the DirectionProvider component using direction="rtl" prop in __root.tsx. Add dir="rtl" and lang="ar" (or your target language) attributes to the html tag.
TanStack Start __root.tsx RTL setup example
Import DirectionProvider from @/components/ui/direction. In the RootComponent, wrap children with <DirectionProvider direction="rtl">{children}</DirectionProvider> and set html attributes to lang="ar" dir="rtl".
Font recommendation for TanStack Start RTL
For RTL projects, use Noto Sans font family for proper language support. Noto pairs well with Inter and Geist fonts.
Install Noto Sans Arabic font for RTL
Install the Noto Sans Arabic font using npm: npm install @fontsource-variable/noto-sans-arabic. For other languages like Hebrew, use @fontsource-variable/noto-sans-hebrew instead.
Import Noto font in TanStack Start styles.css
Add @import "@fontsource-variable/noto-sans-arabic"; to src/styles.css. Then set the font in the @theme inline block with --font-sans: "Noto Sans Arabic Variable", sans-serif;
DirectionProvider component usage
Wrap your app with the DirectionProvider component and pass direction="rtl" prop. Import it from @/components/ui/direction and use it in your main.tsx around your App component.
Vite RTL project setup with shadcn/create
Use the shadcn/create tool to create a fully configured Vite app with RTL support, custom themes, Base UI or Radix, and icon libraries.
Create Vite project with RTL flag
To create a new Vite project with RTL support, run: npx shadcn@latest create --template vite --rtl. This command creates a components.json file with the rtl: true flag.
components.json RTL configuration
The components.json file for a Vite RTL project includes the key rtl: true. Example configuration: { "$schema": "https://ui.shadcn.com/schema.json", "style": "base-nova", "rtl": true }
HTML attributes for RTL support
In index.html, add dir="rtl" and lang="ar" attributes to the html tag. The lang attribute should be updated to match the target language.
scroll-fade installation
scroll-fade ships with the shadcn package when your project was set up with npx shadcn@latest init and is automatically imported in your global CSS file. If not already installed, run npm install shadcn and then import the shared utilities in your global CSS file by adding @import "tailwindcss"; and @import "shadcn/tailwind.css";