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.
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:
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:
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:
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.
Card component - a simple visual wrapper component to display related information. Some options for this component might be:
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:
Tailwind UI - buttons