UI Primitives

Component Library

Every component ships fully typed and prop-driven. Customize colors via @theme tokens in globals.css. No component edits needed.

8Primitives

5Sections

3Hooks

25+Total

Explore components Back to home

01Button 02Badge 03Text 04Card 05Tokens 06System Pages

01: Primitives

Button

VARIANTS

SIZES

TROPICAL COMBOS

AS LINKS

View all components Back to home

Pass an href prop and Button renders as next/link automatically.

02: Primitives

Badge

COLOR VARIANTS

CoralTurquoiseYellowGreenPink

TROPICAL CONTEXT

New arrivalStaff pickLimitedFreshTrendingJust launchedFeaturedAvailable

03: Primitives

Text

BODY

Regular paragraph copy. Descriptions, readable blocks.

Nunito0.95remline-height 1.75font-weight 600

Sun-warmed component copy at its finest. Use this for descriptions, feature explanations, and any block of readable text. Scales gracefully and pairs beautifully with Pacifico display headings.

<Text variant="body">Your content here.</Text>

CAPTION

Dates, meta info, footnotes, helper hints.

Nunito0.8remfont-weight 600muted color

Published March 6, 2026 · 3 min read · Tropical Islands

<Text variant="caption">Published March 6, 2026</Text>

LABEL

Section sub-labels, categories, uppercase identifiers.

Nunito0.7remuppercaseletter-spacing

default

Features

coral

New Section

<Text variant="label">Features</Text>

CODE

File paths, token names, inline code references.

monospace0.85remturquoiseinline

src/app/globals.css

@/components/ui/Button

variant="primary"

<Text variant="code">src/app/globals.css</Text>

04: Primitives

Card

🌊Design

Tropical Components

Beautiful, hand-crafted UI with the warm Hawaiian aesthetic baked right in. Cards, buttons, badges, and more.

⚡Stack

Next.js 15 Ready

App Router, server components, TypeScript strict mode, and Tailwind v4 configured and ready to go.

🎨Tokens

Design System

A full set of design tokens in globals.css. Swap colors, shadows, and border radius in one place.

USAGE

<Card card={{
  icon: '🌊',
  tag: 'Design',
  tagVariant: 'turquoise',
  title: 'Tropical Components',
  description: 'Beautiful, hand-crafted UI...',
}} />

05: Theme System