Section component. Organizes content into sections.

The Section component is used to organize content into sections. It is composed of a SectionHeader and SectionBody component.

In the kits, it used across the Settings pages to organize content into sections.

import { Section, SectionHeader, SectionBody } from '~/core/ui/Section'; import { TextFieldInput, TextFieldLabel } from '~/core/ui/TextField'; import { Button } from '~/core/ui/Button'; <Section> <SectionHeader title={'Your Details'} description={`Please enter your details below.`} /> <SectionBody className={'space-y-4'}> <TextFieldLabel> Name <TextFieldInput /> </TextFieldLabel> <TextFieldLabel> Surname <TextFieldInput /> </TextFieldLabel> <Button> Save </Button> </SectionBody> </Section>

Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS