Skip to main content
Version: current

Themed Components

@deity/falcon-ui UI components such as Box, Text etc are all built as themeable components.

This means they will accept props such as m for margin, and values from the theme such as xxs for spacing.

client/src/components/myComponent.js

<Box py="xs">
Content here
</Box>

To make your custom component 'themeable' you will need to use the themed function.

client/src/components/myComponent.js

import { Box, themed } from '@deity/falcon-ui';
const MyComponentLayout = themed({
tag: Box,
defaultTheme: {
myComponentLayout: {
py: 'xs'
}
}
});
<MyComponentLayout>
Content here
</MyComponentLayout>

You will notice that we have suffixed the names with layout. This is a helpful convention to easily recognize when a component is a themed layout.

Changing the html element of a component#

If you want to change the html element of a themed component it's as simple as passing a prop (as).

client/src/components/myComponent.js

<Box as="section">
Content here
</Box>

This will render a <section> tag rather than a <div>.

Ask the community. #help

If you can't find what you're looking for, the answer might be on our community slack channel. Our team keep a close eye on this and will usually get back to you within a few hours, if not straight away. If you haven't created an account yet please sign up here slack.deity.io.

Stay up to date

Do you want to be informed when we release new features or fixes? Sign up to our newsletter to stay in the loop.