Not Found
Installation
Add the following Soul components
The not-found component uses the section-layout component. Make sure you have added it to your project.
Copy and paste the following code into your project
sections/not-found/index.tsx
import { SectionLayout } from '@/vibes/soul/sections/section-layout';export interface NotFoundProps { title?: string; subtitle?: string; className?: string;}/** * This component supports various CSS variables for theming. Here's a comprehensive list, along * with their default values: * * ```css * :root { * --not-found-font-family: var(--font-family-body); * --not-found-title-font-family: var(--font-family-heading); * --not-found-title: var(--foreground); * --not-found-subtitle: var(--contrast-500); * } * ``` */export function NotFound({ title = 'Not found', subtitle = "Take a look around if you're lost.", className = '',}: NotFoundProps) { return ( <SectionLayout className={className} containerSize="2xl"> <header className="font-(family-name:--not-found-font-family,var(--font-family-body))"> <h1 className="mb-3 font-(family-name:--not-found-title-font-family,var(--font-family-heading)) text-3xl leading-none font-medium text-(--not-found-title,var(--foreground)) @xl:text-4xl @4xl:text-5xl"> {title} </h1> <p className="text-lg text-(--not-found-subtitle,var(--contrast-500))">{subtitle}</p> </header> </SectionLayout> );}Usage
import { NotFound } from '@/vibes/soul/sections/not-found';function Usage() { return ( <NotFound/> );}API Reference
NotFoundProps
| Prop | Type | Default |
|---|---|---|
title | string | 'Not found' |
subtitle | string | 'Take a look around if you're lost.' |
className | string | '' |
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --not-found-font-family: var(--font-family-body); --not-found-title-font-family: var(--font-family-heading); --not-found-title: var(--foreground); --not-found-subtitle: var(--contrast-500);}