An ever– expanding library of React components, primitives, and tools.
To get started, add @atlrdsgn/kit to your dependencies.
yarn add @atlrdsgn/kit
pnpm install --save @atlrdsgn/kit
npm install --save @atlrdsgn/kit
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>
);
}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®