{"id":18075748,"url":"https://github.com/mit-27/fresh-shadcn-buttons","last_synced_at":"2025-09-05T13:34:58.769Z","repository":{"id":258870014,"uuid":"875115234","full_name":"mit-27/fresh-shadcn-buttons","owner":"mit-27","description":"Shadcn buttons for your Deno's Fresh project.","archived":false,"fork":false,"pushed_at":"2024-10-22T02:45:37.000Z","size":661,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T08:09:55.787Z","etag":null,"topics":["deno","denofresh","fresh","shadcn-ui","typescript"],"latest_commit_sha":null,"homepage":"https://fresh-shadcn-buttons.deno.dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mit-27.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-10-19T06:15:41.000Z","updated_at":"2025-03-03T11:28:52.000Z","dependencies_parsed_at":"2025-05-28T21:15:42.224Z","dependency_job_id":null,"html_url":"https://github.com/mit-27/fresh-shadcn-buttons","commit_stats":null,"previous_names":["mit-27/fresh-shadcn-buttons"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mit-27/fresh-shadcn-buttons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mit-27%2Ffresh-shadcn-buttons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mit-27%2Ffresh-shadcn-buttons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mit-27%2Ffresh-shadcn-buttons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mit-27%2Ffresh-shadcn-buttons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mit-27","download_url":"https://codeload.github.com/mit-27/fresh-shadcn-buttons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mit-27%2Ffresh-shadcn-buttons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261330126,"owners_count":23142482,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["deno","denofresh","fresh","shadcn-ui","typescript"],"created_at":"2024-10-31T11:07:10.695Z","updated_at":"2025-06-22T17:07:40.580Z","avatar_url":"https://github.com/mit-27.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":[],"readme":"# Shadcn Fresh Buttons\n\nShadcn buttons for Deno's Fresh. Shadcn is based on radix-ui and it is not\ncompatible with preact based frontend framework. So I have created button\ncomponent whic is compatible with preact based framework.\n\n## Installation\n\n1. Install Fresh by running the following command:\n ```bash\n deno run -A -r https://fresh.deno.dev\n ```\n2. Install the necessary dependencies by running the following command:\n ```bash\n deno add jsr:@preact-icons/rx npm:class-variance-authority npm:clsx npm:tailwind-merge npm:tailwindcss-animate\n ```\n3. Configure **tailwind.config.ts** file.\n ```js\n import * as animate from \"tailwindcss-animate\";\n\n import type { Config } from \"tailwindcss\";\n\n const config: Config = {\n darkMode: [\"class\"],\n content: [\n \"{routes,islands,components}/**/*.{ts,tsx,js,jsx}\",\n ],\n theme: {\n container: {\n center: true,\n padding: \"2rem\",\n screens: {\n \"2xl\": \"1400px\",\n },\n },\n extend: {\n colors: {\n border: \"hsl(var(--border))\",\n input: \"hsl(var(--input))\",\n ring: \"hsl(var(--ring))\",\n background: \"hsl(var(--background))\",\n foreground: \"hsl(var(--foreground))\",\n primary: {\n DEFAULT: \"hsl(var(--primary))\",\n foreground: \"hsl(var(--primary-foreground))\",\n },\n secondary: {\n DEFAULT: \"hsl(var(--secondary))\",\n foreground: \"hsl(var(--secondary-foreground))\",\n },\n destructive: {\n DEFAULT: \"hsl(var(--destructive))\",\n foreground: \"hsl(var(--destructive-foreground))\",\n },\n muted: {\n DEFAULT: \"hsl(var(--muted))\",\n foreground: \"hsl(var(--muted-foreground))\",\n },\n accent: {\n DEFAULT: \"hsl(var(--accent))\",\n foreground: \"hsl(var(--accent-foreground))\",\n },\n popover: {\n DEFAULT: \"hsl(var(--popover))\",\n foreground: \"hsl(var(--popover-foreground))\",\n },\n card: {\n DEFAULT: \"hsl(var(--card))\",\n foreground: \"hsl(var(--card-foreground))\",\n },\n },\n borderRadius: {\n lg: `var(--radius)`,\n md: `calc(var(--radius) - 2px)`,\n sm: \"calc(var(--radius) - 4px)\",\n },\n keyframes: {\n rainbow: {\n \"0%\": { \"background-position\": \"0%\" },\n \"100%\": { \"background-position\": \"200%\" },\n },\n \"shine\": {\n from: { backgroundPosition: \"200% 0\" },\n to: { backgroundPosition: \"-200% 0\" },\n },\n \"accordion-down\": {\n from: { height: \"0\" },\n to: { height: \"var(--radix-accordion-content-height)\" },\n },\n \"accordion-up\": {\n from: {\n height: \"var(--radix-accordion-content-height)\",\n },\n to: { height: \"0\" },\n },\n buttonheartbeat: {\n \"0%\": {\n \"box-shadow\": \"0 0 0 0 hsl(var(--pulse-color))\",\n },\n \"50%\": {\n \"box-shadow\": \"0 0 0 7px hsl(var(--pulse-color)/0)\",\n },\n \"100%\": {\n \"box-shadow\": \"0 0 0 0 hsl(var(--pulse-color)/0)\",\n },\n },\n },\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"shine\": \"shine 8s ease-in-out infinite\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n rainbow: \"rainbow var(--speed, 2s) infinite linear\",\n buttonheartbeat: \"buttonheartbeat 2s infinite ease-in-out\",\n },\n },\n },\n plugins: [\n animate,\n ],\n };\n\n export default config;\n ```\n4. Replace the given modules in **deno.json** file.\n ```json\n \"imports\": {\n // other imports\n // Remove these two lines\n \"preact\": \"https://esm.sh/preact@10.22.0\",\n \"preact/\": \"https://esm.sh/preact@10.22.0/\",\n\n // Add these lines insted\n \"preact\": \"npm:preact@10.22.1\",\n \"preact/hooks\": \"npm:preact@10.22.1/hooks\",\n \"preact/jsx-runtime\": \"npm:preact@10.22.1/jsx-runtime\",\n },\n\n /// Rest of the file\n ```\n5. Make sure to remove `node_modules` and install the dependencies using\n `deno install` command.\n\n6. Configure the **static/style.css** file.\n ```css\n @tailwind base;\n @tailwind components;\n @tailwind utilities;\n\n @layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 47.4% 11.2%;\n\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 47.4% 11.2%;\n\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n\n --card: 0 0% 100%;\n --card-foreground: 222.2 47.4% 11.2%;\n\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n\n --destructive: 0 100% 50%;\n --destructive-foreground: 210 40% 98%;\n\n --ring: 215 20.2% 65.1%;\n\n --radius: 0.5rem;\n\n --color-1: 0 100% 63%;\n --color-2: 270 100% 63%;\n --color-3: 210 100% 63%;\n --color-4: 195 100% 63%;\n --color-5: 90 100% 63%;\n --pulse-color: var(--primary);\n }\n\n .dark {\n --background: 224 71% 4%;\n --foreground: 213 31% 91%;\n\n --muted: 223 47% 11%;\n --muted-foreground: 215.4 16.3% 56.9%;\n\n --accent: 216 34% 17%;\n --accent-foreground: 210 40% 98%;\n\n --popover: 224 71% 4%;\n --popover-foreground: 215 20.2% 65.1%;\n\n --border: 216 34% 17%;\n --input: 216 34% 17%;\n\n --card: 224 71% 4%;\n --card-foreground: 213 31% 91%;\n\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 1.2%;\n\n --secondary: 222.2 47.4% 11.2%;\n --secondary-foreground: 210 40% 98%;\n\n --destructive: 0 63% 31%;\n --destructive-foreground: 210 40% 98%;\n\n --ring: 216 34% 17%;\n\n --radius: 0.5rem;\n\n --color-1: 0 100% 63%;\n --color-2: 270 100% 63%;\n --color-3: 210 100% 63%;\n --color-4: 195 100% 63%;\n --color-5: 90 100% 63%;\n --pulse-color: var(--primary);\n }\n }\n\n @layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n font-feature-settings: \"rlig\" 1, \"calt\" 1;\n }\n }\n ```\n\n7. Create `lib/utils.ts` file.\n ```js\n import { type ClassValue, clsx } from \"clsx\";\n import { twMerge } from \"tailwind-merge\";\n\n export function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n }\n ```\n8. Create `components/Button.tsx` file.\n ```js\n import { ComponentChildren, isValidElement, JSX } from \"preact\";\n import { cloneElement, forwardRef } from \"preact/compat\";\n import { cva, type VariantProps } from \"class-variance-authority\";\n import { cn } from \"../lib/utils.ts\";\n\n const buttonVariants = cva(\n \"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n expandIcon:\n \"group relative text-primary-foreground bg-primary hover:bg-primary/90\",\n ringHover:\n \"bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2\",\n shine:\n \"text-primary-foreground animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] \",\n gooeyRight:\n \"text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r from-zinc-400 before:transition-transform before:duration-1000 hover:before:translate-x-[0%] hover:before:translate-y-[0%] \",\n gooeyLeft:\n \"text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l from-zinc-400 after:transition-transform after:duration-1000 hover:after:translate-x-[0%] hover:after:translate-y-[0%] \",\n linkHover1:\n \"relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300\",\n linkHover2:\n \"relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300\",\n rainbow:\n \"group relative animate-rainbow cursor-pointer border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n \"rainbow-outline\":\n \"group relative animate-rainbow cursor-pointer border-0 border-input bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] bg-[length:200%] px-4 text-foreground shadow-sm [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-[0] before:h-[20%] before:w-[60%] before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:bg-[length:200%] before:[filter:blur(calc(0.8*1rem))] dark:bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]\",\n hearbeat:\n \"animate-buttonheartbeat bg-primary text-primary-foreground\",\n deno1:\n \"bg-gradient-to-br from-primary/40 to-primary text-white font-semibold hover:bg-secondary transition-colors duration-200 ease-in-out\",\n deno2:\n \"border-[1.5px] border-primary bg-secondary font-bold text-primary shadow-[5px_6px_0_0_#64748b55] outline-primary outline-offset-2 transition-all duration-75 ease-in-out rounded-lg hover:bg-primary/5 focus:outline focus:outline-2\",\n \"smooth-bounce\":\n \"transition-transform duration-300 ease-in-out hover:scale-110 bg-primary text-primary-foreground\",\n },\n size: {\n default: \"h-10 px-4 py-2\",\n sm: \"h-9 rounded-md px-3\",\n lg: \"h-11 rounded-md px-8\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n },\n );\n\n interface IconProps {\n Icon: preact.ComponentType;\n iconPlacement: \"left\" | \"right\";\n }\n\n interface IconRefProps {\n Icon?: never;\n iconPlacement?: undefined;\n }\n\n type ButtonHTMLAttributes = Omit\u003c\n JSX.HTMLAttributes\u003cHTMLButtonElement\u003e,\n keyof VariantProps\u003ctypeof buttonVariants\u003e\n \u003e;\n\n export interface ButtonProps\n extends ButtonHTMLAttributes, VariantProps\u003ctypeof buttonVariants\u003e {\n asChild?: boolean;\n children?: ComponentChildren;\n pulseColor?: string;\n }\n\n export type ButtonIconProps = IconProps | IconRefProps;\n\n const Button = forwardRef\u003c\n HTMLButtonElement,\n ButtonProps \u0026 ButtonIconProps\n \u003e(\n (\n {\n className,\n variant,\n asChild = false,\n size,\n Icon,\n iconPlacement,\n children,\n ...props\n },\n ref,\n ) =\u003e {\n if (asChild \u0026\u0026 isValidElement(children)) {\n return cloneElement(children as preact.VNode, {\n className: cn(buttonVariants({ variant, size, className })),\n ref,\n ...props,\n children: (\n \u003c\u003e\n {Icon \u0026\u0026 iconPlacement === \"left\" \u0026\u0026 (\n \u003cdiv className=\"w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100\"\u003e\n \u003cIcon /\u003e\n \u003c/div\u003e\n )}\n {children.props.children}\n {Icon \u0026\u0026 iconPlacement === \"right\" \u0026\u0026 (\n \u003cdiv className=\"w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100\"\u003e\n \u003cIcon /\u003e\n \u003c/div\u003e\n )}\n \u003c/\u003e\n ),\n });\n }\n\n return (\n \u003cbutton\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n \u003e\n {Icon \u0026\u0026 iconPlacement === \"left\" \u0026\u0026 (\n \u003cdiv className=\"w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100\"\u003e\n \u003cIcon /\u003e\n \u003c/div\u003e\n )}\n {children}\n {Icon \u0026\u0026 iconPlacement === \"right\" \u0026\u0026 (\n \u003cdiv className=\"w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100\"\u003e\n \u003cIcon /\u003e\n \u003c/div\u003e\n )}\n \u003c/button\u003e\n );\n },\n );\n Button.displayName = \"Button\";\n\n export { Button, buttonVariants };\n ```\n\n- That's all you have to do. Now you can check the examples and copy their code\n snippets. Also, check out the props, as they are mostly the same as Shadcn\n buttons.\n\n## Props\n\n| Prop | Type | Default | Values | Description |\n| ------------- | ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |\n| variant | string | default | default \\| destructive \\| outline \\| secondary \\| ghost \\| link \\| expandIcon \\| ringHover \\| shine \\| gooeyRight \\| gooeyLeft \\| linkHover1 \\| linkHover2 \\| rainbow \\| rainbow-outline \\| hearbeat \\| deno1 \\| deno2 \\| smooth-bounce | Type of the button. |\n| size | string | default | default \\| sm \\| lg \\| icon | Size of the button. |\n| className | string | - | - | Custom CSS class for styling. |\n| children | Preact.ComponentChildren | - | - | Children elements. |\n| asChild | boolean | false | true \\| false | Make it Enable to pass all props of button to its immediate child. |\n| Icon | Preact.ComponentType | - | Any icon from Icon libraries | Use it with variant 'expandIcon' and specify iconPlacement. |\n| iconPlacement | string | - | left \\| right | Use it with variant 'expandIcon' and specify Icon. |\n\n## Credits\n\n- Special thanks to [Shadcn](https://ui.shadcn.com/),\n [enhanced-button](https://enhanced-button.vercel.app/),\n [Magic UI](https://magicui.design/) and [Syntax UI](https://syntaxui.com/) for\n the inspiration.\n\n## Support\n\nSupport me by giving a star ⭐ on this repository.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmit-27%2Ffresh-shadcn-buttons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmit-27%2Ffresh-shadcn-buttons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmit-27%2Ffresh-shadcn-buttons/lists"}