smooth-components

Elegant, customizable, and accessible React components.

smooth-components is a library of animated, accessible React components. No CSS imports, full TypeScript support, smooth animations — out of the box.

• Zero CSS imports — Styles inject automatically. No setup required.
• Fully typed — TypeScript definitions for every component and prop.
• Accessible — Components enforce accessibility props such as required alt text.
• Smooth animations — hover effects, glint overlays, 3D borders, and glass reflections
• Lightweight — React and react-dom are externalized, keeping the bundle small
• ESM & UMD — works with any bundler or via CDN

npm install smooth-components

Requires React 18 or 19:

"react": "^18.0.0 || ^19.0.0"
"react-dom": "^18.0.0 || ^19.0.0"

All prop types are exported from the package:

import type { PosterProps, PosterStyles, FrameSize } from 'smooth-components'
import type { BundlephobiaWidgetProps } from 'smooth-components'
import type { HyperLinkProps, HyperLinkStyles, HyperLinkPreviewConfig } from 'smooth-components'
import type { ContributionsOnGithubProps } from 'smooth-components'

A 3D media card with tilt, glint, and frame effects. Accepts images and videos — pass a URL to src and <Poster /> auto-detects the type, playing video in a silent loop.

import { Poster } from 'smooth-components'

<Poster
  alt="My favorite poster hey!"
  src="./severance.webp"
  hasFrame={true}
  frameSize="sm"
  hasGlintEffect={true}
  followCursor={true}
  onClick={() => console.log('clicked')}
  styles={{
    opacity: 0.91,
    height: '600px',
    width: 'auto'
  }}
/>

import { Poster } from 'smooth-components'

<Poster
  alt="Abstract animation"
  src="https://example.com/video.mp4"
  hasFrame={true}
  frameSize="sm"
  followCursor={true}
  styles={{ width: '500px' }}
/>

Numbers are interpreted as px. You can also pass CSS units like "50%", "20rem", etc.

Displays live bundle-size stats for any npm package via the Bundlephobia API. Shows minified/gzipped sizes, download times, tree-shaking support, and dependency composition — with skeleton loading states.

import { BundlephobiaWidget } from 'smooth-components'

<BundlephobiaWidget
  pkg="react@19.1.0"
  size="lg"
  repository="https://github.com/facebook/react"
  isDarkMode={false}
/>

An animated link with an external-link icon and retractable underline. Renders <a> by default; accepts any element via the as prop (e.g. React Router's Link).

import { HyperLink } from 'smooth-components'

<HyperLink href="https://github.com" external>
  Visit GitHub
</HyperLink>

import { Link } from 'react-router-dom'
import { HyperLink } from 'smooth-components'

<HyperLink as={Link} to="/about" showIcon={false}>
  About page
</HyperLink>

Any additional props are forwarded to the underlying element.

Resources (images, videos, custom components) are loaded once when the HyperLink mounts — not on each preview open.

import { HyperLink, ContributionsOnGithub } from 'smooth-components'

<HyperLink
  href="https://github.com/username"
  previewConfig={{
    type: 'custom',
    content: <ContributionsOnGithub username="username" />,
    placement: 'bottom'
  }}
>
  GitHub
</HyperLink>

<HyperLink
  href="https://example.com"
  previewConfig={{
    type: 'image',
    src: 'https://example.com/preview.png',
    alt: 'Site preview',
    width: 320,
    height: 200,
    placement: 'top'
  }}
>
  Visit site
</HyperLink>

A GitHub-style contribution grid for any public user. Fetches data automatically, shows a skeleton while loading, and supports dark mode. Renders the last N weeks with per-cell tooltips.

import { ContributionsOnGithub } from 'smooth-components'

<ContributionsOnGithub
  username="torvalds"
  year={2025}
  isDarkMode={false}
  weeks={26}
/>

Working on adding more components — modals, cards, loaders, and more.

MIT © Jaime Torres

• Portfolio
• LinkedIn
• GitHub
• Email