Community repository for storing examples, reporting issues and tracking roadmap
Full web changelog · Documentation
npm install reshaped
<FormControl>
<FormControl.Label>Pin code</FormControl.Label>
<PinField name="pin" defaultValue="2543" />
</FormControl>
We've added a new PinField
component for handling one-time passwords and other numeric or alphabetic codes.
It works based on a native input element, supports controlled/uncontrolled modes and has an extensive keyboard support for managing the input focus and selection.
Based on the community request, we have added Toast rendering boundaries.
Anywhere in your application, you can wrap an area with a separate ToastProvider
to make notifications render based on that area boundaries.
function Boundary() {
const ChildComponent = () => {
const toast = useToast();
return (
<Button
onClick={() => {
toast.show({
text: "Notification sent",
});
}}
>
Show notification
</Button>
);
};
return (
<View backgroundColor="neutral-faded" padding={10} width="600px" maxWidth="100%" borderRadius="medium">
<ToastProvider>
<ChildComponent />
</ToastProvider>
</View>
);
}
FormControl
files naming when working with Vitetype
buttons with a custom onClick
disabledExpand
property to render static breadcrumbs inside other clickable elements #227
tabIndex
to the day cellsoverlayClassName
property #229
auto
widthfocus-within
styles from the root elements whenever a button is focused in one of its slotsReact.Fragment
#226
disabled
option to control the hotkeys availability based on your local statepreventDefault
option to automatically prevent the default behavior of the binded hotkeysmeta
keyPublished by blvdmitry 6 months ago
Full web changelog · Documentation
npm install reshaped
We've added a new component to help users navigate across multiple pages of content.
It automatically truncates the pages, handles accessility including focus management and provides controlled as well as uncontrolled behavior to make sure you can connect it to your custom application logic.
<Pagination total={10} previousAriaLabel="Back" nextAriaLabel="Forward" />
While we have aligned components and design tokens implementations in Figma and in React, syncing custom themes across both platforms was always a manual process.
With the introduction of theming generation, we've automated a part of the theming process and in this release we're adding the missing piece.
We've released a new version of our Figma plugin that now lets you upload the json output from your theme in code and generate a Figma style and variables library automatically.
We're planning to keep evolving this functionality with the upcoming improvements for the Figma variables support and general announcements that will happen during the Figma Config this summer.
Ever wanted to start your own development blog but then you find yourself spending weeks to build a front-end application for that?
We've created a new blog example using Reshaped but this time we've also published it as an NPM package and open-sourced it.
Besides checking how Reshaped can be used in your own project, you can use it for your own MDX and Next.js powered blog.
It gives you an amazing layout inspired by Brian Lovin's personal website, which is built using Reshaped, supports light and dark mode, completely accessible and responsive.
sideEffects: false
by default which improves tree-shaking for the bundlers relying on this flag.Create React App
guidelines with more details on how to enable custom media queries supportjson
file output during theme generation@layer
with lower priority, making sure that css order gets resolved correctly during tree-shakinguse client
directive in RSC supporting frameworkspointer-events: none
to the Badge
used in BadgeContainer
to avoid it blocking the trigger clicksas
property support for nesting multiple clickable elements within each otheruse client
directive in RSC supporting frameworksas
property support for nesting multiple clickable elements within each otherTooltip
positioning to always keep it inside the viewport and avoid causing page to scroll horizontally for tooltips with long labelsverticalAlign
supportbalance
wrap supportPublished by blvdmitry 9 months ago
Full web changelog · Documentation
npm install reshaped
We're introducing a new ScrollArea
utility which aligns the scrollbar styling across all platforms, while still relying on the native scrolling behavior.
It supports multiple display modes and supports both horizontal and vertical directions.
Besides the general style alignment, it can be useful for non-standard scrolling areas where displaying a native scrollbar can be too distractive on some platforms.
For example, it's perfect for navigation menus or smaller components with scrollable areas.
In this example, we're rendering it inside the Card
with scrollbars shown on the area hover and scrolling in both directions:
<View width="300px">
<Card height="200px" padding={0}>
<ScrollArea scrollbarDisplay="hover">
<View height="300px" width="150%" align="center" justify="center">
Text content
</View>
</ScrollArea>
</Card>
</View>
Based on the community request, we've improved out Storybook setup with the new addons:
storysource
pluginTogether, these changes are aiming to improve the developer experience of teams working with our Storybook environment and provide additional contextual information about components in case they're staying on one of the previous versions of Reshaped.
react-jsx
page
color background to <html>
in addition to <body>
TextFIeld
Published by blvdmitry 10 months ago
Full web changelog · Documentation
npm install reshaped
We are adding new color tokens: warning
and brand
.
Warning colors are used as a new role in between critical
and positive
colors, while brand colors can be used for brand assets as a standalone color different from primary
colors.
With the new colors support we have introduced new colors for component like Badge
and Progress
.
If you're using your own themes, make sure to generate them again to include
new color tokens in the builders. If you're using a custom theme in Figma,
update its definition in the theming plugin you're using.
We have added a new example of the whole application screen built with Reshaped and its design is included in our Design license.
It features the whole page layout relying completely on the Reshaped components utilities, including its responsive behaviour and interactive components, like DropdownMenu or Toast.
getConfig()
function to support viewport breakpoints themingminWidth
and minHeight
supportauto
supportPublished by blvdmitry 11 months ago
Full web changelog · Documentation
npm install reshaped
<View width="320px">
<Calendar />
</View>
We're adding a new Calendar
component to work with single and range date selection.
It supports controlled / uncontrolled behavior, full keyboard navigation, localization, separate month selection and much more.
Like with every other component, we pay additional attention to how it can be composed with other components and we provide examples of how you can build a form input for the date selection.
We've introduced a new swipe behavior for Modal
components on touch devices.
All Modals
besides the center-positioned ones can now be closed with touch events and you can try it for yourself if you're on mobile device or simulate it in your dev tools:
function Example() {
const { active, activate, deactivate } = useToggle(false);
return (
<>
<Button onClick={activate}>Open modal</Button>
<Modal active={active} onClose={deactivate} position="start">
Modal content
</Modal>
</>
);
}
on
color generation algorithm to be more precise according to the wcag requirementsinherit
color value for the iOS Safari edge casestransparent
property to manually control its progressmaxLines
to apply word-break when truncating a single linepaddingInline
and paddingBlock
propertiesPublished by blvdmitry 11 months ago
Full web changelog · Documentation
npm install reshaped
The new FileUpload component we're introducing is a flexible and easy-to-use tool for handling file attachments in forms. It's designed to be lightweight, leveraging our standard composition approach and give you complete control over the component's layout and appearance.
One of the key aspects of the FileUpload component is its compatibility with third-party libraries. For instance, integrating with react-dropzone is straightforward, enabling you to tap into its advanced file upload capabilities. This ensures that while the component itself remains simple and unopinionated, it doesn't limit your ability to implement more complex functionalities.
The component supports both click and drag events for file selection, making it user-friendly and adaptable to various user interactions. This approach aligns with our goal of providing components that are both powerful and easy to use, without imposing strict design or functional constraints.
Published by blvdmitry 12 months ago
Full web changelog · Documentation
npm install reshaped
Last time, we've introduced support for the runtime theming to let you create new themes right in your browser environment.
However, creating themes manually would mean that you still have to go through a long process of manually picking the values for all design tokens.
Finding right colors is definitely the hardest step in the process, so in v2.5 we're adding a new theme generation feature.
Now you can pass just your primary brand color and we'll generate a full set of color tokens required for theming, including dark mode values.
In case you want more granular control over certain colors, you still can pick different base colors for the critical
, positive
and neutral
hues or even override individual token values.
To make sure your generated themes don't stay aligned with our default theme, we've updated some of the Reshaped theme values.
In case you're relying on the default Reshaped theme value, make sure to re-sync it in Figma.
<View width="500px" maxWidth="100%" gap={2}>
<Stepper labelDisplay={{ s: "hidden", m: "inline" }} activeId={1}>
<Stepper.Item completed title="Pick your plan" subtitle="Pro or hobby" />
<Stepper.Item title="Contact info" />
<Stepper.Item title="Payment" />
</Stepper>
<Hidden hide={{ s: false, m: true }}>
<View direction="row" gap={4} justify="space-between">
<Text weight="medium">Contact info</Text>
<Text weight="medium">Step 2 of 3</Text>
</View>
</Hidden>
</View>
One of the requests we had was a component to control a multi-step process navigation, so we're introducing a new Stepper
component in this release.
It includes support for row
and column
direction, as well as responsive visibility of the labels.
With all supported properties, you can easily compose and control the Stepper component according to the unique business logic of your product.
foreground-critical
color style reference used in the colors preview0
value support for the shadow attributesAccordion
Button
Button.Aligner
position
property to side
. position
is deprecated now but both properties will work until the next major release.DropdownMenu
Enter
and Space
keysMenuItem
side
support for the MenuItem.AlignerPopover
TextArea
TextField.Aligner
utility for aligning the field value with other content on the page #180
TextField
TextField.Aligner
utility for aligning the field value with other content on the page #180
Tooltip
View
static
position supportgrow
property #185
Published by blvdmitry about 1 year ago
Full web changelog · Documentation
npm install reshaped
<View width="280px" maxWidth="100%">
<Table border>
<Table.Row highlighted>
<Table.Heading>Product</Table.Heading>
<Table.Heading align="end" width="auto">
Price
</Table.Heading>
</Table.Row>
<Table.Row>
<Table.Cell>Coffee</Table.Cell>
<Table.Cell align="end">$4</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>Sandwich</Table.Cell>
<Table.Cell align="end">$6.50</Table.Cell>
</Table.Row>
</Table>
</View>
We're adding a new Table component that provides common compound components for rendering individual table elements and gives you a lot of flexibility through composition.
This approach allows teams to build both, simple table with text content and rich tables with interactive content that are integrated with libraries like TanStack Table.
With the recent theming improvements, we're adding a new website page for previewing theme values on a real component examples.
This is a first step towards making it easier to create new themes.
In the upcoming releases, we're planning to expand its functionality with user interface for the runtime theme editing and theme values auto-generation.
Button.Aligner
used with ghost
buttonsTabs.List
is scrollablespace-between
value for the justify
propertyPublished by blvdmitry about 1 year ago
Full web changelog · Documentation
npm install reshaped
Focus trapping:
Fixed navigation edge cases for the hover trigger type causing the trap to be triggered without any focusable elements inside the flyout
Published by blvdmitry about 1 year ago
Full web changelog · Documentation
npm install reshaped
We have added a new way to work with themes without building them using our CLI ahead of time.
With the new runtime theming feature, you can create new themes directly in the browser and insert them as a style tag, or create themes dynamically in Node.js and return css file contents.
We're adding a new compound component for Button
– Button.Group
, which lets you wrap any number of buttons to colocate multiple actions together.
It leverages the composition approach, which means you can combine items with other components like DropdownMenu
.
onClick
was triggered multiple times on Enter key pressTabs.Item
with framework router link components and other custom wrappershref
support for Tabs.Item
attributes
support for Tabs.Item
toast.hide
is called immediately after toast was triggered