0.4.1 • Published 12 months ago
@cos-ui/primitives v0.4.1
@cos-ui/primitives
Headless UI components for React
Getting started
- Install the package
$ npm install @cos-ui/primitives
- Import the parts
Import and structure the parts.
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.
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;
0.4.1
12 months ago
0.4.0
1 year ago
0.3.2
1 year ago
0.3.3
1 year ago
0.3.0
1 year ago
0.3.1
1 year ago
0.2.5
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago
0.2.1
1 year ago
0.2.0
1 year ago
0.1.4
1 year ago
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago