Skip to content

Commit f38de86

Browse files
adamwathanadamwathan
committed
WIP
1 parent 622e360 commit f38de86

File tree

3 files changed

+174
-1
lines changed

3 files changed

+174
-1
lines changed

‎src/pages/blog/catalyst-v0-1-0/banner.png

85.5 KB
Loading

‎src/pages/blog/catalyst-v0-1-0/catalyst-installation.jpg

120 KB
Loading

‎src/pages/blog/catalyst-v0-1-0/index.mdx

Lines changed: 174 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,182 @@ import card from './card.png'
33

44

55
export const meta = {
6-
title: "Introducing Catalyst v0.1.0: A modern application UI kit for React",
6+
title: "Introducing Catalyst: A modern UI kit for React",
77
description: `There’s nothing like building a major new product for finding all the features you wish you had in your own tools, so we capitalized on that inspiration and turned it into this — Tailwind CSS v3.4.`,
88
date: '2023-12-20T20:00:00.000Z',
99
authors: [adamwathan],
1010
image: card,
1111
}
12+
13+
**Today's the day** — we just hit the deploy button on [Catalyst v0.1.0](https://tailwindui.com/templates/catalyst), just in time for your holiday hacking sessions.
14+
15+
![Overview of components included in Catalyst v0.1.0](./banner.png)
16+
17+
**Catalyst is our first fully-componentized, batteries-included application UI kit** — real React components with thoughtfully designed APIs that build on each other to create a real component architecture, the same way we'd do it in a real application.
18+
19+
Check out the [live demo](https://catalyst.tailwindui.com), read the [documentation](https://catalyst.tailwindui.com/docs), and if you're a Tailwind UI All-Access customer, [download it](https://tailwindui.com/templates/catalyst/download) and try it out in a new project today.
20+
21+
Catalyst v0.1.0 is a development preview and there's a lot more to come, but we're releasing it today so you can play with it right away as we continue to build new components and find ways to make it an even better experience.
22+
23+
---
24+
25+
## Your components, not ours
26+
27+
With Catalyst, we set out to build a UI kit that tomorrow's Stripe or Linear would feel good about using to build their products — design-obsessed teams who want to own their UI components, and would never choose an off-the-shelf library.
28+
29+
So it's not a dependency you install, instead you download the source and copy the components into your own project where they become the starting point for your own component system:
30+
31+
![](./catalyst-installation.jpg)
32+
33+
Want to change the border radius on your buttons? Just open `button.tsx` and change some classes. You don't need to open a GitHub issue and try to convince us to expose a new configuration option.
34+
35+
Catalyst is a "disappearing UI kit" — six months after you've installed it, you should almost forget it wasn't you who built the original components.
36+
37+
---
38+
39+
## Design is in the details
40+
41+
Getting the visual style right on a project like this is hard. We went into it with a few goals:
42+
43+
- **Be competitive** — we wanted to design something that could hold its own next to some of the nicest interfaces on the web today.
44+
- **Be timeless** — we didn't want to design something that would look dated in 6 months because it leaned too hard into specific trends.
45+
- **Be productive** — whatever we designed needed to feel fast and efficient to real users, not just look great in a Dribbble shot.
46+
47+
It took a lot of work and there were a lot of trade-offs to balance, but I'm really in love with where we ended up:
48+
49+
_Some sort of image showcasing the visual style_
50+
51+
**To be competitive**, we invested in lots of details like subtle backdrop blurs on dropdown menus, perfecting the way shadows and borders blend with each other on form controls, and thoughtful use of animation in things like dialogs and toggle switches.
52+
53+
_Some image showing the stuff I mentioned above_
54+
55+
**To be timeless**, we tried to strike the right balance between flat and skeumorphic design, with just enough depth cues that our components will look great even if the trends change a bit in either direction.
56+
57+
_Something showing off button design probably_
58+
59+
We also took inspiration from the browser, and used unopionated blue focus rings to avoid picking a treatment that might soon look out of fashion.
60+
61+
_Something showing off focus rings_
62+
63+
**To be productive**, we worked carefully to make sure there was still plenty of whitespace, but that the UI was still dense enough to fit plenty of information on the screen.
64+
65+
_Something showing tables probably_
66+
67+
We also limited our use of transitions and animations only to places where it felt important, and even then tried to keep them fast so it never feels like you're waiting on the UI.
68+
69+
**Catalyst also ships with full dark mode support**, and anything you build with Catalyst components automatically adapts between light and dark modes.
70+
71+
_Something showing dark mode_
72+
73+
It's not obvious, but there are a ton of little details we had to change to make things look their best in dark mode, like adjusting shadows, changing outer rings to inner rings to mimic the change in lighting, and more.
74+
75+
---
76+
77+
## Modeled after HTML
78+
79+
We spent a _lot_ of time working on the component APIs, trying very hard to make things really easy to drop in and use right away, without compromising on flexibility.
80+
81+
82+
It's common for UI libraries to use APIs like this:
83+
84+
```jsx
85+
function Example() {
86+
return (
87+
<TextField
88+
name="product_name"
89+
label="Product name"
90+
description="Use the name you'd like people to see in their cart."
91+
/>
92+
)
93+
}
94+
```
95+
96+
But with all the props living on the same component, it starts to get difficult to do things like add a class just to the `<input>` element itself.
97+
98+
Ultimately that led us to APIs that closely mirrored HTML, where it's rare that a single component renders more than one element.
99+
100+
Creating a text field with Catalyst looks like this for example:
101+
102+
```jsx
103+
import { Description, Field, Label } from '@/components/fieldset'
104+
import { Input } from '@/components/input'
105+
106+
function Example() {
107+
return (
108+
<Field>
109+
<Label>Product name</Label>
110+
<Description>Use the name you'd like people to see in their cart.</Description>
111+
<Input name="product_name" />
112+
</Field>
113+
)
114+
}
115+
```
116+
117+
By keeping things composable like this, it makes it really easy to do things like constrain the width of the input, without constraining the width of any of the other elements:
118+
119+
120+
```diff-jsx
121+
import { Description, Field, Label } from '@/components/fieldset'
122+
import { Input } from '@/components/input'
123+
124+
function Example() {
125+
return (
126+
<Field>
127+
<Label>Product name</Label>
128+
<Description>Use the name you'd like people to see in their cart.</Description>
129+
- <Input name="product_name" />
130+
+ <Input name="product_name" className="max-w-sm" />
131+
</Field>
132+
)
133+
}
134+
```
135+
136+
It also makes it easy to move the description _below_ the input, instead of above:
137+
138+
```diff-jsx
139+
import { Description, Field, Label } from '@/components/fieldset'
140+
import { Input } from '@/components/input'
141+
142+
function Example() {
143+
return (
144+
<Field>
145+
<Label>Product name</Label>
146+
- <Description>Use the name you'd like people to see in their cart.</Description>
147+
<Input name="product_name" className="max-w-sm" />
148+
+ <Description>Use the name you'd like people to see in their cart.</Description>
149+
</Field>
150+
)
151+
}
152+
```
153+
154+
It took a lot of experimenting to figure out the right way to make these APIs work, especially around details like adding layout styles to the right children, but the payoff was worth it, and these components are really a delight to use.
155+
156+
---
157+
158+
## Powered by the next generation of Headless UI
159+
160+
We released the first version of [Headless UI](https://headlessui.com/) back in the summer of 2020, but it's been just over a year now since the last significant feature release because of all the work we've been focused on with Tailwind CSS itself.
161+
162+
Catalyst was the perfect excuse to get our hands dirty with Headless UI again, and we quickly found lots of ways to improve the project to simplify the code in Catalyst itself.
163+
164+
We just published Headless UI v2.0.0-alpha.1, which includes a ton of new stuff:
165+
166+
- **Built-in anchor positioning** — using [Floating UI](https://floating-ui.com/), components like `Menu`, `Listbox`, and more can now automatically position their popovers to be anchored to their trigger, adapting as needed to changes in the viewport.
167+
- **Headless checkbox component** — we've added a headless `Checkbox` component to complement our existing `RadioGroup` component, making it easy to build totally custom checkbox controls.
168+
- **HTML form components** — we've added `Input`, `Select`, `Textarea`, `Label`, `Description`, `Fieldset`, and `Legend` components that handle all of the ID generation and `aria-*` attribute mapping you need to do to connect form fields together.
169+
- **Improved hover and focus-visible detection** — using hooks from the awesome [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) library under the hood, Headless UI now adds smarter `data-hover` and `data-focus` attributes to your controls that behave more consistently across different devices than the native pseudo-classes.
170+
- **Combobox list virtualization** — the next version of Headless UI can now handle giant lists of comobox options with no performance issues.
171+
172+
...with plenty of other improvements to come, including a date picker, tooltips, and more.
173+
174+
These improvements are React-only for now during this early alpha period, but we plan to bring all of these improvements to Vue as well before tagging v2.0.
175+
176+
---
177+
178+
## Try it out
179+
180+
[Catalyst](https://tailwindui.com/templates/catalyst) is a free update for all [Tailwind UI All-Access](https://tailwindui.com/all-access) customers, and you can [download it](https://tailwindui.com/templates/catalyst/download) and start playing with this first release today.
181+
182+
More work went into getting everything we're releasing today just right than you could ever imagine, but we're eager for feedback and ways it could be improved, so build some stuff with it and let us know what you think.
183+
184+
We're going to take a couple weeks to recharge over the holidays, but we'll be right back into Catalyst in the new year, working on new components like application layouts, comboboxes, command palettes, tooltips, and more.

0 commit comments

Comments
 (0)