A favicon of Fresh Shadcn Buttons

Fresh Shadcn Buttons

A Preact-compatible button component library inspired by Shadcn UI, designed for Deno Fresh, offering diverse styles and animations.

A screenshot of Fresh Shadcn ButtonsVisit

Preact-Compatible Shadcn Buttons for Deno Fresh

Enhance your Deno Fresh applications with these Preact-compatible button components, inspired by Shadcn UI. This library offers a seamless way to integrate a variety of stylish and interactive buttons, overcoming the compatibility challenges of Radix UI-based Shadcn components with Preact. Developers can leverage numerous variants, sizes, and animations to build modern user interfaces efficiently, complete with comprehensive setup guides for Tailwind CSS and project dependencies.

Features:

  • Preact Compatibility: Enables Shadcn-style buttons in Preact-based frameworks like Deno Fresh.
  • Extensive Button Variants: Offers over 20 styles including default, destructive, outline, secondary, ghost, link, expandIcon, ringHover, shine, gooeyRight/Left, linkHover1/2, rainbow, heartbeat, and more.
  • Customizable Sizing: Provides default, sm, lg, and icon size options for flexible button dimensions.
  • Icon Integration: Supports adding icons to buttons with left or right placement, especially with the expandIcon variant.
  • asChild Prop Functionality: Allows prop delegation to immediate child components for enhanced composition and flexibility.
  • Tailwind CSS Integration: Provides detailed configuration for tailwind.config.ts including custom colors, border radius, keyframes, and animations.
  • CSS Variables for Theming: Utilizes CSS variables in style.css for easy theme customization, supporting both light and dark modes.
  • Utility Class Merging: Includes a cn utility function leveraging clsx and tailwind-merge for robust and conditional class name management.
  • Animation Support: Leverages tailwindcss-animate and custom keyframes for various built-in button animations like shine, rainbow, and heartbeat.
  • Detailed Setup Guide: Comprehensive step-by-step instructions for installation and configuration within Deno Fresh projects.
  • Inspired by Popular UIs: Draws inspiration from Shadcn, Magic UI, and Syntax UI for button designs and effects.

Summary:

Shadcn Fresh Buttons provides a robust solution for developers using Deno Fresh and Preact who want to incorporate Shadcn-inspired UI buttons. It offers a wide array of customizable and animated button components, addressing the original Shadcn's Preact incompatibility. With detailed setup instructions and a focus on modern UI aesthetics, this library helps streamline the development of interactive and visually appealing web applications.

Distribution:
opensource
GitHub:
13 Stars
0
Share:

 

  
 

Similar to Fresh Shadcn Buttons:

 

  
  

 

  
  

 

  
  
Fresh Shadcn Buttons: Shadcn-style buttons, now for your Deno Fresh and Preact projects. – Awesome-Shadcn/ui