# @cos-ui/primitives

> Headless UI components for React

Latest version **0.4.1** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @cos-ui/primitives
pnpm add @cos-ui/primitives
yarn add @cos-ui/primitives
bun add @cos-ui/primitives
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2023-05-29 |
| First published | 2022-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 104.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | minagwak |

## Links

- npm: https://www.npmjs.com/package/@cos-ui/primitives
- Homepage: https://github.com/Co-Studo/cos-ui/tree/main/packages/primitives#readme
- npm.io page: https://npm.io/package/@cos-ui/primitives

## Recent versions

- 0.4.1 (latest) — 2023-05-29
- 0.4.0 — 2023-05-03
- 0.3.3 — 2023-03-23
- 0.3.2 — 2023-03-23
- 0.3.1 — 2023-02-10
- 0.3.0 — 2023-02-03
- 0.2.5 — 2023-01-19
- 0.2.4 — 2023-01-11
- 0.2.3 — 2022-12-12
- 0.2.2 — 2022-12-07
- 0.2.1 — 2022-12-05
- 0.2.0 — 2022-12-01
- 0.1.4 — 2022-11-30
- 0.1.3 — 2022-11-29
- 0.1.2 — 2022-11-24
- … 2 more at https://npm.io/package/@cos-ui/primitives/versions

## README

# @cos-ui/primitives

Headless UI components for React

<br/>

### Getting started

<br/>

1. Install the package

```shell
$ npm install @cos-ui/primitives
```

<br/>

2. Import the parts

Import and structure the parts.

```typescript jsx
import { Tab } from '@cos-ui/primitives';

const TabDemo = () => (
  <Tab.Group>
    <Tab.List>
      <Tab>Tab A</Tab>
      <Tab>Tab B</Tab>
    </Tab.List>
    <Tab.Panels>
      <Tab.Panel>Tab Panel 1</Tab.Panel>
      <Tab.Panel>Tab Panel 2</Tab.Panel>
    </Tab.Panels>
  </Tab.Group>
);
```

You can styling your component using `styled` of styled-components.

```typescript jsx
import { Tab } from '@cos-ui/primitives';
import styled from 'styled-components';

const StyledTab = styled(Tab)`
  /* style */
`;

const StyledTabList = styled(Tab.List)`
  /* style */
`;

const StyledTabPanel = styled(Tab.Panel)`
  /* style */
`;

StyledTab.Group = Tab.Group;
StyledTab.List = StyledTabList;
StyledTab.Panels = Tab.Panels;
StyledTab.Panel = StyledTabPanel;

// OR

const StyledTabRoot = styled(Tab)`
  /* style */
`;

const StyledTab = Object.assign(StyledTab, {
  Group: Tab.Group,
  List: StyledTabList,
  Panels: Tab.Panels,
  Panel: StyledTabPanel,
})

export default StyledTab;
```

---
_Source: https://npm.io/package/@cos-ui/primitives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._