Components – Nextra

Component Introduction

A simple, powerful and flexible site generation framework with everything you love from Next.js.

Get started.

Install the kit.

yarn add @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>
  )
}

Import and use a component.

import { Button } from '@atlrdsgn/kit';
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

You can use components individually, or import as many as you like.

Import an individual component

import { Canvas } from '@atlrdsgn/kit';
 
export default function Home() {
  return (
    <div>
      <Canvas />
    </div>
  );
}

Import multiple components

import { Canvas, Button, Section, Text } from '@atlrdsgn/kit';
 
export default function Home() {
  return (
    <div>
      <Canvas />
      <Section>
        <Text>Some text</Text>
        <Button>Click me</Button>
      </Section>
    </div>
  );
}

Colours Container