Scale

The scalable nature of the Geist gives great flexibility to each component. You can freely scale the component size, rewrite the proportion of the component local space, adjust the inner and outer layout structure, etc.

This means that developers: can achieve a high level of customization in most scenarios without hack or override styles, even multiple components can be synchronized using base unit, compatible with different Web structures with low code, and get the best user experience in any layout style.

Scaling

Different from common component libraries, Geist no longer uses size related props to control component volume. Each component of Geist has a suitable layout volume by default, you can dynamically scale components with the scale props.

As the example, the Button component has an equal reduction in all space occupancy (including fonts). Geist renders the specified volume components realistically by dynamically calculating the component size. This ensures that the layout and typography are always the same as expected.

<Button scale={0.5}>Scale 0.5</Button>
<Button>Default</Button>

Single Value

For any component, the scalable props include width, height, outer margin, inner margin, font, etc. You can define each scalable property individually, a scale number or CSS string.

<Button width="300px" font={1.5}>
  Full Button
</Button>

Scaling unit

The volume of the component depends on both the scale property entered by the user and the scaling unit. The default scaling unit is 16px, but Geist allows you to customize this value at different levels to achieve a high level of customization.

For a single component, we can easily set props on the component:

export const MyButton = () => <Button unit="2rem" />

For defining scaling unit for multiple components at the same time, you need to create additional Themes and add a new layer of GeistProvider scope. All components under this scope will share the same scaling unit. (Please refer to Themes section for learn more)

const themeType = 'myTheme'
const customUnitTheme = Themes.createFromLight({
  type: themeType,
  layout: {
    unit: '20px',
  },
})
const App = () => (
  <GeistProvider themes={[customUnitTheme]} themeType={themeType}>
    <Button />
    <Input />
  </GeistProvider>
)

Development with scale

The scale feature in Geist is also exported, so you can use scale to create custom components with dynamic scaling capabilities. For more information, please read section use-scale.

Alias

Below is a reference to all available props and aliases，number means that numbers can be passed for scaling, and string type means that CSS strings can be passed for fixed values.