# Custom UI (https://dimah-s3.vercel.app/docs/react/ui/customization/custom-ui)





Combine `@dimah-s3/react` hooks with your own components or custom shadcn primitives.

## Preview [#preview]

<DemoPreview name="custom-upload-demo.tsx">
  <CustomUploadDemo />
</DemoPreview>

## Example: Headless Avatar Uploader [#example-headless-avatar-uploader]

```tsx
"use client";

import { useUpload } from "@dimah-s3/react";
import { Button } from "@/components/ui/button";

export function CustomAvatarPicker() {
  const upload = useUpload({
    route: "avatar",
    noDrag: true,
    noClick: true,
  });

  return (
    <div className="flex items-center gap-4">
      <input {...upload.getInputProps()} />
      <Button type="button" onClick={() => upload.open()}>
        {upload.isUploading
          ? `Uploading ${upload.progress.percent}%`
          : "Select Avatar"}
      </Button>
    </div>
  );
}
```

## Frequently asked questions [#frequently-asked-questions]

<Accordions>
  <Accordion title="How do I access low-level state like transfer speed or bytes remaining?">
    `upload.progress` exposes detailed progress metrics:

    ```tsx
    const { progress } = useUpload({ route: "avatar" });

    console.log(progress.loaded, progress.total, progress.percent);
    ```
  </Accordion>
</Accordions>