Surfer Logo
🏄‍♂️
S-tier Design System

Surfer Design System
🏄‍♂️

Token-based design system following STYLES.md specification, OKLCH colors, and standard gray shades

7
Component Categories
48
Components Total
100%
CSS-First Design
Design System100% Token-Based
View Design TokensExplore ComponentsSee Examples

Explore the Design System

Dive into our comprehensive collection of design tokens, patterns, and components

Design Tokens
OKLCH colors, custom fonts, and design foundations
OKLCH ColorsCustom FontsDesign PhilosophyCSS-First Architecture
Explore design tokens
Forms & Inputs
Interactive form components and user input controls
ButtonInputTextareaSelectCheckbox+5
Explore forms & inputs
Data Display
Components for displaying and organizing data
TableCardBadgeAvatarCalendar+3
Explore data display
Navigation
Navigation and menu components for user flow
TabsBreadcrumbPaginationNavigation MenuMenubar+2
Explore navigation
Feedback
Alerts, dialogs, and user feedback components
AlertDialogAlert DialogDrawerTooltip+3
Explore feedback
Layout
Structural and layout components
SeparatorScroll AreaAccordionCollapsibleResizable+1
Explore layout
Overlay
Overlays, menus, and floating content
SheetDropdown MenuContext MenuToggleToggle Group
Explore overlay

Built with Modern Tech

Powered by the latest technologies and best practices

Next.js 15
Latest Next.js with App Router

Server Components, optimized bundling, and perfect performance with React 19.

App Router
Surfer Design System
S-tier design system ready to use

OKLCH colors, enhanced components, and performance-first architecture.

OKLCH Colors
shadcn/ui
Complete component library

41 components ready to use with full customization control.

Radix UI

Also powered by

Tailwind CSS v4.1TypeScriptFramer MotionLucide IconsNext ThemesPNPM