repository·main·Indexed 42 days ago
https://github.com/badtzx0/badtz-uiA performance-optimized React UI library built with TypeScript and Tailwind CSS, specifically designed for building high-converting landing pages. It provides pre-built, fully typed components, conversion-optimized sections (Premium Blocks), and complete templates for rapid MVP development. Components can be installed via the shadcn CLI.
Badtz UI is a free, open-source React component library specifically designed for building high-converting landing pages. Unlike generic UI libraries that focus on basic elements (buttons, inputs), Badtz UI provides specialized, production-ready sections optimized for marketing and conversion.
The template includes several built-in optimizations and design patterns:
The Mappl Template is a modular SaaS template designed for legal professionals and startups. Key technical features include:
Premium Blocks are complete, conversion-optimized sections designed for marketing sites and landing pages. Unlike individual free components (buttons, forms), these are ready-to-deploy sections that follow proven SaaS design patterns.
Available Block Types:
Key Characteristics:
Complete Templates provide entire, production-ready frontends that can be deployed with minimal effort. These are ideal for rapid MVP development or creating investor-ready demos.
Available Template Types:
Technology Stack: Templates are built using:
To use the Mappl SaaS Template, follow these five steps:
npm run dev.The template is built using Next.js, TypeScript, Motion, and Shadcn UI.
npm run devYou can install the Stripe Animated Gradient component using either the CLI or a manual installation process.
Run the following command to add the component directly to your project:
npx shadcn@latest add https://badtz-ui.com/r/stripe-animated-gradient.jsonnpm install clsx tailwind-mergecn utility function in your @/lib folder:import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}stripe-shader.zip, extract stripe-shader.js, and place it inside your components/ui directory.stripe-animated-gradient.tsx source code into your components/ui directory and update any import paths to match your project structure.Create a client-side wrapper for next-themes to manage theme state. This component uses the "use client" directive and re-exports the ThemeProvider from next-themes with standard component props.
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({
children,
...props
}: React.ComponentProps<typeof NextThemesProvider>) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}You can install the BlurReveal component using the shadcn CLI or by manual installation.
Run the following command to add the component directly to your project:
npx shadcn@latest add https://badtz-ui.com/r/blur-reveal.jsonnpm install clsx tailwind-mergecn utility function in your @/lib folder:import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}To apply the theme globally, wrap your application's children with the ThemeProvider in your root layout.
Important Requirements:
suppressHydrationWarning prop to the <html> tag to prevent hydration mismatch errors caused by theme injection.ThemeProvider with recommended props:attribute="class": Uses a CSS class to toggle themes.defaultTheme="system": Defaults to the user's system preference.enableSystem: Enables automatic detection of system color schemes.disableTransitionOnChange: Prevents CSS transitions from firing during theme changes, avoiding visual glitches.import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }: RootLayoutProps) {
return (
<>
<html lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
)
}Detailed documentation for the Pro plan, including setup guides, customization instructions, and best practices for premium blocks and templates, is hosted at the dedicated Pro documentation URL.
https://pro.badtz-ui.com/docs/