@ttoss/ui
v5.0.8
Published
Primitive layout, typographic, and other components for styling applications.
Downloads
327
Readme
@ttoss/ui
@ttoss/ui is a library of React low level components for building user interfaces and defining the design system of your application. It is built on top of Theme UI: The Design Graph Framework, so that you'll be able to consult the Theme UI documentation to learn more about the design system and the components.
ESM Only
This package is ESM only.
Installation
pnpm add @ttoss/ui @ttoss/react-icons @emotion/react
Quickstart
Create a theme object to define the design tokens of your application.
import type { Theme } from '@ttoss/ui';
export const theme: Theme = {
colors: {
text: '#000',
background: '#fff',
primary: '#33e',
},
};
Pass your theme to the ThemeProvider
component at the root of your application.
import { Heading, ThemeProvider } from '@ttoss/ui';
import { theme } from './theme';
export const App = () => (
<ThemeProvider theme={theme}>
<Heading as="h1" sx={{ color: 'primary' }}>
Hello
</Heading>
</ThemeProvider>
);
Now, you can use the components of the library in your application and access the design tokens defined in your theme through the sx
prop.
import { Flex, Text, Box, Button } from '@ttoss/ui';
export const Component = () => {
return (
<Flex sx={{ flexDirection: 'column' }}>
<Text>Text Value</Text>
<Button
sx={{
backgroundColor: 'primary',
}}
>
Button Primary
</Button>
</Flex>
);
};
:::note Note
You don't need to use the custom /** @jsxImportSource theme-ui */
pragma if you use the sx
prop directly on the components of the library.
:::
Components
You can check all the components of the library @ttoss/ui
on the Storybook.
Global
Wrapper around the Emotion Global component, made Theme UI theme-aware.
import { Global } from '@ttoss/ui';
export const Provider = (props) => {
return (
<Global
styles={{
button: {
m: 0,
bg: 'primary',
color: 'background',
border: 0,
},
}}
/>
);
};
Misc
keyframes
import { Box, keyframes } from '@ttoss/ui';
const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } });
export const Component = (props) => {
return <Box {...props} sx={{ animation: `${fadeIn} 1s backwards` }} />;
};