React components for creative developers
Highly customizable React components ready to copy and paste into your Tailwind CSS projects. Made to be customized, matching an Apple-inspired visual polish and precise spatial harmony.
Component Explorer
components/
import React, { type MouseEventHandler, type ReactNode } from 'react'
type ButtonProps = {
children?: ReactNode
onClick?: MouseEventHandler<HTMLButtonElement>
}
export default function Button(props: ButtonProps) {
const { children, onClick } = props
return (
<button
onClick={onClick}
className="button-secondary button-pill text-button"
>
{children || 'Button'}
</button>
)
}What's inside
A refined foundation built on clean CSS variables, elegant custom tokens, and modular components.
15+ Components
Ready to use in your Next.js and React projects. Simple copying, pasting, and full ownership.
Workflows
Pre-configured page layouts, interactive billing structures, and modern dashboards to speed up product launches.
Fully Typed
Constructed using TypeScript, React 19, and Tailwind CSS. Provides auto-completions, type checkers, and clean APIs.
For Everyone
Highly accessible interfaces designed with keyboard navigation, aria tags, and responsive design systems.
CLI Tool
Install and update components instantly. Run npx commands directly inside your development workspaces.
GitHub Stars
Accelerating growth driven by standard-conforming builders and design lovers worldwide.
Loved by developers
See how frontend engineers are utilizing Gamin UI to ship beautiful components instantly.
"The button styling and spacing system is pure art. Very clean variables structure, copy-pasting is a dream!"
Alex V.
@alexv_dev
"The component installation is super fast. Zero dependencies conflicts. Type-safe APIs make development smooth."
Maria R.
@mariacodes
"Gamin UI components feel polished right out of the box. Highly responsive, adapting perfectly to dark/light."
Thomas H.
@tommy_h
"The Apple-like visual language is just gorgeous. Subtle borders, clean text weights, and great whitespace balance!"
Kate L.
@katestyles
See them in action
Test real interactive registry components and animation visualizers directly below.
Live Preview
Showing active component: button
Micro-Animations
Shiny Text Effect
Hover to see gradient shift
Built using inline CSS keyframe gradient shift rules.
Interactive Toolbar
Interactive toolbar triggers client state modifications.
Get started in seconds
Run the installer command using npx to inject components directly.
npx gamin-ui add buttonInstalls required dependencies automatically using your detected package manager (npm, pnpm, yarn, bun).
Supported ecosystems
Stop building from scratch
Start copying, pasting, and customizing beautifully polished components today. Maintain full control of your codebase.