Skip to main content

@ttoss/layouts

@ttoss/layouts is a collection of React components that implement the layouts to use in your application.

Installation​

pnpm add @ttoss/layouts @ttoss/ui @emotion/react

Quickstart​

You can use the Layout component to add a layout to your application:

import { Layout } from '@ttoss/layouts';

const App = () => (
  <Layout>
    <Layout.Header>Header</Layout.Header>
    <Layout.Main>Main</Layout.Main>
    <Layout.Footer>Footer</Layout.Footer>
  </Layout>
);

Or you can use specifics components as StackedLayout to add specific layout to your application:

import { Layout, StackedLayout } from '@ttoss/layouts';

const App = () => (
  <StackedLayout>
    <Layout.Header>Header</Layout.Header>
    <Layout.Main>Main</Layout.Main>
    <Layout.Footer>Footer</Layout.Footer>
  </StackedLayout>
);