smooth-components

Elegant, customizable, and accessible React components.

smooth-components is a growing library of beautifully designed, reusable UI components for React. Whether you're building a portfolio, dashboard, or e-commerce site, these components help you move fast and look great — without sacrificing accessibility or flexibility.

Features

• Zero CSS imports — styles are automatically injected at runtime, no extra setup needed
• Fully typed — built with TypeScript, includes type declarations out of the box
• Accessible — components enforce accessibility props (e.g. 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

Installation

npm install smooth-components

Peer Dependencies

Requires React 18 or 19:

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

CSS Loading

Styles are injected automatically at runtime — no extra imports needed. If you need manual control (e.g. for SSR), you can import the stylesheet directly:

import 'smooth-components/dist/smooth-components.css'

Importing Types

All prop types are exported for use in your own components:

import type { PosterProps, PosterStyles, FrameSize } from 'smooth-components'
import type { BundlephobiaWidgetProps } from 'smooth-components'

Poster

The <Poster /> component is ideal for showcasing images like movie posters, artworks, product covers, or any visual element that needs emphasis. It includes a 3D border effect, glass overlay, and an optional animated glint effect on hover.

Usage

import { Poster } from 'smooth-components'

<Poster
  alt="Pulp Fiction"
  src="./pulp-fiction.jpg"
  hasFrame={true}
  frameSize="md"
  hasGlintEffect={true}
  onClick={() => console.log('clicked')}
  styles={{
    opacity: 0.91,
    height: '600px',
    width: 'auto'
  }}
/>

Props

| Prop | Type | Default | Required | Description | | ---------------- | ---------------------- | ------- | -------- | --------------------------------------------------------------- | | alt | string | — | Yes | Descriptive alt text for accessibility. | | src | string | — | Yes | Path or URL to the image. | | styles | PosterStyles | — | No | Custom styles for the container (see below). | | hasFrame | boolean | true | No | Shows or hides the 3D border frame around the image. | | frameSize | 'sm' \| 'md' \| 'lg' | 'lg' | No | Controls frame thickness: sm (6px), md (12px), lg (18px). | | hasGlintEffect | boolean | false | No | Enables animated glint overlay across the image. | | onClick | () => void | — | No | Callback function triggered when the poster is clicked. |

PosterStyles

| Property | Type | Default | Description | | --------- | ------------------ | -------- | ------------------------------ | | opacity | number \| string | 0.91 | Opacity of the image container | | width | number \| string | "auto" | Width of the image container | | height | number \| string | "auto" | Height of the image container |

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

BundlephobiaWidget

The <BundlephobiaWidget /> component displays real-time bundle size data for any npm package, powered by the Bundlephobia API. It shows minified/gzipped sizes, download times, tree-shaking support, dependency count, and composition — with built-in skeleton loading states.

Usage

import { BundlephobiaWidget } from 'smooth-components'

<BundlephobiaWidget
  pkg="[email protected]"
  size="lg"
  repository="https://github.com/facebook/react"
  isDarkMode={false}
/>

Props

| Prop | Type | Default | Required | Description | | ------------ | ----------------------------------------------- | ------- | -------- | ------------------------------------------------- | | pkg | `${string}@${number}.${number}.${number}` | — | Yes | Package name with exact semver version. | | size | 'sm' \| 'md' \| 'lg' | 'md' | No | Widget size variant (controls visible sections). | | repository | string | — | No | URL to the source repository (shows GitHub link). | | isDarkMode | boolean | false | No | Enables dark mode styling. |

Size Variants

| Size | Description | Minified | Gzipped | Download times | Badges | Description text | Composition | | ---- | ----------------------------------------------------- | -------- | ------- | -------------- | ------ | ---------------- | ----------- | | sm | Compact — metrics and download times only | ✓ | ✓ | ✓ | — | — | — | | md | Standard — adds badges, description, and header links | ✓ | ✓ | ✓ | ✓ | ✓ | — | | lg | Full — includes dependency composition breakdown | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |

More Components Coming Soon

Stay tuned for new additions including modals, cards, loaders, and more.

License

MIT © Jaime Torres

Connect

• Portfolio
• LinkedIn
• GitHub
• Email