shadcn.io is not affiliated with official shadcn/ui
Double Helix Company DNA Block for React Aria
A company-DNA section for a survey tool: a hand-drawn double helix with five rungs in a framed figure, and a list of five traits that lights a rung and shows what the trait means and how it is hired for.
Installation
Overview
A company-DNA section for React with React Aria. A split divider runs from the page's top rule to the foot of the block. At the start, a figure: a double helix drawn in SVG, with five rungs, one per trait, in a frame with + marks on its corners. At the end, a title and a list of the five traits as radio choices, then the chosen trait's title, what it means and how the company hires for it. Choosing a trait lights its rung in the helix. Every trait's text is stacked unseen under the open one, so the block keeps its height. On a phone the helix sits between the title and the list. It's built from Guides, Radio Group and Field, with CSS transitions for the entrance and the rung, and your theme's tokens for every colour. For an about page, a hiring page or a handbook that wants to say who a company hires, not only what it believes. The company and its traits are invented for the example.
FAQ
How do I change the traits?
Edit TRAITS at the top of the file: each has an id, a label, a one-line tagline, what it meanings and how you hire for it. Add a trait and the list grows by one row; the helix's rungs are computed from the number of traits, so keep it near five for a drawing that reads, and change PERIOD if you want more turns.
How is the helix drawn?
Two strands are drawn as cosine waves in SVG, with the points computed once at module scope, and the rungs join them: short pale ones for the helix's body and one long rung per trait at each half turn. The drawing is decorative and hidden from assistive technology; the list beside it is the real control, and the caption says what the rungs are.
How does the choice work with a keyboard and a screen reader?
The traits are a radio group with one tab stop: the arrow keys move between traits and choose as they go, and Tab leaves the group. Selecting a trait changes the text below it, which sits in a polite live region, so the new meaning is announced. The selected radio, the rung and the card's border all show it in foreground tones, not the primary colour.
Why doesn't the page move when I pick a trait?
The five texts differ in length. An unseen, inert copy of each sits in the same grid cell as the open one, so the cell keeps the height of the longest and nothing below it moves.