Brycks Core Front

A modern, calm, and tactile UI component library for React. Inspired by Apple's design language.

Features

• Design System First: Comprehensive tokens for colors, typography, spacing, shadows, and motion
• Theme Support: Built-in light and dark themes with easy customization
• Fully Typed: Complete TypeScript support with exported types
• Accessible: ARIA-compliant components with keyboard navigation
• Zero Dependencies: No external dependencies (except React peer dependency)
• Tree-Shakeable: Import only what you need

Installation

npm install @brycks/core-front
# or
pnpm add @brycks/core-front

Quick Start

import { ThemeProvider, Button, Text, Stack } from '@brycks/core-front'
import '@brycks/core-front/styles.css'

function App() {
  return (
    <ThemeProvider>
      <Stack gap={4} p={6}>
        <Text variant="bodyLarge">Welcome to Brycks</Text>
        <Button intent="primary">Get Started</Button>
      </Stack>
    </ThemeProvider>
  )
}

Components

Layout

• Box - Polymorphic layout primitive
• Stack / HStack / VStack - Flexbox stack layouts
• Grid / GridItem - CSS Grid layouts
• Container - Responsive container

Typography

• Text - Body text with variants
• Heading / Display - Semantic headings

Primitives

• Button / IconButton - Interactive buttons

Form

• Input - Base input
• TextField - Input with label and validation
• Select - Native select
• Checkbox - Checkbox with label
• Switch - Toggle switch
• Textarea - Multi-line input

Feedback

• Modal - Dialog/modal window
• Alert - Contextual alerts
• Tooltip - Hover tooltips

Utility

• Badge - Status badges
• Loader / Spinner - Loading indicators
• Skeleton - Loading placeholders
• Divider - Content separators
• EmptyState - Zero-state displays

Theming

Using the Theme Provider

import { ThemeProvider } from '@brycks/core-front'

function App() {
  return (
    <ThemeProvider
      config={{
        defaultMode: 'system', // 'light' | 'dark' | 'system'
        light: {
          // Override light theme colors
          primary: {
            default: '#your-brand-color',
          },
        },
      }}
    >
      {/* Your app */}
    </ThemeProvider>
  )
}

Accessing Theme

import { useTheme, useThemeColors } from '@brycks/core-front'

function MyComponent() {
  const { mode, toggleMode } = useTheme()
  const colors = useThemeColors()

  return (
    <button onClick={toggleMode}>
      Current mode: {mode}
    </button>
  )
}

Design Tokens

Import tokens directly for custom components:

import { colors, spacing, radii, shadows } from '@brycks/core-front/tokens'

const myStyles = {
  padding: spacing[4],
  borderRadius: radii.md,
  boxShadow: shadows.md,
  color: colors.primary[600],
}

CSS Variables

All theme colors are available as CSS variables:

.my-element {
  background: var(--brycks-background-app);
  color: var(--brycks-foreground-default);
  border: 1px solid var(--brycks-border-default);
}

Development

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build library
pnpm build

# Type check
pnpm typecheck

License

MIT