---
title: "Framer Developers: Examples"
description: How to use Components
published: "Sep 18, 2026, 4:28 PM UTC"
---

# [Component Examples](#component-examples)

Let's look at the very simplest component we could make. That would really just be a vanilla React button component. There really is no magic here, but it already works.

```
export default function Button(props) {
    return <div>Hello</div>
}
```

Let’s go a step deeper and add some styling. We can do this the standard React way too with `style`.

```
export default function Button(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }

    return <div style={style}>Hello</div>
}
```

Now, let’s make a title prop that is configurable from the interface (we will explain more about [property controls](./property-controls) later).

```
import { addPropertyControls, ControlType } from "framer"

export default function Button(props) {
    const style = {
        display: "inline-block",
        backgroundColor: "orange",
        padding: 8,
    }

    return <div style={style}>{props.text}</div>
}

Button.defaultProps = {
    text: "My Title",
}

addPropertyControls(Button, {
    text: {
        title: "Text",
        type: ControlType.String,
    },
})
```

And there you have a simple configurable React component, right on the canvas. But I hope you can see how you can use the same concepts to build any React component you like. title prop that is configurable from the interface (we will explain more about [property controls](./property-controls) later).

[Previous Introduction](./components-introduction)

[Next Asset Sharing](./component-sharing)

---

## Navigation

- [Enterprise](../enterprise/)
- [Pricing](../pricing)
- [Log in](https://framer.com/r/login)
- [Sign up](https://www.framer.com/r/signup/)
- [Brand guidelines](../brand)
- [AI New](../ai/)
- [Agents New](../agents/)
- [External Agents New](../agents/external/)
- [Design](../design/)
- [Collaborate New](../collaborate/)
- [CMS](../cms/)
- [Hosting](../hosting/)
- [Performance](../performance/)
- [SEO](../seo/)
- [Convert](../convert/)
- [Publish](../publish/)
- [Updates New](../updates)
- [Academy](../academy/)
- [Guides](../guides)
- [Desktop app](../downloads/)
- [Blog](../blog/)
- [Newsletter](../newsletter)
- [Stories](../stories/)
- [Creators](../creators)
- [Experts](../expert/apply/)
- [Students](../education/students/)
- [Ambassadors](../education/ambassadors/)
- [State of Sites](https://www.framer.com/state-of-sites-2026/)
- [Stack Score New](../stack-score/)
- [Help Articles](../help/)
- [Contact](../contact/)
- [Startups](../startups/)
- [Agencies](../agencies/)
- [Switch](../switch/)
- [Careers](../careers/)
- [Brand](../brand)
- [Store](../store)
- [Security](../legal/security)
- [Abuse](mailto:abuse@framer.com)
- [Legal](../legal/community-terms)
- [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2)
- [Designers](../solutions/designers/)
- [Agencies](../solutions/agencies/)
- [Marketers](../solutions/marketers/)
- [Growth](../solutions/growth/)
- [Builders](../solutions/builders/)
- [Engineers](../solutions/engineers/)
- [Site Teams](../solutions/site-teams/)
- [Founders](../solutions/founders/)
- [AI website builder](../solutions/ai-website-builder/)
- [AI design agent](../solutions/ai-designer/)
- [Website builder](../solutions/website-builder/)
- [Landing pages](../solutions/landing-pages/)
- [Portfolio maker](../solutions/portfolio-website/)
- [UI/UX design](../solutions/ui-ux-design/)
- [No-code](../solutions/no-code-website-builder/)
- [Overview](../compare)
- [Webflow](../compare/framer-vs-webflow)
- [Figma](../compare/framer-vs-figma)
- [Wix](../compare/framer-vs-wix)
- [Squarespace](../compare/framer-vs-squarespace)
- [WordPress](../compare/framer-vs-wordpress)
- [Readymag](../compare/framer-vs-readymag)
- [Ceros](../compare/framer-vs-ceros)
- [Unbounce](../compare/framer-vs-unbounce)
- [Lovable](../compare/framer-vs-lovable)
- [Claude Code](../compare/framer-vs-claude-code)
- [ChatGPT](../compare/framer-vs-chatgpt)
- [Codex](../compare/framer-vs-codex)
- [Contentful](../compare/framer-vs-contentful)
- [Sanity](../compare/framer-vs-sanity)
- [AEM](../compare/framer-vs-adobe-experience-manager)
- [Replit](../compare/framer-vs-replit)
- [v0](../compare/framer-vs-v0)
- [Marketplace](https://www.framer.com/community/marketplace/)
- [Templates](https://www.framer.com/community/marketplace/templates/)
- [Components](https://www.framer.com/community/marketplace/components/)
- [Plugins](https://www.framer.com/community/marketplace/plugins/)
- [Vectors](https://www.framer.com/community/marketplace/vectors/)
- [Feed](https://www.framer.com/community/feed/)
- [Hype](https://www.framer.com/community/hype/)
- [Gallery](https://www.framer.com/community/gallery/)
- [Contests](https://www.framer.com/community/contests/)
- [Members](https://www.framer.com/community/members/)
- [Meetups](../meetups/)
- [Updates](../updates/community/)
- [Figma to HTML](../solutions/figma-to-html/)
- [AEO scanner](../aeo)
- [Meta Tags](https://www.linkpreview.app/)
- [Free domains](../domains/)
- [CanvasBench](../canvasbench/)
- [Shortcuts](../shortcuts)
- [Checking status](https://www.framerstatus.com/)
- [504,616,418,546 tokens processed this week](https://openrouter.ai/apps/framer)