Components
19 production-ready components. Fully typed with TypeScript, styled with Tailwind CSS. Install via npm or copy the source.
form
7CheckboxGroup
A checkbox list built from a plain array. Hand it your options and it manages selection for you — controlled or uncontrolled. It renders only the list, so it drops straight into a form or a wizard step; any card, heading or button around it stays yours. Colour, size, and font weight are props, so it restyles without overrides.
ChipGroup
The same selection list as CheckboxGroup, wearing pill-shaped chips instead. Identical props, so you can swap one for the other by renaming the component. It renders only the chips — no card, heading or button — so it slots straight into a form or a wizard step. Set multiple={false} to make it behave like a radio group.
Button
A versatile button component with multiple variants, sizes, and optional icon support. Built with accessibility in mind and fully customizable via Tailwind CSS.
Checkbox
An accessible, customizable checkbox component with support for indeterminate state, custom labels, and keyboard navigation.
ConfirmDialog
A modal confirmation dialog with customizable title, message, and action buttons. Perfect for destructive actions that need user confirmation.
ContactForm
A complete contact form with name, email, and message fields. Includes built-in validation, loading state, and success/error handling.
CustomBtn
A highly flexible button component that accepts custom colors, background, padding, and icon. Ideal for branded or themed button variations.
layout
5Footer
A full-featured footer with animated marquee text, navigation links, social icons, and copyright info. Highly customizable with prop-driven content.
Header
A responsive site header with logo, navigation links, and an integrated mobile hamburger menu. Supports custom route highlighting for active states.
MenuButton
An animated hamburger menu toggle button. Used internally by Header but available standalone for custom mobile navigation patterns.
SectionWrapper
A responsive layout wrapper for page sections. Handles max-width constraints and consistent horizontal padding across breakpoints.
SectionHeader
A section heading with an optional index number, title, subtitle, and a 'View All' action link. Consistent typography across all sections.
content
3ArticleCard
A rich card component for displaying article previews with cover image, title, description, tags, author info, and publish date.
ProjectCard
A showcase card for portfolio projects with scroll-driven animations powered by Framer Motion, project image, tech stack tags, and action links.
SocialIcon
An SVG icon component supporting 8+ social platforms: GitHub, Twitter/X, LinkedIn, Behance, Dribbble, Instagram, YouTube, and Website.
animation
4NoiseBackground
A utility component that renders a subtle noise texture overlay. Use it to add depth and texture to sections without distracting from content.
SpotlightReveal
An advanced Framer Motion animation component that reveals content with a spotlight effect on hover. Creates a dramatic, interactive entrance for cards and sections.
Line1
A decorative animated vertical line component for the left side of a layout. Fades in on mount with a smooth animation.
Line2
A decorative animated vertical line component for the right side of a layout. Mirrors Line1 for symmetrical framing.