UI TripleD Documentation

UI TripleD provides production-ready UI blocks, components, and full pages. It is built on top of shadcn/ui and Base UI, with animations powered by Framer Motion.

Key features include:

• Production-ready components: Carefully crafted UI components based on shadcn/ui and Framer Motion.
• Landing Builder: Assemble complete landing pages in seconds by dragging and dropping shadcn/ui blocks.
• Background Builder: Create and export dynamic Aurora backgrounds driven by shaders.
• Grid Generator: Combine complex Tailwind CSS grid layouts with just a few clicks.
• TypeScript Support: Full type safety provided throughout the library.

You can browse all available animated components, view live previews, and explore the library at the official website: https://ui.tripled.work.

Components are fetched from the registry via JSON files at: https://ui.tripled.work/r/{component}.json.

Dependencies

• framer-motion (used for animations and motion effects)
• react

Customization

• Styling: Uses Tailwind CSS. You can customize colors, spacing, and design tokens using Tailwind classes.
• Props: Use component props to configure behavior and appearance.
• Variants: You can create custom variants by extending the base styles.

Best Practices

• Performance: Use lazy loading if the component is used in large lists or below-the-fold content.
• Theming: Ensure your theme configuration includes the necessary CSS variables.
• Testing: Verify keyboard navigation and screen reader compatibility.

You can adapt the Interactive Logs Table to your design system using the following methods:

• Styling: The component uses Tailwind CSS. You can modify colors, spacing, and design tokens directly via Tailwind classes in the source code.
• Props: Pass custom props to configure the component's behavior and appearance (refer to the component source for specific available props).
• Variants: Extend the component's base styles by creating custom variants.

The NativeHoverCard component is built with the following stack:

• Animation: Uses framer-motion for smooth motion effects.
• Primitives: Built on top of shadcn/ui component primitives.
• Styling: Uses Tailwind CSS for styling.
• Dependencies: Requires framer-motion and react.

The Animated Profile Menu is a floating profile avatar that reveals quick action cards using smooth motion.

Dependencies:

• framer-motion (used for animations and motion effects)
• lucide-react (for icons)
• react

Required UI Components:

• button (from shadcn/ui)

Styling: Built on top of shadcn/ui primitives and uses Tailwind CSS for styling.

The NativeTypewriter component provides a typewriter effect with speed control, looping, and a blinking cursor.

Dependencies:

• framer-motion (used for animations and motion effects)
• react

Customization:

• Styling: Uses Tailwind CSS. You can customize colors, spacing, and design tokens via Tailwind classes.
• Props: Use props to configure behavior and appearance.
• Variants: Extend base styles to create custom variants.

The NativeCounterUp component is a native component designed for animated number counting with smooth easing.

Required Dependencies:

• framer-motion (used for animations and motion effects)
• react

Customization:

• Styling: Uses Tailwind CSS. You can customize colors, spacing, and design tokens via Tailwind classes.
• Props: Use props to configure behavior and appearance.
• Variants: Extend base styles to create custom variants.

You can customize the component in the following ways:

• Styling: Use Tailwind CSS classes to modify colors, spacing, and design tokens.
• Props: Pass custom props to configure behavior and appearance.
• Variants: Extend the component's base styles by creating custom variants.

You can customize the Notification Center through several methods:

• Styling: Use Tailwind CSS classes to modify colors, spacing, and design tokens.
• Props: Pass custom props to configure behavior and appearance (refer to the component source for specific prop definitions).
• Variants: Extend the component's base styles to create custom variants.

You can customize the appearance and behavior of the TypewriterEffect component through several methods:

• Styling: Use Tailwind CSS classes to modify colors, spacing, and other design tokens.
• Props: Pass custom props to the component to configure its behavior and appearance (refer to the component source for specific prop definitions).
• Variants: Extend the component's base styles by creating custom variants.

You can adapt the component to your design system using the following methods:

• Styling: Modify colors, spacing, and design tokens using Tailwind CSS classes.
• Props: Use the component's props to configure behavior and appearance (refer to the specific component implementation for available prop names).
• Variants: Extend the component's base styles by creating custom variants.