Brycks Design System - A modern, calm, and tactile UI component library
npm install @brycks/core-frontbash
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
``