Skip to content
WeDoIt 24/7
44 production components

Component Library

Production-ready UI primitives built with accessibility and performance in mind. Customized to match WeDoIt 24/7 branding.

Browse Components

Hero

Flexible hero sections with multiple layouts, backgrounds, and slot-based content injection.

Split Layout Two-column with aside slot
New release

Build faster with WeDoIt 24/7

Managed staffing and recruitment solution.

Trusted by developers

Aside content slot

Centered Layout Single column, center-aligned
About us

We're on a mission

Building the tools developers love to use. Our team is dedicated to creating exceptional experiences.

Stack Marquee Two rows of stack cards scrolling opposite ways — driven by src/content/stack, themed for light & dark
Direct-Hire Placement
Virtual Assistant Pods
24/7 Customer Support
Executive Headhunting
RPO & Volume Hiring
Omnichannel Live Chat
E-Commerce & Digital Ops
Global Offshore Staffing
Sales & Lead Gen Support
Back-Office & Data Ops
Secondary Background

Secondary Background

Subtle elevation from the default background.

Gradient Background

Gradient Background

Smooth gradient transition effect.

Inverted Background Always dark, regardless of theme

Dark mode always

Perfect for CTAs and sections that need to stand out.

Join thousands of users

Size Variations sm, md, lg, xl padding options
size="sm"
Compact padding
size="md"
Default padding
size="lg"
Large padding
size="xl"
Extra-large padding
Available Props Simplified API (composition-first)

Props

  • layout centered | split
  • size sm | md | lg | xl
  • showGrid boolean

Slots

  • badge Use Badge component
  • title Use h1/h2 directly
  • description Use p directly
  • actions CTA buttons
  • aside Side content (split only)

Backgrounds: Use CSS classes for custom backgrounds (e.g., class="bg-surface-invert")

Layout

Header and Footer components for consistent page structure. Variant-based with full customization via design tokens.

Default Layout Logo left, nav + actions right-aligned
WeDoIt 24/7
Minimal Layout Logo + CTA only, no navigation
WeDoIt 24/7
Nav Only No CTA, no actions, just navigation
WeDoIt 24/7
Size Variants sm (48px), md (56px), lg (64px)
size="sm" h-12 (48px) — compact
WeDoIt 24/7
size="md" h-14 (56px) — default
WeDoIt 24/7
size="lg" h-16 (64px) — spacious
WeDoIt 24/7
Background Variants default, solid, transparent
variant="default" — backdrop blur + transparency
WeDoIt 24/7
variant="solid" — opaque background
WeDoIt 24/7
variant="transparent" — light background, dark text
WeDoIt 24/7
variant="transparent" colorScheme="invert" — for dark backgrounds
WeDoIt 24/7
Header Props Full API reference

Layout & Position

  • layout default | centered | minimal
  • position fixed | sticky | static
  • size sm | md | lg
  • variant default | solid | transparent
  • colorScheme default | invert

Navigation

  • nav NavItem[] (overrides routes)
  • extraNav NavItem[] (adds to routes)
  • showActiveState boolean
  • showMobileMenu boolean

Actions

  • showCta boolean
  • cta { label, href }
  • actions HeaderAction[]
  • showThemeToggle boolean
Footer - Simple Layout Single row with logo, nav, optional social
Minimal Layout Copyright only — perfect for simple sites

© 2026 WeDoIt 24/7

Stacked Layout Vertically stacked, centered — great for landing pages
Columns Layout Multi-column with link groups
Footer Props Full API reference

Layout

  • layout simple | columns | minimal | stacked
  • columns 2 | 3 | 4
  • background default | secondary | invert

Content

  • nav NavItem[]
  • linkGroups FooterLinkGroup[]
  • socialLinks SocialLink[]
  • tagline string

Copyright & Legal

  • showCopyright boolean
  • copyright string (supports {year}, {siteName})
  • legalLinks LegalLink[]
Navigation Design Tokens Customize via CSS custom properties

/* Customize nav link states in global.css */

--nav-link-color: var(--foreground-muted);

--nav-link-hover-color: var(--foreground);

--nav-link-hover-bg: var(--secondary);

--nav-link-active-color: var(--foreground);

--nav-link-active-bg: var(--secondary);

--nav-link-active-font-weight: 600;

CTA - Default Variant Light background with heading, description, and action buttons

Stop configuring. Start delivering.

Empower your organization with WeDoIt 24/7 recruitment and virtual staffing.

Get Started Learn More
CTA - Invert Variant Dark background with inverted color scheme

Ready to grow?

Scale your support operations with dedicated remote teams.

Contact Us Our Services
CTA - Size Variants sm, md, lg, xl padding options

/* Size variants control vertical padding */

sm: 'py-16 md:py-20'

md: 'py-20 md:py-24'

lg: 'py-24 md:py-32' (default)

xl: 'py-32 md:py-40'

/* MaxWidth variants control content width */

sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'

Buttons

Interactive elements for actions and navigation. All variants support icons, loading states, and full accessibility.

Variants 6 styles for different contexts
Sizes Responsive scaling
States
With Icons

Form Inputs

Text fields, selects, checkboxes, and more. Built with native validation and ARIA support.

Text Input With labels & validation

Must be at least 8 characters

Input with Icons Leading & trailing icons
Textarea Multi-line text input

Supports markdown formatting

Select Native dropdown
Checkboxes Custom styled controls
Radio Buttons Single-select controls
Plan Selection Card-style radio options
Switch Toggle on/off states

Receive email alerts for important updates

Get product news and feature announcements

Receive text messages for critical events

Switch Sizes & States sm, md, lg + disabled

Feedback

Badges, alerts, and status indicators to communicate state and guide user actions.

Badges Status indicators
Default Success Warning Info
Alerts Contextual messages
Toast Notifications Click buttons to trigger toasts

Overlays

Dialogs, dropdowns, tooltips, and tabs. Full keyboard navigation and focus management.

Dialog Modal overlay
Dropdown Action menu
Tooltips Contextual hints
Tooltip on top Tooltip on bottom Tooltip on left Tooltip on right
Tabs Content organization

Project overview with key metrics and recent activity. Tabs support full keyboard navigation.

Analytics data with charts and performance insights. Press arrow keys to navigate between tabs.

Configure your project settings. Use Home/End to jump to first/last tab.

Data Display

Cards, avatars, and icons for presenting content and user information.

Card Variants 5 visual styles

Default

Standard bordered card

Solid

Filled background

Outline

Thick border, no fill

Ghost

Transparent container

Elevated

With shadow depth

Cards with Icons Compose your own layout with icon, title, description

Performance

100/100 Lighthouse

Zero JavaScript by default. Islands architecture with selective hydration for optimal speed.

Type-Safe

Full TypeScript

Strict types throughout with IDE autocompletion and compile-time error checking.

i18n Ready

Multi-language

Built-in translation system with SEO-friendly URLs and automatic locale detection.

Proof Tiles Centered tiles for facts, features, and process steps

Designed

Every piece speaks the same design language, so whatever you build looks right.

Fast

Zero JavaScript by default. Pages open instantly, on every device.

Accessible

Keyboard navigation, focus states, and semantic markup, built in from the start.

Loved on GitHub

Officially listed

Learn details

Built in the open

Production proven

1

First contact

Send a message and plan a first talk.

2

Proposal

One clear document: scope, timeline, price.

3

Design & build

Follow the progress on a staging link.

4

Launch

Live on your own domain, in your name.

<ProofTile icon="zap" title="Fast">Description</ProofTile> — use size="sm" for compact tiles, number for steps, and href to make a tile a link.

Simple Cards Title and description only

Getting Started

Quick setup guide to get your project running in minutes.

Documentation

Comprehensive API reference and usage examples.

Community

Join our Discord server and connect with other developers.

Custom Layouts Stats, profiles, actions

Total Revenue

$45,231

+12.5% from last month

Sarah Chen Sarah Chen

Sarah Chen

Product Designer

Pro San Francisco, CA

astro-rocket-app

Production deployment

Live
Avatars User representations
John Doe
xs
Jane Smith
sm
Alex Johnson
md
Sam Wilson
lg
Chris Lee
xl
User 1 User 1
User 2 User 2
User 3 User 3
+5
Stacked
Icons Lucide icon set — 24 included
menu
x
chevron-down
arrow-right
search
plus
check
mail
phone
github
twitter
linkedin
sun
moon
zap
globe
shield
code
heart
star
alert-circle
check-circle
info
loader
Separator Horizontal, vertical, and with labels

Horizontal (default)

With label

With label text

Vertical (in flex container)

Item 1 Item 2 Item 3
Table Styled data table with hover and striping
Name Email Role Status
Sarah Chen sarah@example.com Admin Active
Alex Johnson alex@example.com Editor Active
Sam Wilson sam@example.com Viewer Inactive
Striped & Compact Table Alternating rows with reduced padding
ID Product Price Stock
001 Support Pod Starter $1,499/mo Active
002 Support Pod Professional $2,999/mo Active
003 Dedicated Executive Search Custom Available
004 Consulting Plan Contact Available
Avatar Group Stacked avatars with overflow

max=4, 6 avatars

User 1 User 1
User 2 User 2
User 3 User 3
User 4 User 4
+2

size="xs"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="sm"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="md"

User 1 User 1
User 2 User 2
User 3 User 3
+1

size="lg"

User 1 User 1
User 2 User 2
User 3 User 3
+1

Loading

Skeleton loaders for perceived performance while content is being fetched.

Skeleton Types Text, circular, rectangular
Card Skeleton Composite loading state
Progress Bar Determinate progress indicators

25% — default

60% — brand

90% — success

Color Variants All 5 at 70%
Size Variants sm, md, lg + indeterminate

size="sm"

size="md"

size="lg"

Indeterminate

Toggles

Accordion and expandable content patterns with native HTML details/summary.

Accordion - Default Collapsible FAQ sections
What is WeDoIt 24/7?
WeDoIt 24/7 is a hybrid staffing and managed recruitment partner based in the Philippines, providing direct-hire recruitment, 24/7 virtual assistant pods, and customer support management.
How quickly can a support pod be deployed?
Our managed virtual assistant and support pods can be deployed and onboarded in as little as 5 business days.
How is quality maintained?
We provide dedicated operations leads, ongoing performance monitoring, and SLA tracking to ensure consistent 24/7 quality.
Card Variant With one item open by default
Getting Started
Run the CLI scaffolding command to create a new project. Customize with flags like --demo, --components, and --i18n.
Deployment
Deploy to Vercel, Netlify, or any static host. The build output is optimized for performance out of the box.
Support
Join our GitHub discussions or file an issue for bugs and feature requests.
Exclusive Mode Only one item open at a time
Free Plan
Perfect for personal projects and learning. Includes all core components and basic templates.
Pro Plan
Advanced components, premium templates, priority support, and commercial license.
Enterprise
Custom development, dedicated support, SLA guarantees, and team training workshops.

Patterns

Pre-composed component patterns for common UI needs — search, passwords, stats, empty states, and video embeds.

Search Input Input with search icon, multiple sizes
Newsletter Form Side by side from sm up
Newsletter Form — stacked For narrow columns and footers
Password Input With show/hide toggle

Must be at least 8 characters

Password Sizes sm, md, lg
Stat Cards Metric display with trend indicators

Total Revenue

$45,231

+12.5% from last month

Active Users

2,338

+8.2% from last week

Bounce Rate

24.3%

-3.1% from last month

Avg. Session

3m 42s

No change
Empty State Placeholder for empty data views

No messages yet

When you receive messages, they'll appear here. Start a conversation to get going.

New Message

No results found

Try adjusting your search or filters to find what you're looking for.

YouTube Embed Click-to-play facade — zero YouTube bytes until the reader presses play

Drop a video into any MDX post or page with <YouTube id="QONgJurkigk" title="…" /> — the page ships only a thumbnail, and the player loads from privacy-friendly youtube-nocookie.com on click.

Ready to scale?

Partner with WeDoIt 24/7 for direct-hire recruitment and round-the-clock managed support teams.

Get In Touch Explore Services