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.
74 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.