Component Showcase
UI primitives — buttons, form fields & states
Button
Form Fields
Input
As shown on your ID
@
Minimum 8 characters
USD
This field is required
Textarea
Tell us about yourself
Required
Select
Please select an option
Checkbox
Radio
Pick one
Full Form Example
Section Title (Scroll Reveal)
UiSectionTitle — Props & Usage
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Heading content (required) |
| label | string | undefined | Small tag with square icons above heading |
| variant | 'gradient' | 'image' | 'bounce' | 'gradient' | Animation type |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Responsive text preset (overridden by class) |
| tag | h1–h6 | p | span | 'h2' | HTML element tag |
| align | 'left' | 'center' | 'right' | 'left' | Text + label alignment |
| gradient-from | string (hex/rgb) | '#0B1422' | Active/revealed color |
| gradient-to | string (hex/rgb) | '#D1D5DB' | Initial/dim color |
| image-url | string | undefined | Image/texture URL (variant='image' only) |
| trigger-start | string | 'top 80%' | ScrollTrigger start position |
| trigger-end | string | 'top 30%' | ScrollTrigger end position |
Size presets (mobile / tablet sm: / desktop lg:)
sm → 20/24/30px | md → 24/30/36px | lg → 30/36/48px | xl → 36/48/60px
Examples
<!-- Gradient sweep (default) --> <UiSectionTitle label="Why Choose Us" text="Your heading here" size="lg" /> <!-- Centered with custom colors --> <UiSectionTitle text="Our Story" align="center" size="xl" gradient-from="#6653E8" gradient-to="#E5E7EB" /> <!-- Bounce wave + sweep --> <UiSectionTitle text="Meet Our Team" variant="bounce" size="lg" gradient-from="#0B1422" gradient-to="#D1D5DB" /> <!-- Image texture reveal --> <UiSectionTitle text="Built with Passion" variant="image" size="xl" image-url="/images/texture.jpg" /> <!-- Override size with custom class --> <UiSectionTitle text="Custom size" class="text-6xl font-black" />
Scroll down to trigger the animations below.
Variant: gradient (single block)
Why Choose Us
Design that speaks for itself, one word at a time
Variant: gradient + split-words
Our Values
Every pixel has a purpose
Variant: bounce wave
Our Team
MeetOurExperts
Variant: image (texture mask)
Crafted with intention
Variant: image + split-words