# Custom components in Builder **URL:** \ **Category:** Technical Questions\ **Tags:** react, custom-components, nextjs\ **Created:** [September 22, 2021, 11:56am UTC](https://forum.builder.io/t/custom-components-in-builder/1022 "2021-09-22T11:56:57Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![jjtoikka](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jjtoikka](https://forum.builder.io/u/jjtoikka)\ **Post date:** [September 22, 2021, 11:56am UTC](https://forum.builder.io/t/custom-components-in-builder/1022/1 "2021-09-22T11:56:57Z")
Hello, I’m trying out builder for our company and it looks like a good solution to our UI problems. However there are some questions about the custom components. 1. If I set the component mode to `true`, I’ll loose the styles tab? Is there any way to use it and can I configure it in anyway, like define the values and units and use it with the custom components? 2. If I use `withChildren` with containers and pass a component inside, first one goes fine, but the next one wraps with `.builder-column` css classes and breaks the layout. Is there a way to get rid of those extra tags / css? I can circle this by moving the elements out from the `column` and delete the `column` component, but it’s not nice. 3. How can I use responsive props or styles with custom components? If I now have a prop like `padding` with value of `enum` _xl_ and want to use different setting in mobile like `m` how can I do that? Cheers, Janne ---
**Author:** ![steve](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/steve/32/78_2.png) [@steve](https://forum.builder.io/u/steve)\ **Post date:** [September 22, 2021, 4:04pm UTC](https://forum.builder.io/t/custom-components-in-builder/1022/2 "2021-09-22T16:04:49Z")
Hey @jjtoikka - 1. If you still want some access to the style tab consider using [roles](https://www.builder.io/c/docs/guides/roles-and-permissions) instead - that way some people can have access to the style tab but `editor` roles are in components-only mode 2. Ah - I’m guessing you dragged the second component in to the left or right of the first one. Columns are added automatically when a user drags to the left or right of another block as opposed to the top or bottom. Try just placing a new block above or below the current one when using withChildren and no .builder-column should be added 3. Great Q. As of now there are no constructs for this but you do have a lot of flexibility in how you take inputs. So one option would be to just have separate inputs for different device sizes like `mobilePadding` that you handle as desired ---
**Author:** ![jjtoikka](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jjtoikka](https://forum.builder.io/u/jjtoikka)\ **Post date:** [September 23, 2021, 6:31am UTC](https://forum.builder.io/t/custom-components-in-builder/1022/3 "2021-09-23T06:31:20Z")
Hi @steve, and thanks for your swift answer 1. So the editor can see it but admin can’t in custom mode? I’m currently in free mode, so I have only admin and wouldn’t like to change the roles while developing anyways. So I need to develop with all components visible then. 2. Thanks! That works 3. Can I adjust the breakpoints for the different sizes? Currently in our library I can define those so it would be cool to do that also in Builder. 4. Can I parse the style output and define what I see there? Like colors? Prop I need to do custom plugin for that? Is the style tab anywhere in npm? -J ---
**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\ **Post date:** [September 23, 2021, 8:49pm UTC](https://forum.builder.io/t/custom-components-in-builder/1022/4 "2021-09-23T20:49:22Z")
1. Not sure I totally follow what you are saying, can you try explaining what you are trying to accomplish a little more? 2. The breakpoints in the editor are not user adjustable, but we have gotten that as a feature request before and think it is a good idea that we will work on adding at some point! 3. Not sure exactly what you are trying to accomplish, but it sounds like you want to control the specifics of how people can edit the styles of custom components? If that is the case, using custom inputs to control style elements is definitely the way to go: [Using Your React Components in Builder.io - Builder.io](https://www.builder.io/c/docs/custom-react-components#input-types) ---
**Author:** ![jjtoikka](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jjtoikka](https://forum.builder.io/u/jjtoikka)\ **Post date:** [September 24, 2021, 6:55am UTC](https://forum.builder.io/t/custom-components-in-builder/1022/5 "2021-09-24T06:55:25Z")
1. This one is ok. I just need to use the not only component mode as admin so I can see the style tab. 2. That would be awesome! Maybe just extend the `editor.settings`? Also would be cool, if you could add api docs in the doc section. 3. I would like to use the styles, but with my own options. Let’s say the colors: I would like those to be in the colour modal same as are defined in the theme. Or margins, that those could be defined in the theme. Like passing there an enum instead of pixels. Is there any api for that? 4. If I have a custom theme coming from Nextjs to the builder. How could I make an editable view for it in Builder? It can’t be a component, cos each page needs it, and it would be only defined once? Thanks, Janne ---
**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\ **Post date:** [September 27, 2021, 10:17pm UTC](https://forum.builder.io/t/custom-components-in-builder/1022/6 "2021-09-27T22:17:40Z")
1. This is not something you can do out of the box with Builder, but you could make a plugin that hides the current style tab and then adds a custom version with simpler options. Here are some docs on how to go about doing that: [edit tab plugin](https://www.builder.io/c/docs/extending/plugins) 2. You could use a [data model](https://www.builder.io/c/docs/guides/getting-started-with-models) to control theme variables from within Builder, and then query that data in your app. You would then be able to edit values and they would be applied site wide. We do this in our nextjs-shopify starter to make the app themeable. Basically, you create a function that gets called on page render that will make a request to Builder to get values for the theme variables. The function is [here](https://github.com/BuilderIO/nextjs-shopify/blob/fa61191b61d41107b658b8cbcd71fe450e3f7b0d/lib/get-layout-props.ts#L4) and you can see it used throughout the app, for example [here](https://github.com/BuilderIO/nextjs-shopify/blob/d9ba15798f4daafeb801606b5e2f8e2cf6807e87/pages/%5B%5B...path%5D%5D.tsx#L38) where it is passed via `getStaticProps` to the component that is being rendered. ---
**Author:** ![jjtoikka](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jjtoikka](https://forum.builder.io/u/jjtoikka)\ **Post date:** [October 1, 2021, 9:41am UTC](https://forum.builder.io/t/custom-components-in-builder/1022/7 "2021-10-01T09:41:12Z")
Hi, thanks! 1. I tried to get the data from the `theme` model, but I only get `null`… what could be the problem? ```auto export async function getStaticProps({ params, }: GetStaticPropsContext<{ path: string[] }>) { const page = await resolveBuilderContent('page', { urlPath: '/' + (params?.path?.join('/') || ''), }) const theme = await resolveBuilderContent('theme') return { props: { page, theme, }, revalidate: 30, } } ... export default function Path({ page, theme, ... console.log(theme) = null ``` - J ---
**Author:** ![jjtoikka](https://avatars.discourse-cdn.com/v4/letter/j/77aa72/32.png) [@jjtoikka](https://forum.builder.io/u/jjtoikka)\ **Post date:** [October 5, 2021, 6:08pm UTC](https://forum.builder.io/t/custom-components-in-builder/1022/8 "2021-10-05T18:08:57Z")
1. Also tried `editor.editTab` binding, but I do not see any new tabs in the UI. Is this because I am still using free Builder plan? - Janne