Text
A versatile text component for displaying content with consistent typography. Perfect for headings, body text, captions, and labels with customizable sizes, weights, and truncation options.
Import
import { Text } from "@sparrowengg/twigs-react";Usage
const TextExample = () => {
return (
<Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
<Text size="lg" weight="bold">Large Bold Heading</Text>
<Text size="md" weight="medium">Medium Weight Subheading</Text>
<Text size="sm" weight="regular">Regular body text content</Text>
<Text size="xs" weight="regular" truncate>
This is a long text that will be truncated with ellipsis
</Text>
</Box>
);
};Props
Text
| Prop | Type | Default |
|---|---|---|
size? | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'sm' |
weight? | 'regular' | 'medium' | 'bold' | 'regular' |
truncate? | boolean | false |
showLines? | number | - |
children? | ReactNode | - |
css? | object | - |
TimePicker
A time input component for selecting and editing time values. Perfect for scheduling, time tracking, and any scenario requiring precise time input.
Heading
A component for rendering headings with consistent typography and styling. Supports different sizes and weights while maintaining semantic HTML structure.