@volkansuner/ccomponents

React Native UI component library with a preset system, theme-based colors, and TypeScript-first design.

Features

• Preset system — named style configurations per component, override in theme
• Theme-based colors — dot-notation color keys (text.primary, background.card), no hardcoded values
• Dark mode — automatic _inverted variant resolution, toggle with setMode('dark')
• Shorthand props — m, p, bg, flex and more on every component
• TypeScript-first — full type safety, custom colors/fonts/presets via declaration merging
• 13 components — views, text, inputs, buttons, screens, drawers, alerts, and more

Installation

npm install @volkansuner/ccomponents
# or
yarn add @volkansuner/ccomponents
# or
pnpm add @volkansuner/ccomponents

See peer dependencies →

Quick Setup

import { CProvider, createTheme } from '@volkansuner/ccomponents';

const theme = createTheme({
  colors: {
    light: { primary: '#007AFF' },
    dark:  { primary: '#0A84FF' },
  },
  fonts: {
    regular: 'Inter-Regular',
    bold: 'Inter-Bold',
  },
});

export default function App() {
  return (
    <CProvider theme={theme} initialMode="light">
      <YourApp />
    </CProvider>
  );
}

Quick Usage

import { CScreen, CView, CText, CButton, CAlert } from '@volkansuner/ccomponents';

export default function HomeScreen() {
  return (
    <CScreen preset="default" scrollable>
      <CView p={16}>
        <CText preset="title" mb={8}>Welcome</CText>
        <CText preset="body" color="text.secondary" mb={24}>
          Build with ccomponents.
        </CText>
        <CButton
          preset="primary"
          title="Get Started"
          onPress={() => CAlert.success('Hello!')}
        />
      </CView>
    </CScreen>
  );
}

Components

| Component | Description | Docs | |-----------|-------------|------| | CView | Layout container with preset styles | → | | CText | Typography with HTML rendering | → | | CButton | Pressable button with icons and loading | → | | CInput | Text input with masks, floating label, types | → | | CScreen | Screen wrapper with safe area and header | → | | CSelect | Bottom sheet dropdown with search | → | | CCheckbox | Checkbox with label and preset styles | → | | CAccordion | Animated expandable section | → | | CDrawer | Imperative side drawer | → | | CIcon | Vector icon from @expo/vector-icons | → | | CImage | Image with preset sizes and expo-image support | → | | CAlert | Imperative toast/notification system | → | | CPressable | Pressable with haptics and preset styles | → |

Documentation

• Getting Started — installation, peer deps, setup, first screen
• Theming — colors, fonts, dark mode, hooks
• Presets — style system, custom presets, TypeScript augmentation
• Common Props — spacing and layout shorthands

License

MIT