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

bash

npm install @brycks/core-front

or

pnpm add @brycks/core-front





Quick Start

tsx

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

import '@brycks/core-front/styles.css'



function App() {

  return (

    

      

        Welcome to Brycks

        

      

    

  )

}





Components



$3

-

Box

 - Polymorphic layout primitive

-

Stack / HStack / VStack

 - Flexbox stack layouts

-

Grid / GridItem

 - CSS Grid layouts

-

Container

 - Responsive container



$3

-

Text

 - Body text with variants

-

Heading / Display

 - Semantic headings



$3

-

Button / IconButton

 - Interactive buttons



$3

-

Input

 - Base input

-

TextField

 - Input with label and validation

-

Select

 - Native select

-

Checkbox

 - Checkbox with label

-

Switch

 - Toggle switch

-

Textarea

 - Multi-line input



$3

-

Modal

 - Dialog/modal window

-

Alert

 - Contextual alerts

-

Tooltip

 - Hover tooltips



$3

-

Badge

 - Status badges

-

Loader / Spinner

 - Loading indicators

-

Skeleton

 - Loading placeholders

-

Divider

 - Content separators

-

EmptyState

 - Zero-state displays



Theming



$3

tsx

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



function App() {

  return (

          config={{

        defaultMode: 'system', // 'light' | 'dark' | 'system'

        light: {

          // Override light theme colors

          primary: {

            default: '#your-brand-color',

          },

        },

      }}

    >

      {/ Your app /}

    

  )

}

$3

tsx

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



function MyComponent() {

  const { mode, toggleMode } = useTheme()

  const colors = useThemeColors()



  return (

    

  )

}





Design Tokens



Import tokens directly for custom components:

tsx

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:

css

.my-element {

  background: var(--brycks-background-app);

  color: var(--brycks-foreground-default);

  border: 1px solid var(--brycks-border-default);

}





Development

bash

Install dependencies

pnpm install



Start development server

pnpm dev



Build library

pnpm build



Type check

pnpm typecheck

License

MIT