Component library

[fourstacks]

We will have a number of page layouts in the site that will have one or more common components as dependencies. Rather than duplicating this markup and logic throughout the application, it’s worth spending a little time at the start of the project building our own mini component library.

A lot of the styling side of things is done for us with TailwindUI.

Tailwind UI

You’re free to browse all the components but unless you’ve purchased access you’ll only see a png preview of the component. I’ve purchased access to this library of components and whilst the license allows us to use the library for project I’m not sure if there’s a good way of giving everyone access to the account securely. Therefore, for now at least, if you let me know which components you want the markup for I’ll just copy paste it over to you (or just drop it into an empty component file in the project)

Our own little component library should probably initially encompass the following:

• Form field input groups. These would comprise a form field label, the input, helper text and error states. We’d likely want to build one parent wrapper component to handle common logic and markup (label, error state, help text) and then compose separate form field components using this wrapper component. We’ll probably want the following fields to start with:
  • Text/email/password field
  • Textarea field
  • Select (dropdown) field
  • Checkbox field
  • Radio button field
  • Toggle (boolean) field

Tailwind UI - form inputs
Tailwind UI - dropdowns
Tailwind UI - toggles
Tailwind UI - form elements (inc checkboxes and radios)

• Heading components. Simple wrappers to ensure that our site headings remain consistent.

  • H1
  • H2
  • H3

• Card component - a simple visual wrapper component to display related information. Some options for this component might be:

  • With/without padding
  • With/without card heading

• Button component - we’ll need a few different button styles so creating a single, flexible button component that we can control via props will be handy. Options should include:

  • State (primary, secondary, plain link)
  • Size (maybe just S, M, L for now)
  • With/without icon
  • Icon left or right of text

Tailwind UI - buttons