Modern Animated UI Components Based On shacn/ui

Prism UI is a modern React UI component library that extends the capabilities of shadcn/ui. It provides a collection of pre-designed, animated, production-ready components ready for use in your web applications.

Built with React, TypeScript, and Tailwind CSS, Prism UI enhances the existing shadcn/ui components with advanced animations and modern UI patterns. This allows you to create modern and highly interactive user interfaces quickly.

GitHub Repo

Live Demo

Features

🎨 Beautiful Components: A wide range of components from buttons to complex data tables.

🚀 Ship Faster: Focus on your product, not on building UI components. Battle-tested designs help convert visitors into happy customers.

🔧 Extended Components: Takes shadcn/ui components further with additional features and variations.

♿ Accessible: All components follow WAI-ARIA guidelines.

🌙 Dark Mode: Built-in dark mode support with consistent animations.

🌐 React Server Components: Built for the Next.js.

📐 Ready-to-use Templates: Includes landing pages, dashboards, and app templates ready for production.

🎬 Advanced Animations: Built-in animations using Framer Motion for smooth, delightful interactions.

🌐 Modern UX Patterns: Implements patterns seen in modern web apps like dub.sh and Vercel.

📋 Copy and Paste: Use components directly in your app and customize them to your needs.

🔍 TypeScript: Written in TypeScript for type safety.

Use Cases

Marketing Websites: Develop engaging landing pages with pre-built hero sections, feature showcases, and pricing tables. Use animated elements to draw user attention. For example, the Hero badge or word reveal text animations can make your landing page more interactive.
Admin Dashboards: Construct robust admin panels using complex UI patterns like floating action panels and display cards. These components can handle substantial data presentation in an organized and visually appealing manner.
Interactive Web Applications: Implement contemporary user interfaces that use advanced animation for a dynamic user experience. Integrate features like expandable cards and popovers to create a more engaging application.
E-commerce Platforms: Create engaging product pages with interactive display cards, and use the timeline component to show delivery or order progress. Use the library to build a modern e-commerce experience.
Portfolio Sites: Design eye-catching portfolio layouts using the logo carousel and timeline components. Incorporate animated elements to highlight your work and skills in a unique way.

Installation

1. Set up a Next.js project with shadcn/ui

pnpm dlx shadcn@latest init

You can use the -d flag for default settings:

pnpm dlx shadcn@latest init -d

2. Configure components.json: During initialization, configure your settings:

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

3. Install additional dependencies:

pnpm add framer-motion
pnpm add tailwindcss-animate
pnpm add lucide-react

4. Install base shadcn/ui components:

pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add card
pnpm dlx shadcn@latest add dialog
pnpm dlx shadcn@latest add separator

5. Install PrismUI components:

pnpm dlx shadcn@latest add "https://www.prismui.tech/r/styles/default/expandable-card.json"

Usage

Once installed, you can start using Prism UI’s animated components. Here is how you would use an expandable card component:

import { Card } from "@/components/ui/card"
import {
  CardTitle,
  CardDescription,
  CardHeader,
  CardContent,
} from "@/components/ui/card"
import { ExpandableCard } from "@/components/expandable-card"
function MyComponent() {
  return (
  <ExpandableCard >
    <Card>
      <CardHeader>
        <CardTitle>Expandable Card</CardTitle>
        <CardDescription>Click to expand</CardDescription>
      </CardHeader>
      <CardContent>
        <p>This is the content of the card.</p>
       </CardContent>
     </Card>
   </ExpandableCard>
  )
}

Key points to note:

The ExpandableCard component wraps the standard Card component to add the expand functionality.
Each component is customizable using Tailwind CSS classes, allowing for unique designs.

Related Resources

shadcn/ui: The foundation for Prism UI, providing a library of unstyled components you can customize. shadcn/ui Documentation
Framer Motion: A motion library for React used for creating fluid animations in Prism UI. Framer Motion Documentation
Tailwind CSS: A utility-first CSS framework that facilitates the creation of custom designs. Tailwind CSS Documentation

FAQs

Q: Does Prism UI replace shadcn/ui completely?
A: No, it builds upon and extends shadcn/ui’s functionality while maintaining compatibility with existing components.

Q: Can I customize the animations?
A: Yes, all animations can be modified through Framer Motion properties or disabled entirely.

Q: Is dark mode supported out of the box?
A: Yes, all components include built-in dark mode support with smooth transitions.