Component library.
Free Next.js 15 + Tailwind v4 components from every ShipUI theme. Copy the source, use it in any project. Buy the full theme for complete layouts, auth, and a cohesive design system.
107 components available
Button
Multi-variant button with primary, secondary, and ghost styles in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Inline label badge with five variants: ink, accent, cta, ghost, and parchment. Suited for tags, status labels, and category markers.
Card
Composable card container with sharp zero-radius corners in the FOLIO aesthetic. Pairs with folio-card-header, folio-card-body, and folio-card-footer CSS classes.
Calendar
Interactive month-view calendar with previous/next navigation and day selection. Highlights today in forest green and the selected day in cognac.
DateBlock
Magazine-style date display that renders month, day number, and weekday name in an editorial dateline layout. Server component.
Pullquote
Editorial blockquote with ruled top and bottom borders and an optional attribution citation. Suited for testimonials and highlighted copy.
Text
Polymorphic text primitive with body, caption, label, and code variants. Renders as any inline or block HTML tag via the `as` prop.
Hero
Three-column editorial hero with a 44px spine, a full-width copy column, and a 380px table-of-contents sidebar. Includes a scrolling ticker strip and collapses to a single column on mobile.
Features
Ledger-row feature list using a 56px index gutter, feature title, description, and a right-aligned tag. Roman numeral indexes reinforce the editorial aesthetic.
About
Two-column about section with forest green background, a pullquote, and body copy. Pairs a narrative text column with a supporting details column.
Button
Arcade-styled button with neon green, magenta, cyan, and yellow variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Neon-glow badge with magenta, cyan, yellow, and green color variants. Used for category tags and status labels in the arcade aesthetic.
Card
Game-card component with neon-colored icon, tag, title, description, and a five-star rating display. Supports a "coming soon" locked overlay state.
PixelCharacter
SVG pixel-art sprite with three variants: hero (neon green), ghost (magenta), and coin (yellow). Supports a CSS float animation and configurable size.
ScoreBoard
High-scores leaderboard that renders as a table on desktop and as stacked cards on mobile. Highlights ranks 1-3 with distinct neon color classes.
SectionHeader
Section heading block with a numbered label, a two-part heading where the last word is accented in neon, and an optional subtitle. Supports left or center alignment.
StatBlock
Single-stat display with a large pixel-font value in neon cyan and a label below. Wrapped in a pixel-border container for the arcade aesthetic.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the RETRO dark arcade palette.
Button
Pastel-accented button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Button
Dark-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Inline badge with violet, cyan, green, amber, and red variants for status labels and category tags in the NOIR dark palette.
Card
Composable dark card container with header, body, and footer sub-components in the NOIR aesthetic.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the NOIR dark palette.
Button
Glassmorphism button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Frosted-glass badge with sky, indigo, cyan, violet, and emerald variants for tags and status indicators.
Card
Composable glassmorphism card container with frosted-glass surface and header, body, and footer sub-components.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the GLASS dark glassmorphism palette.
Button
Scientific dark-theme button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Lab-aesthetic badge with green and blue pill variants for experiment tags and status markers.
Card
Feature card with an experiment code label, SVG icon (atom, grid, diamond, network, monitor, warning), description, and a colored pill tag.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the LAB dark scientific palette.
Button
Warm-toned light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Warm-palette badge for category tags and status labels in the SOLAR light theme.
Card
Feature card with a blob-shaped icon background in yellow, coral, or sky, a category tag, title, and description.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the SOLAR warm light palette.
Button
Tropical light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Tropical badge with coral, turquoise, yellow, green, and pink variants for category tags and labels.
Card
Tropical feature card with a colored icon element, category tag, title, and description. Supports coral, turquoise, yellow, green, and pink color variants.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the ALOHA tropical light palette.
Button
Technical dark-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Technical badge for status indicators and tags in the BLUEPRINT dark engineering palette.
Card
Engineering-blueprint card with registration-mark corner accents at all four corners. Composable with any children.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the BLUEPRINT dark technical palette.
Button
Rich dark-mode button with gold-accented primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Gold-toned badge for category and status labels in the FEAST dark culinary palette.
Card
Composable dark card with header, body, and footer sub-components in the FEAST culinary aesthetic.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the FEAST dark culinary palette.
Button
Japanese-inspired light-mode button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Minimalist badge for tags and labels in the HAIKU Japanese-inspired light palette.
Card
Composable light card with header, body, and footer sub-components in the HAIKU minimal Japanese aesthetic.
Pullquote
Serene editorial blockquote with a ruled left accent, typographic quote marks, and an optional attribution citation.
Seal
Circular hanko-style seal displaying a kanji character with an optional label. Available in red and neutral variants at configurable sizes.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the HAIKU minimal Japanese light palette.
Button
Dark docs-style button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link for internal hrefs and a plain anchor for external links.
Badge
Semantic status badge with six color variants: green, blue, yellow, red, purple, and muted. Suited for version tags, API status labels, and changelog markers.
Callout
Inline callout block with four semantic variants: info, warn, tip, and danger. Each renders a matching icon and left-accent color for inline documentation alerts.
Card
Feature card with icon, title, optional badge, and description. Accepts an accent prop for a highlighted border variant. Icon set: book, code, key, zap, layers, terminal, shield, cpu.
CodeBlock
Syntax-highlighted code block with a header showing the language or file title and a one-click copy button. Client component with clipboard feedback.
Button
Dashboard button with primary (solid), secondary (outline), and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Status badge with six color variants: ice, green, amber, red, violet, and surface. Designed for dashboard labels, status indicators, and category tags.
Text
Polymorphic text primitive with body, caption, label, code, and mono variants. Renders as any block or inline HTML tag via the `as` prop.
Card
Composable card with Card, CardHeader, and CardBody sub-components. Uses `mdn-card` CSS classes for consistent dashboard panel styling.
StatusPill
Compact status indicator with five semantic states: ok, warn, err, idle, and info. Each state maps to a default label (Healthy, Degraded, Down, Idle, Info) that can be overridden via the label prop.
Button
Warm-toned button with primary, secondary, and ghost variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Ember-styled badge with five color variants: orange, amber, green, red, and muted. Suited for category labels, status tags, and inline highlights.
Text
Polymorphic text primitive with body, caption, label, and code variants. Renders as p, span, or div via the `as` prop.
Card
Composable card with Card, CardHeader, CardBody, and CardFooter sub-components. Uses `emb-ui-card` CSS classes for the Ember warm palette.
Button
Dashboard button with primary, secondary, and ghost variants in three sizes. Handles disabled links by rendering an aria-disabled span instead of a Link.
CopyField
Read-only code field with a one-click copy-to-clipboard button. Shows a checkmark and "Copied!" confirmation for 2 seconds after copying. Client component.
DateRangePicker
Dropdown date range selector with preset intervals (7, 14, 30, 90 days). Displays the computed date range in the trigger button and closes on route change. Client component.
Button
Retro diner button with primary, secondary, and ghost variants in three sizes. Cherry red accent, bold uppercase labels. Renders as a Next.js Link when an href is provided.
Badge
Diner-styled badge with four color variants: red, teal, chrome, and ink. Suited for category labels, tags, and status indicators.
Text
Polymorphic text primitive with body, caption, label, and code variants. Renders as p, span, or div via the `as` prop.
Card
Composable card with Card, CardHeader, CardBody, and CardFooter sub-components. Warm ivory surfaces with diner-styled borders.
Button
Skate deck art button with primary, secondary, and ghost variants in three sizes. Rough-cut clip-path corners, spray-paint orange accent. Renders as a Next.js Link when an href is provided.
Badge
Spray-paint styled badge with four color variants: orange, yellow, ink, and dim. Suited for category labels, tags, and status indicators.
Text
Polymorphic text primitive with body, caption, label, and code variants. IBM Plex Mono body font. Renders as p, span, or div via the `as` prop.
Card
Composable card with Card, CardHeader, CardBody, and CardFooter sub-components. Dark woodgrain surfaces with spray-paint accent borders.
Button
Editorial blog button with primary and ghost variants. Warm parchment palette with rust accent. Renders as a Next.js Link when an href is provided.
Button
Dark topographic button with primary, secondary, and ghost variants in three sizes. Neon green accent on midnight navy. Renders as a Next.js Link when an href is provided.
Badge
Topographic badge with neon, cream, warning, error, and info variants. Monospace labels on dark surfaces.
Text
Polymorphic text component with body, caption, label, and code variants. IBM Plex Mono for labels and code, Space Grotesk for body.
Card
Data card with icon, tag badge, title, and description. Supports wide variant for featured layouts. Midnight navy surface with neon green accents.
Button
Arcade button with primary, secondary, and ghost variants in three sizes. Magenta accent, chrome borders, uppercase Bungee labels. Renders as a Next.js Link when an href is provided.
Badge
Arcade badge with magenta, yellow, chrome, green, and cyan variants. Bold uppercase labels on dark surfaces.
Text
Polymorphic text component with body, caption, label, and code variants. Bungee for display, Space Grotesk for body.
Card
Arcade card with numbered index, tag badge, title, and description. Chrome borders with parallelogram clip-path shapes.
Button
Kraft-paper button with primary, secondary, ghost, and accent variants in three sizes. Archivo Black labels, warm cardboard palette. Renders as a Next.js Link when an href is provided.
Badge
Artisanal badge with accent, ink, kraft, stamp, and faded variants. Uppercase tracking on warm cardboard surfaces.
Text
Polymorphic text component with body, caption, label, and code variants. Archivo Black for display, DM Sans for body.
Card
Origin card with shipping label aesthetic, tape motif, dashed borders, and slight rotation transform. Displays weight, roast, origin, and date fields.
Button
Elegant button with primary, secondary, and ghost variants in three sizes. Burgundy accent, serif labels, refined spacing. Renders as a Next.js Link when an href is provided.
Badge
Refined badge with burgundy, gold, sage, ink, and ivory variants. Delicate uppercase tracking for floral and event contexts.
Text
Polymorphic text component with body, caption, label, and code variants. Serif display for headings, clean sans for body.
Card
Service card with numbered index, title, description, and tag. Clean lines and refined spacing for floral atelier services.
Button
Competitive gaming button with primary, secondary, and ghost variants in three sizes. Neon magenta accent, Chakra Petch labels, uppercase tracking. Renders as a Next.js Link when an href is provided.
Badge
Esports badge with magenta, cyan, and dim variants. Bold uppercase labels for status indicators and system tags.
Text
Polymorphic text component with body, caption, label, and code variants. Chakra Petch for display, Space Grotesk for body.
Card
System card with title, description, and optional children slot. Dark surface with neon border accents for feature and data panels.
Button
Western bounty button with primary, secondary, ghost, and secondary-dark variants in three sizes. Gold accent, uppercase Rye display font, parchment textures. Renders as a Next.js Link when an href is provided.
Badge
Severity badge with critical, high, medium, and accent variants. Uppercase labels for bounty threat levels and status indicators.
Text
Polymorphic text component with body, caption, label, and code variants. Rye for display headings, Source Serif for body copy, western parchment palette.
Card
Bounty card with tag badge, title, and description. Dark parchment surface with severity-colored badge indicators for vulnerability and threat categories.
Button
Retro-toy button with bold 3px borders and flat offset shadows. Solid, outline, and ghost variants in a playful cream and cobalt palette.
Badge
Pill badge with bold borders and color variants. Yellow, cobalt, coral, and green options for retro-toy labeling.
Text
Typography utility with heading, body, caption, and code variants. Fredoka display font for headings, DM Sans for body text.
Card
Feature card with icon, badge, title, and description. Bold borders and flat offset shadow on a cream background.