@atlrdsgn/kit v0.5.7
ATELIERKIT®
An ever– expanding library of React components, primitives, and tools.
Getting started and using atelierkit
1. Install
To get started, add @atlrdsgn/kit
to your dependencies.
yarn add @atlrdsgn/kit
pnpm install --save @atlrdsgn/kit
npm install --save @atlrdsgn/kit
2. Wrap your app
Import .css
file, and wrap your app.
You need to wrap your app with the KitProvider
context so that the .css file is available to all components.
import '@atlrdsgn/kit/css';
import '...other_styles.css or .scss';
import { KitProvider } from '@atlrdsgn/kit';
export default function App({ Component, pageProps }) {
return (
<KitProvider>
<Component {...pageProps} />
</KitProvider>
);
}
3. Usage
Build smaller components using individual primitives.
import React from 'react';
import { Container } from '@atlrdsgn/kit';
<Container width='medium'>..</Container>;
(or) import multiple primitives and compose complex components.
import React from 'react';
import { Canvas, Text, Button } from '@atlrdsgn/kit';
export const DefaultExample = () => (
<Canvas>
<Text size='sm'>ATELIERKIT®</Text>
<Button size='sm'>Small button</Button>
</Canvas>
);
You can view full documentation at ds.atlrdsgn.com
© 2023 atlrdsgn®
1 month ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
11 months ago
9 months ago
10 months ago
11 months ago
9 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago