npm install @primitivekit/react

import { Button, Input, Card } from '@primitivekit/react';

function App() {
  return (
    <Card>
      <Input 
        label="Email" 
        type="email"
        placeholder="Enter your email"
      />
      <Button variant="primary" size="large">
        Submit
      </Button>
    </Card>
  );
}

import '@primitivekit/react/tokens/tokens.css';
import { Button } from '@primitivekit/react';

function App() {
  return (
    <Button
      style={{
        '--btn-bg-color': 'var(--color-brand-primary-500)',
        '--btn-border-radius': 'var(--border-radius-lg)',
        '--btn-padding-x': 'var(--spacing-4)',
      }}
    >
      Token-based Button
    </Button>
  );
}

<Form onSubmit={handleSubmit}>
  <Stack spacing="medium">
    <Input label="Name" required />
    <Input label="Email" type="email" required />
    <Textarea label="Message" rows={5} />
    <Button type="submit">Submit</Button>
  </Stack>
</Form>

<Container size="lg">
  <Grid columns={{ base: 1, md: 2, lg: 3 }} gap="large">
    <Card>Content 1</Card>
    <Card>Content 2</Card>
    <Card>Content 3</Card>
  </Grid>
</Container>

const [isOpen, setIsOpen] = useState(false);

<>
  <Button onClick={() => setIsOpen(true)}>
    Open Modal
  </Button>
  
  <Modal 
    isOpen={isOpen} 
    onClose={() => setIsOpen(false)}
    title="Modal Title"
    footer={
      <>
        <Button variant="outline" onClick={() => setIsOpen(false)}>
          Cancel
        </Button>
        <Button onClick={handleConfirm}>
          Confirm
        </Button>
      </>
    }
  >
    <p>Modal content</p>
  </Modal>
</>