# Your own component

> A component is a struct and one render.

Page: https://fframes-kit.pages.dev/docs/advanced/your-own-component/

A component is a struct and one `render`. Components with theme defaults implement `Themed`.

```rust
use fframes_kit::prelude::*;

pub struct Badge<'a> {
    pub label: &'a str,
    pub fill: Color,
    pub x: f32,
    pub y: f32,
}

impl Themed for Badge<'_> {
    fn themed(theme: &Theme) -> Self {
        Self { label: "", fill: theme.colors.accent, x: 0.0, y: 0.0 }
    }
}

impl<'a> Component<'a> for Badge<'a> {
    fn render(self, ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
        let s = ui.theme.typography.caption;
        let enter: FadeIn = ui.defaults();
        let badge = svgr!(
            <g transform={Transform::translate(self.x, self.y)}>
                <rect x="0" y="0" width="240" height="56" rx="28" fill={self.fill} />
                <text x="24" y="38" font-family={s.family} font-size={s.size} fill="#fff">{self.label}</text>
            </g>
        );
        enter.apply(ui, badge)
    }
}

// A list of different components is a `Vec<BoxedComponent>`.
fn badges<'a>(ui: &mut Ui<'a, '_, '_>) -> Svgr<'a> {
    let list: Vec<BoxedComponent<'a>> = vec![
        Box::new(Badge { label: "new", ..ui.defaults() }),
        Box::new(Badge { label: "beta", x: 300.0, ..ui.defaults() }),
    ];
    ui.show(list)
}
```