Design System Core
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.
Usage
Visit the Akasha Storybook page for a visual demonstration of how the Design System Core components look. Code examples of how to start using these components in your app are also available.
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 3 variants: primary
for the call-to-action
use case, secondary
for normal usage, and text
only when you need clickable texts that don't look like a button. It can also be displayed as an icon.
<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.