Deeper UI kit and component need notes

[thomasgwatson]

Overall component needs

Component comparsion

Component	We have	We need	Radix	Shadcn	We should add
Accordion	-	-	-	Accordion	?
Alert	-	-	-	Alert	?
AspectRatio	-	-	AspectRatio	x	x
Avatar	x	x	Avatar	x	-
Badge	x	x	Avatar/IconButton	x	I don't think we actually use this one
BadgeEmoji	x	x	custom?	-	-
BadgedIcon	x	x	IconButton	-	-
Blockquote	-	-	Blockquote	-	-
Breadcrumb	-	-	-	Breadcrumb	Kinda nice for navigation/context clarity but its not in our designs
Button	x	x	Button	x	-
Calendar	-	-	-	Calendar	maybe not enough?
Callout	-	x	Callout	-	x
Card	-	x	Card	x	x
Carousel	-	-	-	Carousel	?
Chart	-	-	-	Chart	?
Checkbox	x	x	Checkbox	x	-
CheckboxGroup	-	x	CheckboxGroup	-	x
Code	-	-	Code	-	-
Collapsible	-	-	-	Collapsible	?
Combobox	-	-	-	Combobox	Probably, its a dropdown with autocomplete/search built-in
Command	-	-	-	Command	menu with autocomplete/search built-in, really nice
ContextMenu	-	?	ContextMenu	x	? right-click area
DataList	-	?	DataList	-	?
DatePicker	x	x	-	DatePicker	but no time? :(
Dialog	x	x	Dialog	AlertDialog/Dialog	x
Drawer	-	?	-	Drawer	I like it
Dropdown	x	x	DropDownMenu	DropDownMenu	-
DropdownButton	x	x	DropDownMenu	-	-
Em	-	?	Em	-	?
Form	-	x	-	Form	Wrapper around react-hook-form
EmojiPill	x	x	-	-	-
Heading	-	x	Heading	-	x
HoverCard	-	?	HoverCard	x	Like a link preview?
Icon	x	x	IconButton	-	-
InputOTP	-	x	-	InputOTP	we would use this
Inset	-	?	Inset	-	Looks really useful
Kbd	-	?	Kbd	-	-
Label	-	x	-	Label	x
Link	-	x	Link	-	x
Loading	x	x	Spinner	-	-
ModalDialog	x	x	Dialog	-	-
MultiSelect	x	x	-	-	-
NavigationMenu	-	x	-	NavigationMenu	lots really cool
Progress	x	x	Progress	x	x
Popover	-	?	Popover	x	?
Pill	x	x	Badge	-	-
Quote	-	-	Quote	-	-
Radio	?	?	Radio	x	?
RadioGroup	?	?	RadioGroup	x	?
RadioCards	?	?	RadioCards	-	?
Resizable	?	?	-	x	?
ScrollArea	x	x	SrcollArea	x	x
Select	x	x	Select	x	-
Separator	-	x	Separator	x	x
SegmentedControl	-	x	SegmentedControl	-	x
Skeleton	-	x	Skeleton	x	x
Sidebar	?	?	-	Sidebar	This looks really powerful
SliderInput	x	x	Slider	x	-
Sonner	?	?	-	Sonner	Nice stacking toast component, good for little messages to the user
Switch	x	x	Switch	x	-
SwitchStyled	x	x	Switch	Switch	-
Strong	-	?	Strong	-	?
Table	-	?	Table	DataTable/Table	?
Tabs	-	-	Tabs	x	x
TabNav	-	-	TabNav	-	x
Text	-	-	Test	-	x
TextInput	x	x	TextField/TextArea	Input	-
Toast	-	?	-	Toast	? nice for little messages
ToolTip	x	x	ToolTip	x	-

Radix

Good-to-read for an overview of properties of Radix themes as a UI kit: https://www.radix-ui.com/themes/docs/overview/styling

Topline notes:

• Want to have the components rapidly and accurately modelled in figma? Use the figma ui kit
• The main styling input is wrappers. Wrap the whole app with the default theme, and then wrap sub-sections for their specific styles (easy customization).
• want to tweak the underlying details of how the themes or layouts are applied? Look at the tokens used under the hood and override those at a configuration level
• Want a different look to a component? FIrst check if one of the three offered variants will fit
• Don't like the component at all? Build your own from radix primitives and it will still respond to the other parts of the system
• Darkmode supported out of the box
• Responsive to viewport size, out of the box

Sample all the components here, in the Playground

Styling

https://www.radix-ui.com/themes/docs/overview/styling

Overriding styles
Beyond simple style overrides, we recommend using the components as-is, or create your own versions using the same building blocks.

Most components do have className and style props, but if you find yourself needing to override a lot of styles, it’s a good sign that you should either:

• Try to achieve what you need with the existing props and theme configuration.
• See whether you can achieve your design by tweaking the underlying token system.
• Create your own component using lower-level building blocks, such Primitives and Colors.
• Reconsider whether Radix Themes is the right fit for your project.

Color

Brand color
You can replace a specific color with your brand color by remapping the corresponding token. Usually, you’d override step 9 of the scale that you are using as your theme accent.

.radix-themes {
--my-brand-color: #3052f6;
--indigo-9: var(--my-brand-color);
--indigo-a9: var(--my-brand-color);
}
In this example, using solid-colored indigo components will now reference your custom color.

Custom palette
You can use the custom color palette tool to generate a custom palette based just on a couple reference colors. Once you are happy with the result, paste the generated CSS into your project. You can rename the generated colors to match the accent that you want to use in your theme.

To generate dark theme colors, toggle the appearance to use the dark theme. Make sure to paste the generated CSS after your light theme color overrides.

Combining with Tailwind

Simple utility to align tailwind with the radix tokens

Tailwind
Tailwind is great. Yet, if you plan to use Radix Themes with Tailwind, keep in mind how its ergonomics may encourage you to create complex styles on the fly, sometimes reaching into the component internals without friction.

Tailwind is a different styling paradigm, which may not mix well with the idea of a closed component system where customization is achieved through props, tokens, and creating new components on top of a shared set of building blocks.

Tailwind base styles
As of Tailwind v3, styles produced by the @tailwind directive are usually appended after any imported CSS, no matter the original import order. In particular, Tailwind’s button reset style may interfere with Radix Themes buttons, rendering certain buttons without a background color.

Workarounds:

Don’t use @tailwind base
Set up separate CSS layers for Tailwind and Radix Themes
Set up postcss-import and manually import Tailwind base styles via @import tailwindcss/base before Radix Themes styles. Example setup

Multi-part components we need currently have

No doubt there are others hiding in other folders

• Affiliation
• AttachmentManager
• CardFileAttachments
• CardImageAttachments
• CommentCard
• CreateGroup
• CreateModal
• CreateTopic
• EmojiPicker
• EmojiRow
• ErrorBoundary
• EventInviteDialog
• FancyLink
• FarmGroupDetailBody (defacto toast)
• GeocoderAutocomplete
• GoogleButton
• GroupAboutVideoEmbed
• GroupBanner
• GroupButton
• GroupCard
• GroupNetworkMap
• GroupsList
• GroupsSelector
• Highlight
• HyloCookieConsent
• HyloEditor
• HyloHTML
• IconSelector
• ImageCarousel
• KeyControlledList
• LinkPreview
• LocationInput
• Map
• Member
• MemberSelector
• Membership
• ModalFooter (seemingly not used? Delete)
• ModalSidebar (seemingly not used? Delete)
• ModerationListItem
• NoPosts
• NotFound
• PeopleTyping
• PillBox
• PostBigGridItem
• PostCard
• PostEditor
• PostLabel
• PostListRow
• PostPeopleDialog
• PostSelector
• PublicToggle
• QuorumBar
• RemovableListItem
• RoundImage
• RoundImageRow
• ScrollListener
• SendAnnouncementModal
• SettingsControl
• SimpleTabBar
• SkillLabel
• SkillsSection
• SkillsToLearnSection
• SkillsToLearnSection
• SocketListener (No change likely required)
• StreamViewControls
• TagInput
• TopicFeedHeader
• TopicSelector
• TopicSupportCommingSoon
• UploadAttachmentButton
• VisibilityToggle
• Widget (To be repurposed, basically delete)