GreatUI: Dark React UI Library for Tailwind CSS & Shadcn/UI

GreatUI is a UI component registry that adds copy-paste buttons, device mockups, loaders, animated links, WebGL transitions, image effects, and form controls to your React/Next.js projects.

It is built with Tailwind CSS, uses dark-mode utility classes, and relies on Motion for animated components.

Each UI component installs as an editable TypeScript file through a public shadcn registry URL.

Official Website

Browse All Components

Features

Modify styles, behavior, and markup directly.
Built with Tailwind CSS for styling and dark mode.
Fully typed TypeScript components.
WAI-ARIA attributes included for accessibility.
Smooth animations and interactive transitions across components.
Dark mode with high-contrast variants.

Available UI Components

Category	Components
Buttons	Button, Minimal Buttons, Aceternity Button
Illustrations	Mobile Mockup, Macbook Mockup, Vinyl Album Card, ASCII Image, Image Hover Reveal, Avatar Stack, Diagonal Marquee Carousel
Utilities	Deployment Checklist, Terminal Loader, Revision Timeline
Navigation	Liquid Ripple Shader, Cyber Glitch Shader, Vortex Spiral Shader, Liquid Dissolve Shader, Animated Link
Inputs	Animated Select

How To Use GreatUI

Initialize shadcn/ui

pnpm dlx shadcn@latest init

Install a UI Component of Your Choice

# pnpm
pnpm dlx shadcn@latest add https://www.great-ui.com/r/button.json
# npm
npx shadcn@latest add https://www.great-ui.com/r/button.json
# Yarn
yarn dlx shadcn@latest add https://www.great-ui.com/r/button.json
# Bun
bunx shadcn@latest add https://www.great-ui.com/r/button.json

Use the Component

import Button from "@/components/ui/Button";
export default function ButtonPreview() {
  return (
    <div className="flex flex-wrap items-center gap-3 p-6">
      <Button variant="primary">Save Changes</Button>
      <Button variant="secondary">Preview</Button>
      <Button variant="outline">Export</Button>
      <Button variant="ghost">Cancel</Button>
      <Button variant="destructive">Delete Project</Button>
      <Button variant="primary" isLoading>
        Saving
      </Button>
    </div>
  );
}

Direct Copy Installation

GreatUI also exposes each component as source code. For the Button component, place the file at the component path used by the project and retain the cn import:

components/
└── ui/
    └── Button.tsx
lib/
└── utils.ts

Alternatives and Related Resources

FAQs

Q: Does GreatUI install as an npm component package?
A: No. GreatUI distributes individual source files through shadcn registry URLs or direct copying. The repository package is marked private.

Q: Why does the Button import from @/lib/utils?
A: The component uses the shadcn cn helper to merge its base classes, variant classes, size classes, and custom className. Run shadcn init to create the utility and project configuration.

Q: Can I edit a GreatUI component after installation?
A: Yes. The registry writes the component source into the project. Edit the TSX file, Tailwind classes, variants, sizes, and interaction logic locally.