BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/Pixelact UI/button

Pixelact Button

pixelact-ui/button
FreeComponent

A simple button component.

Live preview

live · rendered by the registry
Rendered by Pixelact UI on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://pixelactui.com/r/button.json

Source

components/ui/pixelact-ui/button/index.tsxpixelactui.com/r/button.json
1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { cn } from "@/lib/utils";
4import { Button as ShadcnButton } from "@/components/ui/button";
5import "@/components/ui/pixelact-ui/styles/styles.css";
6import "./button.css";
7
8const pixelButtonVariants = cva(
9 "pixel__button pixel-font cursor-pointer rounded-none w-fit items-center justify-center whitespace-nowrap text-sm transition-colors transition-all duration-100",
10 {
11 variants: {
12 variant: {
13 default: "pixel-default__button box-shadow-margin bg-white text-black",
14 secondary: "pixel-secondary__button box-shadow-margin",
15 warning: "pixel-warning__button box-shadow-margin",
16 success: "pixel-success__button box-shadow-margin",
17 destructive: "pixel-destructive__button box-shadow-margin",
18 link: "pixel-link__button bg-transparent text-link underline-offset-4 underline",
19 },
20 size: {
21 default: "h-10 px-4 py-2",
22 sm: "h-9 px-3 text-xs",
23 lg: "h-11 px-8 text-base",
24 },
25 },
26 defaultVariants: {
27 variant: "default",
28 size: "default",
29 },
30 }
31);
32
33export interface PixelButtonProps
34 extends React.ButtonHTMLAttributes<HTMLButtonElement>,
35 VariantProps<typeof pixelButtonVariants> {
36 asChild?: boolean;
37}
38
39const Button = React.forwardRef<
40 React.ComponentRef<typeof ShadcnButton>,
41 PixelButtonProps
42>(({ className, variant, size, ...props }, ref) => {
43 return (
44 <ShadcnButton
45 {...props}
46 className={cn(pixelButtonVariants({ variant, size }), className)}
47 ref={ref}
48 />
49 );
50});
51
52export { Button };

What it pulls in

Other registry items

  • button

Files it writes

  • components/ui/pixelact-ui/button/index.tsx
  • components/ui/pixelact-ui/button/button.css
  • components/ui/pixelact-ui/styles/styles.css

Facts

Registry
Pixelact UI
Type
registry:component
Access
Free
Files written
3
Licence
MIT
First indexed
2026-08-03
Last confirmed
today

Go to the source

Docs on Pixelact UI pixelactui.com pixelact-ui/pixelact-ui on GitHub Raw registry item This item as JSON

More from Pixelact UI

All 28 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
Pixelact AccordionaccordionPixelact UIComponentsFreeno deps · 2 files
Pixelact AlertalertPixelact UIComponentsFreeno deps · 2 files
Pixelact Alert Dialogalert-dialogPixelact UIComponentsFreeno deps · 2 files
Pixelact AvataravatarPixelact UIComponentsFreeno deps · 2 files
Pixelact BadgebadgePixelact UIComponentsFreeno deps · 2 files
Pixelact BreadcrumbbreadcrumbPixelact UIComponentsFreeno deps · 2 files
Pixelact CalendarcalendarPixelact UIComponentsFreeno deps · 2 files
Pixelact CardcardPixelact UIComponentsFreeno deps · 2 files
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex