Spink UI Documentation

Beautiful, searchable docs for the Spink UI Component Library

Includes installation, token-driven theme customization, live component previews with copyable code, and strict licensing usage rules for commercial deployments.

Catalog size

224

Implemented now

48

Theme modes

3

Core guides

Installation Guide

Install the package, wire fonts and theme providers, then consume components via the UI barrel exports.

Code

# 1) Install peer dependencies
npm install motion lucide-react clsx tailwind-merge

# 2) Ensure Next.js + Tailwind setup
npm install next react react-dom tailwindcss

# 3) Import the component barrel
import { Button, Input, Tabs } from '@/components/ui'

# 4) Wrap app with providers
# - ThemeProvider
# - SpinkThemeProvider
# - Optional ThemeCustomizer

Theme Customization

Spink UI uses CSS variable tokens for accent, radius, spacing, and shadow, with dark/light parity and runtime updates.

Code

import { applyThemeToCSSVars } from '@/lib/spink-theme'

applyThemeToCSSVars({
  accentPreset: 'custom',
  accentColor: '#0087f6',
  radiusScale: 'rounded-sm',
  spacingScale: 'default',
  shadowScale: 'subtle',
})

// Components support local overrides
<Button accentColor="#00f677">Green Accent CTA</Button>

Licensing & Usage Rules

Commercial license model with clear IP boundaries and acceptable usage terms for client deployments.

Code

## Licensing Core Terms
- IP ownership remains 100% with Spink Systems.
- Licensee receives perpetual usage rights for their own brand only.
- Resale, redistribution, sublicensing, and white-label template resale are prohibited.
- Team and Enterprise tiers expand internal deployment scope, not IP transfer.
- Source access terms depend on purchased tier and contract addenda.

Live component previews

Copy + paste ready

Button Variants

Consistent icon alignment, touch-safe heights, and accent-aware variants.

Code

<div className="flex gap-3">
  <Button>Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="soft" accentColor="#0087f6">Soft Blue</Button>
</div>

Form Controls

Unified validation affordances, stronger focus states, and mobile-friendly control rhythm.

Priority support

Code

<div className="grid gap-3">
  <Input label="Email" placeholder="team@brand.com" />
  <Select
    label="Plan"
    options={[
      { value: 'personal', label: 'Personal' },
      { value: 'team', label: 'Team' },
      { value: 'enterprise', label: 'Enterprise' },
    ]}
  />
  <Checkbox label="Accept terms" defaultChecked />
</div>

Navigation Patterns

Keyboard-friendly tabs and category navigation patterns.

Design intent, variants, and behavior details.

Code

<Tabs
  defaultTab="overview"
  tabs={[
    { id: 'overview', label: 'Overview', content: <p>Overview content</p> },
    { id: 'api', label: 'API', content: <p>API content</p> },
    { id: 'examples', label: 'Examples', content: <p>Examples content</p> },
  ]}
/>

Feedback Components

Status messaging and progress patterns with accessible structure.

Rollout78%

Code

<Alert
  variant="success"
  title="Deployment complete"
  description="All checks passed and components were published."
/>
<Progress label="Rollout" value={78} />

Full component catalog

Filtered categories: 10

Core Primitives

26

Buttons, fields, toggles, surfaces, overlays, and typography foundations.

ButtonIcon ButtonSplit ButtonButton GroupBadgePillAvatarAvatar GroupInputTextareaSelectSearch InputComboboxCheckboxRadio GroupSwitchSliderRange SliderProgressCircular ProgressTooltipPopoverCardSurfaceDividerSkeleton

Form Components

26

Validated, mobile-friendly, secure form controls and grouped inputs.

Field ShellFieldsetInput GroupFloating Label InputMasked InputPassword InputOTP InputPIN InputFile UploadDropzoneDate PickerDate Range PickerTime PickerTimezone SelectCountry SelectPhone InputCurrency InputStepper InputSegmented ControlRich Text EditorMarkdown EditorColor PickerSignature PadConsent BlockForm StepperValidation Summary

Navigation

22

Flexible patterns for orientation, switching context, and discovery.

NavbarSidebarApp ShellBreadcrumbsTabsPill TabsUnderline TabsVertical TabsPaginationStepperCommand PaletteContext MenuMega MenuDock NavigationAnchor NavMobile Bottom BarSection SwitcherSpotlight SearchTree NavigationTimeline NavAccordionDisclosure

Data Display

30

Readable tables, metrics, lists, status visuals, and structured content.

Data TableData GridStat CardMetric RowListDescription ListKey Value GridTimelineActivity FeedKanban CardKanban ColumnKanban BoardProfile CardFeature CardEmpty StatePlaceholder IllustrationProgress Step CardBadge ClusterTag ListNumber TickerCount UpHeatmapCalendar GridSchedule ViewComparison GridPricing TablePlan CardLogo CloudTestimonial CardReview Stack

Feedback

22

Status, loading, confirmation, interruptive, and inline response patterns.

AlertInline NoticeToastSnackbarModalDrawerSheetBottom SheetConfirmation DialogLoading OverlaySpinnerProgress BannerInline ErrorSuccess PanelValidation SummaryCalloutAnnouncement BannerNudgeHover CardTour StepCoach MarkSkeleton Row

Dashboard & Analytics

18

Operational widgets, summary panels, filters, and monitoring UI.

Dashboard WidgetKPI GridStat RowSparkline CardTrend PanelRevenue PanelFunnel SummaryRetention CardAlert FeedFilter BarDate FilterSaved View PickerQuery BuilderReport HeaderGoal TrackerProgress Ring PanelUptime CardSLA Panel

Commerce & Marketing

18

Conversion-oriented, comparison, pricing, and CTA-oriented components.

Hero CTA ClusterPricing TableTier TogglePlan ComparisonFeature ComparisonQuote BuilderCheckout SummaryInvoice PreviewCart DrawerTrust BarLogo CarouselFAQ BlockService CardCase Study CardLead Form CardNewsletter FormTestimonial CarouselCTA Banner

Advanced & Interactive

24

Collaborative, app-like, and highly interactive experiences.

Chat InputMessage ComposerMessage BubbleChat ThreadMention PickerEmoji PickerVoice RecorderMedia PickerComment EditorInline CommentsCommand CenterTask BoardKanban BoardCalendarSchedulerEvent DrawerLive Cursor BadgePresence StackNotification CenterActivity StreamSearch ResultsAI Prompt BarPrompt Preset CardSplit View

Layout & Utilities

20

Reusable composition helpers for shells, sections, and spacing systems.

Section HeaderPage HeaderSticky PanelResizerMasonry GridAuto GridStackClusterSidebar LayoutSplit PanelResizable DrawerContainerAspect Ratio BoxScroll AreaMarqueeTheme CustomizerTheme ToggleAccent PickerDensity SwitcherEmpty Canvas

Cinematic & Motion

18

Award-winning micro-interactions, cursor effects, scroll-driven animations, and 3D perspective components.

Char RevealTilt CardGlow CardNumber TickerParallax TextMagnetic CursorAmbient ParticlesMouse SpotlightScan LineFilm GrainMarquee VelocityScroll CounterText ScrambleGlitch TextLetter StaggerWord FadeCursor TrailMagnetic Button
Back to productsGenerate contract