tessl/npm-keystone-ui--core
Core design system components and utilities for KeystoneJS applications
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
layout-components.mddocs/
Layout Components
Core layout primitives that provide flexible, responsive interfaces with consistent spacing, alignment, and visual hierarchy. All layout components support responsive props and theme integration.
Capabilities
Box Component
The foundational layout component that provides comprehensive styling props including colors, spacing, borders, and layout controls. All other components in the library extend from Box.
/**
* Foundational layout component with comprehensive styling props
* @param props - Box styling and content props
* @returns JSX element with applied styles
*/
function Box(props: BoxProps): JSX.Element;
interface BoxProps extends ColorProps, RadiiProps, MarginProps, PaddingProps {
/** Text alignment */
textAlign?: ResponsiveProp<'left' | 'right' | 'center' | 'justify' | 'start' | 'end'>;
/** Element height */
height?: ResponsiveProp<string | number>;
/** Element width */
width?: ResponsiveProp<string | number>;
/** Element or component to render as */
as?: ElementType;
/** Child elements */
children?: ReactNode;
}
interface ColorProps {
/** Background color from theme palette */
background?: ResponsiveProp<keyof Theme['palette']>;
/** Text color from theme palette */
foreground?: ResponsiveProp<keyof Theme['palette']>;
}
interface RadiiProps {
/** Border radius from theme radii */
rounding?: ResponsiveProp<keyof Theme['radii']>;
/** Bottom border radius */
roundingBottom?: ResponsiveProp<keyof Theme['radii']>;
/** Left border radius */
roundingLeft?: ResponsiveProp<keyof Theme['radii']>;
/** Right border radius */
roundingRight?: ResponsiveProp<keyof Theme['radii']>;
/** Top border radius */
roundingTop?: ResponsiveProp<keyof Theme['radii']>;
}
interface MarginProps {
/** Margin on all sides */
margin?: ResponsiveProp<keyof Theme['spacing']>;
/** Top margin */
marginTop?: ResponsiveProp<keyof Theme['spacing']>;
/** Right margin */
marginRight?: ResponsiveProp<keyof Theme['spacing']>;
/** Bottom margin */
marginBottom?: ResponsiveProp<keyof Theme['spacing']>;
/** Left margin */
marginLeft?: ResponsiveProp<keyof Theme['spacing']>;
/** Vertical margin (top and bottom) */
marginY?: ResponsiveProp<keyof Theme['spacing']>;
/** Horizontal margin (left and right) */
marginX?: ResponsiveProp<keyof Theme['spacing']>;
}
interface PaddingProps {
/** Padding on all sides */
padding?: ResponsiveProp<keyof Theme['spacing']>;
/** Top padding */
paddingTop?: ResponsiveProp<keyof Theme['spacing']>;
/** Right padding */
paddingRight?: ResponsiveProp<keyof Theme['spacing']>;
/** Bottom padding */
paddingBottom?: ResponsiveProp<keyof Theme['spacing']>;
/** Left padding */
paddingLeft?: ResponsiveProp<keyof Theme['spacing']>;
/** Vertical padding (top and bottom) */
paddingY?: ResponsiveProp<keyof Theme['spacing']>;
/** Horizontal padding (left and right) */
paddingX?: ResponsiveProp<keyof Theme['spacing']>;
}Usage Examples:
import { Box } from "@keystone-ui/core";
// Basic styled container
<Box
padding="large"
background="neutral100"
rounding="medium"
>
Content here
</Box>
// Responsive styling
<Box
padding={["small", "medium", "large"]}
background={["white", "neutral50"]}
width={["100%", "50%"]}
>
Responsive content
</Box>
// Polymorphic usage
<Box as="section" padding="xlarge">
<Box as="header" marginBottom="large">
Header content
</Box>
</Box>Box Styles Hook
Hook for generating Box component styles programmatically.
/**
* Hook for generating Box component styles
* @param props - Box styling props
* @returns CSS styles object for use with Emotion
*/
function useBoxStyles(props: BoxProps): any;Stack Component
Flexible layout component for arranging children vertically or horizontally with consistent gaps and optional dividers.
/**
* Flexible layout component for vertical/horizontal arrangement
* @param props - Stack layout and styling props
* @returns JSX element with flexbox layout
*/
function Stack(props: StackProps): JSX.Element;
interface StackProps extends BoxProps {
/** Alignment of items along the cross axis */
align?: 'center' | 'end' | 'start' | 'stretch';
/** Child elements to arrange */
children: ReactNode;
/** Arrange horizontally instead of vertically */
across?: boolean;
/** Divider placement between/around items */
dividers?: 'none' | 'around' | 'between' | 'start' | 'end';
/** Gap size between items from theme spacing */
gap?: keyof Theme['spacing'];
}Usage Examples:
import { Stack, Text } from "@keystone-ui/core";
// Vertical stack with gap
<Stack gap="medium">
<Text>First item</Text>
<Text>Second item</Text>
<Text>Third item</Text>
</Stack>
// Horizontal stack with dividers
<Stack across gap="small" dividers="between" align="center">
<Text>Nav item 1</Text>
<Text>Nav item 2</Text>
<Text>Nav item 3</Text>
</Stack>
// Stack with custom styling
<Stack
gap="large"
padding="xlarge"
background="neutral100"
rounding="medium"
>
<Text size="large" weight="bold">Title</Text>
<Text>Description text</Text>
</Stack>Inline Component
Horizontal layout component that wraps items to new lines as needed, with consistent spacing.
/**
* Horizontal wrapping layout component
* @param props - Inline layout and styling props
* @returns JSX element with flexbox wrap layout
*/
function Inline(props: InlineProps): JSX.Element;
interface InlineProps extends BoxProps {
/** Alignment of items along the cross axis */
align?: 'center' | 'end' | 'start' | 'stretch';
/** Child elements to arrange */
children: ReactNode;
/** Gap size between items from theme spacing */
gap?: keyof Theme['spacing'];
}Usage Examples:
import { Inline, Text } from "@keystone-ui/core";
// Tag-like inline layout
<Inline gap="small">
<Text background="blue100" padding="xsmall" rounding="small">Tag 1</Text>
<Text background="blue100" padding="xsmall" rounding="small">Tag 2</Text>
<Text background="blue100" padding="xsmall" rounding="small">Tag 3</Text>
</Inline>
// Button group
<Inline gap="medium" align="center">
<button>Save</button>
<button>Cancel</button>
<button>Delete</button>
</Inline>Center Component
Layout component for centering content both horizontally and vertically.
/**
* Component for centering content horizontally and vertically
* @param props - Center layout and styling props
* @returns JSX element with centered content
*/
function Center(props: CenterProps): JSX.Element;
interface CenterProps extends BoxProps {
/** Fill entire viewport height and width */
fillView?: boolean;
}Usage Examples:
import { Center, Text } from "@keystone-ui/core";
// Center content in container
<Center height="200px">
<Text>Centered content</Text>
</Center>
// Full viewport centering
<Center fillView>
<Text size="large">Loading...</Text>
</Center>Divider Component
Visual separator component with horizontal or vertical orientation and theme-integrated styling.
/**
* Visual separator with orientation support
* @param props - Divider styling and layout props
* @returns JSX element as visual separator
*/
function Divider(props: DividerProps): JSX.Element;
interface DividerProps extends MarginProps {
/** Divider color from theme palette */
color?: ResponsiveProp<keyof Theme['palette']>;
/** Divider orientation */
orientation?: 'horizontal' | 'vertical';
/** CSS class name */
className?: string;
/** No children allowed */
children?: never;
}Usage Examples:
import { Divider, Stack, Text } from "@keystone-ui/core";
// Horizontal divider in vertical layout
<Stack gap="medium">
<Text>Section 1</Text>
<Divider />
<Text>Section 2</Text>
</Stack>
// Vertical divider in horizontal layout
<Inline gap="medium" align="center">
<Text>Item 1</Text>
<Divider orientation="vertical" />
<Text>Item 2</Text>
</Inline>
// Custom colored divider
<Divider color="blue300" marginY="large" />Responsive Design
All layout components support responsive props using arrays that map to theme breakpoints:
// Theme breakpoints: small: 576px, medium: 768px, large: 992px, xlarge: 1200px
<Box
padding={["small", "medium", "large", "xlarge"]}
background={["white", "neutral50", "neutral100"]}
width={["100%", "75%", "50%", "25%"]}
>
Responsive box
</Box>Polymorphic Components
Layout components support the as prop to change the underlying HTML element or React component:
<Box as="section">Section element</Box>
<Box as="article">Article element</Box>
<Box as={CustomComponent}>Custom component</Box>
<Stack as="nav">Navigation stack</Stack>