📦 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.

🚀 Installation

Install via npm or yarn:

npm install smooth-components
# or
yarn add smooth-components

🖼️ Poster Component

The Poster component is ideal for showcasing images like movie posters, artworks, product covers, or any visual element that needs emphasis. It includes styling options for borders, size, opacity, and an optional animated glint effect.

✅ Example Usage

import { Poster } from 'smooth-components'

export default function App() {
  return (
    <Poster
      alt="Cyberpunk City"
      src="/images/cyberpunk.jpg"
      styles={{
        width: 240,
        height: 360,
        borderColor: '#555',
        opacity: 0.95,
      }}
    />
  )
}

🔧 Props

| Prop | Type | Default | Description | | -------------------- | ------------------ | ------------------------------ | --------------------------------------------------------- | | alt | string | — | Descriptive alt text for accessibility. | | src | string | — | Path or URL to the image. | | styles | object | — | Optional custom styles for the container. | | styles.opacity | number \| string | 0.91 | Opacity of the image container. | | styles.width | number \| string | 'auto' | Width of the image container. | | styles.height | number \| string | 'auto' | Height of the image container. | | styles.borderColor | string | 'oklch(12.9% 0.042 264.695)' | Color of the border around the poster. | | hasGlintEffect | boolean | true | Enables a subtle animated glint overlay across the image. |

💡 You can use numbers (interpreted as px) or standard CSS units (px, %, em, etc.) for style values. The glint effect adds a stylish shimmer animation for extra polish.

🧩 More Components Coming Soon

This is just the beginning. Stay tuned for new additions including:

• Modals
• Cards
• Loaders
• And more...

📝 License

MIT © Jaime Torres See the full license in LICENSE.

📬 Connect with Me

• 🌐 Portfolio
• 💼 LinkedIn
• 📧 Email
• 🐙 GitHub

Let me know if you’d like to add:

• Usage with Tailwind or a specific framework
• Storybook/preview link
• Development & contribution guide
• More animated gifs/screenshots

Want me to help generate a demo GIF or improve visuals? Happy to assist.