Skip to content

Latest commit

 

History

History
66 lines (45 loc) · 1.88 KB

design-system.md

File metadata and controls

66 lines (45 loc) · 1.88 KB

Design System

A library of core UI components built with Twind, a tailwind-in-js solution.

The components implement the visual design language of AKASHA, and can be customised with tailwind style directives through the customStyle property.

For a showcase of the components you can visit our storybook, and check out the DSCORE section.

To use a component import it from the design-system-core package:

import Stack from '@akashaorg/design-system-core/lib/components/Stack';

Stack

A container that lays out its content in one direction using flexbox. Can be used to arrange other components:

  <Stack direction="row" spacing="gap-4" padding="p-4" fullWidth>
    <ExampleComponent1>
    <ExampleComponent2>
  </Stack>

Card

A container of information that has predefined styles following the AKASHA design language. Has rounded borders and displays a box-shadow by default, making it useful for structuring elements in apps. Can be used as an entry point for other, more detailed elements:

  <Card elevation={1} padding={'p-4'}>
    <ExampleComponent1>
    <ExampleComponent2>
  </Card>

Button

A button component with rounded borders. Has 2 variants: primary for the call-to-action use case and secondary for normal usage. It can also display an icon, or it can be text only.

 <Button variant="secondary" label="Click me" onClick={handleClick}>

Toggle

A toggle component with multiple sizes. Can be disabled.

 <Toggle checked={isChecked} onChange={handleToggle} size="small">

Checkbox

A checkbox component.

<Checkbox label={'Checkbox'} name="check1" value="check1" handleChange={handleCheckbox} isSelected={isChecked} isDisabled={disableCheckbox} />

There are multiple other components in the package that can be customised to fit your needs.