@velox/design Stable

bun add @velox/design

// index.tsx
import { render } from 'veloxkit'
import { ThemeProvider } from '@velox/design'
import App from './App'
 
render(
  <ThemeProvider colorScheme="system">
    <App />
  </ThemeProvider>
)

// App.tsx
import { Button, Card, Heading, Label } from '@velox/design'
 
export default function App() {
  return (
    <Card>
      <Heading level={2}>Hello, VeloxKit</Heading>
      <Label muted>Build native apps with React.</Label>
      <Button label="Get started" onPress={() => {}} />
    </Card>
  )
}

// Lock to dark mode
<ThemeProvider colorScheme="dark">
  <App />
</ThemeProvider>
 
// Follow OS preference (default)
<ThemeProvider colorScheme="system">
  <App />
</ThemeProvider>
 
// Override the primary accent
<ThemeProvider overrides={{ colors: { primary: '#ff6b6b' } }}>
  <App />
</ThemeProvider>

import { useTheme } from '@velox/design'
 
function StatusBadge({ ok }) {
  const { colors, space, radius, fontSize } = useTheme()
 
  return (
    <View style={{
      backgroundColor: ok ? colors.successSurface : colors.errorSurface,
      paddingHorizontal: space[3],
      paddingVertical: space[1],
      borderRadius: radius.full,
    }}>
      <Text style={{ color: ok ? colors.success : colors.error, fontSize: fontSize.sm }}>
        {ok ? 'Online' : 'Offline'}
      </Text>
    </View>
  )
}

import { createTheme } from '@velox/design'
 
// Purple-accented dark theme
const purpleDark = createTheme('dark', {
  colors: {
    primary:     '#9d5bd2',
    primaryText: '#ffffff',
    primaryHover: '#b06ee8',
  },
})
 
// Use it:
<ThemeProvider colorScheme="dark" overrides={purpleDark}>
  <App />
</ThemeProvider>

space[0]  = 0
space[1]  = 4
space[2]  = 8
space[3]  = 12
space[4]  = 16
space[5]  = 20
space[6]  = 24
space[8]  = 32
space[10] = 40
space[12] = 48
space[16] = 64

fontSize.xs   = 11
fontSize.sm   = 13
fontSize.base = 15
fontSize.md   = 17
fontSize.lg   = 20
fontSize.xl   = 24
fontSize['2xl'] = 30
fontSize['3xl'] = 36
fontSize['4xl'] = 48
 
fontWeight.regular  = '400'
fontWeight.medium   = '500'
fontWeight.semibold = '600'
fontWeight.bold     = '700'

radius.none = 0
radius.sm   = 4
radius.md   = 8
radius.lg   = 12
radius.xl   = 16
radius.full = 9999   // pill shape

import { Button } from '@velox/design'
 
<Button label="Save" onPress={handleSave} />
<Button label="Cancel" variant="secondary" onPress={handleCancel} />
<Button label="Delete" variant="ghost" onPress={handleDelete} />
<Button label="Loading…" disabled />

<Card>
  <Heading level={3}>Title</Heading>
  <Label>Some description text here.</Label>
</Card>
 
<Card padding={24} style={{ marginBottom: 12 }}>
  <Label bold>Custom padding</Label>
</Card>

<Divider />                           // horizontal
<Divider direction="vertical" />      // vertical (requires fixed-height parent)

<Label>Body text</Label>
<Label muted>Secondary caption</Label>
<Label bold size="sm">Small bold text</Label>
<Label size="xl">Large text</Label>

<Heading level={1}>App Title</Heading>
<Heading level={2}>Section</Heading>
<Heading level={3}>Subsection</Heading>
<Heading level={4}>Group</Heading>

<Badge label="Stable" />
<Badge label="Connected" variant="success" />
<Badge label="Syncing" variant="warning" />
<Badge label="Error" variant="error" />

import {
  ThemeProvider, useTheme, Button, Card, Divider,
  Label, Heading, Badge
} from '@velox/design'
import { Switch } from 'veloxkit'
import { useState } from 'react'
 
function SettingsPage() {
  const { colors, space } = useTheme()
  const [notifications, setNotifications] = useState(true)
  const [analytics, setAnalytics] = useState(false)
 
  return (
    <ScrollView style={{ backgroundColor: colors.bg, padding: space[4] }}>
      <Heading level={2}>Settings</Heading>
 
      <Card style={{ marginTop: space[4] }}>
        <Heading level={4}>Notifications</Heading>
        <Divider style={{ marginVertical: space[3] }} />
 
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <View>
            <Label bold>Push notifications</Label>
            <Label muted size="sm">Alerts for new activity</Label>
          </View>
          <Switch value={notifications} onValueChange={setNotifications} />
        </View>
      </Card>
 
      <Card style={{ marginTop: space[3] }}>
        <Heading level={4}>Privacy</Heading>
        <Divider style={{ marginVertical: space[3] }} />
 
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
          <View style={{ flex: 1 }}>
            <View style={{ flexDirection: 'row', gap: space[2], alignItems: 'center' }}>
              <Label bold>Analytics</Label>
              <Badge label="Optional" variant="default" />
            </View>
            <Label muted size="sm">Anonymous usage data to improve the app</Label>
          </View>
          <Switch value={analytics} onValueChange={setAnalytics} />
        </View>
      </Card>
 
      <Button
        label="Save changes"
        onPress={() => {}}
        style={{ marginTop: space[6] }}
      />
    </ScrollView>
  )
}
 
export default function App() {
  return (
    <ThemeProvider colorScheme="system">
      <SettingsPage />
    </ThemeProvider>
  )
}