Composition Pattern

summary

• About
• Input preview
• Accordion code example
• Install dependencies
• Run project
• Code examples

---

About the project:

The Composition Pattern is a way of building components in React (or other frameworks) by combining smaller, reusable pieces. Instead of having a giant "parent" component, you create functionality by assembling smaller components like Lego blocks. This approach makes the code more flexible and easier to maintain because you can mix and match the blocks as needed.

Input preview

Accordion code example

Install dependencies

npm install

Run project

npm run dev

Code examples

Simple Input

import { Field } from "./components";

export function App() {
  return (
    <Field.Root tabIndex={1} className="w-80 h-16 mx-auto">
      <Field.Input />
    </Field.Root>
  )
}

Input with Prefix

import { User } from "lucide-react";

import { Field } from "./components";

export function App() {
  return (
    <Field.Root tabIndex={1} className="w-80 h-16 mx-auto">
      <Field.Prefix className="hover:cursor-pointer">
        <User className="text-gray-600" size={48} />
      </Field.Prefix>

      <Field.Input />
    </Field.Root>
  )
}

Input with Suffix

import { CircleX } from "lucide-react";

import { Field } from "./components";

export function App() {
  return (
    <Field.Root tabIndex={1} className="w-80 h-16 mx-auto">
      <Field.Input />

      <Field.Suffix className="hover:cursor-pointer">
        <CircleX className="text-gray-600" size={48} />
      </Field.Suffix>
    </Field.Root>
  )
}

Input with Prefix and Suffix

import { CircleX, User } from "lucide-react";

import { Field } from "./components";

export function App() {
  return (
    <Field.Root tabIndex={1} className="w-80 h-16 mx-auto">
      <Field.Prefix className="hover:cursor-pointer">
        <User className="text-gray-600" size={48} />
      </Field.Prefix>

      <Field.Input />

      <Field.Suffix className="hover:cursor-pointer">
        <CircleX className="text-gray-600" size={48} />
      </Field.Suffix>
    </Field.Root>
  )
}