Skip to main content

Pablo

What is Pablo?​

Pablo is the design system of Bojagi built on top of emotion.

It's build on these three core principles:

  • Ease of development
  • Small footprint (currently under 30kb gzipped)
  • Flexible and easy to maintain customizations

Maintain a clean and healthy codebase​

Pablo is built with hooks in mind and therefore it's really easy to use useState by just passing it to event callback props like onChange or onSelect. We want Bojagi to produce less boilerplate and clean readable code. You can still access the original event object (it's passed as another argument).

const [name, setName] = useState('');
<Input value="name" label="Name" onChange={setName} />

Every component of Pablo is also extending most of the Box component props, which implements our own styled system implementation. This way there is no need for wrapping divs only for the sake of layouting.

<Box display="flex" mx={-4}>
  <Button mx={1}>Accept</Button>
  <Button mx={1} variant="secondary">Cancel</Button>
</Box>

Fully extendable to your needs​

By default Pablo's UI is minimal to give you a clean but modern look. This makes it also easy to extend. There are different ways you can customize:

  • Update the theme values to update primitives like color or typographic values globally
  • Change the componentStyles config to update component specific values such as gaps, colors or sizes
  • Overwrite styling of parts of components globally with styled-component's css tag literal
  • Overwrite single styling properties such as padding or margin with styled system props
  • Overwrite styling of parts of components in place with the customStyles prop

Get a full insight into customization in the Customization Section.

Future plans​

Currently the library is in alpha, which means not all components are there yet. We also have plans extending the library into a more flexible layered system.

Read more about that in our Upcoming Section.

Also a lot of the already existing components haven't been documented yet. Existing documentation is also missing information on customization options and the props table needs improvement (it's automatically generated from types therefore some areas are not easy to read)