This guide will help you get started with Prism UI in your React project. We'll cover everything from installation to basic usage.
Prerequisites
Before you begin, make sure you have:
- Node.js 18.0 or later
- React project using Next.js 13/14 with App Router
- TypeScript (recommended)
Installation
- Create a new Next.js project or set up an existing one using the shadcn CLI:
npx shadcn@latest init
You can use the -d
flag for defaults (New York style, Zinc color, and CSS variables):
npx shadcn@latest init -d
- During setup, you'll be asked a few questions to configure
components.json
:
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › yes
- Start adding components to your project:
npx shadcn@latest add button
Basic Usage
Import and use components in your project:
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}
Using Pre-built Sections
Prism UI provides several pre-built sections that you can use in your application. Here's how to use the Hero section:
import { Hero } from "@/components/prismui/sections/hero"
export default function Page() {
return (
<main>
<Hero />
</main>
)
}
Creating a Basic Layout
Here's an example of how to create a basic page layout using Prism UI components:
import { Header } from "@/components/prismui/sections/header"
import { Hero } from "@/components/prismui/sections/hero"
import { Features } from "@/components/prismui/sections/features"
import { MainFeatures } from "@/components/prismui/sections/main-features"
import { Footer } from "@/components/prismui/sections/footer"
export default function Home() {
return (
<main>
<Header />
<Hero />
<Features />
<MainFeatures />
<Footer />
</main>
)
}
Dark Mode Support
Prism UI includes built-in dark mode support. To enable it:
- Add the
dark
class to your root layout when dark mode is active - Use the included dark mode variants in your Tailwind classes
<html className={theme === "dark" ? "dark" : ""}>
{/* Your app */}
</html>
Remember to check out our components overview guide for a detailed look at all available components and sections.
Next Steps
- Explore our Components Overview
- Check out the shadcn/ui documentation for base component details
- Join our Discord community for support