Components

Interactive components with all states, transitions, and specifications.

Buttons

Buttons trigger actions. Use primary for main actions, secondary for alternatives. All buttons have border-radius: 8px.

Primary Button

High-emphasis button for primary actions. Dark fill creates maximum contrast. Try hovering and clicking below.

Get Started
Hover State
DefaultHoverActiveDisabled
SpecificationBase background oklch(0.145 0 0) var(--foreground) color oklch(1 0 0) var(--background) padding 12px 24px border-radius 8px font-weight 500 font-size 14px Hover background oklch(0.145 0 0 / 90%) transition 150ms ease Active (pressed) transform scale(0.98) transition 50ms ease Disabled opacity 0.5 cursor not-allowed

Secondary Button

Low-emphasis button for secondary actions. Transparent with subtle border.

Documentation
SpecificationBase background transparent border 1px solid oklch(0.145 0 0 / 20%) color oklch(0.145 0 0) var(--foreground) padding 12px 24px border-radius 8px Hover background oklch(0.145 0 0 / 5%) border-color oklch(0.145 0 0 / 40%) transition 150ms ease

Button Sizes

SmallMediumLarge
Size Scalesm padding: 8px 16px font-size: 14px height: ~36px md padding: 12px 24px font-size: 14px height: ~44px lg padding: 14px 32px font-size: 16px height: ~50px
Props
variant"primary" | "secondary"Visual style. Default: primary
size"sm" | "md" | "lg"Button size. Default: md
fullWidthbooleanExpand to fill container width

Cards

Container components with border-radius: 12px.

Feature Card

Interactive cards with hover lift and glow effect. Try hovering.

Multi-Rail Router

Route payments to the optimal rail automatically.

Hover State

Lifted with accent border glow.

DefaultHover
SpecificationBase background var(--background) border 1px solid oklch(0.922 0 0) padding 24px border-radius 12px Hover transform translateY(-2px) box-shadow 0 8px 16px -6px rgba(0, 0, 0, 0.08) border-color oklch(0.585 0.233 264 / 0.2) transition all 400ms ease-out Pseudo-elements: ::before Gradient border glow ::after Shine sweep effect (600ms)

Static Card

Non-Interactive Content

Used for content display without hover effects.

Code Blocks

Display code with proper syntax formatting. All code blocks have border-radius: 12px.

Inline Code

Use flowly.pay() to process payments.

Specificationfont-family var(--font-geist-mono) font-size 0.85em (relative) font-weight 450 background oklch(0.96 0 0) color oklch(0.3 0 0) padding 2px 6px border-radius 4px

Code Window

Terminal-style display with macOS window chrome.

flowly-example.ts
import { Flowly } from '@flowly/sdk'

const flowly = new Flowly({
  apiKey: process.env.FLOWLY_API_KEY
})

const result = await flowly.pay({
  amount: 50.00,
  vendor: 'openai.com',
  optimize_for: 'cost'
})

console.log(result.rail_used) // 'ramp'
SpecificationContainer background oklch(0.15 0 0) border-radius 12px box-shadow 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) Header background oklch(0.12 0 0) border-bottom 1px solid oklch(0.2 0 0) padding 12px 16px Window Dots size 12px × 12px gap 6px colors #ff5f56 (red), #ffbd2e (yellow), #27ca40 (green) Content padding 20px font-family var(--font-mono) font-size 14px line-height 1.6 color #e6edf3

Form Inputs

Form elements with focus rings. Inputs have border-radius: 8px.

Text Input

DefaultFocusError
SpecificationBase background var(--background) border 1px solid oklch(0.922 0 0) padding 10px 16px font-size 14px border-radius 8px Focus border-color var(--accent) box-shadow 0 0 0 3px oklch(0.585 0.233 264 / 0.2) outline none transition all 150ms ease Error border-color var(--destructive) oklch(0.577 0.245 27) box-shadow 0 0 0 3px oklch(0.577 0.245 27 / 0.1)

Badges

Small labels with border-radius: 4px for status and categories.

Status Badges

ConnectedPendingError

Label Badges

SDKAPINew
Specificationpadding 4px 10px font-size 12px font-weight 500 border-radius 4px Status Variants success bg: green-500/10 text: green-600 warning bg: yellow-500/10 text: yellow-600 error bg: red-500/10 text: red-600 neutral bg: var(--muted) text: var(--muted-foreground) accent bg: accent/10 text: var(--accent)

Keyboard Shortcuts

Display keyboard shortcuts with proper styling.

⌘K
Esc
⌘Enter
SpecificationContainer font-family var(--font-mono) font-size 11px font-weight 500 background oklch(0.15 0 0) padding 4px 8px border-radius 4px Key background oklch(0.25 0 0) padding 2px 6px border-radius 3px

Border Radius Scale

Consistent rounded corners throughout the design system.

4pxBadges, keys
8pxButtons, inputs
12pxCards, containers
fullPills, avatars

Transition Timing

Consistent animation timing for all interactive elements.

Timing FunctionsFast (hover, focus) duration 150ms easing ease use Button hovers, link underlines, input focus Medium (state changes) duration 200ms easing ease-out use Accordion expand, modal open Emphasis (cards) duration 400ms easing ease-out use Card lift, glow effects Quick feedback (active) duration 50ms easing ease use Button press scale